/* SBGG Bahia | Vídeo pop-up conversão v1.0.3
   Desktop/tablet: vídeo à esquerda, contexto e CTA à direita.
   Celular: vídeo com controles persistentes e CTA, sem texto editorial. */
#sbgg-jvp-modal[hidden],
#sbgg-jvp-modal [hidden] { display: none !important; }
#sbgg-jvp-modal, #sbgg-jvp-modal * { box-sizing: border-box !important; }
#sbgg-jvp-modal.sbgg-jvp {
    position: fixed !important; inset: 0 !important; z-index: 2147483000 !important;
    display: grid !important; place-items: center !important;
    padding: 38px 24px !important; margin: 0 !important;
    background: rgba(12, 24, 23, .57) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    overflow-y: auto !important; overscroll-behavior: contain;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
#sbgg-jvp-modal .sbgg-jvp__backdrop { position: fixed; inset: 0; z-index: 0; }
#sbgg-jvp-modal .sbgg-jvp__dialog {
    position: relative !important; z-index: 1 !important;
    width: min(1000px, calc(100vw - 76px));
    height: min(650px, calc(100dvh - 116px));
    min-height: 410px;
    margin: auto !important; padding: 0 !important;
    display: flex !important; flex-direction: row !important;
    border: 0 !important; border-radius: 14px !important;
    background: #fbf9f5 !important; color: #594538 !important;
    box-shadow: 0 22px 90px rgba(0, 0, 0, .28) !important;
    overflow: visible !important;
    isolation: isolate;
}
#sbgg-jvp-modal .sbgg-jvp__player {
    position: relative !important; display: block !important; flex: 0 0 auto !important;
    height: 100% !important; width: auto !important;
    aspect-ratio: 9 / 16;
    margin: 0 !important; padding: 0 !important;
    background: #172320 !important;
    border: 0 !important; border-radius: 14px 0 0 14px !important;
    overflow: hidden !important;
}
#sbgg-jvp-modal .sbgg-jvp__video {
    position: absolute !important; inset: 0 !important;
    display: block !important; width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
    background: #172320 !important;
    object-fit: cover !important;
}
/* Barra sempre visível, integrada visualmente ao próprio vídeo. */
#sbgg-jvp-modal .sbgg-jvp__controls {
    position: absolute !important; z-index: 5 !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    display: flex !important; align-items: center !important; gap: 4px !important;
    min-height: 60px !important; padding: 18px 9px 9px !important;
    border: 0 !important; margin: 0 !important;
    color: white !important;
    background: linear-gradient(transparent, rgba(5, 21, 20, .90) 38%, rgba(5, 21, 20, .95)) !important;
}
#sbgg-jvp-modal .sbgg-jvp__controls button {
    display: inline-grid !important; place-items: center !important;
    flex: 0 0 auto !important; width: 32px !important; height: 35px !important;
    min-width: 0 !important; min-height: 0 !important;
    background: transparent !important; color: #fff !important;
    border: 0 !important; border-radius: 7px !important;
    box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
    cursor: pointer !important; line-height: 1 !important;
    -webkit-tap-highlight-color: transparent;
}
#sbgg-jvp-modal .sbgg-jvp__controls button:hover,
#sbgg-jvp-modal .sbgg-jvp__controls button:focus-visible { background: rgba(255,255,255,.17) !important; }
#sbgg-jvp-modal .sbgg-jvp__controls button svg { display: block !important; }
#sbgg-jvp-modal .sbgg-jvp__controls button svg[hidden] { display: none !important; }
#sbgg-jvp-modal .sbgg-jvp__controls .sbgg-jvp__sound.is-muted { color: #ffe5b3 !important; }
#sbgg-jvp-modal .sbgg-jvp__seek-wrap { flex: 1 1 0 !important; min-width: 20px !important; display: flex !important; align-items: center !important; padding: 0 2px !important; margin: 0 !important; }
#sbgg-jvp-modal .sbgg-jvp__seek {
    display: block !important; flex: 1 !important; width: 100% !important; height: 16px !important;
    min-height: 16px !important; margin: 0 !important; padding: 0 !important;
    appearance: none !important; -webkit-appearance: none !important;
    background: transparent !important; cursor: pointer !important;
    border: none !important; box-shadow: none !important; outline-offset: 3px;
}
#sbgg-jvp-modal .sbgg-jvp__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 10px; background: linear-gradient(to right, #dbab6a var(--progress,0%), rgba(255,255,255,.49) var(--progress,0%)); }
#sbgg-jvp-modal .sbgg-jvp__seek::-moz-range-track { height: 4px; border-radius: 10px; background: rgba(255,255,255,.49); }
#sbgg-jvp-modal .sbgg-jvp__seek::-moz-range-progress { background: #dbab6a; height: 4px; }
#sbgg-jvp-modal .sbgg-jvp__seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; margin-top: -4px; height: 12px; width: 12px; border-radius: 100%; background: #fff; border: 2px solid #dbab6a; }
#sbgg-jvp-modal .sbgg-jvp__seek::-moz-range-thumb { height: 10px; width: 10px; border-radius: 100%; background: #fff; border: 2px solid #dbab6a; }
#sbgg-jvp-modal .sbgg-jvp__time {
    white-space: nowrap !important; flex: 0 0 auto !important;
    font: 500 10px/1.2 system-ui, sans-serif !important; color: white !important;
    margin: 0 0 0 1px !important;
    font-variant-numeric: tabular-nums;
}
#sbgg-jvp-modal .sbgg-jvp__start,
#sbgg-jvp-modal .sbgg-jvp__error {
    position: absolute !important; z-index: 7 !important;
    left: 50% !important; top: 45% !important; transform: translate(-50%, -50%);
    max-width: calc(100% - 22px) !important;
    margin: 0 !important; padding: 11px 15px !important;
    border-radius: 24px !important; border: 1px solid rgba(255,255,255,.8) !important;
    background: rgba(2,100,94,.95) !important; color: white !important;
    text-align: center !important; font: 600 12px/1.4 system-ui, sans-serif !important;
    cursor: pointer;
}
#sbgg-jvp-modal .sbgg-jvp__error { cursor: auto; background: rgba(20,26,27,.92) !important; border-radius: 8px !important; }
#sbgg-jvp-modal .sbgg-jvp__content {
    display: flex !important; flex: 1 1 0 !important; min-width: 0 !important; flex-direction: column !important;
    justify-content: center !important; gap: 15px !important;
    padding: clamp(24px, 4.2vw, 53px) clamp(24px, 4vw, 52px) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    border-radius: 0 14px 14px 0 !important;
}
#sbgg-jvp-modal .sbgg-jvp__copy { margin: 0 !important; padding: 0 !important; }
#sbgg-jvp-modal .sbgg-jvp__eyebrow {
    margin: 0 0 16px !important; padding: 0 !important; color: #936444 !important;
    font: 700 10px/1.5 system-ui, sans-serif !important; letter-spacing: .2em !important;
}
#sbgg-jvp-modal .sbgg-jvp__title {
    color: #79573e !important; margin: 0 0 18px !important; padding: 0 !important;
    font: 600 clamp(25px, 2.7vw, 36px)/1.2 Georgia, 'Times New Roman', serif !important;
    letter-spacing: -.025em !important;
}
#sbgg-jvp-modal .sbgg-jvp__intro { color: #715646 !important; margin: 0 0 19px !important; font: 400 clamp(13px, 1.35vw, 16px)/1.6 system-ui, sans-serif !important; }
#sbgg-jvp-modal .sbgg-jvp__topics {
    margin: 0 !important; padding: 0 0 0 22px !important; list-style: disc outside !important;
    display: flex !important; flex-direction: column !important; gap: clamp(6px, 1vh, 11px) !important;
    color: #765846 !important;
}
#sbgg-jvp-modal .sbgg-jvp__topics li { margin: 0 !important; padding: 0 !important; font: 400 clamp(12px, 1.16vw, 14.5px)/1.5 system-ui, sans-serif !important; list-style: disc outside !important; }
#sbgg-jvp-modal .sbgg-jvp__event-meta { margin: 17px 0 0 !important; color: #8b6f5b !important; font: 600 11px/1.5 system-ui, sans-serif !important; }
#sbgg-jvp-modal .sbgg-jvp__event-meta span { margin: 0 5px !important; }
#sbgg-jvp-modal .sbgg-jvp__action { margin: 5px 0 0 !important; padding: 0 !important; }
#sbgg-jvp-modal .sbgg-jvp__cta {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 16px !important; width: auto !important; max-width: 100% !important;
    min-height: 56px !important; padding: 13px 21px !important; margin: 0 !important;
    color: #fff !important; background: #078b80 !important; text-decoration: none !important;
    border: 1px solid transparent !important; border-radius: 5px !important;
    font: 700 14px/1.3 system-ui, sans-serif !important;
    letter-spacing: 0 !important; text-transform: none !important; text-align: center !important;
    box-shadow: 0 5px 22px rgba(2,100,94,.14) !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#sbgg-jvp-modal .sbgg-jvp__cta:hover { background: #02645e !important; transform: translateY(-2px); box-shadow: 0 8px 27px rgba(2,100,94,.23) !important; }
