/* ==============================================
   MOBILE PRO V2 — XVideos/Pornhub-tier UX
   Premium mobile experience pack
   ============================================== */

/* ===== 1. HIDE PROMO BAR on mobile (saves precious space) ===== */
@media (max-width:767px) {
    /* The "Nouveautés chaque semaine" top banner */
    body > div.bg-gradient-to-r:first-of-type,
    body > .promo-bar,
    a[href*="subscription"][class*="block"][class*="text-center"]{
        font-size:11px !important;
        padding:4px 8px !important;
        line-height:1.2 !important;
    }
    /* Hide the affiliate banner cards on mobile homepage (too cluttered) */
    section a[href*="bongacams"],
    section a[href*="snapdate"],
    section a[href*="instacams"],
    section a[href*="blacked"],
    section a[href*="mybabes"]{
        display:none !important;
    }
}

/* ===== 2. COMPACT HEADER MOBILE (more content visible) ===== */
@media (max-width:767px) {
    header,nav.sticky{
        padding-top:6px !important;
        padding-bottom:6px !important;
    }
    header .h-16,header .h-14{height:48px !important}
    header .text-xl,header .text-2xl{font-size:1.05rem !important}
    header svg.w-6{width:20px !important;height:20px !important}
    /* Logo plus petit mobile */
    header img,header .logo{max-height:32px !important}
    /* Premium button mobile : icon only */
    header a[href*="subscription"] span,
    header a[href*="premium"] span{display:none !important}
}

