/* ==============================================
   MOBILE PRO PACK — XVideos/XNXX/Pornhub-tier UX
   ============================================== */

/* ===== 1. MOBILE VIDEO CARDS — bigger, more visual ===== */
@media (max-width: 767px) {
    /* Force 2 col grid on mobile (instead of 1 col) like xvideos */
    .grid.grid-cols-1{grid-template-columns:repeat(2,1fr) !important}

    /* Smaller padding for denser layout */
    .vcard-hover a > div.p-3,
    .vcard-hover a > div[class*="p-2"]{padding:6px 8px !important}

    /* Title smaller but readable */
    .vcard-hover h3,
    .vcard-hover .text-sm.font-semibold,
    .vcard-hover .font-medium{
        font-size:12px !important;
        line-height:1.25 !important;
        font-weight:600 !important;
        -webkit-line-clamp:2;
        line-clamp:2;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    /* HD/Premium/Free badges — smaller for mobile */
    .vcard-hover [class*="text-[10px]"]{font-size:9px !important;padding:2px 6px !important}

    /* Hide tag pills on mobile (too much clutter) */
    .vcard-hover .flex.gap-1.flex-wrap{display:none !important}

    /* Container padding reduction */
    .container.mx-auto.px-4{padding-left:8px !important;padding-right:8px !important}

    /* Grid gap reduction */
    .grid{gap:8px !important}

    /* Sections padding reduction */
    section.py-8{padding-top:1rem !important;padding-bottom:1rem !important}
    section.py-12{padding-top:1.5rem !important;padding-bottom:1.5rem !important}

    /* Section headings smaller */
    h2.text-xl,h2.text-2xl{font-size:1rem !important;font-weight:700}
}

/* ===== 2. DURATION BADGE — XVideos-style bottom-right ===== */
.vcard-hover .aspect-video{position:relative}
.vcard-hover .aspect-video::after{
    content:attr(data-duration);
    position:absolute;
    bottom:6px;right:6px;
    z-index:14;
    background:rgba(0,0,0,.85);
    color:#fff;
    font-size:11px;font-weight:700;
    padding:2px 6px;
    border-radius:4px;
    pointer-events:none;
    font-feature-settings:"tnum";
    /* injected via JS if data-duration is set */
}

/* ===== 3. VIEW COUNT BADGE — bottom-left ===== */
.vcard-hover .aspect-video[data-views]::before{
    content:"▶ " attr(data-views);
    position:absolute;
    bottom:6px;left:6px;
    z-index:14;
    background:rgba(0,0,0,.7);
    color:#ff6b35;
    font-size:10px;font-weight:600;
    padding:2px 6px;
    border-radius:4px;
    pointer-events:none;
    backdrop-filter:blur(4px);
}

/* ===== 4. FLOATING "BACK TO TOP" button ===== */
.jdr-back-to-top{
    position:fixed;
    bottom:80px;right:16px;
    width:48px;height:48px;
    background:linear-gradient(135deg,#ff2d2d,#ff6b35);
    color:#fff;
    border:none;border-radius:50%;
    cursor:pointer;
    box-shadow:0 8px 24px -4px rgba(255,45,45,.5);
    display:flex;align-items:center;justify-content:center;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);
    z-index:999;
}
.jdr-back-to-top.show{opacity:1;transform:translateY(0)}
.jdr-back-to-top:hover{transform:scale(1.1)}
.jdr-back-to-top svg{width:20px;height:20px}
@media(min-width:768px){.jdr-back-to-top{bottom:24px;right:24px}}

/* ===== 5. PULL-TO-REFRESH visual hint ===== */
.jdr-pull-hint{
    position:fixed;
    top:-50px;left:50%;transform:translateX(-50%);
    background:#13151c;
    color:#fff;
    padding:8px 16px;
    border-radius:0 0 12px 12px;
    font-size:12px;
    transition:top .3s;
    z-index:998;
}

/* ===== 6. STICKY SEARCH (mobile) ===== */
@media (max-width:767px) {
    .jdr-sticky-search{
        position:sticky;top:0;z-index:50;
        background:rgba(11,11,16,.9);
        backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
        padding:8px;
        border-bottom:1px solid rgba(255,255,255,.06);
    }
    .jdr-sticky-search input{
        width:100%;height:40px;
        background:#13151c;
        border:1px solid #1c1f2b;
        border-radius:20px;
        padding:0 16px 0 40px;
        color:#fff;
        font-size:14px;
    }
    .jdr-sticky-search-icon{
        position:absolute;left:18px;top:50%;transform:translateY(-50%);
        color:#94a3b8;
    }
}

/* ===== 7. MOBILE NAV — improvement of bottom nav ===== */
@media (max-width:767px) {
    #mobile-bottom-nav .text-\[10px\]{font-size:10px;font-weight:600}
    /* Visual indicator under active tab */
    #mobile-bottom-nav a[class*="text-\\[\\#ff2d2d\\]"]{
        position:relative;
    }
    /* Active dot indicator */
    #mobile-bottom-nav a > svg{transition:all .25s cubic-bezier(.34,1.56,.64,1)}
}

