/* ================================================================
   McqsGhar — Custom Alert & Notification System
   Premium SweetAlert2 Override — Card Modal Style
   ================================================================ */

:root {
    --mg-brand:        #e814ff;
    --mg-brand-dark:   #c000dd;
    --mg-brand-light:  #f5a6ff;
    --mg-brand-glow:   rgba(232, 20, 255, 0.20);

    --mg-success:      #10b981;
    --mg-success-bg:   rgba(16, 185, 129, 0.08);
    --mg-success-ring: rgba(16, 185, 129, 0.20);

    --mg-error:        #ef4444;
    --mg-error-bg:     rgba(239, 68, 68, 0.08);
    --mg-error-ring:   rgba(239, 68, 68, 0.20);

    --mg-warning:      #f59e0b;
    --mg-warning-bg:   rgba(245, 158, 11, 0.08);
    --mg-warning-ring: rgba(245, 158, 11, 0.20);

    --mg-info:         #3b82f6;
    --mg-info-bg:      rgba(59, 130, 246, 0.08);
    --mg-info-ring:    rgba(59, 130, 246, 0.20);

    --mg-delete:       #ef4444;
    --mg-confirm-bg:   #fff1ff;

    --mg-font:         'Outfit', 'Inter', sans-serif;
    --mg-radius:       20px;
    --mg-radius-pill:  999px;
}

/* 1. CONTAINER — Allow proper backdrop for modals but none for toasts */
.swal2-container.swal2-toast-shown,
.swal2-container.swal2-backdrop-hide,
.swal2-container:has(.mg-toast) {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 1000000 !important;
    padding-top: 30px !important; /* Safety gap from top */
    padding-bottom: 30px !important; /* Safety gap from bottom */
}

/* Modal backdrop - only for non-toasts */
.swal2-container:not(.swal2-toast-shown):not(:has(.mg-toast)) {
    background: rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    pointer-events: auto !important;
    z-index: 999999 !important;
}

/* ================================================================
   2. BASE POPUP — Font & Reset
   ================================================================ */
.swal2-popup,
.swal2-popup * {
    font-family: var(--mg-font) !important;
    box-sizing: border-box !important;
}

