/* ==========================================================================
   FoxCRM — Alerts (modals + inline cards)

   One design for every "something happened" surface in the app:

     · SweetAlert2 dialogs — the app's alert engine (~230 call sites across
       leads, ventas, reclamos, admin_*, whatsapp, integraciones). Restyled
       here, so every existing Swal.fire() picks up the new look with no
       call-site changes.
     · Bootstrap modals — the generic .modal shell gets the same backdrop,
       radius and shadow so form dialogs sit in the same world as alerts.
     · .fox-alert — the inline alert card (login/auth pages and anywhere a
       message belongs in the page rather than over it).

   Loaded from header.tpl.php AFTER app-theme.css, so equal-specificity rules
   here win by source order. The vendor bundles are never edited.
   ========================================================================== */

:root {
    --fox-alert-radius: 24px;
    --fox-modal-radius: 18px;
    --fox-alert-scrim: rgba(28, 25, 38, 0.42);
    --fox-alert-surface: #ffffff;
    --fox-alert-shadow:
        0 40px 80px -28px rgba(28, 25, 38, 0.45),
        0 12px 28px -18px rgba(28, 25, 38, 0.3),
        0 0 0 1px rgba(28, 25, 38, 0.05);

    /* Status palette — same five meanings the toasts already use. */
    --fox-alert-danger: #ea5455;
    --fox-alert-success: #28c76f;
    --fox-alert-warning: #ff9f43;
    --fox-alert-info: #00cfe8;
    --fox-alert-brand: #f98000;
}

/* ==========================================================================
   1. Backdrop — full-screen blurred scrim
   ========================================================================== */

.swal2-container.swal2-shown {
    background-color: var(--fox-alert-scrim) !important;
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-animation: fox-alert-scrim-in 0.28s ease-out both;
    animation: fox-alert-scrim-in 0.28s ease-out both;
}

