/**
 * Système de Z-Index Centralisé - Mukbang
 *
 * Utilisation:
 *   z-index: var(--z-modal);
 *
 * Hiérarchie (du plus bas au plus haut):
 *   base < dropdown < sticky < fixed < modal-backdrop < modal < toast < loader < critical
 */

:root {
    /* Base layers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;

    /* Header & Navigation */
    --z-header: 1000;
    --z-mobile-menu: 999;

    /* Pages/Sections (login, paywall) */
    --z-page: 8000;

    /* Modals */
    --z-modal-backdrop: 9000;
    --z-modal: 9100;
    --z-modal-nested: 9200;

    /* Overlays & Notifications */
    --z-toast: 9500;
    --z-tooltip: 9600;

    /* Critical (loader, erreurs) */
    --z-loader: 9900;
    --z-critical: 9999;
}

/* Classes utilitaires */
.z-base { z-index: var(--z-base); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-header { z-index: var(--z-header); }
.z-page { z-index: var(--z-page); }
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal { z-index: var(--z-modal); }
.z-modal-nested { z-index: var(--z-modal-nested); }
.z-toast { z-index: var(--z-toast); }
.z-loader { z-index: var(--z-loader); }
.z-critical { z-index: var(--z-critical); }

/* Style de base pour les modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1rem;
}

.modal-overlay.hidden {
    display: none;
}

.modal-content {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal avec fond plus foncé (reminder, recovery) */
.modal-overlay-dark {
    background: rgba(0, 0, 0, 0.6);
}