/* ===========================================================
   Klaro CMP — overrides estéticos para Passy Français
   Banner posicionado bottom-left, mismo offset que el
   floating CTA de WhatsApp (bottom: 30px) para que queden
   alineados visualmente.
   =========================================================== */

/* --- BANNER (cookie notice) — minimal, translúcido, menos invasivo --- */
.klaro .cookie-notice {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    top: auto !important;
    max-width: 290px !important;
    width: calc(100vw - 48px) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(13, 27, 42, 0.14) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    color: #0D1B2A !important;
    border: 1px solid rgba(13, 27, 42, 0.06) !important;
    padding: 14px 16px 8px !important;
    font-family: 'Inter', sans-serif !important;
    z-index: 999 !important;
    text-align: center !important;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity, transform;
}

/* Estado de salida (al auto-accept o al confirmar): fade + leve descenso */
.klaro .cookie-notice.cn-fading-out {
    opacity: 0 !important;
    transform: translateY(16px) scale(0.97) !important;
    pointer-events: none !important;
}

.klaro .cookie-notice .cn-body {
    text-align: center !important;
}

@media (max-width: 600px) {
    .klaro .cookie-notice {
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        width: auto !important;
        padding: 12px 14px 8px !important;
    }
}

.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body {
    color: #4a5568 !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
}

.klaro .cookie-notice .cn-body strong {
    color: #0D1B2A !important;
}

/* CSS Grid: Rechazar | Aceptar (fila 1, centrados), Personalizar (fila 2) */
.klaro .cookie-notice .cn-ok,
.klaro .cookie-notice .cn-buttons {
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto auto !important;
    gap: 4px 6px !important;
    margin-top: 4px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* --- BOTONES (banner + modal compartido) --- */
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn,
.klaro button.cm-btn {
    border-radius: 7px !important;
    padding: 7px 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.76rem !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* Aceptar todas — PRIMARIO (gold, prominente, columna derecha) */
.klaro .cookie-notice .cm-btn-success,
.klaro .cookie-notice .cm-btn-accept-all,
.klaro .cookie-notice .cm-btn-accept {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    padding: 7px 14px !important;
    background: #CFA15A !important;
    color: #FFFFFF !important;
    border-color: #CFA15A !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(207, 161, 90, 0.28) !important;
}

/* Estilo gold también en modal (sin grid placement) */
.klaro .cm-btn-success,
.klaro .cm-btn-accept-all,
.klaro .cm-btn-accept {
    background: #CFA15A !important;
    color: #FFFFFF !important;
    border-color: #CFA15A !important;
    font-weight: 700 !important;
}

.klaro .cm-btn-success:hover,
.klaro .cm-btn-accept-all:hover,
.klaro .cm-btn-accept:hover {
    background: #b88d4a !important;
    border-color: #b88d4a !important;
    box-shadow: 0 8px 22px rgba(207, 161, 90, 0.42) !important;
    transform: translateY(-1px) !important;
}

/* Rechazar todas — secundario sobrio (outline, columna izquierda) */
.klaro .cookie-notice .cm-btn-danger,
.klaro .cookie-notice .cm-btn-decline {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    background: transparent !important;
    color: #6b7280 !important;
    border-color: rgba(13, 27, 42, 0.18) !important;
    font-weight: 500 !important;
}

.klaro .cm-btn-danger,
.klaro .cm-btn-decline {
    background: transparent !important;
    color: #6b7280 !important;
    border-color: rgba(13, 27, 42, 0.18) !important;
    font-weight: 500 !important;
}

.klaro .cm-btn-danger:hover,
.klaro .cm-btn-decline:hover {
    color: #0D1B2A !important;
    border-color: rgba(13, 27, 42, 0.35) !important;
    background: rgba(13, 27, 42, 0.03) !important;
}

/* Personalizar — fila 2, ocupa ambas columnas, sutil */
.klaro .cookie-notice .cn-learn-more,
.klaro .cn-learn-more {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 3px 0 0 !important;
    padding: 5px 0 0 !important;
    border-top: 1px solid rgba(13, 27, 42, 0.06) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    text-align: center !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.klaro .cn-learn-more:hover {
    color: #0D1B2A !important;
    background: transparent !important;
    transform: none !important;
}

/* Mobile (< 380px): si en pantalla muy estrecha los botones no entran
   lado a lado, stackear (Aceptar arriba) */
@media (max-width: 380px) {
    .klaro .cookie-notice .cn-ok,
    .klaro .cookie-notice .cn-buttons {
        grid-template-columns: 1fr !important;
    }
    .klaro .cookie-notice .cm-btn-success,
    .klaro .cookie-notice .cm-btn-accept-all,
    .klaro .cookie-notice .cm-btn-accept {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
    }
    .klaro .cookie-notice .cm-btn-danger,
    .klaro .cookie-notice .cm-btn-decline {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }
    .klaro .cookie-notice .cn-learn-more {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

/* --- MODAL (Personalizar) --- */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-bg .cm-modal {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    font-family: 'Inter', sans-serif !important;
    color: #0D1B2A !important;
    border: 1px solid rgba(13, 27, 42, 0.06) !important;
    overflow: hidden !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2 {
    font-family: 'Montserrat', sans-serif !important;
    color: #0D1B2A !important;
}

.klaro .cookie-modal .cm-purposes .cm-purpose,
.klaro .cookie-modal .cm-services .cm-service {
    border-bottom: 1px solid rgba(13, 27, 42, 0.06) !important;
}

.klaro .cookie-modal .cm-purpose-title,
.klaro .cookie-modal h2 {
    font-family: 'Montserrat', sans-serif !important;
    color: #0D1B2A !important;
    font-weight: 600 !important;
}

.klaro .cookie-modal p,
.klaro .cookie-modal .cm-purpose-description,
.klaro .cookie-modal .cm-service-description {
    color: #4a5568 !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
}

.klaro .cookie-modal a {
    color: #CFA15A !important;
}

.klaro .cookie-modal a:hover {
    color: #b88d4a !important;
}

.klaro .cookie-modal .cm-footer {
    background: #F7F7F7 !important;
    border-top: 1px solid rgba(13, 27, 42, 0.06) !important;
}

.klaro .cookie-modal .cm-powered-by,
.klaro .cm-powered-by {
    display: none !important;
}

/* Toggles del modal */
.klaro .slider {
    background: #cccccc !important;
}

.klaro input:checked + .slider,
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-toggle-all input:checked + .slider {
    background: #CFA15A !important;
}

/* Backdrop del modal — oscurece pero deja respirar */
.klaro .cookie-modal .cm-bg {
    background: rgba(13, 27, 42, 0.4) !important;
}