#sbgg-jvp-modal .sbgg-jvp__cta svg { flex: 0 0 auto !important; }
#sbgg-jvp-modal .sbgg-jvp__caption { margin: 12px 0 0 !important; color: #8b7666 !important; font: 400 10px/1.45 system-ui, sans-serif !important; }
/* No desktop o botão X ocupa o painel editorial, sem sobrepor o vídeo. */
#sbgg-jvp-modal .sbgg-jvp__close {
    position: absolute !important; top: 12px !important; right: 12px !important; z-index: 15 !important;
    display: grid !important; place-items: center !important;
    width: 39px !important; height: 39px !important; min-width:39px !important; min-height:39px !important;
    margin: 0 !important; padding: 0 !important;
    background: #02645e !important; color: #fff !important; border: 0 !important;
    border-radius: 7px !important; box-shadow: none !important; cursor: pointer !important;
}
#sbgg-jvp-modal .sbgg-jvp__close svg { display: block !important; }
#sbgg-jvp-modal .sbgg-jvp__close:hover { background: #014f49 !important; color: #fff !important; }
#sbgg-jvp-modal button:focus-visible,
#sbgg-jvp-modal a:focus-visible,
#sbgg-jvp-modal input:focus-visible { outline: 3px solid #d8ac72 !important; outline-offset: 3px !important; }
#sbgg-jvp-modal .sbgg-jvp__sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

