/* SweetAlert2 theme matching the site card language (select2.css and
   flatpickr.css are the sibling skins): white 24px-radius card, Manrope,
   .btn / .form-control controls, one accent blue instead of the CDN's
   per-icon pastels. !important mirrors the CDN stylesheet, which loads
   after app.css. */

.swal2-popup
{
    /* The timer-progress-bar container rounds its bottom corners with this
       var; without it the bar would poke square corners out of the 24px
       card on the success-timer modal. */
    --swal2-border-radius: 24px;
    padding: 30px !important;
    border-radius: 24px !important;
    background: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    font-family: 'Manrope', -apple-system, sans-serif !important;
}

/* Side padding lives on the popup, so title/body/input drop the CDN's own
   (0.8em 1em / 1em 1.6em / 1em 2em) and only keep vertical rhythm. */
.swal2-title
{
    padding: 20px 0 0 !important;
    color: var(--color-text) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 30px !important;
}
.swal2-html-container
{
    padding: 10px 0 0 !important;
    color: var(--color-text-link) !important;
    font-size: 14px !important;
    line-height: 22px !important;
}

/* Icons: the CDN gives each its own pastel (info #3fc3ee, success #a5dc86,
   question #87adbd, warning #f8bb86) — collapse them all to the accent blue;
   error gets the form-error red instead of the CDN #f27474. The glyph/lines
   take `color`/background from these same rules. */
.swal2-icon
{
    margin: 0 auto !important;
}
.swal2-icon.swal2-info,
.swal2-icon.swal2-question,
.swal2-icon.swal2-warning,
.swal2-icon.swal2-success
{
    border-color: var(--color-bg-fourth) !important;
    color: var(--color-bg-fourth) !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line]
{
    background-color: var(--color-bg-fourth) !important;
}
.swal2-icon.swal2-success .swal2-success-ring
{
    /* --color-bg-fourth at the CDN's own 0.3 ring alpha. */
    border-color: rgba(112, 143, 255, 0.3) !important;
}
.swal2-icon.swal2-error
{
    border-color: #DC2626 !important;
    color: #DC2626 !important;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line]
{
    background-color: #DC2626 !important;
}

/* Input: the .form-control look. font-size/text-align stay un-!important so
   the OTP prompt's inline centered 24px letter-spaced style keeps winning. */
.swal2-input
{
    height: 48px !important;
    margin: 20px 0 0 !important;
    padding: 10px 15px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    background: var(--color-bg-alt) !important;
    box-shadow: none !important;
    color: var(--color-text) !important;
    font-size: 14px;
    /* The CDN transitions border-color; transition declarations outrank
       author !important in the cascade, and in Chrome the animated change
       to our !important border never lands — the .swal2-inputerror red
       simply doesn't show. .form-control doesn't animate either. */
    transition: none !important;
}
.swal2-input:hover
{
    box-shadow: none !important;
}
.swal2-input:focus
{
    border: 1px solid var(--color-bg-fourth) !important;
    box-shadow: none !important;
}
/* The CDN paints an invalid input #f27474 with its own !important — the
   doubled class outranks it. */
.swal2-input.swal2-inputerror
{
    border-color: #DC2626 !important;
    box-shadow: none !important;
}
.swal2-input::placeholder
{
    color: var(--color-text-link) !important;
}

/* Shown for an empty code: plain red helper text, not the CDN's grey band
   with a "!" badge (::before). */
.swal2-validation-message
{
    margin: 10px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #DC2626 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
}
.swal2-validation-message::before
{
    display: none !important;
}

/* Buttons: confirm = site .btn, deny («Надіслати повторно» — a resend, so no
   CDN red) = bordered secondary, cancel = bare text link. background with
   !important also neutralises the CDN's color-mix hover/active shading —
   site buttons don't shift on hover. */
.swal2-actions
{
    margin: 25px 0 0 !important;
    gap: 10px;
}
.swal2-styled
{
    margin: 0 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}
.swal2-styled:focus-visible
{
    box-shadow: none !important;
}
.swal2-confirm
{
    padding: 10px 20px !important;
    border-radius: 8px !important;
    background: var(--color-btn) !important;
    color: var(--color-text-secondary) !important;
}
.swal2-deny
{
    /* 1px less vertical padding: the border must not make it taller than
       the borderless confirm. */
    padding: 9px 19px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    background: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
}
.swal2-cancel
{
    padding: 10px 20px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--color-text-link) !important;
}
.swal2-cancel:hover
{
    color: var(--color-text) !important;
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation
{
    background: rgba(16, 12, 12, 0.5) !important;
}

/* Success-timer countdown strip (CDN: rgba(0,0,0,.3)). */
.swal2-timer-progress-bar
{
    background: var(--progress-primary) !important;
}