/* ==========================================================================
       MODERN SWEETALERT2 STYLING - COHESIVE WITH FRONTEND DESIGN SYSTEM
       ========================================================================== */

    /* 1. Backdrop / Container Overlay */
    .swal2-container {
        z-index: 999999 !important;
        background-color: rgba(15, 23, 42, 0.45) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        transition: background-color 0.2s ease-in-out !important;
    }

    /* 2. Main Modal Box (Popup) */
    .swal2-popup {
        font-family: var(--main-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        border-radius: 1.25rem !important; /* rounded-2xl (20px) */
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        background: #ffffff !important;
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
        padding: 1.85rem 1.65rem 1.65rem !important;
        max-width: 440px !important;
        width: 92% !important;
        box-sizing: border-box !important;
        letter-spacing: -0.01em !important;
    }

    /* Modern Smooth Entrance / Exit Animations */
    @keyframes swal2-custom-entrance {
        0% {
            opacity: 0;
            transform: scale(0.92) translateY(6px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
    @keyframes swal2-custom-exit {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale(0.94);
        }
    }
    .swal2-show {
        animation: swal2-custom-entrance 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .swal2-hide {
        animation: swal2-custom-exit 0.15s cubic-bezier(0.4, 0, 1, 1) !important;
    }

    /* 3. Popup Title */
    .swal2-title {
        font-family: var(--second-font), var(--main-font), sans-serif !important;
        font-size: 1.25rem !important; /* 20px */
        font-weight: 800 !important;
        color: #0f172a !important; /* Slate-900 */
        margin: 0.75rem 0 0.35rem 0 !important;
        padding: 0 !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    /* 4. Text / Content Body */
    .swal2-html-container {
        font-family: var(--main-font), sans-serif !important;
        font-size: 0.925rem !important;
        color: #475569 !important; /* Slate-600 */
        line-height: 1.625 !important;
        margin: 0.35rem 0 1.25rem 0 !important;
        padding: 0 0.35rem !important;
        text-align: center !important;
        word-break: break-word !important;
    }
    .swal2-html-container p {
        margin: 0.25rem 0 !important;
    }

    /* 5. Refined Contextual Icons */
    .swal2-icon {
        width: 4.25rem !important;
        height: 4.25rem !important;
        margin: 0.25rem auto 0.75rem auto !important;
        border-width: 3px !important;
        border-style: solid !important;
        box-sizing: content-box !important;
    }
    .swal2-icon .swal2-icon-content {
        font-family: var(--main-font), sans-serif !important;
        font-size: 2.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 5.1 Success Icon */
    .swal2-icon.swal2-success {
        border-color: #10b981 !important; /* Emerald-500 */
        color: #10b981 !important;
    }
    .swal2-icon.swal2-success .swal2-success-ring {
        border: 4px solid rgba(16, 185, 129, 0.25) !important;
    }
    .swal2-icon.swal2-success [class^='swal2-success-line'] {
        background-color: #10b981 !important;
        height: 3px !important;
    }
    .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
    .swal2-icon.swal2-success .swal2-success-fix {
        background-color: #ffffff !important;
    }

    /* 5.2 Error Icon */
    .swal2-icon.swal2-error {
        border-color: #f43f5e !important; /* Rose-500 */
        color: #f43f5e !important;
    }
    .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
        background-color: #f43f5e !important;
        height: 3px !important;
    }

    /* 5.3 Warning Icon */
    .swal2-icon.swal2-warning {
        border-color: #f59e0b !important; /* Amber-500 */
        color: #f59e0b !important;
    }

    /* 5.4 Info Icon */
    .swal2-icon.swal2-info {
        border-color: #4285f4 !important; /* Brand Blue Header */
        color: #4285f4 !important;
    }

    /* 5.5 Question Icon */
    .swal2-icon.swal2-question {
        border-color: #6366f1 !important; /* Indigo-500 */
        color: #6366f1 !important;
    }

    /* 6. Buttons / Actions */
    .swal2-actions {
        display: flex;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.625rem !important;
        margin: 1.25rem 0 0 0 !important;
        width: 100% !important;
    }
    .swal2-actions[style*="display: none"] {
        display: none !important;
    }
    .swal2-actions .swal2-styled {
        font-family: var(--main-font), sans-serif !important;
        border-radius: 0.75rem !important; /* rounded-xl */
        font-weight: 700 !important;
        font-size: 0.875rem !important;
        padding: 0.65rem 1.4rem !important;
        min-height: 42px !important;
        margin: 0 !important;
        border: 1px solid transparent !important;
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        outline: none !important;
        display: inline-flex;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }
    /* Strictly respect SweetAlert's hidden state for buttons */
    .swal2-actions .swal2-styled[style*="display: none"],
    .swal2-actions button[style*="display: none"] {
        display: none !important;
    }
    .swal2-actions .swal2-styled:hover {
        transform: translateY(-1px);
    }
    .swal2-actions .swal2-styled:active {
        transform: translateY(0);
    }
    .swal2-actions .swal2-styled:focus {
        box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.25) !important;
    }

    /* 6.1 Confirm Button (Default Brand Blue) */
    .swal2-actions .swal2-styled.swal2-confirm {
        background-color: #4285f4 !important;
        color: #ffffff !important;
        border: 1px solid #2763e9 !important;
        box-shadow: 0 4px 12px rgba(66, 133, 244, 0.28) !important;
        font-weight: 700 !important;
    }
    .swal2-actions .swal2-styled.swal2-confirm:hover {
        background-color: #2763e9 !important;
        box-shadow: 0 6px 16px rgba(66, 133, 244, 0.38) !important;
    }

    /* If alert is error and no custom color given, tint confirm button rose */
    .swal2-popup.swal2-icon-error .swal2-actions .swal2-styled.swal2-confirm:not([style*="background-color: rgb(66, 133, 244)"]) {
        background-color: #f43f5e;
        border-color: rgba(244, 63, 94, 0.3) !important;
        box-shadow: 0 4px 12px rgba(244, 63, 94, 0.28) !important;
    }
    .swal2-popup.swal2-icon-error .swal2-actions .swal2-styled.swal2-confirm:hover {
        filter: brightness(0.92);
        box-shadow: 0 6px 16px rgba(244, 63, 94, 0.38) !important;
    }

    /* 6.2 Cancel Button (Neutral Slate Secondary) */
    .swal2-actions .swal2-styled.swal2-cancel {
        background-color: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }
    .swal2-actions .swal2-styled.swal2-cancel:hover {
        background-color: #e2e8f0 !important;
        color: #0f172a !important;
        border-color: #94a3b8 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    }
    .swal2-actions .swal2-styled.swal2-cancel:focus {
        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.25) !important;
    }

    /* 6.3 Deny Button */
    .swal2-actions .swal2-styled.swal2-deny {
        background-color: #f43f5e !important;
        color: #ffffff !important;
        border-color: #e11d48 !important;
        box-shadow: 0 4px 12px rgba(244, 63, 94, 0.28) !important;
    }
    .swal2-actions .swal2-styled.swal2-deny:hover {
        filter: brightness(0.92);
    }

    /* 7. Close Button ('X') */
    .swal2-close {
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: 2rem !important;
        height: 2rem !important;
        border-radius: 9999px !important;
        font-family: inherit !important;
        font-size: 1.25rem !important;
        color: #94a3b8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.15s ease !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }
    .swal2-close:hover {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
    }

    /* 8. Input Fields inside Swal (Text, Select, Textarea) */
    .swal2-input,
    .swal2-textarea,
    .swal2-select {
        font-family: var(--main-font), sans-serif !important;
        border-radius: 0.75rem !important;
        border: 1.5px solid #cbd5e1 !important;
        background-color: #f8fafc !important;
        color: #0f172a !important;
        font-size: 0.875rem !important;
        padding: 0.65rem 0.875rem !important;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
        transition: all 0.15s ease !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0.75rem 0 !important;
    }
    .swal2-input:focus,
    .swal2-textarea:focus,
    .swal2-select:focus {
        outline: none !important;
        border-color: #4285f4 !important;
        background-color: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2) !important;
    }

    /* 9. Toast Mode */
    .swal2-toast {
        border-radius: 1rem !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
        padding: 0.75rem 1rem !important;
        background: #ffffff !important;
    }
    .swal2-toast .swal2-title {
        font-size: 0.875rem !important;
        margin: 0 !important;
        color: #0f172a !important;
    }
    .swal2-toast .swal2-html-container {
        font-size: 0.8125rem !important;
        margin: 0 !important;
    }
    .swal2-toast .swal2-icon {
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin: 0 0.5rem 0 0 !important;
        border-width: 2px !important;
    }

    /* 10. Timer Progress Bar */
    .swal2-timer-progress-bar {
        background: #4285f4 !important;
        height: 3px !important;
        border-radius: 9999px !important;
    }

    /* 11. Loading Spinner */
    .swal2-loader {
        border-color: #4285f4 transparent #4285f4 transparent !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin: 1rem auto !important;
    }

    /* 12. Validation Error Box */
    .swal2-validation-message {
        background-color: #fff1f2 !important;
        color: #e11d48 !important;
        border: 1px solid #fecdd3 !important;
        border-radius: 0.75rem !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        padding: 0.625rem 0.875rem !important;
        margin-top: 0.75rem !important;
    }
</style>