/* ==========================================
 * Demo Gate — Overlay CSS Classes
 * [SEC-P0] Extraído de inline styles em demo-init.js
 * para permitir CSP sem unsafe-inline em futuras migrações.
 * ========================================== */

/* Overlay que cobre o side-panel quando uma região bloqueada é clicada */
#demo-gate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .3s ease;
}

/* On mobile the side-panel is a bottom-sheet (55vh) — content may be taller
   than the panel, so use flex-start with padding to keep it scrollable. */
@media (max-width: 768px) {
    #demo-gate-overlay {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0 0 12px;
        border-radius: 16px 16px 0 0;
    }

    /* Drag handle pill — same visual as the side-panel handle */
    #demo-gate-overlay::before {
        content: '';
        display: block;
        width: 40px;
        height: 5px;
        background: #d1bdb1;
        border-radius: 3px;
        margin: 10px auto 4px;
        flex-shrink: 0;
        cursor: grab;
    }

    /* Inner content div takes full width */
    #demo-gate-overlay > div {
        width: 100%;
    }
}

/* Overlay premium fullscreen (heatmap, features bloqueadas) */
#demo-premium-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    animation: fadeIn .3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}