/* Custom SweetAlert2 Styling for Webority Theme */

/* Override ALL SweetAlert popup styling */
.swal2-popup {
    font-family: var(--page-font-body, 'Poppins', 'Helvetica Neue', Arial, sans-serif) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(23, 26, 33, 0.3) !important;
    border: 1px solid rgba(98, 0, 238, 0.1) !important;
}

/* Custom popup styling when using custom class */
.swal-custom-popup {
    font-family: var(--page-font-body, 'Poppins', 'Helvetica Neue', Arial, sans-serif) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(23, 26, 33, 0.3) !important;
    border: 1px solid rgba(98, 0, 238, 0.1) !important;
}

/* Override ALL title styling */
.swal2-title {
    font-family: var(--page-font-heading, 'Poppins', 'Helvetica Neue', Arial, sans-serif) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #171A21 !important;
    margin-bottom: 16px !important;
}

/* Custom title styling */
.swal-custom-title {
    font-family: var(--page-font-heading, 'Poppins', 'Helvetica Neue', Arial, sans-serif) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #171A21 !important;
    margin-bottom: 16px !important;
}

/* Icon styling */
.swal2-icon {
    border-width: 3px !important;
    margin: 1.5em auto 1em !important;
}

.swal2-icon.swal2-success {
    border-color: #17C653 !important;
    color: #17C653 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(23, 198, 83, 0.3) !important;
}

.swal2-icon.swal2-error {
    border-color: #EB2646 !important;
    color: #EB2646 !important;
}

.swal2-icon.swal2-warning {
    border-color: #FEB100 !important;
    color: #FEB100 !important;
}

.swal2-icon.swal2-info {
    border-color: #1B84FF !important;
    color: #1B84FF !important;
}

/* HTML content styling */
.swal2-html-container {
    font-family: var(--page-font-body, 'Poppins', 'Helvetica Neue', Arial, sans-serif) !important;
    color: #3F4254 !important;
    line-height: 1.6 !important;
    font-size: 16px !important;
}

/*
    Buttons are NOT styled here. The popup's Continue button carries the portal's shared
    .btn.btn-primary.btn-lg (components/buttons.css), the same classes the login submit and the
    OTP Continue button use, and Swal.fire is called with buttonsStyling: false so SweetAlert
    adds none of its own. A rule for the confirm button or the actions row added back here would
    outrank buttons.css (this sheet loads after it) and silently break that match.
*/

/* Timer progress bar */
.swal2-timer-progress-bar {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-30) 100%) !important;
}

/* Close button */
.swal2-close {
    color: #8A8C8F !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    transition: color 0.3s ease !important;
}

.swal2-close:hover {
    color: var(--primary) !important;
}

/* Backdrop styling */
.swal2-backdrop-show {
    background: rgba(23, 26, 33, 0.85) !important;
}

/* Animation classes */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
}

.animate__animated {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

.animate__fadeInDown {
    animation-name: fadeInDown;
}

.animate__fadeOutUp {
    animation-name: fadeOutUp;
}

/* Redundant with .swal2-popup above, which already cascades the family. Kept as a guard:
   .swal2-content is the pre-v11 name for .swal2-html-container, so this also covers an
   older SweetAlert build. Safe to drop once the vendor version is pinned. */
div.swal2-content,
div.swal2-html-container p {
    font-family: var(--page-font-body, 'Poppins', 'Helvetica Neue', Arial, sans-serif) !important;
}