/* =========================================================================
   ClickDeck unified loader
   -------------------------------------------------------------------------
   Used everywhere on the customer side — login / signup, deck builder
   pages, cart, order placement. Pages call window.CDLoader.show(msg?) /
   .hide() (see clickdeck-loader.js) and the markup below is rendered at
   the document body level.

   Visual language:
   • Soft dark backdrop with a 4px blur so the page behind reads as
     "frozen" but still recognisable.
   • Centred white rounded card with a thin shadow.
   • Smooth single rotating ring — ClickDeck yellow (#f5c518) with a
     near-transparent track. Uses two arcs (top + accent) so the spin
     has visible motion even at slow rotation.
   • Optional text label below the spinner.

   Legacy markup compatibility — the original `.spinner > .center-div >
   .inner-div > .loader` structure is still styled below so any page
   that already injects that DOM (e.g. _LayoutCustomerSite) keeps
   working without refactor.
   ========================================================================= */

/* ── Modern unified loader (used by CDLoader.show/.hide) ─────────────── */
.cd-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 32, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: cdFadeIn 0.18s ease-out;
}
.cd-loader-overlay.is-visible { display: flex; }

.cd-loader-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px 36px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 180px;
    max-width: 320px;
}

.cd-loader-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 5px solid rgba(245, 197, 24, 0.18);   /* faint track */
    border-top-color: #f5c518;                    /* ClickDeck yellow arc */
    border-right-color: #f5c518;
    animation: cdSpin 0.9s linear infinite;
    position: relative;
}
.cd-loader-ring::after {
    /* Second smaller arc inside for a layered look. */
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #1f2937;                 /* dark accent */
    animation: cdSpin 1.4s linear infinite reverse;
}

.cd-loader-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    margin: 0;
    letter-spacing: 0.2px;
}

@keyframes cdSpin {
    to { transform: rotate(360deg); }
}
@keyframes cdFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Legacy markup compatibility ──────────────────────────────────────
   _LayoutCustomerSite.cshtml + a few inline pages still render
   .spinner > .center-div > .inner-div > .loader. We restyle that
   nested DOM to look identical to the modern overlay above, so
   existing $('.spinner').show()/.hide() calls keep working without
   any view changes. */

.spinner {
    position: fixed !important;
    z-index: 99999999;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 32, 0.45) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1 !important;
    filter: none;
    align-items: center;
    justify-content: center;
}
/* When visible (display != none) — flex-centre the card. */
.spinner[style*="display: block"],
.spinner[style*="display:block"],
.spinner:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
}

.center-div {
    /* Reset the legacy absolute-positioned card — flex-centred
       inside .spinner is cleaner. */
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    left: auto;
    top: auto;
}

.inner-div {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 28px 36px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    margin: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* Single-tone faint track + yellow accent — replaces the harsh
       green/yellow alternating ring. */
    border: 5px solid rgba(245, 197, 24, 0.18);
    border-top: 5px solid #f5c518;
    border-right: 5px solid #f5c518;
    border-bottom: 5px solid rgba(245, 197, 24, 0.18);
    border-left: 5px solid rgba(245, 197, 24, 0.18);
    animation: spin 0.9s linear infinite;
    position: relative;
}
.loader::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #1f2937;
    animation: spin 1.4s linear infinite reverse;
}

@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin         { to { transform: rotate(360deg); } }

/* Small-screen tweak — keep the card legible on phones. */
@media (max-width: 480px) {
    .cd-loader-card, .inner-div {
        padding: 22px 26px;
    }
    .cd-loader-ring, .loader {
        width: 54px;
        height: 54px;
    }
}

/* ── Responsive popups & messages (mobile/tablet ≤ 991px ONLY) ─────────
   Makes EVERY popup and message render mobile-friendly on phones/tablets
   across Drawing/Index, QuoteSummary and Cart (all three load this file).
   Loaders (.cd-loader-overlay / .spinner) already flex-centre at all
   widths above; the rules below cover Bootstrap modals, toastr messages
   and the Drawing canvas's custom popups/tooltips.

   EVERYTHING is scoped inside @@media (max-width: 991px) so the DESKTOP /
   WEB layout is left exactly as-is (per requirement: "do not alter for
   desktop"). 991px matches the mobile breakpoint used across the app. */
@media (max-width: 991px) {

    /* 1. Bootstrap modals — centre on screen (Bootstrap top-aligns by
       default) and keep the dialog within the viewport. Width is capped
       so the custom-width modals (svgvw-wide 1320px, s2-picker 1060px,
       signup 480px, JS-sized pickers) can't overflow a phone. !important
       beats the inline max-width the picker JS sets. */
    .modal-dialog {
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);              /* 0.5rem margin × 2 */
        max-width: calc(100% - 1rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Tall modals: cap height and let the body scroll instead of pushing
       buttons off-screen. */
    .modal-content { max-height: calc(100vh - 1rem); }
    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 2. Messages (toastr) — full-width banner across the top instead of
       a fixed-width top-right card that gets clipped on small screens.
       Covers every toastr position class. */
    #toast-container.toast-top-right,
    #toast-container.toast-top-left,
    #toast-container.toast-top-center,
    #toast-container.toast-top-full-width,
    #toast-container.toast-bottom-right,
    #toast-container.toast-bottom-left,
    #toast-container.toast-bottom-center,
    #toast-container.toast-bottom-full-width {
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        padding: 0 !important;
    }
    #toast-container > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 4px 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    /* 3. Drawing canvas custom popup — the editor anchors #edit-length-popup
       next to the tapped edge via inline left/top, which can land off-screen
       on a phone. Centre it and fit the width. !important overrides the
       inline styles polygonEditor.js sets. */
    #edit-length-popup {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(320px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* 4. Canvas tooltips — cap width so long text wraps instead of bleeding
       off the screen edge. Anchored position is left intact. */
    #ctip,
    #s3-breaker-location-tooltip {
        max-width: calc(100vw - 24px) !important;
    }
}