/* Helper for custom HTML icons to remove default margin */
.mg-modal-content-no-margin {
    margin: 0 !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------------
   SVG PROGRESS RING — Around the icon
   ---------------------------------------------------------------- */
.mg-timer-ring-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mg-timer-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.mg-timer-ring-bg {
    fill: none;
    stroke: #f1f5f9;
    stroke-width: 4;
}

.mg-timer-ring-progress {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.swal2-html-container-cloud {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    margin: 0.5rem 0 1.5rem !important;
    padding: 0 0.5rem !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

/* ================================================================
   3. CARD-STYLE MODALS — Premium White Cards (matching the image)
   ================================================================ */
.mg-modal,
.mg-modal-delete,
.mg-modal-warning {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 2.5rem 2rem 2rem !important;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.12),
        0 4px 20px rgba(0,0,0,0.08) !important;
    border: none !important;
    pointer-events: auto !important;
    max-width: 380px !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
}

/* ================================================================
   4. MODAL ICON — Large circular icon (like the image)
   ================================================================ */
.mg-modal .swal2-icon,
.mg-modal-delete .swal2-icon,
.mg-modal-warning .swal2-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem !important;
    border-width: 3px !important;
    flex-shrink: 0 !important;
}

/* Success icon — blue */
.mg-modal.mg-modal-success .swal2-icon.swal2-success {
    border-color: var(--mg-success) !important;
    color: var(--mg-success) !important;
}
.mg-modal.mg-modal-success .swal2-success-line-tip,
.mg-modal.mg-modal-success .swal2-success-line-long {
    background-color: var(--mg-success) !important;
}
.mg-modal.mg-modal-success .swal2-success-ring {
    border-color: var(--mg-success-ring) !important;
}

/* Error icon — red */
.mg-modal-delete .swal2-icon.swal2-error,
.mg-modal.mg-modal-error .swal2-icon.swal2-error {
    border-color: var(--mg-error) !important;
    color: var(--mg-error) !important;
}

/* Warning icon — orange */
.mg-modal-warning .swal2-icon.swal2-warning {
    border-color: var(--mg-warning) !important;
    color: var(--mg-warning) !important;
}

/* ================================================================
   5. MODAL TITLE — Colored, large, bold
   ================================================================ */
.mg-modal .mg-modal-title,
.mg-modal-delete .mg-modal-title,
.mg-modal-warning .mg-modal-title {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.mg-modal.mg-modal-success .swal2-title {
    color: var(--mg-success) !important;
}
.mg-modal.mg-modal-error .mg-modal-title,
.mg-modal.mg-modal-blocked .mg-modal-title,
.mg-modal-delete .mg-modal-title {
    color: var(--mg-error) !important;
}
.mg-modal-warning .mg-modal-title {
    color: var(--mg-warning) !important;
}

/* Fallback for .swal2-title when not using custom class */
.mg-modal .swal2-title {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: var(--mg-success) !important;
}
.mg-modal.mg-modal-error .swal2-title,
.mg-modal-delete .swal2-title {
    color: var(--mg-error) !important;
}
.mg-modal-warning .swal2-title {
    color: var(--mg-warning) !important;
}

/* ================================================================
   6. MODAL BODY — Muted description text below title
   ================================================================ */
.mg-modal .swal2-html-container,
.mg-modal-delete .swal2-html-container,
.mg-modal-warning .swal2-html-container {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    margin: 0 0 1.5rem !important;
    padding: 0 0.5rem !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

/* ================================================================
   7. ACTION BUTTONS — Full-width rounded pill buttons
   ================================================================ */
.swal2-actions {
    margin-top: 0 !important;
    gap: 12px !important;
    flex-wrap: nowrap !important; /* Force single line */
    justify-content: center !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Success / OK confirm button — Blue */
.mg-btn-ok {
    background: var(--mg-success) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.30) !important;
    min-width: 140px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
.mg-btn-ok:hover {
    background: #059669 !important; /* Darker green for hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.40) !important;
}
.mg-btn-ok:active {
    transform: translateY(0) !important;
}

/* Error / Delete / Blocked confirm button — Red */
.mg-btn-delete {
    background: var(--mg-error) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.30) !important;
    min-width: 140px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
.mg-btn-delete:hover {
    background: #dc2626 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(239, 68, 68, 0.42) !important;
}

/* Warning confirm button — Amber */
.mg-btn-warning {
    background: var(--mg-warning) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 13px 32px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.30) !important;
    min-width: 160px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
.mg-btn-warning:hover {
    background: #d97706 !important;
    transform: translateY(-2px) !important;
}

/* Brand confirm button (for delete confirmation) */
.mg-btn-confirm {
    background: linear-gradient(135deg, #e814ff 0%, #a855f7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 13px 32px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 20px rgba(232, 20, 255, 0.30) !important;
    min-width: 160px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
.mg-btn-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(232, 20, 255, 0.42) !important;
}

/* Cancel / Secondary button */
.mg-btn-cancel {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    min-width: 130px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}
.mg-btn-cancel:hover {
    background: #e2e8f0 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

/* ================================================================
   8. SUCCESS ICON — Clean checkmark (hide clutter)
   ================================================================ */
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix {
    display: none !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--mg-success-ring) !important;
}
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
    background-color: var(--mg-success) !important;
}

/* ================================================================
   9. TOAST — Pill-shaped pill at top-center for non-critical alerts 
   ================================================================ */
.mg-toast {
    width: auto !important;
    min-width: 320px !important;
    max-width: 95vw !important;
    border-radius: 100px !important;
    padding: 11px 20px 11px 14px !important; /* Balanced padding */
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18) !important;
    border: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #ffffff !important;
}

.mg-toast .swal2-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    margin: 0 14px 0 0 !important; /* Breathier gap */
    border: none !important;
    background: #ffffff !important; /* Circular white container */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important; /* Changed from static for psuedo-elements */
    order: 1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; /* Subtle shadow for depth */
}

.mg-toast .swal2-icon .swal2-icon-content {
    font-size: 0.9rem !important;
    font-weight: 900 !important;
}

/* SUCCESS icon — Perfectly centered checkmark */
.mg-toast .swal2-icon.swal2-success {
    border: none !important;
    background: #ffffff !important;
}
.mg-toast .swal2-icon.swal2-success::after {
    content: '' !important;
    position: absolute !important;
    width: 7px !important;
    height: 12px !important;
    border: solid #10b981 !important;
    border-width: 0 3px 3px 0 !important;
    transform: translate(-50%, -65%) rotate(45deg) !important;
    top: 50% !important;
    left: 50% !important;
}

/* ERROR/DELETE icon — Perfectly centered cross using pseudo-elements */
.mg-toast .swal2-icon.swal2-error {
    border: none !important;
    background: #ffffff !important;
}
.mg-toast .swal2-icon.swal2-error::before,
.mg-toast .swal2-icon.swal2-error::after {
    content: '' !important;
    position: absolute !important;
    width: 14px !important;
    height: 3px !important;
    background-color: var(--mg-error) !important;
    border-radius: 2px !important;
    top: 50% !important;
    left: 50% !important;
}
.mg-toast .swal2-icon.swal2-error::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}
.mg-toast .swal2-icon.swal2-error::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* INFO icon — Perfectly centered 'i' */
.mg-toast .swal2-icon.swal2-info {
    border: none !important;
    background: #ffffff !important;
}
.mg-toast .swal2-icon.swal2-info::before {
    content: '' !important;
    position: absolute !important;
    width: 3px !important;
    height: 9px !important;
    background: #3b82f6 !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 2px !important;
}
.mg-toast .swal2-icon.swal2-info::after {
    content: '' !important;
    position: absolute !important;
    width: 3px !important;
    height: 3px !important;
    background: #3b82f6 !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
}

/* WARNING icon — Perfectly centered '!' */
.mg-toast .swal2-icon.swal2-warning {
    border: none !important;
    background: #ffffff !important;
}
.mg-toast .swal2-icon.swal2-warning::before {
    content: '' !important;
    position: absolute !important;
    width: 3px !important;
    height: 11px !important;
    background: #f59e0b !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 2px !important;
}
.mg-toast .swal2-icon.swal2-warning::after {
    content: '' !important;
    position: absolute !important;
    width: 3px !important;
    height: 3px !important;
    background: #f59e0b !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
}

/* Hide all SweetAlert2 default icon contents for toasts to ensure our psuedo-elements are clean */
.mg-toast .swal2-icon * {
    display: none !important;
}

.mg-toast .swal2-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
}

