/* ============================================================
   LearnWithFidelis — Webinar Training Page
   File: assets/css/webinar-trainings.css
   ============================================================ */

/* ── CSS Variables (dark default, light via .wbn-light) ─────── */
:root {
    --wbn-bg:           #0d0d0d;
    --wbn-surface:      #111111;
    --wbn-surface2:     #161616;
    --wbn-border:       #1e1e1e;
    --wbn-border2:      #2a2a2a;
    --wbn-text:         #f0f0f0;
    --wbn-text2:        #b0b0b0;
    --wbn-muted:        #666;
    --wbn-brand:        #00ffd5;
    --wbn-brand-dim:    rgba(0,255,213,.12);
    --wbn-brand-glow:   rgba(0,255,213,.25);
    --wbn-gold:         #f0b429;
    --wbn-gold-dim:     rgba(240,180,41,.12);
    --wbn-gold-glow:    rgba(240,180,41,.3);
    --wbn-red:          #ff4444;
    --wbn-green:        #22c55e;
    --wbn-green-dim:    rgba(34,197,94,.1);
    --wbn-shadow:       0 4px 32px rgba(0,0,0,.5);
    --wbn-radius:       12px;
}

/* Light mode overrides */
.wbn-light {
    --wbn-bg:           #f5f5f5;
    --wbn-surface:      #ffffff;
    --wbn-surface2:     #f0f0f0;
    --wbn-border:       #e0e0e0;
    --wbn-border2:      #ccc;
    --wbn-text:         #111;
    --wbn-text2:        #444;
    --wbn-muted:        #999;
    --wbn-brand-dim:    rgba(0,180,150,.1);
    --wbn-gold-dim:     rgba(200,136,10,.1);
    --wbn-shadow:       0 4px 24px rgba(0,0,0,.1);
}

/* ── Base reset for webinar scope ─────────────────────────────── */
.wbn-page {
    background: var(--wbn-bg);
    color: var(--wbn-text);
    min-height: 100vh;
    font-family: 'Poppins', 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── TOP VIEWER BAR ───────────────────────────────────────────── */
.wbn-vbar {
    background: #050505;
    border-bottom: 1px solid var(--wbn-border);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 50;
    position: relative;
}
.wbn-light .wbn-vbar {
    background: #1a1a1a;
}
.wbn-vbar-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--wbn-green);
    flex-shrink: 0;
    animation: wbnPulse 1.2s ease-in-out infinite;
}
.wbn-vbar-txt { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); }
.wbn-vbar-num {
    font-size: 13px; font-weight: 900;
    color: var(--wbn-green);
    min-width: 36px; text-align: center;
}

/* ── TOP NAV ──────────────────────────────────────────────────── */
.wbn-nav {
    background: var(--wbn-surface);
    border-bottom: 1px solid var(--wbn-border);
    padding: 12px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; top: 0; z-index: 90;
    backdrop-filter: blur(12px);
}
.wbn-nav-logo {
    font-size: 15px; font-weight: 800;
    color: var(--wbn-text);
    text-decoration: none;
    display: flex; align-items: center; gap: 8px;
}
.wbn-nav-logo em { color: var(--wbn-brand); font-style: normal; }
.wbn-nav-right { display: flex; align-items: center; gap: 14px; }
.wbn-nav-live {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800;
    color: var(--wbn-red);
    letter-spacing: 1.5px; text-transform: uppercase;
}
.wbn-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--wbn-red);
    animation: wbnPulse 1s ease-in-out infinite;
}
.wbn-nav-warn {
    font-size: 11px; font-weight: 600;
    color: var(--wbn-muted);
    display: flex; align-items: center; gap: 5px;
}

/* Theme toggle button */
.wbn-theme-btn {
    background: var(--wbn-surface2);
    border: 1px solid var(--wbn-border2);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--wbn-text2);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    display: flex; align-items: center; gap: 5px;
    font-family: inherit;
}
.wbn-theme-btn:hover {
    border-color: var(--wbn-brand);
    color: var(--wbn-brand);
}

