/* ✅ CORRECCIÓN COMPLETA DEL MODAL DE COOKIES */
.cookie-consent-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;  /* ✅ FORÇAR viewport width */
    height: 100vh !important; /* ✅ FORÇAR viewport height */
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 999999 !important; /* ✅ Z-INDEX MOLT ALT */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    pointer-events: none !important;
    
    /* ✅ ESCAPAR DE QUALSEVOL CONTENIDOR */
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    
    /* ✅ ASSEGURAR QUE OCUPI TOTA LA PANTALLA */
    inset: 0 !important; /* Equivalent a top:0, right:0, bottom:0, left:0 */
}

.cookie-consent-modal.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 999999 !important; /* ✅ MATEIX Z-INDEX ALT */
    
    /* ✅ TEMPORAL: Fons vermell per debug - TREURE DESPRÉS */
    background: rgba(255, 0, 0, 0.2) !important;
}

/* ✅ CORRECCIÓN: Asegurar que el contenido sea visible */
.cookie-consent-content {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    max-width: 600px !important;
    width: 90vw !important; /* ✅ Viewport width */
    max-height: 90vh !important; /* ✅ Viewport height */
    overflow-y: auto !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 106, 0, 0.1) !important;
    transform: translateY(20px) scale(0.95) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1000000 !important; /* ✅ ENCARA MÉS ALT */
    
    /* ✅ ASSEGURAR QUE NO HERETA ESTILS DEL CONTENIDOR */
    margin: 0 auto !important;
    
    /* ✅ TEMPORAL: Border vermell per debug - TREURE DESPRÉS */
    border: 3px solid red !important;
    
    /* Scrollbar personalitzada */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 106, 0, 0.5) transparent !important;
}

