/* Property of Sistema THEAD. All rights reserved. */
/* -----------------------------------------------------------------------
   Project-wide popup theme. Linked LAST on every page so it unifies every
   SweetAlert popup regardless of per-page customClass, with !important
   direct overrides (load-order-proof against both SweetAlert's injected
   styles and the per-page popup rules):
     - no borders on any popup
     - one shared border-radius (--popup-radius)
     - a soft, subtle dark backdrop that fades in/out smoothly
   The custom settings modals (.settings-modal) are aligned to the same
   radius + a matching fade in settings/modal.css.
   ----------------------------------------------------------------------- */
:root {
    --popup-radius: 28px;
    --popup-backdrop: rgba(3, 40, 63, 0.45);
}

/* No borders, one radius — beats SweetAlert's --swal2-border-radius and any
   per-page `.swal-*-popup { border / border-radius }`. */
.swal2-popup {
    border: 0 !important;
    border-radius: var(--popup-radius) !important;
}

/* Soft navy backdrop, gentle fade. SweetAlert toggles
   swal2-backdrop-show / swal2-backdrop-hide on the container.

   NOTE: the transition is intentionally NOT !important so SweetAlert's own
   `swal2-no-transition` (added when a dialog opens while another is already
   showing) can disable it — that native behaviour helps stop the backdrop
   blinking between back-to-back dialogs. */
.swal2-container.swal2-backdrop-show {
    background: var(--popup-backdrop) !important;
    transition: background-color 0.22s ease;
}
.swal2-container.swal2-backdrop-hide {
    background: rgba(3, 40, 63, 0) !important;
    transition: background-color 0.22s ease;
}
.swal2-container.swal2-no-transition {
    transition: none !important;
}

/* ----- Persistent backdrop scrim (chain smoothing) ---------------------
   swalMascot.js installs a single full-screen scrim that stays put across
   consecutive dialogs, so the dark backdrop NEVER fades out-and-in between
   one popup closing and the next opening. While the scrim is managing
   things, SweetAlert's own per-container backdrop is made transparent (the
   scrim is the only dark layer). Pages without swalMascot.js keep the
   normal per-container backdrop above. */
html.tactile-scrim-active .swal2-container.swal2-backdrop-show,
html.tactile-scrim-active .swal2-container.swal2-backdrop-hide {
    background: transparent !important;
}

.tactile-popup-scrim {
    position: fixed;
    inset: 0;
    background: var(--popup-backdrop);
    opacity: 0;
    pointer-events: none;
    /* One below SweetAlert2's container (default z-index 1060): the scrim
       dims the page, the transparent container + popup sit on top of it. */
    z-index: 1059;
    transition: opacity 0.22s ease;
    will-change: opacity;
}
.tactile-popup-scrim.is-on {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .tactile-popup-scrim {
        transition: none;
    }
}

/* -----------------------------------------------------------------------
   Calm, non-bouncy entrance/exit for a popup that opens on its own.
   Overrides SweetAlert2's default zoom-with-overshoot keyframes.

   When a popup opens while another is already showing (a chain),
   swalMascot.js passes `showClass.popup: ''` so the new dialog gets NO
   `swal2-show` class — it appears instantly in place, no fade-in replay,
   over the persistent scrim. So these keyframes only play for the FIRST
   popup of a chain.
   ----------------------------------------------------------------------- */
.swal2-popup.swal2-show {
    animation: tactile-pop-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.swal2-popup.swal2-hide {
    animation: tactile-pop-out 0.18s ease both !important;
}

@keyframes tactile-pop-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tactile-pop-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }
}

.swal2-popup {
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
    .swal2-popup.swal2-show,
    .swal2-popup.swal2-hide {
        animation-duration: 0.001s !important;
    }
    .swal2-popup {
        transition: none !important;
    }
}

/* -----------------------------------------------------------------------
   "Select Scan Mode" popup (scan-mode-popup.js). Two big tappable cards —
   ArUco cards vs the AI puzzle-piece scanner (Beta) — with a camera icon
   header and a privacy reassurance line. Brand blue #0080C9, charcoal ink.
   ----------------------------------------------------------------------- */
.swal-scan-mode-popup {
    --scan-ink: #1c1f22;
    --scan-blue: #0080c9;
    --scan-border: #e2e6ea;
    padding-bottom: 1.7rem;
    border-radius: 26px;
}
.swal-scan-mode-popup .swal2-title {
    color: var(--scan-ink);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    padding-top: 0.6rem;
    margin-bottom: 0.2rem;
}
/* Bold charcoal "X" close button, top-right — matches the mockup. */
.swal-scan-mode-popup .swal2-close {
    color: var(--scan-ink);
    font-size: 2.4rem;
    font-weight: 700;
    top: 0.9rem;
    right: 1.1rem;
    width: 2.2rem;
    height: 2.2rem;
    line-height: 1;
    box-shadow: none;
}
.swal-scan-mode-popup .swal2-close:hover,
.swal-scan-mode-popup .swal2-close:focus {
    color: #000;
    background: transparent;
    outline: none;
}
/* Relative wrapper so the camera icon can float in the centre gap
   between the two cards, as in the mockup. */
.scan-mode-body {
    position: relative;
}
.scan-mode-camera-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--scan-ink);
    line-height: 0;
    pointer-events: none;
}
.scan-mode-camera-icon svg {
    width: 46px;
    height: 46px;
}
.scan-mode-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    justify-content: center;
    align-items: stretch;
    padding-top: 2.7rem;
}
.scan-mode-card {
    flex: 1 1 200px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.2rem 1rem 1.4rem;
    background: #fff;
    border: 2.5px solid var(--scan-border);
    border-radius: 14px;
    color: var(--scan-ink);
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.scan-mode-card:hover,
.scan-mode-card:focus-visible {
    border-color: var(--scan-blue);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 128, 201, 0.16);
    outline: none;
}
.scan-mode-card:active {
    transform: translateY(0);
}
.scan-mode-card-title {
    font-weight: 800;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
}
/* The illustration already bakes in the scan-frame / "AI Beta" header,
   so the card is just a title + this image. `margin: auto 0` centres it
   vertically in the space left under the title (cards are equal height). */
.scan-mode-card-img {
    display: block;
    width: 100%;
    max-width: 230px;
    height: auto;
    margin: auto 0 0;
    pointer-events: none;
    user-select: none;
}
.scan-mode-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.4rem auto 0;
    max-width: 480px;
    color: #4c5358;
    font-size: 0.84rem;
    line-height: 1.35;
}
.scan-mode-privacy-icon {
    color: #2e9b57;
    flex: 0 0 auto;
    line-height: 0;
}