/* ── HERO BAND ────────────────────────────────────────────────── */
.wbn-hband {
    background: linear-gradient(135deg, #070707 0%, #0d1a0d 50%, #070707 100%);
    border-bottom: 1px solid var(--wbn-border);
    padding: 14px 28px;
    position: relative; overflow: hidden;
}
.wbn-light .wbn-hband {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d2010 50%, #1a1a1a 100%);
}
.wbn-hband::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,255,213,.08) 0%, transparent 60%);
    pointer-events: none;
}
.wbn-hband::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wbn-brand), transparent);
}
.wbn-hband-in {
    max-width: 1320px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; position: relative; z-index: 1;
}
.wbn-hband-title {
    font-size: clamp(13px, 1.8vw, 18px);
    font-weight: 800; color: #f5f5f5;
    line-height: 1.3;
}
.wbn-hband-title span { color: var(--wbn-brand); }
.wbn-hband-badge {
    display: flex; align-items: center; gap: 7px;
    background: var(--wbn-brand-dim);
    border: 1px solid rgba(0,255,213,.25);
    border-radius: 100px; padding: 5px 14px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--wbn-brand); flex-shrink: 0;
}
.wbn-hband-bd {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--wbn-brand);
    animation: wbnPulse 1.2s ease-in-out infinite;
}

/* ── LAYOUT ───────────────────────────────────────────────────── */
.wbn-layout {
    max-width: 1320px; margin: 0 auto;
    padding: 20px 22px 40px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
}

/* ── VIDEO COLUMN ─────────────────────────────────────────────── */
.wbn-vid-wrap {
    background: #000;
    border-radius: var(--wbn-radius);
    overflow: hidden;
    box-shadow: var(--wbn-shadow);
}
.wbn-vid-asp {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    width: 100%;
}
.wbn-vid-asp video,
.wbn-vid-asp iframe {
    width: 100%; height: 100%;
    border: none; display: block;
    position: absolute; inset: 0;
}

/* Placeholder / play screen */
.wbn-vid-ph {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #080808 0%, #0f1a0f 60%, #080808 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px; cursor: pointer; z-index: 2;
}
.wbn-vid-ph::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(0,255,213,.1) 0%, transparent 65%);
    pointer-events: none;
}
.wbn-vid-play {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--wbn-brand), #00c9a7);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 16px rgba(0,255,213,.12), 0 8px 32px rgba(0,255,213,.3);
    transition: all .25s; position: relative; z-index: 1;
}
.wbn-vid-play::after {
    content: '';
    display: block; width: 0; height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 24px solid #0a0a0a;
    margin-left: 5px;
}
.wbn-vid-ph:hover .wbn-vid-play {
    transform: scale(1.1);
    box-shadow: 0 0 0 22px rgba(0,255,213,.18), 0 12px 42px rgba(0,255,213,.4);
}
.wbn-vid-ph h3 {
    font-size: 16px; font-weight: 800; color: #f0f0f0;
    text-align: center; padding: 0 24px; position: relative; z-index: 1;
}
.wbn-vid-ph p {
    font-size: 11px; color: rgba(255,255,255,.4); font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase; position: relative; z-index: 1;
}

/* Progress bar */
.wbn-vid-prog { height: 3px; background: rgba(255,255,255,.06); }
.wbn-vid-fill {
    height: 3px;
    background: linear-gradient(90deg, var(--wbn-brand), #00c9a7);
    width: 0%; transition: width .8s linear;
}
.wbn-vid-row {
    background: #0a0a0a;
    padding: 9px 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.wbn-vid-time { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.4); }
.wbn-vid-time strong { color: rgba(255,255,255,.75); }
.wbn-vid-watch {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,.35);
    display: flex; align-items: center; gap: 5px;
}
.wbn-vid-watch span { color: var(--wbn-green); font-weight: 800; }

/* Unmute button */
.wbn-unmute-btn {
    position: absolute; bottom: 14px; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(0,0,0,.8);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 100px; padding: 8px 18px;
    color: #fff; font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    backdrop-filter: blur(8px); white-space: nowrap;
    transition: all .2s;
}
.wbn-unmute-btn:hover {
    border-color: var(--wbn-brand); color: var(--wbn-brand);
}

