/* ============================================================
   ft-alert.css - FWT theme for the shared SweetAlert2 final-result popup
   (JsCommon/ClsFtAlert.js), used by the Contact page and the footer Newsletter
   box after their /Add call settles (success, server-rejected failure, or a
   network/API error only - never for ordinary field validation or an
   untouched CAPTCHA, which stay inline where they already were).

   SweetAlert2 exposes its own tunable set of CSS custom properties
   (--swal2-*); this file re-points the ones that matter to the site's own
   design tokens (app/tokens.css) instead of hand-fighting SweetAlert2's
   internal selectors. buttonsStyling:false (set in ClsFtAlert.js) is what
   lets the confirm button use the site's real .theme-btn.btn-style-one
   styling (already defined in style.css/style1.css) rather than
   SweetAlert2's own button look.

   Direction (RTL/LTR) and most typography are inherited automatically: the
   popup mounts as a child of <body>, which sits under <html dir="rtl"|"ltr">
   (set before first paint in _Layout.cshtml), and SweetAlert2's own CSS sets
   no hardcoded `direction` or `text-align:left` anywhere that would fight
   that inheritance. The one exception is z-index, since SweetAlert2's
   default (1060) sits BELOW the CAPTCHA popover this alert can appear
   alongside (.ft-captcha-popover, z-index 10000) - this site never loads
   SweetAlert2 for anything else, so raising every .swal2-container is safe.
   ============================================================ */

.swal2-container {
    z-index: 10050;
}

.ft-swal-popup {
    --swal2-width: 26em;
    --swal2-padding: 0 0 1.75em;
    --swal2-border-radius: var(--radius-lg, 22px);
    --swal2-background: var(--ft-white, #fff);
    --swal2-color: var(--ft-ink, #1f2a44);
    --swal2-title-padding: 1.4em 1.5em 0;
    --swal2-html-container-padding: 0.6em 1.5em 0;
    --swal2-actions-margin: 1.5em 1.5em 0;
    box-shadow: var(--shadow-lg, 0 18px 48px rgba(17, 29, 66, .14)), 0 20px 60px rgba(17, 29, 66, .2);
}

.ft-swal-title {
    font-size: 1.375em;
    font-weight: 700;
    color: var(--ft-navy, #111d42);
}

.ft-swal-html {
    width: 100%;
}

.ft-alert_message {
    margin: 0;
    font-size: var(--fs-body, 1.0625rem);
    line-height: 1.6;
    color: var(--ft-ink, #1f2a44);
}

.ft-alert_detail {
    margin: 0.6em 0 0;
    font-size: var(--fs-small, .875rem);
    color: var(--ft-muted, #51607a);
}

:root.rtl .ft-swal-popup .ft-alert_message,
:root.rtl .ft-swal-popup .ft-alert_detail,
:root.rtl .ft-swal-popup .ft-swal-title {
    font-family: var(--ft-font-ar);
}

/* Confirm button: ClsFtAlert.js renders the SAME .btn-wrap/.text-one/.text-two markup every
   other theme-btn.btn-style-one call-to-action on the site uses (e.g. #FtCaptchaPopoverConfirm,
   #RequestDemoLink), so it gets the identical pill shape, brand-navy fill, and hover slide -
   nothing here needs to re-style the button itself, only lay it out as a centered, full-width
   action to match how it sits inside a narrow popup. */
.ft-swal-confirm.theme-btn.btn-style-one {
    display: block;
/*    width: 100%;*/
    max-width: 220px;
    margin-inline: auto;
    text-align: center;
}

/* SweetAlert2's success/error icon colors are hardcoded in its own CSS (no custom property for
   them exists); re-themed here to the exact green/red already used elsewhere on this page for
   the same semantics (JsPages/Contact.js / JsCommon/ClsNewsletter.js's setContactStatus /
   setNewsletterStatus success/error colors, and app/slider-captcha.css's .ft-captcha_error). */
.ft-swal-popup .swal2-icon.swal2-success {
    border-color: #19b400;
    color: #19b400;
}

.ft-swal-popup .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #19b400;
}

.ft-swal-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(25, 180, 0, .3);
}

.ft-swal-popup .swal2-icon.swal2-error {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.ft-swal-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #ff4d4f;
}

@media (max-width: 480px) {
    .ft-swal-popup {
        --swal2-width: 94vw;
    }
}