/* ===== 3. STICKY MOBILE TOOLBAR (Search + Random + Filter) ===== */
.jdr-mobile-toolbar{
    display:none;
}
@media (max-width:767px) {
    .jdr-mobile-toolbar{
        display:flex !important;
        position:sticky;top:0;z-index:50;
        background:rgba(11,11,16,.92);
        backdrop-filter:saturate(180%) blur(20px);
        -webkit-backdrop-filter:saturate(180%) blur(20px);
        padding:8px;gap:8px;
        align-items:center;
        border-bottom:1px solid rgba(255,255,255,.06);
    }
    .jdr-mobile-toolbar .search-box{
        flex:1;position:relative;
    }
    .jdr-mobile-toolbar input[type="search"]{
        width:100%;height:36px;
        background:#13151c;border:1px solid #1c1f2b;
        border-radius:18px;padding:0 12px 0 36px;
        color:#fff;font-size:14px;
    }
    .jdr-mobile-toolbar .search-icon{
        position:absolute;left:12px;top:50%;transform:translateY(-50%);
        color:#94a3b8;width:18px;height:18px;
    }
    .jdr-mobile-toolbar a.tb-btn{
        display:inline-flex;align-items:center;justify-content:center;
        width:36px;height:36px;
        background:#13151c;border:1px solid #1c1f2b;
        border-radius:50%;color:#cbd5e1;
        text-decoration:none;
        flex-shrink:0;
    }
    .jdr-mobile-toolbar a.tb-btn.primary{
        background:linear-gradient(135deg,#ff2d2d,#ff6b35);
        color:#fff;border-color:#ff2d2d;
    }
}

/* ===== 4. QUICK CATEGORY CHIP BAR (under header) ===== */
@media (max-width:767px){
    .jdr-quick-cats{
        display:flex !important;
        gap:6px;
        overflow-x:auto;-webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        padding:8px 10px;
        background:rgba(13,15,20,.6);
        border-bottom:1px solid rgba(255,255,255,.04);
        scrollbar-width:none;-ms-overflow-style:none;
    }
    .jdr-quick-cats::-webkit-scrollbar{display:none}
    .jdr-quick-cats a{
        flex:0 0 auto;
        scroll-snap-align:start;
        padding:6px 12px;
        background:rgba(255,255,255,.04);
        border:1px solid rgba(255,255,255,.06);
        border-radius:999px;
        color:#cbd5e1;
        font-size:12px;font-weight:600;
        text-decoration:none;
        white-space:nowrap;
        transition:all .2s;
    }
    .jdr-quick-cats a:hover,.jdr-quick-cats a.active{
        background:linear-gradient(135deg,#ff2d2d,#ff6b35);
        color:#fff;border-color:#ff2d2d;
    }
}

/* ===== 5. FLOATING RANDOM BUTTON (mobile) ===== */
.jdr-random-fab{
    display:none;
}
@media (max-width:767px) {
    .jdr-random-fab{
        display:flex !important;
        position:fixed;
        bottom:75px;right:14px;
        width:54px;height:54px;
        background:linear-gradient(135deg,#ff2d2d,#ff6b35);
        color:#fff;border:none;border-radius:50%;
        align-items:center;justify-content:center;
        box-shadow:0 8px 24px -4px rgba(255,45,45,.6);
        cursor:pointer;
        z-index:999;
        animation:randomPulse 3s ease-in-out infinite;
    }
    .jdr-random-fab svg{width:24px;height:24px}
    @keyframes randomPulse{
        0%,100%{box-shadow:0 8px 24px -4px rgba(255,45,45,.6)}
        50%{box-shadow:0 8px 30px -2px rgba(255,45,45,.9)}
    }
}

/* ===== 6. MOBILE CARDS — BIGGER THUMBS LIKE XVIDEOS ===== */
@media (max-width:480px) {
    /* Even bigger on small phones */
    .grid.grid-cols-1,.grid.grid-cols-2{grid-template-columns:repeat(2,1fr) !important;gap:6px !important}
    .vcard-hover .aspect-video{min-height:90px}
}
@media (min-width:481px) and (max-width:767px) {
    .grid.grid-cols-1,.grid.grid-cols-2{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
}

/* Make the play button bigger on mobile (touch-friendly) */
@media (max-width:767px) {
    .vcard-hover .w-11{width:48px !important;height:48px !important}
    .vcard-hover .w-11 svg{width:22px !important;height:22px !important}
    /* Always-visible play button on mobile (no hover state on touch devices) */
    .vcard-hover .group-hover\:opacity-100{opacity:.7 !important}
}

/* ===== 7. SECTION HEADERS MOBILE — more compact ===== */
@media (max-width:767px) {
    section h2.text-xl,section h2.text-2xl{
        font-size:.95rem !important;
        font-weight:700;
        margin-bottom:.5rem !important;
        text-transform:uppercase;
        letter-spacing:.03em;
    }
    section h2 + a,section .flex.items-center.justify-between a[href*="?"]{
        font-size:11px !important;
    }
    /* Section spacing reduction */
    section,section.py-8{padding-top:.75rem !important;padding-bottom:.75rem !important}
    .container{padding-left:8px !important;padding-right:8px !important}
}

/* ===== 8. BOTTOM SHEET MOBILE MENU ===== */
.jdr-bottom-sheet{
    position:fixed;
    inset-x:0;bottom:0;
    background:#0d0f14;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    border-top:1px solid rgba(255,255,255,.1);
    padding:20px 16px 80px;
    transform:translateY(100%);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
    z-index:9999;
    max-height:80vh;overflow-y:auto;
    box-shadow:0 -20px 40px -10px rgba(0,0,0,.6);
}
.jdr-bottom-sheet.open{transform:translateY(0)}
.jdr-bottom-sheet::before{
    content:"";
    display:block;
    width:48px;height:4px;
    background:rgba(255,255,255,.2);
    border-radius:2px;
    margin:0 auto 16px;
}
.jdr-bottom-sheet-backdrop{
    position:fixed;inset:0;
    background:rgba(0,0,0,.7);
    opacity:0;pointer-events:none;
    transition:opacity .3s;
    z-index:9998;
    backdrop-filter:blur(4px);
}
.jdr-bottom-sheet-backdrop.open{opacity:1;pointer-events:auto}

/* ===== 9. THUMBS — FORCE LOAD on mobile (no lazy) for above-the-fold ===== */
@media (max-width:767px) {
    /* First 6 video cards eager-load for fast LCP */
    .vcard-hover:nth-child(-n+6) img[loading="lazy"]{
        loading:eager;
    }
}

/* ===== 10. INFINITE SCROLL preparation ===== */
.jdr-loading-sentinel{
    height:1px;
    width:100%;
}

/* ===== 11. SWIPE-FRIENDLY VIDEO CAROUSELS ===== */
@media (max-width:767px) {
    /* Force "Découvertes" "Top de la semaine" sections into horizontal scroll */
    section .grid:not(.jdr-cat-scroll){
        /* Only first section becomes horizontal carousel on mobile */
    }
}

/* ===== 12. MOBILE TYPOGRAPHY rhythm ===== */
@media (max-width:767px) {
    body{font-size:14px;-webkit-text-size-adjust:100%}
    .text-zinc-400,.text-zinc-500{color:#a1a1aa !important}
}

/* ===== 13. TAP HIGHLIGHTS removal (cleaner) ===== */
*{-webkit-tap-highlight-color:transparent}
a,button{outline:none;-webkit-user-select:none;user-select:none}

/* ===== 14. SCROLLBAR HIDE on mobile carousels ===== */
@media (max-width:767px) {
    .jdr-cat-scroll::-webkit-scrollbar,
    .orient-tabs-inner::-webkit-scrollbar{display:none}
    .jdr-cat-scroll,.orient-tabs-inner{scrollbar-width:none;-ms-overflow-style:none}
}

/* ===== 15. PWA APPEARANCE polish ===== */
@media (display-mode:standalone) {
    /* When installed as PWA, hide some elements */
    body{padding-top:env(safe-area-inset-top, 0)}
}

/* ===== 16. PERFORMANCE — disable expensive animations on low-end devices ===== */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}

/* ===== 17. AD ZONES — proper sizing on mobile ===== */
@media (max-width:767px) {
    ins.eas6a97888e2{max-width:100% !important;display:block !important;margin:0 auto}
    .ad-slot,[class*="ad-banner"]{margin:8px 0 !important;border-radius:8px;overflow:hidden}
}

/* ===== 18. FAB SECONDARY (favorites) ===== */
.jdr-fab-secondary{display:none}
@media (max-width:767px) {
    .jdr-fab-secondary{
        position:fixed;
        bottom:75px;right:78px;
        width:42px;height:42px;
        background:rgba(13,15,20,.9);
        backdrop-filter:blur(8px);
        color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        cursor:pointer;
        z-index:998;
        opacity:0;transform:scale(.8);
        transition:opacity .3s,transform .3s;
    }
    .jdr-fab-secondary.show{opacity:1;transform:scale(1)}
}

/* ===== 19. CARD FOOTER more compact on mobile ===== */
@media (max-width:767px) {
    .vcard-hover .p-3,.vcard-hover [class*="p-3"]{padding:6px 8px 8px !important}
    .vcard-hover h3{margin:0 !important}
    /* Cat label below title */
    .vcard-hover [class*="text-zinc-400"]{font-size:10px !important;margin-top:2px !important}
}

/* ===== 20. MOBILE FOOTER simplified ===== */
@media (max-width:767px) {
    footer .container{padding:1rem 8px !important}
    footer .grid{grid-template-columns:repeat(2,1fr) !important;gap:.75rem !important}
    footer h3{font-size:11px !important;margin-bottom:8px !important}
    footer ul li a{font-size:12px !important}
    /* Hide partner sites column on mobile (clutter) */
    footer .grid > div:nth-child(4){display:none !important}
}