/* ── UNLOCK STRIP ─────────────────────────────────────────────── */
.wbn-ustrip {
    margin-top: 14px;
    background: var(--wbn-surface);
    border: 1.5px solid var(--wbn-border2);
    border-radius: 10px; padding: 13px 17px;
    display: flex; align-items: center; gap: 12px;
    transition: all .4s;
}
.wbn-ustrip.on {
    background: var(--wbn-green-dim);
    border-color: rgba(34,197,94,.3);
}
.wbn-u-ico { font-size: 20px; flex-shrink: 0; }
.wbn-u-body { flex: 1; min-width: 0; }
.wbn-u-lbl {
    font-size: 12px; font-weight: 800; color: var(--wbn-text);
    margin-bottom: 3px; transition: color .4s;
}
.wbn-ustrip.on .wbn-u-lbl { color: var(--wbn-green); }
.wbn-u-sub { font-size: 11px; color: var(--wbn-muted); font-weight: 600; line-height: 1.4; }
.wbn-u-bar { width: 100px; height: 4px; background: var(--wbn-border2); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.wbn-u-bar-f {
    height: 4px;
    background: linear-gradient(90deg, var(--wbn-brand), #00c9a7);
    width: 0%; border-radius: 4px; transition: width .8s linear;
}

/* ── CTA BOX ──────────────────────────────────────────────────── */
.wbn-cta-box {
    margin-top: 14px;
    border-radius: 14px; overflow: hidden;
    display: none;
}
.wbn-cta-box.visible {
    display: block;
    animation: wbnCtaIn .5s ease both;
}
@keyframes wbnCtaIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.wbn-cta-in {
    background: var(--wbn-surface);
    border: 1.5px solid var(--wbn-border2);
    border-radius: 14px; padding: 24px 22px;
}
.wbn-cta-in h3 {
    font-size: 20px; font-weight: 900; color: var(--wbn-text);
    letter-spacing: -.4px; margin-bottom: 6px; line-height: 1.2;
}
.wbn-cta-in h3 .g { color: var(--wbn-brand); }
.wbn-cta-in > p {
    font-size: 13px; color: var(--wbn-text2);
    line-height: 1.65; margin-bottom: 18px;
}

/* Pay instructions */
.wbn-pay-instructions {
    background: var(--wbn-brand-dim);
    border: 1px solid rgba(0,255,213,.2);
    border-radius: 10px; padding: 14px 16px;
    font-size: 13px; color: var(--wbn-text2);
    line-height: 1.7; margin-bottom: 16px;
}
.wbn-pay-instructions strong { color: var(--wbn-brand); }

/* Offer box */
.wbn-offer-box {
    background: var(--wbn-surface2);
    border: 1px solid var(--wbn-border2);
    border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.wbn-offer-name { font-size: 13px; font-weight: 800; color: var(--wbn-text); margin-bottom: 10px; }
.wbn-offer-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wbn-offer-list li {
    font-size: 12px; color: var(--wbn-text2);
    display: flex; align-items: flex-start; gap: 7px; line-height: 1.4;
}
.wbn-offer-list li::before {
    content: "✓"; color: var(--wbn-brand);
    font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.wbn-price-row {
    display: flex; align-items: baseline; gap: 8px;
    padding-top: 12px; margin-top: 10px;
    border-top: 1px solid var(--wbn-border2);
}
.wbn-price-big {
    font-size: 30px; font-weight: 900;
    color: var(--wbn-brand); letter-spacing: -1px; line-height: 1;
}
.wbn-price-note { font-size: 12px; color: var(--wbn-muted); font-weight: 600; }

/* Countdown inside CTA */
.wbn-cta-cd {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 14px 0 4px; padding: 10px;
    background: var(--wbn-brand-dim);
    border: 1px solid rgba(0,255,213,.2);
    border-radius: 8px;
}
.wbn-cta-cd-label { font-size: 11px; font-weight: 700; color: var(--wbn-muted); text-transform: uppercase; letter-spacing: .8px; }
.wbn-cta-cd-time { font-size: 22px; font-weight: 900; color: var(--wbn-brand); letter-spacing: 2px; }

/* CTA Buttons */
.wbn-cta-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; width: 100%; }
.wbn-pay-btn {
    width: 100%;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 18px; border: none; border-radius: 10px;
    font-family: inherit; font-size: 14px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .4px;
    cursor: pointer; text-decoration: none;
    transition: all .2s;
    white-space: normal; text-align: center;
    overflow-wrap: break-word; word-break: break-word;
}
.wbn-pay-btn.primary {
    background: linear-gradient(135deg, var(--wbn-brand), #00c9a7);
    color: #050505;
    box-shadow: 0 6px 22px var(--wbn-brand-glow);
}
.wbn-pay-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px var(--wbn-brand-glow); }
.wbn-pay-btn.secondary {
    background: var(--wbn-surface2);
    border: 1.5px solid var(--wbn-border2);
    color: var(--wbn-text);
}
.wbn-pay-btn.secondary:hover { border-color: var(--wbn-brand); color: var(--wbn-brand); }
.wbn-pay-btn.gold {
    background: linear-gradient(135deg, #c8880a, #f0b429);
    color: #fff;
    box-shadow: 0 6px 22px var(--wbn-gold-glow);
}
.wbn-pay-btn.gold:hover { transform: translateY(-2px); box-shadow: 0 10px 32px var(--wbn-gold-glow); }
.wbn-pay-btn.danger {
    background: linear-gradient(135deg, #c0320a, #e04020);
    color: #fff;
    box-shadow: 0 6px 22px rgba(192,50,10,.35);
}
.wbn-pay-btn.danger:hover { transform: translateY(-2px); }

.wbn-pay-note {
    font-size: 11px; color: var(--wbn-muted); text-align: center;
    margin-top: 9px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}

/* ── MOBILE FULL CTA SECTION ──────────────────────────────────── */
/* Always hidden on desktop */
.wbn-mob-cta { display: none; }
@media (min-width: 981px) { .wbn-mob-cta { display: none !important; } }

@media (max-width: 980px) {
    /* Base state: hidden, shown by JS .visible */
    .wbn-mob-cta {
        display: none;
        width: 100%;
        background: var(--wbn-surface);
        border-top: 2px solid var(--wbn-brand);
        border-bottom: 1px solid var(--wbn-border);
    }
    .wbn-mob-cta.visible { display: block; animation: wbnCtaIn .5s ease both; }
    .wbn-light .wbn-mob-cta { background: #fff; }

    /* Sticky countdown bar at top of the CTA section */
    .wbn-mob-cd-bar {
        position: sticky;
        top: calc(44px + 64px + 56.25vw + 28px); /* nav + hband + video + progress row */
        z-index: 48;
        background: #050e08;
        border-bottom: 1px solid rgba(0,255,213,.2);
        padding: 9px 16px;
        display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .wbn-light .wbn-mob-cd-bar { background: #0a2010; }
    .wbn-mob-cd-label {
        font-size: 10px; font-weight: 800;
        color: rgba(255,255,255,.5);
        text-transform: uppercase; letter-spacing: 1px;
    }
    .wbn-mob-cd-time {
        font-size: 19px; font-weight: 900;
        color: var(--wbn-brand); letter-spacing: 2px;
    }

    /* CTA body */
    .wbn-mob-cta-body { padding: 18px 16px 22px; }
    .wbn-mob-cta-heading {
        font-size: 19px; font-weight: 900; color: var(--wbn-text);
        margin-bottom: 6px; line-height: 1.25;
    }
    .wbn-mob-cta-sub {
        font-size: 13px; color: var(--wbn-text2);
        line-height: 1.6; margin-bottom: 14px;
    }

    /* Payment instructions */
    .wbn-mob-pay-instr {
        background: var(--wbn-brand-dim);
        border: 1px solid rgba(0,255,213,.2);
        border-radius: 10px; padding: 13px 15px;
        font-size: 13px; color: var(--wbn-text2);
        line-height: 1.75; margin-bottom: 14px;
    }
    .wbn-mob-pay-instr strong { color: var(--wbn-brand); }
    .wbn-light .wbn-mob-pay-instr { background: rgba(0,180,150,.08); color: #222; }

    /* Offer box */
    .wbn-mob-offer-box {
        background: var(--wbn-surface2);
        border: 1px solid var(--wbn-border2);
        border-radius: 10px; padding: 14px; margin-bottom: 14px;
    }
    .wbn-mob-offer-name {
        font-size: 13px; font-weight: 800; color: var(--wbn-text); margin-bottom: 10px;
    }
    .wbn-mob-offer-list {
        list-style: none; display: flex; flex-direction: column; gap: 7px; padding: 0;
    }
    .wbn-mob-offer-list li {
        font-size: 12px; color: var(--wbn-text2);
        display: flex; align-items: flex-start; gap: 7px; line-height: 1.45;
    }
    .wbn-mob-offer-list li::before {
        content: "✓"; color: var(--wbn-brand);
        font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
    }
    .wbn-mob-price-row {
        display: flex; align-items: baseline; gap: 8px;
        padding-top: 12px; margin-top: 10px;
        border-top: 1px solid var(--wbn-border2);
    }
    .wbn-mob-price-big {
        font-size: 28px; font-weight: 900; color: var(--wbn-brand); letter-spacing: -1px;
    }
    .wbn-mob-price-note { font-size: 12px; color: var(--wbn-muted); font-weight: 600; }

    /* All buttons stacked */
    .wbn-mob-btns {
        display: flex; flex-direction: column; gap: 10px; width: 100%;
        margin-top: 4px;
    }
    .wbn-mob-btns .wbn-pay-btn {
        font-size: 14px; padding: 16px 14px;
    }
}

/* ── CHAT COLUMN ──────────────────────────────────────────────── */
.wbn-chat-col {
    display: flex; flex-direction: column;
    position: sticky; top: 80px; height: fit-content;
    max-height: calc(100vh - 100px);
}
.wbn-chat-hdr {
    background: linear-gradient(135deg, #0a0f0a 0%, #0d1a10 100%);
    border-radius: var(--wbn-radius) var(--wbn-radius) 0 0;
    padding: 13px 16px;
    display: flex; align-items: center; justify-content: space-between;
    position: relative; overflow: hidden;
}
.wbn-chat-hdr::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--wbn-brand), transparent);
}
.wbn-chat-hdr-title {
    font-size: 13px; font-weight: 800; color: #f5f5f5;
    display: flex; align-items: center; gap: 8px;
}
.wbn-chat-live-badge {
    display: flex; align-items: center; gap: 5px;
    background: rgba(255,68,68,.15);
    border: 1px solid rgba(255,68,68,.35);
    border-radius: 100px; padding: 3px 9px;
    font-size: 9px; font-weight: 800;
    color: #ff8060; letter-spacing: 1.5px; text-transform: uppercase;
}
.wbn-chat-live-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #ff8060;
    animation: wbnPulse 1s ease-in-out infinite;
}
.wbn-chat-cnt { font-size: 11px; color: rgba(255,255,255,.35); font-weight: 700; }

/* Messages feed */
.wbn-chat-msgs {
    background: var(--wbn-surface);
    border-left: 1px solid var(--wbn-border);
    border-right: 1px solid var(--wbn-border);
    flex: 1; min-height: 0;
    height: 480px;
    overflow-y: auto;
    padding: 12px;
    display: flex; flex-direction: column; gap: 9px;
    scroll-behavior: smooth;
}
.wbn-chat-msgs::-webkit-scrollbar { width: 4px; }
.wbn-chat-msgs::-webkit-scrollbar-thumb { background: var(--wbn-border2); border-radius: 4px; }

.wbn-msg { display: flex; align-items: flex-start; gap: 9px; animation: wbnMsgIn .3s ease both; }
@keyframes wbnMsgIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.wbn-m-av {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.wbn-m-name {
    font-size: 10.5px; font-weight: 800; color: var(--wbn-text);
    margin-bottom: 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.wbn-m-host {
    background: var(--wbn-brand); color: #050505;
    font-size: 8px; font-weight: 800; letter-spacing: .8px;
    padding: 1px 5px; border-radius: 3px; text-transform: uppercase;
}
.wbn-m-ts { font-size: 9px; color: var(--wbn-muted); font-weight: 500; }
.wbn-m-txt {
    font-size: 12.5px; color: var(--wbn-text2);
    line-height: 1.55; background: var(--wbn-surface2);
    border-radius: 0 10px 10px 10px;
    padding: 8px 11px; border: 1px solid var(--wbn-border);
}
.wbn-msg.host .wbn-m-txt {
    background: var(--wbn-brand-dim);
    border-color: rgba(0,255,213,.2); color: var(--wbn-text);
}

/* Typing indicator */
.wbn-typing {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 12px; opacity: 0; transition: opacity .3s; min-height: 32px;
}
.wbn-typing.show { opacity: 1; }
.wbn-tdots {
    display: flex; gap: 3px; align-items: center;
    background: var(--wbn-surface2); border: 1px solid var(--wbn-border);
    border-radius: 0 10px 10px 10px; padding: 8px 13px;
}
.wbn-tdots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--wbn-muted);
    animation: wbnDot .9s ease-in-out infinite;
}
.wbn-tdots span:nth-child(2) { animation-delay: .2s; }
.wbn-tdots span:nth-child(3) { animation-delay: .4s; }
@keyframes wbnDot {
    0%,60%,100% { transform: none; opacity: .5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* Chat gate */
.wbn-chat-gate {
    background: var(--wbn-surface);
    border-left: 1px solid var(--wbn-border);
    border-right: 1px solid var(--wbn-border);
    border-bottom: 1px solid var(--wbn-border);
    border-radius: 0 0 var(--wbn-radius) var(--wbn-radius);
    padding: 14px;
}
.wbn-gate-label {
    font-size: 11px; font-weight: 700; color: var(--wbn-muted);
    margin-bottom: 8px; text-align: center;
}
.wbn-gate-form { display: flex; flex-direction: column; gap: 8px; }
.wbn-gate-inp {
    background: var(--wbn-surface2);
    border: 1.5px solid var(--wbn-border2);
    border-radius: 8px; padding: 9px 12px;
    font-family: inherit; font-size: 12px; font-weight: 500;
    color: var(--wbn-text); outline: none; transition: border-color .2s;
    width: 90%;
}
.wbn-gate-inp:focus { border-color: var(--wbn-brand); }
.wbn-gate-inp::placeholder { color: var(--wbn-muted); }
.wbn-gate-row { display: flex; gap: 7px; }
.wbn-gate-btn {
    background: var(--wbn-brand);
    color: #050505; border: none; border-radius: 8px;
    padding: 9px 16px; font-family: inherit;
    font-size: 12px; font-weight: 800;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: all .2s;
}
.wbn-gate-btn:hover { opacity: .85; }

/* Chat input row */
.wbn-chat-inp-row {
    background: var(--wbn-surface);
    border: 1px solid var(--wbn-border2); border-top: none;
    border-radius: 0 0 var(--wbn-radius) var(--wbn-radius);
    padding: 11px; display: none; gap: 8px;
}
.wbn-chat-inp-row.open { display: flex; }
.wbn-c-inp {
    flex: 1; background: var(--wbn-surface2);
    border: 1.5px solid var(--wbn-border2);
    border-radius: 8px; padding: 10px 13px;
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--wbn-text); outline: none; transition: border-color .2s;
}
.wbn-c-inp:focus { border-color: var(--wbn-brand); }
.wbn-c-inp::placeholder { color: var(--wbn-muted); }
.wbn-c-send {
    background: var(--wbn-brand); color: #050505;
    border: none; width: 38px; height: 38px; border-radius: 8px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0; transition: all .2s;
}
.wbn-c-send:hover { opacity: .85; transform: scale(1.05); }

/* ── PAYMENT TICKER ───────────────────────────────────────────── */
.wbn-pay-ticker {
    position: fixed; bottom: 20px; left: 16px;
    z-index: 9000;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none; max-width: 290px;
}
.wbn-pay-tick {
    background: var(--wbn-surface);
    border: 1px solid var(--wbn-border2);
    border-radius: 12px; padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
    animation: wbnTickIn .4s cubic-bezier(.34,1.56,.64,1) both;
    pointer-events: none; opacity: 0;
}
.wbn-pay-tick.show { opacity: 1; }
@keyframes wbnTickIn {
    from { opacity: 0; transform: translateX(-30px) scale(.95) }
    to   { opacity: 1; transform: none }
}
@keyframes wbnTickOut {
    from { opacity: 1; transform: none }
    to   { opacity: 0; transform: translateX(-20px) }
}
.wbn-pay-tick.hide { animation: wbnTickOut .35s ease both; }
.wbn-pay-tick-av {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--wbn-brand), #00c9a7);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #050505; flex-shrink: 0;
}
.wbn-pay-tick-name { font-size: 12px; font-weight: 800; color: var(--wbn-text); line-height: 1.2; margin-bottom: 1px; }
.wbn-pay-tick-name em { color: var(--wbn-muted); font-style: normal; font-weight: 600; font-size: 10px; }
.wbn-pay-tick-prog { font-size: 10px; color: var(--wbn-brand); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

/* ── REDIRECT OVERLAY ─────────────────────────────────────────── */
.wbn-redir-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(5,5,5,.97); z-index: 9999;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 18px;
}
.wbn-redir-overlay.show { display: flex; animation: wbnFade .7s ease both; }
@keyframes wbnFade { from { opacity: 0 } to { opacity: 1 } }
.wbn-redir-icon { font-size: 56px; }
.wbn-redir-title {
    font-size: 28px; font-weight: 900; color: var(--wbn-brand);
    max-width: 480px; line-height: 1.2;
}
.wbn-redir-sub { font-size: 15px; color: rgba(255,255,255,.45); font-weight: 600; }
.wbn-redir-num { font-size: 68px; font-weight: 900; color: #fff; line-height: 1; }

/* ── FOOTER ───────────────────────────────────────────────────── */
.wbn-footer {
    border-top: 1px solid var(--wbn-border);
    padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    background: var(--wbn-surface);
}
.wbn-footer-logo { font-size: 13px; font-weight: 800; color: var(--wbn-text); }
.wbn-footer-logo em { color: var(--wbn-brand); font-style: normal; }
.wbn-footer p { font-size: 10px; color: var(--wbn-muted); font-weight: 600; }

/* ── ANIMATIONS ───────────────────────────────────────────────── */
@keyframes wbnPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.8); }
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 980px) {
    .wbn-layout {
        display: flex; flex-direction: column;
        padding: 0; gap: 0; max-width: 100%;
    }
    .wbn-vid-col { order: 0; padding: 0; width: 100%; }
    .wbn-vid-wrap {
        position: sticky;
        top: calc(44px + 64px); /* nav 44px + hero band ~64px */
        z-index: 50;
        border-radius: 0; width: 100%;
    }
    /* mob-cta sits in normal flow between video col and chat col */
    .wbn-mob-cta { order: 1; }
    .wbn-chat-col {
        order: 2; position: static; width: 100%;
        max-height: none;
    }
    .wbn-chat-hdr { border-radius: 0; }
    .wbn-chat-msgs { height: 360px; border-radius: 0; }
    .wbn-chat-gate {
        border-radius: 0; border-left: none;
        border-right: none; border-bottom: 1px solid var(--wbn-border);
    }
    .wbn-chat-inp-row { border-radius: 0; border-left: none; border-right: none; }
    /* Hide desktop-only unlock strip and CTA box on mobile */
    .wbn-ustrip { display: none !important; }
    .wbn-cta-box { display: none !important; }

    /* ── HERO BAND — compact on mobile (was display:none) ── */
    .wbn-hband {
        display: block;
        padding: 10px 14px;
        position: sticky;
        top: 0;
        z-index: 89; /* just below .wbn-nav (90) */
    }
    .wbn-hband-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .wbn-hband-title {
        font-size: clamp(12px, 3.5vw, 15px);
        line-height: 1.35;
    }
    .wbn-hband-badge {
        font-size: 9px;
        padding: 4px 10px;
        letter-spacing: 1px;
    }

    /* ── VIEWER BAR — slimmer on mobile ── */
    .wbn-vbar {
        padding: 6px 14px;
        gap: 6px;
    }
    .wbn-vbar-txt { font-size: 11px; }
    .wbn-vbar-num { font-size: 12px; }

    /* ── NAV ── */
    .wbn-nav {
        padding: 10px 14px;
        height: 44px;
        /* nav sticks; hband sticks just below it via top:44px on vid-wrap */
    }
    .wbn-nav-warn { display: none; }

    .wbn-footer { padding: 13px 16px; flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── LIGHT MODE FIXES ─────────────────────────────────────────── */
.wbn-light .wbn-vid-ph {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d2010 60%, #1a1a1a 100%);
}
.wbn-light .wbn-chat-hdr {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d2010 100%);
}
.wbn-light .wbn-vid-row { background: #222; }
.wbn-light .wbn-vid-prog { background: rgba(0,0,0,.12); }
.wbn-light .wbn-pay-tick { background: #fff; border-color: #ddd; }
.wbn-light .wbn-pay-tick-name { color: #111; }
.wbn-light .wbn-m-txt { background: #f0f0f0; border-color: #e0e0e0; color: #333; }
.wbn-light .wbn-msg.host .wbn-m-txt { background: rgba(0,180,150,.1); border-color: rgba(0,180,150,.2); color: #111; }
.wbn-light .wbn-m-name { color: #111; }
.wbn-light .wbn-chat-msgs { background: #fafafa; border-color: #e0e0e0; }
.wbn-light .wbn-chat-gate { background: #fff; border-color: #e0e0e0; }
.wbn-light .wbn-chat-inp-row { background: #fff; border-color: #ddd; }
.wbn-light .wbn-gate-inp { background: #f5f5f5; border-color: #ddd; color: #111; }
.wbn-light .wbn-c-inp { background: #f5f5f5; border-color: #ddd; color: #111; }
.wbn-light .wbn-cta-in { background: #fff; border-color: #ddd; }
.wbn-light .wbn-offer-box { background: #f5f5f5; border-color: #ddd; }
.wbn-light .wbn-ustrip { background: #fff; border-color: #ddd; }
.wbn-light .wbn-footer { background: #fff; border-color: #e0e0e0; }

/* Dashboard-embedded webinar training list badge */
.training-type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.badge-webinar {
    background: rgba(0,255,213,.12);
    border: 1px solid rgba(0,255,213,.25);
    color: var(--brand, #00ffd5);
}
.badge-training {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #aaa;
}

/* ══════════════════════════════════════════════════════════════
   TIMED CTA POPUPS  (append to webinar-trainings.css)
   ══════════════════════════════════════════════════════════════ */

/* Container — bottom-right, stacks upward */
.wbn-tcta-wrap {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 8900;
    display: flex;
    flex-direction: column-reverse; /* newest on top */
    gap: 10px;
    pointer-events: none;
    max-width: 320px;
    width: calc(100vw - 40px);
}

/* Individual popup card */
.wbn-tcta {
    pointer-events: all;
    background: var(--wbn-surface);
    border: 1.5px solid var(--wbn-border2);
    border-radius: 14px;
    padding: 14px 14px 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.55);
    animation: wbnTctaIn .45s cubic-bezier(.34,1.56,.64,1) both;
    position: relative;
    overflow: hidden;
}

/* Accent top border line per style */
.wbn-tcta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
}
.wbn-tcta.s-primary::before  { background: linear-gradient(90deg, var(--wbn-brand), #00c9a7); }
.wbn-tcta.s-gold::before      { background: linear-gradient(90deg, #c8880a, #f0b429); }
.wbn-tcta.s-danger::before    { background: linear-gradient(90deg, #c0320a, #e04020); }
.wbn-tcta.s-secondary::before { background: var(--wbn-border2); }

@keyframes wbnTctaIn {
    from { opacity: 0; transform: translateX(40px) scale(.95); }
    to   { opacity: 1; transform: none; }
}
@keyframes wbnTctaOut {
    from { opacity: 1; transform: none; max-height: 200px; }
    to   { opacity: 0; transform: translateX(40px); max-height: 0; padding: 0; margin: 0; }
}
.wbn-tcta.hiding {
    animation: wbnTctaOut .35s ease both;
}

/* Close button */
.wbn-tcta-close {
    position: absolute;
    top: 8px; right: 10px;
    background: none;
    border: none;
    color: var(--wbn-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s;
}
.wbn-tcta-close:hover { color: var(--wbn-text); }

/* Description text above button */
.wbn-tcta-desc {
    font-size: 12px;
    color: var(--wbn-text2);
    line-height: 1.55;
    margin-bottom: 10px;
    padding-right: 18px; /* room for close btn */
}
.wbn-tcta-desc strong { color: var(--wbn-text); }
.wbn-tcta-desc a { color: var(--wbn-brand); text-decoration: underline; }

/* The CTA button inside popup */
.wbn-tcta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    white-space: normal;
    word-break: break-word;
}
.wbn-tcta-btn.s-primary {
    background: linear-gradient(135deg, var(--wbn-brand), #00c9a7);
    color: #050505;
    box-shadow: 0 4px 18px var(--wbn-brand-glow);
}
.wbn-tcta-btn.s-primary:hover  { transform: translateY(-1px); box-shadow: 0 7px 24px var(--wbn-brand-glow); }
.wbn-tcta-btn.s-gold {
    background: linear-gradient(135deg, #c8880a, #f0b429);
    color: #fff;
    box-shadow: 0 4px 18px var(--wbn-gold-glow);
}
.wbn-tcta-btn.s-gold:hover     { transform: translateY(-1px); }
.wbn-tcta-btn.s-danger {
    background: linear-gradient(135deg, #c0320a, #e04020);
    color: #fff;
    box-shadow: 0 4px 18px rgba(192,50,10,.3);
}
.wbn-tcta-btn.s-danger:hover   { transform: translateY(-1px); }
.wbn-tcta-btn.s-secondary {
    background: var(--wbn-surface2);
    border: 1.5px solid var(--wbn-border2);
    color: var(--wbn-text);
}
.wbn-tcta-btn.s-secondary:hover { border-color: var(--wbn-brand); color: var(--wbn-brand); }

/* Mobile tweak */
@media (max-width: 980px) {
    .wbn-tcta-wrap {
        bottom: 16px;
        right: 12px;
        left: 12px;
        max-width: 100%;
        width: auto;
    }
}

/* ── TIMED CTA BUILDER (admin form) ─────────────────────────── */
.tcta-builder-row {
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
}
.tcta-builder-row .tcta-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.tcta-builder-row .tcta-row-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.tcta-builder-row .tcta-desc-field {
    margin-top: 8px;
}
.tcta-remove-btn {
    position: absolute;
    top: 10px; right: 10px;
    background: #5c2b29;
    color: #ffe2e2;
    border: none;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 12px;
    cursor: pointer;
}