 /*
Theme Name:   OFchicks
Theme URI:    https://rebelkc.blog
Description:  Exclusive model vault theme with key-based and CPA-locker access.
Version:      2.1.0
Author:       Dev
Text Domain:  ofchicks
Tags:         dark, one-column, custom-background, featured-images, theme-options
*/

/* ─── Reset ─── */
*{margin:0;padding:0;box-sizing:border-box}

/* ─── Base ─── */
body{
    background:linear-gradient(135deg,#0f0a15 0%,#1a0f25 30%,#120a1d 70%,#0d0a15 100%);
    background-attachment:fixed;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:#f8fafc;min-height:100vh;
}
:root{
    --theme-brand-1:#a855f7;--theme-brand-2:#8b5cf6;--theme-text-strong:#f8fafc;
    --model-page-navbar-height:86px;
    --model-page-viewport-height:calc(100dvh - var(--model-page-navbar-height));
}
a{color:#c084fc;text-decoration:none}
a:hover{color:#e9d5ff}

/* ═══════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════ */
.site-navbar{
    background:rgba(12,10,22,.96);
    border-bottom:1px solid var(--theme-brand-1);
    padding:0 24px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    min-height:var(--model-page-navbar-height);
    position:relative;
    z-index:100;
}

.nav-left{display:flex;align-items:center}
.nav-center{display:flex;justify-content:center;gap:8px}
.nav-right{display:flex;gap:15px;align-items:center;justify-content:flex-end}

.site-logo{
    font-family:'Poppins',sans-serif;font-size:1.6rem;font-weight:700;
    background:linear-gradient(135deg,#fff,#c084fc);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    white-space:nowrap;
}

/* Nav Links */
.nav-link{
    color:#cbd5e1;font-weight:600;font-size:.88rem;
    text-transform:uppercase;letter-spacing:.6px;
    padding:8px 16px;border-radius:10px;
    transition:all .2s ease;
}
.nav-link:hover{
    color:#e9d5ff;background:rgba(168,85,247,.1);
}

/* Keys Badge & Auth Buttons */
.key-badge{
    background:#1e1b2e;padding:6px 14px;border-radius:30px;
    font-size:.8rem;border:1px solid #c084fc;white-space:nowrap;
}
.nav-btn{
    border:none;padding:6px 16px;border-radius:40px;font-weight:bold;
    cursor:pointer;font-size:.85rem;transition:all .2s ease;
    text-decoration:none;display:inline-flex;align-items:center;
}
.nav-btn--login{background:#8b5cf6;color:#fff}.nav-btn--login:hover{background:#7c3aed}
.nav-btn--logout{background:transparent;border:1px solid #f87171;color:#f87171}.nav-btn--logout:hover{background:rgba(248,113,113,.1)}

/* Hamburger Toggle (Hidden on Desktop) */
.nav-toggle{
    display:none;background:none;border:1px solid rgba(148,163,184,.3);
    color:#f8fafc;font-size:1.2rem;cursor:pointer;
    padding:8px 10px;border-radius:8px;transition:all .2s ease;
}
.nav-toggle:hover{border-color:#a855f7;color:#a855f7}


/* ─── Layout ─── */
.page{width:100%;max-width:1280px;margin:0 auto;padding:0}
.card{background:transparent;display:flex;flex-direction:column}

@media(min-width:901px){
    .card{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0;
        align-items:start;
    }
    .thumb-wrap{
        position:sticky; /* Keeps image in view while scrolling content */
        top:86px; /* Height of the navbar */
        height:calc(100vh - 86px);
    }
    .content{
        overflow-y:visible; /* Allows full page scrolling */
        height:auto;
        min-height:calc(100vh - 86px);
    }
}
@media(max-width:900px){
    .page{min-height:100vh;padding:0}
    .card{flex-direction:column}
    .thumb-wrap{min-height:320px}
}




/* ─── Thumbnail ─── */
.thumb-wrap{position:relative;background:#0b1120;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(139,92,246,.3);border-radius:0}
.thumb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.4) saturate(1.3);transform:scale(1.1);z-index:0}
.thumbnail-main{position:relative;z-index:1;max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain;display:block}
.thumb-name-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);padding:28px 20px 16px;font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;z-index:2}

/* ─── Content Panel ─── */
.content{background:rgba(15,23,42,.7);backdrop-filter:blur(3px);padding:20px 24px;border-left:1px solid rgba(139,92,246,.2)}
h1.model-title{font-family:'Poppins',sans-serif;font-size:2rem;background:linear-gradient(135deg,#e9d5ff,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.title-rule{width:60px;height:3px;background:#a855f7;margin:8px 0 18px;border-radius:4px;border:none}

/* ─── Buttons ─── */
.primary-btn,.secondary-btn{display:block;width:100%;text-align:center;text-decoration:none;border-radius:16px;padding:14px 18px;font-weight:800;transition:all .2s ease;cursor:pointer;font-size:1rem}
.primary-btn{background:linear-gradient(135deg,#ec4899,#db2777);border:none;color:#fff;box-shadow:0 6px 14px rgba(219,39,119,.3)}
.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.primary-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.secondary-btn{background:rgba(30,41,59,.7);border:1px solid #3b82f6;color:#bae6fd;margin-top:12px}
.secondary-btn:hover{background:rgba(59,130,246,.2);border-color:#60a5fa}.secondary-btn:disabled{opacity:.5;cursor:not-allowed}

/* ─── Meta ─── */
.meta{margin:20px 0 0;background:rgba(0,0,0,.25);border-radius:20px;padding:14px}
.meta-row{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.meta-row:last-child{border-bottom:none}
.meta-label{font-weight:600;color:#94a3b8}.meta-value{font-weight:500;color:#e2e8f0}

/* ─── Key Widget ─── */
.key-widget{margin-top:20px;background:rgba(0,0,0,.35);border-radius:20px;padding:14px;text-align:center;font-size:.9rem;border:1px solid rgba(168,85,247,.3)}
.keys-badge{display:inline-block;background:#2d2a4a;padding:4px 12px;border-radius:40px;font-weight:700;margin-top:6px}

/* ─── Toast ─── */
.toast-msg{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1e293b;border-left:5px solid #a855f7;padding:12px 24px;border-radius:40px;color:#fff;z-index:10000;font-weight:600;box-shadow:0 10px 25px rgba(0,0,0,.3);backdrop-filter:blur(8px);font-size:.9rem;white-space:nowrap;animation:fadeUp .2s ease}
@keyframes fadeUp{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}

/* ═══════════════════════════════════════════════
   CPA LOCKER STYLES
   ═══════════════════════════════════════════════ */
.locker-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:lockerFadeIn .25s ease}
@keyframes lockerFadeIn{from{opacity:0}to{opacity:1}}
.locker-popup{background:linear-gradient(155deg,#1e1a2f 0%,#0f0c22 100%);border:1px solid #c084fc;border-radius:24px;max-width:420px;width:92%;padding:28px 24px;text-align:center;position:relative;box-shadow:0 24px 48px rgba(0,0,0,.5),0 0 80px rgba(168,85,247,.1);animation:lockerSlideUp .3s ease}
@keyframes lockerSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.locker-popup h2{font-family:'Poppins',sans-serif;font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,#f0abfc,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.locker-popup p{color:#94a3b8;font-size:.9rem;margin-bottom:20px;line-height:1.5}
.locker-close{position:absolute;top:12px;right:16px;background:none;border:none;color:#94a3b8;font-size:1.6rem;cursor:pointer;line-height:1;transition:color .2s ease}
.locker-close:hover{color:#f8fafc}
.locker-tasks{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.locker-task{display:flex;justify-content:space-between;align-items:center;background:rgba(30,41,59,.6);border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:14px 18px;color:#e2e8f0;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}
.locker-task span:first-child{display:flex;align-items:center;gap:10px}
.locker-task span:first-child i{font-size:1.2rem;width:20px;text-align:center}
.locker-task .fa-facebook{color:#1877f2}.locker-task .fa-youtube{color:#ff0000}.locker-task .fa-telegram{color:#26a5e4}
.locker-task:hover{border-color:#a855f7;background:rgba(168,85,247,.1);transform:translateX(4px)}
.locker-task.task-loading{border-color:#facc15;opacity:.85;cursor:wait}
.locker-task.task-done{border-color:#22c55e;background:rgba(34,197,94,.1);cursor:default;pointer-events:none}
.locker-task.task-done:hover{transform:none}
.task-status{font-size:1.1rem}
.task-done .task-status{color:#22c55e}.task-loading .task-status{color:#facc15}
.locker-continue{width:100%;padding:14px;border-radius:14px;border:none;background:linear-gradient(135deg,#ec4899,#db2777);color:#fff;font-size:1rem;font-weight:800;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 14px rgba(219,39,119,.3)}
.locker-continue:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05)}
.locker-continue:disabled{background:rgba(30,41,59,.6);color:#64748b;box-shadow:none;cursor:not-allowed;transform:none;filter:none}

/* ═══════════════════════════════════════════════
   RELATED POSTS
   ═══════════════════════════════════════════════ */
.related-section{margin-top:60px;padding-top:28px;border-top:1px solid rgba(139,92,246,.2)}
.related-title{font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:600;color:#e9d5ff;margin-bottom:18px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.related-card{display:flex;flex-direction:column;background:rgba(15,23,42,.6);border:1px solid rgba(139,92,246,.15);border-radius:14px;overflow:hidden;transition:all .2s ease;text-decoration:none;color:inherit}
.related-card:hover{border-color:#a855f7;transform:translateY(-3px);box-shadow:0 8px 20px rgba(168,85,247,.1)}
.related-card-img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.related-card-body{padding:10px 10px 12px}
.related-card-body h4{font-family:'Poppins',sans-serif;font-size:.85rem;font-weight:600;color:#f8fafc;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-card-size{font-size:.72rem;color:#94a3b8;background:rgba(0,0,0,.25);padding:2px 8px;border-radius:20px;display:inline-block}
@media(max-width:1100px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.related-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.site-footer{background:rgba(12,10,22,.96);border-top:1px solid var(--theme-brand-1);padding:40px 24px;margin-top:40px}
.footer-inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.footer-brand .site-logo{font-size:1.4rem}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.footer-links a{color:#94a3b8;font-weight:500;transition:color .2s;font-size:.9rem}
.footer-links a:hover{color:#c084fc}
.footer-copy{font-size:.85rem;color:#64748b}
.content-footer{margin-top:40px;padding:28px 0 20px;border-top:1px solid rgba(139,92,246,.2);text-align:center}
.content-footer .footer-inner{gap:8px}
.content-footer .site-logo{font-size:1.1rem}
.content-footer p{font-size:.8rem;color:#64748b}
.single-model .site-footer{display:none}

/* ─── Archive Grid ─── */
.models-grid{display:grid;gap:20px;padding:24px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.model-card{background:rgba(15,23,42,.7);border:1px solid rgba(139,92,246,.25);border-radius:20px;overflow:hidden;transition:all .25s ease}
.model-card:hover{border-color:#a855f7;transform:translateY(-4px);box-shadow:0 12px 30px rgba(168,85,247,.15)}
.model-card-thumb{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.model-card-body{padding:14px}
.model-card-title{font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:600;color:#e9d5ff;margin-bottom:6px}
.model-card-meta{font-size:.8rem;color:#94a3b8}
.model-card-link{color:inherit;text-decoration:none}

/* ─── Fallback ─── */
.fallback-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:40px 20px}
.fallback-wrap h1{font-family:'Poppins',sans-serif;font-size:2.5rem;margin-bottom:12px;background:linear-gradient(135deg,#e9d5ff,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.fallback-wrap p{color:#94a3b8;max-width:420px;margin-bottom:20px}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE NAV
   ═══════════════════════════════════════════════ */
@media(max-width:900px){
    .site-navbar{
        grid-template-columns:1fr auto;
        padding:0 16px;
    }
    .nav-center{
        display:none; /* Hidden by default on mobile */
        grid-column:1/-1;
        flex-direction:column;
        gap:0;
        padding:0 16px 16px;
        border-top:1px solid rgba(139,92,246,.2);
    }
    .nav-center.nav-open{
        display:flex; /* Shown when toggled */
        animation:slideDown .25s ease;
    }
    @keyframes slideDown{
        from{opacity:0;transform:translateY(-10px)}
        to{opacity:1;transform:translateY(0)}
    }
    .nav-link{
        padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);
        border-radius:0;font-size:.95rem;
    }
    .nav-link:last-child{border-bottom:none}
    .nav-toggle{display:inline-flex}
}

@media(max-width:700px){
    .content{padding:16px}
    h1.model-title{font-size:1.6rem}
    .toast-msg{white-space:normal;text-align:center;width:90%}
    .nav-right{gap:8px}
    .locker-popup{padding:22px 18px}.locker-popup h2{font-size:1.2rem}
    .locker-task{padding:12px 14px;font-size:.88rem}
    .footer-links{gap:16px}
}

/* ═══════════════════════════════════════════════
   FRONTEND AUTH (LOGIN / REGISTER)
   ═══════════════════════════════════════════════ */
.auth-container{
    background:rgba(15,23,42,.7);backdrop-filter:blur(3px);
    border:1px solid rgba(139,92,246,.3);border-radius:24px;
    max-width:440px;width:100%;padding:32px 28px;
    box-shadow:0 20px 40px rgba(0,0,0,.3);
}

.auth-errors{
    background:rgba(220,38,38,.1);border:1px solid rgba(248,113,113,.4);
    border-radius:12px;padding:12px 16px;margin-bottom:20px;
    color:#fca5a5;font-size:.9rem;font-weight:500;
}
.auth-errors p{margin:0}

.auth-tabs{
    display:flex;gap:0;margin-bottom:24px;
    border:1px solid rgba(139,92,246,.3);border-radius:14px;overflow:hidden;
}
.auth-tab{
    flex:1;padding:12px;background:rgba(15,23,42,.5);
    border:none;color:#94a3b8;font-weight:700;font-size:.9rem;
    cursor:pointer;transition:all .2s ease;
}
.auth-tab:first-child{border-right:1px solid rgba(139,92,246,.3)}
.auth-tab.active{
    background:rgba(168,85,247,.2);color:#e9d5ff;
}
.auth-tab:hover:not(.active){background:rgba(30,41,59,.5)}

.auth-form{display:none}
.auth-form.active{display:block;animation:fadeInForm .3s ease}
@keyframes fadeInForm{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

.form-group{margin-bottom:16px}
.form-group label{
    display:block;font-weight:600;color:#cbd5e1;
    font-size:.85rem;margin-bottom:6px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"]{
    width:100%;padding:12px 16px;border-radius:12px;
    background:rgba(30,41,59,.6);border:1px solid rgba(148,163,184,.2);
    color:#f8fafc;font-size:1rem;font-family:'Inter',sans-serif;
    transition:all .2s ease;
}
.form-group input:focus{
    outline:none;border-color:#a855f7;
    box-shadow:0 0 0 3px rgba(168,85,247,.2);
}

@media(max-width:600px){
    .auth-container{padding:24px 18px}
}

/* ═══════════════════════════════════════════════
   VIP PURCHASE PAGE
   ═══════════════════════════════════════════════ */
.vip-container{
    max-width:1000px;margin:0 auto;
}

.vip-header{text-align:center;margin-bottom:40px}
.vip-title{
    font-family:'Poppins',sans-serif;font-size:2.5rem;font-weight:700;
    background:linear-gradient(135deg,#facc15,#f97316);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    margin-bottom:10px;
}
.vip-subtitle{color:#94a3b8;font-size:1.1rem;max-width:600px;margin:0 auto;line-height:1.5}

/* Already VIP Message */
.vip-already{
    background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);
    border-radius:20px;padding:40px;text-align:center;margin-top:40px;
}
.vip-already i{font-size:3rem;color:#facc15;margin-bottom:16px}
.vip-already h2{color:#4ade80;font-size:1.5rem;margin-bottom:8px}
.vip-already p{color:#94a3b8}

/* Features Bar */
.vip-features-bar{
    display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
    margin-bottom:48px;
}
.vfb-item{
    background:rgba(30,41,59,.6);border:1px solid rgba(148,163,184,.15);
    padding:10px 18px;border-radius:40px;font-size:.85rem;font-weight:600;
    color:#e2e8f0;display:flex;align-items:center;gap:8px;
}
.vfb-item i{color:#a855f7}

/* Pricing Cards */
.vip-cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
    align-items:start;
}
.vip-card{
    background:rgba(15,23,42,.7);border:1px solid rgba(148,163,184,.15);
    border-radius:24px;padding:32px 24px;text-align:center;
    transition:all .3s ease;position:relative;
}
.vip-card:hover{
    border-color:#a855f7;transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(168,85,247,.15);
}

.vip-card.popular{
    background:linear-gradient(155deg,rgba(30,20,50,.9),rgba(15,23,42,.9));
    border-color:#a855f7;transform:scale(1.05);
    box-shadow:0 16px 40px rgba(168,85,247,.2);
}
.vip-card.popular:hover{transform:scale(1.05) translateY(-6px)}

.vip-badge{
    position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    background:linear-gradient(135deg,#ec4899,#db2777);color:white;
    font-size:.75rem;font-weight:800;padding:6px 20px;border-radius:40px;
    letter-spacing:.5px;text-transform:uppercase;
}

.vip-card h3{font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:600;color:#e2e8f0;margin-bottom:12px}
.vip-price{
    font-family:'Poppins',sans-serif;font-size:3.5rem;font-weight:700;
    background:linear-gradient(135deg,#f8fafc,#cbd5e1);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    line-height:1;margin-bottom:4px;
}
.vip-card.popular .vip-price{
    background:linear-gradient(135deg,#facc15,#f97316);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.vip-duration{font-size:.85rem;color:#64748b;margin-bottom:24px}

.vip-list{list-style:none;text-align:left;margin-bottom:28px}
.vip-list li{
    color:#cbd5e1;font-size:.9rem;padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:10px;
}
.vip-list li:last-child{border-bottom:none}
.vip-list i{color:#22c55e;font-size:.8rem;width:16px;text-align:center}

/* Checkout Modal Overrides */
.checkout-popup{max-width:450px; text-align:left;}
.checkout-popup h2{text-align:center; margin-bottom:8px}
#checkoutStep1 .form-group{margin-bottom:14px}
#checkoutStep1 label{display:block; font-size:.8rem; color:#94a3b8; margin-bottom:6px; font-weight:600}
#checkoutStep1 input{
    width:100%;padding:12px 16px;border-radius:12px;
    background:rgba(30,41,59,.6);border:1px solid rgba(148,163,184,.2);
    color:#f8fafc;font-size:1rem;font-family:'Inter',sans-serif;
}
#checkoutStep1 input:focus{outline:none; border-color:#a855f7}

/* Responsive */
@media(max-width:900px){
    .vip-cards{grid-template-columns:1fr;max-width:400px;margin:0 auto}
    .vip-card.popular{transform:scale(1)}
    .vip-card.popular:hover{transform:translateY(-6px)}
}
@media(max-width:600px){
    .vip-title{font-size:2rem}
    .vip-features-bar{gap:8px}
    .vfb-item{font-size:.75rem;padding:8px 12px}
}

/* ═══════════════════════════════════════════════
   CUSTOM PAYMENT GATEWAY UI
   ═══════════════════════════════════════════════ */
.gateway-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}

.gateway-card{
    display:flex;align-items:center;gap:14px;
    background:rgba(30,41,59,.5);border:1px solid rgba(148,163,184,.2);
    border-radius:14px;padding:14px 18px;cursor:pointer;
    transition:all .2s ease;
}
.gateway-card:hover{border-color:#a855f7;background:rgba(168,85,247,.05)}
.gateway-card.selected{border-color:#a855f7;background:rgba(168,85,247,.15);box-shadow:0 0 0 1px #a855f7}

.gateway-icon{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.3);border-radius:10px;
    font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:800;
    flex-shrink:0;
}
.gateway-info h4{margin:0;font-size:1rem;color:#f8fafc;font-weight:700}
.gateway-info span{font-size:.8rem;color:#94a3b8;font-weight:500}

.wallet-display{
    background:rgba(0,0,0,.3);border:1px solid rgba(168,85,247,.3);
    border-radius:12px;padding:14px;text-align:center;
}
.wallet-display span{display:block;font-size:.8rem;color:#94a3b8;margin-bottom:6px}
.wallet-display strong{display:block;color:#e9d5ff;font-size:.95rem;letter-spacing:.5px;margin-bottom:10px;word-break:break-all}

.copy-btn{
    background:#8b5cf6;border:none;color:#fff;padding:6px 16px;
    border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.copy-btn:hover{background:#7c3aed}

.checkout-secure{
    text-align:center;color:#64748b;font-size:.8rem;margin-top:12px;
}
@media(max-width:600px){
    .gateway-card{padding:12px}
    .gateway-icon{width:34px;height:34px;font-size:1rem}
}

/* ═══════════════════════════════════════════════
   HEADER NOTIFICATION BELL & DROPDOWN
   ═══════════════════════════════════════════════ */
.notification-bell{
    position:relative;cursor:pointer;
    font-size:1.2rem;color:#cbd5e1;
    padding:6px 8px;border-radius:8px;
    transition:all .2s ease;
}
.notification-bell:hover{color:#e9d5ff;background:rgba(168,85,247,.1)}

.notif-badge{
    position:absolute;top:2px;right:2px;
    background:#ef4444;color:#fff;font-size:.65rem;font-weight:800;
    width:18px;height:18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:2px solid rgba(12,10,22,.96);
}

.notif-dropdown{
    display:none;position:absolute;top:calc(100% + 12px);right:-40px;
    background:#1e1a2f;border:1px solid #a855f7;border-radius:16px;
    width:320px;max-height:400px;overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:1000;
}
.notif-dropdown.active{display:block;animation:lockerSlideUp .2s ease}

.notif-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 18px;border-bottom:1px solid rgba(148,163,184,.1);
    font-weight:700;color:#f8fafc;font-size:.9rem;
}
#markReadBtn{
    background:none;border:none;color:#a855f7;font-size:.8rem;
    cursor:pointer;font-weight:600;
}
#markReadBtn:hover{color:#c084fc}

.notif-list{max-height:300px;overflow-y:auto;padding:8px 0}
.notif-empty{color:#64748b;text-align:center;padding:20px 0;font-size:.9rem;margin:0}

.notif-item{
    padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.03);
    transition:background .2s;
}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(168,85,247,.05)}
.notif-item.unread{background:rgba(168,85,247,.08);border-left:3px solid #a855f7}

.notif-text{font-size:.88rem;color:#e2e8f0;margin-bottom:4px}
.notif-time{font-size:.75rem;color:#64748b}

@media(max-width:900px){
    .notif-dropdown{right:-80px;width:calc(100vw - 40px);max-width:320px}
}

/* ═══════════════════════════════════════════════
   PAYMENT VERIFICATION PAGE
   ═══════════════════════════════════════════════ */
.verify-status-card{
    border-radius:24px;padding:40px 30px;text-align:center;
    border:1px solid rgba(148,163,184,.2);margin-bottom:30px;
}
.verify-status-card h2{font-family:'Poppins',sans-serif;font-size:1.6rem;color:#f8fafc;margin-bottom:10px}
.verify-status-card p{color:#94a3b8;font-size:1rem;max-width:400px;margin:0 auto}
.verify-icon{font-size:3.5rem;margin-bottom:20px}

.status-none{background:rgba(30,41,59,.4);border-color:rgba(148,163,184,.2)}
.status-pending{background:rgba(234,179,8,.05);border-color:rgba(234,179,8,.3)}
.status-approved, .status-vip{background:rgba(34,197,94,.05);border-color:rgba(34,197,94,.3)}
.status-rejected{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.3)}

.verify-details{
    margin-top:24px;background:rgba(0,0,0,.2);border-radius:14px;
    padding:16px 20px;text-align:left;display:inline-block;
}
.verify-row{
    display:flex;justify-content:space-between;gap:30px;
    padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);
    font-size:.95rem;
}
.verify-row:last-child{border-bottom:none}
.verify-row span{color:#94a3b8;font-weight:500}
.txid-code{color:#a855f7;font-family:monospace;letter-spacing:1px}

.notif-history{margin-top:20px}
.notif-list-page{display:flex;flex-direction:column;gap:10px}

.notif-item-page{
    background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.15);
    border-radius:14px;padding:16px 20px;
}
.notif-item-page.unread{border-color:rgba(168,85,247,.3);background:rgba(168,85,247,.05)}
.notif-text{font-size:.95rem;color:#e2e8f0;margin-bottom:4px}
.notif-time{font-size:.8rem;color:#64748b}

/* ═══════════════════════════════════════════════
   CENTERED BOXED PAGINATION
   ═══════════════════════════════════════════════ */
.navigation.pagination {
    margin: 40px auto;
    padding: 0 20px;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Base style for all number links, prev/next buttons */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    color: #cbd5e1;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Hover state for links */
a.page-numbers:hover {
    border-color: #a855f7;
    color: #e9d5ff;
    background: rgba(168, 85, 247, 0.1);
    transform: translateY(-2px);
}

/* Active/Current page highlight */
.page-numbers.current {
    border: 1px solid #a855f7;
    color: #ffffff;
    background: rgba(168, 85, 247, 0.2);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
    cursor: default;
}

/* Dots (...) styling */
.page-numbers.dots {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: default;
    min-width: auto;
    padding: 0;
}
.page-numbers.dots:hover {
    background: transparent;
    color: #64748b;
    border: none;
    transform: none;
}

/* Prev/Next button specific styling */
.prev.page-numbers, 
.next.page-numbers {
    padding: 0 20px;
    font-weight: 700;
}

/* Responsive adjustments */
@media(max-width: 600px) {
    .page-numbers {
        min-width: 38px;
        height: 38px;
        font-size: 0.85rem;
        padding: 0 10px;
    }
    .prev.page-numbers, 
    .next.page-numbers {
        padding: 0 14px;
    }
}

/* ═══════════════════════════════════════════════
   CUSTOM SEARCH BAR
   ═══════════════════════════════════════════════ */
.archive-search-bar {
    max-width: 500px;
    margin: 0 auto 40px;
}

.search-form {
    display: flex;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.search-form:focus-within {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.search-field {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 18px;
    color: #f8fafc;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    outline: none;
}

.search-field::placeholder {
    color: #64748b;
}

.search-submit {
    background: #8b5cf6;
    border: none;
    color: #fff;
    padding: 0 24px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-submit:hover {
    background: #7c3aed;
}

@media(max-width: 600px) {
    .search-field {
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    .search-submit {
        padding: 0 18px;
    }
}

/* ═══════════════════════════════════════════════
   CONTACT FORM 7 STYLES
   ═══════════════════════════════════════════════ */
.ofchicks-cf7-wrapper .wpcf7 {
    max-width: 100%;
}

.ofchicks-cf7-wrapper p {
    margin-bottom: 16px;
}

/* Style Text, Email, and Textarea inputs */
.ofchicks-cf7-wrapper input[type="text"],
.ofchicks-cf7-wrapper input[type="email"],
.ofchicks-cf7-wrapper input[type="tel"],
.ofchicks-cf7-wrapper input[type="url"],
.ofchicks-cf7-wrapper textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(30,41,59,.6);
    border: 1px solid rgba(148,163,184,.2);
    color: #f8fafc;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.ofchicks-cf7-wrapper textarea {
    min-height: 140px;
    resize: vertical;
}

/* Focus states */
.ofchicks-cf7-wrapper input:focus,
.ofchicks-cf7-wrapper textarea:focus {
    outline: none;
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168,85,247,.2);
}

/* Style the Submit Button */
.ofchicks-cf7-wrapper .wpcf7-submit {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    border-radius: 16px;
    padding: 14px 18px;
    font-weight: 800;
    transition: all .2s ease;
    cursor: pointer;
    font-size: 1rem;
    background: linear-gradient(135deg,#ec4899,#db2777);
    border: none;
    color: white;
    box-shadow: 0 6px 14px rgba(219,39,119,.3);
}

.ofchicks-cf7-wrapper .wpcf7-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Validation Errors (Red) */
.ofchicks-cf7-wrapper .wpcf7-not-valid-tip {
    color: #fca5a5;
    font-size: 0.85rem;
    margin-top: 6px;
    display: block;
}

/* Success Message (Green) */
.ofchicks-cf7-wrapper .wpcf7-response-output {
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.ofchicks-cf7-wrapper .wpcf7-mail-sent-ok {
    border: 1px solid rgba(34,197,94,.4) !important;
    background: rgba(34,197,94,.1);
    color: #86efac;
}

.ofchicks-cf7-wrapper .wpcf7-validation-errors {
    border: 1px solid rgba(239,68,68,.4) !important;
    background: rgba(239,68,68,.1);
    color: #fca5a5;
}

/* Optional: Style the labels if you added them in CF7 */
.ofchicks-cf7-wrapper label {
    display: block;
    font-weight: 600;
    color: #cbd5e1;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════
   WOOCOMMERCE DARK MODE STYLES
   ═══════════════════════════════════════════════ */

/* General Layouts & Typography */
.woocommerce div.product .product_title, 
.woocommerce div.product .price,
.woocommerce .woocommerce-tabs ul.tabs li.active a {
    color: #e9d5ff !important;
}
.woocommerce .woocommerce-breadcrumb, 
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-review-link {
    color: #94a3b8 !important;
}

/* Shop/Category Product Cards */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #f8fafc;
    font-family: 'Poppins', sans-serif;
}
.woocommerce ul.products li.product .price {
    color: #c084fc !important;
}
.woocommerce ul.products li.product {
    background: rgba(15,23,42,.6);
    border: 1px solid rgba(139,92,246,.15);
    border-radius: 14px;
    padding: 10px;
    transition: all .2s ease;
}
.woocommerce ul.products li.product:hover {
    border-color: #a855f7;
    transform: translateY(-3px);
}

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background: linear-gradient(135deg,#ec4899,#db2777);
    border: none;
    color: #fff;
    font-weight: 800;
    border-radius: 12px;
    padding: 12px 24px;
    transition: all .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover {
    background: linear-gradient(135deg,#db2777,#be185d);
    transform: translateY(-2px);
    color: #fff;
}

/* Cart Table */
.woocommerce table.shop_table {
    border-collapse: collapse;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(15,23,42,.6);
    border: 1px solid rgba(148,163,184,.2);
}
.woocommerce table.shop_table th {
    background: rgba(30,41,59,.8);
    color: #e9d5ff;
    border-bottom: 1px solid rgba(148,163,184,.2);
}
.woocommerce table.shop_table td {
    background: transparent;
    color: #f8fafc;
    border-bottom: 1px solid rgba(148,163,184,.1);
}
.woocommerce .cart-subtotal th, 
.woocommerce .cart-subtotal td,
.woocommerce .order-total th, 
.woocommerce .order-total td {
    color: #e9d5ff;
    border-top: 1px solid rgba(148,163,184,.2);
}

/* Checkout Form Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
    background: rgba(30,41,59,.6) !important;
    border: 1px solid rgba(148,163,184,.2) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168,85,247,.2) !important;
}
.woocommerce form .form-row label {
    color: #cbd5e1;
    font-weight: 600;
}

/* Checkout Payment Box */
.woocommerce-checkout #payment {
    background: rgba(15,23,42,.7);
    border-radius: 16px;
    border: 1px solid rgba(139,92,246,.2);
}
.woocommerce-checkout #payment div.payment_box {
    background: rgba(30,41,59,.5);
    color: #cbd5e1;
    border-bottom: 1px solid rgba(148,163,184,.1);
}
.woocommerce-checkout #payment ul.payment_methods li {
    border-bottom: 1px solid rgba(148,163,184,.1);
    padding: 10px 0;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    color: #f8fafc;
    font-weight: 600;
}

/* My Account */
.woocommerce-MyAccount-navigation ul {
    background: rgba(15,23,42,.6);
    border-radius: 14px;
    padding: 15px;
    border: 1px solid rgba(148,163,184,.15);
}
.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid rgba(148,163,184,.1);
    padding: 10px 0;
}
.woocommerce-MyAccount-navigation ul li a {
    color: #cbd5e1;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    color: #a855f7;
    font-weight: 700;
}

/* Star Ratings */
.woocommerce .star-rating span::before {
    color: #facc15;
}

/* Message & Info Boxes */
.woocommerce-message,
.woocommerce-info {
    border-top-color: #a855f7;
    background: rgba(168,85,247,.1);
    color: #e9d5ff;
}
.woocommerce-message a,
.woocommerce-info a {
    color: #f8fafc;
}

/* ═══════════════════════════════════════════════
   WOOCOMMERCE CHECKOUT CHART (ORDER REVIEW)
   ═══════════════════════════════════════════════ */

/* Main Order Review Table */
.woocommerce-checkout-review-order-table {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
    padding: 14px 18px !important;
}

/* Header Row */
.woocommerce-checkout-review-order-table thead th {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #e9d5ff !important;
    font-weight: 700 !important;
}

/* Product Names Links */
.woocommerce-checkout-review-order-table .product-name a {
    color: #c084fc !important;
    transition: color 0.2s;
}
.woocommerce-checkout-review-order-table .product-name a:hover {
    color: #e9d5ff !important;
}

/* Subtotals and Totals */
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .order-total th {
    color: #e9d5ff !important;
    font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    border-top: 1px solid rgba(168, 85, 247, 0.4) !important;
    font-size: 1.1rem;
}

.woocommerce-checkout-review-order-table .order-total td {
    color: #f8fafc !important;
    font-weight: 800 !important;
}

/* Place Order Button Wrapper */
#payment .form-row.place-order {
    background: transparent !important;
    padding: 20px 0 0 !important;
    border: none !important;
    margin-top: 0;
}

/* Coupon Code & Login Toggle Boxes */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    color: #cbd5e1 !important;
    border-radius: 12px !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a {
    color: #c084fc !important;
}

/* Coupon Input Form */
.checkout_coupon.woocommerce-form-coupon {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

/* Quantity Badges in Cart (e.g., × 2) */
.product-quantity {
    color: #94a3b8 !important;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════
   HIDE WOOCOMMERCE SIDEBARS & FORCE FULL WIDTH
   ═══════════════════════════════════════════════ */

/* Hide the widget/sidebar area completely */
.woocommerce #secondary,
.woocommerce-page #secondary,
.woocommerce .widget-area,
.woocommerce-page .widget-area,
.woocommerce .sidebar,
.woocommerce-page .sidebar {
    display: none !important;
}

/* Force main content to be 100% width */
.woocommerce #primary,
.woocommerce-page #primary,
.woocommerce .content-area,
.woocommerce-page .content-area,
.woocommerce .site-main,
.woocommerce-page .site-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
}

/* Ensure the shop grid uses the full width nicely */
.woocommerce ul.products {
    max-width: 1280px;
    margin: 0 auto !important;
}

/* ═══════════════════════════════════════════════
   FRONT-END SUBMISSION FORM STYLES
   ═══════════════════════════════════════════════ */
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(30,41,59,.6);
    border: 1px solid rgba(148,163,184,.2);
    color: #f8fafc;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
.form-group select:focus {
    outline: none;
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168,85,247,.2);
}
.form-group input[type="file"] {
    background: rgba(30,41,59,.6);
    border: 1px dashed rgba(148,163,184,.3);
    border-radius: 12px;
    color: #cbd5e1;
    cursor: pointer;
}
.form-group input[type="file"]::-webkit-file-upload-button {
    background: #8b5cf6;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    margin-right: 15px;
    cursor: pointer;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════
   REWARD SYSTEM DASHBOARD STYLES
   ═══════════════════════════════════════════════ */
.dashboard-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto 40px;
}

.dash-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    padding: 24px;
}

.dash-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: #e9d5ff;
    margin-bottom: 10px;
}

.balance-amount {
    font-size: 3rem;
    font-weight: 800;
    color: #22c55e;
    font-family: 'Poppins', sans-serif;
    margin: 10px 0;
}

.balance-rates {
    color: #64748b;
    font-size: 0.85rem;
}

.withdraw-card .form-group input {
    background: rgba(30,41,59,.8);
    border: 1px solid rgba(148,163,184,.3);
    color: #f8fafc;
    padding: 12px;
    border-radius: 10px;
    width: 100%;
}

.dashboard-table-wrap {
    max-width: 1280px;
    margin: 0 auto;
    overflow-x: auto;
}

.dashboard-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-table-wrap th {
    background: rgba(30, 41, 59, 0.8);
    color: #e9d5ff;
    padding: 14px;
    text-align: left;
    font-weight: 700;
}

.dashboard-table-wrap td {
    padding: 14px;
    border-bottom: 1px solid rgba(148,163,184,.1);
    color: #cbd5e1;
}

@media (max-width: 700px) {
    .balance-amount { font-size: 2.2rem; }
}

/* ═══════════════════════════════════════════════
   UNIFIED DASHBOARD STYLES
   ═══════════════════════════════════════════════ */

/* Profile Header */
.dash-header {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.dash-info h2 { line-height: 1.2; }

@media (max-width: 600px) {
    .dash-header { flex-direction: column; text-align: center; }
}

/* Tab Navigation */
.dash-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(148, 163, 184, 0.2);
    margin-bottom: 25px;
}

.dash-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 14px 22px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.dash-tab:hover {
    color: #e9d5ff;
}

.dash-tab.active {
    color: #e9d5ff;
    border-bottom-color: #a855f7;
}

/* Tab Content */
.dash-tab-content {
    display: none;
}

.dash-tab-content.active {
    display: block;
    animation: fadeInForm 0.3s ease;
}

/* Dashboard Table Fixes */
.dashboard-table-wrap .shop_table {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.dashboard-table-wrap .shop_table th {
    background: rgba(30, 41, 59, 0.8);
    color: #e9d5ff;
    padding: 14px;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
}

.dashboard-table-wrap .shop_table td {
    padding: 14px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    font-size: 0.95rem;
}

/* Responsive Cards inside Tabs */
@media (max-width: 900px) {
    #tab-earnings > div {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════
   UNIQUE DARK SHOP PAGE (NO SIDEBAR)
   ═══════════════════════════════════════════════ */

/* 1. Aggressively hide sidebars and widget areas globally on Woo pages */
.woocommerce .widget-area,
.woocommerce-page .widget-area,
.woocommerce #secondary,
.woocommerce-page #secondary,
.woocommerce .sidebar,
.woocommerce-page .sidebar,
body.woocommerce .site-sidebar,
body.woocommerce aside.widget-area {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* 2. Force main content to 100% width */
.ofchicks-shop-wrapper,
.woocommerce .content-area,
.woocommerce-page .content-area,
.woocommerce #primary,
.woocommerce-page #primary,
.woocommerce .site-main,
.woocommerce-page .site-main {
    width: 100% !important;
    max-width: 1280px !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

/* 3. Hide default WooCommerce clutter */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-breadcrumb {
    display: none !important;
}

/* 4. Unique Product Card Styling (Dark Glassmorphism) */
.woocommerce ul.products li.product {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 18px;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.woocommerce ul.products li.product:hover {
    border-color: #a855f7;
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(168, 85, 247, 0.2);
}

/* Product Image */
.woocommerce ul.products li.product a img {
    border-radius: 0;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #e9d5ff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    padding: 15px 16px 5px !important;
    transition: color 0.2s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: #ffffff !important;
}

/* Product Price */
.woocommerce ul.products li.product .price {
    color: #c084fc !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 0 16px 15px !important;
    display: block;
}

.woocommerce ul.products li.product .price del {
    color: #64748b !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    opacity: 0.8;
}

/* Add to Cart Button on Hover/Load */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    margin: 0 16px 16px !important;
    width: calc(100% - 32px) !important;
    text-align: center !important;
    display: block !important;
    transition: all 0.2s ease;
    border: none !important;
    text-transform: none !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.woocommerce ul.products li.product .button.loading {
    opacity: 0.7 !important;
    padding-right: 18px !important;
}

/* Star Ratings */
.woocommerce ul.products li.product .star-rating {
    color: #facc15 !important;
    margin: 0 auto 8px 16px !important;
}

/* Sale Badge */
.woocommerce span.onsale {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    border-radius: 0 0 10px 0 !important;
    padding: 8px 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    min-height: auto !important;
    min-width: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
}

/* Category Title on top of shop (if kept) */
.woocommerce-products-header {
    text-align: center;
    padding: 30px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    margin-bottom: 30px;
}
.woocommerce-products-header h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.2rem !important;
    background: linear-gradient(135deg, #e9d5ff, #a855f7);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ═══════════════════════════════════════════════
   ADMIN WITHDRAWAL SETTINGS STYLING
   ═══════════════════════════════════════════════ */
.admin_page_ofchicks-withdrawals .form-table th {
    width: 150px;
    font-weight: 600;
}
.admin_page_ofchicks-withdrawals .wp-list-table td, 
.admin_page_ofchicks-withdrawals .wp-list-table th {
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════
   MODEL TAGS (Pills / Badges)
   ═══════════════════════════════════════════════ */
.model-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.model-tag {
    display: inline-block;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c4b5fd;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

a.model-tag:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
    color: #e9d5ff;
    transform: translateY(-1px);
}

/* Tags on model cards - slightly smaller */
.model-card .model-tags {
    margin-top: 8px;
}

.model-card .model-tag {
    font-size: 0.68rem;
    padding: 2px 9px;
}

/* Tags section on single model page */
.model-tags-section {
    margin-bottom: 16px;
}

.model-tags-section .model-tag {
    font-size: 0.82rem;
    padding: 5px 14px;
}

/* ═══════════════════════════════════════════════
   TAG FILTER BAR (Archive Page)
   ═══════════════════════════════════════════════ */
.tag-filter-section {
    max-width: 1280px;
    margin: 0 auto 30px;
}

.tag-filter-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #e9d5ff;
    margin-bottom: 12px;
}

.tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}

.tag-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tag-filter-pill:hover {
    border-color: #a855f7;
    color: #e9d5ff;
    background: rgba(168, 85, 247, 0.1);
    transform: translateY(-1px);
}

.tag-filter-pill.active {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.2);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
}

.tag-filter-count {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 7px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
}

.tag-filter-pill.active .tag-filter-count {
    background: rgba(168, 85, 247, 0.3);
    color: #e9d5ff;
}

@media (max-width: 600px) {
    .tag-filter-bar {
        gap: 6px;
    }
    .tag-filter-pill {
        padding: 5px 12px;
        font-size: 0.78rem;
    }
}

/* ═══════════════════════════════════════════════
   TAG ARCHIVE HEADER
   ═══════════════════════════════════════════════ */
.tag-archive-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 24px;
}

.tag-archive-icon {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}

.tag-archive-count {
    color: #94a3b8;
    font-size: 0.9rem;
}

.tag-related-section {
    max-width: 1280px;
    margin: 0 auto 30px;
    padding: 20px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 16px;
}

.tag-related-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ═══════════════════════════════════════════════
   MODEL PROFILE (Single Page Enhancements)
   ═══════════════════════════════════════════════ */
.model-bio {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.model-bio-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e9d5ff;
    margin-bottom: 8px;
}

.model-bio p {
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Social Links */
.model-social-links {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.model-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: var(--social-color, #cbd5e1);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.model-social-btn:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: var(--social-color, #a855f7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Creator Link */
.model-creator-link {
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-creator-link span {
    color: #94a3b8;
}

.model-creator-link a {
    color: #c084fc;
    font-weight: 700;
}

.model-creator-link a:hover {
    color: #e9d5ff;
}

/* Vault Profile Link (Single Model Page) */
.vault-profile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 20px;
    color: #c084fc;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.vault-profile-link i {
    transition: transform 0.2s ease;
}

.vault-profile-link:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
    color: #e9d5ff;
    transform: translateY(-1px);
}

.vault-profile-link:hover i {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════
   AUTHOR PROFILE PAGE
   ═══════════════════════════════════════════════ */
.author-profile-card {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 24px;
    margin-bottom: 30px;
}

.author-profile-avatar img {
    border-radius: 50%;
    border: 3px solid #a855f7;
}

.author-profile-info {
    flex: 1;
}

.author-profile-bio {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 500px;
}

.author-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto 30px;
}

@media (max-width: 700px) {
    .author-profile-card {
        flex-direction: column;
        text-align: center;
    }

    .author-profile-bio {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════
   CREATOR PROFILE PAGE (2-COLUMN LAYOUT)
   ═══════════════════════════════════════════════ */

/* Force overrides on the base .page class specifically for this template */
.page.creator-profile-page {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
    display: block !important;
}

.creator-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}

/* ─── LEFT SIDEBAR ─── */
.creator-sidebar {
    position: sticky;
    top: 106px; /* Height of navbar + padding */
}

.creator-sidebar-inner {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 24px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.creator-avatar-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}

.creator-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid #a855f7;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
    display: block;
}

.creator-avatar-status {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #22c55e;
    border-radius: 50%;
    border: 3px solid #0f0a15;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.creator-display-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 4px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

.creator-username {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0 0 20px;
}

/* Location Pills */
.creator-location-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.location-pill {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #cbd5e1;
    display: inline-block;
}

/* Stats Row */
.creator-stats-row {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    padding: 16px 0;
    margin-bottom: 24px;
}

.creator-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.creator-stat:not(:last-child) {
    border-right: 1px solid rgba(148, 163, 184, 0.1);
}

.stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Social Icons */
.creator-social-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.creator-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: var(--social-color, #94a3b8);
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.creator-social-icon:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--social-color, #a855f7);
    transform: translateY(-2px);
}

/* ─── RIGHT CONTENT ─── */
.creator-content-header {
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    padding-bottom: 12px;
}

.creator-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1px;
    margin: 0 !important;
    background: none !important;
}

/* ★ VAULT GRID (3 Columns, 3:4 Aspect Ratio) */
.creator-vaults-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.creator-vault-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 14px; /* Match related posts */
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: all 0.25s ease;
}

.creator-vault-card:hover {
    border-color: #a855f7;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.1);
}

.vault-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4; /* ★ Match related posts aspect ratio */
    overflow: hidden;
    background: #0b1120;
}

.vault-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.creator-vault-card:hover .vault-card-thumb img {
    transform: scale(1.05);
}

.vault-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: .72rem; /* Match related post badge */
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ★ Vault Card Body (Match related-card-body) */
.vault-card-body {
    padding: 10px 10px 12px;
}

.vault-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: .85rem; /* Match related post title size */
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vault-card-meta {
    display: flex;
    align-items: center;
    gap: 8px; /* Tighter gap */
    font-size: .72rem; /* Match related post meta size */
    color: #64748b;
    font-weight: 500;
}

.vault-card-meta i {
    margin-right: 4px;
    font-size: 0.75rem;
}

.meta-rating {
    color: #f87171; /* Red heart */
}

/* Creator Bio & Tags Styling inside Sidebar */
.creator-bio-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    text-align: left;
}

.creator-bio-section p {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.creator-tags-section {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

/* ─── COVER BANNER ─── */
.creator-profile-page {
    position: relative;
}

.profile-cover-banner {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center center;
    background-color: #0b1120; /* Fallback color */
    position: relative;
    margin-bottom: -40px; /* Pulls the layout up slightly under the banner */
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
}

.profile-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15,10,21,0.2) 0%, rgba(15,10,21,0.7) 70%, #0f0a15 100%);
}

/* Push the layout down so it doesn't overlap the banner text badly */
.creator-layout {
    position: relative;
    z-index: 2;
    padding-top: 20px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
    .creator-layout {
        grid-template-columns: 1fr !important;
    }

    .creator-sidebar {
        position: static;
    }

    .creator-sidebar-inner {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .profile-cover-banner {
        height: 220px;
    }

    /* Drop to 2 columns on tablet */
    .creator-vaults-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .page.creator-profile-page {
        padding: 20px 14px !important;
    }
    
    /* Drop to 1 column on small mobile */
    .creator-vaults-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    
    .balance-amount { font-size: 2.2rem; }
}

/* ═══════════════════════════════════════════════
   DISCOVERY HOMEPAGE
   ═══════════════════════════════════════════════ */

/* ─── Page Container ─── */
.disc-page {
    min-height: 100vh;
    padding: 0;
}
.disc-hub {
    max-width: 1520px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}
@media (min-width: 768px) {
    .disc-hub { padding: 48px 40px 80px; }
}

/* ─── Stats Bar ─── */
.disc-stats-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 48px;
}
.disc-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 100px;
    padding: 6px 16px;
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 11px;
    color: #64748b;
}
.disc-stat-live {
    color: #4ade80;
    font-weight: 700;
    margin-left: 2px;
}

/* Pulse dot */
.disc-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #4ade80;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
}
.disc-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid #4ade80;
    animation: discPulse 1.8s ease-out infinite;
}
@keyframes discPulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(2.2); }
}

/* ─── Section Layout ─── */
.disc-section {
    margin-bottom: 56px;
}
.disc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.disc-section-head--trend {
    align-items: center;
}
.disc-eyebrow {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #a855f7;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.disc-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #f8fafc;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.disc-subtitle {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}
.disc-pill-sm {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 11px;
    color: #64748b;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 6px 14px;
    border-radius: 100px;
    white-space: nowrap;
}
.disc-link-sm {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 12px;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}
.disc-link-sm:hover { color: #c084fc; }

/* ─── Divider ─── */
.disc-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.07) 30%, rgba(255,255,255,0.07) 70%, transparent);
    margin: 0 0 56px;
}

/* ─── Scroll Row ─── */
.disc-scroll-wrap {
    position: relative;
}
.disc-scroll-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(168,85,247,0.4) rgba(15,23,42,0.3);
    transition: opacity 0.2s ease;
}
.disc-scroll-row::-webkit-scrollbar { height: 4px; }
.disc-scroll-row::-webkit-scrollbar-track { background: rgba(15,23,42,0.3); border-radius: 4px; }
.disc-scroll-row::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.4); border-radius: 4px; }
.disc-scroll-row::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,0.6); }

/* ─── Model Card ─── */
.disc-card {
    flex-shrink: 0;
    width: 190px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.22s cubic-bezier(.2,0,0,1);
    display: block;
}
.disc-card:hover { transform: translateY(-6px); }
.disc-card-thumb {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #0b1120;
}
.disc-card-thumb img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    transition: box-shadow 0.25s ease;
}
.disc-card:hover .disc-card-thumb img {
    box-shadow: 0 16px 40px -8px rgba(168,85,247,0.25);
}
.disc-card-info {
    padding: 10px 2px 0;
}
.disc-card-info h3 {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #f8fafc;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.disc-card-meta {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
    display: block;
}

/* ─── Card Badges ─── */
.disc-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(8,9,13,0.82);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 20px;
    padding: 3px 9px;
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #c4b5fd;
    z-index: 3;
}
.disc-badge-fire {
    border-color: rgba(236,72,153,0.5);
    color: #f9a8d4;
}
.disc-badge-new {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.4);
    color: #86efac;
}
.disc-badge-star {
    border-color: rgba(168,85,247,0.3);
    color: #c4b5fd;
}
.disc-badge-gold {
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.4);
    color: #fde68a;
}

/* ─── Card Category Label ─── */
.disc-card-cat {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(8,9,13,0.85);
    backdrop-filter: blur(8px);
    border-left: 2px solid #a855f7;
    border-radius: 4px;
    padding: 2px 8px;
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 9px;
    font-weight: 700;
    color: #c4b5fd;
    letter-spacing: 0.05em;
    z-index: 3;
}
.disc-card-cat--gold {
    border-left-color: #fbbf24;
    color: #fde68a;
}

/* ─── TOP 10 Rank ─── */
.disc-top10-item {
    position: relative;
    padding-left: 48px;
    flex-shrink: 0;
}
.disc-rank {
    position: absolute;
    left: -10px;
    bottom: -14px;
    font-size: clamp(80px, 10vw, 140px);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(168,85,247,0.18);
    letter-spacing: -0.06em;
    pointer-events: none;
    z-index: 0;
    font-family: 'Poppins', sans-serif;
}

/* ─── Trending Toggles ─── */
.disc-toggles {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 100px;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(255,255,255,0.07);
    flex-wrap: wrap;
}
.disc-toggle {
    padding: 7px 18px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Space Mono', 'Courier New', monospace;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.18s ease;
    border: none;
    background: transparent;
    color: #64748b;
}
.disc-toggle--active {
    background: #a855f7;
    color: #fff;
    box-shadow: 0 4px 16px rgba(168,85,247,0.25);
}
.disc-toggle:hover:not(.disc-toggle--active) {
    color: #c4b5fd;
    background: rgba(168,85,247,0.1);
}

/* ─── Category Grid ─── */
.disc-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 640px)  { .disc-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .disc-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .disc-cat-grid { grid-template-columns: repeat(6, 1fr); } }

.disc-cat-card {
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 20px 16px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.disc-cat-card:hover {
    border-color: #a855f7;
    background: rgba(22,27,39,0.8);
    transform: translateY(-3px);
}
.disc-cat-card--active {
    border-color: #a855f7;
    background: rgba(168,85,247,0.08);
    box-shadow: 0 0 12px rgba(168,85,247,0.1);
}
.disc-cat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(168,85,247,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.disc-cat-label {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
    color: #f8fafc;
}
.disc-cat-count {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 10px;
    color: #64748b;
}

/* ─── Tag Pills ─── */
.disc-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.disc-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #c4b5fd;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, color 0.2s;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}
.disc-tag-pill:hover {
    background: rgba(168,85,247,0.2);
    border-color: #a855f7;
    transform: translateY(-2px);
    color: #e9d5ff;
}
.disc-tag-pill--active {
    background: rgba(168,85,247,0.25);
    border-color: #a855f7;
    color: #fff;
    box-shadow: 0 0 12px rgba(168,85,247,0.15);
}
.disc-tag-count {
    background: rgba(0,0,0,0.25);
    padding: 1px 7px;
    border-radius: 12px;
    font-size: 10px;
    color: #94a3b8;
}
.disc-tag-pill--active .disc-tag-count {
    background: rgba(168,85,247,0.3);
    color: #e9d5ff;
}

/* ─── View All Button ─── */
.disc-view-all-wrap {
    display: flex;
    justify-content: center;
    padding: 32px 0 16px;
}
.disc-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1.5px solid #a855f7;
    color: #c4b5fd;
    padding: 14px 40px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
}
.disc-view-all-btn:hover {
    background: #a855f7;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168,85,247,0.25);
}
.disc-icon {
    width: 16px;
    height: 16px;
}

/* ─── Empty State ─── */
.disc-empty {
    color: #64748b;
    font-size: 14px;
    padding: 30px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
    .disc-card { width: 155px; }
    .disc-top10-item { padding-left: 38px; }
    .disc-rank { font-size: clamp(60px, 12vw, 100px); left: -6px; }
    .disc-toggles { gap: 2px; padding: 2px; }
    .disc-toggle { padding: 5px 12px; font-size: 10px; }
    .disc-tag-pill { padding: 5px 12px; font-size: 12px; }
    .disc-section { margin-bottom: 40px; }
    .disc-divider { margin-bottom: 40px; }
    .disc-stats-bar { gap: 6px; }
    .disc-stat-pill { padding: 4px 10px; font-size: 10px; }
    .disc-cat-card { padding: 14px 12px; }
    .disc-view-all-btn { padding: 12px 28px; font-size: 14px; }
}



/* ═══════════════════════════════════════════════
   RELATED TAGS 4x5 GRID
   ═══════════════════════════════════════════════ */
.tag-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 10px;
    margin-top: 12px;
}

/* Adjust tag pills to fill grid cells nicely */
.model-tag--grid {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 10px 14px !important; /* Taller padding for grid buttons */
    border-radius: 12px !important; /* Slightly less round for grid cards */
    font-size: 0.88rem !important;
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
    transition: all 0.2s ease;
}

.model-tag--grid:hover {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: #a855f7 !important;
    color: #f8fafc !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Tiny count badge inside the grid tag */
.model-tag-count {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 7px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
}

.model-tag--grid:hover .model-tag-count {
    background: rgba(168, 85, 247, 0.3);
    color: #e9d5ff;
}

/* Responsive Grid */
@media (max-width: 900px) {
    .tag-related-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet */
    }
}

@media (max-width: 600px) {
    .tag-related-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 8px;
    }
    .model-tag--grid {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }
}








