
.swal-popup-custom {
    background: var(--hp-modal-surface, #0e1a2b) !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    border: 1px solid var(--hp-accent, #1565c0) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55) !important;
    animation-duration: 0.2s !important;
}

/* En-tête / titre / icône / zone de saisie / actions */
.swal-title-custom,
.swal-popup-custom .swal2-title {
    color: var(--hp-modal-text, #eaf1fb) !important;
    font-weight: 600 !important;
}
.swal-popup-custom .swal2-html-container,
.swal-popup-custom #swal2-html-container {
    color: rgba(234, 241, 251, 0.82) !important;
}
.swal-header-custom {
    padding-bottom: 0.25rem !important;
}
.swal-close-custom,
.swal-popup-custom .swal2-close {
    color: rgba(234, 241, 251, 0.65) !important;
    box-shadow: none !important;
}
.swal-close-custom:hover,
.swal-popup-custom .swal2-close:hover {
    color: var(--hp-modal-text, #eaf1fb) !important;
}
.swal-icon-custom.swal2-icon {
    border-color: var(--hp-accent, #1565c0) !important;
    color: var(--hp-accent, #1565c0) !important;
}
.swal-input-custom.swal2-input,
.swal-popup-custom .swal2-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 2px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0.375rem !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.swal-input-custom.swal2-input::placeholder,
.swal-popup-custom .swal2-input::placeholder {
    color: rgba(234, 241, 251, 0.5) !important;
}
.swal-input-custom.swal2-input:focus,
.swal-popup-custom .swal2-input:focus {
    border-color: var(--hp-accent, #1565c0) !important;
    box-shadow: 0 0 0 3px var(--hp-accent-tint, rgba(21, 101, 192, 0.14)) !important;
}
.swal-actions-custom {
    gap: 0.5rem !important;
}

/* Backdrop : voile profond, avec un halo teinté de l'accent au centre haut
   (prime sur la valeur inline non-!important posée par les *_sweetalert.js). */
.swal-container-custom.swal2-container {
    background:
        radial-gradient(circle at 50% 35%, var(--hp-accent-tint, rgba(21, 101, 192, 0.14)), transparent 60%),
        rgba(3, 7, 14, 0.66) !important;
    transition: background-color 0.2s ease !important;
}

/* Bouton Confirmer : aplat d'accent */
.swal-popup-custom .swal-confirm-custom,
.swal-popup-custom .swal-confirm-custom.btn-primary,
.swal-popup-custom .swal-confirm-custom.btn-secondary {
    background: var(--hp-accent, #1565c0) !important;
    border: 2px solid var(--hp-accent, #1565c0) !important;
    border-radius: 0.375rem !important;
    color: var(--hp-on-accent, #ffffff) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease !important;
}
.swal-popup-custom .swal-confirm-custom:hover,
.swal-popup-custom .swal-confirm-custom.btn-primary:hover,
.swal-popup-custom .swal-confirm-custom.btn-secondary:hover {
    background: var(--hp-accent-strong, #0d47a1) !important;
    border-color: var(--hp-accent-strong, #0d47a1) !important;
    color: var(--hp-on-accent, #ffffff) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}
.swal-popup-custom .swal-confirm-custom:focus,
.swal-popup-custom .swal-confirm-custom.btn-primary:focus,
.swal-popup-custom .swal-confirm-custom.btn-secondary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--hp-accent-tint, rgba(21, 101, 192, 0.14)) !important;
}

/* Bouton Annuler : discret, sur la surface sombre */
.swal-popup-custom .swal-cancel-custom,
.swal-popup-custom .swal-cancel-custom.btn-outline-light,
.swal-popup-custom .swal-cancel-custom.btn-outline-secondary {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 0.375rem !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease !important;
}
.swal-popup-custom .swal-cancel-custom:hover,
.swal-popup-custom .swal-cancel-custom.btn-outline-light:hover,
.swal-popup-custom .swal-cancel-custom.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    transform: translateY(-1px) !important;
}
.swal-popup-custom .swal-cancel-custom:focus,
.swal-popup-custom .swal-cancel-custom.btn-outline-light:focus,
.swal-popup-custom .swal-cancel-custom.btn-outline-secondary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}

/* Bouton Deny (2e action alternative, ex. "Ajouter un dislike") : contour d'accent,
   visuellement entre le Confirmer (aplat) et l'Annuler (neutre) */
.swal-popup-custom .swal-deny-custom,
.swal-popup-custom .swal-deny-custom.btn-outline-light,
.swal-popup-custom .swal-deny-custom.btn-outline-secondary {
    background: var(--hp-accent-tint, rgba(21, 101, 192, 0.14)) !important;
    border: 2px solid var(--hp-accent-strong, #0d47a1) !important;
    border-radius: 0.375rem !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease !important;
}
.swal-popup-custom .swal-deny-custom:hover,
.swal-popup-custom .swal-deny-custom.btn-outline-light:hover,
.swal-popup-custom .swal-deny-custom.btn-outline-secondary:hover {
    background: var(--hp-accent-strong, #0d47a1) !important;
    border-color: var(--hp-accent-strong, #0d47a1) !important;
    color: var(--hp-on-accent, #ffffff) !important;
    transform: translateY(-1px) !important;
}
.swal-popup-custom .swal-deny-custom:focus,
.swal-popup-custom .swal-deny-custom.btn-outline-light:focus,
.swal-popup-custom .swal-deny-custom.btn-outline-secondary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--hp-accent-tint, rgba(21, 101, 192, 0.14)) !important;
}

/* Popup d'erreur PIN : même surface teintée, icône rouge standard conservée */
.swal-error-custom {
    background: var(--hp-modal-surface, #0e1a2b) !important;
    color: var(--hp-modal-text, #eaf1fb) !important;
    border: 1px solid rgba(220, 53, 69, 0.6) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55) !important;
    animation-duration: 0.3s !important;
}
.swal-error-custom .swal2-title,
.swal-error-custom .swal2-html-container {
    color: var(--hp-modal-text, #eaf1fb) !important;
}
.swal-error-custom .swal2-confirm {
    background: var(--hp-accent, #1565c0) !important;
    border: 2px solid var(--hp-accent, #1565c0) !important;
    color: var(--hp-on-accent, #ffffff) !important;
    border-radius: 0.375rem !important;
}
