/**
 * SweetAlert2 - Global Custom Theme
 *
 * Bản sao của public/assets/css/sweetalert2-custom.css bên app Octon
 * (it-support-ai), để modal thông báo trên LP trông giống hệt trong app.
 * Khác duy nhất: font-family dùng `inherit` thay cho "Poppins", "Noto Sans JP"
 * — LP không nạp hai font đó, và `inherit` sẽ lấy đúng font của body
 * (LINE Seed JP khi xem tiếng Nhật, Be Vietnam Pro khi xem tiếng Việt).
 * Cập nhật theme bên app thì copy lại file này rồi đổi lại font-family.
 *
 * Áp dụng theme Figma cho toàn bộ hệ thống
 *
 * Bảng màu:
 *   Primary:    #1A92F7
 *   Brand:      #003E72
 *   Text:       #2E3A3C
 *   Success:    #21C763
 *   Error:      #DD514C
 *   Warning:    #F59E0B (amber)
 *   Info:       #1A92F7
 *   Background: #FFFFFF
 *   Cancel btn: #ECEFF1
 */

/* ============================================
   POPUP CONTAINER
   ============================================ */
.swal2-popup {
    font-family: inherit !important;
    border-radius: 12px !important;
    padding: 2rem 1.5rem 1.5rem !important;
    color: #2E3A3C !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                0 4px 16px rgba(0, 0, 0, 0.08) !important;
    max-width: 480px !important;
}

/* ============================================
   BACKDROP / OVERLAY
   ============================================ */
.swal2-container {
    backdrop-filter: blur(2px) !important;
    z-index: 100010 !important;
}

div:where(.swal2-container) {
    background: rgba(45, 58, 60, 0.5) !important;
    z-index: 100010 !important;
}

/* Toasts must NOT dim/blur the page — keep the container transparent.
   Match by backdrop-hide class AND by any container holding a toast popup
   (covers all SweetAlert2 versions regardless of internal class names). */
.swal2-container.swal2-backdrop-hide,
div:where(.swal2-container).swal2-backdrop-hide,
.swal2-container:has(.swal2-toast),
div:where(.swal2-container):has(.swal2-toast) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

/* But the toast popup itself stays clickable (e.g. to dismiss). */
.swal2-container:has(.swal2-toast) .swal2-toast {
    pointer-events: auto !important;
}

/* ============================================
   TITLE
   ============================================ */
.swal2-title {
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #2E3A3C !important;
    padding: 0 !important;
    margin-bottom: 0.25rem !important;
}

/* ============================================
   CONTENT / HTML TEXT
   ============================================ */
.swal2-html-container {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #2E3A3C !important;
    line-height: 1.6 !important;
    margin: 0.5rem 1rem 0 !important;
}

/* ============================================
   ICON CUSTOMIZATION
   ============================================ */

/* Success icon */
.swal2-icon.swal2-success {
    border-color: #21C763 !important;
    color: #21C763 !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #21C763 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(33, 199, 99, 0.3) !important;
}

/* Error icon */
.swal2-icon.swal2-error {
    border-color: #DD514C !important;
    color: #DD514C !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #DD514C !important;
}

/* Warning icon */
.swal2-icon.swal2-warning {
    border-color: #F59E0B !important;
    color: #F59E0B !important;
}

/* Info icon */
.swal2-icon.swal2-info {
    border-color: #1A92F7 !important;
    color: #1A92F7 !important;
}

/* Question icon */
.swal2-icon.swal2-question {
    border-color: #1A92F7 !important;
    color: #1A92F7 !important;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
.swal2-actions {
    margin-top: 1.5rem !important;
    gap: 12px !important;
}

.swal2-actions button {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 24px !important;
    min-width: 120px !important;
    height: 44px !important;
    padding: 0 24px !important;
    transition: all 200ms ease !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================
   CONFIRM BUTTON
   ============================================ */
.swal2-confirm {
    background-color: #1A92F7 !important;
    color: #ffffff !important;
    border: none !important;
}

.swal2-confirm:hover {
    background-color: #1580DE !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(26, 146, 247, 0.35) !important;
}

.swal2-confirm:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(26, 146, 247, 0.25) !important;
}

/* ============================================
   CANCEL BUTTON
   ============================================ */
.swal2-cancel {
    background-color: #ECEFF1 !important;
    color: #2E3A3C !important;
    border: none !important;
}

.swal2-cancel:hover {
    background-color: #E0E3E5 !important;
    transform: translateY(-1px) !important;
}

.swal2-cancel:active {
    transform: translateY(0) !important;
}

.swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(46, 58, 60, 0.15) !important;
}