@media (min-width: 721px) and (max-width: 1040px) {
    #sbgg-jvp-modal .sbgg-jvp__content { padding: 27px 29px !important; gap: 9px !important; }
    #sbgg-jvp-modal .sbgg-jvp__title { font-size: 27px !important; margin-bottom: 12px !important; }
    #sbgg-jvp-modal .sbgg-jvp__intro { margin-bottom: 12px !important; }
    #sbgg-jvp-modal .sbgg-jvp__topics { gap: 4px !important; }
    #sbgg-jvp-modal .sbgg-jvp__event-meta { margin-top: 10px !important; }
    #sbgg-jvp-modal .sbgg-jvp__cta { min-height: 50px !important; }
}

@media (max-width: 720px) {
    #sbgg-jvp-modal.sbgg-jvp { padding: 54px 18px 22px !important; }
    #sbgg-jvp-modal .sbgg-jvp__dialog {
        display: flex !important; flex-direction: column !important;
        width: min(388px, calc(100vw - 36px));
        max-width: calc(100vw - 36px) !important;
        height: auto !important; min-height: 0 !important; max-height: none !important;
        background: transparent !important; border: 0 !important; border-radius: 0 !important;
        box-shadow: none !important;
    }
    #sbgg-jvp-modal .sbgg-jvp__player {
        width: 100% !important; height: auto !important;
        flex: 0 0 auto !important;
        aspect-ratio: 9 / 16;
        max-height: calc(100dvh - 172px) !important;
        border-radius: 8px !important; box-shadow: 0 15px 50px rgba(0,0,0,.28) !important;
    }
    #sbgg-jvp-modal .sbgg-jvp__controls { min-height: 59px !important; padding: 16px 7px 9px !important; gap: 2px !important; }
    #sbgg-jvp-modal .sbgg-jvp__controls button { width: 33px !important; }
    #sbgg-jvp-modal .sbgg-jvp__time { font-size: 10px !important; }
    #sbgg-jvp-modal .sbgg-jvp__content {
        display: block !important; width: 100% !important; flex: 0 0 auto !important;
        padding: 12px 0 0 !important; margin: 0 !important;
        background: transparent !important; border: 0 !important; border-radius: 0 !important;
        overflow: visible !important;
    }
    #sbgg-jvp-modal .sbgg-jvp__copy,
    #sbgg-jvp-modal .sbgg-jvp__caption { display: none !important; }
    #sbgg-jvp-modal .sbgg-jvp__action { margin: 0 !important; }
    #sbgg-jvp-modal .sbgg-jvp__cta {
        display: flex !important; width: 100% !important; min-height: 54px !important;
        padding: 13px 14px !important;
        background: #078b80 !important; border-radius: 6px !important;
        font-size: 14px !important; box-shadow: 0 8px 24px rgba(0,0,0,.17) !important;
    }
    #sbgg-jvp-modal .sbgg-jvp__close {
        top: -47px !important; right: 0 !important;
        width: 39px !important; height: 39px !important;
        border: 2px solid #f4ede4 !important; border-radius: 50% !important;
        box-shadow: 0 6px 17px rgba(0,0,0,.26) !important;
    }
}
@media (max-width: 350px) {
    #sbgg-jvp-modal .sbgg-jvp__controls .sbgg-jvp__time { font-size: 9px !important; }
    #sbgg-jvp-modal .sbgg-jvp__controls button { width: 29px !important; }
    #sbgg-jvp-modal .sbgg-jvp__controls { padding-left: 5px !important; padding-right: 5px !important; }
}
@media (prefers-reduced-motion: reduce) {
    #sbgg-jvp-modal .sbgg-jvp__cta { transition: none !important; }
}