/* ===== 8. THUMB ASPECT 16:9 forced on mobile (consistent grid) ===== */
@media (max-width:767px){
    .vcard-hover .aspect-video{aspect-ratio:16/9 !important;min-height:100px}
}

/* ===== 9. PWA install banner styling ===== */
.jdr-pwa-banner{
    position:fixed;
    bottom:70px;left:8px;right:8px;
    background:linear-gradient(135deg,#1a1d29,#0d0f14);
    border:1px solid #ff2d2d;
    border-radius:12px;
    padding:12px;
    z-index:997;
    display:none;
    box-shadow:0 8px 32px -8px rgba(0,0,0,.6);
}
.jdr-pwa-banner.show{display:flex;align-items:center;gap:10px}

/* ===== 10. INFINITE SCROLL loading indicator ===== */
.jdr-loading-more{
    text-align:center;padding:2rem;
    color:#94a3b8;font-size:14px;
}
.jdr-loading-more::before{
    content:"";
    display:inline-block;
    width:20px;height:20px;
    border:2px solid #1c1f2b;border-top-color:#ff2d2d;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
    vertical-align:middle;
    margin-right:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 11. THUMB SHIMMER on load (skeleton) ===== */
.vcard-hover .aspect-video img:not([src]),
.vcard-hover .aspect-video img[src=""]{
    background:linear-gradient(90deg,#1a1d29 0%,#2a2d39 50%,#1a1d29 100%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== 12. CHIP-STYLE category filters ===== */
.jdr-chip-bar{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:8px 12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
}
.jdr-chip-bar::-webkit-scrollbar{display:none}
.jdr-chip-bar a{
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:6px 14px;
    background:#13151c;
    border:1px solid #1c1f2b;
    border-radius:999px;
    color:#cbd5e1;
    font-size:12px;font-weight:600;
    text-decoration:none;
    transition:all .2s;
    white-space:nowrap;
}
.jdr-chip-bar a.active,.jdr-chip-bar a:hover{
    background:linear-gradient(135deg,#ff2d2d,#ff6b35);
    color:#fff;
    border-color:#ff2d2d;
}

/* ===== 13. RESPONSIVE TEXT TRUNCATION ===== */
.vcard-hover h3,.vcard-hover .text-sm{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
}

/* ===== 14. HD BADGE OVERLAY on thumbnail ===== */
.vcard-hover .aspect-video::before{
    content:"HD";
    position:absolute;
    top:6px;right:6px;
    z-index:14;
    background:linear-gradient(135deg,#ff2d2d,#ff6b35);
    color:#000;
    font-size:9px;font-weight:900;
    padding:2px 5px;
    border-radius:3px;
    pointer-events:none;
    letter-spacing:.05em;
    box-shadow:0 2px 6px -1px rgba(255,45,45,.4);
}

/* ===== 15. MOBILE TYPOGRAPHY readability boost ===== */
@media (max-width:767px) {
    body{font-size:14px}
    .text-zinc-500{color:#94a3b8 !important}
    /* Better line-height for readability */
    p,li{line-height:1.5}
}

/* ===== 16. SAFE-AREA aware modal ===== */
.fixed.inset-0{
    padding-top:env(safe-area-inset-top, 0);
    padding-bottom:env(safe-area-inset-bottom, 0);
}