/* ============================================
   DENY BUTTON
   ============================================ */
.swal2-deny {
    background-color: #DD514C !important;
    color: #ffffff !important;
    border: none !important;
}

.swal2-deny:hover {
    background-color: #C93932 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(221, 81, 76, 0.35) !important;
}

.swal2-deny:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.swal2-deny:focus {
    box-shadow: 0 0 0 3px rgba(221, 81, 76, 0.25) !important;
}

/* ============================================
   DELETE CONFIRM - Biến thể cho popup xóa
   Sử dụng: customClass: { confirmButton: 'swal2-confirm-danger' }
   ============================================ */
.swal2-confirm-danger {
    background-color: #DD514C !important;
    color: #ffffff !important;
}

.swal2-confirm-danger:hover {
    background-color: #C93932 !important;
    box-shadow: 0 4px 12px rgba(221, 81, 76, 0.35) !important;
}

.swal2-confirm-danger:focus {
    box-shadow: 0 0 0 3px rgba(221, 81, 76, 0.25) !important;
}

/* ============================================
   SUCCESS CONFIRM - Biến thể cho popup thành công
   Sử dụng: customClass: { confirmButton: 'swal2-confirm-success' }
   ============================================ */
.swal2-confirm-success {
    background-color: #21C763 !important;
    color: #ffffff !important;
}

.swal2-confirm-success:hover {
    background-color: #1BAF56 !important;
    box-shadow: 0 4px 12px rgba(33, 199, 99, 0.35) !important;
}

.swal2-confirm-success:focus {
    box-shadow: 0 0 0 3px rgba(33, 199, 99, 0.25) !important;
}

/* ============================================
   INPUT FIELDS (cho Swal.fire với input)
   ============================================ */
.swal2-input,
.swal2-textarea,
.swal2-select {
    font-family: inherit !important;
    font-size: 14px !important;
    color: #2E3A3C !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    height: 44px !important;
    padding: 0 12px !important;
    transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

.swal2-textarea {
    height: auto !important;
    padding: 8px 12px !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #1A92F7 !important;
    box-shadow: 0 0 0 3px rgba(26, 146, 247, 0.15) !important;
    outline: none !important;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: #9CA3AF !important;
    opacity: 0.7 !important;
}

/* ============================================
   VALIDATION MESSAGE
   ============================================ */
.swal2-validation-message {
    font-family: inherit !important;
    font-size: 13px !important;
    color: #DD514C !important;
    background-color: #FEF2F2 !important;
    border-color: #FECACA !important;
    border-radius: 8px !important;
}

/* ============================================
   TIMER PROGRESS BAR
   ============================================ */
.swal2-timer-progress-bar {
    background: #1A92F7 !important;
    height: 4px !important;
}

/* ============================================
   TOAST MODE
   ============================================ */
.swal2-popup.swal2-toast {
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.06) !important;
    font-size: 14px !important;
}

.swal2-popup.swal2-toast .swal2-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* ============================================
   ANIMATION - Xuất hiện mượt mà
   ============================================ */
.swal2-show {
    animation: swalFadeInUp 250ms ease-out !important;
}

.swal2-hide {
    animation: swalFadeOutDown 200ms ease-in !important;
}

@keyframes swalFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes swalFadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}

/* ============================================
   FOOTER
   ============================================ */
.swal2-footer {
    font-family: inherit !important;
    font-size: 13px !important;
    color: #6D7475 !important;
    border-top: 1px solid #E5E7EB !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
}

.swal2-footer a {
    color: #1A92F7 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.swal2-footer a:hover {
    text-decoration: underline !important;
}

/* ============================================
   LOADING / SPINNER
   ============================================ */
.swal2-loading .swal2-confirm {
    background-color: #1A92F7 !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .swal2-popup {
        max-width: calc(100vw - 2rem) !important;
        padding: 1.5rem 1rem 1rem !important;
        border-radius: 12px !important;
    }

    .swal2-title {
        font-size: 20px !important;
    }

    .swal2-actions button {
        min-width: 100px !important;
        height: 40px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .swal2-show {
        animation: none !important;
    }

    .swal2-hide {
        animation: none !important;
    }

    .swal2-actions button {
        transition: none !important;
    }
}