.cookie-consent-modal.show .cookie-consent-content {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* ✅ AÑADIR: Asegurar que el header sea visible */
.cookie-consent-header {
    background: linear-gradient(135deg, rgba(255, 106, 0, 0.2), rgba(255, 149, 64, 0.1));
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 1;
}

    .cookie-consent-header h2 {
        margin: 0 0 8px 0;
        color: #ffffff !important;
        font-size: 24px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .cookie-consent-header p {
        margin: 0;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 14px;
        line-height: 1.5;
    }

/* ✅ AÑADIR: Asegurar que el body sea visible */
.cookie-consent-body {
    padding: 32px;
    position: relative;
    z-index: 1;
    background: transparent;
}

/* ✅ AÑADIR: Asegurar que las acciones sean visibles */
.cookie-consent-actions {
    padding: 24px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 16px 16px;
    position: relative;
    z-index: 1;
}

/* ✅ ASEGURAR que los botones sean visibles y clickeables */
.cookie-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
    position: relative;
    z-index: 2;
    /* ✅ FORZAR interactividad */
    pointer-events: auto;
}

.cookie-btn-accept {
    background: linear-gradient(135deg, #FF6A00, #ff9540) !important;
    color: white !important;
    border: 1px solid #FF6A00 !important;
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.3);
}

    .cookie-btn-accept:hover {
        background: linear-gradient(135deg, #e55a00, #ff8533) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 106, 0, 0.4);
    }

.cookie-btn-decline {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

    .cookie-btn-decline:hover {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #ef4444 !important;
        border-color: rgba(239, 68, 68, 0.4) !important;
        transform: translateY(-1px);
    }

.cookie-btn-customize {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

    .cookie-btn-customize:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 106, 0, 0.5) !important;
        color: #FF6A00 !important;
    }

/* ✅ CORRECCIÓN: Clase helper para bloquear scroll */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* ✅ AÑADIR: Debug temporal para ver si el modal está ahí */
.cookie-consent-modal.show {
    /* ✅ TEMPORAL: Fondo rojo semitransparente para debug */
    background: rgba(255, 0, 0, 0.1) !important;
}

    /* ✅ TEMPORAL: Estilo debug para el contenido */
    .cookie-consent-modal.show .cookie-consent-content {
        /* ✅ TEMPORAL: Borde rojo para debug */
        border: 3px solid red !important;
        background: rgba(30, 41, 59, 1) !important;
    }

/* ✅ ASSEGURAR QUE EL MODAL ESTIGUI FORA DE TOTS ELS CONTENIDORS */
.cookie-consent-modal {
    /* ✅ FORÇAR POSICIÓ ABSOLUTA RESPECTE AL VIEWPORT */
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100vw !important;
    height: 100vh !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.cookie-consent-modal.show {
    transform: translate(-50%, -50%) !important; /* ✅ MANTENIR CENTRAT */
}

/* ✅ ASSEGURAR QUE EL CONTINGUT ESTIGUI CENTRAT DINS EL MODAL */
.cookie-consent-modal.show .cookie-consent-content {
    /* Restablir el transform del contingut ja que el modal ja està centrat */
    transform: translateY(0) scale(1) !important;
    position: relative !important;
    margin: 0 auto !important;
}


/* ===============================================
   🎯 BOOTBOX MODAL STYLING - TEMA BLAU CINEFORJA
   =============================================== */

/* ✅ MODAL BASE */
.bootbox.modal {
    z-index: 10500 !important;
}

.bootbox .modal-dialog {
    margin: 50px auto !important;
    max-width: 480px !important;
    width: 90% !important;
}

.bootbox .modal-content {
    /* ✅ FONS BLAU DEGRADAT com el body de CineForja */
    background: linear-gradient(145deg, var(--bg-ant), var(--bg-2-ant)) !important;
    border: 2px solid rgba(255, 106, 0, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 106, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    overflow: hidden;
}

/* ✅ HEADER amb gradient BLAU com la barra de menú */
.bootbox .modal-header {
    /* ✅ GRADIENT BLAU com header.nav */
    background: linear-gradient(180deg, #283253, #676da2) !important;
    color: var(--txtVar) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 20px 24px 16px !important;
    position: relative;
    overflow: hidden;
}

    .bootbox .modal-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
        pointer-events: none;
    }

    .bootbox .modal-header .modal-title {
        color: var(--txtVar) !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 1;
    }

    .bootbox .modal-header .close,
    .bootbox .modal-header .bootbox-close-button {
        color: var(--mutedVar) !important;
        opacity: 0.8 !important;
        font-size: 24px !important;
        font-weight: 300 !important;
        text-shadow: none !important;
        position: relative;
        z-index: 1;
    }

        .bootbox .modal-header .close:hover,
        .bootbox .modal-header .bootbox-close-button:hover {
            color: var(--txtVar) !important;
            opacity: 1 !important;
            transform: scale(1.1);
        }

/* ✅ BODY amb fons blau degradat com el body general */
.bootbox .modal-body {
    /* ✅ MATEIX GRADIENT que el body principal */
    background: linear-gradient(to bottom, var(--bg-ant) 0%, /* #0b1020 */
    var(--bg-2-ant) 40%, /* #0f172a */
    var(--bg-2) 100% /* #323e96 */
    ) !important;
    color: var(--txt) !important;
    padding: 24px !important;
    font-size: 16px !important;
    line-height: 1.5;
    border: none !important;
    position: relative;
}

/* ✅ FOOTER amb gradient blau fosc */
.bootbox .modal-footer {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-ant)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 20px 24px !important;
    text-align: center !important;
}

    /* ✅ BOTONS - MANTENIR TARONJA CineForja */
    .bootbox .modal-footer .btn {
        margin: 0 4px !important;
        padding: 10px 20px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        transition: all 0.3s ease !important;
        border: none !important;
        cursor: pointer;
        text-transform: none !important;
    }

/* ✅ Botó primari - TARONJA CineForja */
.bootbox .btn-primary,
.bootbox .btn-success {
    background: linear-gradient(135deg, var(--brand), #ff9540) !important;
    color: #111 !important;
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.3) !important;
}

    .bootbox .btn-primary:hover,
    .bootbox .btn-success:hover,
    .bootbox .btn-primary:focus,
    .bootbox .btn-success:focus {
        background: linear-gradient(135deg, #ff7a1a, #ffaa60) !important;
        color: #000 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(255, 106, 0, 0.4) !important;
    }

/* ✅ Botó secundari - Blau transparent */
.bootbox .btn-default,
.bootbox .btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--txt) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

    .bootbox .btn-default:hover,
    .bootbox .btn-secondary:hover,
    .bootbox .btn-default:focus,
    .bootbox .btn-secondary:focus {
        background: rgba(255, 255, 255, 0.15) !important;
        color: var(--txtVar) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        transform: translateY(-1px) !important;
    }

/* ✅ BACKDROP fosc blau */
.bootbox.modal + .modal-backdrop,
.modal-backdrop.bootbox-backdrop {
    background-color: rgba(11, 16, 32, 0.8) !important;
    z-index: 10400 !important;
}

/* ✅ ANIMACIONS PERSONALITZADES */
.bootbox.modal.fade .modal-dialog {
    transition: transform 0.4s ease, opacity 0.4s ease !important;
}

.bootbox.modal.fade:not(.show) .modal-dialog {
    transform: scale(0.9) translateY(-20px) !important;
    opacity: 0 !important;
}

.bootbox.modal.show .modal-dialog {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}

/* ✅ RESPONSIVE */
@media (max-width: 576px) {
    .bootbox .modal-dialog {
        margin: 20px auto !important;
        max-width: 95% !important;
    }

    .bootbox .modal-header,
    .bootbox .modal-body,
    .bootbox .modal-footer {
        padding: 16px !important;
    }

        .bootbox .modal-footer .btn {
            display: block !important;
            width: 100% !important;
            margin: 4px 0 !important;
        }
}

/* ✅ TIPUS ESPECÍFICS DE MODAL */
.bootbox-confirm .modal-body {
    text-align: center;
    padding: 30px 24px !important;
}

.bootbox-alert .modal-body {
    text-align: center;
    padding: 30px 24px !important;
}

/* ✅ CLASSES PERSONALITZADES */
.bootbox-cineforja .modal-content {
    border-color: rgba(255, 106, 0, 0.4) !important;
    box-shadow: 0 25px 50px rgba(11, 16, 32, 0.6), 0 0 0 1px rgba(255, 106, 0, 0.3) !important;
}

.bootbox-warning .modal-header {
    background: linear-gradient(135deg, #283253, #f59e0b) !important;
}

.bootbox-error .modal-header {
    background: linear-gradient(135deg, #283253, #ef4444) !important;
}

.bootbox-success .modal-header {
    background: linear-gradient(135deg, #283253, #10b981) !important;
}