/* v1.0.3 — Correção definitiva: [hidden] precisa prevalecer sobre o display:grid do modal.
   A regra antiga tinha a mesma especificidade e perdia na cascata. */
#sbgg-jvp-modal.sbgg-jvp[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
#sbgg-jvp-modal.sbgg-jvp [hidden] { display: none !important; }

/* Chamada contextual para áudio quando o autoplay precisa iniciar silenciado. */
#sbgg-jvp-modal .sbgg-jvp__unmute-prompt {
    position: absolute !important;
    z-index: 9 !important;
    top: 12px !important;
    left: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 39px !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 999px !important;
    background: rgba(2,100,94,.96) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.30) !important;
    font: 700 13px/1.3 system-ui, sans-serif !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}
#sbgg-jvp-modal .sbgg-jvp__unmute-prompt svg { flex: none !important; }
#sbgg-jvp-modal .sbgg-jvp__unmute-prompt:hover,
#sbgg-jvp-modal .sbgg-jvp__unmute-prompt:focus-visible {
    background: #014f49 !important;
    color: #fff !important;
}
@media (max-width: 720px) {
    #sbgg-jvp-modal .sbgg-jvp__unmute-prompt {
        top: 10px !important;
        left: 10px !important;
        min-height: 37px !important;
        padding: 8px 11px !important;
        font-size: 12px !important;
    }
}
/* Mantida no final para superar estilos anteriores e estilos globais do tema. */
#sbgg-jvp-modal.sbgg-jvp[hidden],
#sbgg-jvp-modal.sbgg-jvp [hidden] { display: none !important; }
