/* =====================================================
   WLA Network Live Broadcast — UNBOUNDED Global Theme
   FIXED: Video cut problem solved, buttons always visible
   ===================================================== */

:root {
    --wla-nlb-accent:     #d71920;
    --wla-nlb-cream:      #f5f2ec;
    --wla-nlb-cream2:     #ede9e1;
    --wla-nlb-parchment:  #faf8f4;
    --wla-nlb-charcoal:   #1c1c1c;
    --wla-nlb-mid:        #5a5650;
    --wla-nlb-muted:      #8a8580;
    --wla-nlb-gold:       #b8975a;
    --wla-nlb-gold2:      #a07c3e;
    --wla-nlb-divider:    #ddd9d0;
}

html.wla-nlb-open,
html.wla-nlb-open body { overflow: hidden !important; }

/* ── Overlay ── */
.wla-nlb-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    background: rgba(28, 24, 18, 0.70) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}
.wla-nlb-overlay[hidden] { display: none !important; }

/* ── Modal: flex column, fixed max-height so nothing overflows ── */
.wla-nlb-modal,
.wla-nlb-modal * { box-sizing: border-box !important; }

.wla-nlb-modal {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(860px, 100%) !important;
    /* KEY FIX: modal never taller than viewport - 48px */
    height: auto !important;
    max-height: calc(100dvh - 48px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--wla-nlb-divider) !important;
    border-top: 3px solid var(--wla-nlb-gold) !important;
    border-radius: 6px !important;
    background: var(--wla-nlb-parchment) !important;
    box-shadow: 0 30px 80px rgba(28,24,18,.32) !important;
    overflow: hidden !important;
    text-align: left !important;
}

/* ── Header: flex-shrink 0 so it never gets squished ── */
.wla-nlb-header {
    flex: 0 0 auto !important;
    position: relative !important;
    padding: 22px 68px 20px 28px !important;
    background: var(--wla-nlb-cream) !important;
    border-bottom: 1px solid var(--wla-nlb-divider) !important;
}

/* ── LIVE badge ── */
.wla-nlb-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding: 4px 10px 4px 8px !important;
    border: 1px solid rgba(215,25,32,.28) !important;
    border-radius: 3px !important;
    background: rgba(215,25,32,.07) !important;
    color: #c0151c !important;
    font: 700 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

.wla-nlb-live-badge span,
.wla-nlb-floating span {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #d71920 !important;
    animation: wlaNlbPulse 1.5s infinite !important;
}

.wla-nlb-modal h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--wla-nlb-charcoal) !important;
    font: 300 clamp(18px, 2.4vw, 28px)/1.22
          Georgia, "Times New Roman", serif !important;
    letter-spacing: .005em !important;
    word-break: break-word !important;
}

.wla-nlb-modal p {
    margin: 7px 0 0 !important;
    padding: 0 !important;
    color: var(--wla-nlb-mid) !important;
    font: 400 13px/1.60 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    max-width: 600px !important;
}

/* ── Close ── */
.wla-nlb-close {
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--wla-nlb-divider) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--wla-nlb-muted) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color .2s, color .2s, background .2s, transform .2s !important;
    outline: none !important;
}
.wla-nlb-close:hover,
.wla-nlb-close:focus-visible {
    border-color: var(--wla-nlb-gold) !important;
    color: var(--wla-nlb-gold2) !important;
    background: rgba(184,151,90,.08) !important;
    transform: rotate(90deg) !important;
}

/* ── Video area: flex 1 = takes remaining space, never overflows ── */
.wla-nlb-player-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;          /* CRITICAL — allows shrink */
    padding: 16px 16px 0 !important;
    background: var(--wla-nlb-cream2) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 
   KEY FIX for cut video:
   Don't use aspect-ratio alone — combine with max-height
   so video fills flex space but never pushes buttons off screen
*/
.wla-nlb-video-wrap {
    position: relative !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 160px !important;
    max-height: 100% !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #1a1815 !important;
    box-shadow: 0 0 0 1px rgba(184,151,90,.18) !important;
}

/* Maintain 16:9 via padding hack INSIDE the flex item */
.wla-nlb-video-wrap::before {
    content: '' !important;
    display: block !important;
    padding-top: 56.25% !important;   /* 16:9 ratio */
}