.mg-toast .swal2-html-container {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Close button - "X" white */
.mg-toast .swal2-close {
    position: static !important; /* Override absolute for flex alignment */
    font-size: 1.25rem !important;
    color: #ffffff !important;
    opacity: 0.7 !important;
    margin-left: auto !important; /* Push to far right */
    margin-right: 8px !important;
    order: 3 !important; /* Move close button to the end (right side) */
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.mg-toast .swal2-close:hover {
    opacity: 1 !important;
    transform: scale(1.1);
}

.mg-toast .swal2-timer-progress-bar-container {
    display: none !important; /* Hide progress bar in colored pill design */
}

/* Toast colour variants — matching the pill design with solid backgrounds */
.mg-toast.mg-toast-success { 
    background: #10b981 !important; 
    color: #ffffff !important;
}
.mg-toast.mg-toast-success .swal2-icon { color: #10b981 !important; }

.mg-toast.mg-toast-error, .mg-toast.mg-toast-blocked, .mg-toast.mg-toast-delete { 
    background: #ef4444 !important; 
    color: #ffffff !important;
}
.mg-toast.mg-toast-error .swal2-icon, 
.mg-toast.mg-toast-blocked .swal2-icon,
.mg-toast.mg-toast-delete .swal2-icon { 
    color: #ef4444 !important; 
}

.mg-toast.mg-toast-warning { 
    background: #f59e0b !important; 
    color: #ffffff !important;
}
.mg-toast.mg-toast-warning .swal2-icon { color: #f59e0b !important; }

.mg-toast.mg-toast-info { 
    background: #3b82f6 !important; 
    color: #ffffff !important;
}
.mg-toast.mg-toast-info .swal2-icon { color: #3b82f6 !important; }

/* Toast content structure */
.mg-toast-body-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    flex-grow: 1 !important;
    min-width: 0 !important; /* Critical for wrapping */
    order: 2 !important; /* Move content to middle position */
}
.mg-toast-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    overflow: hidden !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
}
.mg-toast-title-inline {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    display: block !important;
}
.mg-toast-message-inline {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 !important;
    display: block !important;
    word-break: break-word !important;
}

/* ================================================================
   10. ANIMATIONS
   ================================================================ */
@keyframes mgToastIn {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mgToastOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-20px); }
}
@keyframes mgModalIn {
    from { opacity: 0; transform: scale(0.88) translateY(24px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes mgModalOut {
    from { opacity: 1; transform: scale(1)    translateY(0); }
    to   { opacity: 0; transform: scale(0.92) translateY(12px); }
}

.mg-anim-in   { animation: mgToastIn   0.36s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.mg-anim-out  { animation: mgToastOut  0.28s ease-in forwards; }
.mg-modal-in  { animation: mgModalIn   0.40s cubic-bezier(0.34,1.20,0.64,1) forwards; }
.mg-modal-out { animation: mgModalOut  0.28s ease-in forwards; }

/* ================================================================
   11. DARK MODE SUPPORT
   ================================================================ */
html[data-bs-theme="dark"] .mg-modal,
html[data-bs-theme="dark"] .mg-modal-delete,
html[data-bs-theme="dark"] .mg-modal-warning {
    background: #1e293b !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
html[data-bs-theme="dark"] .mg-modal .swal2-title,
html[data-bs-theme="dark"] .mg-modal-delete .swal2-title,
html[data-bs-theme="dark"] .mg-modal-warning .swal2-title {
    color: inherit !important;
}
html[data-bs-theme="dark"] .mg-modal .swal2-html-container,
html[data-bs-theme="dark"] .mg-modal-delete .swal2-html-container,
html[data-bs-theme="dark"] .mg-modal-warning .swal2-html-container {
    color: #94a3b8 !important;
}

html[data-bs-theme="dark"] .mg-toast {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important;
}
html[data-bs-theme="dark"] .mg-toast .swal2-title { color: #f1f5f9 !important; }
html[data-bs-theme="dark"] .mg-toast .swal2-html-container { color: #94a3b8 !important; }

html[data-bs-theme="dark"] .mg-btn-cancel {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .mg-btn-cancel:hover {
    background: #3f5168 !important;
    color: #e2e8f0 !important;
}

/* ================================================================
   12. RESPONSIVE — Mobile adjustments
   ================================================================ */
@media (max-width: 768px) {
    .mg-modal, .mg-modal-delete, .mg-modal-warning {
        max-width: 92vw !important;
        padding: 2rem 1.5rem 1.75rem !important;
    }

    .mg-toast {
        min-width: 280px !important; /* Elegant pill, not full-width */
        max-width: 90vw !important;
        width: auto !important;
        padding: 10px 16px 10px 12px !important;
        margin: 0 auto !important;
        top: 20px !important; /* Matching desktop position for premium feel */
        bottom: auto !important;
        border-radius: 50px !important;
    }

    .mg-toast .swal2-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        margin-right: 12px !important;
    }

    .mg-toast-title-inline {
        font-size: 0.88rem !important;
    }

    .mg-toast-message-inline {
        font-size: 0.78rem !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    .mg-toast .swal2-close {
        font-size: 1.15rem !important;
        margin-right: 6px !important;
    }

    .mg-toast-content-wrapper {
        gap: 0 !important;
    }
}

/* Ensure button text never wraps in action buttons */
.mg-btn-ok, .mg-btn-delete, .mg-btn-warning, .mg-btn-confirm, .mg-btn-cancel {
    white-space: nowrap !important;
}