/* HailTracker-themed SweetAlert2 popups. Opt in per popup via the HTSwal
   mixin in includes/main.js (customClass popup: 'ht-swal') so the default
   white/purple SweetAlert look elsewhere on the site is untouched.

   The panel mirrors #login-modal (indexDesktop.css): same translucent blue,
   frosted blur, border, radius and shadow, so alerts read as the same
   surface as the login screen. Loaded without a media restriction because
   the popups fire on both desktop and mobile layouts. */

.swal2-popup.ht-swal {
    background-color: rgba(17, 34, 56, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 0 50px rgb(0 0 0 / 80%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
}

.ht-swal .swal2-title,
.ht-swal .swal2-html-container {
    color: white;
}

/* Accept action: the site's active-button orange (update_css_button). */
.ht-swal .swal2-styled.swal2-confirm {
    background-color: rgb(229, 132, 17);
}

/* Cancel action: HailTracker blue, matching the site's resting buttons. */
.ht-swal .swal2-styled.swal2-cancel {
    background-color: rgb(29, 52, 76);
}

/* Replace SweetAlert's purple focus glow with a neutral ring. */
.ht-swal .swal2-styled.swal2-confirm:focus,
.ht-swal .swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.ht-swal .swal2-styled.swal2-confirm:focus-visible,
.ht-swal .swal2-styled.swal2-cancel:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}