.wla-nlb-video-wrap iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}

/* ── Actions: flex-shrink 0 → ALWAYS visible ── */
.wla-nlb-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 14px 16px 18px !important;
    background: var(--wla-nlb-cream2) !important;
    border-top: 1px solid var(--wla-nlb-divider) !important;
}

.wla-nlb-fullscreen,
.wla-nlb-dismiss {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 155px !important;
    height: 42px !important;
    padding: 0 22px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background .18s, border-color .18s, color .18s, transform .15s !important;
    outline: none !important;
    text-decoration: none !important;
}

.wla-nlb-fullscreen {
    background: var(--wla-nlb-gold) !important;
    border: 1.5px solid var(--wla-nlb-gold) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(184,151,90,.28) !important;
}
.wla-nlb-fullscreen:hover,
.wla-nlb-fullscreen:focus-visible {
    background: var(--wla-nlb-gold2) !important;
    border-color: var(--wla-nlb-gold2) !important;
    transform: translateY(-1px) !important;
}

.wla-nlb-dismiss {
    background: transparent !important;
    border: 1.5px solid var(--wla-nlb-divider) !important;
    color: var(--wla-nlb-mid) !important;
}
.wla-nlb-dismiss:hover,
.wla-nlb-dismiss:focus-visible {
    border-color: var(--wla-nlb-gold) !important;
    color: var(--wla-nlb-gold2) !important;
    background: rgba(184,151,90,.06) !important;
}

/* ── Floating button ── */
.wla-nlb-floating {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 2147482999 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 46px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    border: 1.5px solid var(--wla-nlb-gold) !important;
    border-radius: 4px !important;
    background: var(--wla-nlb-parchment) !important;
    color: var(--wla-nlb-gold2) !important;
    font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: 0 6px 24px rgba(28,24,18,.18) !important;
    transition: background .18s, color .18s, transform .18s !important;
    outline: none !important;
}
.wla-nlb-floating:hover,
.wla-nlb-floating:focus-visible {
    background: var(--wla-nlb-gold) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}
.wla-nlb-floating[hidden] { display: none !important; }
.wla-nlb-floating b { font: inherit !important; color: inherit !important; }

/* ── Pulse ── */
@keyframes wlaNlbPulse {
    0%   { box-shadow: 0 0 0 0    rgba(215,25,32,.70); }
    70%  { box-shadow: 0 0 0 10px rgba(215,25,32,0);   }
    100% { box-shadow: 0 0 0 0    rgba(215,25,32,0);    }
}

/* ── Mobile ── */
@media (max-width: 580px) {
    .wla-nlb-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .wla-nlb-modal {
        width: 100% !important;
        max-height: 96dvh !important;
        border-radius: 10px 10px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }
    .wla-nlb-header { padding: 18px 52px 16px 18px !important; }
    .wla-nlb-modal h2 { font-size: 18px !important; }
    .wla-nlb-modal p  { font-size: 12px !important; }
    .wla-nlb-player-area { padding: 10px 10px 0 !important; }
    .wla-nlb-actions {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px 12px 16px !important;
    }
    .wla-nlb-fullscreen,
    .wla-nlb-dismiss { width: 100% !important; min-width: 0 !important; height: 44px !important; }
    .wla-nlb-floating { right: 12px !important; bottom: 12px !important; height: 42px !important; }
}

/* ── Short landscape (laptop small window) ── */
@media (max-height: 620px) and (min-width: 581px) {
    .wla-nlb-overlay  { padding: 8px !important; }
    .wla-nlb-modal    { max-height: calc(100dvh - 16px) !important; }
    .wla-nlb-header   { padding: 12px 60px 12px 24px !important; }
    .wla-nlb-modal h2 { font-size: 17px !important; }
    .wla-nlb-modal p  { display: none !important; }
    .wla-nlb-player-area { padding: 8px 12px 0 !important; }
    .wla-nlb-actions  { padding: 8px 12px 12px !important; }
    .wla-nlb-fullscreen,
    .wla-nlb-dismiss  { height: 36px !important; font-size: 10px !important; min-width: 130px !important; }
}