/*  Shared busy indicator for EMS.Guest.Web.

    Replaces three older approaches that were used inconsistently across the app:
      - the #ajax / #ajax-sm bootstrap modals with a grey loading-spinner-grey.gif from the CDN,
        which cannot follow the light/dark theme,
      - ShowBusyindicator() from Content/theme2/ajaxmodel.js, which is served from the CDN and
        shared with the admin site, so its hardcoded white overlay cannot be themed here,
      - buttons that only set disabled/aria-busy, which gives no visible feedback at all.

    Pair with Content/customjs/tf-loader.js and call TfLoader.show({ title, message }).

    Keep this file ASCII. Views that consume it have no BOM, and a literal ellipsis or curly quote
    would be decoded as the system codepage and render as mojibake. */

.tf-loader-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    /*  Centred inside a full-width blockUI message box. Positioning the message with left:50%
        instead would cap its shrink-to-fit width at half the viewport, which squashed the card
        into a 188px square on a 375px screen. */
    max-width: min(420px, calc(100vw - 40px));
    margin: 0 auto;
    padding: 20px 26px;
    border: 1px solid #e4e9f2;
    /* !important for the same reason as the spinner's radius below. */
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 24px 60px rgba(18,28,54,.26);
    text-align: left;
    animation: tfLoaderRise .22s ease-out;
}

/* Two-tone ring picks up the same purple and cyan as the primary buttons. */
/*  border-radius needs !important: a Metronic sheet under Content/assets/global/css on the CDN
    squares it off. That folder loads on _HomeBaseLayout and _LoginLayout but not _BaseLayout, so
    the same spinner was round on booking pages and square on home and login. */
.tf-loader-card .tf-loader-spinner {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 3px solid rgba(118,103,239,.16);
    border-top-color: #7667ef;
    border-right-color: #47c2ea;
    border-radius: 50% !important;
    animation: tfLoaderSpin .75s linear infinite;
}

.tf-loader-card .tf-loader-title {
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.tf-loader-card .tf-loader-sub {
    margin-top: 3px;
    color: #68758c;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}

@keyframes tfLoaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes tfLoaderRise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/*  Dark mode is signalled four different ways across this app, so all of them are matched here
    rather than relying on any single one being present on a given page. */
html[data-theme="dark"] .tf-loader-card,
html[data-bs-theme="dark"] .tf-loader-card,
body.booking-page-dark .tf-loader-card,
body.dark-mode .tf-loader-card {
    border-color: rgba(148,163,184,.22);
    background: #141d2c;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

    html[data-theme="dark"] .tf-loader-card .tf-loader-title,
    html[data-bs-theme="dark"] .tf-loader-card .tf-loader-title,
    body.booking-page-dark .tf-loader-card .tf-loader-title,
    body.dark-mode .tf-loader-card .tf-loader-title {
        color: #f3f6ff;
    }

    html[data-theme="dark"] .tf-loader-card .tf-loader-sub,
    html[data-bs-theme="dark"] .tf-loader-card .tf-loader-sub,
    body.booking-page-dark .tf-loader-card .tf-loader-sub,
    body.dark-mode .tf-loader-card .tf-loader-sub {
        color: #9fb0c9;
    }

@media (max-width: 575px) {
    .tf-loader-card {
        gap: 13px;
        padding: 17px 20px;
    }

        .tf-loader-card .tf-loader-spinner {
            width: 32px;
            height: 32px;
        }

        .tf-loader-card .tf-loader-title {
            font-size: 14px;
        }

        .tf-loader-card .tf-loader-sub {
            font-size: 12px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .tf-loader-card {
        animation: none;
    }

        .tf-loader-card .tf-loader-spinner {
            animation-duration: 2s;
        }
}