.swal2-container.swal2-backdrop-hide,
.swal2-container.swal2-hide {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Toasts float over the page and must never dim or blur it. */
body.swal2-toast-shown .swal2-container.swal2-shown {
    background-color: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@-webkit-keyframes fox-alert-scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fox-alert-scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   2. Dialog shell
   ========================================================================== */

.swal2-popup:not(.swal2-toast) {
    /* px, not em — the theme sets a 14px root, so the vendor's 32em would
       render narrower here than the design calls for. */
    width: 470px;
    max-width: calc(100vw - 2.5rem);
    padding: 2.6rem 2.4rem 2.1rem !important;
    border-radius: var(--fox-alert-radius) !important;
    background: var(--fox-alert-surface);
    box-shadow: var(--fox-alert-shadow);
}

.swal2-popup:not(.swal2-toast).swal2-show {
    -webkit-animation: fox-alert-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation: fox-alert-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.swal2-popup:not(.swal2-toast).swal2-hide {
    -webkit-animation: fox-alert-out 0.18s ease-in both;
    animation: fox-alert-out 0.18s ease-in both;
}

@-webkit-keyframes fox-alert-in {
    from { opacity: 0; -webkit-transform: translateY(18px) scale(0.94); transform: translateY(18px) scale(0.94); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fox-alert-in {
    from { opacity: 0; -webkit-transform: translateY(18px) scale(0.94); transform: translateY(18px) scale(0.94); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@-webkit-keyframes fox-alert-out {
    from { opacity: 1; -webkit-transform: none; transform: none; }
    to   { opacity: 0; -webkit-transform: translateY(8px) scale(0.97); transform: translateY(8px) scale(0.97); }
}

@keyframes fox-alert-out {
    from { opacity: 1; -webkit-transform: none; transform: none; }
    to   { opacity: 0; -webkit-transform: translateY(8px) scale(0.97); transform: translateY(8px) scale(0.97); }
}

/* ==========================================================================
   3. Status icon — tinted disc with concentric halos, drawn here instead of
      the vendor's outlined circle. The vendor's inner markup (x-mark lines,
      success rings, text glyph) is hidden so a single background-image is
      the whole icon: one shape language for all five states, and it renders
      identically whether the dialog animates in or is re-shown instantly.
   ========================================================================== */

.swal2-popup:not(.swal2-toast) .swal2-icon {
    position: relative;
    box-sizing: border-box;
    width: 68px;
    min-width: 68px;
    height: 68px;
    /* Clears the 22px halo before the title starts. */
    margin: 0 auto 1.85rem;
    border: none !important;
    border-radius: 50%;
    background-color: var(--fox-icon-tint);
    background-image: var(--fox-icon-glyph);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px 34px;
    box-shadow:
        0 0 0 9px var(--fox-icon-halo-1),
        0 0 0 20px var(--fox-icon-halo-2);
    line-height: 68px;
    -webkit-animation: fox-alert-icon-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation: fox-alert-icon-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The halos are drawn with spread shadows, so the icon needs breathing room
   inside the dialog that its own box doesn't reserve. */
.swal2-popup:not(.swal2-toast) .swal2-header {
    padding-top: 0.5rem;
}

/* error/success draw themselves from child elements; warning/info/question
   from a ::before glyph. Both are cleared so only our background renders. */
.swal2-popup:not(.swal2-toast) .swal2-icon > * {
    display: none !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon::before,
.swal2-popup:not(.swal2-toast) .swal2-icon::after {
    content: '' !important;
}

@-webkit-keyframes fox-alert-icon-in {
    from { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); }
    60%  { -webkit-transform: scale(1.06); transform: scale(1.06); }
    to   { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes fox-alert-icon-in {
    from { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); }
    60%  { -webkit-transform: scale(1.06); transform: scale(1.06); }
    to   { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error {
    --fox-icon-tint: rgba(234, 84, 85, 0.14);
    --fox-icon-halo-1: rgba(234, 84, 85, 0.1);
    --fox-icon-halo-2: rgba(234, 84, 85, 0.05);
    --fox-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea5455' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success {
    --fox-icon-tint: rgba(40, 199, 111, 0.14);
    --fox-icon-halo-1: rgba(40, 199, 111, 0.1);
    --fox-icon-halo-2: rgba(40, 199, 111, 0.05);
    --fox-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328c76f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.8 4.8L19.5 7'/%3E%3C/svg%3E");
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning {
    --fox-icon-tint: rgba(255, 159, 67, 0.16);
    --fox-icon-halo-1: rgba(255, 159, 67, 0.11);
    --fox-icon-halo-2: rgba(255, 159, 67, 0.05);
    --fox-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9f43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4L1.8 21h20.4z'/%3E%3Cpath d='M12 9.6v4.6M12 17.6v.01'/%3E%3C/svg%3E");
    color: transparent !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-info {
    --fox-icon-tint: rgba(0, 207, 232, 0.14);
    --fox-icon-halo-1: rgba(0, 207, 232, 0.09);
    --fox-icon-halo-2: rgba(0, 207, 232, 0.04);
    --fox-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300cfe8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3Cpath d='M12 11.2v5.4M12 7.5v.01'/%3E%3C/svg%3E");
    color: transparent !important;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-question {
    --fox-icon-tint: rgba(249, 128, 0, 0.14);
    --fox-icon-halo-1: rgba(249, 128, 0, 0.09);
    --fox-icon-halo-2: rgba(249, 128, 0, 0.04);
    --fox-icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f98000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3Cpath d='M9.3 9.2a2.8 2.8 0 015.4 1c0 1.9-2.7 2.2-2.7 4'/%3E%3Cpath d='M12 17.4v.01'/%3E%3C/svg%3E");
    color: transparent !important;
}

/* ==========================================================================
   4. Type
   ========================================================================== */

.swal2-popup:not(.swal2-toast) .swal2-title {
    margin: 0 0 0.55rem;
    color: var(--fox-ink, #26232f);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.swal2-popup:not(.swal2-toast) .swal2-content,
.swal2-popup:not(.swal2-toast) .swal2-html-container {
    color: var(--fox-ink-soft, #6c6a78);
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.6;
}

.swal2-popup:not(.swal2-toast) .swal2-content pre,
.swal2-popup:not(.swal2-toast) .swal2-content code {
    border-radius: 10px;
    background: var(--fox-tint, #fff8f2);
    color: var(--fox-ink, #26232f);
    font-size: 0.85rem;
    text-align: left;
}

/* ==========================================================================
   5. Close button — ghost square, not the vendor's oversized serif "×"
   ========================================================================== */

.swal2-popup:not(.swal2-toast) .swal2-close {
    top: 0.85rem;
    right: 0.85rem;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: transparent;
    color: var(--fox-muted, #9997a3);
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.swal2-popup:not(.swal2-toast) .swal2-close:hover,
.swal2-popup:not(.swal2-toast) .swal2-close:focus {
    outline: none;
    background: rgba(38, 35, 47, 0.06);
    color: var(--fox-ink, #26232f);
}

/* ==========================================================================
   6. Actions — pill buttons, primary last, stacked on narrow screens.

      Most call sites pass buttonsStyling:false with confirmButtonClass:"btn
      btn-*", so those buttons arrive as real .btn elements. The .swal2-styled
      rules cover the handful that don't, so both paths look the same.
   ========================================================================== */

.swal2-popup:not(.swal2-toast) .swal2-actions {
    width: 100%;
    margin: 1.75rem 0 0;
    gap: 0.65rem;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .btn,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled {
    min-width: 140px;
    margin: 0;
    padding: 0.72rem 1.65rem !important;
    border-radius: 12px !important;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

/* Older browsers without flex `gap` — keeps the pair from touching. */
@supports not (gap: 1px) {
    .swal2-popup:not(.swal2-toast) .swal2-actions .btn,
    .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled {
        margin: 0 0.325rem;
    }
}

.swal2-popup:not(.swal2-toast) .swal2-actions .btn:hover,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled:hover {
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.swal2-popup:not(.swal2-toast) .swal2-actions .btn:active,
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/* Vendor-styled fallback: match the app's primary/ghost pair. */
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm {
    border: none;
    background: var(--fox-gradient, linear-gradient(135deg, #fcaf03 0%, #f98000 48%, #f83800 100%)) !important;
    box-shadow: var(--fox-shadow-orange, 0 10px 24px -8px rgba(248, 86, 0, 0.35));
    color: #fff;
}

.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel {
    border: 1px solid var(--fox-border, #ebe9f0);
    background: #fff !important;
    color: var(--fox-ink-soft, #6c6a78);
}

.swal2-popup:not(.swal2-toast) .swal2-styled:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(249, 128, 0, 0.22);
}

/* Confirm sits on the right: it is the action the dialog is asking for. */
.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel {
    order: 1;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm {
    order: 2;
}

.swal2-popup:not(.swal2-toast) .swal2-footer {
    margin: 1.5rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--fox-border, #ebe9f0);
    color: var(--fox-muted, #9997a3);
    font-size: 0.85rem;
}

/* ==========================================================================
   7. Inputs (prompt dialogs) and validation
   ========================================================================== */

.swal2-popup:not(.swal2-toast) .swal2-input,
.swal2-popup:not(.swal2-toast) .swal2-textarea,
.swal2-popup:not(.swal2-toast) .swal2-select,
.swal2-popup:not(.swal2-toast) .swal2-file {
    width: 100%;
    margin: 1.1rem 0 0;
    padding: 0.75rem 1rem;
    height: auto;
    border: 1px solid var(--fox-border, #ebe9f0);
    border-radius: 12px;
    box-shadow: none;
    background: #fbfafc;
    color: var(--fox-ink, #26232f);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.swal2-popup:not(.swal2-toast) .swal2-input:focus,
.swal2-popup:not(.swal2-toast) .swal2-textarea:focus,
.swal2-popup:not(.swal2-toast) .swal2-select:focus,
.swal2-popup:not(.swal2-toast) .swal2-file:focus {
    outline: none;
    border-color: var(--fox-orange, #f98000);
    box-shadow: 0 0 0 4px rgba(249, 128, 0, 0.14);
    background: #fff;
}

.swal2-popup:not(.swal2-toast) .swal2-validationerror,
.swal2-popup:not(.swal2-toast) .swal2-validation-message {
    margin: 1rem 0 0;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: rgba(234, 84, 85, 0.1);
    color: #d13b3c;
    font-size: 0.88rem;
    font-weight: 500;
}

.swal2-popup:not(.swal2-toast) .swal2-validationerror::before,
.swal2-popup:not(.swal2-toast) .swal2-validation-message::before {
    width: 20px;
    height: 20px;
    margin-right: 0.55rem;
    background: #ea5455;
    font-size: 0.78rem;
    line-height: 20px;
}

.swal2-popup:not(.swal2-toast) .swal2-progress-steps {
    margin: 0 0 1.5rem;
    background: transparent;
}

.swal2-popup:not(.swal2-toast) .swal2-progress-steps .swal2-active-progress-step,
.swal2-popup:not(.swal2-toast) .swal2-progress-steps .swal2-progresscircle.swal2-activeprogressstep {
    background: var(--fox-orange, #f98000);
}

/* Loading state (Swal.showLoading) in the brand colour. */
.swal2-popup:not(.swal2-toast) .swal2-loading .swal2-styled.swal2-confirm {
    border-color: var(--fox-orange, #f98000) transparent var(--fox-orange, #f98000) transparent !important;
    background: transparent !important;
    box-shadow: none;
}

/* ==========================================================================
   8. Toast dialogs keep the toastr card language already used app-wide.
   ========================================================================== */

.swal2-popup.swal2-toast {
    padding: 0.85rem 1.1rem !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 32px -10px rgba(38, 35, 47, 0.3) !important;
}

.swal2-popup.swal2-toast .swal2-title {
    color: var(--fox-ink, #26232f);
    font-size: 0.95rem;
    font-weight: 600;
}

/* ==========================================================================
   9. Bootstrap modals — same backdrop, radius and shadow, so form dialogs
      and alert dialogs read as one system.
   ========================================================================== */

.modal-backdrop.show {
    background-color: var(--fox-alert-scrim);
    opacity: 1;
}

/* The blur goes on the modal layer itself: .modal-backdrop sits *under* the
   scrolling .modal, so blurring the backdrop alone would leave the page
   sharp behind the dialog. */
.modal.show {
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
}

/* Scoped under .modal to outrank the Vuexy overrides, which are all written
   as `.modal .modal-*` — an unscoped `.modal-content` here would lose its
   box-shadow to `.modal .modal-content` no matter the source order. */
.modal .modal-content {
    border: none;
    border-radius: var(--fox-modal-radius);
    box-shadow: var(--fox-alert-shadow);
}

/* Top corners match the shell's; the bottom two are squared off so the header
   meets the body on a straight edge (Vuexy rounds all four, and rounds the
   bottom pair again for filled headers, which left a visible notch). Not done
   with overflow:hidden on .modal-content, which would clip dropdowns and date
   pickers opened inside a modal body. */
.modal .modal-header,
.modal .modal-header[class*="bg-"] {
    position: relative;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--fox-border, #ebe9f0);
    border-top-left-radius: var(--fox-modal-radius);
    border-top-right-radius: var(--fox-modal-radius);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.modal .modal-header .modal-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    /* Keeps the title clear of the close button. */
    padding-right: 2.25rem;
}

.modal .modal-body {
    padding: 1.5rem;
}

.modal .modal-footer {
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--fox-border, #ebe9f0);
    border-bottom-right-radius: var(--fox-modal-radius);
    border-bottom-left-radius: var(--fox-modal-radius);
}

/* Coloured headers lose the divider — the fill already separates them. */
.modal .modal-header[class*="bg-"] {
    border-bottom-color: transparent;
}

/* ---- Close button ----
   Vuexy floats it outside the dialog as a white shadowed chip
   (transform: translate(8px,-2px) + box-shadow + white background). Pulled
   back inside the header as a bare glyph — no chip, no background — that
   takes its colour from the header it sits on. */
.modal .modal-header .close {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    z-index: 2;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 0.65;
    color: var(--fox-ink, #26232f);
    text-shadow: none;
    transition: opacity 0.15s ease;
}

.modal .modal-header .close:hover,
.modal .modal-header .close:focus,
.modal .modal-header .close:active {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    outline: none;
    box-shadow: none;
    background: transparent;
    opacity: 1;
}

.modal .modal-header .close span {
    display: block;
    color: inherit;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 26px;
}

/* On a filled header the glyph goes white — the vendor tints it per colour
   (bg-primary -> violet, bg-info -> cyan), which only worked against the
   white chip that used to sit behind it. */
.modal .modal-header[class*="bg-"]:not(.bg-light):not(.bg-white) .close,
.modal .modal-header[class*="bg-"]:not(.bg-light):not(.bg-white) .close span {
    color: #fff;
}

.modal.fade .modal-dialog {
    -webkit-transform: translateY(18px) scale(0.97);
    transform: translateY(18px) scale(0.97);
    transition: -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
}

/* ==========================================================================
   10. .fox-alert — the inline alert card (auth pages, in-page messages)
   ========================================================================== */

.fox-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    margin-bottom: 18px;
    padding: 14px 16px 14px 15px;
    overflow: hidden;
    border: 1px solid var(--fox-alert-card-border);
    border-radius: 14px;
    background: var(--fox-alert-card-bg);
    color: var(--fox-ink, #26232f);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    -webkit-animation: fox-alert-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation: fox-alert-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fox-alert::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--fox-alert-card-accent);
}

.fox-alert-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--fox-alert-card-accent);
    background-image: var(--fox-alert-card-glyph);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

.fox-alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.fox-alert-title {
    display: block;
    margin-bottom: 2px;
    color: var(--fox-ink, #26232f);
    font-weight: 700;
}

.fox-alert-text {
    display: block;
    color: var(--fox-ink-soft, #6c6a78);
}

.fox-alert-error {
    --fox-alert-card-bg: rgba(234, 84, 85, 0.07);
    --fox-alert-card-border: rgba(234, 84, 85, 0.22);
    --fox-alert-card-accent: #ea5455;
    --fox-alert-card-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.fox-alert-success {
    --fox-alert-card-bg: rgba(40, 199, 111, 0.07);
    --fox-alert-card-border: rgba(40, 199, 111, 0.22);
    --fox-alert-card-accent: #28c76f;
    --fox-alert-card-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
}

.fox-alert-warning {
    --fox-alert-card-bg: rgba(255, 159, 67, 0.08);
    --fox-alert-card-border: rgba(255, 159, 67, 0.24);
    --fox-alert-card-accent: #ff9f43;
    --fox-alert-card-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2L12 3zM12 10v4M12 17.5v.01'/%3E%3C/svg%3E");
}

.fox-alert-info {
    --fox-alert-card-bg: rgba(0, 207, 232, 0.07);
    --fox-alert-card-border: rgba(0, 207, 232, 0.22);
    --fox-alert-card-accent: #00cfe8;
    --fox-alert-card-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8h.01M11 12h1v5h1'/%3E%3C/svg%3E");
}

@-webkit-keyframes fox-alert-card-in {
    from { opacity: 0; -webkit-transform: translateY(-6px); transform: translateY(-6px); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fox-alert-card-in {
    from { opacity: 0; -webkit-transform: translateY(-6px); transform: translateY(-6px); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

/* ==========================================================================
   11. Dark layout — the app's optional dark theme (body.dark-layout)
   ========================================================================== */

body.dark-layout {
    --fox-alert-surface: #262c49;
    --fox-alert-scrim: rgba(6, 9, 26, 0.62);
    --fox-alert-shadow:
        0 40px 80px -28px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-title,
body.dark-layout .fox-alert,
body.dark-layout .fox-alert-title {
    color: #f2f4f8;
}

body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-content,
body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-html-container,
body.dark-layout .fox-alert-text {
    color: #b4b7bd;
}

body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-close:hover,
body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-close:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #f2f4f8;
}

body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-input,
body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-textarea,
body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-select,
body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-file {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #f2f4f8;
}

body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel {
    border-color: rgba(255, 255, 255, 0.16);
    background: transparent !important;
    color: #b4b7bd;
}

body.dark-layout .swal2-popup:not(.swal2-toast) .swal2-footer,
body.dark-layout .modal-header,
body.dark-layout .modal-footer {
    border-color: rgba(255, 255, 255, 0.09);
}

/* ==========================================================================
   12. Responsive + motion preferences
   ========================================================================== */

@media (max-width: 575.98px) {
    .swal2-popup:not(.swal2-toast) {
        padding: 2rem 1.4rem 1.6rem !important;
        border-radius: 20px !important;
    }

    .swal2-popup:not(.swal2-toast) .swal2-icon {
        width: 64px;
        min-width: 64px;
        height: 64px;
        margin-bottom: 1.25rem;
        background-size: 29px 29px;
        box-shadow:
            0 0 0 8px var(--fox-icon-halo-1),
            0 0 0 17px var(--fox-icon-halo-2);
        line-height: 64px;
    }

    .swal2-popup:not(.swal2-toast) .swal2-title {
        font-size: 1.25rem;
    }

    /* Stacked, primary on top — the orders from section 6 are flipped so the
       confirm button stays the first thing under the message. */
    .swal2-popup:not(.swal2-toast) .swal2-actions {
        flex-direction: column;
        margin-top: 1.5rem;
    }

    .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-confirm {
        order: 1;
    }

    .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel {
        order: 2;
    }

    .swal2-popup:not(.swal2-toast) .swal2-actions .btn,
    .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swal2-container.swal2-shown,
    .swal2-popup:not(.swal2-toast).swal2-show,
    .swal2-popup:not(.swal2-toast).swal2-hide,
    .swal2-popup:not(.swal2-toast) .swal2-icon,
    .fox-alert {
        -webkit-animation: none !important;
        animation: none !important;
    }

    .modal.fade .modal-dialog {
        transition: none;
        -webkit-transform: none;
        transform: none;
    }
}