/* ============================================================================
   XROADGEAR — "Liquid Glass" UI System  (Apple-style glassmorphism)
   ----------------------------------------------------------------------------
   A REUSABLE glass design language built on CSS custom properties + utility
   classes so the same look can extend to the sidebar, top header, cards, and
   modals. Loaded LAST in layouts/app.blade.php (after responsive.css) so it can
   safely refine the Bamburgh (Bootstrap 4) base.

   THREE PRINCIPLES
     1. Dynamic Refraction   -> backdrop-filter blur + saturation, layered
                                translucent gradients, specular sheen, thin
                                luminous border, inner glow/shadow.
     2. Responsive Elements  -> fluid clamp() spacing, animated glass pills,
                                RWD that respects the theme collapse/toggle JS.
     3. System-Wide          -> tokens (--glass-*) + classes (.glass-surface,
                                .glass-pill, .glass-sheen) reusable anywhere.

   ----------------------------------------------------------------------------
   HOW TO REUSE ELSEWHERE (system-wide integration)
     • Any panel:   <div class="glass-surface"> ... </div>
     • Stronger:    add .glass-surface--strong  (more opaque, e.g. modals)
     • Light chrome:add .glass-surface--light    (header bars)
     • Interactive: add .glass-pill to a clickable row/button for the animated
                    lensed highlight on hover/focus/active.
     • Tune globally by overriding the :root tokens (--glass-bg, --glass-blur…).
     • A safe fallback is provided via @supports for browsers without
       backdrop-filter (opaque-ish backgrounds keep text legible).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. SYSTEM TOKENS — change these to re-theme the entire glass language
   --------------------------------------------------------------------------- */
:root {
    /* App page canvas — same cool lavender as theme #f4f5fd, much lighter */
    --glass-page-bg:     #fbfcff;

    /* Translucent surfaces (tuned for a DARK sidebar: night-sky blue) */
    --glass-bg:          rgba(20, 36, 74, 0.55);
    --glass-bg-strong:   rgba(16, 30, 62, 0.78);
    --glass-bg-light:    rgba(76, 129, 222, 0.22);

    /* Frost intensity */
    --glass-blur:        18px;
    --glass-blur-sm:     8px;
    --glass-saturate:    160%;

    /* Light refraction: borders, sheen, glow */
    --glass-border:        rgba(255, 255, 255, 0.18);
    --glass-border-strong: rgba(255, 255, 255, 0.38);
    --glass-highlight:     rgba(255, 255, 255, 0.45);
    --glass-shadow:        0 8px 32px rgba(7, 9, 25, 0.45);
    --glass-inner-glow:    inset 0 1px 0 rgba(255, 255, 255, 0.22),
                           inset 0 0 26px rgba(255, 255, 255, 0.05);

    /* Shape + motion */
    --glass-radius:     16px;
    --glass-radius-sm:  12px;
    --glass-transition: 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);

    /* Accents — cohesive with the app (night-sky blue + bamburgh primary) */
    --glass-accent:    #4c81de;
    --glass-accent-2:  #6aa0ff;
    --glass-primary:   #3c44b1;

    /* Text on glass (kept legible on dark translucent surfaces) */
    --glass-text:      rgba(255, 255, 255, 0.88);
    --glass-text-dim:  rgba(255, 255, 255, 0.62);

    /* Interactive pill states */
    --glass-pill-bg:     rgba(255, 255, 255, 0.12);
    --glass-pill-active: linear-gradient(135deg, rgba(108, 160, 255, 0.32), rgba(76, 129, 222, 0.24));
    --glass-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 4px 14px rgba(7, 9, 25, 0.28);
}

/* Soften the theme page canvas (#f4f5fd → same hue, much lighter) */
body.main-body,
#app-top,
.app-wrapper {
    background: var(--glass-page-bg) !important;
    background-color: var(--glass-page-bg) !important;
}

/* ---------------------------------------------------------------------------
   1. REUSABLE UTILITY CLASSES (Principle 3 — System-Wide Integration)
   --------------------------------------------------------------------------- */
.glass-surface {
    position: relative;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    color: var(--glass-text);
}

.glass-surface--strong { background: var(--glass-bg-strong); }
.glass-surface--light  { background: var(--glass-bg-light); }

/* Soft specular sheen / light-refraction overlay — drop on any positioned box */
.glass-sheen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 32%);
    z-index: 0;
}

/* Animated "lensed" glass pill highlight for interactive rows/buttons */
.glass-pill {
    position: relative;
    z-index: 0;
    border-radius: var(--glass-radius);
    transition: transform var(--glass-transition), color var(--glass-transition);
}
.glass-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glass-pill-bg);
    border: 1px solid transparent;
    box-shadow: var(--glass-pill-shadow);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--glass-transition), transform var(--glass-transition),
                background var(--glass-transition), border-color var(--glass-transition);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
}
.glass-pill:hover::before,
.glass-pill:focus::before,
.glass-pill.is-active::before {
    opacity: 1;
    transform: scale(1);
}

/* ----------------------------------------------------------------------------
   FLG PILL TABLE — compact capsule rows for data tables (reusable)
   ----------------------------------------------------------------------------
   Reference name: "FLG Pill Table" (say this in prompts / other pages).

   Frosted glass table where each body row is a tight horizontal pill (~3.75rem)
   with minimal vertical padding, 5px row gap, and hover lift. Desktop/tablet
   (≥768px); pair with §27 mobile card stack on small screens.

   Markup:
     <div class="flg-pill-table-scroll">           <!-- optional ~6-row scroll cage -->
       <div class="table-responsive">
         <table class="table table-hover flg-pill-table w-100">
           <tbody>
             <tr class="clickable-row" data-href="…"> … </tr>
             <!-- product column with thumb + title + description: -->
             <td class="flg-pill-table__cell--product"> … </td>

   Modifiers:
     .flg-pill-table-scroll          — caps visible rows (default 6) + sticky head room
     .flg-pill-table__cell--product   — 48px thumb + 2-line text grid in a cell
     .flg-pill-table__row             — pill row without .clickable-row (non-links)

   Tune per page on the scroll wrapper or table:
     --flg-pill-visible-rows   (default 6)
     --flg-pill-row-h          (default 3.75rem)
     --flg-pill-head-h         (default 2.25rem)
     --flg-pill-row-gap        (default 5px)
     --flg-pill-thumb          (default 48px)
   --------------------------------------------------------------------------- */
.flg-pill-table-scroll {
    --flg-pill-visible-rows: 6;
    --flg-pill-row-h: 3.75rem;
    --flg-pill-head-h: 2.25rem;
    --flg-pill-row-gap: 5px;
    --flg-pill-thumb: 48px;
    max-height: calc(var(--flg-pill-row-h) * var(--flg-pill-visible-rows) + var(--flg-pill-head-h));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
/* Only the outer cage scrolls — never nest a second scrollbar in .table-responsive */
.flg-pill-table-scroll .table-responsive,
.dashboard-glass .flg-pill-table-scroll .table-responsive,
.orders-glass .flg-pill-table-scroll .table-responsive {
    overflow: visible !important;
}
.flg-pill-table-scroll.dropdown-open {
    overflow: visible;
}
.flg-pill-table-scroll table.flg-pill-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(60, 68, 177, 0.12);
}

@media (min-width: 768px) {
    table.flg-pill-table {
        table-layout: fixed;
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0 var(--flg-pill-row-gap);
        background: transparent;
    }
    table.flg-pill-table tbody tr.clickable-row,
    table.flg-pill-table tbody tr.flg-pill-table__row {
        cursor: pointer;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid var(--glass-card-border);
        border-radius: 999px;
        box-shadow: var(--glass-card-shadow);
        transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                    background var(--glass-transition);
    }
    table.flg-pill-table.table-hover tbody tr.clickable-row:hover,
    table.flg-pill-table.table-hover tbody tr.flg-pill-table__row:hover {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--glass-card-shadow-hover);
        transform: translateY(-1px);
    }
    table.flg-pill-table.table-hover tbody tr.clickable-row:hover > td,
    table.flg-pill-table.table-hover tbody tr.flg-pill-table__row:hover > td {
        background: transparent !important;
    }
    table.flg-pill-table tbody td {
        padding: 4px 8px !important;
        border: 0 !important;
        background: transparent !important;
        vertical-align: middle !important;
        height: auto !important;
    }
    table.flg-pill-table tbody td:first-child {
        padding-left: 14px !important;
    }
    table.flg-pill-table tbody td:last-child {
        padding-right: 10px !important;
    }
    table.flg-pill-table tbody td .order-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
    }
    table.flg-pill-table tbody td .order_date {
        font-size: 10px !important;
        line-height: 1.15 !important;
        display: block;
        margin-top: 1px;
    }
    table.flg-pill-table tbody td .order-num {
        margin: 0;
    }
    table.flg-pill-table tbody td .badge {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    table.flg-pill-table tbody td.flg-pill-table__cell--product {
        /* Keep display:table-cell — grid on <td> breaks column width sync with <th> */
        min-width: 0;
        overflow: hidden;
    }
    table.flg-pill-table tbody td.flg-pill-table__cell--product img.tbl_img {
        float: left;
        width: var(--flg-pill-thumb) !important;
        height: var(--flg-pill-thumb) !important;
        object-fit: cover;
        border-radius: 8px;
        margin: 0 8px 0 0;
    }
    table.flg-pill-table tbody td.flg-pill-table__cell--product > a {
        display: block;
        overflow: hidden;
        min-width: 0;
    }
    table.flg-pill-table tbody td.flg-pill-table__cell--product .order-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    table.flg-pill-table tbody td.flg-pill-table__cell--product .order-num {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ----------------------------------------------------------------------------
   LIQUID CHROME — polished-metal variant of the glass system (reusable)
   ----------------------------------------------------------------------------
   A solid chrome pill instead of frosted glass: neutral grey, a reflective
   conic rim (bright top-left → heavy dark bottom-right) and a glossy near-opaque
   cavity. The "liquid chrome" look used on the user-app sidebar nav.

   Usage:
     <button class="liquid-chrome">Label</button>              (capsule)
     <a class="liquid-chrome liquid-chrome--strong">…</a>       (heavier accent)
     <button class="liquid-chrome liquid-chrome--round">…</button> (icon button)

   Two stacked pseudo-layers paint the metal:
     ::before = the reflective chrome RIM (conic sweep of bright/dark bands)
     ::after  = the glossy grey glass CAVITY inside the rim
   The `inset` on ::after is the rim thickness.
   --------------------------------------------------------------------------- */
.liquid-chrome,
.chrome-pill,                            /* chrome-pill = saved silver small pill (see aliases below) */
.rg-chrome {                              /* rg-chrome = saved rose-gold small pill (see aliases below) */
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 60px;
    padding: 0 22px;
    border: 0;
    border-radius: 26px;
    box-sizing: border-box;
    background: transparent;
    color: #000;
    font-weight: 700;
    cursor: pointer;
    overflow: visible;
    transition: transform var(--glass-transition);
}
.liquid-chrome:focus,
.liquid-chrome:focus-visible,
.liquid-chrome:active,
.chrome-pill:focus,
.chrome-pill:focus-visible,
.chrome-pill:active,
.rg-chrome:focus,
.rg-chrome:focus-visible,
.rg-chrome:active { outline: none; }
.liquid-chrome:hover,
.chrome-pill:hover,
.rg-chrome:hover { transform: translateX(2px); }

.liquid-chrome::before,
.chrome-pill::before,
.rg-chrome::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(from 0deg at 50% 42%,
        #ffffff 0deg, #dfe0e2 22deg, #b9bbbf 52deg, #8b8e92 92deg,
        #565a5e 132deg,                 /* darkest band → bottom-right */
        #808387 158deg, #b4b6ba 192deg, #ededee 230deg,
        #ffffff 270deg, #cfd1d4 312deg, #f2f3f4 340deg, #ffffff 360deg);
    box-shadow:
        0 9px 18px rgba(0, 0, 0, 0.22),
        0 2px 5px rgba(0, 0, 0, 0.19),
        inset 2px 2px 2px rgba(255, 255, 255, 0.95),   /* bright top-left lip */
        inset -4px -5px 6px rgba(0, 0, 0, 0.46),         /* thick dark bottom-right rim */
        inset -1px -1px 1px rgba(0, 0, 0, 0.36);
    transition: box-shadow var(--glass-transition), background var(--glass-transition);
}
.liquid-chrome::after,
.chrome-pill::after,
.rg-chrome::after {
    content: "";
    position: absolute;
    inset: 2.5px;                        /* gap = rim thickness (halved) */
    z-index: -1;
    border-radius: 23.5px;               /* outer radius − inset */
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(238, 238, 238, 0.94) 42%,
        rgba(250, 250, 250, 0.92) 60%,
        rgba(224, 224, 224, 0.96) 100%);
    box-shadow:
        inset 0 2px 5px rgba(139, 139, 139, 0.34),
        inset -3px -4px 6px rgba(123, 123, 123, 0.30),
        inset 0 -2px 4px rgba(255, 255, 255, 0.95);
    transition: background var(--glass-transition);
}
.liquid-chrome:hover::before,
.liquid-chrome:focus::before,
.chrome-pill:hover::before,
.chrome-pill:focus::before {
    box-shadow:
        0 11px 22px rgba(0, 0, 0, 0.24),
        0 3px 6px rgba(0, 0, 0, 0.19),
        inset 2px 2px 2px rgba(255, 255, 255, 1),
        inset -5px -6px 7px rgba(0, 0, 0, 0.50),
        inset -1px -1px 1px rgba(0, 0, 0, 0.40);
}

/* Round icon-button variant (e.g. collapsed rail) */
.liquid-chrome--round {
    width: 60px;
    padding: 0;
    border-radius: 50%;
}
.liquid-chrome--round::before { border-radius: 50%; }
.liquid-chrome--round::after  { border-radius: 50%; inset: 2px; }

/* Heavier "strong" accent — brighter top-left + deeper dark rim */
.liquid-chrome--strong::before {
    background: conic-gradient(from 0deg at 50% 42%,
        #ffffff 0deg, #e3e4e6 22deg, #bdbfc3 52deg, #8f9296 92deg,
        #4f5357 132deg, #7c7f83 158deg, #b2b4b8 192deg, #f0f0f1 230deg,
        #ffffff 270deg, #d2d4d7 312deg, #f4f5f6 340deg, #ffffff 360deg);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.26),
        0 3px 7px rgba(0, 0, 0, 0.21),
        inset 2px 2px 2px rgba(255, 255, 255, 1),
        inset -5px -6px 7px rgba(0, 0, 0, 0.51),
        inset -1px -1px 1px rgba(0, 0, 0, 0.40);
}
.liquid-chrome--strong::after {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(242, 242, 242, 0.97) 42%,
        rgba(255, 255, 255, 0.95) 60%,
        rgba(228, 228, 228, 0.98) 100%);
    box-shadow:
        inset 0 2px 6px rgba(131, 131, 131, 0.37),
        inset -3px -4px 6px rgba(119, 119, 119, 0.34),
        inset 0 -2px 5px rgba(255, 255, 255, 1);
}

/* Small pill variant — 46px height to sit inline with tab pills / inputs */
.liquid-chrome--sm,
.chrome-pill,
.rg-chrome {
    height: 46px;
    padding: 0 20px;
    border-radius: 16px;
}
.liquid-chrome--sm::after,
.chrome-pill::after,
.rg-chrome::after { inset: 2px; border-radius: 14px; }

/* Rose-gold finish — warm copper/pink metal instead of neutral silver.
   Overrides only the rim conic-gradient + cavity tint + label colour; the
   pseudo-layer geometry is inherited from .liquid-chrome. */
.liquid-chrome--rose,
.rg-chrome { color: #5a342a; }
.liquid-chrome--rose::before,
.rg-chrome::before {
    background: conic-gradient(from 0deg at 50% 42%,
        #fff3ee 0deg, #f6d8cb 22deg, #e9b6a4 52deg, #d39685 92deg,
        #9c6a5b 132deg,                  /* darkest band → bottom-right */
        #c78f7e 158deg, #e3b3a2 192deg, #f6dccf 230deg,
        #fff4ef 270deg, #edc3b4 312deg, #f8e2d8 340deg, #fff3ee 360deg);
    box-shadow:
        0 9px 18px rgba(90, 40, 30, 0.22),
        0 2px 5px rgba(90, 40, 30, 0.19),
        inset 2px 2px 2px rgba(255, 250, 247, 0.95),
        inset -4px -5px 6px rgba(110, 55, 40, 0.46),
        inset -1px -1px 1px rgba(110, 55, 40, 0.36);
}
.liquid-chrome--rose::after,
.rg-chrome::after {
    background: linear-gradient(180deg,
        rgba(255, 248, 244, 0.99) 0%,
        rgba(248, 226, 217, 0.94) 42%,
        rgba(252, 238, 231, 0.92) 60%,
        rgba(240, 212, 200, 0.96) 100%);
    box-shadow:
        inset 0 2px 5px rgba(168, 120, 105, 0.34),
        inset -3px -4px 6px rgba(150, 100, 86, 0.30),
        inset 0 -2px 4px rgba(255, 248, 244, 0.95);
}
.liquid-chrome--rose:hover::before,
.liquid-chrome--rose:focus::before,
.rg-chrome:hover::before,
.rg-chrome:focus::before {
    box-shadow:
        0 11px 22px rgba(90, 40, 30, 0.24),
        0 3px 6px rgba(90, 40, 30, 0.19),
        inset 2px 2px 2px rgba(255, 252, 250, 1),
        inset -5px -6px 7px rgba(110, 55, 40, 0.50),
        inset -1px -1px 1px rgba(110, 55, 40, 0.40);
}

/* --- SAVED PRESETS: .chrome-pill (silver) & .rg-chrome (rose-gold) -----------
   Two saved one-class pill presets, both 46px tall (= --sm):
     .chrome-pill = liquid-chrome (neutral silver metal) + --sm
     .rg-chrome   = liquid-chrome + --sm + --rose (warm copper/pink rim, cavity
                    & label)
   Each preset is implemented as an ALIAS — its selector is woven into the
   chrome rule lists above (and the rose-gold lists below for rg-chrome) rather
   than duplicated, so both stay in sync if the chrome recipe is tweaked.
   Usage:  <a class="chrome-pill">Label</a>   |   <a class="rg-chrome">Label</a>
   --------------------------------------------------------------------------- */

/* ============================================================================
   2. APPLY THE SYSTEM TO THE USER-APP SIDEBAR
   ============================================================================ */

/* --- 2a. Sidebar shell: frosted liquid glass (Principle 1 — Refraction) ---
   Override the opaque bg-night-sky gradient with a translucent dark-blue glass
   so what scrolls behind the fixed sidebar is blurred/saturated through it. */
.app-sidebar.bg-night-sky.app-sidebar--dark {
    background:
        linear-gradient(135deg, rgba(30, 60, 114, 0.58) 0%, rgba(42, 82, 152, 0.42) 100%) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-right: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
}

/* Layered translucent gradients + soft specular highlight (light refraction).
   pointer-events:none + negative paint order keeps nav fully clickable. */
.app-sidebar.app-sidebar--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 55% at 0% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 58%),
        radial-gradient(90% 40% at 100% 100%, rgba(108, 160, 255, 0.14), rgba(108, 160, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 28%);
}
/* Thin luminous vertical sheen along the right edge (specular highlight) */
.app-sidebar.app-sidebar--dark::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 18%,
        rgba(255, 255, 255, 0.10) 60%,
        rgba(255, 255, 255, 0) 100%);
}

/* Keep the real chrome above the decorative layers */
.app-sidebar--header,
.app-sidebar--content,
.app-sidebar .sidebar__footer {
    position: relative;
    z-index: 1;
}

/* --- 2a2. Sidebar bottom dock (Calendar / Support / Messages) --- */
.app-sidebar--content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.app-sidebar--content .sidebar-navigation {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.app-sidebar--content .sidebar-dock {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.10));
}
.app-sidebar--content .sidebar-dock__btn {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #2b2f45;
    z-index: 0;
}
.app-sidebar--content .sidebar-dock__btn i {
    position: relative;
    z-index: 1;
    font-size: 15px;
    line-height: 1;
}
.app-sidebar--content .sidebar-dock__btn.is-active {
    color: var(--glass-primary, #3c44b1);
}
.app-sidebar--content .sidebar-dock__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e0556b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(224, 85, 107, 0.45);
}
#app-top.sidebar-collapsed .app-sidebar--content .sidebar-dock {
    flex-direction: column;
    gap: 8px;
    padding: 10px 6px 14px;
}
#app-top.sidebar-collapsed .app-sidebar--content .sidebar-dock__btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
}
#app-top.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-dock__btn i {
    font-size: 14px;
}

/* --- 2b. Header / logo area — light glass chrome (related chrome) --- */
.app-sidebar.app-sidebar--dark .app-sidebar--header {
    background: var(--glass-bg-light) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid var(--glass-border);
}
.app-sidebar.app-sidebar--dark .app-sidebar--header:after { display: none; }
/* Toggle button keeps a subtle glass face but stays fully functional */
.app-sidebar .toggle-sidebar {
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: 0 2px 10px rgba(7, 9, 25, 0.35);
}

/* --- 2c. Nav items: animated lensed glass pills (Principle 2 — Responsive) ---
   Neutralize the old flat dark hover/active fill and the 0px radius, then build
   the pill via ::before painted BEHIND the icon/label (z-index:-1). */
.app-sidebar--dark .sidebar-navigation ul a,
.app-sidebar--dark .sidebar-navigation ul a:hover,
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a {
    background: transparent !important;   /* never let the theme's solid fill show */
    border-radius: var(--glass-radius) !important;
    /* Match the 11px horizontal padding of the inactive pills so the ACTIVE
       item's icon/label line up in the same column (legacy usama.css
       `li.mm-active > a { padding: 5px 20px }` was shifting it right by ~9px). */
    padding-left: 11px !important;
    padding-right: 11px !important;
}
.app-sidebar--dark .sidebar-navigation ul a {
    position: relative;
    z-index: 0;
    margin: 3px clamp(8px, 1vw, 12px);
    overflow: visible;
    transition: transform var(--glass-transition);
}
.app-sidebar--dark .sidebar-navigation ul a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glass-pill-bg);
    border: 1px solid transparent;
    box-shadow: var(--glass-pill-shadow);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--glass-transition), transform var(--glass-transition),
                background var(--glass-transition), border-color var(--glass-transition);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(150%);
}
/* Hover / keyboard-focus reveal the glass pill */
.app-sidebar--dark .sidebar-navigation ul a:hover::before,
.app-sidebar--dark .sidebar-navigation ul a:focus::before {
    opacity: 1;
    transform: scale(1);
}
.app-sidebar--dark .sidebar-navigation ul a:hover {
    transform: translateX(2px);
}

/* (Legacy blue "lensed" active pill removed — superseded by the chrome rules
   below, which are intentionally pinned to the LAST item (SIGN OUT) so the dark
   chrome accent sits at the bottom of the menu rather than on the active page.) */

/* --- 2d. Legible text + icons over glass (contrast) --- */
.app-sidebar--dark .sidebar-navigation ul a span.main-txt {
    color: var(--glass-text-dim) !important;
    transition: color var(--glass-transition);
}
.app-sidebar--dark .sidebar-navigation ul a:hover span.main-txt,
.app-sidebar--dark .sidebar-navigation ul a:focus span.main-txt {
    color: var(--glass-text) !important;
}
.app-sidebar--dark .sidebar-navigation ul a:hover span img.card_new-img {
    filter: contrast(0.85) drop-shadow(0 2px 6px rgba(108, 160, 255, 0.55));
    opacity: 1;
}

/* --- 2e. "NEW" badge restyled as a luminous glass chip --- */
.app-sidebar .sidebar-navigation .badge,
.app-sidebar .sidebar-navigation .badge-primary {
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.95), rgba(76, 129, 222, 0.92)) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px !important;
    padding: 3px 9px !important;
    font-size: 0.62rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(76, 129, 222, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

/* --- 2f. Bottom icon bar — light glass chrome (related chrome) --- */
.app-sidebar .sidebar__footer {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    border-top: 1px solid var(--glass-border);
}
.app-sidebar .sidebar-footer-menu li a {
    transition: color var(--glass-transition), transform var(--glass-transition);
}
.app-sidebar .sidebar-footer-menu li a:hover {
    color: #fff !important;
    transform: translateY(-2px);
    filter: drop-shadow(0 2px 6px rgba(108, 160, 255, 0.6));
}

/* --- 2g. Frosted PerfectScrollbar thumb to match the glass --- */
.app-sidebar--content .ps__thumb-y,
.app-sidebar--content .ps__rail-y .ps__thumb-y {
    background: rgba(255, 255, 255, 0.35) !important;
    border-radius: 999px;
}

/* --- 2h. LIGHT PANEL OVERRIDE — flat #FDFDFD sidebar, #000 text + icons ------
   Per request: the WHOLE side panel uses a plain #FDFDFD background and every
   label/icon is pure black. Placed last in Section 2 so it wins over 2a–2g. */
.app-sidebar.bg-night-sky.app-sidebar--dark {
    background: #FDFDFD !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-right: 1px solid #e6e6e6;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
}
/* Drop the decorative blue/white refraction tints so the panel stays pure white */
.app-sidebar.app-sidebar--dark::before { display: none; }
.app-sidebar.app-sidebar--dark::after { background: #ececec; }

/* Header + footer share the same #FDFDFD face */
.app-sidebar.app-sidebar--dark .app-sidebar--header {
    background: #FDFDFD !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 1px solid #ececec;
}
.app-sidebar .sidebar__footer {
    background: #FDFDFD !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-top: 1px solid #ececec;
}

/* Hide legacy sidebar footer icons (activity/bell/calendar) — notifications live
   in the header top-right cluster (.app-header-notifications) instead. */
.app-sidebar .sidebar__footer {
    display: none !important;
}

/* --- Header notification cluster (top-right: truck, messages, bell) --- */
.app-header {
    justify-content: space-between;
    align-items: center;
}
.app-header-notifications {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin-left: auto;
}
.app-header-notifications .hdr-notify-btn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 4px 14px rgba(15, 23, 53, 0.10);
    color: #1c2333;
    font-size: 1.05rem;
    line-height: 1;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.app-header-notifications .hdr-notify-btn:hover,
.app-header-notifications .hdr-notify-btn:focus {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 18px rgba(15, 23, 53, 0.14);
    color: var(--glass-primary, #4c81de);
    outline: none;
}
.app-header-notifications .hdr-notify-btn--track { color: #c47a00; }
.app-header-notifications .hdr-notify-btn--messages { color: #1e8e3e; }
.app-header-notifications .hdr-notify-btn--bell-active { color: #3b7ddd; }
.app-header-notifications .hdr-notify-btn--bell-clear {
    color: #1e8e3e;
    width: 36px;
    height: 36px;
    font-size: 0.88rem;
}
.tooltip-notify-compact .tooltip-inner {
    padding: 0.2rem 0.45rem;
    font-size: 0.68rem;
    line-height: 1.25;
    max-width: 160px;
}

/* Header notification bell tooltip — brand accent (matches hdr-notify-badge #e0556b) */
.tooltip-notify-brand.show {
    opacity: 1;
}
.tooltip-notify-brand .tooltip-inner {
    background: #e0556b;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(224, 85, 107, 0.35);
}
.tooltip-notify-brand.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.tooltip-notify-brand.bs-tooltip-top .arrow::before {
    border-top-color: #e0556b;
}
.tooltip-notify-brand.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.tooltip-notify-brand.bs-tooltip-right .arrow::before {
    border-right-color: #e0556b;
}
.tooltip-notify-brand.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.tooltip-notify-brand.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #e0556b;
}
.tooltip-notify-brand.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.tooltip-notify-brand.bs-tooltip-left .arrow::before {
    border-left-color: #e0556b;
}
.app-header-notifications .hdr-notify-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 2;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a90, #e0556b);
    border: 2px solid #fff;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(224, 85, 107, 0.45);
}
.app-header-notifications .user-box {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* Compact App Store + Google Play badges (header + install page) */
.xrg-store-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.xrg-store-badges__link {
    display: inline-flex;
    line-height: 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 53, 0.08);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.xrg-store-badges__link:hover,
.xrg-store-badges__link:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 53, 0.14);
    outline: none;
}
.xrg-store-badges__link img {
    display: block;
    width: auto;
    height: 28px;
}
.xrg-store-badges--md .xrg-store-badges__link img {
    height: 34px;
}
.xrg-store-badges--header {
    margin-right: 4px;
}
.xrg-store-badges--sm .xrg-store-badges__link img,
.xrg-store-badges--header .xrg-store-badges__link img {
    height: 24px;
}
@media (max-width: 767.98px) {
    .app-header-notifications { gap: 0.25rem; }
    .app-header-notifications .hdr-notify-btn {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }
    .app-header-notifications .hdr-notify-btn--bell-clear {
        width: 34px;
        height: 34px;
        font-size: 0.82rem;
    }
    .app-header-notifications .user-box {
        margin-left: 0.35rem;
        padding-left: 0.35rem;
    }
    .amaran-wrapper.top.right {
        top: 64px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
    }
}

/* --- Header bell notification popover (FLG) --- */
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover) {
    --glass-notify-bg:      rgba(255, 255, 255, 0);
    --glass-notify-blur:    64px;
    --glass-notify-border:  rgba(255, 255, 255, 0.1);
    --glass-notify-arrow:   rgba(248, 250, 255, 0.2);

    max-width: 380px;
    border: 1px solid var(--glass-notify-border);
    border-radius: 18px;
    background: var(--glass-notify-bg);
    -webkit-backdrop-filter: blur(var(--glass-notify-blur));
            backdrop-filter: blur(var(--glass-notify-blur));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 16px 40px rgba(15, 23, 53, 0.12),
        0 4px 12px rgba(15, 23, 53, 0.06);
    overflow: hidden;
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover) .popover-body {
    padding: 0.85rem 1rem 1rem;
    background: transparent;
    border: 0;
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).hdr-notify-popover--closing {
    opacity: 0;
    max-height: 0 !important;
    margin-top: 0 !important;
    transform: scaleY(0.72) translateY(-6px);
    transform-origin: top center;
    pointer-events: none;
    transition:
        opacity 400ms ease,
        max-height 400ms ease,
        transform 400ms ease,
        margin 400ms ease;
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).hdr-notify-popover--closing > .arrow {
    opacity: 0;
    transition: opacity 250ms ease;
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).hdr-notify-popover--closing .popover-body {
    padding-top: 0;
    padding-bottom: 0;
    transition: padding 400ms ease;
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-bottom > .arrow::before,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-auto[x-placement^="bottom"] > .arrow::before {
    border-bottom-color: var(--glass-notify-border);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-bottom > .arrow::after,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-auto[x-placement^="bottom"] > .arrow::after {
    border-bottom-color: var(--glass-notify-arrow);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-top > .arrow::before,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-auto[x-placement^="top"] > .arrow::before {
    border-top-color: var(--glass-notify-border);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-top > .arrow::after,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-auto[x-placement^="top"] > .arrow::after {
    border-top-color: var(--glass-notify-arrow);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-left > .arrow::before,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-auto[x-placement^="left"] > .arrow::before {
    border-left-color: var(--glass-notify-border);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-left > .arrow::after,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-auto[x-placement^="left"] > .arrow::after {
    border-left-color: var(--glass-notify-arrow);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-right > .arrow::before,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-auto[x-placement^="right"] > .arrow::before {
    border-right-color: var(--glass-notify-border);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-right > .arrow::after,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover).bs-popover-auto[x-placement^="right"] > .arrow::after {
    border-right-color: var(--glass-notify-arrow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover) {
        background: #fafbfd;
    }
}

/* --- Header account / profile popover (FLG) --- */
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover) {
    --glass-account-bg: rgba(255, 255, 255, 0.72);
    --glass-account-blur: 28px;
    --glass-account-border: rgba(255, 255, 255, 0.65);
    --glass-account-ink: #1f2d5a;
    --glass-account-muted: rgba(31, 45, 90, 0.62);
    --glass-account-accent: #e0556b;

    min-width: 240px;
    max-width: 280px;
    border: 1px solid var(--glass-account-border);
    border-radius: 1rem;
    background: var(--glass-account-bg);
    -webkit-backdrop-filter: blur(var(--glass-account-blur)) saturate(180%);
            backdrop-filter: blur(var(--glass-account-blur)) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 14px 36px rgba(7, 9, 25, 0.16),
        0 4px 12px rgba(7, 9, 25, 0.06);
    overflow: hidden;
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover) .popover-body {
    padding: 0;
    background: transparent;
    border: 0;
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover).bs-popover-bottom > .arrow::before,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover).bs-popover-auto[x-placement^="bottom"] > .arrow::before {
    border-bottom-color: rgba(255, 255, 255, 0.45);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover).bs-popover-bottom > .arrow::after,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover).bs-popover-auto[x-placement^="bottom"] > .arrow::after {
    border-bottom-color: rgba(255, 255, 255, 0.82);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover).bs-popover-top > .arrow::before,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover).bs-popover-auto[x-placement^="top"] > .arrow::before {
    border-top-color: rgba(255, 255, 255, 0.45);
}
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover).bs-popover-top > .arrow::after,
.popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover).bs-popover-auto[x-placement^="top"] > .arrow::after {
    border-top-color: rgba(255, 255, 255, 0.82);
}

.hdr-account-popover {
    padding: 0.85rem 0.9rem 0.75rem;
    font-family: 'Poppins', sans-serif;
}
.hdr-account-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.hdr-account-popover__title {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--glass-account-muted, rgba(31, 45, 90, 0.62));
}
.hdr-account-popover__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    color: #fff !important;
    background: linear-gradient(135deg, #4c81de 0%, #1f2d5a 100%);
    box-shadow: 0 4px 12px rgba(76, 129, 222, 0.28);
    text-decoration: none !important;
    font-size: 0.7rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hdr-account-popover__edit:hover {
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(76, 129, 222, 0.36);
}
.hdr-account-popover__user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.7rem;
    margin-bottom: 0.65rem;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 248, 255, 0.78) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 6px 16px rgba(31, 45, 90, 0.08);
}
.hdr-account-popover__avatar {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 4px 10px rgba(31, 45, 90, 0.18);
}
.hdr-account-popover__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hdr-account-popover__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.hdr-account-popover__name {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--glass-account-ink, #1f2d5a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hdr-account-popover__email {
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--glass-account-muted, rgba(31, 45, 90, 0.62));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hdr-account-popover__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.hdr-account-popover__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--glass-account-ink, #1f2d5a) !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.hdr-account-popover__link i {
    width: 1rem;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(31, 45, 90, 0.55);
    transition: color 0.16s ease;
}
.hdr-account-popover__link:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 6px 16px rgba(31, 45, 90, 0.1);
    transform: translateY(-1px);
    color: var(--glass-account-ink, #1f2d5a) !important;
    text-decoration: none !important;
}
.hdr-account-popover__link:hover i {
    color: #4c81de;
}
.hdr-account-popover__link--danger:hover {
    background: linear-gradient(135deg, rgba(224, 85, 107, 0.12), rgba(224, 85, 107, 0.06));
    border-color: rgba(224, 85, 107, 0.28);
    color: #c93f58 !important;
}
.hdr-account-popover__link--danger:hover i {
    color: #e0556b;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover) {
        background: #f7f9fc;
    }
}

@media (max-width: 767.98px) {
    .popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover) {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top, 0px) + 6px) !important;
        left: auto !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        transform: none !important;
        width: min(92vw, 280px);
        max-width: min(92vw, 280px);
    }
    .popover.popover-secondary.popover-custom-wrapper:has(.hdr-account-popover) > .arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hdr-account-popover__edit,
    .hdr-account-popover__link {
        transition: none;
    }
    .hdr-account-popover__edit:hover,
    .hdr-account-popover__link:hover {
        transform: none;
    }
}

/* Mobile: pin the popover as a fixed, right-aligned panel under the header
   instead of letting Popper's computed transform push it off a 360px
   viewport. Width is capped so it never overflows the screen. */
@media (max-width: 767.98px) {
    .popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover) {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top, 0px) + 6px) !important;
        left: auto !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: auto !important;
        transform: none !important;
        width: min(92vw, 360px);
        max-width: min(92vw, 360px);
        max-height: calc(100vh - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
        overflow-y: auto;
        margin: 0;
    }
    .popover.popover-secondary.popover-custom-wrapper:has(.hdr-notify-popover) > .arrow {
        display: none;
    }
}

.hdr-notify-popover {
    min-width: 280px;
    max-width: 360px;
}
@media (max-width: 767.98px) {
    .hdr-notify-popover {
        min-width: 0;
        max-width: 100%;
    }
}
.hdr-notify-popover__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0.2rem 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 53, 0.07);
    margin-bottom: 0.45rem;
}
.hdr-notify-popover__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.96);
}
.hdr-notify-popover__mark-all {
    border: 0;
    background: transparent;
    color: #e0556b;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0;
    cursor: pointer;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.hdr-notify-popover__mark-all:hover {
    color: #c93d54;
    opacity: 0.9;
}
.hdr-notify-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 53, 0.18) transparent;
}
.hdr-notify-list::-webkit-scrollbar {
    width: 5px;
}
.hdr-notify-list::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 53, 0.16);
    border-radius: 999px;
}
.hdr-notify-list__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.62rem 0.45rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.hdr-notify-list__item:hover {
    background: rgba(15, 23, 53, 0.1);
    transform: translateX(1px);
}
.hdr-notify-list__item + .hdr-notify-list__item {
    margin-top: 0.1rem;
}
.hdr-notify-list__icon {
    --notify-accent: #5b6abf;
    --notify-accent-bg: rgba(91, 106, 191, 0.12);
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--notify-accent-bg);
    color: var(--notify-accent);
    font-size: 0.82rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.hdr-notify-list__icon--order       { --notify-accent: #5b6abf; --notify-accent-bg: rgba(91, 106, 191, 0.14); }
.hdr-notify-list__icon--cutting     { --notify-accent: #e0556b; --notify-accent-bg: rgba(224, 85, 107, 0.14); }
.hdr-notify-list__icon--sublimation { --notify-accent: #9b59b6; --notify-accent-bg: rgba(155, 89, 182, 0.14); }
.hdr-notify-list__icon--stitching   { --notify-accent: #1a9b8a; --notify-accent-bg: rgba(26, 155, 138, 0.14); }
.hdr-notify-list__icon--qc          { --notify-accent: #2d9e4f; --notify-accent-bg: rgba(45, 158, 79, 0.14); }
.hdr-notify-list__icon--packing     { --notify-accent: #d4880a; --notify-accent-bg: rgba(212, 136, 10, 0.14); }
.hdr-notify-list__icon--shipped     { --notify-accent: #3b7ddd; --notify-accent-bg: rgba(59, 125, 221, 0.14); }
.hdr-notify-list__icon--chat        { --notify-accent: #1e8e3e; --notify-accent-bg: rgba(30, 142, 62, 0.12); }
.hdr-notify-list__icon--default     { --notify-accent: #6b7280; --notify-accent-bg: rgba(107, 114, 128, 0.12); }
.hdr-notify-list__icon--roster-change {
    --notify-accent: #e0556b;
    --notify-accent-bg: linear-gradient(135deg, rgba(76, 129, 222, 0.18), rgba(224, 85, 107, 0.2));
    background: var(--notify-accent-bg);
    color: #e0556b;
    box-shadow: inset 0 0 0 1px rgba(224, 85, 107, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.hdr-notify-list__icon--payment {
    --notify-accent: #c2410c;
    --notify-accent-bg: rgba(194, 65, 12, 0.12);
    color: #c2410c;
    box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Roster-change action rows — distinct from milestone / chat */
.hdr-notify-list__item.notif--roster-change,
.hdr-notify-list__item--roster-change {
    position: relative;
    padding: 0.7rem 0.55rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(76, 129, 222, 0.08), rgba(224, 85, 107, 0.1));
    border: 1px solid rgba(224, 85, 107, 0.28);
    box-shadow: inset 3px 0 0 #e0556b;
}
.hdr-notify-list__item.notif--roster-change:hover,
.hdr-notify-list__item--roster-change:hover {
    background: linear-gradient(135deg, rgba(76, 129, 222, 0.12), rgba(224, 85, 107, 0.14));
    border-color: rgba(224, 85, 107, 0.4);
}
.hdr-notify-list__item.notif--roster-change.is-action-required {
    animation: notif-roster-pulse 2.4s ease-in-out infinite;
}
.hdr-notify-list__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-bottom: 0.28rem;
}
.hdr-notify-list__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}
.hdr-notify-list__pill--roster {
    color: #3c44b1;
    background: rgba(76, 129, 222, 0.16);
    border: 1px solid rgba(76, 129, 222, 0.35);
}
.hdr-notify-list__pill--action {
    color: #fff;
    background: #e0556b;
    border: 1px solid #e0556b;
}
.hdr-notify-list__pill--payment {
    color: #9a3412;
    background: rgba(194, 65, 12, 0.12);
    border: 1px solid rgba(194, 65, 12, 0.3);
}
.hdr-notify-list__item.notif--payment,
.hdr-notify-list__item--payment {
    position: relative;
    padding: 0.7rem 0.55rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(194, 65, 12, 0.08));
    border: 1px solid rgba(194, 65, 12, 0.22);
    box-shadow: inset 3px 0 0 #c2410c;
}
.hdr-notify-list__item.notif--payment:hover,
.hdr-notify-list__item--payment:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(194, 65, 12, 0.12));
    border-color: rgba(194, 65, 12, 0.35);
}
@keyframes notif-roster-pulse {
    0%, 100% { box-shadow: inset 3px 0 0 #e0556b, 0 0 0 0 rgba(224, 85, 107, 0); }
    50% { box-shadow: inset 3px 0 0 #e0556b, 0 0 0 3px rgba(224, 85, 107, 0.12); }
}

.milestone-login-toast-panel__item--roster-change,
.milestone-login-toast-panel__item.notif--roster-change {
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(76, 129, 222, 0.1), rgba(224, 85, 107, 0.12));
    border: 1px solid rgba(224, 85, 107, 0.3);
    box-shadow: inset 3px 0 0 #e0556b;
}
.milestone-login-toast-panel__item--roster-change .hdr-notify-list__tags,
.milestone-login-toast-panel__item.notif--roster-change .hdr-notify-list__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-bottom: 0.25rem;
}
.milestone-login-toast-panel__item--roster-change .milestone-login-toast-panel__msg,
.milestone-login-toast-panel__item.notif--roster-change .milestone-login-toast-panel__msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hdr-notify-list__body {
    flex: 1;
    min-width: 0;
    padding-top: 0.05rem;
}
.hdr-notify-list__msg {
    display: block;
    font-size: 0.79rem;
    line-height: 1.4;
    color: #0a0e14;
    font-weight: 600;
}
.hdr-notify-list__time {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.67rem;
    color: rgba(15, 23, 42, 0.72);
    letter-spacing: 0.01em;
}
.hdr-notify-list__empty {
    padding: 1rem 0.45rem;
    font-size: 0.78rem;
    color: rgba(15, 23, 42, 0.68);
    text-align: center;
}
@media (max-width: 767.98px) {
    .hdr-notify-popover__head {
        padding: 0.1rem 0.15rem 0.65rem;
    }
    .hdr-notify-popover__mark-all {
        /* Visual size stays compact; negative margin expands the tap target to 44px */
        min-height: 44px;
        padding: 0.7rem 0.4rem;
        margin: -0.7rem -0.4rem -0.7rem 0;
        display: inline-flex;
        align-items: center;
    }
    .hdr-notify-list {
        max-height: min(52vh, 320px);
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .hdr-notify-list__item {
        min-height: 44px;
        padding: 0.7rem 0.5rem;
    }
    .hdr-notify-list__msg {
        font-size: 0.82rem;
    }
    .hdr-notify-list__time {
        font-size: 0.72rem;
    }
}

/* --- Login slide-in milestone toast panel (FLG) --- */
.milestone-login-toast-panel {
    --glass-notify-bg:     rgba(255, 255, 255, 0);
    --glass-notify-blur:   64px;
    --glass-notify-border: rgba(255, 255, 255, 0.1);

    position: fixed;
    top: 72px;
    right: -420px;
    z-index: 1090;
    width: min(360px, calc(100vw - 24px));
    padding: 0.9rem 1rem 1rem;
    border-radius: 18px;
    background: var(--glass-notify-bg);
    -webkit-backdrop-filter: blur(var(--glass-notify-blur));
            backdrop-filter: blur(var(--glass-notify-blur));
    border: 1px solid var(--glass-notify-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 16px 40px rgba(15, 23, 53, 0.12),
        0 4px 12px rgba(15, 23, 53, 0.06);
    transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .milestone-login-toast-panel {
        background: #fafbfd;
    }
}
.milestone-login-toast-panel.is-visible {
    right: 16px;
}
.milestone-login-toast-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(15, 23, 53, 0.07);
}
.milestone-login-toast-panel__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.96);
}
.milestone-login-toast-panel__close {
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    color: rgba(28, 35, 51, 0.45);
    cursor: pointer;
    transition: color 0.18s ease;
}
.milestone-login-toast-panel__close:hover {
    color: #e0556b;
}
.milestone-login-toast-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 767.98px) {
    .milestone-login-toast-panel__close {
        /* Visual size stays compact; negative margin expands the tap target to 44px */
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: -0.6rem -0.6rem -0.6rem 0;
    }
    .milestone-login-toast-panel__list {
        max-height: calc(100vh - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 96px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
.milestone-login-toast-panel__item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.62rem 0.55rem;
    margin-bottom: 0.35rem;
    border-radius: 12px;
    background: rgba(15, 23, 53, 0.035);
    font-size: 0.78rem;
    line-height: 1.35;
    color: #0a0e14;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.18s ease;
}
.milestone-login-toast-panel__item .hdr-notify-list__icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
    border-radius: 9px;
}
.milestone-login-toast-panel__msg {
    flex: 1;
    min-width: 0;
    padding-top: 0.1rem;
}
.milestone-login-toast-panel__item.is-shown {
    opacity: 1;
    transform: translateX(0);
}
.milestone-login-toast-panel__item:hover {
    background: rgba(15, 23, 53, 0.1);
}
@media (max-width: 767.98px) {
    .milestone-login-toast-panel {
        top: calc(64px + env(safe-area-inset-top, 0px) + 6px);
        width: min(360px, calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    }
    .milestone-login-toast-panel.is-visible {
        right: max(8px, env(safe-area-inset-right, 0px));
    }
}

/* Brand logo art is white — render it black so it stays visible on white */
.app-sidebar--header .header__brand__image { filter: brightness(0); }
/* Collapse toggle: visible on the white header */
.app-sidebar .toggle-sidebar {
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    color: #000 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* All nav labels → black, Avenir Next Demi Bold, ALL CAPS (inactive + hover) */
.app-sidebar--dark .sidebar-navigation ul a span.main-txt,
.app-sidebar--dark .sidebar-navigation ul a:hover span.main-txt,
.app-sidebar--dark .sidebar-navigation ul a:focus span.main-txt {
    color: #000000 !important;
    font-family: "Avenir Next Condensed", "AvenirNextCondensed", "Avenir Next",
                 "Avenir", "Segoe UI", system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-stretch: condensed;
    font-size: 14.3px !important;   /* +10% over the prior 13px label */
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    text-shadow: none !important;
    /* Lay the label inline with the icon via the inner-span flexbox (below), so
       neutralize the legacy usama.css absolute-ish offsets (top/left). The icon
       + label now sit as one left-aligned row instead of being pushed right. */
    position: static !important;
    top: auto !important;
    left: auto !important;
    /* Vertical centering: drop the legacy line-box slack + any stray margin so
       the label's box centers cleanly on the icon (via `align-items:center` on
       the `a > span` row) and sits level in the middle of the 38px pill.
       Also DEFEAT the legacy `.main-li-new span { height:42px }` (usama.css) and
       `.sidebar-navigation ul a span { flex-direction:column }` (custom.css):
       those turned the label into a 42px-tall COLUMN box, floating the text to
       the top of the box (the reported "label sits above the icon" bug). Force a
       single-line, auto-height, left-aligned inline-flex box centered on the
       icon. */
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* Grow to fill the space left of the fixed 30px icon column and center the
       label within it, so the text reads centered in the pill while the icon
       stays pinned to the left. */
    flex: 1 1 auto !important;
    justify-content: center !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap;
}

/* All nav icons → solid black (inactive + hover) */
.app-sidebar--dark .sidebar-navigation ul a img.card_new-img,
.app-sidebar--dark .sidebar-navigation ul a:hover span img.card_new-img,
.app-sidebar--dark .sidebar-navigation ul a:focus span img.card_new-img {
    filter: brightness(0) !important;
    opacity: 1 !important;
    /* Lightened pass: ~20% smaller (38px -> 30px) to match the slimmer pill. */
    height: 30px !important;
    width: 30px !important;
    /* Fixed-width icon column: never shrink/grow so the glyph occupies an
       identical 30px slot on EVERY tab. Combined with the left-aligned row
       (below) this makes all labels start at the exact same x-position. */
    flex: 0 0 30px !important;
    /* Center the glyph within its 30x30 slot (was left-shifted): contain keeps
       the artwork centered in the box both horizontally and vertically. */
    object-fit: contain !important;
    -o-object-fit: contain !important;
    -o-object-position: center !important;
    object-position: center !important;
    display: block !important;
    /* Was `0 auto` (legacy column-layout centering). In the row flex the auto
       side-margins could absorb free space / muddy the 4px icon→text gap, so
       zero them out: the flex `gap:4px` on `a > span` is now the SOLE, reliable
       spacer between the icon and its label. No top/bottom margin so the glyph
       stays vertically centered against the label. */
    margin: 0 !important;
}
/* Font Awesome nav icons (e.g. DOWNLOAD APP) — same black idle / white active
   as the PNG glyphs above. FA uses `color`, not CSS filter invert. */
.app-sidebar--dark .sidebar-navigation ul a i.card_new-img-fa,
.app-sidebar--dark .sidebar-navigation ul a:hover span i.card_new-img-fa,
.app-sidebar--dark .sidebar-navigation ul a:focus span i.card_new-img-fa {
    color: #000000 !important;
    opacity: 1 !important;
    font-size: 18px !important;
    line-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    text-align: center !important;
}
/* Slimmer inner span to match the 48px pill (was 42px for the 60px pill).
   Flex ROW so the icon + label render as a single, vertically-centered cluster;
   the parent <a> (justify-content:center) then centers that cluster horizontally
   — replacing the old absolute-offset label placement. */
.app-sidebar--dark .sidebar-navigation ul a > span {
    /* Lightened pass: 32px to host the 30px icon + 13px label, kept vertically
       centered inside the slimmer ~38px pill (was 40px for the 38px icon). */
    height: 32px !important;
    /* Single, LEFT-ALIGNED icon+label row on ONE line.
       - flex-direction:row + align-items:center !important DEFEAT the legacy
         custom.css rule `.sidebar-navigation ul a span { flex-direction: column;
         align-items: left !important; }` which was stacking the label BELOW the
         icon (the reported "text dropped below the pill" bug).
       - width:100% + justify-content:flex-start (instead of the old centered
         cluster) pins the icon to the pill's left padding edge so every icon
         lines up in a column and every label starts at the same x.
       - main-txt already carries white-space:nowrap (above) so the label never
         wraps to a second line. */
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* Consistent icon -> label gap (clean, slightly roomier than the old 3px). */
    gap: 8px !important;
    white-space: nowrap;
}

/* ---- Polished-chrome "liquid glass" pill on EVERY tab (matches reference) ----
   Two stacked layers behind the icon/label:
     ::before = the thick metallic chrome rim (banded silver gradient + lift)
     ::after  = the translucent glass cavity inside the rim (glossy reflection) */
.app-sidebar--dark .sidebar-navigation ul a {
    border-radius: 17px !important;
    margin: 5px 12px !important;
    /* Uniform height for EVERY tab regardless of label/active state. The fixed
       height + border-box keeps all pills identical across every viewport.
       Lightened pass: scaled down a further ~20% (48px -> 38px) for a slimmer,
       lighter pill. */
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    /* Left-align the icon+label row so icons form a column and all labels start
       at the same x (was center, which floated each cluster to a different x). */
    justify-content: flex-start !important;
    overflow: visible;
}
.app-sidebar--dark .sidebar-navigation ul a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    opacity: 1;
    transform: none;
    border: none;
    /* Neutral (no-blue) polished chrome: bright top-left → heavy dark bottom-right.
       Diagonal so the thick dark chrome lands on the RIGHT + BOTTOM edges. */
    /* Polished-chrome ring: conic sweep of bright/dark bands reflects off every
       edge (bright top + left, darkest toward the bottom-right). */
    background: conic-gradient(from 0deg at 50% 42%,
        #ffffff 0deg,
        #e5e6e8 22deg,
        #c6c8cc 52deg,
        #9fa2a6 92deg,
        #74777b 132deg,
        #94979b 158deg,
        #bfc1c5 192deg,
        #efeff0 230deg,
        #ffffff 270deg,
        #d7d9dc 312deg,
        #f4f5f6 340deg,
        #ffffff 360deg);
    /* Lightened pass: smaller drop shadow + thinner, paler dark rims so the pill
       reads as a light capsule instead of a heavy 3D button. */
    box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.08),
        inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.9),  /* bright top-left lip   */
        inset -2px -2px 4px rgba(0, 0, 0, 0.16),          /* thinner, lighter bottom-right rim */
        inset -1px -1px 1px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transition: box-shadow var(--glass-transition), background var(--glass-transition);
}
.app-sidebar--dark .sidebar-navigation ul a::after {
    content: "";
    position: absolute;
    inset: 1.5px;                     /* halved rim — even lighter chrome edge */
    z-index: -1;
    border-radius: 15.5px;
    pointer-events: none;
    /* Neutral grey glass cavity (no blue tint). Kept near-opaque so the conic
       chrome ring behind it never bleeds a dark spot through the centre. */
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(238, 238, 238, 0.94) 42%,
        rgba(250, 250, 250, 0.92) 60%,
        rgba(224, 224, 224, 0.96) 100%);
    box-shadow:
        inset 0 1px 3px rgba(139, 139, 139, 0.16),
        inset -1px -2px 4px rgba(123, 123, 123, 0.14),    /* softer bottom-right cavity wall */
        inset 0 -2px 4px rgba(255, 255, 255, 0.95);
    transition: background var(--glass-transition);
}

/* No rectangular focus ring — the brighter chrome pill is the focus cue, so a
   click/keyboard focus never draws a square box around the capsule. */
.app-sidebar--dark .sidebar-navigation ul a:focus,
.app-sidebar--dark .sidebar-navigation ul a:focus-visible,
.app-sidebar--dark .sidebar-navigation ul a:active {
    outline: none !important;
}

/* Hover / focus: brighter glass + slight nudge */
.app-sidebar--dark .sidebar-navigation ul a:hover { transform: translateX(2px); }
.app-sidebar--dark .sidebar-navigation ul a:hover::after,
.app-sidebar--dark .sidebar-navigation ul a:focus::after {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(244, 244, 244, 0.96) 42%,
        rgba(255, 255, 255, 0.94) 60%,
        rgba(230, 230, 230, 0.97) 100%);
}
.app-sidebar--dark .sidebar-navigation ul a:hover::before,
.app-sidebar--dark .sidebar-navigation ul a:focus::before {
    box-shadow:
        0 5px 11px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.09),
        inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.95),
        inset -2px -3px 5px rgba(0, 0, 0, 0.20),
        inset -1px -1px 1px rgba(0, 0, 0, 0.14);
}

/* Active page tab — inverted chrome (dark pill, light label + icon).
   Markup: `<li class="mm-active">` on the current route (sidebar.blade.php). */
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a span.main-txt {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a span img.card_new-img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a span i.card_new-img-fa {
    color: #ffffff !important;
    opacity: 1 !important;
}
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a::before {
    background: conic-gradient(from 0deg at 50% 42%,
        #6a6d72 0deg,
        #52555a 22deg,
        #3a3d42 52deg,
        #25282c 92deg,
        #121418 132deg,
        #2e3136 158deg,
        #484b50 192deg,
        #5c5f64 230deg,
        #707378 270deg,
        #3f4247 312deg,
        #565960 340deg,
        #6a6d72 360deg);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.28),
        0 1px 3px rgba(0, 0, 0, 0.22),
        inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.22),
        inset -2px -3px 5px rgba(0, 0, 0, 0.55),
        inset -1px -1px 1px rgba(0, 0, 0, 0.45);
}
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a::after {
    background: linear-gradient(180deg,
        rgba(52, 56, 62, 0.98) 0%,
        rgba(34, 37, 42, 0.96) 42%,
        rgba(44, 48, 54, 0.95) 60%,
        rgba(24, 27, 32, 0.98) 100%);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.45),
        inset -1px -2px 4px rgba(0, 0, 0, 0.35),
        inset 0 -1px 2px rgba(255, 255, 255, 0.08);
}
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a:hover::after,
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a:focus::after {
    background: linear-gradient(180deg,
        rgba(62, 66, 72, 0.99) 0%,
        rgba(42, 45, 50, 0.97) 42%,
        rgba(52, 56, 62, 0.96) 60%,
        rgba(32, 35, 40, 0.99) 100%);
}
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a:hover::before,
.app-sidebar--dark .sidebar-navigation ul > li.mm-active > a:focus::before {
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.32),
        0 1px 3px rgba(0, 0, 0, 0.24),
        inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.28),
        inset -2px -3px 5px rgba(0, 0, 0, 0.58),
        inset -1px -1px 1px rgba(0, 0, 0, 0.48);
}

/* Emphasised chrome accent — pinned to SIGN OUT (last item) so the heavier dark
   chrome stays at the BOTTOM of the menu, not on the active page tab. */
.app-sidebar--dark .sidebar-navigation ul > li:last-child > a::before {
    opacity: 1;
    transform: none;
    background: conic-gradient(from 0deg at 50% 42%,
        #ffffff 0deg,
        #e8e9eb 22deg,
        #cccdd1 52deg,
        #a4a7ab 92deg,
        #797c80 132deg,
        #989b9f 158deg,
        #c0c2c6 192deg,
        #f2f2f3 230deg,
        #ffffff 270deg,
        #dadce0 312deg,
        #f6f7f8 340deg,
        #ffffff 360deg);
    box-shadow:
        0 5px 11px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.10),
        inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.95),
        inset -2px -3px 5px rgba(0, 0, 0, 0.21),
        inset -1px -1px 1px rgba(0, 0, 0, 0.14);
}
.app-sidebar--dark .sidebar-navigation ul > li:last-child > a::after {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(242, 242, 242, 0.97) 42%,
        rgba(255, 255, 255, 0.95) 60%,
        rgba(228, 228, 228, 0.98) 100%);
    box-shadow:
        inset 0 1px 3px rgba(131, 131, 131, 0.17),
        inset -1px -2px 4px rgba(119, 119, 119, 0.15),
        inset 0 -2px 5px rgba(255, 255, 255, 1);
}

/* Footer feather icons → black */
.app-sidebar .sidebar-footer-menu li a,
.app-sidebar .sidebar-footer-menu li a svg {
    color: #000000 !important;
    stroke: #000000;
}
.app-sidebar .sidebar-footer-menu li a:hover {
    color: #000000 !important;
    filter: none;
}

/* Scrollbar thumb visible on the white panel */
.app-sidebar--content .ps__thumb-y,
.app-sidebar--content .ps__rail-y .ps__thumb-y {
    background: rgba(0, 0, 0, 0.22) !important;
}

/* ---------------------------------------------------------------------------
   3. RESPONSIVE (Principle 2) — respect the theme's collapse + mobile toggle
   --------------------------------------------------------------------------- */

/* Collapsed (icon-only) rail: uniform ROUND chrome pills with a centered icon.
   Scoped to :not(:hover) because the theme re-expands the rail on hover. */
@media (min-width: 992px) {
    #app-top.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-navigation ul a {
        width: 40px !important;
        height: 40px !important;
        margin: 6px auto !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }
    /* Center the icon: drop the float + the expanded label's absolute offset */
    #app-top.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-navigation ul a > span {
        height: auto !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #app-top.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-navigation ul a img.card_new-img {
        float: none !important;
        margin: 0 !important;
        display: block;
    }
    #app-top.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-navigation ul a span.main-txt {
        display: none !important;
    }
    /* Keep the chrome rim + glass cavity perfectly circular */
    #app-top.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-navigation ul a::before {
        border-radius: 50% !important;
    }
    #app-top.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-navigation ul a::after {
        border-radius: 50% !important;
        inset: 1px;
    }

    /* Re-expands on hover (theme behavior) — keep pills comfortable again */
    #app-top.sidebar-collapsed .app-sidebar:hover .sidebar-navigation ul a {
        margin-left: clamp(8px, 1vw, 12px);
        margin-right: clamp(8px, 1vw, 12px);
    }
}

/* Mobile: sidebar is off-canvas (theme JS slides it in). Soften the blur a
   touch for performance and ensure no horizontal overflow at small widths. */
@media (max-width: 991.98px) {
    .app-sidebar.bg-night-sky.app-sidebar--dark {
        -webkit-backdrop-filter: blur(14px) saturate(150%);
                backdrop-filter: blur(14px) saturate(150%);
    }
    .app-sidebar--dark .sidebar-navigation ul a { margin: 3px 10px; }
}

@media (max-width: 360px) {
    .app-sidebar--dark .sidebar-navigation ul a { margin: 2px 8px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .glass-pill,
    .glass-pill::before,
    .app-sidebar--dark .sidebar-navigation ul a,
    .app-sidebar--dark .sidebar-navigation ul a::before,
    .app-sidebar .sidebar-footer-menu li a {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------------
   4. FALLBACK — browsers WITHOUT backdrop-filter keep an opaque, legible UI
   --------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .glass-surface { background: var(--glass-bg-strong); }

    .app-sidebar.bg-night-sky.app-sidebar--dark {
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    }
    .app-sidebar.app-sidebar--dark .app-sidebar--header { background: #4c81de !important; }
    .app-sidebar .sidebar__footer { background: rgba(10, 20, 45, 0.95) !important; }

    .app-sidebar--dark .sidebar-navigation ul a::before { background: rgba(255, 255, 255, 0.10); }
    .app-sidebar--dark .sidebar-navigation ul > li.mm-active > a::before {
        background: rgba(30, 34, 42, 0.95);
    }
    .app-sidebar--dark .sidebar-navigation ul > li.mm-active > a::after {
        background: rgba(18, 20, 28, 0.98);
    }
    .app-sidebar--dark .sidebar-navigation ul > li.mm-active > a span.main-txt {
        color: #ffffff !important;
    }
    .app-sidebar--dark .sidebar-navigation ul > li.mm-active > a span img.card_new-img {
        filter: brightness(0) invert(1) !important;
    }
    .app-sidebar--dark .sidebar-navigation ul > li.mm-active > a span i.card_new-img-fa {
        color: #ffffff !important;
    }
    .glass-pill::before,
    .app-sidebar--dark .sidebar-navigation ul a::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================================
   5. USER DASHBOARD (home.blade.php)  — scoped under .dashboard-glass
   ----------------------------------------------------------------------------
   A SUBTLE refinement pass that REUSES the glass system. The light dashboard
   theme is preserved (white cards, colored stat icons, status badges); we only
   (a) unify the typeface to Poppins, (b) tidy alignment, (c) add a gentle
   *light* frosted-glass sheen + depth, and (d) make it fully fluid/responsive.

   Light-glass card tokens extend the shared system (same naming convention as
   the --glass-* sidebar tokens) so the language stays centralized. Reuse the
   light card surface anywhere with the .glass-card class below.
   --------------------------------------------------------------------------- */
:root {
    --glass-bg-card:           rgba(255, 255, 255, 0.80);
    --glass-bg-card-strong:    rgba(255, 255, 255, 0.93);
    --glass-card-border:       rgba(255, 255, 255, 0.70);
    --glass-card-sheen:        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%);
    --glass-card-shadow:       0 6px 22px rgba(31, 45, 90, 0.08), 0 2px 6px rgba(31, 45, 90, 0.05);
    --glass-card-shadow-hover: 0 14px 34px rgba(31, 45, 90, 0.16), 0 4px 10px rgba(31, 45, 90, 0.07);
}

/* Reusable LIGHT glass surface (for cards/panels on light backgrounds).
   Pair with the dark .glass-surface for dark chrome. */
.glass-card {
    position: relative;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius-sm);
}

/* --- 5.1 SINGLE FONT — unify ALL dashboard text to Poppins (primary ask) ---
   Scoped to .dashboard-glass so the rest of the app is untouched. Icon fonts
   (Font Awesome / feather svg) keep their own font-family and are NOT listed,
   so glyphs are unaffected. */
.dashboard-glass,
.dashboard-glass p,
.dashboard-glass a,
.dashboard-glass span,
.dashboard-glass small,
.dashboard-glass b,
.dashboard-glass strong,
.dashboard-glass td,
.dashboard-glass th,
.dashboard-glass label,
.dashboard-glass h1, .dashboard-glass h2, .dashboard-glass h3,
.dashboard-glass h4, .dashboard-glass h5, .dashboard-glass h6,
.dashboard-glass .btn,
.dashboard-glass input,
.dashboard-glass button {
    font-family: 'Poppins', sans-serif !important;
}

/* --- 5.2 DYNAMIC REFRACTION (subtle, theme-preserving) ---
   Light frosted refinement on the stat cards, feature cards and panels.
   Reuses the .glass-card light surface + shared --glass-* tokens. Stays light;
   colored stat-icon circles and status badges are intentionally not targeted. */
.dashboard-glass .card,
.dashboard-glass .card-box {
    position: relative;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius-sm);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
/* Keep the colored stat-icon circles solid (do not let the sheen wash them) */
.dashboard-glass .card .d-50 { background-image: none; }

/* --- 5.3 RESPONSIVE ELEMENTS — fluid spacing + smooth hovers --- */
/* Gentle lift on interactive cards/panels (cohesive, not jarring). */
.dashboard-glass .card-box:hover {
    box-shadow: var(--glass-card-shadow-hover);
}
/* "Go To Orders / Go To Quotes" buttons: smooth hover lift */
.dashboard-glass .card-header--actions .btn {
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.dashboard-glass .card-header--actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 45, 90, 0.18);
}

/* Fluid card spacing using the responsive.css gutter token */
.dashboard-glass .card.mb-5,
.dashboard-glass .card-box.mb-5 {
    margin-bottom: var(--rwd-gutter, 1.5rem) !important;
}

/* Tables scroll horizontally inside their card instead of pushing the page
   (no page-level horizontal scroll at 360px). */
.dashboard-glass .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Recent Orders / Quotes — FLG Pill Table scroll cage (see §1 FLG Pill Table utility). */
.dashboard-glass .recent-orders-scroll,
.dashboard-glass .recent-quotes-scroll {
    /* alias: inherits .flg-pill-table-scroll tokens when both classes present */
}
/* Legacy Quotes .container wrapper — keep full card width if still present */
.dashboard-glass .card-box .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* --- 5.4 ALIGNMENT — tidy, consistent, intentional --- */
/* Stat rows: vertically centre the label/value against the icon */
.dashboard-glass .top_statics .align-box-row {
    display: flex;
    align-items: center;
}

/* --- 5.4a TOP STAT CARDS — bold, colour-keyed FLG glass (stand-out redesign)
   The three summary tiles (Order In Process / Total Account Balance / Monthly
   Orders) get a vivid frosted-glass makeover keyed off their existing
   card-shadow-* class: a corner colour bloom, an accent top edge, a glowing
   icon badge and an oversized value so each metric reads at a glance. All
   markup, links and ids are untouched — appearance only. */
.dashboard-glass .top_statics .card.card-box {
    --stat-accent:   var(--glass-accent);
    --stat-accent-2: var(--glass-accent-2);
    --stat-glow:     rgba(76, 129, 222, 0.30);
    --stat-tint:     rgba(76, 129, 222, 0.14);
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 26px rgba(31, 45, 90, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Colour bloom from the icon corner + a thin accent top edge */
.dashboard-glass .top_statics .card.card-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(125% 135% at 100% 0%, var(--stat-tint), transparent 62%);
}
.dashboard-glass .top_statics .card.card-box::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    z-index: 1;
    background: linear-gradient(90deg, var(--stat-accent), var(--stat-accent-2));
}
.dashboard-glass .top_statics .card.card-box > a,
.dashboard-glass .top_statics .card.card-box .card-body { position: relative; z-index: 2; }
.dashboard-glass .top_statics .card.card-box .card-body { padding: 20px 22px; }

/* Hover lift with an accent-coloured glow */
.dashboard-glass .top_statics .card.card-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px var(--stat-glow), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Muted label + oversized, accent-coloured value */
.dashboard-glass .top_statics .card-body small {
    color: #6a7184 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.dashboard-glass .top_statics .card-body .font-weight-bold > span {
    display: block;
    margin-top: 4px;
    font-size: clamp(1.7rem, 2.4vw, 2.15rem) !important;
    line-height: 1.1;
    font-weight: 700;
    color: var(--stat-accent);
}

/* Icon badge: larger, glowing in the card's accent colour */
.dashboard-glass .top_statics .card .d-50 {
    width: 52px !important;
    height: 52px !important;
    line-height: 52px !important;
    font-size: 20px !important;
    box-shadow: 0 8px 18px var(--stat-glow);
}

/* Per-card accent keys (match the existing card-shadow-* semantics) */
.dashboard-glass .top_statics .card-shadow-danger {
    --stat-accent: #e0556b; --stat-accent-2: #ff8aa0;
    --stat-glow: rgba(224, 85, 107, 0.33); --stat-tint: rgba(224, 85, 107, 0.16);
}
.dashboard-glass .top_statics .card-shadow-info {
    --stat-accent: #2f8ce0; --stat-accent-2: #6ac1ff;
    --stat-glow: rgba(47, 140, 224, 0.30); --stat-tint: rgba(47, 140, 224, 0.15);
}
.dashboard-glass .top_statics .card-shadow-purple {
    --stat-accent: #7b5cd6; --stat-accent-2: #a98cf5;
    --stat-glow: rgba(123, 92, 214, 0.30); --stat-tint: rgba(123, 92, 214, 0.15);
}

/* Motion opt-out */
@media (prefers-reduced-motion: reduce) {
    .dashboard-glass .top_statics .card.card-box:hover { transform: none; }
}
/* Consistent table alignment: headers + cells left-aligned, middle vertical,
   Actions/centre columns stay centred. */
.dashboard-glass table.table thead th {
    text-align: left;
    vertical-align: middle;
    font-weight: 600;
    border-top: 0;
}
.dashboard-glass table.recent-orders-table thead th.sorting,
.dashboard-glass table.recent-orders-table thead th.sorting_asc,
.dashboard-glass table.recent-orders-table thead th.sorting_desc,
.dashboard-glass table.recent-quotes-table thead th.sorting,
.dashboard-glass table.recent-quotes-table thead th.sorting_asc,
.dashboard-glass table.recent-quotes-table thead th.sorting_desc,
.dashboard-glass table#example thead th.sorting,
.dashboard-glass table#example thead th.sorting_asc,
.dashboard-glass table#example thead th.sorting_desc {
    cursor: pointer;
    padding-right: 1.65rem !important;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(60, 68, 177, 0.12);
    color: var(--glass-primary);
    user-select: none;
    background-image: none !important;
}
.dashboard-glass table.recent-orders-table thead th.sorting::after,
.dashboard-glass table.recent-orders-table thead th.sorting_asc::after,
.dashboard-glass table.recent-orders-table thead th.sorting_desc::after,
.dashboard-glass table.recent-quotes-table thead th.sorting::after,
.dashboard-glass table.recent-quotes-table thead th.sorting_asc::after,
.dashboard-glass table.recent-quotes-table thead th.sorting_desc::after,
.dashboard-glass table#example thead th.sorting::after,
.dashboard-glass table#example thead th.sorting_asc::after,
.dashboard-glass table#example thead th.sorting_desc::after {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    opacity: 0.45;
    content: "↕";
}
.dashboard-glass table.recent-orders-table thead th.sorting_asc::after,
.dashboard-glass table.recent-quotes-table thead th.sorting_asc::after,
.dashboard-glass table#example thead th.sorting_asc::after {
    content: "↑";
    opacity: 0.85;
    color: var(--glass-accent);
}
.dashboard-glass table.recent-orders-table thead th.sorting_desc::after,
.dashboard-glass table.recent-quotes-table thead th.sorting_desc::after,
.dashboard-glass table#example thead th.sorting_desc::after {
    content: "↓";
    opacity: 0.85;
    color: var(--glass-accent);
}
.dashboard-glass table.recent-orders-table thead th.no-sort,
.dashboard-glass table.recent-quotes-table thead th.no-sort,
.dashboard-glass table#example thead th.no-sort {
    cursor: default;
    padding-right: inherit !important;
    background-image: none !important;
}
.dashboard-glass table.recent-orders-table thead th.no-sort::after,
.dashboard-glass table.recent-quotes-table thead th.no-sort::after,
.dashboard-glass table#example thead th.no-sort::after {
    content: none;
}
.dashboard-glass table.recent-orders-table thead th.sorting_asc,
.dashboard-glass table.recent-orders-table thead th.sorting_desc,
.dashboard-glass table.recent-quotes-table thead th.sorting_asc,
.dashboard-glass table.recent-quotes-table thead th.sorting_desc {
    color: var(--glass-primary);
    font-weight: 700;
}
.dashboard-glass table.table tbody td {
    text-align: left;
    vertical-align: middle;
}
.dashboard-glass table.table thead th.text-center,
.dashboard-glass table.table tbody td.text-center,
.dashboard-glass table.table tbody td[align="center"] {
    text-align: center;
}

/* Recent Orders — TEAM NAME column (2nd col): left-align the header + value, and
   normalise the .order-num value so it matches the other tbody cell text.
   The value is a <p>, which .app-content--inner p was bumping to ~17px/weight
   100; inherit makes it track the td exactly (15px/300 like the other cells).
   Scoped to td:nth-child(2) so the ORDER column (.order-title/.order_date) and
   the PRODUCT column description (also .order-num) are unaffected. */
.dashboard-glass table#example thead th:nth-child(2),
.dashboard-glass table#example tbody td:nth-child(2) {
    text-align: left;
}
.dashboard-glass table#example tbody td:nth-child(2) .order-num {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    /* Match the dashboard primary indigo used by the headings + GO TO buttons */
    color: var(--glass-primary) !important;
    font-weight: 500 !important;
}
/* Recent Orders — PRODUCT column description: compact secondary line under product title */
.dashboard-glass table#example tbody td:nth-child(3) .order-num,
.dashboard-glass table.recent-orders-table tbody td:nth-child(3) .order-num {
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

/* Recent Orders — intelligent column widths (desktop/tablet).
   Fixed cols sized to content (~13 / ~20 / badge / total / kebab chars);
   Product column absorbs all remaining width. Mobile FLG pill stack in §27. */
@media (min-width: 768px) {
    .dashboard-glass .recent-orders-scroll {
        --ro-w-order: clamp(7.75rem, 7vw, 9.25rem);   /* ~13 chars + date */
        --ro-w-team: clamp(7rem, 8vw, 10rem);         /* ~20 chars */
        --ro-w-status: clamp(6.25rem, 7vw, 9rem);      /* status badge */
        --ro-w-total: clamp(5rem, 5vw, 6.5rem);       /* formatted amount */
        --ro-w-actions: 8%;                             /* wide enough for ACTIONS label */
    }
    .dashboard-glass table.recent-orders-table {
        table-layout: fixed;
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0 5px;
        background: transparent;
    }
    .dashboard-glass table.recent-orders-table tbody tr.clickable-row {
        cursor: pointer;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid var(--glass-card-border);
        border-radius: 999px;
        box-shadow: var(--glass-card-shadow);
        transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                    background var(--glass-transition);
    }
    .dashboard-glass table.recent-orders-table.table-hover tbody tr.clickable-row:hover {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--glass-card-shadow-hover);
        transform: translateY(-1px);
    }
    .dashboard-glass table.recent-orders-table.table-hover tbody tr.clickable-row:hover > td {
        background: transparent !important;
    }
    .dashboard-glass table.recent-orders-table tbody td {
        padding: 4px 8px !important;
        border: 0 !important;
        background: transparent !important;
        vertical-align: middle !important;
        height: auto !important;
    }
    .dashboard-glass table.recent-orders-table tbody td:first-child {
        padding-left: 14px !important;
    }
    .dashboard-glass table.recent-orders-table tbody td:last-child {
        padding-right: 10px !important;
    }
    .dashboard-glass table.recent-orders-table tbody td .order-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
    }
    .dashboard-glass table.recent-orders-table tbody td .order_date {
        font-size: 10px !important;
        line-height: 1.15 !important;
        display: block;
        margin-top: 1px;
    }
    .dashboard-glass table.recent-orders-table thead th:nth-child(1),
    .dashboard-glass table.recent-orders-table tbody td:nth-child(1) {
        width: var(--ro-w-order);
        max-width: var(--ro-w-order);
    }
    .dashboard-glass table.recent-orders-table thead th:nth-child(2),
    .dashboard-glass table.recent-orders-table tbody td:nth-child(2) {
        width: var(--ro-w-team);
        max-width: var(--ro-w-team);
    }
    /* nth-child(3) PRODUCT — no fixed width; absorbs all space left after cols 1,2,4,5,6 */
    .dashboard-glass table.recent-orders-table thead th:nth-child(3),
    .dashboard-glass table.recent-orders-table tbody td:nth-child(3) {
        width: auto;
        min-width: 0;
    }
    .dashboard-glass table.recent-orders-table thead th:nth-child(4),
    .dashboard-glass table.recent-orders-table tbody td:nth-child(4) {
        width: var(--ro-w-status);
        max-width: var(--ro-w-status);
    }
    .dashboard-glass table.recent-orders-table thead th:nth-child(5),
    .dashboard-glass table.recent-orders-table tbody td:nth-child(5) {
        width: var(--ro-w-total);
        max-width: var(--ro-w-total);
    }
    .dashboard-glass table.recent-orders-table thead th:nth-child(6),
    .dashboard-glass table.recent-orders-table tbody td:nth-child(6) {
        width: var(--ro-w-actions);
        max-width: var(--ro-w-actions);
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap;
    }
    .dashboard-glass table.recent-orders-table tbody td:nth-child(1) .order-title,
    .dashboard-glass table.recent-orders-table tbody td:nth-child(2) .order-num {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dashboard-glass table.recent-orders-table tbody td:nth-child(4) .badge {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    .dashboard-glass table.recent-orders-table tbody td:nth-child(5),
    .dashboard-glass table.recent-orders-table tbody td:nth-child(5) a {
        white-space: nowrap;
    }
    .dashboard-glass table.recent-orders-table tbody td:nth-child(3),
    .dashboard-glass table.recent-orders-table tbody td.flg-pill-table__cell--product {
        min-width: 0;
        overflow: hidden;
    }
    .dashboard-glass table.recent-orders-table tbody td:nth-child(3) img.tbl_img,
    .dashboard-glass table.recent-orders-table tbody td.flg-pill-table__cell--product img.tbl_img {
        float: left;
        width: 48px !important;
        height: 48px !important;
        object-fit: cover;
        border-radius: 8px;
        margin: 0 8px 0 0;
    }
    .dashboard-glass table.recent-orders-table tbody td:nth-child(3) > a,
    .dashboard-glass table.recent-orders-table tbody td.flg-pill-table__cell--product > a {
        display: block;
        overflow: hidden;
        min-width: 0;
    }
    .dashboard-glass table.recent-orders-table tbody td:nth-child(3) .order-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Recent Quotes — FLG Pill Table (Quote · Price · Actions). Mobile stack in §27. */
@media (min-width: 768px) {
    .dashboard-glass .recent-quotes-scroll {
        --rq-w-price: clamp(5rem, 5vw, 6.5rem);
        --rq-w-actions: 8%;
    }
    .dashboard-glass table.recent-quotes-table {
        table-layout: fixed;
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0 5px;
        background: transparent;
    }
    .dashboard-glass table.recent-quotes-table tbody tr.clickable-row {
        cursor: pointer;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid var(--glass-card-border);
        border-radius: 999px;
        box-shadow: var(--glass-card-shadow);
        transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                    background var(--glass-transition);
    }
    .dashboard-glass table.recent-quotes-table.table-hover tbody tr.clickable-row:hover {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--glass-card-shadow-hover);
        transform: translateY(-1px);
    }
    .dashboard-glass table.recent-quotes-table.table-hover tbody tr.clickable-row:hover > td {
        background: transparent !important;
    }
    .dashboard-glass table.recent-quotes-table tbody td {
        padding: 4px 8px !important;
        border: 0 !important;
        background: transparent !important;
        vertical-align: middle !important;
        height: auto !important;
    }
    .dashboard-glass table.recent-quotes-table tbody td:first-child {
        padding-left: 14px !important;
    }
    .dashboard-glass table.recent-quotes-table tbody td:last-child {
        padding-right: 10px !important;
        width: var(--rq-w-actions);
        max-width: var(--rq-w-actions);
        white-space: nowrap;
    }
    .dashboard-glass table.recent-quotes-table thead th:nth-child(1),
    .dashboard-glass table.recent-quotes-table tbody td:nth-child(1) {
        width: auto;
        min-width: 0;
    }
    .dashboard-glass table.recent-quotes-table thead th:nth-child(2),
    .dashboard-glass table.recent-quotes-table tbody td:nth-child(2) {
        width: var(--rq-w-price);
        max-width: var(--rq-w-price);
        white-space: nowrap;
    }
    .dashboard-glass table.recent-quotes-table thead th:nth-child(3),
    .dashboard-glass table.recent-quotes-table tbody td:nth-child(3) {
        width: var(--rq-w-actions);
        max-width: var(--rq-w-actions);
    }
    .dashboard-glass table.recent-quotes-table tbody td .order-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dashboard-glass table.recent-quotes-table tbody td .order-num {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dashboard-glass table.recent-quotes-table tbody td.flg-pill-table__cell--product {
        min-width: 0;
        overflow: hidden;
    }
    .dashboard-glass table.recent-quotes-table tbody td.flg-pill-table__cell--product img.tbl_img {
        float: left;
        width: 48px !important;
        height: 48px !important;
        object-fit: cover;
        border-radius: 8px;
        margin: 0 8px 0 0;
    }
    .dashboard-glass table.recent-quotes-table tbody td.flg-pill-table__cell--product > a {
        display: block;
        overflow: hidden;
        min-width: 0;
    }
}

/* Feature-card content stays cleanly centred (theme already uses .text-center) */
.dashboard-glass .equal_height_column .card-body { text-align: center; }
.dashboard-glass .equal_height_column .card_imgsvg { margin: 0 auto; }

/* Feature-card icons — Font Awesome circles (no external SVG dependency) */
.dashboard-glass .dash-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 999px;
    color: #fff;
    font-size: 1.55rem;
    box-shadow:
        0 10px 24px rgba(31, 45, 90, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.dashboard-glass .dash-feature-icon--order {
    background: linear-gradient(135deg, #2ebbe8 0%, #3c3264 100%);
}
.dashboard-glass .dash-feature-icon--design {
    background: linear-gradient(135deg, #fad250 0%, #fc9862 100%);
}
.dashboard-glass .dash-feature-icon--quote {
    background: linear-gradient(135deg, #78a0ff 0%, #5a46b4 100%);
}

/* Feature-card BODY text only: ~30% smaller than the inherited 17px (=> 12px).
   Scoped to .card-text so the card HEADINGS (h3.heading-6) keep their size. */
.dashboard-glass .equal_height_column .card-body .card-text {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* Equal-height feature cards (My Order / My Design / My Quote) at any viewport.
   The row is flex; each column + card stretches so the three boxes share the
   tallest height. On mobile (stacked) each is full-width with its own height. */
.dashboard-glass .equal_height_column {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.dashboard-glass .equal_height_column > [class*="col-"] {
    display: flex;
}
.dashboard-glass .equal_height_column .card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.dashboard-glass .equal_height_column .card > a {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}
.dashboard-glass .equal_height_column .card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* Mobile: tighten card padding a touch; Bootstrap .col-lg-4 already stacks. */
@media (max-width: 575.98px) {
    .dashboard-glass .card-body { padding: 1rem; }
}

/* --- 5.4b MOBILE POLISH — stat cards / quick actions stack, tighter gutters,
   comfortable tap targets. Bootstrap already stacks .col-lg-4 into a single
   column below 992px; this only refines spacing/sizing at phone widths. --- */
@media (max-width: 767.98px) {
    /* "Go To Orders" / "Go To Quotes" header buttons: Bamburgh's .card-header
       is a non-wrapping flex row (title flex-grow:1 + fixed-size button), which
       can squeeze both toward overflow on narrow phones. Stack them and give
       the button a full-width, comfortably tappable row instead. */
    .dashboard-glass .card-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .dashboard-glass .card-header--title {
        flex: 1 1 100%;
        min-width: 0;
    }
    .dashboard-glass .card-header--actions {
        flex: 1 1 100%;
    }
    .dashboard-glass .card-header--actions .btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    /* Tighter, more compact stat-tile padding on phones (desktop keeps 20px 22px) */
    .dashboard-glass .top_statics .card.card-box .card-body {
        padding: 16px 18px;
    }
    /* Quick-action cards (My Order / My Design / My Quote): tidy up the last
       paragraph's trailing space now that vertical rhythm is tighter overall */
    .dashboard-glass .equal_height_column .card-body .card-text:last-of-type {
        margin-bottom: 0;
    }
}

/* --- 5.5 FALLBACK — no backdrop-filter: keep solid white cards (legible) --- */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .glass-card,
    .dashboard-glass .card,
    .dashboard-glass .card-box {
        background-color: #ffffff;
    }
}

/* ============================================================================
   6. RECENT ORDERS — ACTIONS column kebab + dropdown (home.blade.php #example)
   ----------------------------------------------------------------------------
   (1) Glass kebab button, (2) menu escapes the .table-responsive/card clipping,
   (3) compact menu items. Reuses the --glass-* tokens + glass-pill language.
   --------------------------------------------------------------------------- */

/* --- 6.1 Visible, tappable glass kebab button (centred in the column) --- */
.dashboard-glass table#example tbody td:last-child { text-align: center; }
.dashboard-glass table#example td:last-child .dropdown { display: inline-block; }

.dashboard-glass table#example .btn_remove_radius {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    border-radius: 50% !important;
    color: var(--glass-accent) !important;
    background: var(--glass-bg-card) !important;
    border: 1px solid var(--glass-card-border) !important;
    box-shadow: var(--glass-card-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), border-color var(--glass-transition);
}
.dashboard-glass table#example .btn_remove_radius i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
}
.dashboard-glass table#example .btn_remove_radius:hover,
.dashboard-glass table#example .btn_remove_radius:focus,
.dashboard-glass table#example .dropdown.show .btn_remove_radius {
    background: var(--glass-pill-active) !important;
    border-color: var(--glass-border-strong) !important;
    box-shadow: 0 4px 14px rgba(76, 129, 222, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #2a5298 !important;
    transform: translateY(-1px);
}

/* --- 6.2 Let the open menu ESCAPE the overflow clip + sit above the panel ---
   The .dropdown-open class is toggled by JS (in home.blade.php) only while a
   menu is open, so horizontal table scrolling still works the rest of the time.
   z-index lifts the whole Recent Orders card above the sibling Recent Quotes
   card (each glass card is its own stacking context due to backdrop-filter). */
.dashboard-glass .table-responsive.dropdown-open { overflow: visible !important; }
.dashboard-glass .card-box.dropdown-open {
    overflow: visible !important;
    position: relative;
    z-index: 1050;
}
.dashboard-glass table#example .dropdown-menu {
    z-index: 1060;
}
/* Pin the open menu under the kebab, RIGHT-aligned so it opens leftward and
   never spills past the right viewport edge. The !important rules override
   Popper's inline (non-important) transform/left, and stay applied even when
   Popper re-positions on scroll/resize. */
.dashboard-glass table#example .dropdown.show .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0.35rem;
}

/* --- 6.3 Compact, tidy menu items (reset the old float/line-height hacks) --- */
.dashboard-glass table#example .dropdown-menu.dropdown-menu-xl {
    min-width: 13.5rem;
    padding: 6px !important;
    border-radius: 14px;
    border: 1px solid var(--glass-card-border);
    box-shadow: 0 12px 30px rgba(31, 45, 90, 0.18);
}
.dashboard-glass table#example .dropdown-menu .box-main {
    padding: 3px !important;
}
.dashboard-glass table#example .dropdown-menu .prnt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px !important;
    border-radius: 10px;
    border: 0;
    text-align: center;
    transition: background var(--glass-transition), transform var(--glass-transition);
}
.dashboard-glass table#example .dropdown-menu .prnt:hover {
    background: var(--glass-pill-active);
    transform: translateY(-1px);
}
/* Icons: normalise size/colour (kills the d-block mb-2 + feather invert hacks) */
.dashboard-glass table#example .dropdown-menu .prnt i,
.dashboard-glass table#example .dropdown-menu .prnt svg {
    display: block !important;
    width: 17px;
    height: 17px;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: var(--glass-accent) !important;
    filter: none !important;
}
/* Labels: drop the float/negative-margin hacks, make them small + centred */
.dashboard-glass table#example .dropdown-menu .prnt span[class^="txt-last"],
.dashboard-glass table#example .dropdown-menu .prnt span[class*=" txt-last"] {
    float: none !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    font-size: 11px !important;
    text-align: center;
    white-space: nowrap;
}

/* --- 6.3a Disabled action (rule-gated): greyed + non-clickable, still shown ---
   The Actions grid always keeps its 2x2 shape; actions that don't apply to the
   order's status are dimmed rather than removed, so the menu never reflows. */
.dashboard-glass table#example .dropdown-menu .prnt.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
}
.dashboard-glass table#example .dropdown-menu .prnt.is-disabled:hover {
    background: transparent;
    transform: none;
}
.dashboard-glass table#example .dropdown-menu .prnt.is-disabled i,
.dashboard-glass table#example .dropdown-menu .prnt.is-disabled svg {
    color: #9aa1b2 !important;
}
/* Dispute Order (the completed-order "raise issue" action) reads in theme red */
.dashboard-glass table#example .dropdown-menu .dispute_btn { cursor: pointer; }
.dashboard-glass table#example .dropdown-menu .dispute_btn i {
    color: #e0556b !important;
}

/* ============================================================================
   6.4 RECENT ORDERS — TABLE FOOTER (length "Show … entries" + pagination)
   ----------------------------------------------------------------------------
   DataTables renders, inside .dashboard-glass .table-footer-wrapper:
     • .dataTables_length  → <label>Show <select.custom-select> entries</label>
     • .dataTables_paginate.paging_simple_numbers → <ul.pagination> of
       <li.paginate_button.page-item [active|previous|next|disabled]><a.page-link>
   We re-skin BOTH with the shared light-glass language (glass pill controls,
   primary-gradient active page, gentle hover lift). Appearance-only — the
   DataTables markup, ids and data-dt-idx handlers stay intact.
   --------------------------------------------------------------------------- */

/* Thin luminous divider above the footer row */
.dashboard-glass .table-footer-wrapper .divider {
    height: 1px;
    border: 0;
    margin: 0 0 0.85rem;
    background: linear-gradient(90deg,
        rgba(31, 45, 90, 0) 0%,
        rgba(31, 45, 90, 0.12) 50%,
        rgba(31, 45, 90, 0) 100%);
}

/* --- 6.4a "Show … entries" length control --- */
.dashboard-glass .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: rgba(31, 45, 90, 0.72);
    white-space: nowrap;
}
.dashboard-glass .dataTables_length select.custom-select {
    height: 34px;
    width: auto;
    min-width: 68px;
    padding: 0 2rem 0 0.85rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--glass-primary);
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid var(--glass-card-border);
    background-color: var(--glass-bg-card);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233c44b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right 0.55rem center;
    background-size: auto, 15px 15px;
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition), background-color var(--glass-transition);
}
.dashboard-glass .dataTables_length select.custom-select:hover {
    border-color: var(--glass-border-strong);
    transform: translateY(-1px);
    box-shadow: var(--glass-card-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.dashboard-glass .dataTables_length select.custom-select:focus {
    outline: none;
    border-color: var(--glass-accent);
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.dashboard-glass .dataTables_length select.custom-select option {
    color: #1f2d5a;
    background: #ffffff;
}

/* --- 6.4b Pagination (Previous / pages / Next) --- */
.dashboard-glass .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 0;
    margin: 0;
}
.dashboard-glass .dataTables_paginate .pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dashboard-glass .dataTables_paginate .page-item {
    margin: 0;
}
.dashboard-glass .dataTables_paginate .page-item .page-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.75rem;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--glass-primary);
    border: 1px solid var(--glass-card-border);
    border-radius: 999px;
    background-color: var(--glass-bg-card);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition), background var(--glass-transition),
                color var(--glass-transition);
}
.dashboard-glass .dataTables_paginate .page-item .page-link:hover,
.dashboard-glass .dataTables_paginate .page-item .page-link:focus {
    outline: none;
    color: #2a5298;
    border-color: var(--glass-border-strong);
    background: var(--glass-pill-active);
    box-shadow: 0 6px 16px rgba(76, 129, 222, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

/* Active page — solid primary gradient fill */
.dashboard-glass .dataTables_paginate .page-item.active .page-link,
.dashboard-glass .dataTables_paginate .page-item.active .page-link:hover,
.dashboard-glass .dataTables_paginate .page-item.active .page-link:focus {
    color: #ffffff;
    border-color: transparent;
    background-image: linear-gradient(135deg, var(--glass-accent-2), var(--glass-primary));
    box-shadow: 0 6px 18px rgba(60, 68, 177, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transform: none;
}

/* Disabled Previous/Next — dimmed, non-interactive */
.dashboard-glass .dataTables_paginate .page-item.disabled .page-link,
.dashboard-glass .dataTables_paginate .page-item.disabled .page-link:hover,
.dashboard-glass .dataTables_paginate .page-item.disabled .page-link:focus {
    color: rgba(31, 45, 90, 0.32);
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(31, 45, 90, 0.08);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}

/* --- 6.4c Mobile: stack the length + pagination, keep them centred --- */
@media (max-width: 767.98px) {
    .dashboard-glass .table-footer-wrapper .col-md-2,
    .dashboard-glass .table-footer-wrapper .col-md-10 {
        justify-content: center;
    }
    .dashboard-glass .dataTables_paginate {
        justify-content: center;
        margin-top: 0.75rem;
    }
}

/* --- 6.4d Reduced-motion opt-out --- */
@media (prefers-reduced-motion: reduce) {
    .dashboard-glass .dataTables_length select.custom-select,
    .dashboard-glass .dataTables_paginate .page-item .page-link {
        transition: none;
    }
    .dashboard-glass .dataTables_length select.custom-select:hover,
    .dashboard-glass .dataTables_paginate .page-item .page-link:hover {
        transform: none;
    }
}

/* ============================================================================
   7. MY ORDERS (orders.blade.php) — scoped under .orders-glass
   ----------------------------------------------------------------------------
   Applies the SAME light-glass system used on the dashboard (Sections 5 & 6):
   (a) unify the typeface to Poppins, (b) light frosted glass on the tabs card,
   (c) responsive tabs + tables (scroll inside the card), and (d) the identical
   Recent-Orders table treatments — TEAM NAME (centre + indigo), ACTIONS kebab,
   and the un-clipped, compact dropdown menu. Reuses the shared --glass-* tokens.
   Works across all six tab tables (#orderTable, #in-process-datatable, …).
   --------------------------------------------------------------------------- */

/* --- 7.1 SINGLE FONT — unify all orders text to Poppins (icon fonts excluded) */
.orders-glass,
.orders-glass p, .orders-glass a, .orders-glass span, .orders-glass small,
.orders-glass b, .orders-glass strong, .orders-glass td, .orders-glass th,
.orders-glass label,
.orders-glass h1, .orders-glass h2, .orders-glass h3,
.orders-glass h4, .orders-glass h5, .orders-glass h6,
.orders-glass .btn, .orders-glass input, .orders-glass button {
    font-family: 'Poppins', sans-serif !important;
}

/* --- 7.2 DYNAMIC REFRACTION — light frosted glass on the tabs card/panel --- */
.orders-glass .card {
    position: relative;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius-sm);
}

/* NEW ORDER button: smooth glass hover lift (keeps theme colour) */
.orders-glass .btn-first {
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.orders-glass .btn-first:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 45, 90, 0.18);
}

/* New Order — reuses .designs-cta (§22) circular green glass icon button */

/* --- 7.3 RESPONSIVE — six equal tab pills in ONE row (desktop/tablet).
   Visual styling still comes from the project-wide Liquid Chrome section (§16);
   here we override the §16 168px min-width floor and flex-wrap so all six
   order-status tabs share a single row from ~576px upward. Pills shrink via
   clamp() typography/padding; phones stack 2-up then 1-up. */
.orders-glass .order-tabs .card-body {
    min-width: 0;
}
.orders-glass .order-tabs .nav-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(4px, 0.55vw, 10px);
    border-bottom: 0;
    width: 100%;
    padding-top: 5px;           /* room for corner step badges that sit above the rim */
}
.orders-glass .order-tabs .nav-tabs .nav-item,
.orders-glass .order-tabs .nav-tabs .main-new-tab {
    margin: 0;
    min-width: 0;
    width: auto !important;   /* beat legacy inline .main-new-tab widths */
}
/* Each pill fills its grid cell; fluid sizing beats the §16 168px / 46px floor. */
.orders-glass .order-tabs .nav-tabs .nav-link:not(.myCustomTab) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    height: clamp(36px, 32px + 0.85vw, 46px);
    padding: 0 clamp(3px, 0.35vw + 2px, 18px);
    font-size: clamp(9px, 7px + 0.42vw, 14px);
    gap: clamp(3px, 0.35vw, 8px);
    border-radius: clamp(12px, 10px + 0.35vw, 16px);
}
/* --- 7.3a CORNER STEP BADGES — notification-style circles on #myTab pills.
   Badge HTML unchanged; position:absolute pulls the number off the label row so
   the chrome pill centres only the tab text. Mirrors the header .badge-circle
   pin (§17 header) but sized for single-digit step numbers 1–6. */
.orders-glass .order-tabs #myTab .nav-link:not(.myCustomTab) .badge {
    position: absolute;
    top: -4px;
    right: -3px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(15px, 13px + 0.35vw, 19px);
    height: clamp(15px, 13px + 0.35vw, 19px);
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    font-size: clamp(8px, 6px + 0.22vw, 10px);
    font-weight: 700;
    line-height: 1;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.22),
        0 0 0 1.5px rgba(255, 255, 255, 0.9);
}
.orders-glass .order-tabs #myTab .nav-link.active .badge-primary {
    background-color: #1bc943 !important;
}

/* FLEXIBLE IMAGES/MEDIA — anything embedded in the orders card scales down to
   its container and never forces horizontal overflow. */
.orders-glass img,
.orders-glass video,
.orders-glass canvas {
    max-width: 100%;
    height: auto;
}

/* Tables scroll horizontally inside their card (no page-level scroll at 360px) */
.orders-glass .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fill the full container width — kills the trailing right-side gap and the
   needless horizontal scrollbar. autoWidth is disabled in the DataTables init
   (datatables.min.js) so the browser distributes the 6 columns across 100% of
   the card instead of DataTables assigning odd fixed pixel widths. */
.orders-glass .order-tabs table.dataTable,
.orders-glass .order-tabs table.table,
.orders-glass .order-tabs table.flg-pill-table {
    width: 100% !important;
    margin: 0;
}

/* CSS MEDIA QUERIES — tune pill density; grid stays 6-up until phone breakpoint. */
/* Small laptop / sidebar-visible (~768–991px): slightly tighter chrome cavity. */
@media (max-width: 991.98px) {
    .orders-glass .order-tabs .nav-tabs .nav-link:not(.myCustomTab)::after {
        inset: 1.5px;
        border-radius: clamp(10px, 8px + 0.3vw, 14px);
    }
}
/* Narrow tablet: allow sideways scroll inside the card instead of wrapping. */
@media (max-width: 767.98px) and (min-width: 576px) {
    .orders-glass .order-tabs .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .orders-glass .order-tabs .nav-tabs {
        min-width: 100%;
    }
}
/* Phones: 2-up grid with compact pills so labels still read cleanly. */
@media (max-width: 575.98px) {
    .orders-glass .card-body { padding: 1rem; }
    .orders-glass .order-tabs .nav-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .orders-glass .order-tabs .nav-tabs .nav-link:not(.myCustomTab) {
        height: 42px;
        padding: 0 10px;
        gap: 6px;
        font-size: 12px;
    }
    .orders-glass .order-tabs #myTab .nav-link:not(.myCustomTab) .badge {
        top: -3px;
        right: -2px;
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
}
/* Very small (≤380px): single full-width column stack. */
@media (max-width: 380px) {
    .orders-glass .order-tabs .nav-tabs {
        grid-template-columns: 1fr;
    }
}

/* --- 7.4 ALIGNMENT (match dashboard) + TEAM NAME column treatment --- */
.orders-glass .order-tabs table.table thead th {
    text-align: left;
    vertical-align: middle;
    font-weight: 600;
    border-top: 0;
}
.orders-glass .order-tabs table.table tbody td {
    text-align: left;
    vertical-align: middle;
}
.orders-glass .order-tabs table.table thead th.text-center,
.orders-glass .order-tabs table.table tbody td.text-center {
    text-align: center;
}
/* TOTAL (5th column) is numeric/currency — right-align header + value for a
   clean ledger edge and to push content toward the container's right side. */
.orders-glass .order-tabs table thead th:nth-child(5),
.orders-glass .order-tabs table tbody td:nth-child(5) {
    text-align: right;
    white-space: nowrap;
}
/* TEAM NAME (2nd column): centre header + value, primary indigo, match size.
   inherit normalises the .order-num <p> to the surrounding td text (like the
   dashboard). Scoped to td:nth-child(2) so the ORDER + PRODUCT cols are safe. */
.orders-glass .order-tabs table thead th:nth-child(2),
.orders-glass .order-tabs table tbody td:nth-child(2) {
    text-align: center;
}
.orders-glass .order-tabs table tbody td:nth-child(2) .order-num {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    color: var(--glass-primary) !important;
    font-weight: 500 !important;
}
/* PRODUCT column (3rd col): compact description under title (FLG Pill Table cell). */
.orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(3) .order-num,
.orders-glass .order-tabs table tbody td:nth-child(3) .order-num {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

/* --- 7.4b FLG Pill Table — all six order tabs (desktop/tablet ≥768px) --- */
@media (min-width: 768px) {
    .orders-glass .order-tabs {
        --ro-w-order: clamp(7.75rem, 7vw, 9.25rem);
        --ro-w-team: clamp(7rem, 8vw, 10rem);
        --ro-w-status: clamp(6.25rem, 7vw, 9rem);
        --ro-w-total: clamp(5rem, 5vw, 6.5rem);
        --ro-w-actions: 8%;
    }
    .orders-glass .order-tabs table.flg-pill-table thead th:nth-child(1),
    .orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(1) {
        width: var(--ro-w-order);
        max-width: var(--ro-w-order);
    }
    .orders-glass .order-tabs table.flg-pill-table thead th:nth-child(2),
    .orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(2) {
        width: var(--ro-w-team);
        max-width: var(--ro-w-team);
    }
    .orders-glass .order-tabs table.flg-pill-table thead th:nth-child(3),
    .orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(3),
    .orders-glass .order-tabs table.flg-pill-table tbody td.flg-pill-table__cell--product {
        width: auto;
        min-width: 0;
    }
    .orders-glass .order-tabs table.flg-pill-table thead th:nth-child(4),
    .orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(4) {
        width: var(--ro-w-status);
        max-width: var(--ro-w-status);
    }
    .orders-glass .order-tabs table.flg-pill-table thead th:nth-child(5),
    .orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(5) {
        width: var(--ro-w-total);
        max-width: var(--ro-w-total);
    }
    .orders-glass .order-tabs table.flg-pill-table thead th:nth-child(6),
    .orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(6) {
        width: var(--ro-w-actions);
        max-width: var(--ro-w-actions);
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap;
    }
    .orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(1) .order-title,
    .orders-glass .order-tabs table.flg-pill-table tbody td:nth-child(2) .order-num {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --- 7.5 ACTIONS — visible glass kebab (mirror of Section 6.1) --- */
.orders-glass .order-tabs table tbody td:last-child { text-align: center; }
.orders-glass .order-tabs td:last-child .dropdown { display: inline-block; }

.orders-glass .order-tabs .btn_remove_radius {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    border-radius: 50% !important;
    color: var(--glass-accent) !important;
    background: var(--glass-bg-card) !important;
    border: 1px solid var(--glass-card-border) !important;
    box-shadow: var(--glass-card-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), border-color var(--glass-transition);
}
.orders-glass .order-tabs .btn_remove_radius i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
}
.orders-glass .order-tabs .btn_remove_radius:hover,
.orders-glass .order-tabs .btn_remove_radius:focus,
.orders-glass .order-tabs .dropdown.show .btn_remove_radius {
    background: var(--glass-pill-active) !important;
    border-color: var(--glass-border-strong) !important;
    box-shadow: 0 4px 14px rgba(76, 129, 222, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #2a5298 !important;
    transform: translateY(-1px);
}

/* --- 7.6 Let the open menu ESCAPE the overflow clip + sit above the panel ---
   .dropdown-open is toggled by JS (orders.blade.php) only while a menu is open,
   so horizontal table scrolling still works the rest of the time. */
.orders-glass .table-responsive.dropdown-open { overflow: visible !important; }
.orders-glass .card.dropdown-open {
    overflow: visible !important;
    position: relative;
    z-index: 1050;
}
.orders-glass .card.dropdown-open .card-body,
.orders-glass .card.dropdown-open .tab-content,
.orders-glass .card.dropdown-open .tab-pane.active {
    overflow: visible !important;
}
.orders-glass .order-tabs .dropdown-menu { z-index: 1060; }
/* Pin the open menu under the kebab, RIGHT-aligned so it opens leftward and
   never spills past the right edge (overrides Popper's inline transform/left). */
.orders-glass .order-tabs .dropdown.show .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 0.35rem;
}

/* --- 7.7 Compact, tidy menu items (mirror of Section 6.3) --- */
.orders-glass .order-tabs .dropdown-menu.dropdown-menu-xl {
    min-width: 13.5rem;
    padding: 6px !important;
    border-radius: 14px;
    border: 1px solid var(--glass-card-border);
    box-shadow: 0 12px 30px rgba(31, 45, 90, 0.18);
}
.orders-glass .order-tabs .dropdown-menu .box-main,
.orders-glass .order-tabs .dropdown-menu .box-main1 {
    padding: 3px !important;
}
.orders-glass .order-tabs .dropdown-menu .prnt {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px !important;
    border-radius: 10px;
    border: 0 !important;
    text-align: center;
    transition: background var(--glass-transition), transform var(--glass-transition);
}
.orders-glass .order-tabs .dropdown-menu .prnt:hover {
    background: var(--glass-pill-active) !important;
    transform: translateY(-1px);
}
.orders-glass .order-tabs .dropdown-menu .prnt i,
.orders-glass .order-tabs .dropdown-menu .prnt svg {
    display: block !important;
    width: 17px;
    height: 17px;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: var(--glass-accent) !important;
    filter: none !important;
}
.orders-glass .order-tabs .dropdown-menu .prnt span[class^="txt-last"],
.orders-glass .order-tabs .dropdown-menu .prnt span[class*=" txt-last"] {
    float: none !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    font-size: 11px !important;
    text-align: center;
    white-space: nowrap;
}

/* --- 7.7a Disabled action (same gating as dashboard §6.3a): greyed + non-clickable ---
   Keep pointer-events so packing-list pending tips can show on hover. */
.orders-glass .order-tabs .dropdown-menu .prnt.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
    filter: grayscale(100%);
}
.orders-glass .order-tabs .dropdown-menu .prnt.is-disabled:hover {
    background: transparent !important;
    transform: none;
}
.orders-glass .order-tabs .dropdown-menu .prnt.is-disabled i,
.orders-glass .order-tabs .dropdown-menu .prnt.is-disabled svg {
    color: #9aa1b2 !important;
}
.orders-glass .order-tabs .dropdown-menu .prnt.is-disabled[data-tip] {
    position: relative;
}
.orders-glass .order-tabs .dropdown-menu .prnt.is-disabled[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: min(220px, 60vw);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(31, 45, 90, 0.12);
    background: rgba(255, 255, 255, 0.98);
    color: #5a6280;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 24px rgba(31, 45, 90, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.orders-glass .order-tabs .dropdown-menu .prnt.is-disabled[data-tip]:hover::after,
.orders-glass .order-tabs .dropdown-menu .prnt.is-disabled[data-tip]:focus::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.orders-glass .order-tabs .dropdown-menu .dispute_btn { cursor: pointer; }
.orders-glass .order-tabs .dropdown-menu .dispute_btn i {
    color: #e0556b !important;
}

/* --- 7.6 TABLE SEARCH — DataTables filter (all six order tabs) ---
   Mirrors §22.5 designs-toolbar search: frosted pill input, magnifier icon,
   hidden "Search:" label text (icon + a11y label text remain in DOM). Scoped to
   .search-order-datatable so other DataTables pages stay untouched. --- */
.orders-glass .order-tabs .search-order-datatable {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0 0 0.65rem;
}
.orders-glass .order-tabs .search-order-datatable .dataTables_filter {
    float: none;
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 0;
    text-align: left !important;
}
.orders-glass .order-tabs .search-order-datatable .dataTables_filter label {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    font-size: 0; /* hide default "Search:" text node */
    line-height: 0;
}
.orders-glass .order-tabs .search-order-datatable .dataTables_filter label input[type="search"] {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 14px 0 38px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: normal;
    color: #1f2d5a;
    border-radius: 999px;
    border: 1px solid rgba(31, 45, 90, 0.14);
    background-color: rgba(255, 255, 255, 0.78);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%239aa1b2'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 14px 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    transition: border-color var(--glass-transition), box-shadow var(--glass-transition),
                background-color var(--glass-transition), transform var(--glass-transition);
}
.orders-glass .order-tabs .search-order-datatable .dataTables_filter label input[type="search"]::placeholder {
    color: rgba(31, 45, 90, 0.42);
    font-weight: 400;
}
.orders-glass .order-tabs .search-order-datatable .dataTables_filter label input[type="search"]:hover {
    border-color: rgba(31, 45, 90, 0.22);
    background-color: rgba(255, 255, 255, 0.88);
}
.orders-glass .order-tabs .search-order-datatable .dataTables_filter label input[type="search"]:focus {
    outline: none;
    border-color: rgba(224, 85, 107, 0.45);
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 3px rgba(224, 85, 107, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.orders-glass .order-tabs .search-order-datatable .dataTables_filter label input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    margin-right: 2px;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%239aa1b2'%3E%3Cpath d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 20.3 350.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Showing 1 to N of N entries" — muted caption under search */
.orders-glass .order-tabs .dataTables_wrapper > .row:first-child > .col-md-12 {
    padding: 0 0 0.75rem;
}
.orders-glass .order-tabs .dataTables_wrapper > .row:first-child .divider {
    height: 1px;
    border: 0;
    margin: 0 0 0.65rem;
    background: linear-gradient(90deg,
        rgba(31, 45, 90, 0) 0%,
        rgba(60, 68, 177, 0.12) 50%,
        rgba(31, 45, 90, 0) 100%);
}
.orders-glass .order-tabs .dataTables_info {
    padding: 0;
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(31, 45, 90, 0.62);
}

@media (max-width: 767.98px) {
    .orders-glass .order-tabs .search-order-datatable {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }
    .orders-glass .order-tabs .search-order-datatable .dataTables_filter {
        max-width: none;
    }
    .orders-glass .order-tabs .dataTables_wrapper > .row:first-child > .col-md-12 {
        padding-bottom: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orders-glass .order-tabs .search-order-datatable .dataTables_filter label input[type="search"] {
        transition: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .orders-glass .order-tabs .search-order-datatable .dataTables_filter label input[type="search"] {
        background-color: #ffffff;
    }
}

/* --- 7.7 TABLE FOOTER — "Show … entries" + pagination (DataTables) ---
   Mirrors §6.4 dashboard footer: glass pill length select, gradient active
   page, soft divider. Scoped to .order-tabs so all six tab tables match. --- */
.orders-glass .order-tabs .table-footer-wrapper {
    position: sticky;
    left: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    padding: 0.85rem 0 0.15rem;
    box-sizing: border-box;
}
.orders-glass .order-tabs .table-footer-wrapper .divider {
    height: 1px;
    border: 0;
    margin: 0 0 0.85rem;
    background: linear-gradient(90deg,
        rgba(31, 45, 90, 0) 0%,
        rgba(60, 68, 177, 0.14) 50%,
        rgba(31, 45, 90, 0) 100%);
}
.orders-glass .order-tabs .table-footer-wrapper .row {
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}
.orders-glass .order-tabs .table-footer-wrapper .col-md-6:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Length control — "Show [n] entries" */
.orders-glass .order-tabs .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: rgba(31, 45, 90, 0.72);
    white-space: nowrap;
}
.orders-glass .order-tabs .dataTables_length select,
.orders-glass .order-tabs .dataTables_length select.custom-select {
    height: 34px;
    width: auto;
    min-width: 68px;
    padding: 0 2rem 0 0.85rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--glass-primary);
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid var(--glass-card-border);
    background-color: var(--glass-bg-card);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233c44b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right 0.55rem center;
    background-size: auto, 15px 15px;
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition), background-color var(--glass-transition);
}
.orders-glass .order-tabs .dataTables_length select:hover,
.orders-glass .order-tabs .dataTables_length select.custom-select:hover {
    border-color: var(--glass-border-strong);
    transform: translateY(-1px);
    box-shadow: var(--glass-card-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.orders-glass .order-tabs .dataTables_length select:focus,
.orders-glass .order-tabs .dataTables_length select.custom-select:focus {
    outline: none;
    border-color: var(--glass-accent);
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.orders-glass .order-tabs .dataTables_length select option {
    color: #1f2d5a;
    background: #ffffff;
}

/* Pagination — glass pills + primary gradient active page */
.orders-glass .order-tabs .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 0;
    margin: 0;
}
.orders-glass .order-tabs .dataTables_paginate .pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.orders-glass .order-tabs .dataTables_paginate .page-item {
    margin: 0;
}
.orders-glass .order-tabs .dataTables_paginate .page-item .page-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.75rem;
    margin: 0 !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--glass-primary);
    border: 1px solid var(--glass-card-border) !important;
    border-radius: 999px !important;
    background-color: var(--glass-bg-card);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition), background var(--glass-transition),
                color var(--glass-transition);
}
.orders-glass .order-tabs .dataTables_paginate .page-item .page-link:hover,
.orders-glass .order-tabs .dataTables_paginate .page-item .page-link:focus {
    outline: none;
    color: #2a5298;
    border-color: var(--glass-border-strong) !important;
    background: var(--glass-pill-active);
    box-shadow: 0 6px 16px rgba(76, 129, 222, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}
.orders-glass .order-tabs .dataTables_paginate .page-item.active .page-link,
.orders-glass .order-tabs .dataTables_paginate .page-item.active .page-link:hover,
.orders-glass .order-tabs .dataTables_paginate .page-item.active .page-link:focus {
    color: #ffffff !important;
    border-color: transparent !important;
    background-color: transparent;
    background-image: linear-gradient(135deg, var(--glass-accent-2), var(--glass-primary)) !important;
    box-shadow: 0 6px 18px rgba(60, 68, 177, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transform: none;
}
.orders-glass .order-tabs .dataTables_paginate .page-item.disabled .page-link,
.orders-glass .order-tabs .dataTables_paginate .page-item.disabled .page-link:hover,
.orders-glass .order-tabs .dataTables_paginate .page-item.disabled .page-link:focus {
    color: rgba(31, 45, 90, 0.32) !important;
    background: rgba(255, 255, 255, 0.45) !important;
    background-image: none !important;
    border-color: rgba(31, 45, 90, 0.08) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}

@media (max-width: 767.98px) {
    .orders-glass .order-tabs .table-footer-wrapper .col-md-6 {
        justify-content: center;
        text-align: center;
    }
    .orders-glass .order-tabs .table-footer-wrapper .col-md-6:last-child {
        justify-content: center;
        margin-top: 0.65rem;
    }
    .orders-glass .order-tabs .dataTables_paginate {
        justify-content: center;
    }
    .orders-glass .order-tabs .dataTables_length label {
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orders-glass .order-tabs .dataTables_length select,
    .orders-glass .order-tabs .dataTables_paginate .page-item .page-link {
        transition: none;
    }
    .orders-glass .order-tabs .dataTables_length select:hover,
    .orders-glass .order-tabs .dataTables_paginate .page-item .page-link:hover {
        transform: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .orders-glass .order-tabs .dataTables_length select,
    .orders-glass .order-tabs .dataTables_paginate .page-item .page-link {
        background-color: #ffffff;
    }
}

/* --- 7.8 FALLBACK — no backdrop-filter: keep solid white card (legible) --- */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .orders-glass .card { background-color: #ffffff; }
}

/* ===========================================================================
   8. PRICE SUMMARY PANEL  (order-summary page — order.blade.php)
   ---------------------------------------------------------------------------
   APPEARANCE-ONLY refinement of the dynamic "Price Summary" panel. Scoped to
   .price_summry so it styles BOTH the server-rendered rows AND the markup that
   JS injects on quantity change — `$('.final_prices_to_appends').html(data.view)`
   swaps in partials/quote_final_prices.blade.php, which lives inside the same
   .price_summry wrapper, so it inherits this styling automatically.

   NOTHING about the data, the computed values, the `$1,050.00` currency format,
   or the qty-recompute JS is touched. This is pure CSS reusing the shared
   light-glass tokens (--glass-bg-card / --glass-card-sheen / --glass-card-border
   / --glass-card-shadow / --glass-radius-sm / --glass-blur-sm / --glass-primary).
   The Total keeps its existing `.green` colour (we only add weight/size emphasis).
   =========================================================================== */

/* --- 8.1 SINGLE FONT — unify the panel to Poppins (matches dashboard/orders) */
.price_summry,
.price_summry p,
.price_summry span,
.price_summry h3, .price_summry h4, .price_summry h5,
.price_summry .fw-600 {
    font-family: 'Poppins', sans-serif !important;
}

/* --- 8.2 DYNAMIC REFRACTION — the panel becomes a light glass card --- */
.price_summry { padding: 0 !important; }
.price_summry .final_prices_to_appends {
    position: relative;
    overflow: hidden;
    padding: clamp(14px, 1.6vw, 20px) !important;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border) !important;
    border-radius: var(--glass-radius-sm) !important;
    box-shadow: var(--glass-card-shadow) !important;
    color: #2b2f45;
    min-width: 0;
}
/* Soft specular sheen (light-refraction highlight, top-left) */
.price_summry .final_prices_to_appends::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(120% 60% at 0% 0%,
                rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%);
    z-index: 0;
}
.price_summry .final_prices_to_appends > * { position: relative; z-index: 1; }

/* --- 8.3 Heading — clean Poppins title, no flat grey bar --- */
.price_summry .final_prices_to_appends > h3,
.price_summry .final_prices_to_appends > h4 {
    margin: 0 0 clamp(10px, 1.2vw, 14px) !important;
    padding: 0 0 10px !important;
    background: none !important;
    color: var(--glass-primary);
    font-weight: 600;
    font-size: clamp(17px, 1.9vw, 20px);
    border-bottom: 1px solid rgba(60, 68, 177, 0.12);
}

/* --- 8.4 RESPONSIVE ROWS — label left, value right, neatly aligned ---
   `:has(> span)` targets only the value rows (label + amount), so any plain
   paragraphs in the payment/submit panels are left untouched. */
.price_summry .final_prices_to_appends p:has(> span) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: clamp(5px, 0.8vw, 8px) 0 !important;
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.4;
    color: #4a4f6a;
}
.price_summry .final_prices_to_appends p:has(> span) > span {
    float: none !important;            /* override custom.css float:right */
    margin-left: auto;
    text-align: right;
    font-weight: 500;
    color: #2b2f45;
    font-variant-numeric: tabular-nums; /* digits align in a tidy column */
    white-space: nowrap;
}
/* Spacer line used inside the injected partial */
.price_summry .final_prices_to_appends p.half-line { padding: 2px 0 !important; }

/* --- 8.5 Divider above the Total --- */
.price_summry .final_prices_to_appends hr {
    margin: clamp(8px, 1vw, 12px) 0 !important;
    border: 0;
    border-top: 1px solid rgba(60, 68, 177, 0.14);
}

/* --- 8.6 TOTAL — preserve the existing green, add clear emphasis --- */
.price_summry .final_prices_to_appends p:has(> span.green) {
    padding-top: clamp(8px, 1vw, 12px) !important;
    font-size: clamp(15px, 1.7vw, 17px);
    font-weight: 600;
    color: #2b2f45;
}
.price_summry .final_prices_to_appends .green {
    /* keep the app's existing green (#4CAF50 from xroad.css) — re-asserted here
       because the right-aligned value rule above would otherwise recolour it */
    color: #4CAF50 !important;
    font-weight: 600 !important;
    font-size: clamp(16px, 1.9vw, 19px);
}

/* --- 8.7 RESPONSIVE — fit cleanly under the cart on small screens --- */
@media (max-width: 575.98px) {
    .price_summry { padding: 0 !important; }
    .price_summry .final_prices_to_appends { padding: 14px !important; }
}

/* --- 8.9 SHIPPING DETAILS HEADING — match the app's themed headings --- */
.shipping-glass h4.fw-600 {
    color: var(--glass-primary);
    font-weight: 700;
    letter-spacing: 0.2px;
}
.shipping-glass > .bg-lightgray > .card.card-box > .card-body > .row > .col-sm-12.p-4 > p {
    color: var(--glass-ink-soft, #5a6072);
    margin-bottom: 0;
}

/* --- 8.10 ADDRESS CARDS — glass billing/shipping blocks --- */
.shipping-glass .addr-section-title {
    color: var(--glass-primary);
    font-weight: 700;
    margin-bottom: 8px;
}
.shipping-glass .addr-card {
    position: relative;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 22px rgba(15, 23, 53, 0.08);
}
.shipping-glass .addr-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 14px;
}
.shipping-glass .addr-text {
    color: #1c2333;
    font-weight: 600;
    font-size: 15px;
}
.shipping-glass .addr-phone {
    color: #5a6072;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.shipping-glass .addr-phone i { color: var(--glass-primary); }
.shipping-glass .addr-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--glass-primary);
    background: rgba(60, 68, 177, 0.10);
    border: 1px solid rgba(60, 68, 177, 0.18);
    padding: 3px 10px;
    border-radius: 999px;
}
.shipping-glass .addr-empty { color: #98a0b3; font-style: italic; }
.shipping-glass .addr-warning {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c0392b;
    font-weight: 600;
    font-size: 13px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.18);
    border-radius: 10px;
    padding: 7px 12px;
    margin-bottom: 12px;
}

/* Pending confirm: preview shown but not attached to the order */
.shipping-glass .addr-card--needs-confirm {
    border-color: rgba(224, 85, 107, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 0 1px rgba(224, 85, 107, 0.18),
        0 8px 22px rgba(15, 23, 53, 0.08);
}
.shipping-glass .addr-confirm-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #9b3a4a;
    background: rgba(224, 85, 107, 0.10);
    border: 1px solid rgba(224, 85, 107, 0.22);
}
.shipping-glass .addr-confirm-hint i {
    color: #e0556b;
}

/* Soft idle pulse on confirm CTAs while address is pending */
.shipping-glass .addr-card--needs-confirm .js-addr-confirm-btn {
    animation: xrg-addr-confirm-soft 2.4s ease-in-out infinite;
}
.shipping-glass .js-addr-confirm-btn.addr-confirm-burst {
    animation: xrg-addr-confirm-burst 0.55s ease-in-out 4;
}

@keyframes xrg-addr-confirm-soft {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(60, 68, 177, 0.22);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 20px rgba(224, 85, 107, 0.35);
        transform: scale(1.02);
    }
}
@keyframes xrg-addr-confirm-burst {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(224, 85, 107, 0.45);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(224, 85, 107, 0);
        transform: scale(1.05);
    }
}
@media (prefers-reduced-motion: reduce) {
    .shipping-glass .addr-card--needs-confirm .js-addr-confirm-btn,
    .shipping-glass .js-addr-confirm-btn.addr-confirm-burst {
        animation: none;
    }
}

.shipping-glass .addr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.shipping-glass .glass-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), color var(--glass-transition);
}
.shipping-glass .glass-pill-btn i { font-size: 13px; }
.shipping-glass .glass-pill-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--glass-accent-2, #6ca0ff), var(--glass-accent, #3c44b1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(60, 68, 177, 0.26);
}
.shipping-glass .glass-pill-btn.ghost {
    color: var(--glass-primary);
    background: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(15, 23, 53, 0.06);
}
.shipping-glass .glass-pill-btn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 22px rgba(15, 23, 53, 0.16);
}
.shipping-glass .glass-pill-btn.ghost:hover {
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.16), rgba(60, 68, 177, 0.12));
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .shipping-glass .addr-card { background: #ffffff; }
}

/* --- 8.8 FALLBACK — no backdrop-filter: keep a solid white card (legible) --- */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .price_summry .final_prices_to_appends { background-color: #ffffff; }
}

/* ===========================================================================
   9. ORDER-FLOW STEP TABS  (order-summary page — order.blade.php)
   ---------------------------------------------------------------------------
   APPEARANCE-ONLY restyle of the multi-step tab bar
   (1 PRODUCTS · 2 DESIGNS · 3 ROSTER · 4 SHIPPING · 5 PAYMENT · 6 REVIEW)
   and the BACK / NEXT / ADD PRODUCT buttons, to match the glass language.

   SCOPING: keyed off the UNIQUE `#createNotTab` <ul> id (and the wrapping card
   via `.order-tabs:has(#createNotTab)`) so it can NEVER collide with the
   `.orders-glass .order-tabs` listing tabs, and so the id-based specificity
   cleanly overrides this page's inline <style> rules + the inline green
   `style="color:#1bc943"` on the PRODUCTS tab/badge.

   NOTHING about the markup, tab ids/anchors (#products…#review), `data-toggle`,
   `href`, `.active`/`.parm_active`/`.disabled` hooks, or the showNext()/showPrev()
   JS is changed — Bootstrap tab switching keeps working untouched. Pure CSS,
   reusing the shared --glass-* tokens (--glass-bg-card / --glass-card-sheen /
   --glass-card-border / --glass-card-shadow / --glass-radius / --glass-radius-sm
   / --glass-primary / --glass-pill-active / --glass-pill-shadow / --glass-blur-sm
   / --glass-transition) and the .glass-pill highlight language.
   =========================================================================== */

/* --- 9.1 SINGLE FONT — unify the step-flow card + header to Poppins --- */
.content-inner .order_title,
.content-inner .order_title h3,
.content-inner .order_title p,
.content-inner .order_title sub,
.order-tabs:has(#createNotTab),
.order-tabs:has(#createNotTab) .nav-link,
.order-tabs:has(#createNotTab) .badge,
.order-tabs:has(#createNotTab) .btn {
    font-family: 'Poppins', sans-serif !important;
}

/* --- 9.2 DYNAMIC REFRACTION — the step-tab card becomes a light glass card ---
   IMPORTANT — do NOT put backdrop-filter / filter / transform back on THIS
   element. This .order-tabs card is the OUTERMOST wrapper of the whole order
   editor: it contains every tab-pane, including #payment → #cash-app-pay.
   Square's Cash App Pay desktop "Scan to Pay" QR is an in-page overlay rendered
   position:fixed inside an open shadow root. Per the CSS spec, an ancestor whose
   backdrop-filter / filter / transform is not "none" becomes the containing block
   for its fixed-positioned descendants — even across the shadow boundary. While
   the blur lived on THIS card, Square's modal was trapped inside the .order-tabs
   box (offset right by the sidebar and narrower than the viewport) instead of the
   viewport, so its QR panel and its instructions panel spread apart and drifted
   left of centre — the reported "scattered / not-unified modal". The inner
   .payment-glass .col-md-9 card was fixed the same way earlier; THIS card was the
   remaining containing-block trap in the ancestor chain.
   Fix: keep the element free of containing-block-forming properties and paint the
   frosted glass on a z-index:-1 ::before layer (isolation:isolate scopes it, and
   backdrop-filter already made this a stacking context, so stacking is unchanged).
   The modal now escapes to the viewport and centres as one clean dialog. */
.order-tabs:has(#createNotTab) {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius-sm);
}
.order-tabs:has(#createNotTab)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    pointer-events: none;
}

/* --- 9.3 STEPPER LAYOUT — 6 equal-width steps in one row joined by rails ---
   Every step is an equal flex column (circle over label). A thin connector rail
   is drawn behind each circle joining it to the previous step; the rail LEADING
   INTO a reached step (completed or active) fills solid green. No horizontal
   page scroll: the row shrinks to fit and collapses to a circle-only rail on
   phones (labels hidden, only the active step is captioned — see §9.7). */
#createNotTab.nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--glass-card-border);
    padding: clamp(6px, 1vw, 12px) clamp(2px, 1vw, 10px) clamp(10px, 1.4vw, 16px);
}
#createNotTab .nav-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    z-index: 0;
}
/* Override the legacy per-breakpoint fixed min-widths (135/95/140px) the blade
   sets on these <li>s for the OLD pill layout — the stepper wants equal widths
   and must never force horizontal scroll. */
.order-tabs:has(#createNotTab) .main-col-tab,
.order-tabs:has(#createNotTab) .main-new-tab {
    min-width: 0 !important;
    max-width: none !important;
}
/* Connector rail — sits behind the badges. left:-50% + width:100% spans from the
   PREVIOUS step's centre to THIS step's centre (steps are equal width). */
#createNotTab .nav-item::before {
    content: "";
    position: absolute;
    top: 34px;                            /* == badge vertical centre (16px pad + 18) */
    left: -50%;
    width: 100%;
    height: 3px;
    transform: translateY(-50%);
    background: #d9dce8;                  /* upcoming rail */
    border-radius: 3px;
    z-index: 1;
    transition: background var(--glass-transition);
}
#createNotTab .nav-item:first-child::before { display: none; }
/* Rail leading into a reached step (completed OR active) turns solid green */
#createNotTab .nav-item:has(.badge-success)::before,
#createNotTab .nav-item:has(.myCustomTab.active)::before,
#createNotTab .nav-item:has(.myCustomTab.parm_active)::before {
    background: #1bc943;
}
/* Incomplete (left behind with missing info) — red rail into that step */
#createNotTab .nav-item:has(.tab-error)::before {
    background: #e0556b;
}

/* --- 9.4 THE STEPS — vertical (circle over label), transparent hit-area --- */
#createNotTab .nav-link.myCustomTab {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 6px 12px !important;
    border: 0 !important;
    border-radius: var(--glass-radius-sm) !important;
    background-color: transparent !important;
    color: #8a8fa6 !important;            /* upcoming/neutral step label */
    font-size: clamp(11px, 1.15vw, 13px);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    transition: color var(--glass-transition);
}
/* Hover (only enabled steps; .disabled keeps Bootstrap pointer-events:none) */
#createNotTab .nav-link.myCustomTab:hover {
    background-color: transparent !important;
    color: var(--glass-primary) !important;
}
/* Disabled / upcoming steps — muted, clearly not yet reachable */
#createNotTab .nav-link.myCustomTab.disabled {
    color: #b3b7c7 !important;
    opacity: 1;
}
/* Completed step label — subtle green so it reads as "done" */
#createNotTab .nav-item:has(.badge-success) .nav-link.myCustomTab:not(.active):not(.parm_active):not(.tab-error) {
    color: #3c9a54 !important;
}
/* ACTIVE step label — primary indigo, emphasised.
   id-scope + !important beats the inline style="color:#1bc943;background:#fff". */
#createNotTab .nav-link.myCustomTab.active,
#createNotTab .nav-link.myCustomTab.parm_active {
    background-color: transparent !important;
    color: var(--glass-primary) !important;
    font-weight: 700;
}

/* --- 9.5 STEP CIRCLES — numbered chips that morph per state ---
   In this page's JS: upcoming = .badge-dark (grey), completed = .badge-success
   on a NON-active step (green + check), active = the .active/.parm_active step
   (solid indigo, keeps its number). The white ring masks the rail behind. */
#createNotTab .nav-item .badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff !important;
    background: #d9dce8 !important;       /* upcoming chip */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);   /* clears the rail off the rim */
    transition: background var(--glass-transition), box-shadow var(--glass-transition),
                transform var(--glass-transition);
}
/* COMPLETED circle (badge-success, NOT the active step) — green fill + check glyph.
   font-size:0 hides the number; the ::before draws fa-check. */
#createNotTab .nav-link.myCustomTab:not(.active):not(.parm_active):not(.tab-error) .badge.badge-success {
    background: #1bc943 !important;
    font-size: 0 !important;
}
#createNotTab .nav-link.myCustomTab:not(.active):not(.parm_active):not(.tab-error) .badge.badge-success::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";                     /* fa-check */
    font-size: 15px;
    line-height: 1;
    color: #ffffff;
}
/* ACTIVE circle — solid primary indigo + soft halo, keeps its number.
   Higher class-count than the badge-success rule so it wins on the active step. */
#createNotTab .nav-link.myCustomTab.active .badge,
#createNotTab .nav-link.myCustomTab.parm_active .badge {
    background: var(--glass-primary) !important;
    font-size: 14px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),
                0 0 0 7px rgba(60, 68, 177, 0.18);
    transform: scale(1.05);
}
/* INCOMPLETE step — red circle + label (Review surfaces these via tab-error) */
#createNotTab .nav-link.myCustomTab.tab-error .badge {
    background-color: #e0556b !important;
    color: #fff !important;
    font-size: 14px !important;
}
#createNotTab .nav-link.myCustomTab.tab-error,
#createNotTab .nav-link.myCustomTab.tab-error span {
    color: #e0556b !important;
}

/* --- 9.6 BACK / NEXT / ADD PRODUCT — consistent glass-button polish ---
   Keep the recognisable indigo fill; add smooth hover lift + rounding. */
.order-tabs:has(#createNotTab) .btn-first,
.order-tabs:has(#createNotTab) .btn-outline-first {
    border-radius: 12px;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition);
}
.order-tabs:has(#createNotTab) .btn-first:not(:disabled):hover,
.order-tabs:has(#createNotTab) .btn-outline-first:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(60, 68, 177, 0.22);
}
.order-tabs:has(#createNotTab) .btn:disabled,
.order-tabs:has(#createNotTab) .btn.disabled {
    transform: none;
    box-shadow: none;
}

/* --- 9.7 RESPONSIVE — compact circle rail; only the active step is labelled ---
   Below 768px the 6 labels can't fit at 360px, so we hide them (font-size:0 on
   the step) and keep just the numbered circle rail; the ACTIVE step re-shows its
   label beneath its circle so the user always knows where they are. */
@media (max-width: 767.98px) {
    #createNotTab.nav-tabs {
        padding: 10px 2px 12px;
    }
    #createNotTab .nav-item::before { top: 27px; }   /* == 12px pad + 15 (30px chip) */
    #createNotTab .nav-link.myCustomTab {
        gap: 6px;
        padding: 12px 1px 8px !important;
        font-size: 0 !important;                     /* hide labels by default */
    }
    #createNotTab .nav-item .badge {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    #createNotTab .nav-link.myCustomTab.active .badge,
    #createNotTab .nav-link.myCustomTab.parm_active .badge { font-size: 13px !important; }
    #createNotTab .nav-link.myCustomTab:not(.active):not(.parm_active):not(.tab-error) .badge.badge-success::before {
        font-size: 13px;
    }
    /* Reveal ONLY the active step's label under its circle */
    #createNotTab .nav-link.myCustomTab.active,
    #createNotTab .nav-link.myCustomTab.parm_active {
        font-size: 11px !important;
    }
    /* On Review with blocking errors: show the error step in red, not a stale prior step */
    #createNotTab:has(+ .tab-content #review.active) .nav-link.myCustomTab.tab-error {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #e0556b !important;
    }
    #createNotTab:has(+ .tab-content #review.active) .nav-link.myCustomTab.tab-error .badge {
        background-color: #e0556b !important;
        font-size: 13px !important;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),
                    0 0 0 7px rgba(224, 85, 107, 0.22);
    }
    #createNotTab:has(+ .tab-content #review.active):has(.tab-error) #review-tab.active,
    #createNotTab:has(+ .tab-content #review.active):has(.tab-error) #review-tab.parm_active {
        font-size: 0 !important;
    }
    /* Neutralise the legacy fixed min-widths so 6 circles fit at 360px */
    .order-tabs:has(#createNotTab) .main-col-tab,
    .order-tabs:has(#createNotTab) .main-new-tab {
        min-width: 0 !important;
    }
}

/* --- 9.7b MOTION OPT-OUT — respect reduced-motion for the stepper --- */
@media (prefers-reduced-motion: reduce) {
    #createNotTab .nav-item::before,
    #createNotTab .nav-link.myCustomTab,
    #createNotTab .nav-item .badge {
        transition: none;
    }
    #createNotTab .nav-link.myCustomTab.active .badge,
    #createNotTab .nav-link.myCustomTab.parm_active .badge { transform: none; }
}

/* --- 9.8 FALLBACK — no backdrop-filter: keep a solid white card (legible) --- */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .order-tabs:has(#createNotTab) { background-color: #ffffff; }
}

/* ===========================================================================
   10. ROSTER DETAIL PANEL  (roaster_detail.blade.php) — scoped under .roster-glass
   ---------------------------------------------------------------------------
   APPEARANCE-ONLY glass pass on the roster editor that is AJAX-injected into the
   order-summary ROSTER step. Reuses the shared --glass-* light tokens. The three
   glass principles the request asked for are implemented as:
     • Lensing & Refraction  -> frosted translucent panels/cards + frosted inputs
                                (backdrop blur + saturate, thin luminous border).
     • Specular Highlights    -> top sheen overlays on the panel + buttons + rows.
     • Dynamic Morphing       -> smooth hover lift with a border-radius morph and
                                deepening glow on rows, buttons and the new icons.
   NOTHING about the markup data, the Add-Row/Remove/Submit JS, the DUPLICATE
   ROSTER popover, the import modal, the export route, or any DB logic is changed.
   The Import/Export actions are simply ALSO surfaced as small front icons
   (.roster-icon-btn) that reuse the exact same route + modal trigger.
   =========================================================================== */

/* --- 10.1 SINGLE FONT — unify the roster panel to Poppins (icon fonts excluded) */
.roster-glass,
.roster-glass p, .roster-glass a, .roster-glass span, .roster-glass small,
.roster-glass b, .roster-glass strong, .roster-glass label,
.roster-glass h4, .roster-glass h5,
.roster-glass .btn, .roster-glass input, .roster-glass select, .roster-glass button {
    font-family: 'Poppins', sans-serif;
}

/* Compact instruction copy in the ROASTER & DESIGN accordion */
.roster-glass .design_disclaimer {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 12px;
    line-height: 1.45;
}
.roster-glass .design_disclaimer li {
    font-size: 12px;
    font-weight: 500;
    padding-bottom: 5px;
    line-height: 1.45;
}

/* --- 10.2 LENSING & REFRACTION — frosted glass panels + inputs --- */
.roster-glass .card-box,
.roster-glass .panel.roster_tbl {
    position: relative;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius-sm);
}

/* Specular highlight sheen on the roster table panel (kept behind the content) */
.roster-glass .panel.roster_tbl {
    overflow: hidden;
}
.roster-glass .panel.roster_tbl::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(120% 60% at 0% 0%,
                rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%);
    z-index: 0;
}
.roster-glass .panel.roster_tbl > * { position: relative; z-index: 1; }

/* Frosted, refractive inputs/selects — bordered so each box is clearly visible */
.roster-glass .form-control {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
            backdrop-filter: blur(6px) saturate(120%);
    /* Thin, 20% grey outline only */
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(31, 45, 90, 0.06);
    /* ~25% shorter row controls for a denser roster */
    height: 28px;
    padding: 2px 10px;
    line-height: 1.2;
    transition: border-color var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition);
}
.roster-glass .form-control:focus {
    background: #ffffff;
    border-color: rgba(60, 68, 177, 0.55);
    box-shadow: 0 0 0 3px rgba(108, 160, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- 10.3 DYNAMIC MORPHING — each player row lifts + morphs on hover --- */
.roster-glass .addlisting_inputs {
    border-radius: 12px;
    /* Very tight vertical rhythm so 100+ player rosters stay compact (~70% less). */
    padding: 1px 12px;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), border-color var(--glass-transition),
                border-radius var(--glass-transition);
}
.roster-glass .addlisting_inputs:hover {
    background-color: var(--glass-bg-card);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%);
    border-bottom-color: var(--glass-card-border);
    border-radius: 16px;
    box-shadow: var(--glass-card-shadow-hover);
    transform: translateY(-2px);
}

/* --- 10.4 SPECULAR HIGHLIGHTS + MORPH on the buttons --- */
.roster-glass .btn-outline-first,
.roster-glass .btn-default,
.roster-glass .quantity_edit .btn-success {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-radius var(--glass-transition), background var(--glass-transition);
}
.roster-glass .btn-outline-first::after,
.roster-glass .btn-default::after,
.roster-glass .quantity_edit .btn-success::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 45%;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 100%);
}
.roster-glass .btn-outline-first:hover,
.roster-glass .btn-default:hover,
.roster-glass .quantity_edit .btn-success:hover {
    transform: translateY(-2px);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(33, 186, 69, 0.28);
}

/* --- 10.5 IMPORT / EXPORT — small front glass icon buttons --- */
.roster-glass .roster-import-tools {
    margin-top: 0.35rem;
    max-width: 34rem;
}
.roster-glass .roster-import-tools__actions {
    flex-wrap: wrap;
    align-items: center;
}
.roster-glass .roster-import-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    margin-top: 8px;
    padding: 0.4rem 0.75rem 0.4rem 0.55rem;
    border: 1px solid rgba(224, 85, 107, 0.55);
    border-radius: 999px;
    background: linear-gradient(135deg, #fff5f7 0%, #ffe8ec 100%);
    color: #c0392b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(224, 85, 107, 0.45);
    animation: roster-bell-glow 1.6s ease-in-out infinite;
    z-index: 1;
}
.roster-glass .roster-import-bell__pulse {
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(224, 85, 107, 0.55);
    animation: roster-bell-ring 1.6s ease-out infinite;
    pointer-events: none;
}
.roster-glass .roster-import-bell__icon {
    font-size: 14px;
    color: #e0556b;
    animation: roster-bell-shake 1.6s ease-in-out infinite;
}
.roster-glass .roster-import-bell__label {
    white-space: nowrap;
}
.roster-glass .roster-import-bell[aria-expanded="true"] {
    animation: none;
    background: linear-gradient(135deg, #4c81de 0%, #3c44b1 100%);
    border-color: #3c44b1;
    color: #fff;
    box-shadow: 0 4px 14px rgba(60, 68, 177, 0.35);
}
.roster-glass .roster-import-bell[aria-expanded="true"] .roster-import-bell__icon {
    color: #fff;
    animation: none;
}
.roster-glass .roster-import-bell[aria-expanded="true"] .roster-import-bell__pulse {
    display: none;
}
.roster-glass .roster-import-hint {
    display: none;
    margin: 0.55rem 0 0;
    padding: 0.65rem 0.85rem;
    font-size: 12px;
    line-height: 1.45;
    color: #1c2333;
    background: rgba(76, 129, 222, 0.08);
    border: 1px solid rgba(76, 129, 222, 0.28);
    border-left: 3px solid #4c81de;
    border-radius: 10px;
}
.roster-glass .roster-import-hint.is-open,
.roster-glass .roster-import-hint:not([hidden]) {
    display: block;
}
.roster-glass .roster-import-hint[hidden] {
    display: none !important;
}
.roster-glass .roster-import-hint strong {
    color: #3c44b1;
    font-weight: 700;
}
.roster-glass .roster-import-hint em {
    font-style: normal;
    font-weight: 600;
    color: #2a5298;
}
@keyframes roster-bell-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 85, 107, 0.35); transform: scale(1); }
    50% { box-shadow: 0 0 0 8px rgba(224, 85, 107, 0); transform: scale(1.03); }
}
@keyframes roster-bell-ring {
    0% { opacity: 0.85; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes roster-bell-shake {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .roster-glass .roster-import-bell,
    .roster-glass .roster-import-bell__pulse,
    .roster-glass .roster-import-bell__icon {
        animation: none !important;
    }
}
.roster-import-hint--modal {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    font-size: 13px;
    line-height: 1.45;
    color: #1c2333;
    background: rgba(76, 129, 222, 0.08);
    border: 1px solid rgba(76, 129, 222, 0.28);
    border-left: 3px solid #4c81de;
    border-radius: 10px;
}
.roster-import-hint--modal strong { color: #3c44b1; }
.roster-import-hint--modal em {
    font-style: normal;
    font-weight: 600;
    color: #2a5298;
}
.roster-glass .roster-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    margin-top: 8px;
    border-radius: 50%;
    color: var(--glass-accent);
    background: var(--glass-bg-card);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), border-color var(--glass-transition),
                color var(--glass-transition);
}
.roster-glass .roster-icon-btn i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
}
.roster-glass .roster-icon-btn__img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

/* Roster editor AJAX loading state */
.roster-loading,
.roaster-detail > .roster-loading,
.roaster-package-detail > .roster-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    padding: 2rem 1rem;
    color: #3c44b1;
    font-size: 0.95rem;
    font-weight: 600;
}
.roster-loading__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(76, 129, 222, 0.22);
    border-top-color: #4c81de;
    border-radius: 50%;
    animation: roster-spin 0.7s linear infinite;
}
.roster-loading--error {
    color: #e0556b;
}
@keyframes roster-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .roster-loading__spinner { animation: none; border-top-color: #4c81de; }
}

.roster-glass .roster-icon-btn:hover,
.roster-glass .roster-icon-btn:focus {
    color: #2a5298;
    background: var(--glass-pill-active);
    border-color: var(--glass-border-strong);
    box-shadow: 0 6px 16px rgba(76, 129, 222, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-2px) scale(1.05);
    text-decoration: none;
}

/* --- 10.6 Reduced motion + no-backdrop-filter fallbacks --- */
@media (prefers-reduced-motion: reduce) {
    .roster-glass .addlisting_inputs,
    .roster-glass .btn-outline-first,
    .roster-glass .btn-default,
    .roster-glass .quantity_edit .btn-success,
    .roster-glass .roster-icon-btn { transition: none !important; }
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .roster-glass .card-box,
    .roster-glass .panel.roster_tbl { background-color: #ffffff; }
    .roster-glass .roster-icon-btn { background: #ffffff; }
}

/* --- 10.7 RESPONSIVE ROSTER ROW GRID — proportional, aligned columns ---
   The 5 input columns share the row in a 10 / 45 / 15 / 20 / 10 ratio
   (Number / Name / Size / Level / Quantity); the serial no. + delete icon are
   fixed, slim extras. flex-grow ratios keep it fully fluid at any width. */
.roster-glass .addlisting_inputs > ul.nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    margin: 0;
    gap: 8px;
}
.roster-glass .addlisting_inputs > ul.nav > li {
    padding: 0;
    min-width: 0;
}

/* Serial number — 30% smaller + 50% grey, fixed slim column */
.roster-glass .addlisting_inputs .ser,
.roster-glass .addlisting_inputs .sr {
    flex: 0 0 22px;
    width: 22px;
    margin: 0 !important;
    text-align: center;
    font-size: 70%;
    color: rgba(0, 0, 0, 0.5);
}

/* The five input columns: proportional widths via flex-grow ratios */
.roster-glass .addlisting_inputs .num_int   { flex: 10 1 0; }
.roster-glass .addlisting_inputs .name_str  { flex: 45 1 0; }
.roster-glass .addlisting_inputs .size_int  { flex: 15 1 0; }
.roster-glass .addlisting_inputs .level_str { flex: 20 1 0; }
.roster-glass .addlisting_inputs .qty_int   { flex: 10 1 0; }

/* Delete icon — fixed slim column at the end */
.roster-glass .addlisting_inputs > ul.nav > li:last-child {
    flex: 0 0 30px;
    width: 30px;
    text-align: center;
}
.roster-glass .addlisting_inputs .remove_element {
    margin: 0 auto !important;
    color: #e0556b;
    transition: color var(--glass-transition), transform var(--glass-transition);
}
.roster-glass .addlisting_inputs .remove_element:hover {
    color: #c23a4e;
    transform: scale(1.12);
}

/* Inputs fill their column (neutralise the legacy fixed/negative-margin hacks) */
.roster-glass .addlisting_inputs .form-control,
.roster-glass .addlisting_inputs .style-number,
.roster-glass .addlisting_inputs .style-name,
.roster-glass .addlisting_inputs .style-size,
.roster-glass .addlisting_inputs .style-quantity {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}
.roster-glass .addlisting_inputs .qty_int .int_id { display: none; }

/* Alignment: everything centred in its box, Name the only left-aligned one */
.roster-glass .addlisting_inputs .form-control { text-align: center; }
.roster-glass .addlisting_inputs .name_str_input { text-align: left; }

/* --- 10.8 ADD ROW / REMOVE ALL — keep them tidy on one row, spaced --- */
.roster-glass .panel.roster_tbl .panel-heading .row { align-items: center; }
.roster-glass .panel.roster_tbl .panel-heading .col-sm-5 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.roster-glass .panel.roster_tbl .panel-heading .col-sm-5 .btn_add,
.roster-glass .panel.roster_tbl .panel-heading .col-sm-5 .remove_all {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
}
.roster-glass .panel.roster_tbl .panel-heading .remove_all .material-icons {
    margin: 0 6px 0 0 !important;
    font-size: 18px;
}

/* Small screens: roster rows become compact stacked cards */
@media (max-width: 767.98px) {
    .roster-glass > .list-group-item > .d-flex.align-items-start.mt-3 {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    .roster-glass > .list-group-item > .d-flex.align-items-start.mt-3 > div:first-child img {
        width: 96px !important;
        max-width: 96px;
        margin-right: 0 !important;
    }
    .roster-glass > .list-group-item > .d-flex.align-items-start.mt-3 > div:last-child {
        width: 100%;
        min-width: 0;
    }
    .roster-glass h5.fw-600 {
        font-size: 1rem;
        line-height: 1.3;
    }
    .roster-glass .quantity_edit {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 0.35rem;
    }
    .roster-glass .quantity_edit .btn-success {
        min-height: 40px;
        white-space: normal;
        text-align: center;
    }
    .roster-glass > .list-group-item > .d-flex.align-items-start.mt-3 .d-flex:has(#popover),
    .roster-glass .roster-import-tools__actions:has(#popover) {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .roster-glass #popover.btn-outline-first {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 0.35rem !important;
        min-height: 44px;
        white-space: normal;
    }
    .roster-glass .roster-icon-btn {
        margin-left: 0;
        margin-top: 0;
        flex: 0 0 44px;
    }

    .roster-glass .checkbox_list_remove {
        flex-wrap: wrap !important;
        gap: 10px 14px;
    }
    .roster-glass .checkbox_list_remove .custom-control {
        margin-left: 0 !important;
        flex: 0 0 calc(50% - 8px);
        min-height: 36px;
    }

    .roster-glass .panel.roster_tbl .panel-heading .row {
        flex-direction: column;
        gap: 10px;
        margin: 0;
    }
    .roster-glass .panel.roster_tbl .panel-heading .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: left !important;
    }
    .roster-glass .panel.roster_tbl .panel-heading .col-sm-5 {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .roster-glass .panel.roster_tbl .panel-heading .form-inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .roster-glass .panel.roster_tbl .panel-heading #rows_to_add_input {
        width: 4.5rem;
        min-height: 40px;
        font-size: 16px;
    }
    .roster-glass .panel.roster_tbl .panel-heading .btn_add,
    .roster-glass .panel.roster_tbl .panel-heading .remove_all {
        min-height: 40px;
        padding: 0.4rem 0.85rem;
        font-size: 13px;
    }

    .roster-glass .addlisting_inputs {
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid rgba(7, 9, 25, 0.08);
        border-radius: 12px;
        border-bottom: 1px solid rgba(7, 9, 25, 0.08);
    }
    .roster-glass .addlisting_inputs > ul.nav {
        flex-wrap: wrap;
        gap: 8px;
        align-items: stretch;
    }
    .roster-glass .addlisting_inputs .ser,
    .roster-glass .addlisting_inputs .sr {
        flex: 0 0 100%;
        width: 100%;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        margin: 0 0 2px !important;
    }
    .roster-glass .addlisting_inputs .num_int,
    .roster-glass .addlisting_inputs .name_str,
    .roster-glass .addlisting_inputs .size_int,
    .roster-glass .addlisting_inputs .level_str,
    .roster-glass .addlisting_inputs .qty_int {
        flex: 1 1 calc(50% - 4px);
        min-width: calc(50% - 4px);
    }
    .roster-glass .addlisting_inputs .name_str {
        flex: 1 1 100%;
        min-width: 100%;
    }
    .roster-glass .addlisting_inputs > ul.nav > li:last-child {
        flex: 0 0 100%;
        width: 100%;
        text-align: right;
        padding-top: 2px;
    }
    .roster-glass .addlisting_inputs .form-control,
    .roster-glass .addlisting_inputs .style-number,
    .roster-glass .addlisting_inputs .style-name,
    .roster-glass .addlisting_inputs .style-size,
    .roster-glass .addlisting_inputs .style-quantity {
        height: 40px;
        font-size: 16px;
    }

    .roster-glass .panel.roster_tbl table.table {
        display: block;
        margin-bottom: 0;
    }
    .roster-glass .panel.roster_tbl table.table tr {
        display: flex;
        justify-content: flex-end;
    }
    .roster-glass .panel.roster_tbl table.table td:first-child,
    .roster-glass .panel.roster_tbl table.table td:nth-child(2) {
        display: none;
    }
    .roster-glass .roster-total-cell {
        text-align: right !important;
        padding: 6px 0 0 !important;
        width: auto !important;
    }

    .roster-glass a.btn-default[onclick*="submitRoster"] {
        float: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-height: 44px;
        margin: 14px 0 0 !important;
        padding: 0 16px;
        font-size: 16px;
    }

    .roster-glass .card-header .btn-link.btn-lg {
        font-size: 13px;
        padding: 10px 12px;
        white-space: normal;
        text-align: left;
    }
    .roster-glass .accordion.mb-5 {
        margin-bottom: 1rem !important;
    }
}

/* --- 10.9 ROSTER TOTAL — compact glass badge, right-aligned in its cell --- */
.roster-glass .roster-total-cell {
    padding: 8px 12px 8px 0 !important;
    text-align: right !important;
}
.roster-glass .roster-total-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--glass-accent-2, #6ca0ff), var(--glass-accent, #3c44b1));
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(60, 68, 177, 0.24);
}
.roster-glass .roster-total-badge .total {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
}

/* ===========================================================================
   11. IMPORT ROSTER MODAL — "liquid glass bubble" (roaster_detail.blade.php)
   ---------------------------------------------------------------------------
   Redesign of the #import_modal popup to the requested glass-bubble spec. The
   modal is relocated to <body> (see roaster_detail.blade.php) so it is scoped
   by its id here. Spec mapping:
     1. Shape & fill   -> rounded rectangle, Pure White #FFFFFF @ 5% opacity.
     2. Refraction     -> backdrop-filter blur(30px)+saturate warps the editor
                          behind it; dispersion = rainbow light-split edge ring.
     3. Manual blur    -> background blur radius 30 (within the 20–40 range).
     4. Inner shadows  -> the three exact layers below:
          Top Highlight : inset  1px  3px 5px  rgba(255,255,255,.30)
          Bottom Glow   : inset -1px -3px 3px  rgba(255,255,255,.10)
          Depth Anchor  : inset  0    2px 10px rgba(53,53,53,.05)
   The modal's dark dim is lightened so the content behind genuinely refracts
   through the bubble; text is kept dark + softly haloed for legibility.
   =========================================================================== */

/* Order page sets `.modal:not(#confirmationModal){z-index:20}` in a body <style>
   (same specificity as an id+class rule, later in the cascade). Without !important
   the import dialog sits UNDER its own backdrop → full-page blur, no visible popup.
   Match payment-confirm stacking (§22.7). */
#import_modal.modal,
#import_modal.modal.show {
    z-index: 10100 !important;
}
#roster_import_preview_modal.modal,
#roster_import_preview_modal.modal.show {
    z-index: 10110 !important;
}

/* Dim only — no full-window backdrop-filter (that made the whole app look blurred).
   Glass blur stays on .modal-content below. */
body:has(#import_modal.show) .modal-backdrop,
body:has(#import_modal.show) .modal-backdrop.show,
body:has(#roster_import_preview_modal.show) .modal-backdrop,
body:has(#roster_import_preview_modal.show) .modal-backdrop.show {
    z-index: 10090 !important;
    background-color: rgba(18, 28, 48, 0.35);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    opacity: 1 !important;
}

#import_modal .modal-content {
    position: relative;
    /* Readable frosted panel (5% white was invisible over the dim). */
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
            backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 28px;                               /* rounded-rectangle bubble */
    box-shadow:
        inset 1px 3px 5px rgba(255, 255, 255, 0.30),   /* Top Highlight */
        inset -1px -3px 3px rgba(255, 255, 255, 0.10), /* Bottom Glow */
        inset 0 2px 10px rgba(53, 53, 53, 0.05),       /* Depth Anchor */
        0 24px 64px rgba(7, 9, 25, 0.28);              /* lift off the page */
    overflow: hidden;
}

/* Dispersion — subtle rainbow light-splitting ring around the bubble edge.
   A 1px conic-gradient border drawn via mask-composite so only the rim shows. */
#import_modal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 210deg,
        rgba(255, 0, 128, 0.55), rgba(255, 196, 0, 0.55), rgba(0, 255, 170, 0.55),
        rgba(0, 170, 255, 0.55), rgba(170, 0, 255, 0.55), rgba(255, 0, 128, 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
}
/* A soft top-left specular sheen for extra glassy depth */
#import_modal .modal-content::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(130% 80% at 0% 0%,
                rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%);
    z-index: 1;
}
#import_modal .modal-header,
#import_modal .modal-body,
#import_modal .modal-footer { position: relative; z-index: 3; }

/* Translucent header/footer dividers (no flat solid bars on the glass) */
#import_modal .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
#import_modal .modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.18); }

/* Legible text on the glass — dark with a faint white halo */
#import_modal .modal-title,
#import_modal label,
#import_modal .modal-body { color: #1c2333; }
#import_modal .modal-title {
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Custom glass file uploader — hides the native "No file chosen" text and
   shows the chosen roster file name below a styled Choose File button. */
#import_modal .roster-upload {
    text-align: center;
    padding: 6px 0 2px;
}
#import_modal .roster-upload__title {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #1c2333;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Visually hide the native input but keep it accessible + clickable via label */
#import_modal .roster-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    opacity: 0;
}
#import_modal .roster-upload__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
    padding: 11px 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent));
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(7, 9, 25, 0.18);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
#import_modal .roster-upload__btn:hover,
#import_modal .roster-upload__input:focus + .roster-upload__btn {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 22px rgba(7, 9, 25, 0.24);
}
#import_modal .roster-upload__btn i { font-size: 16px; }
#import_modal .roster-upload__name {
    margin-top: 14px;
    font-size: 13px;
    color: #6a7184;
    word-break: break-all;
}
#import_modal .roster-upload__name.has-file {
    color: #1c2333;
    font-weight: 600;
}

/* Import preview confirmation modal */
#roster_import_preview_modal .modal-content {
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
            backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 24px 60px rgba(15, 23, 53, 0.28);
    overflow: hidden;
}
#roster_import_preview_modal .modal-header {
    border-bottom: 1px solid rgba(15, 23, 53, 0.08);
}
#roster_import_preview_modal .modal-footer {
    border-top: 1px solid rgba(15, 23, 53, 0.08);
}
#roster_import_preview_modal .modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1c2333;
}
.roster-import-preview__lead {
    font-size: 13.5px;
    color: #5a6072;
    margin-bottom: 12px;
}
.roster-import-preview__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.roster-import-preview__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.roster-import-preview__chip.is-found {
    color: #1e8e3e;
    background: rgba(30, 142, 62, 0.1);
    border: 1px solid rgba(30, 142, 62, 0.22);
}
.roster-import-preview__chip.is-missing {
    color: #c53030;
    background: rgba(224, 85, 107, 0.1);
    border: 1px solid rgba(224, 85, 107, 0.25);
}
.roster-import-preview__warnings {
    margin-bottom: 12px;
}
.roster-import-preview__warn {
    font-size: 12.5px;
    color: #9b2c2c;
    background: rgba(224, 85, 107, 0.08);
    border: 1px solid rgba(224, 85, 107, 0.2);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
}
.roster-import-preview__table {
    font-size: 13px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    overflow: hidden;
}
.roster-import-preview__table thead th {
    border-top: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6072;
    font-weight: 700;
    background: rgba(108, 160, 255, 0.08);
}
.roster-import-preview__table td {
    vertical-align: middle;
    color: #1c2333;
}
.roster-import-preview__size-miss {
    color: #e0556b;
    font-weight: 600;
}
.roster-import-preview__hint {
    margin-top: 12px;
    font-size: 12.5px;
    color: #5a6072;
}
#roster_import_preview_modal .modal-footer .btn {
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 600;
}

/* Buttons keep their meaning (blue submit / red cancel) but turn glassy + round */
#import_modal .modal-footer .btn {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(7, 9, 25, 0.18);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
#import_modal .modal-footer .btn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 22px rgba(7, 9, 25, 0.24);
}

/* Reduced-motion + no-backdrop-filter fallbacks (keep it readable + solid) */
@media (prefers-reduced-motion: reduce) {
    #import_modal .modal-footer .btn { transition: none !important; }
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    #import_modal .modal-content {
        background: rgba(255, 255, 255, 0.92);
    }
    #import_modal .modal-title,
    #import_modal label { text-shadow: none; }
}

/* ===========================================================================
   12. DUPLICATE ROSTER POPOVER — glass theme (roaster_detail.blade.php)
   ---------------------------------------------------------------------------
   The Bootstrap popover is rendered on <body> via a custom template carrying
   the .roster-popover class, so it is scoped here without touching other
   popovers/tooltips. Matches the liquid-glass surfaces used across the editor.
   =========================================================================== */
.popover.roster-popover {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 18px 40px rgba(15, 23, 53, 0.22),
        0 2px 6px rgba(15, 23, 53, 0.12);
    padding: 6px;
    max-width: 380px;
}
.popover.roster-popover .popover-body {
    padding: 0;
    color: var(--glass-ink, #1c2333);
}
.popover.roster-popover .arrow::before { border: 0; }
.popover.roster-popover .arrow::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
}
.popover.roster-popover.bs-popover-bottom .arrow::after { top: 4px; left: 0; border-right: 0; border-bottom: 0; }
.popover.roster-popover.bs-popover-top .arrow::after { bottom: 4px; left: 0; border-left: 0; border-top: 0; }

/* The product list inside the popover */
.popover.roster-popover .custom-popover {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}
.popover.roster-popover .custom-popover .list-group-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(31, 45, 90, 0.10);
    padding: 0;
}
.popover.roster-popover .custom-popover .list-group-item:last-child { border-bottom: 0; }
.popover.roster-popover .custom-popover .list-group-item a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--glass-ink, #1c2333);
    font-weight: 600;
    cursor: pointer;
    line-height: 1.35;
    transition: background var(--glass-transition), color var(--glass-transition),
                transform var(--glass-transition);
}
.popover.roster-popover .custom-popover .list-group-item a:hover {
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.20), rgba(60, 68, 177, 0.16));
    color: #2c3290;
    transform: translateX(2px);
    text-decoration: none;
}
.popover.roster-popover .roster-dup__name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: inherit;
}
.popover.roster-popover .roster-dup__pkg {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #3c44b1;
    line-height: 1.3;
}
.popover.roster-popover .roster-dup__meta {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    color: #5a6478;
    line-height: 1.4;
}
.popover.roster-popover .custom-popover .list-group-item a:hover .roster-dup__meta {
    color: #3d4580;
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .popover.roster-popover { background: rgba(255, 255, 255, 0.96); }
    .popover.roster-popover .arrow::after { background: rgba(255, 255, 255, 0.96); }
}

/* ===========================================================================
   13. PAYMENT STEP — liquid-glass theme (order.blade.php #payment)
   ---------------------------------------------------------------------------
   Front-end only: restyles the existing markup (ids/names/handlers untouched).
   Scoped by the .payment-glass class on the #payment tab-pane.
   =========================================================================== */
/* IMPORTANT — do not put backdrop-filter / filter / transform back on THIS card
   element. Square's Cash App Pay (and Afterpay) desktop QR "Scan to Pay" dialog is
   an in-page overlay rendered with position:fixed (inside an open shadow root). Per
   the CSS spec, an ancestor whose backdrop-filter/filter/transform is not "none"
   becomes the containing block for its fixed-positioned descendants — even across
   the shadow boundary. When the blur lived on this card, Square's modal was trapped
   inside this col-md-9 card box instead of the viewport: the QR card drifted to the
   LEFT (the card only spans the left 9/12 columns) while the header/instructions
   centred separately — the reported "scattered modal" bug.
   Fix: keep the element itself free of containing-block-forming properties and paint
   the frosted-glass blur on a ::before layer instead (isolation:isolate keeps that
   z-index:-1 layer scoped to this card). Aesthetics are unchanged; the modal now
   escapes to the viewport and centres as Square intends. */
.payment-glass .col-md-9 > .card.card-box {
    position: relative;
    isolation: isolate;
    border-radius: 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 26px rgba(15, 23, 53, 0.08);
}
.payment-glass .col-md-9 > .card.card-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
    pointer-events: none;
}
.payment-glass .col-md-9 .fw-600 { color: var(--glass-primary); }
.payment-glass .col-md-9 > .card .card-body > p:not(.fw-600) { color: var(--glass-ink-soft, #5a6072); }

/* Deposit amount field */
.payment-glass .deposit-payment {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 6px 12px;
    box-shadow: inset 0 1px 2px rgba(31, 45, 90, 0.06);
    transition: border-color var(--glass-transition), box-shadow var(--glass-transition);
}
.payment-glass .deposit-payment:focus-within {
    border-color: rgba(60, 68, 177, 0.55);
    box-shadow: 0 0 0 3px rgba(108, 160, 255, 0.18);
}
.payment-glass .deposit-payment label { margin: 0 6px 0 0; font-weight: 700; font-size: 16px; color: var(--glass-primary); }
.payment-glass .deposit-payment .form-control {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 4px 6px 4px 10px;
    height: auto;
    color: #1c2333 !important;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.2px;
    -webkit-text-fill-color: #1c2333;
    opacity: 1;
}
.payment-glass .deposit-payment .form-control::placeholder { color: #9aa1b4; -webkit-text-fill-color: #9aa1b4; }

/* Pay In Full / Partial Payment — round radio controls + compact labels */
.payment-glass .checkbox_list_remove {
    flex-wrap: wrap;
    gap: 13.52px 30.42px;
    align-items: center;
}
.payment-glass .checkbox_list_remove .form-check {
    display: inline-flex;
    align-items: center;
    padding-left: 2.2815rem;
    margin-bottom: 0;
    min-height: 0;
}
.payment-glass .checkbox_list_remove .form-check + .form-check {
    margin-left: 0 !important;
}
.payment-glass .checkbox_list_remove .custom-control-label.main-lable {
    position: relative;
    margin-bottom: 0;
    padding-left: 0.4225rem;
    font-size: 13.52px !important;
    font-weight: 600;
    line-height: 1.35;
    color: #1c2333;
    cursor: pointer;
    white-space: nowrap;
}
.payment-glass .checkbox_list_remove .custom-control-label.main-lable::before {
    top: 50%;
    left: -1.9435rem;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1px solid rgba(60, 68, 177, 0.45);
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 2px rgba(15, 23, 53, 0.06);
}
.payment-glass .checkbox_list_remove .custom-control-label.main-lable::after {
    top: 50%;
    left: -1.9435rem;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-image: none;
}
.payment-glass .checkbox_list_remove .custom-control-input:checked ~ .custom-control-label.main-lable::before {
    border-color: var(--glass-primary, #3c44b1);
    background-color: var(--glass-primary, #3c44b1);
}
.payment-glass .checkbox_list_remove .custom-control-input:checked ~ .custom-control-label.main-lable::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.5' fill='%23fff'/%3e%3c/svg%3e");
    background-size: 100% 100%;
}
.payment-glass .checkbox_list_remove .custom-control-input:focus ~ .custom-control-label.main-lable::before {
    box-shadow: 0 0 0 3px rgba(108, 160, 255, 0.22);
}

/* Deposit row — bottom-align Pay In Full / Partial radios with deposit field.
   Overrides legacy blade inline padding-top hacks on .main-new-col. */
.payment-glass .form-row.mt-5:has(.main-new-col) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
.payment-glass .main-new-col.col-sm-6 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: flex-end;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}
.payment-glass .main-new-col.col-sm-6 .checkbox_list_remove {
    margin-top: 0 !important;
}

/* Payment-method selectable glass cards */
.payment-glass .payment_method.custom-control {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 44px;
    padding: 9px 11px 9px 0;
    overflow: hidden;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(15, 23, 53, 0.05);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition), background var(--glass-transition);
}
.payment-glass .payment_method:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px rgba(15, 23, 53, 0.12);
}
.payment-glass .payment_method:has(input.custom-control-input:checked) {
    border-color: rgba(60, 68, 177, 0.55);
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.14), rgba(60, 68, 177, 0.10));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 14px rgba(60, 68, 177, 0.18);
}
.payment-glass .payment_method .custom-control-label {
    cursor: pointer;
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 1.3rem;
    margin-bottom: 0;
    padding: 0 0 0 calc(1.3rem + 8px) !important;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.25;
    color: #1c2333 !important;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}
.payment-glass .payment_method .custom-control-label::before,
.payment-glass .payment_method .custom-control-label::after {
    margin-left: 0 !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.payment-glass .payment_method .custom-control-label i {
    color: var(--glass-primary);
    font-size: 13px;
    flex: 0 0 auto;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Payment methods in a single equal-width row on desktop.
   `.payment-method-col` replaces the old col-sm-3 grid columns so tabs share
   the row evenly (4 or 5 across) instead of wrapping to a second line. */
.payment-glass .form-row .payment-method-col {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 6px;
    padding-left: 6px;
    margin-bottom: 8px;
}
/* Compact the tabs so long labels still fit five across. */
.payment-glass .payment-method-col .payment_method.custom-control {
    padding: 8px 9px 8px 0;
    border-radius: 10px;
}
.payment-glass .payment-method-col .payment_method .custom-control-label {
    gap: 6px;
    padding-left: calc(1.3rem + 6px) !important;
    font-size: clamp(11px, 0.82vw, 12.5px);
    line-height: 1.2;
}
.payment-glass .payment-method-col .payment_method .custom-control-label i { font-size: 12px; }

/* Tablet: 3-per-row keeps labels readable. */
@media (max-width: 991.98px) {
    .payment-glass .form-row .payment-method-col { flex: 0 0 33.333%; max-width: 33.333%; }
}
/* Mobile: two per row, comfortable tap targets. */
@media (max-width: 575.98px) {
    .payment-glass .form-row .payment-method-col { flex: 0 0 50%; max-width: 50%; }
    .payment-glass .payment-method-col .payment_method .custom-control-label { font-size: 12px; }
}

/* Method detail sub-panels (bank / wallet / PO) */
.payment-glass .bank__transfer,
.payment-glass .creditOrDebitCard,
.payment-glass .purchase_order {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.55);
    padding: 18px;
    margin-top: 8px;
}

/* Pay From Wallet — Apple Pay / Google Pay smart buttons */
.payment-glass .wallet-pay .wallet-sub { color: var(--glass-ink-soft, #5a6072) !important; margin: 4px 0 0; }
.payment-glass .wallet-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 4px;
}
.payment-glass .wallet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 160px;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.payment-glass .wallet-btn:hover { transform: translateY(-1px); }
.payment-glass .wallet-btn--apple {
    background: #000;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.payment-glass .wallet-btn--apple svg { width: 17px; height: 20px; fill: #fff; }
/* Black pill matching Apple / Cash App Pay so there is no flash of an
   inconsistent white/outlined button before Square attaches its own button.
   The multi-colour Google "G" reads well on black (it is designed for both). */
.payment-glass .wallet-btn--google {
    background: #000;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.payment-glass .wallet-btn--google .wallet-fallback { display: inline-flex; align-items: center; gap: 8px; }
.payment-glass .wallet-btn--google .wallet-fallback strong { color: #fff; }
.payment-glass .wallet-btn--google svg { width: 20px; height: 20px; }
/* Once Square renders its official Google Pay button, drop our pill background but
   KEEP a sized, pill-radius container so the black button (attached with
   buttonSizeMode:'fill') fills it and sits level with the Apple / Cash App pills.
   `fill` mode requires the container to have a defined width AND height. */
.payment-glass .wallet-btn--google.wallet-btn--rendered {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    height: 48px;
    min-width: 160px;
    width: 200px;
    border-radius: 12px;
    overflow: hidden;
}
.payment-glass .wallet-btn--cashapp {
    background: #00d54b;
    color: #000;
    box-shadow: 0 6px 16px rgba(0, 213, 75, 0.28);
}
.payment-glass .wallet-btn--cashapp .wallet-fallback { display: inline-flex; align-items: center; gap: 8px; }
.payment-glass .wallet-btn--cashapp svg { width: 20px; height: 20px; }
/* Once Square attaches, show its official Cash App Pay button without a custom
   visual cover. Pay Kit owns the button and its Scan-to-Pay dialog. */
.payment-glass .wallet-btn--cashapp.wallet-btn--rendered {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    height: 48px;
    width: 200px;
    min-width: 200px;
    border-radius: 12px;
    overflow: visible;
}
.payment-glass .wallet-btn--cashapp.wallet-btn--rendered > :not(.wallet-cashapp-overlay) {
    opacity: 1 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    pointer-events: auto !important;
}
.payment-glass .wallet-btn--cashapp.wallet-btn--rendered iframe,
.payment-glass .wallet-btn--cashapp.wallet-btn--rendered button,
.payment-glass .wallet-btn--cashapp.wallet-btn--rendered a {
    pointer-events: auto !important;
    cursor: pointer !important;
}
/* Promote Pay Kit's host while Scan-to-Pay is open. */
body.xrg-cashapp-sheet-open .payment-glass .wallet-btn--cashapp.wallet-btn--rendered > :not(.wallet-cashapp-overlay),
body.xrg-cashapp-sheet-open #cash-app-pay > :not(.wallet-cashapp-overlay) {
    opacity: 1 !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2147483646 !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
}

/* Safari + backdrop-filter: Cash App Pay Kit's "Scan to Pay" dialog is
   position:fixed with z-index:2147483646, but an ancestor with backdrop-filter/
   filter/transform becomes its containing block. On Pay Balance the QR then
   paints *inside* .glass-card behind opaque method cards — faint / "under" the UI.
   Order editor already moved blur to ::before on .col-md-9>.card; balance panels
   still used .glass-card's own backdrop-filter. Neutralize those containing-block
   properties while the sheet is open, and permanently move balance-panel blur
   onto ::before so Pay Kit can escape to the viewport. */
.payment-glass .creditOrDebitCard,
.payment-glass .wallet-buttons,
.balance-pay-glass .creditOrDebitCard,
.balance-pay-glass .wallet-buttons {
    overflow: visible !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    filter: none;
    transform: none;
}

/* Balance panels: same ::before-blur pattern as order payment card (no filter on self). */
.balance-pay-glass .glass-card.balance-pay-glass__panel,
.balance-pay-glass .glass-card.balance-pay-glass__summary,
.balance-pay-glass .glass-card.balance-pay-glass__header {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    isolation: isolate;
    background-color: transparent;
    background-image: none;
}
.balance-pay-glass .glass-card.balance-pay-glass__panel::before,
.balance-pay-glass .glass-card.balance-pay-glass__summary::before,
.balance-pay-glass .glass-card.balance-pay-glass__header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--glass-bg-card, rgba(255, 255, 255, 0.62));
    background-image: var(--glass-card-sheen, none);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm, 12px)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm, 12px)) saturate(120%);
    border: 0;
    pointer-events: none;
}

/* While Cash App QR is open: strip EVERY ancestor containing-block former that
   could trap Pay Kit's fixed checkout-backdrop (z-[2147483646] is useless if trapped). */
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open #app-top,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open #wrapper,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .app-wrapper,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .app-main,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .payment-glass,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .payment-glass .col-md-9 > .card.card-box,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .payment-glass .col-md-9 > .card.card-box::before,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .order-tabs:has(#createNotTab),
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .order-tabs:has(#createNotTab)::before,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .balance-pay-glass,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .balance-pay-glass__body,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .balance-pay-glass .glass-card,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .balance-pay-glass .glass-card::before,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .creditOrDebitCard,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .wallet-pay,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .wallet-buttons,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .glass-card,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .glass-surface,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .app-content,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .app-content--inner,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .content-inner,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .tab-content,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .tab-pane,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .card,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .card-body,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .modal-content,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open main,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open #content {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    perspective: none !important;
    -webkit-perspective: none !important;
    contain: none !important;
    will-change: auto !important;
    isolation: auto !important;
    overflow: visible !important;
}

/* Pay Kit shadow host when JS reparents it to <body> for a true viewport overlay. */
body > .xrg-paykit-portal-host {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483646 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

/* If Pay Kit ever mounts the backdrop in light DOM, keep it on top of chrome. */
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open [data-testid="checkout-backdrop"],
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open [data-testid="dialog-overlay"],
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .checkout-backdrop,
body.xrg-cashapp-sheet-open,
body.xrg-afterpay-sheet-open .dialog-overlay {
    z-index: 2147483646 !important;
    position: fixed !important;
    inset: 0 !important;
}

/* Once Square has attached its official iframe/button into a wallet container,
   our own pill hover (translateY(-1px)) + transition must NOT keep running on
   that container. On hover the container lifted 1px, which nudged the button
   out from under the cursor near its edges → mouseout → drop hover → drop back
   → hover again … an on/off loop that reads as flicker (most visible on the
   Cash App Pay button/QR sheet). Neutralise hover + transitions post-attach so
   the Square-rendered button sits still and handles its own hover state. */
.payment-glass .wallet-btn--rendered { transition: none; }
.payment-glass .wallet-btn--rendered:hover { transform: none; }

/* Apple Pay availability note — shown only when Apple Pay can't run in this
   browser/device (Chrome/Firefox/Edge/Electron/non-Apple), instead of a dead pill. */
.payment-glass .wallet-apple-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 2px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(15, 23, 53, 0.1);
    color: var(--glass-ink-soft, #5a6072);
    font-size: 13px;
    line-height: 1.5;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.payment-glass .wallet-apple-note i { color: #1f2937; opacity: 0.7; font-size: 15px; flex-shrink: 0; }
.payment-glass .wallet-apple-note strong { color: #1f2937; }
.payment-glass .wallet-apple-note span { flex: 1 1 auto; min-width: 0; }
.payment-glass .wallet-apple-note--desktop {
    flex-wrap: wrap;
    align-items: flex-start;
}
.payment-glass .wallet-apple-note__safari {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid rgba(15, 23, 53, 0.18);
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}
.payment-glass .wallet-apple-note__safari:hover,
.payment-glass .wallet-apple-note__safari:focus {
    background: #111827;
    color: #fff;
    outline: none;
}
@media (max-width: 480px) {
    .payment-glass .wallet-apple-note__safari {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* OPTION B helper — visible-but-non-functional Apple Pay pill (off-Safari). Unused
   by default (Option A). Apply to #apple-pay-button + remove its inline display:none. */
.payment-glass .wallet-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}

/* Card processing surcharge disclosure (Apple Pay / Google Pay) */
.payment-glass .wallet-fee-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 14px 0 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 244, 214, 0.72);
    border: 1px solid rgba(214, 158, 46, 0.4);
    box-shadow: 0 6px 16px rgba(146, 104, 12, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.payment-glass .wallet-fee-notice__icon {
    flex: 0 0 auto;
    color: #b7791f;
    font-size: 18px;
    line-height: 1.4;
}
.payment-glass .wallet-fee-notice__body { min-width: 0; }
.payment-glass .wallet-fee-notice__title {
    margin: 0 0 4px;
    font-weight: 700;
    color: #7c5a0b;
    font-size: 14px;
}
.payment-glass .wallet-fee-notice__text {
    margin: 0;
    color: #6b5a2e;
    font-size: 13.5px;
    line-height: 1.55;
}
.payment-glass .wallet-fee-notice__text strong { color: #7c5a0b; }
.payment-glass .wallet-fee-notice__tip {
    margin: 8px 0 0;
    color: #1f7a4d;
    font-size: 13px;
    line-height: 1.5;
}
.payment-glass .wallet-fee-notice__tip i { margin-right: 4px; }
.payment-glass .wallet-fee-notice__tip strong { color: #166c42; }

/* Cash App Pay scan instruction — persistent glass note so buyers know to scan
   the "Scan to Pay" QR from INSIDE the Cash App app (its QR scanner), NOT with
   their phone's native camera (which surfaces an "invalid link" error). Mirrors
   the .wallet-fee-notice glass pattern with a Cash App green accent. */
.payment-glass .cashapp-scan-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 14px 0 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(224, 255, 236, 0.72);
    border: 1px solid rgba(0, 179, 64, 0.4);
    box-shadow: 0 6px 16px rgba(0, 128, 46, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.payment-glass .cashapp-scan-note__icon {
    flex: 0 0 auto;
    color: #00994a;
    font-size: 18px;
    line-height: 1.4;
}
.payment-glass .cashapp-scan-note__body { min-width: 0; }
.payment-glass .cashapp-scan-note__title {
    margin: 0 0 4px;
    font-weight: 700;
    color: #0a6b34;
    font-size: 14px;
}
.payment-glass .cashapp-scan-note__text {
    margin: 0;
    color: #245b3c;
    font-size: 13.5px;
    line-height: 1.55;
}
.payment-glass .cashapp-scan-note__text strong { color: #0a6b34; }

/* Afterpay (Square BNPL) — dedicated payment method.
   Pre-attach: neutral shell. Post-attach: transparent so Square's official
   mint Afterpay button shows without our custom cover. */
.payment-glass .afterpay-pay .afterpay-sub { color: var(--glass-ink-soft, #5a6072) !important; margin: 4px 0 0; }
.payment-glass .wallet-btn--afterpay {
    background: transparent;
    color: #000;
    box-shadow: none;
    min-width: 200px;
    width: 240px;
    height: 48px;
    padding: 0;
}
.payment-glass .wallet-btn--afterpay.wallet-btn--rendered {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    height: auto;
    min-height: 48px;
    min-width: 200px;
    width: 240px;
    overflow: visible;
}
.payment-glass .wallet-btn--afterpay.wallet-btn--rendered > * {
    width: 100% !important;
    max-width: 100%;
}
.payment-glass .afterpay-limit-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 14px 0 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 235, 235, 0.72);
    border: 1px solid rgba(214, 80, 80, 0.35);
    box-shadow: 0 6px 16px rgba(146, 40, 40, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.payment-glass .afterpay-limit-notice .wallet-fee-notice__icon { color: #c53030; }
.payment-glass .afterpay-limit-notice .wallet-fee-notice__title { color: #9b2c2c; }
.payment-glass .afterpay-limit-notice .wallet-fee-notice__text { color: #742a2a; }

/* PO number field + attachment icon */
.payment-glass .po-number-block { margin-bottom: 16px; }
.payment-glass .po-number-field {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 420px;
}
.payment-glass .po-number-field .form-control {
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 2px rgba(31, 45, 90, 0.06);
}
.payment-glass .po-attach-hint { font-size: 13px; color: var(--glass-ink-soft, #5a6072) !important; margin: 8px 0 0; }

/* Upload dropzone */
.payment-glass .upload_input_doc_group {
    position: relative;
    border: 1.5px dashed rgba(60, 68, 177, 0.35);
    border-radius: 14px;
    background: rgba(108, 160, 255, 0.06);
    padding: 22px;
    text-align: center;
    transition: background var(--glass-transition), border-color var(--glass-transition);
}
.payment-glass .upload_input_doc_group:hover {
    background: rgba(108, 160, 255, 0.12);
    border-color: rgba(60, 68, 177, 0.55);
}
.payment-glass .upload_input_doc_group .upload_input_doc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.payment-glass .file__text_block span i {
    font-size: 22px;
    color: var(--glass-primary);
}
.payment-glass .file__text_block .fw-600 { color: var(--glass-primary); }

/* Shared upload progress (payment, revision, chat, design modals) */
.upload_input_doc_group.is-uploading .file__text_block,
.rev-upload-dropzone.is-uploading .upload_icon_box,
.design_wrapper.is-uploading .upload-design-button,
.logo_wrapper.is-uploading .upload-logo-button {
    opacity: 0.55;
    pointer-events: none;
}
.xrg-upload-progress {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(60, 68, 177, 0.18);
    box-shadow: 0 4px 14px rgba(31, 45, 90, 0.08);
}
.xrg-upload-progress[hidden] { display: none !important; }
.xrg-upload-progress__label {
    font-size: 13px;
    font-weight: 600;
    color: #3c44b1;
    margin-bottom: 8px;
}
.xrg-upload-progress__track {
    height: 7px;
    border-radius: 999px;
    background: rgba(60, 68, 177, 0.12);
    overflow: hidden;
}
.xrg-upload-progress__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #6ca0ff 0%, #4c81de 55%, #3c44b1 100%);
    transition: width 0.15s ease;
}
.xrg-upload-progress__pct {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5a6072;
    text-align: right;
}
.xrg-upload-progress.is-indeterminate .xrg-upload-progress__bar {
    width: 38% !important;
    animation: xrg-upload-indeterminate 1.05s ease-in-out infinite;
}
.xrg-upload-progress.is-success .xrg-upload-progress__label { color: #059669; }
.xrg-upload-progress.is-success .xrg-upload-progress__bar { background: linear-gradient(90deg, #34d399, #059669); }
.xrg-upload-progress.is-error .xrg-upload-progress__label { color: #dc2626; }
.xrg-upload-progress.is-error .xrg-upload-progress__bar { background: linear-gradient(90deg, #f87171, #dc2626); }
@keyframes xrg-upload-indeterminate {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
.payment-glass .xrg-upload-progress {
    position: relative;
    z-index: 2;
}

/* Buttons */
.payment-glass .btn_submit_payment,
.payment-glass .mt_btn,
.payment-glass .btn-outline-first {
    border-radius: 999px !important;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.payment-glass .btn_submit_payment:hover,
.payment-glass .mt_btn:hover,
.payment-glass .btn-outline-first:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(60, 68, 177, 0.24);
}

/* Terms disclaimer — 40% smaller than inherited body text (~14px → 8.4px) */
.payment-glass .submit_payment_container > p.m-0 {
    font-size: 8.4px;
    line-height: 1.45;
}
.payment-glass .submit_payment_container > p.m-0 a { font-size: inherit; }

/* Current payment highlight box */
.payment-glass .current_payment_head {
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.16), rgba(60, 68, 177, 0.12));
    border: 1px solid rgba(60, 68, 177, 0.18);
    margin-bottom: 14px;
}
/* Label only — 40% smaller than the legacy 18px (.current_payment_head p) */
.payment-glass .current_payment_head p:first-child {
    font-size: 10.8px;
    font-weight: 600;
    line-height: 1.35;
}
.payment-glass .current_payment_head p:last-child {
    color: var(--glass-primary);
    font-size: 20px;
}

/* Price Summary title only — money rows stay label-left / value-right via §8.4 */
.payment-glass .price_summry .final_prices_to_appends > p.fw-600.m-0 {
    text-align: center;
}

/* Zelle-only payment card (replaces the old composite document.jpeg image) */
.payment-glass .zelle-pay-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 520px;
    margin: 6px 0 4px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(108, 28, 216, 0.18);
    background: linear-gradient(135deg, rgba(108, 28, 216, 0.06), rgba(255, 255, 255, 0.9));
    box-shadow: 0 8px 22px rgba(108, 28, 216, 0.12);
}
.payment-glass .zelle-pay-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    background: linear-gradient(160deg, #6c1cd8 0%, #4b1394 100%);
}
.payment-glass .zelle-pay-mark {
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.5px;
}
.payment-glass .zelle-pay-body {
    flex: 1 1 auto;
    padding: 14px 16px;
    min-width: 0;
}
.payment-glass .zelle-pay-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--glass-ink-soft, #5a6072);
    margin-bottom: 4px;
}
.payment-glass .zelle-pay-email-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.payment-glass .zelle-pay-email {
    font-size: 18px;
    font-weight: 700;
    color: #4b1394;
    word-break: break-all;
    text-decoration: none;
}
.payment-glass .zelle-pay-email:hover { text-decoration: underline; }
.payment-glass .zelle-pay-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(108, 28, 216, 0.3);
    border-radius: 999px;
    background: #fff;
    color: #6c1cd8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--glass-transition), background var(--glass-transition), color var(--glass-transition);
}
.payment-glass .zelle-pay-copy:hover { transform: translateY(-1px); background: rgba(108, 28, 216, 0.08); }
.payment-glass .zelle-pay-copy.is-copied {
    background: #166c42;
    border-color: #166c42;
    color: #fff;
}
.payment-glass .zelle-pay-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: #166c42 !important;
}
.payment-glass .zelle-pay-note i { margin-right: 4px; }

@media (max-width: 480px) {
    .payment-glass .zelle-pay-card { flex-direction: column; }
    .payment-glass .zelle-pay-brand { padding: 12px; }
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .payment-glass .col-md-9 > .card.card-box { background: #ffffff; }
    .payment-glass .payment_method { background: #ffffff; }
}

/* ===========================================================================
   14. ADD ADDRESS MODAL — liquid-glass theme (#add_address)
   =========================================================================== */
.address-glass .modal-dialog { max-width: 640px; }
.address-glass .modal-content {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 26px;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 248, 255, 0.9) 45%, rgba(233, 240, 255, 0.9) 100%);
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.08);
            backdrop-filter: blur(40px) saturate(200%) brightness(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 -30px 60px rgba(108, 160, 255, 0.08),
        0 36px 80px rgba(15, 23, 53, 0.28);
}
/* Specular water sheen sweeping the glass */
.address-glass .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(130% 60% at 10% -14%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 62%),
        radial-gradient(90% 55% at 114% 2%, rgba(108, 160, 255, 0.18), rgba(255, 255, 255, 0) 55%),
        radial-gradient(120% 85% at 50% 122%, rgba(173, 205, 255, 0.16), rgba(255, 255, 255, 0) 60%);
}
.address-glass .modal-content > * { position: relative; z-index: 1; }

.address-glass .modal-header {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    background: linear-gradient(135deg, rgba(120, 160, 255, 0.9), rgba(60, 68, 177, 0.72));
    -webkit-backdrop-filter: blur(12px) saturate(170%);
            backdrop-filter: blur(12px) saturate(170%);
    padding: 18px 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 18px rgba(60, 68, 177, 0.16);
}
/* Glossy reflection on the header */
.address-glass .modal-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}
.address-glass .modal-header > * { position: relative; z-index: 1; }
.address-glass .modal-title { color: #ffffff; font-weight: 700; letter-spacing: 0.2px; text-shadow: 0 1px 2px rgba(20, 30, 80, 0.25); }
.address-glass .modal-header .close { color: #ffffff; opacity: 0.85; text-shadow: 0 1px 2px rgba(20, 30, 80, 0.25); transition: opacity var(--glass-transition), transform var(--glass-transition); }
.address-glass .modal-header .close:hover { opacity: 1; transform: rotate(90deg); }

.address-glass .modal-body .profile-side { padding: 22px 24px !important; }
.address-glass .addr-modal-sub {
    color: #4a5573;
    font-size: 13.5px;
    line-height: 1.4;
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.12), rgba(60, 68, 177, 0.06));
    border: 1px solid rgba(108, 160, 255, 0.18);
}
.address-glass .form-group { margin-bottom: 14px; }
.address-glass .form-group label {
    font-size: 12px;
    font-weight: 700;
    color: #2e3648;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.address-glass .form-group label .req { color: #e0556b; }
.address-glass .form-group label .opt { color: #9aa1b4; font-weight: 500; text-transform: none; letter-spacing: 0; }
.address-glass .text-field,
.address-glass .custom-select {
    width: 100%;
    height: 46px;
    padding: 10px 16px;
    border-radius: 13px;
    border: 1px solid rgba(60, 68, 177, 0.16);
    background: rgba(255, 255, 255, 0.96);
    color: #1c2333;
    font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(31, 45, 90, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color var(--glass-transition), box-shadow var(--glass-transition), background var(--glass-transition);
}
.address-glass .text-field:hover,
.address-glass .custom-select:hover { border-color: rgba(60, 68, 177, 0.3); }
.address-glass .text-field:focus,
.address-glass .custom-select:focus {
    outline: 0;
    background: #ffffff;
    border-color: rgba(60, 68, 177, 0.6);
    box-shadow: 0 0 0 4px rgba(108, 160, 255, 0.2), inset 0 1px 2px rgba(31, 45, 90, 0.04);
}
.address-glass .text-field::placeholder { color: #a3aabb; }

/* Pill buttons inside the address modal */
.address-glass .glass-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), color var(--glass-transition);
}
.address-glass .glass-pill-btn.primary {
    color: #fff;
    background: linear-gradient(135deg, #6ca0ff 0%, #4c81de 50%, #3c44b1 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 20px rgba(60, 68, 177, 0.32);
}
.address-glass .glass-pill-btn.ghost {
    color: var(--glass-primary);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(15, 23, 53, 0.06);
    margin-right: 8px;
}
.address-glass .glass-pill-btn.primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 26px rgba(60, 68, 177, 0.4); }
.address-glass .glass-pill-btn.ghost:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(108, 160, 255, 0.18), rgba(60, 68, 177, 0.12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 22px rgba(15, 23, 53, 0.12); }

/* Action row separated from the form with a hairline divider */
.address-glass .btn-hold {
    margin-top: 20px !important;
    padding-top: 18px;
    border-top: 1px solid rgba(60, 68, 177, 0.12);
}

/* Google autocomplete dropdown should float above the modal */
.pac-container { z-index: 1101 !important; border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 53, 0.24); }

.address-glass .modal-footer {
    border-top: 1px solid rgba(15, 23, 53, 0.08);
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.4);
}

/* Saved-address list items (partials/order_select_address) */
.address-glass .address-box {
    border: 1px solid rgba(15, 23, 53, 0.10);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.7);
    transition: border-color var(--glass-transition), box-shadow var(--glass-transition), background var(--glass-transition);
}
.address-glass .address-box:hover {
    border-color: rgba(60, 68, 177, 0.4);
    box-shadow: 0 8px 20px rgba(15, 23, 53, 0.10);
}
.address-glass .address-box:has(input.custom-control-input:checked) {
    border-color: rgba(60, 68, 177, 0.6);
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.14), rgba(60, 68, 177, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 20px rgba(60, 68, 177, 0.16);
}
.address-glass .address-box .custom-control-label { cursor: pointer; }
.address-glass .address-box .custom-control-label p { margin: 0 0 2px; font-size: 12.5px; color: #5a6072; line-height: 1.35; }
.address-glass .address-box .custom-control-label p.font-weight-bold { color: #1c2333; font-size: 14px; margin-bottom: 4px; }
.address-glass .address-box .custom-control-label p:empty { display: none; }
.address-glass .address-box .edit-btn a { color: var(--glass-primary); font-size: 12px; }
.address-glass .address-box .edit-btn .address-delete-btn { cursor: pointer; }
.address-glass .address-box .edit-btn .address-delete-btn a { color: #e0556b; font-size: 13px; }
.address-glass .address-box .edit-btn .address-delete-btn:hover a { color: #c23a52; }

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .address-glass .modal-content { background: #ffffff; }
}

/* ===========================================================================
   15. REVIEW STEP — liquid-glass theme (#review)
   =========================================================================== */
.review-glass .bg-lightgray > .card.card-box {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 26px rgba(15, 23, 53, 0.08);
}
.review-glass .panel.__products_table {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 53, 0.08);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 16px rgba(15, 23, 53, 0.06);
}
.review-glass .panel-heading {
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.16), rgba(60, 68, 177, 0.08));
    padding: 11px 16px;
    border: 0;
}
.review-glass .panel-heading span,
.review-glass .panel-head > span:first-child {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--glass-primary);
}
.review-glass .panel-heading a { color: var(--glass-accent, #3c44b1); font-size: 12px; font-weight: 600; }
.review-glass .panel-body { padding: 6px 14px; }

/* Uniform, prominent red EDIT links across the whole review step */
.review-glass .review-edit {
    color: #e0556b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 0 !important;
    margin-left: 10px;
    white-space: nowrap;
}
.review-glass .review-edit:hover { color: #c8324b !important; text-decoration: underline; }
/* Push EDIT to the right edge of each summary box */
.review-glass .panel-body td .d-flex.mb-2 { justify-content: space-between; align-items: center; }

.review-glass .table { margin-bottom: 0; }
.review-glass .table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a90a2;
    border: 0;
    padding: 8px;
    font-weight: 600;
}
.review-glass .table td {
    border-top: 1px solid rgba(15, 23, 53, 0.06);
    vertical-align: middle;
    padding: 10px 8px;
}
.review-glass .media-heading {
    font-size: 14px !important;
    color: #1c2333;
    margin: 0;
    line-height: 1.3;
}
.review-glass td .float-right .media-heading { font-size: 15px !important; color: var(--glass-primary); font-weight: 700; }
.review-glass .roster-media .image { border-radius: 8px; }

/* Bottom summary grid (production / addresses / payment) */
.review-glass .fw-600.fs-15 { font-size: 13px !important; color: var(--glass-primary); font-weight: 700; }
.review-glass .fs-14 { font-size: 12.5px !important; }
.review-glass .panel-body td p,
.review-glass .panel-body td span:not(.fw-600) { font-size: 12.5px; color: #5a6072; }
.review-glass .panel-body td a { color: var(--glass-accent, #3c44b1); font-weight: 600; }
.review-glass .error_box { color: #e0556b; font-size: 12.5px; font-weight: 600; }

/* Submit your order button (override inline blue) */
.review-glass .btn_submit_payment {
    background: linear-gradient(135deg, var(--glass-accent-2, #6ca0ff), var(--glass-accent, #3c44b1)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(60, 68, 177, 0.28);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.review-glass .btn_submit_payment:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(60, 68, 177, 0.34); }

/* Terms disclaimer — 40% smaller than inherited body text (~14px → 8.4px) */
.review-glass .submit_payment_container > p.m-0 {
    font-size: 8.4px;
    line-height: 1.45;
}
.review-glass .submit_payment_container > p.m-0 a { font-size: inherit; }

/* Review step footer — Back + Submit ORDER pills share height/style */
.review-glass .review-step-footer .btn-first {
    min-height: 46px;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .review-glass .bg-lightgray > .card.card-box { background: #ffffff; }
}

/* Review Suggested Add-Ons marketing strip */
.review-glass .review-addon-upsell {
    margin: 0 0 18px;
    padding: 14px 16px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(60, 68, 177, 0.12);
    box-shadow: 0 8px 24px rgba(28, 34, 72, 0.06);
}

.review-glass .review-addon-upsell__eyebrow {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e0556b;
}

.review-glass .review-addon-upsell__title {
    margin: 0 0 4px;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.25rem);
    font-weight: 700;
    color: var(--glass-primary, #1c2248);
    line-height: 1.25;
}

.review-glass .review-addon-upsell__lead {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: #5a6072;
}

.review-glass .review-addon-upsell__scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.review-glass .review-addon-upsell__card {
    flex: 0 0 168px;
    max-width: 168px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(28, 34, 72, 0.08);
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.review-glass .review-addon-upsell__card.is-added {
    opacity: 0.72;
}

.review-glass .review-addon-upsell__media {
    width: 100%;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f4f5f8;
    overflow: hidden;
    margin-bottom: 10px;
}

.review-glass .review-addon-upsell__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.review-glass .review-addon-upsell__media-placeholder {
    color: #9aa1b5;
    font-size: 28px;
}

.review-glass .review-addon-upsell__name {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--glass-primary, #1c2248);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.review-glass .review-addon-upsell__price {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--glass-primary, #1c2248);
}

.review-glass .review-addon-upsell__price-unit {
    font-size: 11px;
    font-weight: 500;
    color: #7a8296;
    margin-left: 2px;
}

.review-glass .review-addon-upsell__add,
.review-glass .review-addon-upsell__configure {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
    margin-top: auto;
}

.review-glass .review-addon-upsell__add.is-added,
.review-glass .review-addon-upsell__configure.is-added {
    background: #e8eaef;
    border-color: #d5d9e3;
    color: #5a6072;
    box-shadow: none;
    cursor: default;
}

.review-glass .review-addon-upsell__add.is-loading {
    pointer-events: none;
}

@media (max-width: 480px) {
    .review-glass .review-addon-upsell {
        padding: 12px;
    }
    .review-glass .review-addon-upsell__card {
        flex-basis: 148px;
        max-width: 148px;
    }
    .review-glass .review-addon-upsell__media {
        height: 118px;
    }
}

/* ---------------------------------------------------------------------------
   Product-step Add-Ons pitch (#headingTwo / .addon-pitch)
   Marketing header + larger product thumbnails in the Products accordion.
   --------------------------------------------------------------------------- */
#products .addon-pitch-card {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(60, 68, 177, 0.14);
    box-shadow: 0 8px 22px rgba(28, 34, 72, 0.06);
    background: rgba(255, 255, 255, 0.72);
}

#products .addon-pitch.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(240, 242, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 100%);
    border-bottom: 1px solid rgba(60, 68, 177, 0.1);
}

#products .addon-pitch__copy {
    flex: 1 1 auto;
    min-width: 0;
}

#products .addon-pitch__eyebrow {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e0556b;
    line-height: 1.2;
}

#products .addon-pitch__title {
    display: block;
    margin: 0 0 2px;
    font-size: clamp(0.9rem, 0.78rem + 0.45vw, 1.15rem);
    font-weight: 750;
    color: var(--glass-primary, #1c2248);
    line-height: 1.25;
}

#products .addon-pitch__lead {
    margin: 0;
    font-size: 12.5px;
    color: #5a6072;
    line-height: 1.35;
}

#products .addon-pitch__toggle {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 6px;
    line-height: 1;
    align-self: center;
}

#products .addon-pitch__body {
    padding-top: 12px;
    padding-bottom: 8px;
}

#products .addon-pitch__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    padding: 2px 0 10px;
}

#products .addon-pitch__empty {
    grid-column: 1 / -1;
    font-size: 12.5px;
    color: #7a8296;
}

#products .addon-pitch__card.addOn_row {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(28, 34, 72, 0.1);
    background: rgba(255, 255, 255, 0.88);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#products .addon-pitch__card.addOn_row:hover {
    border-color: rgba(60, 68, 177, 0.28);
    box-shadow: 0 8px 18px rgba(28, 34, 72, 0.08);
}

#products .addon-pitch__card.addOn_row.is-selected,
#products .addon-pitch__card.addOn_row.addOn_calculator_row {
    border-color: rgba(60, 68, 177, 0.45);
    box-shadow: 0 0 0 1px rgba(60, 68, 177, 0.2);
    background: rgba(240, 242, 255, 0.72);
}

#products .addon-pitch-card .addon_list {
    max-width: none;
    width: 100%;
    padding: 0;
}

#products .addon-pick {
    position: relative;
    width: 100%;
}

#products .addon-pick .addOn_Checkedbox {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    min-height: 0;
    padding-left: 1.4rem;
}

#products .addon-pick .custom-control-label::before,
#products .addon-pick .custom-control-label::after {
    width: 1.15rem;
    height: 1.15rem;
    top: 0;
}

#products .addon-pick__thumb {
    display: block;
    width: 100%;
    height: 120px;
    margin: 0;
    padding: 8px;
    border-radius: 10px;
    background: #f4f5f8;
    border: 1px solid rgba(28, 34, 72, 0.08);
    cursor: pointer;
    overflow: hidden;
}

#products .addon-pick__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

#products .addon-pick__img--empty,
#products .addon-pick__img.is-missing {
    background: linear-gradient(145deg, #eceff5, #f7f8fb);
    min-height: 100%;
}

#products .addon-pitch__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    min-height: 0;
}

#products .addon-pitch-card .addon_title {
    font-size: 13px;
    font-weight: 650;
    color: var(--glass-primary, #1c2248);
    margin-bottom: 0;
    line-height: 1.3;
}

#products .addon-pitch-card .addon_title .text-black-50 {
    margin: 4px 0 0;
    font-size: 12px;
}

#products .addon-pitch__card .addOn_price_per_piece {
    font-size: 13px;
    margin: 0;
}

#products .addon-pitch__card .addon_quantity_box {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#products .addon-pitch__sizes {
    margin-top: 6px;
}

#products .addon-pitch__size-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

#products .addon-pitch__size label {
    margin: 0;
    font-size: 11px;
    color: #5a6072;
}

@media (max-width: 575.98px) {
    #products .addon-pitch.card-header {
        padding: 12px;
    }
    #products .addon-pitch__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    #products .addon-pick__thumb {
        height: 100px;
    }
}

/* ============================================================================
   16. LIQUID CHROME MENU / TAB BUTTONS  (project-wide)
   ----------------------------------------------------------------------------
   Restyle every standard Bootstrap nav-tabs menu button (`.nav-tabs .nav-link`)
   as a polished-metal Liquid Chrome pill — the same recipe as the reusable
   `.liquid-chrome` utility (Section 1), tuned for inline tab links:
     ::before = reflective chrome RIM (conic bright→dark→bright sweep)
     ::after  = glossy grey CAVITY (inset = rim thickness)
   The SELECTED tab gets a "pressed-in" cavity + accent label so it reads as
   active. Appearance-only: no markup / JS / route changes.

   SCOPE: applies wherever `.nav-tabs .nav-link` appears (Orders, Designs,
   Quotes, Custom Pricing, Product Process, roster/design/quote navbars, …).
   EXCLUDES `.myCustomTab` — the Order-Summary multi-step wizard (#createNotTab)
   is a numbered stepper with its own active/disabled/upcoming semantics (§9).
   ============================================================================ */
.nav-tabs:not(:has(.myCustomTab)) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 0;
    align-items: center;
}
.nav-tabs:not(:has(.myCustomTab)) .nav-item { margin: 0; }

.nav-tabs .nav-link:not(.myCustomTab) {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    box-sizing: border-box;
    min-width: 168px;          /* uniform pill length across a tab row */
    height: 46px;              /* uniform pill height */
    padding: 0 20px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #1d2230;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    overflow: visible;
    transition: transform var(--glass-transition), color var(--glass-transition);
}
.nav-tabs .nav-link:not(.myCustomTab):focus,
.nav-tabs .nav-link:not(.myCustomTab):focus-visible,
.nav-tabs .nav-link:not(.myCustomTab):active { outline: none; }
.nav-tabs .nav-link:not(.myCustomTab):hover { transform: translateY(-1px); }

/* ::before — reflective chrome RIM (darkest band biased to bottom-right) */
.nav-tabs .nav-link:not(.myCustomTab)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(from 0deg at 50% 42%,
        #ffffff 0deg, #dfe0e2 22deg, #b9bbbf 52deg, #8b8e92 92deg,
        #565a5e 132deg,
        #808387 158deg, #b4b6ba 192deg, #ededee 230deg,
        #ffffff 270deg, #cfd1d4 312deg, #f2f3f4 340deg, #ffffff 360deg);
    box-shadow:
        0 9px 18px rgba(0, 0, 0, 0.22),
        0 2px 5px rgba(0, 0, 0, 0.19),
        inset 2px 2px 2px rgba(255, 255, 255, 0.95),
        inset -4px -5px 6px rgba(0, 0, 0, 0.46),
        inset -1px -1px 1px rgba(0, 0, 0, 0.36);
    transition: box-shadow var(--glass-transition), background var(--glass-transition);
}
/* ::after — glossy grey CAVITY (inset = rim thickness) */
.nav-tabs .nav-link:not(.myCustomTab)::after {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    border-radius: 12px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(238, 238, 238, 0.94) 42%,
        rgba(250, 250, 250, 0.92) 60%,
        rgba(224, 224, 224, 0.96) 100%);
    box-shadow:
        inset 0 2px 5px rgba(139, 139, 139, 0.34),
        inset -3px -4px 6px rgba(123, 123, 123, 0.30),
        inset 0 -2px 4px rgba(255, 255, 255, 0.95);
    transition: background var(--glass-transition), box-shadow var(--glass-transition);
}
.nav-tabs .nav-link:not(.myCustomTab):hover::before,
.nav-tabs .nav-link:not(.myCustomTab):focus::before {
    box-shadow:
        0 11px 22px rgba(0, 0, 0, 0.24),
        0 3px 6px rgba(0, 0, 0, 0.19),
        inset 2px 2px 2px rgba(255, 255, 255, 1),
        inset -5px -6px 7px rgba(0, 0, 0, 0.50),
        inset -1px -1px 1px rgba(0, 0, 0, 0.40);
}

/* SELECTED tab — pressed-in cavity + accent label so it reads as active.
   The explicit high-specificity selectors override legacy per-page rules
   (e.g. the Orders active pill that painted a translucent blue background). */
.nav-tabs .nav-link.active:not(.myCustomTab),
.nav-tabs .nav-item.active > .nav-link:not(.myCustomTab),
.nav-tabs .nav-item > .active:not(.myCustomTab),
.orders-glass .order-tabs .nav-tabs .nav-link.active {
    color: #1b2a52 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(0);
}
.nav-tabs .nav-link.active:not(.myCustomTab)::after,
.nav-tabs .nav-item.active > .nav-link:not(.myCustomTab)::after,
.orders-glass .order-tabs .nav-tabs .nav-link.active::after {
    background: linear-gradient(180deg,
        rgba(206, 210, 214, 0.98) 0%,
        rgba(228, 230, 232, 0.95) 48%,
        rgba(198, 202, 206, 0.98) 100%);
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, 0.30),
        inset 0 -2px 4px rgba(255, 255, 255, 0.85);
}
.nav-tabs .nav-link.active:not(.myCustomTab)::before,
.nav-tabs .nav-item.active > .nav-link:not(.myCustomTab)::before,
.orders-glass .order-tabs .nav-tabs .nav-link.active::before {
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.20),
        inset 2px 2px 2px rgba(255, 255, 255, 0.85),
        inset -4px -5px 6px rgba(0, 0, 0, 0.42);
}

/* ---------------------------------------------------------------------------
   16.1 ORDERS page tab pills — THINNER + LIGHTER chrome (scoped to .orders-glass)
   Targets only the #myTab pills ("1 ACTIVE ORDS" … "6 ARCHIVED"); other
   chrome pills (Designs/Quotes/Custom Pricing/…) are untouched.
   • Rim HALVED: ::after inset 4px → 2px (radius 12px → 14px = pill 16px − 2px).
   • Darkness softened (mirrors the sidebar pill pass): paler conic chrome,
     smaller/lighter drop + inset shadows, lighter pressed cavity on the active
     pill. Size, padding, layout and text unchanged; step numbers are corner
     circles via §7.3a (not inline left of the label).
   --------------------------------------------------------------------------- */
/* RIM (::before) — paler conic sweep + lighter shadow */
.orders-glass .order-tabs .nav-tabs .nav-link:not(.myCustomTab)::before {
    background: conic-gradient(from 0deg at 50% 42%,
        #ffffff 0deg, #e8e9eb 22deg, #c9cbcf 52deg, #a4a7ab 92deg,
        #7d8084 132deg,
        #a0a3a7 158deg, #c6c8cc 192deg, #f0f0f1 230deg,
        #ffffff 270deg, #d9dbde 312deg, #f4f5f6 340deg, #ffffff 360deg);
    box-shadow:
        0 4px 9px rgba(0, 0, 0, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.08),
        inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.92),
        inset -2px -2px 4px rgba(0, 0, 0, 0.18),
        inset -1px -1px 1px rgba(0, 0, 0, 0.14);
}
/* CAVITY (::after) — halved rim gap + softer inset walls */
.orders-glass .order-tabs .nav-tabs .nav-link:not(.myCustomTab)::after {
    inset: 2px;                 /* halved rim thickness (was 4px) */
    border-radius: 14px;        /* pill radius 16px − 2px inset */
    box-shadow:
        inset 0 1px 3px rgba(139, 139, 139, 0.18),
        inset -1px -2px 4px rgba(123, 123, 123, 0.16),
        inset 0 -2px 4px rgba(255, 255, 255, 0.95);
}
/* SELECTED pill (e.g. "1 ACTIVE ORDS") — lighter rim + pressed cavity */
.orders-glass .order-tabs .nav-tabs .nav-link.active::before {
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.12),
        inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.90),
        inset -2px -2px 4px rgba(0, 0, 0, 0.18);
}
.orders-glass .order-tabs .nav-tabs .nav-link.active::after {
    background: linear-gradient(180deg,
        rgba(224, 227, 230, 0.98) 0%,
        rgba(238, 240, 242, 0.96) 48%,
        rgba(218, 221, 224, 0.98) 100%);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.16),
        inset 0 -2px 4px rgba(255, 255, 255, 0.90);
}

/* Number/count badges riding on the chrome stay crisp above the cavity */
.nav-tabs .nav-link:not(.myCustomTab) .badge {
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .nav-tabs .nav-link:not(.myCustomTab),
    .nav-tabs .nav-link:not(.myCustomTab)::before,
    .nav-tabs .nav-link:not(.myCustomTab)::after { transition: none; }
    .nav-tabs .nav-link:not(.myCustomTab):hover { transform: none; }
}

/* ============================================================================
   17. ORDER DETAIL (orderdetail.blade.php) — scoped under .order-detail-glass
   ----------------------------------------------------------------------------
   Complete glass redesign of the single-order view: Poppins typeface, light
   frosted cards, a fluid 3-up summary grid, tidy payment grid + price summary,
   restyled data tables, glass action pills and a clean comment timeline. Reuses
   the shared --glass-* tokens. Currency is rendered via format_amount() (which
   already prints the "$" sign) — no manual "US"/"$" prefixes.
   --------------------------------------------------------------------------- */

/* 17.1 FONT — unify everything to Poppins (icon fonts excluded) */
.order-detail-glass,
.order-detail-glass p, .order-detail-glass a, .order-detail-glass span,
.order-detail-glass small, .order-detail-glass b, .order-detail-glass strong,
.order-detail-glass td, .order-detail-glass th, .order-detail-glass label,
.order-detail-glass dt, .order-detail-glass dd, .order-detail-glass li,
.order-detail-glass input, .order-detail-glass button, .order-detail-glass .btn,
.order-detail-glass h1, .order-detail-glass h2, .order-detail-glass h3,
.order-detail-glass h4, .order-detail-glass h5, .order-detail-glass h6 {
    font-family: 'Poppins', sans-serif;
}
.order-detail-glass { color: #2b2f45; }

/* 17.2 SECTION RHYTHM — full-bleed inside the app content inner */
.order-detail-glass .od-section { margin-bottom: clamp(18px, 2.4vw, 30px); }
.order-detail-glass .container-fluid { padding-left: 0; padding-right: 0; }

/* 17.3 TITLE BAR — order name + actions */
.order-detail-glass .od-titlebar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: clamp(16px, 2vw, 26px);
}
.order-detail-glass .od-titlebar__text h1 {
    margin: 0; font-weight: 700; line-height: 1.15;
    font-size: clamp(24px, 3vw, 38px); color: var(--glass-primary);
}
.order-detail-glass .od-titlebar__text h2 {
    margin: 2px 0 0; font-weight: 600; line-height: 1.2;
    font-size: clamp(16px, 1.8vw, 22px); color: #58607e;
}
.order-detail-glass .od-titlebar__text p { margin: 4px 0 0; color: #7a819a; font-size: 14px; }
.order-detail-glass .od-titlebar__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.order-detail-glass .od-track-action {
    display: inline-flex; align-items: center; gap: clamp(6px, 1.2vw, 10px);
}
/* "Track My Order" is now an icon-only link, styled like .od-track-print (see below) */

/* 17.4 GLASS CARDS — fluid 3-up summary grid (Fluid Grids) */
.order-detail-glass .od-grid {
    display: grid; gap: clamp(14px, 1.6vw, 22px);
    grid-template-columns: minmax(0, 1fr); align-items: start;
}
@media (min-width: 768px)  { .order-detail-glass .od-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .order-detail-glass .od-grid { grid-template-columns: 1.05fr 1.35fr 1.15fr; } }

.order-detail-glass .od-card,
.order-detail-glass .main-col-nxt {
    position: relative; overflow: hidden;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius);
    transition: box-shadow var(--glass-transition), transform var(--glass-transition);
}
.order-detail-glass .od-card:hover { box-shadow: var(--glass-card-shadow-hover); }

.order-detail-glass .od-card__head { padding: 16px 18px; border-bottom: 1px solid rgba(31, 45, 90, 0.08); }
.order-detail-glass .od-card__head h4 { margin: 0; font-weight: 700; font-size: 18px; color: var(--glass-primary); }
.order-detail-glass .od-card__head--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-detail-glass .od-card__body { padding: 16px 18px; }

.order-detail-glass .od-subhead {
    margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: #58607e;
}
.order-detail-glass .od-subhead--mt { margin-top: 18px; }

/* 17.5 SHIPPING fields */
.order-detail-glass .od-fields { margin: 0; }
.order-detail-glass .od-fields dt {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    color: #9aa0b5; margin-top: 12px;
}
.order-detail-glass .od-fields dt:first-child { margin-top: 0; }
.order-detail-glass .od-fields dd { margin: 2px 0 0; font-size: 14px; color: #2b2f45; }
.order-detail-glass .od-billing { margin: 0; font-size: 14px; color: #2b2f45; }
.order-detail-glass .od-address { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #2b2f45; }

/* City / State / Zip row grid (reference layout) */
.order-detail-glass .od-addr-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px;
    margin-bottom: 14px;
}
.order-detail-glass .od-addr-grid__cell { min-width: 0; }
.order-detail-glass .od-addr-grid__label {
    display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: #9aa0b5; margin-bottom: 4px;
}
.order-detail-glass .od-addr-grid__value {
    display: block; font-size: 14px; font-weight: 600; color: #2b2f45;
    word-break: break-word;
}
.order-detail-glass .od-fields--compact dt { margin-top: 10px; }
.order-detail-glass .od-fields--compact dt:first-child { margin-top: 0; }

/* 17.6 PAYMENT history table */
.order-detail-glass .od-paytable-wrap {
    overflow-x: hidden; -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(31, 45, 90, 0.08); border-radius: var(--glass-radius-sm);
    margin-bottom: 14px;
    /* Size fonts to the (often narrow) card column, not the wide viewport,
       so nowrap values never overflow into the neighbouring column. */
    container-type: inline-size;
}
.order-detail-glass .od-paytable {
    width: 100%; min-width: 0; border-collapse: collapse; margin: 0;
    table-layout: fixed;
}
/* Column widths: give the text-heavy method column more room, keep the
   numeric/date columns tight so their values never need to break. */
.order-detail-glass .od-paytable th:nth-child(1),
.order-detail-glass .od-paytable td:nth-child(1) { width: 28%; }
.order-detail-glass .od-paytable th:nth-child(2),
.order-detail-glass .od-paytable td:nth-child(2) { width: 24%; }
.order-detail-glass .od-paytable th:nth-child(3),
.order-detail-glass .od-paytable td:nth-child(3) { width: 24%; }
.order-detail-glass .od-paytable th:nth-child(4),
.order-detail-glass .od-paytable td:nth-child(4) { width: 24%; }
.order-detail-glass .od-paytable thead th {
    padding: 10px clamp(3px, 0.8cqw, 6px);
    font-size: clamp(8px, 2.6cqw, 10px); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.02em; color: #58607e; text-align: center; vertical-align: middle;
    background: rgba(31, 45, 90, 0.07); border-bottom: 1px solid rgba(31, 45, 90, 0.10);
    overflow-wrap: break-word;
}
.order-detail-glass .od-paytable tbody td {
    padding: 12px clamp(3px, 0.8cqw, 6px);
    font-size: clamp(9px, 3.4cqw, 13px); font-weight: 500; color: #2b2f45;
    text-align: center; vertical-align: middle;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(31, 45, 90, 0.06);
    word-break: normal; overflow-wrap: break-word;
}
/* Payment Method: allow wrapping only at word boundaries (e.g. "CashApp / Venmo").
   Per request, its text is ~20% smaller than the other body cells. */
.order-detail-glass .od-paytable td:nth-child(1) {
    white-space: normal;
    font-size: clamp(7.2px, 2.72cqw, 10.4px);
}
/* Date + amount columns: keep each value on a single line ("06/30/2026", "$238.00").
   overflow:hidden + a container-scaled font guarantee the value fits its allotted
   width and can never bleed into (overlap) the next column or add a scrollbar. */
.order-detail-glass .od-paytable th:nth-child(2),
.order-detail-glass .od-paytable td:nth-child(2),
.order-detail-glass .od-paytable th:nth-child(3),
.order-detail-glass .od-paytable td:nth-child(3),
.order-detail-glass .od-paytable th:nth-child(4),
.order-detail-glass .od-paytable td:nth-child(4) {
    white-space: nowrap; overflow: hidden; text-overflow: clip;
    letter-spacing: -0.01em;
}
.order-detail-glass .od-paytable td:nth-child(2),
.order-detail-glass .od-paytable td:nth-child(3),
.order-detail-glass .od-paytable td:nth-child(4) { font-size: clamp(9px, 3.2cqw, 12px); }
.order-detail-glass .od-paytable tbody tr:last-child td { border-bottom: 0; }
.order-detail-glass .od-paytable__row--empty td { min-height: 42px; }
.order-detail-glass .od-paytable__ref {
    display: block; margin-top: 4px; font-size: clamp(8.5px, 2.2vw, 10px);
    font-weight: 500; color: #7a819a; white-space: normal; overflow-wrap: anywhere;
}

/* Legacy paygrid (kept for fallback) */
.order-detail-glass .od-paygrid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: rgba(31, 45, 90, 0.08);
    border: 1px solid rgba(31, 45, 90, 0.08); border-radius: var(--glass-radius-sm);
    overflow: hidden;
}
.order-detail-glass .od-paycell {
    display: flex; flex-direction: column; gap: 5px; align-items: center; text-align: center;
    padding: 14px 10px; background: rgba(255, 255, 255, 0.72);
}
.order-detail-glass .od-paycell--accent { background: rgba(60, 68, 177, 0.06); }
.order-detail-glass .od-paycell__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #58607e;
}
.order-detail-glass .od-paycell__value { font-size: 15px; font-weight: 600; color: #2b2f45; }
.order-detail-glass .od-paycell__row { font-size: 13px; color: #4b5169; }
.order-detail-glass .od-paycell__ref { font-size: 11px; color: #7a819a; line-height: 1.4; }
.order-detail-glass .od-paycell__muted { font-size: 13px; color: #9aa0b5; }
.order-detail-glass .od-paid { color: #2a9d4a; font-weight: 700; }

.order-detail-glass .od-balance {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 4px; padding: 14px 16px; border-radius: var(--glass-radius-sm);
    background: rgba(108, 160, 255, 0.12); border: 1px solid rgba(76, 129, 222, 0.22);
}
.order-detail-glass .od-balance__label { font-weight: 600; color: #1b2a52; font-size: 14px; }
.order-detail-glass .od-balance__value { font-size: clamp(20px, 4vw, 26px); font-weight: 700; color: #2a9d4a; }

.order-detail-glass .od-prod { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(31, 45, 90, 0.08); }
.order-detail-glass .od-prod--shipping { margin-top: 20px; }
.order-detail-glass .od-prod__name { margin: 0 0 12px; font-size: 15px; color: #2b2f45; }
.order-detail-glass .od-prod--shipping .glass-pill { display: block; width: fit-content; margin-left: auto; margin-right: auto; }

/* 17.7 INVOICE / PRICE SUMMARY */
.order-detail-glass .od-invoice__note { margin: 0 0 16px; font-size: 13px; color: #7a819a; line-height: 1.5; }
.order-detail-glass .od-subhead--summary {
    font-size: 16px; color: var(--glass-primary); text-transform: none; letter-spacing: 0;
}
.order-detail-glass .od-summary { list-style: none; margin: 0 0 12px; padding: 0; }
.order-detail-glass .od-summary li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px dashed rgba(31, 45, 90, 0.10); font-size: 14px;
}
.order-detail-glass .od-summary li span:first-child { color: #58607e; }
.order-detail-glass .od-summary li span:last-child { font-weight: 600; color: #2b2f45; }
.order-detail-glass .od-summary__total {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 6px; padding: 12px 14px; border-radius: var(--glass-radius-sm);
    background: rgba(60, 68, 177, 0.06); border: 1px solid var(--glass-card-border);
}
.order-detail-glass .od-summary__total span:first-child { font-weight: 700; color: #1b2a52; }
.order-detail-glass .od-summary__total span:last-child { font-size: 20px; font-weight: 700; color: #2a9d4a; }

/* 17.8 BUTTONS — glass pills (also restyles legacy .btn-secondary in tables) */
.order-detail-glass .od-btn,
.order-detail-glass .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border: 1px solid var(--glass-card-border); border-radius: 999px;
    background: var(--glass-bg-card); color: var(--glass-primary) !important;
    font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer;
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), color var(--glass-transition);
}
.order-detail-glass .od-btn:hover,
.order-detail-glass .btn-secondary:hover {
    transform: translateY(-1px); background: var(--glass-pill-active);
    box-shadow: var(--glass-card-shadow-hover); color: #1b2a52 !important;
}
.order-detail-glass .od-btn--accent {
    background: linear-gradient(135deg, #4c5bd4, #3c44b1); color: #fff !important; border-color: transparent;
}
.order-detail-glass .od-btn--accent:hover {
    background: linear-gradient(135deg, #5563df, #444cc4); color: #fff !important;
    box-shadow: 0 10px 24px rgba(60, 68, 177, 0.32);
}
.order-detail-glass .od-btn.od-btn--disabled,
.order-detail-glass .od-btn.od-btn--disabled:hover {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: auto;
    filter: grayscale(0.15);
    transform: none;
    text-decoration: none;
}
.order-detail-glass .od-btn.od-btn--disabled[data-tip] {
    position: relative;
}
.order-detail-glass .od-btn.od-btn--disabled[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 6;
    width: min(260px, 72vw);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(31, 45, 90, 0.12);
    background: rgba(255, 255, 255, 0.97);
    color: #5a6280;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 24px rgba(31, 45, 90, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.order-detail-glass .od-btn.od-btn--disabled[data-tip]:hover::after,
.order-detail-glass .od-btn.od-btn--disabled[data-tip]:focus::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.order-detail-glass .od-btn--block { display: flex; width: 100%; }
.order-detail-glass .od-btn--accent.od-btn--block { padding: 12px 18px; }
/* Match "Make Payment" pill to the "Generate Invoice" pill and keep its label on one line */
.order-detail-glass .od-card--payment .od-card__head--row .od-btn--accent {
    padding: 12px 18px; border-radius: 999px;
    white-space: nowrap; flex-shrink: 0;
    font-size: clamp(12px, 1.6vw, 14px);
}
.order-detail-glass .btn-it { padding: 5px 14px; font-size: 12px; }
/* In-table action buttons (View / Track / Roster) render as solid indigo pills,
   so force white, centred labels for legibility on the fill. */
.order-detail-glass .table .btn-secondary,
.order-detail-glass .table .btn-it {
    color: #fff !important;
    text-align: center;
    justify-content: center;
}

/* 17.9 DATA TABLES */
.order-detail-glass .main-ship-col { margin: 0 0 12px; font-weight: 700; font-size: 18px; color: var(--glass-primary); }
.order-detail-glass .main-col-nxt { padding: 6px 8px 2px; margin-bottom: 4px; }
.order-detail-glass .table { margin: 0; color: #2b2f45; }
.order-detail-glass .table thead th,
.order-detail-glass .table .thead-light th {
    border: 0; border-bottom: 2px solid rgba(31, 45, 90, 0.10); background: transparent;
    color: #58607e; font-weight: 700; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.03em; padding: 12px 14px; vertical-align: middle;
}
.order-detail-glass .table tbody td {
    border: 0; border-bottom: 1px solid rgba(31, 45, 90, 0.07);
    padding: 12px 14px; vertical-align: middle; font-size: 14px;
}
.order-detail-glass .table tbody tr:hover td { background: rgba(108, 160, 255, 0.06); }
.order-detail-glass .table td.bg-secondary {
    background: rgba(60, 68, 177, 0.04) !important; color: #2b2f45 !important;
    font-weight: 600; text-align: center;
}
.order-detail-glass .main-txt-cart { margin: 0 0 0 78px; font-weight: 600; }
.order-detail-glass .table img { border-radius: 8px; box-shadow: var(--glass-card-shadow); }

/* 17.10 TIMELINE / COMMENTS — messenger: messages scroll above sticky composer */
.order-detail-glass .timeline-container {
    display: flex;
    flex-direction: column;
    margin: clamp(14px, 2vw, 22px) 0 0;
    font-family: 'Poppins', sans-serif;
    scroll-margin-top: 88px;
}
.order-detail-glass .od-chat-head {
    flex-shrink: 0;
    margin: 0 0 8px;
}
.order-detail-glass .od-chat-head__title {
    margin: 0;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.15rem);
    font-weight: 700;
    color: var(--glass-primary);
}
.order-detail-glass .od-chat-head__hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: #7a819a;
}
.order-detail-glass .od-chat-messages,
.order-detail-glass .timeline-entry.od-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    border-left: 0;
    padding-left: 0;
}
.order-detail-glass .timeline-events {
    max-height: min(320px, 42vh);
    min-height: 8rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    background: rgba(248, 249, 251, 0.92);
    border: 1px solid rgba(31, 45, 90, 0.12);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    scrollbar-width: thin;
}
.order-detail-glass .timeline-header,
.order-detail-glass .od-chat-compose-bar {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-shrink: 0;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(31, 45, 90, 0.12);
}
.order-detail-glass .od-chat-compose { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.order-detail-glass .comment-box {
    width: 100%; border: 1px solid var(--glass-card-border); border-radius: 999px; padding: 8px 14px;
    background: var(--glass-bg-card); box-shadow: var(--glass-card-shadow); font-size: 13px;
    resize: none; max-height: 120px; overflow-y: hidden; line-height: 1.35;
}
.order-detail-glass textarea.comment-box {
    border-radius: 14px;
    min-height: 36px;
}
.order-detail-glass .comment-box:focus { outline: none; border-color: var(--glass-accent); box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.18); }
.order-detail-glass .od-chat-attach-btn,
.order-detail-glass .send_this_message {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border: none; cursor: pointer;
    background: linear-gradient(135deg, #4c5bd4, #3c44b1); color: #fff;
    border-radius: 50%; height: 36px; width: 36px; margin-top: 0; margin-bottom: 0;
}
.order-detail-glass .od-chat-attach-btn { background: rgba(60, 68, 177, 0.12); color: var(--glass-primary); }
.order-detail-glass .od-chat-attach-btn:hover { background: rgba(60, 68, 177, 0.2); }
.order-detail-glass .od-chat-attach-btn .material-icons { font-size: 18px; }
.order-detail-glass .send_this_message:hover { background: linear-gradient(135deg, #5563df, #444cc4); }
.order-detail-glass .od-chat-attach-preview { display: flex; flex-wrap: wrap; gap: 4px; }
.order-detail-glass .od-chat-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 2px 6px 2px 8px; border-radius: 999px; font-size: 11px;
    background: rgba(60, 68, 177, 0.08); color: #2b2f45; border: 1px solid rgba(60, 68, 177, 0.14);
}
.order-detail-glass .od-chat-chip__remove {
    border: 0; background: transparent; color: #7a819a; cursor: pointer; line-height: 1; font-size: 13px; padding: 0;
}
.order-detail-glass .od-chat-files { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; }
.order-detail-glass .od-chat-file {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 600;
    color: var(--glass-primary); text-decoration: none;
    background: rgba(76, 129, 222, 0.08); border: 1px solid rgba(76, 129, 222, 0.18);
}
.order-detail-glass .od-chat-file:hover { background: rgba(76, 129, 222, 0.14); color: var(--glass-primary); }
.order-detail-glass .od-chat-file .material-icons { font-size: 14px; }
.order-detail-glass .od-chat-file span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}

.order-detail-glass .timeline-event {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    position: relative;
}
.order-detail-glass .timeline-event:last-child { margin-bottom: 0; }
.order-detail-glass .timeline-dot {
    display: none; /* continuous chat pane — no classic timeline rail */
}
.order-detail-glass .user-initials {
    background: var(--glass-primary);
    width: 26px;
    height: 26px;
    font-size: 10px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.order-detail-glass .user-initials.has-photo {
    background: transparent;
    padding: 0;
}
.order-detail-glass .user-initials .od-chat-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.order-detail-glass .user-initials.has-photo .od-chat-avatar-fallback {
    display: none;
}
.order-detail-glass .user-initials:not(.has-photo) .od-chat-avatar-fallback {
    display: inline;
}
.order-detail-glass .timeline-content.od-chat-msg,
.order-detail-glass .timeline-content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 2px 0 2px 10px;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    box-shadow: none;
    border-radius: 0;
}
/* Client messages — XROAD attention pink accent */
.order-detail-glass .timeline-content.od-chat-msg.od-chat-msg--client {
    border-left-color: #e0556b;
}
.order-detail-glass .od-chat-msg--client .user-initials,
.order-detail-glass .user-initials.yellow-background,
.order-detail-glass .user-initials.od-chat-initials--client {
    background: #e0556b;
}
.order-detail-glass .od-chat-msg--client .od-chat-msg__meta {
    color: rgba(224, 85, 107, 0.85);
}
/* Admin / staff — Soft Slate primary accent (no pink card bubble) */
.order-detail-glass .timeline-content.od-chat-msg.od-chat-msg--admin {
    border-left-color: #3c44b1;
}
.order-detail-glass .od-chat-msg--admin .user-initials,
.order-detail-glass .user-initials.red-background,
.order-detail-glass .user-initials.od-chat-initials--staff {
    background: #3c44b1;
}
.order-detail-glass .user-initials.has-photo,
.order-detail-glass .user-initials.od-chat-initials--client.has-photo,
.order-detail-glass .user-initials.od-chat-initials--staff.has-photo {
    background: transparent;
    padding: 0;
}
.order-detail-glass .od-chat-msg--admin .od-chat-msg__meta {
    color: rgba(60, 68, 177, 0.8);
}
.order-detail-glass .od-chat-msg__author {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #3c44b1;
    line-height: 1.2;
}
.order-detail-glass .od-chat-msg__body {
    flex: 1;
    min-width: 0;
}
.order-detail-glass .od-chat-msg__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    color: #2b2f45;
}
.order-detail-glass .od-chat-msg__meta,
.order-detail-glass .timeline-date,
.order-detail-glass .timeline-time {
    display: inline;
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: #8a91a8;
    line-height: 1.2;
}
.order-detail-glass .od-chat-msg__meta {
    display: block;
    margin-top: 2px;
}

.order-detail-glass .od-chat-time-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0.45rem 0 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8a91a8;
    text-align: center;
}

.order-detail-glass .od-chat-time-sep::before,
.order-detail-glass .od-chat-time-sep::after {
    content: '';
    flex: 1 1 auto;
    max-width: 3.5rem;
    height: 1px;
    background: rgba(31, 45, 90, 0.12);
}

.order-detail-glass .od-chat-msg--deleted {
    opacity: 0.85;
}
.order-detail-glass .od-chat-msg--deleted.od-chat-msg--admin,
.order-detail-glass .od-chat-msg--deleted.od-chat-msg--client {
    border-left-style: dashed;
}
.order-detail-glass .od-chat-msg__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.order-detail-glass .od-chat-msg__action {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--glass-primary);
    cursor: pointer;
    line-height: 1.2;
}
.order-detail-glass .od-chat-msg__action:hover { text-decoration: underline; }
.order-detail-glass .od-chat-msg__action--danger { color: #e0556b; }
.order-detail-glass .od-chat-msg__edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0;
}
.order-detail-glass .od-chat-msg__edit-input {
    border-radius: 10px !important;
    min-height: 40px;
}
.order-detail-glass .od-chat-msg__edit-actions {
    display: flex;
    gap: 6px;
}
.order-detail-glass .od-chat-msg__text--deleted {
    margin: 0;
    font-style: italic;
    color: #8a91a8;
}
.order-detail-glass .timeline-content > .timeline-date,
.order-detail-glass .timeline-content > .timeline-time {
    display: none; /* legacy markup fallback if any */
}

/* 17.11 FLEXIBLE IMAGES + RESPONSIVE (CSS Media Queries) */
.order-detail-glass img { max-width: 100%; height: auto; }
@media (max-width: 575.98px) {
    .order-detail-glass .od-card__head, .order-detail-glass .od-card__body { padding: 14px; }
    .order-detail-glass .od-paycell { padding: 10px 6px; }
    /* Titlebar / addr-grid / card-head-row / payment-table layout below
       767.98px are handled by the 17.12 MOBILE POLISH block further down. */
}
@media (max-width: 420px) {
    .order-detail-glass .od-paygrid { grid-template-columns: 1fr; }
}

/* Track — plain black icons (tracking + print) in the order title bar */
.order-detail-glass .od-track-icon,
.order-detail-glass .od-track-print,
.order-detail-glass .od-chat-jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #000;
    text-decoration: none;
    position: relative;
    transition: transform var(--glass-transition), color var(--glass-transition);
}
.order-detail-glass .od-chat-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e0556b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(224, 85, 107, 0.45);
    pointer-events: none;
}
.order-detail-glass .od-chat-jump.has-unread {
    color: var(--glass-primary);
}
.order-detail-glass .od-chat-jump.has-unread .material-icons {
    animation: od-chat-pulse 1.6s ease-in-out infinite;
}
@keyframes od-chat-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.order-detail-glass .od-track-icon i,
.order-detail-glass .od-track-print i { font-size: clamp(19.2px, 3.6vw, 38.4px); line-height: 1; }
.order-detail-glass .od-track-icon:hover,
.order-detail-glass .od-track-print:hover { transform: translateY(-1px); color: var(--glass-primary); }

/* 17.12 MOBILE POLISH (<=767.98px) — Order Detail page
   ----------------------------------------------------------------------------
   Below the tablet breakpoint the 3-up grid is already a single column
   (17.4), so here we (a) turn the dense Payment History + Order Details /
   Roster / Item Addon tables into readable stacked "card rows" instead of
   shrinking text to fit table columns, and (b) make every primary action
   (Make Payment, Generate Invoice, Packing List, in-table View/Track/Roster)
   a full 44px+ tap target. Desktop (>=768px) is untouched. */
@media (max-width: 767.98px) {
    /* --- Titlebar / card head actions --- */
    .order-detail-glass .od-titlebar__actions { width: 100%; }
    .order-detail-glass .od-titlebar__actions .od-track-action { min-width: 0; }
    .order-detail-glass .od-addr-grid { grid-template-columns: 1fr; gap: 8px; }
    .order-detail-glass .od-card__head--row { flex-wrap: wrap; }

    /* --- Tappable action pills: 44px min height everywhere on this page --- */
    .order-detail-glass .od-btn,
    .order-detail-glass .btn-secondary {
        min-height: 44px;
    }
    .order-detail-glass .od-card__head--row .od-btn--accent,
    .order-detail-glass .od-card--invoice .od-btn--accent,
    .order-detail-glass .od-prod--shipping .od-btn.glass-pill {
        display: flex;
        width: 100%;
        min-height: 44px;
    }
    .order-detail-glass .od-prod--shipping .glass-pill { margin-left: 0; margin-right: 0; }

    /* --- PAYMENT HISTORY: table -> stacked card rows (no more shrinking fonts) --- */
    .order-detail-glass .od-paytable-wrap {
        container-type: normal;
        overflow: visible;
        border: 0;
        background: transparent;
    }
    .order-detail-glass .od-paytable,
    .order-detail-glass .od-paytable thead,
    .order-detail-glass .od-paytable tbody,
    .order-detail-glass .od-paytable tr,
    .order-detail-glass .od-paytable th,
    .order-detail-glass .od-paytable td {
        display: block;
    }
    .order-detail-glass .od-paytable thead { display: none; }
    .order-detail-glass .od-paytable tbody tr {
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(31, 45, 90, 0.08);
        border-radius: var(--glass-radius-sm);
        box-shadow: var(--glass-card-shadow);
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .order-detail-glass .od-paytable tbody tr:last-child { margin-bottom: 0; }
    .order-detail-glass .od-paytable tbody tr.od-paytable__row--empty { display: none; }
    .order-detail-glass .od-paytable tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100% !important;
        padding: 7px 0 !important;
        border-bottom: 1px dashed rgba(31, 45, 90, 0.10);
        background: transparent !important;
        text-align: right !important;
        white-space: normal !important;
        overflow: visible !important;
        letter-spacing: normal !important;
        font-size: 13px !important;
    }
    .order-detail-glass .od-paytable tbody tr td:last-child { border-bottom: 0; padding-bottom: 0 !important; }
    .order-detail-glass .od-paytable tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #9aa0b5;
        text-align: left;
    }
    /* Payment Method gets its own card header treatment (label above, method
       name + PO ref stacked) since it can carry a second line of detail. */
    .order-detail-glass .od-paytable tbody td:nth-child(1) {
        display: block !important;
        text-align: left !important;
        font-size: 14px !important;
        font-weight: 600;
        padding-top: 0 !important;
    }
    .order-detail-glass .od-paytable tbody td:nth-child(1)::before { display: block; margin-bottom: 4px; }
    .order-detail-glass .od-paytable__ref { text-align: left; }

    /* --- ORDER DETAILS / ROSTER / ITEM ADDON: table -> stacked card rows --- */
    .order-detail-glass .main-col-nxt .table-responsive { overflow-x: visible; }
    .order-detail-glass .main-col-nxt table.table,
    .order-detail-glass .main-col-nxt table.table thead,
    .order-detail-glass .main-col-nxt table.table tbody,
    .order-detail-glass .main-col-nxt table.table tr,
    .order-detail-glass .main-col-nxt table.table th,
    .order-detail-glass .main-col-nxt table.table td {
        display: block;
        width: 100%;
    }
    .order-detail-glass .main-col-nxt table.table thead { display: none; }
    .order-detail-glass .main-col-nxt table.table tbody tr {
        background: var(--glass-bg-card);
        border: 1px solid var(--glass-card-border);
        border-radius: var(--glass-radius-sm);
        box-shadow: var(--glass-card-shadow);
        padding: 14px;
        margin-bottom: 12px;
    }
    .order-detail-glass .main-col-nxt table.table tbody tr:last-child { margin-bottom: 0; }
    .order-detail-glass .main-col-nxt table.table tbody td {
        border: 0;
        padding: 6px 0;
    }
    .order-detail-glass .main-col-nxt table.table tbody td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .order-detail-glass .main-col-nxt table.table tbody td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #9aa0b5;
    }
    .order-detail-glass .main-col-nxt table.table tbody td.bg-secondary {
        background: transparent !important;
        text-align: right;
    }
    /* In-card action buttons: comfortable tap target, no longer squeezed into a column */
    .order-detail-glass .main-col-nxt .btn-secondary,
    .order-detail-glass .main-col-nxt .btn-it {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* Header "Messages" liquid-chrome pill — pin the notification dot to the corner
   (the chrome pill is position:relative + overflow:visible, so it sits above the
   metal pseudo-layers without clipping). */
.app-header .liquid-chrome .badge-circle {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
}

/* ============================================================================
   18. ORDER TRACKING (tracking.blade.php) — scoped under .tracking-glass
   ----------------------------------------------------------------------------
   Frosted Liquid Glass search card: a light translucent surface floating on a
   soft tinted page, a top specular sheen (Specular Highlights), a glass input
   field, glass icon buttons and a gradient primary pill. Reuses the shared
   --glass-* / --glass-*-card tokens. Appearance-only: route, input name and
   feather icons are untouched.
   --------------------------------------------------------------------------- */

/* 18.1 PAGE SURFACE + TYPE */
.tracking-glass {
    background:
        radial-gradient(1200px 500px at 15% -10%, rgba(108, 160, 255, 0.16), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(60, 68, 177, 0.12), transparent 55%),
        linear-gradient(180deg, #eef2fb 0%, #f6f8fe 100%);
    min-height: calc(100vh - 120px);
}
.tracking-glass,
.tracking-glass p, .tracking-glass a, .tracking-glass span,
.tracking-glass label, .tracking-glass input, .tracking-glass button,
.tracking-glass .btn, .tracking-glass h1, .tracking-glass h2,
.tracking-glass h3, .tracking-glass h4, .tracking-glass h5, .tracking-glass h6 {
    font-family: 'Poppins', sans-serif;
}

/* 18.2 CENTERING WRAP */
.tracking-glass .tracking-wrap {
    display: flex;
    justify-content: center;
    padding: clamp(20px, 5vw, 56px) clamp(8px, 3vw, 24px);
}

/* 18.3 GLASS CARD (Refraction + luminous border) */
.tracking-glass .tracking-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 640px;
    padding: clamp(22px, 3.4vw, 40px);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: box-shadow var(--glass-transition), transform var(--glass-transition);
}
.tracking-glass .tracking-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-card-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 18.4 SPECULAR SHEEN (top-edge highlight) */
.tracking-glass .tracking-card__sheen {
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 80%);
    border-radius: var(--glass-radius) var(--glass-radius) 0 0;
}

/* 18.5 HEADER — title + glass icon tools */
.tracking-glass .tracking-card__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(18px, 2.6vw, 28px);
}
.tracking-glass .tracking-card__title h4 {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    font-size: clamp(20px, 2.6vw, 28px);
    color: var(--glass-primary);
}
.tracking-glass .tracking-card__title p {
    margin: 6px 0 0;
    font-size: clamp(13px, 1.4vw, 15px);
    color: #6b7291;
}
.tracking-glass .tracking-card__tools {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.tracking-glass .tracking-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--glass-primary);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--glass-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(31, 45, 90, 0.08);
    text-decoration: none;
    transition: transform var(--glass-transition), background var(--glass-transition),
                box-shadow var(--glass-transition), color var(--glass-transition);
}
.tracking-glass .tracking-icon-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent));
    box-shadow: 0 8px 20px rgba(60, 68, 177, 0.28);
}
.tracking-glass .tracking-icon-btn i { width: 18px; height: 18px; }

/* 18.6 FORM — glass field + gradient pill */
.tracking-glass .tracking-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tracking-glass .tracking-form label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #58607e;
    margin: 0;
}
.tracking-glass .tracking-field { position: relative; }
.tracking-glass .tracking-field .form-control {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    font-size: 15px;
    color: #2b2f45;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-sm);
    box-shadow: inset 0 1px 3px rgba(31, 45, 90, 0.06);
    transition: border-color var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition);
}
.tracking-glass .tracking-field .form-control::placeholder { color: #9aa0b5; }
.tracking-glass .tracking-field .form-control:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--glass-accent);
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.18), inset 0 1px 3px rgba(31, 45, 90, 0.06);
}
.tracking-glass .tracking-submit {
    align-self: flex-start;
    margin-top: 14px;
    padding: 12px 34px;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #fff !important;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-primary));
    box-shadow: 0 8px 22px rgba(60, 68, 177, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                filter var(--glass-transition);
}
.tracking-glass .tracking-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 12px 28px rgba(60, 68, 177, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.tracking-glass .tracking-submit:active { transform: translateY(0); }

/* 18.7 RECENT ORDERS LIST */
.tracking-glass .tracking-recent {
    position: relative;
    margin-top: clamp(22px, 3vw, 32px);
    padding-top: clamp(18px, 2.4vw, 26px);
    border-top: 1px solid rgba(31, 45, 90, 0.10);
}
.tracking-glass .tracking-recent__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.tracking-glass .tracking-recent__head h5 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(15px, 1.8vw, 18px);
    color: var(--glass-primary);
}
.tracking-glass .tracking-recent__hint {
    font-size: 12px;
    color: #9aa0b5;
}
.tracking-glass .tracking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tracking-glass .tracking-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: var(--glass-radius-sm);
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 10px rgba(31, 45, 90, 0.06);
    transition: transform var(--glass-transition), background var(--glass-transition),
                box-shadow var(--glass-transition);
}
.tracking-glass .tracking-list__link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 24px rgba(31, 45, 90, 0.12);
}
.tracking-glass .tracking-list__num {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #2b2f45;
    white-space: nowrap;
}
.tracking-glass .tracking-list__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.tracking-glass .tracking-list__date { font-size: 12px; color: #7a819a; white-space: nowrap; }
.tracking-glass .tracking-list__status {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(76, 129, 222, 0.14);
    color: #3560b0;
}
.tracking-glass .tracking-list__status--red    { background: rgba(224, 85, 107, 0.16); color: #c23a55; }
.tracking-glass .tracking-list__status--green  { background: rgba(42, 157, 74, 0.16);  color: #1f8a41; }
.tracking-glass .tracking-list__status--yellow,
.tracking-glass .tracking-list__status--orange { background: rgba(240, 160, 40, 0.18);  color: #b5720a; }
.tracking-glass .tracking-list__status--blue   { background: rgba(76, 129, 222, 0.14);  color: #3560b0; }
.tracking-glass .tracking-list__chev {
    width: 18px;
    height: 18px;
    color: #9aa0b5;
    flex-shrink: 0;
    transition: transform var(--glass-transition), color var(--glass-transition);
}
.tracking-glass .tracking-list__link:hover .tracking-list__chev {
    transform: translateX(3px);
    color: var(--glass-primary);
}

/* 18.7b EMPTY STATE ("No data") */
.tracking-glass .tracking-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: clamp(22px, 4vw, 40px) 16px;
    text-align: center;
    border-radius: var(--glass-radius-sm);
    background: rgba(255, 255, 255, 0.45);
    border: 1px dashed rgba(31, 45, 90, 0.16);
}
.tracking-glass .tracking-empty i { width: 30px; height: 30px; color: #b3b9cc; }
.tracking-glass .tracking-empty p { margin: 0; font-size: 14px; font-weight: 600; color: #9aa0b5; }

/* 18.8 RESPONSIVE */
@media (max-width: 575.98px) {
    .tracking-glass .tracking-card__head { flex-direction: column; }
    .tracking-glass .tracking-card__tools { align-self: flex-end; }
    .tracking-glass .tracking-submit { align-self: stretch; text-align: center; }
    .tracking-glass .tracking-list__link { flex-wrap: wrap; }
    .tracking-glass .tracking-list__meta { margin-left: 0; width: 100%; justify-content: flex-start; }
    .tracking-glass .tracking-list__chev { display: none; }
}

/* 18.9 MOTION OPT-OUT */
@media (prefers-reduced-motion: reduce) {
    .tracking-glass .tracking-card,
    .tracking-glass .tracking-icon-btn,
    .tracking-glass .tracking-submit,
    .tracking-glass .tracking-list__link,
    .tracking-glass .tracking-list__chev,
    .tracking-glass .tracking-field .form-control { transition: none; }
    .tracking-glass .tracking-card:hover,
    .tracking-glass .tracking-icon-btn:hover,
    .tracking-glass .tracking-submit:hover,
    .tracking-glass .tracking-list__link:hover { transform: none; }
    .tracking-glass .tracking-list__link:hover .tracking-list__chev { transform: none; }
}

/* 18.10 SOLID FALLBACK — no backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .tracking-glass .tracking-card { background-color: var(--glass-bg-card-strong); }
    .tracking-glass .tracking-field .form-control { background: #fff; }
    .tracking-glass .tracking-icon-btn { background: #fff; }
    .tracking-glass .tracking-list__link { background: #fff; }
}

/* ============================================================================
   19. PACKING LIST / REAL-TIME PRODUCTION STATUS  (track_order.blade.php)
   ----------------------------------------------------------------------------
   Scoped under .packing-glass. A Frosted Liquid Glass makeover of the packing
   list + real-time status bar: glass card, a colour-coded 7-stage production
   stepper (Order Received → Cutting → Sublimation → Stitching → QC → Packing →
   Shipped) with vibrant per-stage icon badges, and an animated gradient
   "production performance" progress bar threading through the steps.

   Appearance-only: the Blade @if/@elseif status logic, DOM structure, class
   names, routes and links are all left untouched. Every production icon is
   recoloured with mask-image over the existing PNG line-art in
   ../../newassets/img/icons/ so no new image assets are needed.

   Per-stage palette is carried on CSS vars so a single pair of base rules
   (.__tracked_icon = done / .__tracking_icon = pending) drives both states:
     --pk-c1 / --pk-c2 : stage gradient stops   --pk-glyph : masked line-art
   ============================================================================ */

/* 19.1 PAGE SURFACE — soft tinted backdrop + page rhythm */
.packing-glass.content-inner {
    padding: clamp(14px, 2.2vw, 26px) clamp(8px, 1.6vw, 18px) !important;
    background:
        radial-gradient(1100px 460px at 12% -12%, rgba(108, 160, 255, 0.14), transparent 60%),
        radial-gradient(900px 460px at 112% 6%, rgba(232, 62, 140, 0.08), transparent 55%),
        linear-gradient(180deg, #eef2fb 0%, #f6f8fe 100%) !important;
    min-height: calc(100vh - 120px);
}
.packing-glass,
.packing-glass p, .packing-glass a, .packing-glass span, .packing-glass td,
.packing-glass th, .packing-glass h4, .packing-glass h5, .packing-glass h6 {
    font-family: 'Poppins', sans-serif;
}
.packing-glass .main-new-updt { padding: 0 !important; background: transparent !important; }
/* shared column gap — drives both label & icon rows AND the track end-anchors so
   the % scale runs from the FIRST badge centre (Order Received) to the LAST
   (Shipped). First/last badge centre = (100% - 6*gap) / 14 from each edge. */
.packing-glass { --pk-gap: clamp(6px, 0.8vw, 10px); --pk-anchor: calc((100% - 6 * var(--pk-gap)) / 14); }

/* 19.2 GLASS CARD (Refraction + luminous border + specular sheen) */
.packing-glass .card.card-box {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.packing-glass .card.card-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 90%);
}
.packing-glass .card.card-box > .card-body {
    position: relative;
    z-index: 1;
    padding: clamp(16px, 2.4vw, 30px);
}
.packing-glass hr { border-top: 1px solid rgba(31, 45, 90, 0.10); }

/* 19.3 HEADER — title + glass tool buttons */
.packing-glass .tracking_order > .row { align-items: flex-start; }
.packing-glass h4.fw-600 {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    font-size: clamp(19px, 2.4vw, 26px);
    color: var(--glass-primary);
    letter-spacing: 0.01em;
}
.packing-glass .tracking_order > .row p,
.packing-glass .tracking_order > .row P {
    margin: 6px 0 0;
    font-size: clamp(12px, 1.3vw, 14px);
    color: #6b7291;
}
.packing-glass .tracking_order .col-sm-4 {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}
.packing-glass .icon_stng1001 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--glass-primary);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--glass-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(31, 45, 90, 0.08);
    transition: transform var(--glass-transition), background var(--glass-transition),
                box-shadow var(--glass-transition), color var(--glass-transition);
}
.packing-glass .icon_stng1001:hover {
    transform: translateY(-2px);
    color: #fff;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent));
    box-shadow: 0 8px 20px rgba(60, 68, 177, 0.28);
}
.packing-glass .icon_stng1001 i { width: 18px; height: 18px; }

/* 19.4 TABLE — de-chrome into transparent, roomy rows */
.packing-glass .main-col-int { padding: 0; }
.packing-glass .track_orders_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 68, 177, 0.35) transparent;
}
.packing-glass .track_orders_wrapper::-webkit-scrollbar { height: 8px; }
.packing-glass .track_orders_wrapper::-webkit-scrollbar-thumb {
    background: rgba(60, 68, 177, 0.30);
    border-radius: 999px;
}
.packing-glass .track_orders_wrapper table.table {
    margin-bottom: 8px !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    min-width: 560px;
}
.packing-glass .pq_thead th {
    border: 0;
    padding: 4px 14px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a90aa;
    background: transparent;
}
.packing-glass .pq_thead th.text-primary { color: var(--glass-primary) !important; }
.packing-glass tbody tr {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
}
.packing-glass tbody tr > th,
.packing-glass tbody tr > td {
    border: 0;
    border-top: 1px solid rgba(31, 45, 90, 0.08);
    vertical-align: middle;
    padding: 12px 10px;
    height: auto !important;   /* kill legacy inline height:288px on the actions cell */
}
.packing-glass tbody tr > *:first-child { border-radius: var(--glass-radius-sm) 0 0 var(--glass-radius-sm); }
.packing-glass tbody tr > *:last-child  { border-radius: 0 var(--glass-radius-sm) var(--glass-radius-sm) 0; }

/* 19.4b ROW MORPH — subtle FLG hover lift so each order row feels alive */
.packing-glass tbody tr {
    position: relative;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition);
}
.packing-glass tbody tr:hover {
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 12px 28px -14px rgba(31, 45, 90, 0.32);
    transform: translateY(-2px);
}

/* 19.4c EMPTY STATE — glass panel shown when no order/items are found */
.packing-glass tbody tr.packing-empty-row,
.packing-glass tbody tr.packing-empty-row:hover {
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
    transform: none;
}
.packing-glass tbody tr.packing-empty-row > td { border: 0; padding: 8px; }
.packing-glass .packing-empty {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: clamp(28px, 5vw, 52px) 20px;
    border-radius: var(--glass-radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(238, 242, 251, 0.55));
    border: 1px dashed var(--glass-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.packing-glass .packing-empty__icon {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-primary));
    box-shadow: 0 10px 22px -8px rgba(60, 68, 177, 0.5);
}
.packing-glass .packing-empty__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='16.5' y1='9.4' x2='7.5' y2='4.21'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>") center / 50% no-repeat;
            mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='16.5' y1='9.4' x2='7.5' y2='4.21'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>") center / 50% no-repeat;
    background: #fff;
}
.packing-glass .packing-empty h5 {
    margin: 4px 0 0;
    font-weight: 700;
    font-size: clamp(15px, 1.8vw, 18px);
    color: var(--glass-primary);
}
.packing-glass .packing-empty p {
    margin: 0;
    max-width: 340px;
    font-size: clamp(12px, 1.3vw, 14px);
    color: #6b7291;
}

/* order + product cells — kill the legacy hard-coded top offsets */
.packing-glass .prod_image.main-hd-img {
    width: auto !important;
    margin-top: 0 !important;
}
/* ORDER column: team name + order # stacked on separate rows, compact width */
.packing-glass tbody tr > th { min-width: clamp(96px, 9vw, 118px); }
.packing-glass .prod__title.main-new-tb {
    width: auto !important;
    margin-top: 0 !important;
}
.packing-glass .prod__title h5 {
    font-size: clamp(12px, 1.35vw, 14px);
    font-weight: 700;
    line-height: 1.18;
    color: #2b2f45;
    margin: 0;
    white-space: normal;
    overflow-wrap: normal;   /* break at spaces, not mid-token */
    word-break: normal;
    hyphens: none;
}
/* order number = quiet second row */
.packing-glass .prod__title .prod__ordernum {
    display: block;
    margin-top: 3px;
    font-size: clamp(10px, 1.05vw, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--glass-primary);
    opacity: 0.75;
}
/* PRODUCT column: smaller, tighter thumbnail */
.packing-glass .prod_image.main-hd-img { width: auto !important; }
.packing-glass .prod_image img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 4px 12px rgba(31, 45, 90, 0.10);
}

/* 19.5 STAGE LABEL ROW — slim, box-free captions (compact & modern) */
.packing-glass td .d-flex {
    display: flex !important;
    gap: var(--pk-gap);
    align-items: flex-start;
    margin-bottom: 8px;
}
.packing-glass .custom-card {
    flex: 1 1 0;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 0 2px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.packing-glass .custom-card span {
    font-size: clamp(8px, 0.82vw, 10px);
    font-weight: 600 !important;
    line-height: 1.18;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* completed stage = brand green caption; pending = quiet grey */
.packing-glass .custom-card.border-success span { color: #17a95a; }
.packing-glass .custom-card.border-success::after { content: none; }
.packing-glass .custom-card.border-fail span { color: #aab0c4; }

/* 19.6 ICON STEPPER — equal columns, connector line behind badges */
.packing-glass .tracking-items {
    position: relative;
    margin-top: 2px !important;
    padding-top: 2px;
}
.packing-glass .list_icons {
    display: flex;
    align-items: flex-start;
    gap: var(--pk-gap);
    position: relative;
    z-index: 1;
}
/* connector rail is provided by .tracking__bar (visible track + fill) below */
.packing-glass .list_icons::before { display: none; }
.packing-glass .t_icons {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 1;
}
.packing-glass .tracking_date__time {
    font-size: 10px;
    color: #8a90aa;
    text-align: center;
    line-height: 1.2;
}

/* 19.6a THE BADGE — circular glass chip; glyph painted via mask pseudo */
.packing-glass .__tracking_icon,
.packing-glass .__tracked_icon {
    content: normal !important;   /* cancel legacy custom.css `content:url(clipboard.png)` */
    position: relative;
    width: clamp(38px, 3.6vw, 46px);
    height: clamp(38px, 3.6vw, 46px);
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--glass-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(31, 45, 90, 0.10);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.packing-glass .__tracking_icon::before,
.packing-glass .__tracked_icon::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--pk-glyph, none) center / 56% no-repeat;
            mask: var(--pk-glyph, none) center / 56% no-repeat;
    background: var(--pk-c2, #9198b0);
    transition: background var(--glass-transition);
}
/* pending = soft glass, stage-tinted glyph */
.packing-glass .__tracking_icon {
    background: rgba(255, 255, 255, 0.66);
    filter: saturate(0.85);
}
.packing-glass .__tracking_icon::before { opacity: 0.75; }
/* done = vibrant stage gradient, white glyph, coloured glow + ✓ badge */
.packing-glass .__tracked_icon {
    background: linear-gradient(135deg, var(--pk-c1, #6aa0ff), var(--pk-c2, #3f6fd8));
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                0 10px 20px -6px var(--pk-c2, #3f6fd8);
}
.packing-glass .__tracked_icon::before { background: #fff; }
.packing-glass .__tracked_icon::after {
    content: "\2713";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #12864a;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(31, 45, 90, 0.22);
}
.packing-glass .t_icons:hover .__tracked_icon,
.packing-glass .t_icons:hover .__tracking_icon { transform: translateY(-3px); }

/* 19.6b PER-STAGE PALETTE + GLYPH (done + pending variants share stage vars)
   Glyphs are self-authored stroke SVGs (guaranteed transparent silhouettes) so
   the mask recolour is consistent for every stage regardless of the legacy PNG
   assets. Stroke width is bumped so line icons stay crisp at badge scale. */
.packing-glass .__tracking_icon::before,
.packing-glass .__tracked_icon::before {
    -webkit-mask-size: 58% !important;
            mask-size: 58% !important;
}
/* 1 · Order Received — blue (clipboard + check) */
.packing-glass .icon_cutting,
.packing-glass .icon_cutting_success {
    --pk-c1: #6aa0ff; --pk-c2: #3f6fd8;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M9 13l2 2 4-4'/></svg>");
}
/* 2 · Sublimation & Emb — pink (printer)  [floor stage after Received] */
.packing-glass .icon_packing,
.packing-glass .icon_sublimated_success,
.packing-glass .icon_subliment_success {
    --pk-c1: #ff8ac0; --pk-c2: #e83e8c;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 6 2 18 2 18 9'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect x='6' y='14' width='12' height='8'/></svg>");
}
/* 3 · Cutting — orange (scissors)  [floor stage after Sublimation] */
.packing-glass .icon_subliment,
.packing-glass .icon_cutted_success {
    --pk-c1: #ffb35c; --pk-c2: #ff7a1a;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><line x1='20' y1='4' x2='8.12' y2='15.88'/><line x1='14.47' y1='14.48' x2='20' y2='20'/><line x1='8.12' y1='8.12' x2='12' y2='12'/></svg>");
}
/* 4 · Stitching — purple (seam stitch) */
.packing-glass .icon_Delivered,
.packing-glass .icon_stitched_success {
    --pk-c1: #b98cff; --pk-c2: #7d3cf0;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 12 6 12 9 4 15 20 18 12 22 12'/></svg>");
}
/* 5 · Quality Control — teal (shield check) */
.packing-glass .icon_clipboard,
.packing-glass .icon_qc_success {
    --pk-c1: #5fe0d2; --pk-c2: #12a89a;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>");
}
/* 6 · Packing — amber (box) */
.packing-glass .icon_packagingi,
.packing-glass .icon_packagingi_successs {
    --pk-c1: #ffd970; --pk-c2: #f5a623;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='16.5' y1='9.4' x2='7.5' y2='4.21'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
}
/* 7 · Shipped — cyan/indigo (truck) */
.packing-glass .icon_shipped,
.packing-glass .icon_shipped_success {
    --pk-c1: #6fd8ea; --pk-c2: #2f8fe6;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='3' width='15' height='13'/><polygon points='16 8 20 8 23 11 23 16 16 16 16 8'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>");
}

/* 19.6c CURRENT-STAGE PULSE — a radar "ping" ring on the frontier badge (the
   last completed stage that is immediately followed by a pending one) to signal
   the live, in-progress step. Additive & self-scoped: on engines without :has()
   it is simply a no-op, so it never breaks the stepper. */
.packing-glass .t_icons:has(.__tracked_icon):has(+ .t_icons .__tracking_icon) .__tracked_icon {
    animation: pkFrontier 2.2s ease-out infinite;
}
@keyframes pkFrontier {
    0% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                    0 10px 20px -6px var(--pk-c2, #3f6fd8),
                    0 0 0 0 rgba(63, 111, 216, 0.45);
    }
    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                    0 10px 20px -6px var(--pk-c2, #3f6fd8),
                    0 0 0 9px rgba(63, 111, 216, 0);
    }
}
@supports (color: color-mix(in srgb, #000 50%, transparent)) {
    @keyframes pkFrontier {
        0% {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                        0 10px 20px -6px var(--pk-c2, #3f6fd8),
                        0 0 0 0 color-mix(in srgb, var(--pk-c2, #3f6fd8) 55%, transparent);
        }
        100% {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                        0 10px 20px -6px var(--pk-c2, #3f6fd8),
                        0 0 0 9px color-mix(in srgb, var(--pk-c2, #3f6fd8) 0%, transparent);
        }
    }
}

/* 19.7 PERFORMANCE RAIL — slim liquid fill threaded through the stepper,
   anchored badge1 → badge7. Compact: no separate bar row; the fill flows along
   the connector line and the numeric % lives in the readout chip (19.8). */
.packing-glass .progress.tracking__bar {
    position: absolute;
    left: var(--pk-anchor);
    right: var(--pk-anchor);
    width: auto;
    top: 24px;
    transform: translateY(-50%);
    height: 8px;
    z-index: 0;              /* behind the badges (badges are z-index 1) */
    overflow: visible;
    background: rgba(31, 45, 90, 0.12);   /* visible empty track */
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(31, 45, 90, 0.15);
}
.packing-glass .progress-bar.tracking_progress_bar {
    position: relative;
    overflow: visible;
    height: 8px;
    min-width: 14px;
    border-radius: 999px;
    font-size: 0;            /* hide inline label; % is shown in the readout chip */
    color: transparent !important;
    background: linear-gradient(90deg, #3f6fd8, #7d3cf0 35%, #e83e8c 65%, #f5a623) !important;
    background-size: 220% 100%;
    box-shadow: 0 3px 10px -2px rgba(125, 60, 240, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: pkFlow 4s linear infinite;
    transition: width 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}
/* 19.7a RUNNING-FLUID LAYER — diagonal current streaks flowing along the fill */
.packing-glass .progress-bar.tracking_progress_bar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        /* travelling highlight sweep */
        linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 60%) 0 0 / 55% 100% no-repeat,
        /* repeating liquid ripples */
        repeating-linear-gradient(115deg,
            rgba(255, 255, 255, 0.24) 0px, rgba(255, 255, 255, 0.24) 8px,
            rgba(255, 255, 255, 0) 8px,  rgba(255, 255, 255, 0) 20px);
    background-blend-mode: screen;
    mix-blend-mode: screen;
    animation: pkFluid 2.6s linear infinite;
}
/* moving highlight nib at the leading edge = "performance in motion" */
.packing-glass .progress-bar.tracking_progress_bar::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #eaf0ff 55%, #cdd9ff 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 3px 8px rgba(31, 45, 90, 0.3);
    animation: pkPulse 1.8s ease-in-out infinite;
    z-index: 1;
}
@keyframes pkFlow   { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
/* one keyframe drives BOTH ::before layers: layer 1 = travelling sweep,
   layer 2 = fast repeating ripples (240px = 12 seamless 20px cycles) */
@keyframes pkFluid {
    0%   { background-position: -60% 0, 0 0; }
    100% { background-position: 160% 0, 240px 0; }
}
@keyframes pkPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.40), 0 3px 8px rgba(31, 45, 90, 0.30); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(31, 45, 90, 0.36); }
}

/* 19.8 PERFORMANCE READOUT (right cell) — compact % chip */
.packing-glass .packing_tracking {
    width: auto;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 12px;
    margin-top: 0 !important;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(238, 242, 251, 0.7));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(31, 45, 90, 0.10);
}
.packing-glass .packing_tracking h5 {
    margin: 0;
    font-weight: 800;
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.05;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-primary));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--glass-primary) !important;
}
.packing-glass .packing_tracking::after {
    content: "DONE";
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #9198b0;
}

/* 19.9 ACTIONS — inline circular icon links (Packing List, Re-Order).
   Same size/treatment as the stepper badges; each glyph matches its link. */
.packing-glass .main-last-col { padding: 12px 10px !important; }
.packing-glass .track_actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.packing-glass .track_action {
    position: relative;
    display: inline-block;
    width: clamp(38px, 3.6vw, 46px);
    height: clamp(38px, 3.6vw, 46px);
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--glass-card-border);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(31, 45, 90, 0.10);
    transition: transform var(--glass-transition), background var(--glass-transition),
                box-shadow var(--glass-transition);
}
.packing-glass .track_action::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--pk-glyph, none) center / 50% no-repeat;
            mask: var(--pk-glyph, none) center / 50% no-repeat;
    background: var(--pk-c2, #3c44b1);
    transition: background var(--glass-transition);
}
.packing-glass .track_action:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--pk-c1), var(--pk-c2));
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 20px -6px var(--pk-c2);
}
.packing-glass .track_action:hover::before { background: #fff; }
.packing-glass .track_action.is-disabled,
.packing-glass .track_action.is-disabled:hover {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--glass-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 8px rgba(31, 45, 90, 0.06);
}
.packing-glass .track_action.is-disabled:hover::before {
    background: var(--pk-c2, #3c44b1);
}
/* Soft hover notice when packing is not ready yet */
.packing-glass .track_action.is-disabled[data-tip] {
    position: relative;
}
.packing-glass .track_action.is-disabled[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 5;
    width: min(240px, 70vw);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(31, 45, 90, 0.12);
    background: rgba(255, 255, 255, 0.96);
    color: #5a6280;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 24px rgba(31, 45, 90, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.packing-glass .track_action.is-disabled[data-tip]:hover::after,
.packing-glass .track_action.is-disabled[data-tip]:focus::after {
    opacity: 1;
    transform: translateY(0);
}
/* Packing List — indigo (clipboard-list) */
.packing-glass .act_packing {
    --pk-c1: #6aa0ff; --pk-c2: #3f6fd8;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><line x1='9' y1='12' x2='15' y2='12'/><line x1='9' y1='16' x2='13' y2='16'/></svg>");
}
/* Re-Order — green (refresh-cw) */
.packing-glass .act_reorder {
    --pk-c1: #46d98a; --pk-c2: #17a95a;
    --pk-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><polyline points='1 20 1 14 7 14'/><path d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/></svg>");
}

/* 19.10 RESPONSIVE */
@media (max-width: 991.98px) {
    .packing-glass .tracking_order .col-sm-4 { margin-top: 12px; justify-content: flex-start; }
}
/* tighter gutters on tablets so the 7-node stepper never needs scrolling */
@media (max-width: 767.98px) {
    .packing-glass { --pk-gap: clamp(3px, 1vw, 6px); }
    .packing-glass tbody tr > th,
    .packing-glass tbody tr > td { padding: 10px 8px; }
}

/* 19.10a MOBILE — collapse the wide table into a stacked glass card per order.
   Row becomes: [thumb] [title] ........ [%] [⋮]  /  full-width stepper below. */
@media (max-width: 575.98px) {
    .packing-glass .track_orders_wrapper { overflow-x: visible; }
    .packing-glass .track_orders_wrapper table.table { min-width: 0; display: block; }
    .packing-glass .pq_thead { display: none; }            /* column headers not needed in card mode */
    .packing-glass tbody { display: block; }
    .packing-glass tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px;
        margin-bottom: 12px;
        border-radius: var(--glass-radius-sm);
        border: 1px solid var(--glass-card-border);
    }
    .packing-glass tbody tr > th,
    .packing-glass tbody tr > td {
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        width: auto;
    }
    /* thumb = 0 · title = 1 (narrow basis → wraps to 2 lines) · readout = 2 · actions = 3 · stepper = 4 (own row) */
    .packing-glass tbody tr > *:nth-child(1) { order: 1; flex: 1 1 84px; min-width: 0; }
    .packing-glass tbody tr > *:nth-child(2) { order: 0; flex: 0 0 auto; }
    .packing-glass tbody tr > *:nth-child(3) { order: 4; flex: 0 0 100%; margin-top: 4px; }
    .packing-glass tbody tr > *:nth-child(4) { order: 2; flex: 0 0 auto; }
    .packing-glass tbody tr > *:nth-child(5) { order: 3; flex: 0 0 auto; }
    .packing-glass .prod__title.main-new-tb { width: auto !important; }
    .packing-glass .prod_image img { width: 52px; height: auto; }
    .packing-glass td .d-flex { margin-bottom: 6px; }
    /* keep all 7 nodes on one row inside the card */
    .packing-glass .__tracking_icon,
    .packing-glass .__tracked_icon { width: clamp(30px, 8.4vw, 40px); height: clamp(30px, 8.4vw, 40px); }
    .packing-glass .progress.tracking__bar { top: 19px; }
    .packing-glass .track_action { width: clamp(30px, 8.4vw, 38px); height: clamp(30px, 8.4vw, 38px); }
}

/* 19.11 MOTION OPT-OUT */
@media (prefers-reduced-motion: reduce) {
    .packing-glass .progress-bar.tracking_progress_bar,
    .packing-glass .progress-bar.tracking_progress_bar::before,
    .packing-glass .progress-bar.tracking_progress_bar::after,
    .packing-glass .t_icons .__tracked_icon,
    .packing-glass .t_icons:has(.__tracked_icon):has(+ .t_icons .__tracking_icon) .__tracked_icon { animation: none; }
    .packing-glass .__tracking_icon,
    .packing-glass .__tracked_icon,
    .packing-glass .icon_stng1001,
    .packing-glass .track_action,
    .packing-glass .custom-card { transition: none; }
    .packing-glass .t_icons:hover .__tracked_icon,
    .packing-glass .t_icons:hover .__tracking_icon { transform: none; }
}

/* 19.12 SOLID FALLBACK — no backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .packing-glass .card.card-box { background-color: var(--glass-bg-card-strong); }
    .packing-glass tbody tr { background: #fff; }
    .packing-glass .packing_tracking,
    .packing-glass .icon_stng1001,
    .packing-glass .track_action { background: #fff; }
}

/* ===========================================================================
   20. SELECT ITEMS / PRODUCTS MODAL — Frosted Liquid Glass (#select_items_for_order)
   ---------------------------------------------------------------------------
   Appearance-only makeover of the "Select Category → PRODUCTS" picker modals
   (#select_items_for_order, #select_item_for_cart_modal).
   Scoped under .products-glass. All ids, class hooks, onclick handlers and the
   AJAX-injected markup (categories_div, products_div → partials/order_products)
   are left untouched — this only restyles the shell, category tiles and the
   product/package cards (.quiz_card_area) into the shared glass language.
   =========================================================================== */
.products-glass,
.products-glass h3, .products-glass h4, .products-glass h5, .products-glass h6,
.products-glass p, .products-glass span, .products-glass a, .products-glass button {
    font-family: 'Poppins', sans-serif;
}

/* 20.1 SHELL — frosted glass modal-content */
.products-glass .modal-dialog { max-width: min(980px, 94vw); }
.products-glass .modal-content {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.32));
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(36px) saturate(190%) brightness(1.05);
            backdrop-filter: blur(36px) saturate(190%) brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 -24px 44px rgba(108, 160, 255, 0.07),
        0 32px 72px rgba(15, 23, 53, 0.30);
}
.products-glass .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(130% 60% at 12% -12%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%),
        radial-gradient(90% 55% at 112% 4%, rgba(108, 160, 255, 0.16), rgba(255, 255, 255, 0) 55%),
        radial-gradient(120% 80% at 50% 122%, rgba(173, 205, 255, 0.12), rgba(255, 255, 255, 0) 60%);
    mix-blend-mode: screen;
}
.products-glass .modal-content > * { position: relative; z-index: 1; }

/* 20.2 HEADER — glossy light-blue bar + title + back-arrow + close pill */
.products-glass .modal-header {
    position: relative;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(135deg, rgba(180, 210, 255, 0.62), rgba(120, 170, 255, 0.32));
    -webkit-backdrop-filter: blur(12px) saturate(170%);
            backdrop-filter: blur(12px) saturate(170%);
    padding: 16px 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.products-glass .modal-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.products-glass .modal-header > * { position: relative; z-index: 1; }
.products-glass .modal-title {
    color: var(--glass-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.products-glass .modal-title .back_to_categories {
    cursor: pointer;
    color: var(--glass-primary);
    opacity: 0.85;
    transition: transform var(--glass-transition), opacity var(--glass-transition);
}
.products-glass .modal-title .back_to_categories:hover { opacity: 1; transform: translateX(-2px); }

/* Header close (×) → round glass pill */
.products-glass .modal-header .btn-danger {
    width: 38px;
    height: 38px;
    padding: 0;
    line-height: 1;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid rgba(224, 85, 107, 0.35);
    color: #e0556b;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(224, 85, 107, 0.12);
    transition: transform var(--glass-transition), background var(--glass-transition),
                color var(--glass-transition), box-shadow var(--glass-transition);
}
.products-glass .modal-header .btn-danger:hover {
    transform: translateY(-1px) rotate(90deg);
    color: #fff;
    background: linear-gradient(135deg, #ff7a8f, #e0556b);
    box-shadow: 0 8px 18px rgba(224, 85, 107, 0.30);
}

/* 20.3 BODY + section headings */
.products-glass .modal-body { padding: 22px clamp(16px, 2.4vw, 28px); }
.products-glass .modal-body > .products_div > h5,
.products-glass .products_div h5 {
    color: #1c2333;
    font-weight: 600;
}
.products-glass .products_div > h5:first-child {
    font-size: 15px;
    color: var(--glass-primary);
}
.products-glass .products_div hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(60, 68, 177, 0.25), rgba(60, 68, 177, 0));
}
.products-glass .products_div span[style*="bolder"] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--glass-primary);
    background: rgba(108, 160, 255, 0.16);
    border: 1px solid rgba(108, 160, 255, 0.28);
}
/* Products = blue (default above). Packages = amber/gold to differentiate. */
.products-glass .products_div span[style*="bolder"].section-pill--package {
    color: #9a6212;
    background: rgba(245, 173, 66, 0.18);
    border-color: rgba(217, 143, 30, 0.42);
}

/* 20.4 CATEGORY TILES (categories_div) */
.products-glass .categories_div .card.get_child_products,
.products-glass .categories_div .card.get_child_products_of_category {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.products-glass .categories_div .card.get_child_products:hover,
.products-glass .categories_div .card.get_child_products_of_category:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-card-shadow-hover);
}
.products-glass .categories_div .card.get_child_products .card-img-top,
.products-glass .categories_div .card.get_child_products_of_category .card-img-top {
    border-radius: 0;
    background: #fff;
}
.products-glass .categories_div .prod_category_card__bg {
    border-radius: 0;
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.18), rgba(60, 68, 177, 0.10));
    border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.products-glass .categories_div .prod_category_card__bg .card-title {
    color: #1c2333;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.products-glass .categories_div .card.get_child_products:hover .prod_category_card__bg,
.products-glass .categories_div .card.get_child_products_of_category:hover .prod_category_card__bg {
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.34), rgba(60, 68, 177, 0.20));
}

/* 20.5 PRODUCT / PACKAGE CARDS (.quiz_card_area) */
.products-glass .quiz_card_area { margin-bottom: 26px; }
.products-glass .single_quiz_card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition);
}
.products-glass .single_quiz_card:hover {
    transform: translateY(-4px);
    border-color: rgba(108, 160, 255, 0.5);
    box-shadow: var(--glass-card-shadow-hover);
}
/* image + name block */
.products-glass .quiz_card_icon { display: block; }
.products-glass .quiz_card_icon .card-body {
    padding: 10px 10px 4px !important;
    background: transparent;
}
.products-glass .quiz_card_icon .card-body label.category {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;      /* let the image tile span the full card width */
    gap: 10px;
    margin: 0;
    cursor: pointer;
    width: 100% !important;    /* beat global .category sizing that shrank it to ~200px */
    max-width: none !important; /* clear inherited 200px cap so the tile fills the card */
    height: auto;
    float: none;               /* override global .category float:left that squeezed the price */
}
/* keep icon + price footer stacked full-width (clear any legacy float) */
.products-glass .quiz_card_content { display: block; }
.products-glass .quiz_card_content::after { content: ""; display: block; clear: both; }
.products-glass .quiz_card_icon .card-body label.category img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px;
    object-fit: contain;       /* product mockups are on white → letterbox blends seamlessly */
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 53, 0.05);
}
/* product name — override global absolute .category h3 rule inside the modal */
.products-glass .quiz_card_icon .card-body label.category h3 {
    position: static;
    width: 100%;
    bottom: auto;
    padding: 0 4px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1c2333;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
}
/* price footer */
.products-glass .quiz_card_title.bg__card {
    margin: 6px 10px 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.16), rgba(60, 68, 177, 0.10));
    border: 1px solid rgba(108, 160, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: var(--glass-primary);
}
.products-glass .quiz_card_title.bg__card {
    text-align: center;
}
.products-glass .quiz_card_title.bg__card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--glass-primary);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/* Range prices: low (starting) = green, high = red, muted separator */
.products-glass .quiz_card_title.bg__card h3 .price-low  { color: #1f9d57; }
.products-glass .quiz_card_title.bg__card h3 .price-high { color: var(--glass-primary); }
.products-glass .quiz_card_title.bg__card h3 .price-sep  {
    color: #9aa1b4;
    margin: 0 6px;
    font-weight: 600;
}
/* selected-state overlay tick keeps working, just themed */
.products-glass .bg__overlay .checkbox_effect { color: var(--glass-accent); }

/* 20.6 FOOTER — cancel becomes a glass pill */
.products-glass .modal-footer {
    border-top: 1px solid rgba(15, 23, 53, 0.08);
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.42);
}
.products-glass .modal-footer .btn-danger {
    border-radius: 999px;
    padding: 9px 22px;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, #ff7a8f, #e0556b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(224, 85, 107, 0.24);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.products-glass .modal-footer .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(224, 85, 107, 0.32);
}

/* 20.6b MOBILE — compact category + product grids (Add Product modal) */
@media (max-width: 767.98px) {
    /* Beat legacy .expand_modal { min-width: 665px } so the picker fits phones */
    .expand_modal.products-glass .modal-dialog,
    .products-glass.expand_modal .modal-dialog {
        min-width: 0 !important;
        max-width: calc(100vw - 1rem);
        margin: 0.5rem auto;
    }
    .products-glass .modal-body {
        padding: 12px 10px;
        max-height: calc(100dvh - 11rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .products-glass .modal-header {
        padding: 12px 14px;
    }
    .products-glass .modal-title {
        font-size: 14px;
    }
    .products-glass .modal-footer {
        padding: 10px 14px;
    }

    /* Category tiles — 2-up grid, smaller image + label */
    .products-glass .categories_div.row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .products-glass .categories_div > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .products-glass .categories_div .card.get_child_products,
    .products-glass .categories_div .card.get_child_products_of_category {
        margin-bottom: 10px !important;
    }
    .products-glass .categories_div .card.get_child_products .card-img-top,
    .products-glass .categories_div .card.get_child_products_of_category .card-img-top {
        height: 84px;
        width: 100%;
        object-fit: contain;
        object-position: center;
        padding: 6px;
        background: #fff;
    }
    .products-glass .categories_div .prod_category_card__bg {
        padding: 6px 4px !important;
    }
    .products-glass .categories_div .prod_category_card__bg .card-title {
        font-size: 10px;
        line-height: 1.25;
        letter-spacing: 0.02em;
    }

    /* Product / package cards — 2-up grid, shorter tiles */
    .products-glass .products_div .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .products-glass .products_div .row > .col-sm-6.col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .products-glass .products_div .quiz_card_area,
    .products-glass .products_div .quiz_card_area.card {
        margin-bottom: 10px !important;
    }
    .products-glass .products_div hr.mb-5 {
        margin-bottom: 0.75rem !important;
    }
    .products-glass .products_div .row.mt-5 {
        margin-top: 0.75rem !important;
    }
    .products-glass .products_div h5.mb-4 {
        margin-bottom: 0.5rem !important;
        font-size: 13px;
    }
    .products-glass .quiz_card_icon .card-body {
        padding: 6px 6px 2px !important;
    }
    .products-glass .quiz_card_icon .card-body label.category img {
        height: 96px;
        border-radius: 10px;
    }
    .products-glass .quiz_card_icon .card-body label.category h3 {
        font-size: 11px;
        line-height: 1.25;
        margin-top: 4px;
    }
    .products-glass .quiz_card_title.bg__card {
        margin: 4px 6px 8px;
        padding: 6px 8px;
    }
    .products-glass .quiz_card_title.bg__card h3 {
        font-size: 12px;
        white-space: normal;
        line-height: 1.2;
    }
}

/* Tablet — 3-up categories/products with restrained image height */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .products-glass .categories_div .card.get_child_products .card-img-top,
    .products-glass .categories_div .card.get_child_products_of_category .card-img-top {
        height: 110px;
        object-fit: contain;
        object-position: center;
        padding: 8px;
    }
    .products-glass .categories_div .card.get_child_products,
    .products-glass .categories_div .card.get_child_products_of_category {
        margin-bottom: 1rem !important;
    }
    .products-glass .quiz_card_icon .card-body label.category img {
        height: 140px;
    }
}

/* 20.7 MOTION OPT-OUT + SOLID FALLBACK */
@media (prefers-reduced-motion: reduce) {
    .products-glass .single_quiz_card,
    .products-glass .categories_div .card.get_child_products,
    .products-glass .categories_div .card.get_child_products_of_category,
    .products-glass .modal-header .btn-danger,
    .products-glass .modal-footer .btn-danger { transition: none; }
    .products-glass .single_quiz_card:hover,
    .products-glass .categories_div .card.get_child_products:hover,
    .products-glass .categories_div .card.get_child_products_of_category:hover { transform: none; }
    .products-glass .modal-header .btn-danger:hover { transform: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .products-glass .modal-content { background: #ffffff; }
    .products-glass .single_quiz_card,
    .products-glass .categories_div .card.get_child_products,
    .products-glass .categories_div .card.get_child_products_of_category { background-color: var(--glass-bg-card-strong); }
}

/* ============================================================================
   21. PACKING LIST DOCUMENT  (packing-list.blade.php  →  route packing_list)
   ----------------------------------------------------------------------------
   Scoped under .packlist-glass (on .content-inner). This is the printable
   "BOX packing list" DOCUMENT page — a DIFFERENT page from the tracking status
   bar in §19 (.packing-glass). It has its own markup so it gets its own scope.

   A Frosted Liquid Glass makeover of: page surface, the outer card, the header
   (breadcrumb + order meta + carrier/tracking), the Print button, and the
   centred "receipt" document (BOX NO badge, order/article meta, roster table).

   Appearance-only: every id, class hook, onclick (printPackingList) and the
   Blade @foreach roster loop are left untouched. All styling that used to live
   in the view's inline <style> block was moved here and modernised.

   §21.10 keeps a print stylesheet (scoped) so window.print() output stays
   clean: glass/blur is flattened to solid white and screen-only chrome
   (breadcrumb, carrier row, Print button) is hidden on paper.
   ============================================================================ */

/* 21.1 PAGE SURFACE + type (neutralise the old body{background;text-align} leak) */
.packlist-glass.content-inner {
    padding: clamp(14px, 2.2vw, 26px) clamp(8px, 1.6vw, 18px) !important;
    background:
        radial-gradient(1100px 460px at 12% -12%, rgba(108, 160, 255, 0.14), transparent 60%),
        radial-gradient(900px 460px at 112% 6%, rgba(232, 62, 140, 0.08), transparent 55%),
        linear-gradient(180deg, #eef2fb 0%, #f6f8fe 100%) !important;
    min-height: calc(100vh - 120px);
    text-align: left;
}
.packlist-glass,
.packlist-glass p, .packlist-glass a, .packlist-glass span,
.packlist-glass td, .packlist-glass th,
.packlist-glass h2, .packlist-glass h4, .packlist-glass h5, .packlist-glass h6 {
    font-family: 'Poppins', sans-serif;
}

/* 21.2 GLASS CARD (Refraction + luminous border + specular sheen) */
.packlist-glass .card.card-box {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.packlist-glass .card.card-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 90%);
}
.packlist-glass .card.card-box > .card-body {
    position: relative;
    z-index: 1;
    padding: clamp(16px, 2.4vw, 30px);
    overflow: hidden;
}

/* 21.3 HEADER — breadcrumb, order meta, carrier + tracking */
.packlist-glass .breadcrumb {
    background: transparent;
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.packlist-glass .breadcrumb .breadcrumb-item a { color: #6b7291; text-decoration: none; }
.packlist-glass .breadcrumb .breadcrumb-item a:hover { color: var(--glass-primary); }
.packlist-glass .breadcrumb .breadcrumb-item.active { color: var(--glass-primary); }

.packlist-glass .col-5.text-center h4.fw-600 {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    font-size: clamp(18px, 2.3vw, 25px);
    color: var(--glass-primary);
    letter-spacing: 0.01em;
}
.packlist-glass .col-5.text-center p { margin: 4px 0 0; }
.packlist-glass .packlist-meta {
    margin: 4px 0 0;
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 500;
    color: #6b7291;
    text-transform: none;
}
.packlist-glass .packlist-meta.fs-12 { font-size: 12px; }

/* carrier logo + tracking number, right aligned */
.packlist-glass .d-flex.justify-content-end { gap: 10px; align-items: center; }
.packlist-glass .d-flex.justify-content-end img {
    height: 26px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(31, 45, 90, 0.12));
}
.packlist-glass .d-flex.justify-content-end p { margin: 0; font-size: 12px; color: #6b7291; }
.packlist-glass .packlist-track-link {
    display: inline-flex;
    align-items: center;
    max-width: min(280px, 100%);
    padding: 8px 14px;
    border: 1px solid rgba(224, 85, 107, 0.35);
    background: rgba(224, 85, 107, 0.12);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #9b2743;
    text-decoration: none;
    word-break: break-all;
}
.packlist-glass a.packlist-track-link:hover,
.packlist-glass a.packlist-track-link:focus {
    color: #7a1d33;
    text-decoration: underline;
    background: rgba(224, 85, 107, 0.2);
}
.packlist-glass .packlist-track-link--plain {
    cursor: default;
}
.packlist-glass input.form-control {
    width: 180px;
    border: 1px solid var(--glass-card-border);
    background: rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--glass-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(31, 45, 90, 0.06);
}
.packlist-glass input.form-control::placeholder { color: #9aa0b5; font-weight: 500; }

/* 21.4 PRINT BUTTON — glass gradient pill */
.packlist-glass .packlist-print-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(18px, 2.4vw, 28px);
    clear: both;
}
.packlist-glass .packlist-print-btn.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px !important;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(60, 68, 177, 0.24);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.packlist-glass .packlist-print-btn.btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(60, 68, 177, 0.34);
}
.packlist-glass .packlist-print-btn.btn.btn-primary:active { transform: translateY(0); }
.packlist-glass .packlist-print-btn i { font-size: 15px; }

/* 21.5 DOCUMENT — the centred glass "receipt" (was .main-new.col-lg-6) */
.packlist-glass .col-lg-3:empty { display: none; }
.packlist-glass .main-new.col-lg-6 {
    clear: both;
    float: none;
    width: min(600px, 100%);
    max-width: 100%;
    margin: 22px auto 8px;
    padding: clamp(18px, 2.6vw, 30px);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card-strong);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    text-align: left;
}
/* title: "BOX packing list" */
.packlist-glass .main-new.col-lg-6 .main-new-snd h2 {
    margin: 0 0 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: clamp(18px, 2.4vw, 24px);
    color: var(--glass-primary);
}
.packlist-glass .main-new.col-lg-6 .main-new-snd > br { display: none; }

/* 21.6 BOX NO row — label + glass badge + packing date */
.packlist-glass .main-new.col-lg-6 > .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 4px;
    padding: 10px 0;
    border-top: 1px solid rgba(31, 45, 90, 0.10);
    border-bottom: 1px solid rgba(31, 45, 90, 0.10);
}
.packlist-glass .main-new.col-lg-6 > .row h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7291;
}
.packlist-glass .square.col-lg-2 {
    height: auto;
    width: auto;
    min-width: 40px;
    margin-left: 0 !important;
    padding: 4px 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-card-border) !important;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.18), rgba(76, 129, 222, 0.10)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(31, 45, 90, 0.08);
}
.packlist-glass .square.col-lg-2 p {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 800;
    color: var(--glass-primary);
}
.packlist-glass p.main-new {
    margin: 0 0 0 auto !important;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7291;
}

/* 21.7 ORDER / ARTICLE meta */
.packlist-glass .main-next-section {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.packlist-glass .main-new-frst-prnt { flex: 1 1 45%; text-align: left; }
.packlist-glass .main-new-secnd-prnt { flex: 1 1 45%; text-align: right; }
.packlist-glass .main-new-frst-prnt h4,
.packlist-glass .main-new-secnd-prnt h4 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    color: #1f2d5a;
}
.packlist-glass .main-new-secnd-prnt p {
    margin: 0;
    font-size: 12px;
    color: #6b7291;
}

/* 21.8 ROSTER TABLE — transparent, roomy, zebra + accent index */
.packlist-glass .main-new.col-lg-6 .table {
    margin-top: 14px;
    margin-bottom: 0;
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}
.packlist-glass .main-new.col-lg-6 .table thead th {
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(60, 68, 177, 0.20) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7291;
    text-align: left;
    background: transparent;
}
.packlist-glass .main-new.col-lg-6 .table tbody td {
    padding: 9px 12px !important;
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid rgba(31, 45, 90, 0.08) !important;
    font-size: 13px;
    color: #2b3355;
    background: transparent;
}
.packlist-glass .main-new.col-lg-6 .table tbody tr:nth-child(even) td {
    background: rgba(108, 160, 255, 0.05);
}
.packlist-glass .main-new.col-lg-6 .table tbody tr:hover td {
    background: rgba(108, 160, 255, 0.12);
}
/* leading index cell → subtle grey, regular weight (plain row counter) */
.packlist-glass .main-new.col-lg-6 .table tbody td:first-child {
    width: 42px;
    text-align: center;
    font-weight: 400;
    color: #9298ad;
    background: transparent !important;
}
/* player number cell → brand blue, bold (stands out) */
.packlist-glass .main-new.col-lg-6 .table tbody td:nth-child(2) {
    font-weight: 700;
    color: var(--glass-primary);
}

/* 21.9 RESPONSIVE (compact / ~390px) */
@media (max-width: 575px) {
    .packlist-glass .card.card-box > .card-body { padding: 16px 12px; }
    .packlist-glass .col-5.text-center { flex: 0 0 100%; max-width: 100%; margin-top: 8px; }
    .packlist-glass .d-flex.justify-content-end { justify-content: center; margin-top: 8px; }
    .packlist-glass .packlist-print-toolbar { justify-content: center; }
    .packlist-glass .packlist-print-btn.btn.btn-primary {
        float: none !important;
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 0 !important;
    }
    .packlist-glass .main-new.col-lg-6 { width: 100%; margin: 16px 0 4px; padding: 16px 14px; }
    .packlist-glass .main-new.col-lg-6 > .row { gap: 8px; }
    .packlist-glass p.main-new { margin-left: 0 !important; flex: 1 1 100%; }
    .packlist-glass .main-new-frst-prnt,
    .packlist-glass .main-new-secnd-prnt { flex: 1 1 100%; text-align: left; }
    .packlist-glass .main-new-secnd-prnt { text-align: left; }
}

/* 21.10 PRINT — flatten glass to crisp paper, hide screen-only chrome */
@media print {
    .packlist-glass.content-inner { background: #fff !important; padding: 0 !important; }
    .packlist-glass .card.card-box {
        border: none;
        box-shadow: none;
        background: #fff !important;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }
    .packlist-glass .card.card-box::before { display: none; }
    .packlist-glass .breadcrumb,
    .packlist-glass .packlist-print-toolbar { display: none !important; }
    .packlist-glass .main-new.col-lg-6 {
        width: 100%;
        margin: 0 auto;
        border: 1px solid #cccccc73;
        box-shadow: none;
        background: #fff !important;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        break-inside: avoid;
    }
    .packlist-glass .main-new.col-lg-6 .table tbody tr { break-inside: avoid; }
}

/* 21.11 MOTION OPT-OUT + SOLID FALLBACK */
@media (prefers-reduced-motion: reduce) {
    .packlist-glass .packlist-print-btn.btn.btn-primary { transition: none; }
    .packlist-glass .packlist-print-btn.btn.btn-primary:hover { transform: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .packlist-glass .card.card-box { background: var(--glass-bg-card-strong); }
    .packlist-glass .main-new.col-lg-6 { background: #ffffff; }
}

/* 21.12 COMPLETE / MULTI-PRODUCT DOCUMENT SHELL (.packlist-glass--doc) */
.packlist-glass--doc .packlist-doc-switch {
    display: inline-flex;
    gap: 4px;
    margin: 18px 0 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--glass-card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.packlist-glass--doc .packlist-doc-switch a {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7291;
    text-decoration: none;
}
.packlist-glass--doc .packlist-doc-switch a.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent));
    box-shadow: 0 6px 14px rgba(60, 68, 177, 0.22);
}
.packlist-glass--doc .packlist-box-pager {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    font-size: 12px;
    font-weight: 600;
    color: #6b7291;
}
.packlist-glass--doc .packlist-print-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.packlist-glass--doc .packlist-pdf-btn.btn.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--glass-card-border);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--glass-primary);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(31, 45, 90, 0.08);
    text-decoration: none;
}
.packlist-glass--doc .packlist-pdf-btn.btn.btn-outline-primary:hover {
    color: var(--glass-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(31, 45, 90, 0.12);
}
.packlist-glass--doc .packlist-sheet {
    /* Screen preview matches 4" thermal / roll printable width */
    --pack-gutter: 16px;
    width: 4in;
    max-width: 100%;
    margin: 18px auto 8px;
    padding: 14px var(--pack-gutter) 12px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card-strong);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(140%);
    box-shadow: var(--glass-card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
}
.packlist-glass--doc .packlist-sheet__mast {
    position: relative;
    text-align: center;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(31, 45, 90, 0.10);
}
.packlist-glass--doc .packlist-sheet__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7291;
}
.packlist-glass--doc h2.packlist-sheet__team,
.packlist-glass--doc .packlist-sheet__team {
    margin: 6px 0 8px;
    font-size: clamp(0.95rem, 0.75rem + 0.9vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--glass-primary);
}
.packlist-glass--doc .packlist-sheet__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7291;
}
.packlist-glass--doc .packlist-box-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 54px;
    padding: 6px 8px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--glass-card-border);
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.22), rgba(76, 129, 222, 0.10));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.packlist-glass--doc .packlist-box-badge span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #6b7291;
}
.packlist-glass--doc .packlist-box-badge strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
    color: var(--glass-primary);
}
.packlist-glass--doc .packlist-progress { margin-top: 14px; }
.packlist-glass--doc .packlist-progress__bar {
    height: 6px;
    border-radius: 999px;
    /* Empty/remaining track = unfinished pink */
    background: rgba(224, 85, 107, 0.18);
    box-shadow: inset 0 0 0 1px rgba(224, 85, 107, 0.35);
    overflow: hidden;
}
.packlist-glass--doc .packlist-progress__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--glass-accent-2), var(--glass-accent));
}
.packlist-glass--doc .packlist-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.packlist-glass--doc .packlist-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7291;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--glass-card-border);
}
.packlist-glass--doc .packlist-pill strong { color: var(--glass-primary); font-weight: 800; }
.packlist-glass--doc .packlist-pill.is-warn {
    color: #9b3040;
    background: rgba(224, 85, 107, 0.10);
    border-color: rgba(224, 85, 107, 0.28);
}
.packlist-glass--doc .packlist-pill.is-warn strong { color: #e0556b; }
.packlist-glass--doc .packlist-product {
    margin: 4px 0 18px;
    page-break-inside: avoid;
}
.packlist-glass--doc .packlist-product__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 16px;
    align-items: flex-end;
}
.packlist-glass--doc .packlist-product__kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a90a8;
}
.packlist-glass--doc h3.packlist-product__name,
.packlist-glass--doc .packlist-product__name {
    margin: 2px 0 0;
    font-size: clamp(0.88rem, 0.72rem + 0.55vw, 1.12rem);
    font-weight: 700;
    color: #1f2d5a;
}
.packlist-glass--doc .packlist-product__aside {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.packlist-glass--doc .packlist-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--glass-primary);
    background: rgba(108, 160, 255, 0.12);
    border: 1px solid rgba(60, 68, 177, 0.16);
}
.packlist-glass--doc .packlist-chip--quiet {
    color: #6b7291;
    background: rgba(31, 45, 90, 0.05);
    border-color: rgba(31, 45, 90, 0.08);
}
.packlist-glass--doc .packlist-chip--alert {
    color: #9b3040;
    background: rgba(224, 85, 107, 0.12);
    border-color: rgba(224, 85, 107, 0.28);
}
.packlist-glass--doc .packlist-product__submeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: #8a90a8;
}
.packlist-glass--doc .packlist-table {
    margin: 0;
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}
.packlist-glass--doc .packlist-table thead th {
    padding: 5px 4px !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(60, 68, 177, 0.18) !important;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7291;
    background: transparent;
}
.packlist-glass--doc .packlist-table tbody td {
    padding: 5px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(31, 45, 90, 0.08) !important;
    font-size: 11px;
    color: #2b3355;
    background: transparent;
    word-break: break-word;
}
.packlist-glass--doc .packlist-table tbody tr:nth-child(even) td {
    background: rgba(108, 160, 255, 0.05);
}
.packlist-glass--doc .packlist-idx {
    display: inline-flex;
    min-width: 26px;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #9298ad;
    background: rgba(31, 45, 90, 0.06);
}
.packlist-glass--doc .packlist-num { font-weight: 700; color: var(--glass-primary); }
.packlist-glass--doc .packlist-size { font-weight: 700; letter-spacing: 0.02em; }
.packlist-glass--doc .packlist-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 8px;
    color: #8a90a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.packlist-glass--doc .packlist-sep::before,
.packlist-glass--doc .packlist-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(31, 45, 90, 0.18), transparent);
}
.packlist-glass--doc .packlist-sep--strong {
    margin: 28px 0 16px;
    color: #9b3040;
    letter-spacing: 0.16em;
}
.packlist-glass--doc .packlist-sep--strong::before,
.packlist-glass--doc .packlist-sep--strong::after {
    background: linear-gradient(90deg, transparent, rgba(224, 85, 107, 0.45), transparent);
}
.packlist-glass--doc .packlist-product--unfinished {
    padding: 14px 14px 8px;
    border-radius: 16px;
    border: 1px solid rgba(224, 85, 107, 0.22);
    background: linear-gradient(180deg, rgba(224, 85, 107, 0.07), rgba(255, 255, 255, 0.35));
    box-shadow: inset 3px 0 0 #e0556b;
}
.packlist-glass--doc .packlist-sheet__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 4px 0;
    border-top: 1px solid rgba(31, 45, 90, 0.10);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7291;
}
/* Box total: stay right-aligned inside the sheet gutter */
.packlist-glass--doc:not(.packlist-glass--full) .packlist-sheet__foot:not(.packlist-sheet__foot--split) {
    justify-content: flex-end;
}
.packlist-glass--doc .packlist-sheet__foot strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--glass-primary);
    letter-spacing: 0;
}
.packlist-glass--doc .packlist-sheet__foot--split > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.packlist-glass--doc .packlist-sheet__foot--split .is-warn strong { color: #e0556b; }

/* Complete packing list only — company contact + Team Order Portal QR */
.packlist-glass--doc .packlist-company-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1.5px solid rgba(60, 68, 177, 0.22);
    page-break-inside: avoid;
}
.packlist-glass--doc .packlist-company-foot__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.packlist-glass--doc .packlist-company-foot__symbol {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.packlist-glass--doc .packlist-company-foot__name {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f2d5a;
    line-height: 1.2;
}
.packlist-glass--doc .packlist-company-foot__tagline {
    margin: 2px 0 0;
    font-size: 9px;
    font-weight: 600;
    color: #6b7291;
}
.packlist-glass--doc .packlist-company-foot__lines {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 9.5px;
    line-height: 1.45;
    color: #4a5070;
}
.packlist-glass--doc .packlist-company-foot__lines li { margin: 0 0 3px; }
.packlist-glass--doc .packlist-company-foot__lines strong { color: #1f2d5a; font-weight: 700; }
.packlist-glass--doc .packlist-company-foot__lines a {
    color: var(--glass-primary);
    text-decoration: none;
    font-weight: 700;
}
.packlist-glass--doc .packlist-company-foot__portal {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(60, 68, 177, 0.18);
    background: linear-gradient(180deg, rgba(108, 160, 255, 0.08), rgba(255, 255, 255, 0.5));
}
.packlist-glass--doc .packlist-company-foot__qr {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(31, 45, 90, 0.12);
    border-radius: 6px;
    background: #fff;
    padding: 3px;
}
.packlist-glass--doc .packlist-company-foot__qr img {
    display: block;
    width: 100%;
    height: 100%;
}
.packlist-glass--doc .packlist-company-foot__portal-kicker {
    margin: 0 0 2px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7291;
}
.packlist-glass--doc .packlist-company-foot__portal-url {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    color: var(--glass-primary);
    word-break: break-all;
}
.packlist-glass--doc .packlist-company-foot__portal-url a {
    color: inherit;
    text-decoration: none;
}
.packlist-glass--doc .packlist-company-foot__portal-hint {
    margin: 2px 0 0;
    font-size: 8.5px;
    color: #6b7291;
    line-height: 1.3;
}
.packlist-glass--doc .packlist-company-foot__web {
    margin: 0;
    font-size: 9.5px;
    color: #4a5070;
}
.packlist-glass--doc .packlist-company-foot__web a {
    color: var(--glass-primary);
    font-weight: 700;
    text-decoration: none;
}
.packlist-glass--doc .packlist-company-foot__fine {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(31, 45, 90, 0.14);
    font-size: 8px;
    line-height: 1.4;
    color: #8a90a8;
}

.packlist-glass--doc .packlist-empty {
    max-width: 560px;
    margin: 28px auto;
    text-align: center;
    padding: 28px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(31, 45, 90, 0.18);
    background: rgba(255, 255, 255, 0.45);
}
.packlist-glass--doc .packlist-empty h5 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--glass-primary);
}
.packlist-glass--doc .packlist-empty p,
.packlist-glass--doc .packlist-muted {
    margin: 0;
    font-size: 13px;
    color: #6b7291;
}
.packlist-glass--doc .packlist-muted { margin: 8px 0 4px; }
@media (max-width: 575px) {
    .packlist-glass--doc .packlist-box-badge { position: static; margin: 12px auto 0; width: fit-content; }
    .packlist-glass--doc .packlist-doc-switch { width: 100%; justify-content: center; }
    .packlist-glass--doc .packlist-product__aside { justify-content: flex-start; }
}
@media print {
    /* 4" continuous roll — width fixed, height flows with content */
    @page {
        size: 4in auto;
        margin: 0.12in 0.14in;
    }

    html,
    body {
        width: 4in !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .packlist-glass--doc .packlist-doc-switch,
    .packlist-glass--doc .packlist-box-pager,
    .packlist-glass--doc .packlist-print-toolbar,
    .packlist-glass--doc .packlist-head-row,
    .packlist-glass--doc .breadcrumb,
    .packlist-glass--doc .hide-print,
    .app-sidebar,
    .app-header,
    .hamburger {
        display: none !important;
    }

    .packlist-glass.content-inner,
    .packlist-glass--doc .card.card-box,
    .packlist-glass--doc .card.card-box > .card-body {
        width: 4in !important;
        max-width: 4in !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }

    .packlist-glass--doc .card.card-box::before { display: none; }

    .packlist-glass--doc .packlist-sheet {
        --pack-gutter: 12px;
        width: 100%;
        margin: 0;
        /* Keep gutters in print — do not flush content to page edges */
        padding: 4px var(--pack-gutter) 8px;
        border: none;
        box-shadow: none;
        border-radius: 0;
        background: #fff !important;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-sizing: border-box;
    }

    .packlist-glass--doc .packlist-sheet__foot {
        padding-left: 4px;
        padding-right: 4px;
    }

    .packlist-glass--doc .packlist-sheet__mast {
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

    .packlist-glass--doc .packlist-box-badge {
        position: static;
        display: inline-block;
        margin: 8px auto 0;
    }

    .packlist-glass--doc .packlist-progress__bar { display: none; }

    .packlist-glass--doc .packlist-product__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .packlist-glass--doc .packlist-table thead th {
        font-size: 7.5px !important;
        padding: 4px 2px !important;
    }

    .packlist-glass--doc .packlist-table tbody td {
        font-size: 10px !important;
        padding: 4px 2px !important;
        line-height: 1.25;
    }

    .packlist-glass--doc .packlist-product,
    .packlist-glass--doc .packlist-product--unfinished {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .packlist-glass--doc .packlist-product--unfinished {
        padding: 8px 6px 4px;
        border-radius: 0;
    }

    .packlist-glass--doc .packlist-sheet__foot strong { font-size: 16px; }

    .packlist-glass--doc .packlist-company-foot {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .packlist-glass--doc .packlist-company-foot__portal {
        border-radius: 0;
        background: #f8f9fb;
    }
}

/* ============================================================================
   22. VALIDATION ERROR POPUP — Frosted Liquid Glass (#validation-error-modal)
   ---------------------------------------------------------------------------
   Appearance-only makeover of the small "Validation Error" alert that fires via
   showValidationErrorPopup() on the order-summary page. Follows the frosted
   glass-bubble recipe (§11) but carries a warm red/danger accent (icon badge,
   title, Close button) so it reads instantly as an error. Scoped under
   .validation-glass; all ids, the .modal-body injection point, data-dismiss
   hooks and JS are left untouched.
   ============================================================================ */
.validation-glass .modal-dialog { max-width: min(460px, 92vw); }

/* 22.1 SHELL — frosted white glass bubble with a soft red halo */
.validation-glass .modal-content {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.34));
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.04);
            backdrop-filter: blur(34px) saturate(185%) brightness(1.04);
    box-shadow:
        inset 1px 3px 5px rgba(255, 255, 255, 0.30),     /* top highlight */
        inset -1px -3px 3px rgba(255, 255, 255, 0.10),   /* bottom glow */
        inset 0 -22px 44px rgba(224, 85, 107, 0.08),     /* faint red cavity */
        0 28px 64px rgba(120, 20, 35, 0.26);             /* lift with a warm shadow */
}
/* Dispersion — light-split rim, biased toward the red/pink end for the alert */
.validation-glass .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 210deg,
        rgba(255, 0, 90, 0.55), rgba(255, 150, 90, 0.5), rgba(255, 60, 120, 0.55),
        rgba(200, 40, 90, 0.5), rgba(255, 0, 90, 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
}
/* Soft top-left specular sheen */
.validation-glass .modal-content::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(130% 80% at 0% 0%,
                rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%);
    z-index: 1;
}
.validation-glass .modal-header,
.validation-glass .modal-body,
.validation-glass .modal-footer { position: relative; z-index: 3; }

/* 22.2 HEADER — no flat bar; title + round error icon badge */
.validation-glass .modal-header {
    align-items: center;
    border-bottom: 1px solid rgba(224, 85, 107, 0.18);
    padding: 18px 22px 14px;
}
.validation-glass .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #b3243c;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.validation-glass .validation-glass__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    background: linear-gradient(135deg, #ff7a90, #e0556b);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 14px rgba(224, 85, 107, 0.34);
}

/* 22.3 BODY — legible dark text on the glass */
.validation-glass .modal-body {
    color: #1c2333;
    font-size: 15px;
    line-height: 1.55;
    padding: 18px 24px 8px;
}
.validation-glass .modal-body p { margin: 0; }

/* 22.4 CLOSE (×) — subtle round glass control */
.validation-glass .modal-header .close {
    opacity: 1;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    color: #8a2233;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform var(--glass-transition), background var(--glass-transition);
}
.validation-glass .modal-header .close:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.72);
}

/* 22.5 FOOTER — glassy red "Close" pill */
.validation-glass .modal-footer {
    border-top: 1px solid rgba(224, 85, 107, 0.16);
    padding: 12px 22px 20px;
}
.validation-glass .modal-footer .btn-secondary {
    border-radius: 999px;
    padding: 9px 26px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff7a90, #e0556b);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 16px rgba(224, 85, 107, 0.30);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.validation-glass .modal-footer .btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 22px rgba(224, 85, 107, 0.38);
}

/* 22.6 MOTION OPT-OUT + SOLID FALLBACK */
@media (prefers-reduced-motion: reduce) {
    .validation-glass .modal-header .close,
    .validation-glass .modal-footer .btn-secondary { transition: none !important; }
    .validation-glass .modal-header .close:hover,
    .validation-glass .modal-footer .btn-secondary:hover { transform: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .validation-glass .modal-content { background: rgba(255, 255, 255, 0.95); }
    .validation-glass .modal-title { text-shadow: none; }
}

/* ============================================================================
   22.7 PAYMENT CONFIRM POPUP — Frosted Liquid Glass (#confirmationModal)
   ---------------------------------------------------------------------------
   Post-wallet/Afterpay authorization step on the order editor Payment tab.
   Matches validation-glass bubble recipe with primary indigo accent (confirm)
   instead of danger red. Scoped under .payment-confirm-glass; ids and JS hooks
   (#confirmPaymentBtn, data-dismiss) unchanged.
   ============================================================================ */
.payment-confirm-glass .modal-dialog { max-width: min(480px, 92vw); }

.payment-confirm-glass .modal-content {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.36));
    background-color: rgba(255, 255, 255, 0.52);
    -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.04);
            backdrop-filter: blur(34px) saturate(185%) brightness(1.04);
    box-shadow:
        inset 1px 3px 5px rgba(255, 255, 255, 0.30),
        inset -1px -3px 3px rgba(255, 255, 255, 0.10),
        inset 0 -22px 44px rgba(60, 68, 177, 0.07),
        0 28px 64px rgba(31, 45, 90, 0.28);
}
.payment-confirm-glass .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 210deg,
        rgba(108, 160, 255, 0.55), rgba(60, 68, 177, 0.5), rgba(140, 180, 255, 0.55),
        rgba(60, 68, 177, 0.5), rgba(108, 160, 255, 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.48;
    pointer-events: none;
    z-index: 2;
}
.payment-confirm-glass .modal-content::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(130% 80% at 0% 0%,
                rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%);
    z-index: 1;
}
.payment-confirm-glass .modal-header,
.payment-confirm-glass .modal-body,
.payment-confirm-glass .modal-footer { position: relative; z-index: 3; }

.payment-confirm-glass .modal-header {
    align-items: center;
    border-bottom: 1px solid rgba(60, 68, 177, 0.14);
    padding: 18px 22px 14px;
}
.payment-confirm-glass .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--glass-primary, #3c44b1);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.payment-confirm-glass .payment-confirm-glass__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    background: linear-gradient(135deg, #6ca0ff, var(--glass-primary, #3c44b1));
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 14px rgba(60, 68, 177, 0.32);
}

.payment-confirm-glass .modal-body {
    color: #1c2333;
    padding: 18px 24px 10px;
}
.payment-confirm-glass .payment-confirm-glass__lead {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: #1c2333;
}
.payment-confirm-glass .payment-confirm-glass__hint {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(28, 35, 51, 0.72);
}
.payment-confirm-glass .payment-confirm-glass__hint strong {
    color: var(--glass-primary, #3c44b1);
    font-weight: 700;
}

.payment-confirm-glass .modal-header .close {
    opacity: 1;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    color: var(--glass-primary, #3c44b1);
    text-shadow: none;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform var(--glass-transition), background var(--glass-transition);
}
.payment-confirm-glass .modal-header .close:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.72);
}

.payment-confirm-glass .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(60, 68, 177, 0.12);
    padding: 14px 22px 20px;
}
.payment-confirm-glass .payment-confirm-glass__cancel {
    border-radius: 999px;
    padding: 10px 22px;
    min-height: 44px;
    font-weight: 600;
    font-size: 13px;
    color: var(--glass-primary, #3c44b1);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(60, 68, 177, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition), background var(--glass-transition);
}
.payment-confirm-glass .payment-confirm-glass__cancel:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.82);
    color: var(--glass-primary, #3c44b1);
}
.payment-confirm-glass .payment-confirm-glass__confirm {
    border-radius: 999px;
    padding: 10px 26px;
    min-height: 44px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, #6ca0ff, var(--glass-primary, #3c44b1));
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 20px rgba(60, 68, 177, 0.32);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.payment-confirm-glass .payment-confirm-glass__confirm:hover {
    transform: translateY(-1px);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 26px rgba(60, 68, 177, 0.38);
}

/* Order page injects `.modal{z-index:20}` for Places autocomplete; Bootstrap also
   sets inline z-index ~1050. Amaran toasts sit at 10050 and can swallow clicks on
   this dialog — lift modal + backdrop above every in-app overlay. */
#confirmationModal.modal,
#confirmationModal.modal.show {
    z-index: 10100 !important;
}
body:has(#confirmationModal.show) .modal-backdrop,
body:has(#confirmationModal.show) .modal-backdrop.show {
    z-index: 10090 !important;
    opacity: 0.45;
}
#confirmationModal .modal-dialog,
#confirmationModal .modal-content,
#confirmationModal .modal-header,
#confirmationModal .modal-body,
#confirmationModal .modal-footer,
#confirmationModal button {
    pointer-events: auto;
}

@media (max-width: 767.98px) {
    .payment-confirm-glass .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .payment-confirm-glass .payment-confirm-glass__cancel,
    .payment-confirm-glass .payment-confirm-glass__confirm {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payment-confirm-glass .modal-header .close,
    .payment-confirm-glass .payment-confirm-glass__cancel,
    .payment-confirm-glass .payment-confirm-glass__confirm { transition: none !important; }
    .payment-confirm-glass .modal-header .close:hover,
    .payment-confirm-glass .payment-confirm-glass__cancel:hover,
    .payment-confirm-glass .payment-confirm-glass__confirm:hover { transform: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .payment-confirm-glass .modal-content { background: rgba(255, 255, 255, 0.96); }
    .payment-confirm-glass .modal-title { text-shadow: none; }
}

/* ============================================================================
   23. NOTIFICATION TOASTS — Frosted Liquid Glass (amaran ".default", app-wide)
   ---------------------------------------------------------------------------
   show_notification() (public/assets/myScript.js) fires amaran toasts themed
   "default <colour>" — e.g. 'red' for mandatory-field / validation errors and
   'green' for success. This restyles that SHARED toast into the FLG glass
   language: frosted card, coloured status chip + accent edge, legible dark ink.
   Appearance-only — no JS or markup changes; every themed notification (roster
   size validation included) now matches the UI. System-wide (Principle 3).
   ============================================================================ */
.amaran.default {
    width: 320px;
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: var(--glass-bg-card, rgba(255, 255, 255, 0.82));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    color: #1c2333;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    border: 1px solid var(--glass-card-border, rgba(255, 255, 255, 0.6));
    border-left: 4px solid var(--glass-accent, #4c81de);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 16px 36px rgba(15, 23, 53, 0.22);
    overflow: hidden;
}

/* Left status chip — reuses the plugin's .default-spinner dot */
.amaran.default .default-spinner {
    width: 40px;
    min-height: auto;
    float: none;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.amaran.default .default-spinner span {
    position: static;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    background: var(--glass-accent, #4c81de);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 10px rgba(15, 23, 53, 0.22);
}

/* Message */
.amaran.default .default-message { float: none; flex: 1 1 auto; }
.amaran.default .default-message span {
    padding: 3px 6px;
    line-height: 1.35;
    color: #1c2333;
}

/* Close affordance legible on light glass */
.amaran.default .amaran-close:before { color: #8a91a3; }

/* --- Variants: error (red) + success (green) --- */
.amaran.default.red { border-left-color: #e0556b; }
.amaran.default.red .default-spinner span {
    background: linear-gradient(135deg, #ff7a90, #e0556b);
}
.amaran.default.red .default-spinner span::after { content: "!"; }

.amaran.default.green { border-left-color: #1e8e3e; }
.amaran.default.green .default-spinner span {
    background: linear-gradient(135deg, #54d18c, #1e8e3e);
}
.amaran.default.green .default-spinner span::after { content: "\2713"; }

/* Solid fallback where backdrop-filter is unsupported (keeps text legible) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .amaran.default { background: rgba(255, 255, 255, 0.96); }
}

/* Pin ALL amaran toasts top-right (amaran.min.css is not loaded in the layout,
   so these base rules must live here — without them wrappers stay in document
   flow at the bottom-left of <body>). */
.amaran-wrapper {
    position: fixed !important;
    z-index: 10050 !important;
    top: 72px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: min(360px, calc(100vw - 24px));
    pointer-events: none;
}
.amaran-wrapper .amaran {
    pointer-events: auto;
    margin: 0 0 10px 0;
}
.amaran-wrapper.top.right,
.amaran-wrapper.top,
.amaran-wrapper.right,
.amaran-wrapper.bottom,
.amaran-wrapper.bottom.right,
.amaran-wrapper.bottom.left,
.amaran-wrapper.left {
    top: 72px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
}
@media (max-width: 767.98px) {
    .amaran-wrapper,
    .amaran-wrapper.top.right,
    .amaran-wrapper.top,
    .amaran-wrapper.right,
    .amaran-wrapper.bottom,
    .amaran-wrapper.bottom.right,
    .amaran-wrapper.bottom.left,
    .amaran-wrapper.left {
        top: 64px !important;
        right: 10px !important;
    }
}

/* Pin toast stack below the fixed header, flush to the top-right */
.amaran-wrapper.top.right {
    top: 72px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 10050;
}
.amaran-wrapper.top.right .amaran {
    margin: 0 0 10px 0;
}

/* Themed halo on a mandatory roster field flagged invalid (JS sets an inline
   red border). Softens the harsh solid-red outline into the FLG error accent. */
.roster-glass .form-control[style*="red"],
.roster-glass .form-control[style*="rgb(255, 0, 0)"] {
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(224, 85, 107, 0.18);
}

/* Bare XS → YXL auto-conversion flag (import). Red so staff notice. */
.roster-glass select.size_int_input.size-converted-xs,
select.size_int_input.size-converted-xs {
    color: #e0556b !important;
    font-weight: 700;
    border-color: rgba(224, 85, 107, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(224, 85, 107, 0.16);
}
.roster-glass select.size_int_input.size-converted-xs option,
select.size_int_input.size-converted-xs option {
    color: #1c2333;
    font-weight: 500;
}
.size-converted-xs-label {
    color: #e0556b !important;
    font-weight: 700;
}

/* Ambiguous import name casing — red, non-blocking (admin can fix later). */
.roster-glass .roster-name-field,
.roster-name-field {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}
.roster-glass .roster-name-field .name_str_input,
.roster-name-field .name_str_input {
    width: 100%;
    padding-right: 1.55rem; /* room for corner ? */
}
.roster-glass .name_str_input.name-needs-review,
.name_str_input.name-needs-review {
    color: #e0556b !important;
    font-weight: 700;
    border-color: rgba(224, 85, 107, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(224, 85, 107, 0.16);
}
.roster-glass .roster-name-review-help,
.roster-name-review-help {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    z-index: 2;
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(224, 85, 107, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #e0556b;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 1px 2px rgba(15, 23, 53, 0.12);
}
.roster-glass .roster-name-review-help[hidden],
.roster-name-review-help[hidden] {
    display: none !important;
}
.roster-glass .roster-name-review-help:hover,
.roster-glass .roster-name-review-help:focus,
.roster-name-review-help:hover,
.roster-name-review-help:focus {
    background: rgba(224, 85, 107, 0.12);
    outline: none;
}
.roster-import-preview__name-review {
    color: #e0556b !important;
    font-weight: 700;
}

/* FLG SweetAlert bubble — name casing help (and reusable .flg-swal).
   Matches roster import frosted panel: light glass, dark text, navy CTA. */
.swal-overlay:has(.flg-swal) {
    background-color: rgba(18, 28, 48, 0.35);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}
.swal-modal.flg-swal {
    position: relative;
    font-family: 'Poppins', sans-serif;
    background: rgba(255, 255, 255, 0.90);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
            backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    box-shadow:
        inset 1px 3px 5px rgba(255, 255, 255, 0.30),
        inset -1px -3px 3px rgba(255, 255, 255, 0.10),
        inset 0 2px 10px rgba(53, 53, 53, 0.05),
        0 24px 60px rgba(15, 23, 53, 0.28);
    padding: 1.35rem 1.4rem 1.15rem;
    overflow: hidden;
}
.swal-modal.flg-swal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(130% 80% at 0% 0%,
                rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 55%);
    z-index: 0;
}
.swal-modal.flg-swal .swal-title,
.swal-modal.flg-swal .swal-text,
.swal-modal.flg-swal .swal-footer {
    position: relative;
    z-index: 1;
}
.swal-modal.flg-swal .swal-title {
    color: #1c2333;
    font-weight: 700;
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
    margin-bottom: 0.55rem;
    padding: 0;
}
.swal-modal.flg-swal .swal-text {
    color: #5a6072;
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 500;
    max-width: 28rem;
    margin: 0 auto 0.35rem;
    padding: 0;
}
.swal-modal.flg-swal .swal-footer {
    margin-top: 1rem;
    text-align: center;
}
.swal-modal.flg-swal .swal-button,
.swal-modal.flg-swal .flg-swal__btn,
.swal-button.flg-swal__btn {
    background: linear-gradient(135deg, #3c44b1, #4c81de) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.02em;
    padding: 0.55rem 1.35rem !important;
    box-shadow: 0 6px 16px rgba(60, 68, 177, 0.28);
}
.swal-modal.flg-swal .swal-button:hover,
.swal-modal.flg-swal .flg-swal__btn:hover,
.swal-button.flg-swal__btn:hover {
    background: linear-gradient(135deg, #343b9c, #3f74d0) !important;
}
.swal-modal.flg-swal .swal-button:focus,
.swal-modal.flg-swal .flg-swal__btn:focus,
.swal-button.flg-swal__btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.35), 0 6px 16px rgba(60, 68, 177, 0.28);
}
.swal-modal.flg-swal .swal-icon {
    display: none !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .swal-modal.flg-swal {
        background: #ffffff;
    }
}
@media (prefers-reduced-motion: reduce) {
    .swal-modal.flg-swal .swal-button,
    .swal-modal.flg-swal .flg-swal__btn {
        transition: none !important;
    }
}

/* ============================================================================
   24. CUSTOMER LEDGER — Frosted Liquid Glass (account_balance.blade.php)
   ---------------------------------------------------------------------------
   Full redesign of the Customer Ledger: KPI summary, payment aging/overdue
   analysis, and an accordion of orders where each row expands to its partial
   payment history (child payments). Scoped under .ledger-glass. Data comes from
   OrderController@accountBalance (payment_logs child rows + derived aging).
   ============================================================================ */
.ledger-glass,
.ledger-glass h1, .ledger-glass h2, .ledger-glass h3, .ledger-glass h4,
.ledger-glass h5, .ledger-glass h6, .ledger-glass p, .ledger-glass span,
.ledger-glass a, .ledger-glass small, .ledger-glass b, .ledger-glass em,
.ledger-glass button, .ledger-glass div {
    font-family: 'Poppins', sans-serif;
}
.ledger-glass { color: #1c2333; }

/* --- 24.1 KPI SUMMARY ROW --- */
.ledger-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.ledger-kpi {
    --kpi: #4c81de;
    --kpi-2: #6aa0ff;
    --kpi-glow: rgba(76, 129, 222, 0.28);
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background-color: rgba(255, 255, 255, 0.74);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 10px 26px rgba(31, 45, 90, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.ledger-kpi::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 130% at 100% 0%, var(--kpi-glow), transparent 60%);
    opacity: 0.5;
}
.ledger-kpi::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--kpi), var(--kpi-2));
}
.ledger-kpi:hover { transform: translateY(-3px); box-shadow: 0 16px 36px var(--kpi-glow); }
.ledger-kpi__icon {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(135deg, var(--kpi-2), var(--kpi));
    box-shadow: 0 8px 18px var(--kpi-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative; z-index: 1;
}
.ledger-kpi__body { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }
.ledger-kpi__body small {
    display: block;
    color: #6a7184;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ledger-kpi__value {
    display: block;
    margin: 3px 0 2px;
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--kpi);
}
.ledger-kpi__body em { font-style: normal; font-size: 11.5px; color: #7a8196; }
.ledger-kpi__bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(31, 45, 90, 0.10);
    overflow: hidden;
    margin: 4px 0 5px;
}
.ledger-kpi__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--kpi-2), var(--kpi));
}
.ledger-kpi__bar--sm { height: 6px; max-width: 160px; }

/* KPI colour keys */
.kpi--total   { --kpi:#2f6fd0; --kpi-2:#6aa0ff; --kpi-glow:rgba(47,111,208,0.26); }
.kpi--paid    { --kpi:#1e8e3e; --kpi-2:#54d18c; --kpi-glow:rgba(30,142,62,0.24); }
.kpi--balance { --kpi:#5a6478; --kpi-2:#9aa1b2; --kpi-glow:rgba(90,100,120,0.20); }
.kpi--balance.is-open { --kpi:#d98a00; --kpi-2:#f0b400; --kpi-glow:rgba(217,138,0,0.24); }
.kpi--overdue { --kpi:#7a8196; --kpi-2:#aab0c0; --kpi-glow:rgba(120,128,150,0.16); }
.kpi--overdue.is-alert { --kpi:#e0556b; --kpi-2:#ff8aa0; --kpi-glow:rgba(224,85,107,0.28); }

/* --- 24.2 SHARED CARD + SECTION HEADER --- */
.ledger-glass .card.card-box.ledger-analysis,
.ledger-glass .card.card-box.ledger-card {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 12px 30px rgba(31, 45, 90, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.ledger-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.ledger-section-head h5 {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 16px;
    color: #1c2333;
    display: inline-flex; align-items: center; gap: 8px;
}
.ledger-section-head h5 i { color: var(--glass-accent); }
.ledger-section-head p { margin: 0; font-size: 12.5px; color: #7a8196; max-width: 640px; }
.ledger-section-head__actions { display: flex; align-items: center; gap: 10px; }
.ledger-largest { text-align: right; }
.ledger-largest small { display: block; font-size: 11px; color: #7a8196; text-transform: uppercase; letter-spacing: 0.05em; }
.ledger-largest span { font-size: 18px; font-weight: 700; color: #d98a00; }

.btn-ledger-primary,
.btn-ledger-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition), background var(--glass-transition);
}
.btn-ledger-primary {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--glass-accent-2, #6aa0ff), var(--glass-accent, #4c81de));
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 16px rgba(76, 129, 222, 0.28);
}
.btn-ledger-primary:hover { transform: translateY(-1px); color: #fff; text-decoration: none; box-shadow: 0 10px 22px rgba(76, 129, 222, 0.36); }
.btn-ledger-ghost {
    color: var(--glass-accent);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--glass-card-border, rgba(255, 255, 255, 0.7));
}
.btn-ledger-ghost:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.85); }

/* Per-order pay CTA (unpaid / partial rows) */
.ledger-glass .btn-ledger-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(76, 129, 222, 0.35);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)),
                rgba(76, 129, 222, 0.92);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(76, 129, 222, 0.28);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.ledger-glass .btn-ledger-pay:hover,
.ledger-glass .btn-ledger-pay:focus {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(76, 129, 222, 0.36);
    text-decoration: none !important;
    outline: none;
}
.ledger-glass .lc-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ledger-glass .btn-ledger-pay--meta {
    width: 100%;
    max-width: 220px;
}

/* --- 24.3 AGING BAR CHART --- */
.aging-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: end;
}
.aging-col { text-align: center; }
.aging-col__track {
    --age: #9aa1b2;
    height: 130px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px;
    border-radius: 14px;
    background: rgba(31, 45, 90, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.aging-col__fill {
    width: 62%;
    min-height: 4px;
    border-radius: 10px 10px 6px 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--age) 78%, white), var(--age));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--age) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: height var(--glass-transition);
}
.aging-col__amt { margin-top: 9px; font-weight: 700; font-size: 14px; color: #1c2333; }
.aging-col__label { font-size: 12px; color: #5a6478; font-weight: 600; margin-top: 2px; }
.aging-col__sub {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 999px;
    color: #fff;
    background: var(--age);
}
.aging-col:not(.has-amt) { opacity: 0.55; }
.aging--current .aging-col__track, .aging--current { --age: #1e8e3e; }
.aging--d30 .aging-col__track,     .aging--d30     { --age: #d98a00; }
.aging--d60 .aging-col__track,     .aging--d60     { --age: #f2792b; }
.aging--d90 .aging-col__track,     .aging--d90     { --age: #e0556b; }
.aging-col.aging--current .aging-col__sub { background: #1e8e3e; }
.aging-col.aging--d30 .aging-col__sub { background: #d98a00; }
.aging-col.aging--d60 .aging-col__sub { background: #f2792b; }
.aging-col.aging--d90 .aging-col__sub { background: #e0556b; }

/* --- 24.4 LEDGER TABLE / ACCORDION --- */
.ledger-card { padding-bottom: 10px; }
.ledger-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: min(60vh, calc(100dvh - 22rem));
    min-height: 0;
}
.ledger-head { flex-shrink: 0; }
.ledger-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 2px 4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 68, 177, 0.35) transparent;
}
.ledger-body::-webkit-scrollbar { width: 8px; }
.ledger-body::-webkit-scrollbar-thumb {
    background: rgba(60, 68, 177, 0.30);
    border-radius: 999px;
}
.ledger-head,
.ledger-row__main,
.ledger-foot {
    display: grid;
    grid-template-columns: minmax(140px, 1.45fr) 1.3fr 1.05fr 0.85fr 0.85fr 0.9fr 1.15fr 38px;
    align-items: center;
    gap: 10px;
}
.ledger-head {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a91a3;
}
/* Invoice #, Total, Paid, Balance, Status — center header + cells (foot mirrors for totals) */
.ledger-glass .ledger-head .lc-invoice,
.ledger-glass .ledger-head .lc-num,
.ledger-glass .ledger-head .lc-status,
.ledger-glass .ledger-row__main .lc-invoice,
.ledger-glass .ledger-row__main .lc-num,
.ledger-glass .ledger-row__main .lc-status,
.ledger-glass .ledger-foot .lc-invoice,
.ledger-glass .ledger-foot .lc-num {
    text-align: center;
}

/* rows
   flex-shrink: 0 — .ledger-body is a flex column; overflow:hidden on the row
   (needed for the grid accordion) zeroes the flex auto min-size, so expanded
   detail was compressed and clipped under the next row. Keep natural height
   and let .ledger-body scroll instead. */
.ledger-row {
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 14px rgba(31, 45, 90, 0.06);
    overflow: hidden;
    transition: box-shadow var(--glass-transition), transform var(--glass-transition);
}
.ledger-row.is-open { border-left: 4px solid #d98a00; }
.ledger-row.age-d60.is-open { border-left-color: #f2792b; }
.ledger-row.age-d90.is-open { border-left-color: #e0556b; }
.ledger-row.is-clear { border-left: 4px solid #1e8e3e; }
.ledger-row:hover { box-shadow: 0 10px 24px rgba(31, 45, 90, 0.12); }
.ledger-row__main {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.ledger-ordno { display: block; font-weight: 700; font-size: 13.5px; color: var(--glass-accent); letter-spacing: 0.02em; }
.ledger-orddate { display: block; font-size: 11.5px; color: #8a91a3; margin-top: 1px; }
.ledger-row__main .lc-num { font-weight: 600; font-size: 13.5px; }
.ledger-row__main .lc-paid { color: #1e8e3e; }
.ledger-row__main .lc-balance { color: #1c2333; font-weight: 700; }
.ledger-row.is-open .lc-balance { color: #d98a00; }
.ledger-row.age-d90.is-open .lc-balance { color: #e0556b; }
.ledger-pill-method {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #4a5468;
    background: rgba(76, 129, 222, 0.10);
    border: 1px solid rgba(76, 129, 222, 0.18);
}
.lc-toggle { text-align: center; color: #9aa1b2; }
.lc-toggle i { transition: transform var(--glass-transition); }
.ledger-row.is-expanded .lc-toggle i { transform: rotate(180deg); color: var(--glass-accent); }

/* team name + invoice cells */
.ledger-team { font-size: 13px; font-weight: 600; color: #1c2333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.01em; }
.ledger-invoice { font-size: 12px; font-weight: 600; color: #5a6478; font-variant-numeric: tabular-nums; }

/* badges — solid-fill pills (status colors via --badge / badge--*); white label for contrast */
.ledger-glass .ledger-badge {
    --badge: #4c81de;
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--badge);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--badge) 35%, transparent);
}
.ledger-glass .ledger-meta__item .ledger-badge {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.badge--paid { --badge: #1e8e3e; }
.badge--partial { --badge: #d98a00; }
.badge--unpaid { --badge: #8a91a3; }
.badge--overdue { --badge: #e0556b; }
.badge--sm { font-size: 9.5px; padding: 2px 8px; margin-top: 4px; }
.ledger-glass .lc-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* --- 24.3b PAYMENT-STATE FILTER CHIPS --- */
.ledger-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ledger-chip {
    --chip: #5a6478;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #5a6478;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--glass-card-border, rgba(255, 255, 255, 0.7));
    transition: transform var(--glass-transition), background var(--glass-transition), color var(--glass-transition), border-color var(--glass-transition);
}
.ledger-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: var(--chip);
}
.ledger-chip:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.9); }
.ledger-chip.is-active { color: #fff; background: var(--chip); border-color: transparent; box-shadow: 0 6px 14px color-mix(in srgb, var(--chip) 32%, transparent); }
.ledger-chip.is-active span { background: rgba(255, 255, 255, 0.28); }
.chip--paid { --chip: #1e8e3e; }
.chip--partial { --chip: #d98a00; }
.chip--unpaid { --chip: #8a91a3; }

.ledger-noresults {
    padding: 22px;
    text-align: center;
    color: #8a91a3;
    font-size: 13px;
    font-weight: 600;
}
.ledger-noresults i { margin-right: 6px; color: #9aa1b2; }

/* expandable detail (grid-rows animation) */
.ledger-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--glass-transition);
}
.ledger-row.is-expanded .ledger-detail { grid-template-rows: 1fr; }
.ledger-detail__inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 16px;
}
.ledger-row.is-expanded .ledger-detail__inner { padding: 4px 16px 18px; }

/* order meta strip */
.ledger-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 26px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(76, 129, 222, 0.06);
    border: 1px solid rgba(76, 129, 222, 0.12);
    margin-bottom: 14px;
}
.ledger-meta__item small { display: block; font-size: 10.5px; color: #8a91a3; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.ledger-meta__item > span:not(.ledger-badge) { font-size: 13px; font-weight: 600; color: #1c2333; }
.ledger-meta__item .text-overdue { color: #e0556b; }
.ledger-meta__item--link { margin-left: auto; }
.ledger-meta__item--link a { color: var(--glass-accent); font-weight: 600; font-size: 12.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ledger-meta__item--link a:hover { text-decoration: underline; }

/* child payment table */
.ledger-pay-title { font-size: 12.5px; font-weight: 700; color: #4a5468; margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.ledger-pay-title i { color: var(--glass-accent); }
.ledger-pay-title span { color: #9aa1b2; font-weight: 600; }
.ledger-pay {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(31, 45, 90, 0.08);
    background: rgba(255, 255, 255, 0.55);
}
.ledger-pay__head,
.ledger-pay__row {
    display: grid;
    grid-template-columns: 44px 1fr 1.2fr 1.4fr 1fr 1.1fr 36px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.ledger-pay__head {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a91a3;
    background: rgba(31, 45, 90, 0.04);
}
.ledger-pay__row { border-top: 1px solid rgba(31, 45, 90, 0.06); font-size: 12.5px; }
.ledger-pay__row:hover { background: rgba(76, 129, 222, 0.06); }
.ledger-pay .pc-num { text-align: right; font-weight: 600; }
.ledger-pay .pay-amt { color: #1e8e3e; }
.ledger-pay .pc-invoice { text-align: center; }
.ledger-pay__invoice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: var(--glass-accent);
    background: rgba(76, 129, 222, 0.10);
    border: 1px solid rgba(76, 129, 222, 0.18);
    text-decoration: none;
    transition: background var(--glass-transition), color var(--glass-transition), transform var(--glass-transition), box-shadow var(--glass-transition);
}
.ledger-pay__invoice:hover {
    color: #fff;
    background: var(--glass-accent);
    border-color: var(--glass-accent);
    box-shadow: 0 4px 12px rgba(76, 129, 222, 0.28);
    transform: translateY(-1px);
}
.ledger-pay__invoice:focus-visible {
    outline: 2px solid var(--glass-accent);
    outline-offset: 2px;
}
.ledger-pay__invoice i { font-size: 13px; line-height: 1; }
.pay-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 11px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--glass-accent-2, #6aa0ff), var(--glass-accent, #4c81de));
}

/* footer totals — pinned below scrollable body */
.ledger-foot {
    flex-shrink: 0;
    margin-top: 0;
    padding: 14px 16px;
    border-top: 2px solid rgba(31, 45, 90, 0.12);
    font-weight: 800;
    color: #1c2333;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
            backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 -6px 18px rgba(31, 45, 90, 0.08);
    border-radius: 0 0 14px 14px;
    position: relative;
    z-index: 1;
}
.ledger-foot .lc-order { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.ledger-foot .lc-balance { color: #d98a00; }

/* empty states */
.ledger-empty {
    display: flex; align-items: center; gap: 14px;
    padding: 22px;
    border-radius: 14px;
    background: rgba(31, 45, 90, 0.04);
    border: 1px dashed rgba(31, 45, 90, 0.14);
    color: #5a6478;
}
.ledger-empty i { font-size: 24px; color: #9aa1b2; }
.ledger-empty b { display: block; color: #1c2333; font-size: 14px; }
.ledger-empty span { font-size: 12.5px; }
.ledger-empty--good { background: rgba(30, 142, 62, 0.08); border-color: rgba(30, 142, 62, 0.22); }
.ledger-empty--good i { color: #1e8e3e; }
.ledger-empty--muted { padding: 16px; }

/* --- 24.5 RESPONSIVE --- */
@media (max-width: 1024px) {
    .ledger-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    .ledger-table { max-height: min(55vh, calc(100dvh - 18rem)); }
    .ledger-head { display: none; }
    .ledger-row__main {
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;
    }
    .ledger-row__main .lc-order { grid-column: 1 / -1; }
    .ledger-row__main .lc-team { grid-column: 1 / -1; }
    .ledger-row__main .lc-num,
    .ledger-row__main .lc-team,
    .ledger-row__main .lc-invoice,
    .ledger-row__main .lc-status { text-align: left; align-items: flex-start; }
    .ledger-row__main .lc-status .btn-ledger-pay {
        align-self: stretch;
        width: 100%;
        max-width: none;
    }
    .ledger-row__main .lc-num::before,
    .ledger-row__main .lc-team::before,
    .ledger-row__main .lc-invoice::before,
    .ledger-row__main .lc-status::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9aa1b2;
        font-weight: 700;
    }
    .ledger-team { white-space: normal; }
    .lc-toggle { position: absolute; top: 14px; right: 14px; }
    .ledger-row { position: relative; }
    .ledger-pay__head { display: none; }
    .ledger-pay__row {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        position: relative;
        padding-right: 48px;
    }
    .ledger-pay__row .pc::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        color: #9aa1b2;
        font-weight: 700;
    }
    .ledger-pay__row .pc-seq { grid-column: 1 / -1; }
    .ledger-pay__row .pc-invoice {
        position: absolute;
        top: 10px;
        right: 12px;
        grid-column: auto;
    }
    .ledger-pay__row .pc-invoice::before { content: none; }
    .ledger-pay .pc-num { text-align: left; }
    .ledger-foot { grid-template-columns: 1fr 1fr; }
    .ledger-foot .lc-team, .ledger-foot .lc-invoice, .ledger-foot .lc-status, .ledger-foot .lc-toggle { display: none; }
}
@media (max-width: 560px) {
    .ledger-kpis { grid-template-columns: 1fr; }
    .aging-bars { gap: 8px; }
    .aging-col__track { height: 96px; }
}

/* --- 24.6 MOTION OPT-OUT + NO-BACKDROP FALLBACK --- */
@media (prefers-reduced-motion: reduce) {
    .ledger-kpi, .ledger-row, .aging-col__fill, .lc-toggle i,
    .btn-ledger-primary, .btn-ledger-ghost, .ledger-detail { transition: none !important; }
    .ledger-kpi:hover, .ledger-row:hover { transform: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ledger-kpi,
    .ledger-glass .card.card-box.ledger-analysis,
    .ledger-glass .card.card-box.ledger-card,
    .ledger-foot { background-color: rgba(255, 255, 255, 0.96); }
}
/* color-mix fallback: browsers without it use the solid accent for glows/fills */
@supports not (color: color-mix(in srgb, red, blue)) {
    .aging-col__fill { background: var(--age); }
    .ledger-badge { box-shadow: 0 3px 8px rgba(31, 45, 90, 0.18); }
}

/* ===== §24b Customer Ledger — Print dialog (FLG) =====
   IMPORTANT: no backdrop-filter on the fullscreen overlay / dialog.
   Nested blur over the already-frosted .ledger-glass page (and
   window.print() from the print statement) has crashed Electron /
   Cursor preview renderers. solidRGBA glass is intentional here. */
.ledger-print-modal[hidden] { display: none !important; }
.ledger-print-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ledger-print-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 26, 46, 0.55);
}
.ledger-print-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(31, 45, 90, 0.12);
    box-shadow: 0 24px 60px rgba(24, 32, 66, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    animation: lpfPop 0.18s ease-out;
}
@keyframes lpfPop {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ledger-print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(31, 45, 90, 0.1);
}
.ledger-print-head h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #1f2d5a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ledger-print-head h5 i { color: #e0556b; }
.ledger-print-x {
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: #8a91a3;
    cursor: pointer;
    padding: 0 4px;
}
.ledger-print-x:hover { color: #1f2d5a; }
.ledger-print-body { padding: 18px 20px; display: grid; gap: 18px; }
.lpf-group { display: grid; gap: 8px; }
.lpf-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1f2d5a;
    margin: 0;
}
.lpf-label span { color: #9aa1b2; font-weight: 600; text-transform: none; letter-spacing: 0; }
.lpf-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lpf-dates small { display: block; font-size: 11px; color: #8a91a3; margin-bottom: 3px; font-weight: 600; }
.lpf-input {
    width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(31, 45, 90, 0.16);
    background: rgba(255, 255, 255, 0.85);
    color: #1f2d5a;
    font-size: 13px;
}
.lpf-input:focus { outline: none; border-color: #e0556b; box-shadow: 0 0 0 3px rgba(224, 85, 107, 0.16); }
.lpf-hint { margin: 0; font-size: 11px; color: #9aa1b2; }
.lpf-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.lpf-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(31, 45, 90, 0.14);
    font-size: 13px;
    font-weight: 700;
    color: #1f2d5a;
    cursor: pointer;
    margin: 0;
}
.lpf-check input { accent-color: #e0556b; cursor: pointer; }
.lpf-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--paid { background: #1e8e3e; }
.dot--partial { background: #d98a00; }
.dot--unpaid { background: #8a91a3; }
.ledger-print-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(31, 45, 90, 0.1);
}
@media (max-width: 480px) {
    .lpf-dates { grid-template-columns: 1fr; }
}

/* ============================================================================
   22. YOUR DESIGNS (designs.blade.php) — scoped under .designs-glass
   ----------------------------------------------------------------------------
   Frosted Liquid Glass redesign of Approved / Archives / Requests:
   glass panel, Liquid Chrome tab pills, search + CTA toolbar, design cards
   with multi-select checkboxes, empty states, and request status badges.
   Appearance + local page JS only; routes/AJAX endpoints unchanged.
   --------------------------------------------------------------------------- */

/* 22.1 PAGE SURFACE */
.designs-glass.content-inner {
    padding: clamp(14px, 2.2vw, 26px) clamp(8px, 1.6vw, 18px) !important;
    background:
        radial-gradient(1100px 460px at 10% -10%, rgba(108, 160, 255, 0.13), transparent 58%),
        radial-gradient(900px 420px at 108% 4%, rgba(224, 85, 107, 0.09), transparent 55%),
        linear-gradient(180deg, #eef2fb 0%, #f6f8fe 100%) !important;
    min-height: calc(100vh - 120px);
}
.designs-glass,
.designs-glass p, .designs-glass a, .designs-glass span, .designs-glass small,
.designs-glass b, .designs-glass strong, .designs-glass label,
.designs-glass h1, .designs-glass h2, .designs-glass h3,
.designs-glass h4, .designs-glass h5, .designs-glass h6,
.designs-glass .btn, .designs-glass input, .designs-glass button {
    font-family: 'Poppins', sans-serif !important;
}

/* 22.2 PANEL */
.designs-glass .designs-panel.card {
    position: relative;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius);
    overflow: visible;
}
.designs-glass .designs-panel.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.55), transparent 42%);
    opacity: 0.55;
}
.designs-glass .designs-panel > .card-body {
    position: relative;
    z-index: 1;
    padding: clamp(14px, 2vw, 22px) clamp(12px, 1.8vw, 22px) clamp(18px, 2.4vw, 28px);
}
.designs-glass .designs-panel.dropdown-open { overflow: visible !important; z-index: 20; }
.designs-glass .designs-panel.dropdown-open > .card-body,
.designs-glass .designs-panel.dropdown-open .designs-tab-content,
.designs-glass .designs-panel.dropdown-open .tab-pane.active {
    overflow: visible !important;
}

/* 22.3 DEMO BANNER */
.designs-glass .designs-demo-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--glass-radius-sm);
    background: rgba(76, 129, 222, 0.10);
    border: 1px solid rgba(76, 129, 222, 0.28);
    color: #1f2d5a;
    font-size: 13px;
}
.designs-glass .designs-demo-banner i { color: #4c81de; margin-top: 2px; }
.designs-glass .designs-demo-banner strong { display: block; font-size: 13px; margin-bottom: 2px; }
.designs-glass .designs-demo-banner span { color: #5a647c; }
.designs-glass .designs-demo-banner code {
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.7);
    color: #e0556b;
}

/* 22.4 TABS — reuse Liquid Chrome pills like Orders */
.designs-glass .order-tabs .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    margin: 0 0 4px;
}
.designs-glass .order-tabs .nav-tabs .nav-item { margin: 0; }
.designs-glass .order-tabs .nav-tabs .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(31, 45, 90, 0.72) !important;
    background: transparent;
    z-index: 0;
}
.designs-glass .order-tabs .nav-tabs .nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -2;
    background: conic-gradient(
        from 210deg,
        #f4f6fa, #c5c9d1, #f7f8fb, #8e949c, #f4f6fa, #b8bdc6, #f7f8fb, #565a5e, #f4f6fa
    );
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.85),
        inset -2px -3px 4px rgba(40, 44, 52, 0.28),
        0 4px 12px rgba(31, 45, 90, 0.10);
}
.designs-glass .order-tabs .nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    z-index: -1;
    background: linear-gradient(180deg, #f7f8fb 0%, #e6e9ef 100%);
}
.designs-glass .order-tabs .nav-tabs .nav-link.active {
    color: #1f2d5a !important;
}
.designs-glass .order-tabs .nav-tabs .nav-link.active::before {
    background: conic-gradient(
        from 200deg,
        #ffffff, #d0d5de, #ffffff, #6a7280, #ffffff, #c8ced8, #ffffff, #3f4550, #ffffff
    );
}
.designs-glass .order-tabs .nav-tabs .nav-link.active::after {
    background: linear-gradient(180deg, #ffffff 0%, #eef1f6 100%);
}
.designs-glass .order-tabs .nav-tabs .nav-link .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(224, 85, 107, 0.14) !important;
    color: #e0556b !important;
}
.designs-glass .order-tabs .nav-tabs .nav-link.active .badge {
    background: #e0556b !important;
    color: #fff !important;
}

/* 22.5 TOOLBAR */
.designs-glass .designs-tab-content { padding: 16px 0 0; }
.designs-glass .designs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.designs-glass .designs-search {
    position: relative;
    flex: 1 1 220px;
    max-width: 420px;
}
.designs-glass .designs-search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa1b2;
    font-size: 13px;
    pointer-events: none;
}
.designs-glass .designs-search__input {
    height: 44px;
    padding-left: 38px;
    border-radius: 999px;
    border: 1px solid rgba(31, 45, 90, 0.14);
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
            backdrop-filter: blur(8px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    color: #1f2d5a;
    font-size: 13.5px;
}
.designs-glass .designs-search__input:focus {
    outline: none;
    border-color: rgba(224, 85, 107, 0.45);
    box-shadow: 0 0 0 3px rgba(224, 85, 107, 0.14);
}
.designs-glass a.designs-cta,
.orders-glass a.designs-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%),
        rgba(22, 163, 74, 0.92);
    border: 1px solid rgba(18, 138, 62, 0.55);
    box-shadow:
        0 6px 16px rgba(22, 163, 74, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
            backdrop-filter: blur(10px) saturate(150%);
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
    transition: transform var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease),
                background var(--glass-transition, 0.2s ease),
                border-color var(--glass-transition, 0.2s ease);
}
.designs-glass a.designs-cta i,
.orders-glass a.designs-cta i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    font-size: 16px !important;
    line-height: 1;
    color: inherit !important;
}
.designs-glass a.designs-cta:hover,
.designs-glass a.designs-cta:focus,
.orders-glass a.designs-cta:hover,
.orders-glass a.designs-cta:focus {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%),
        #15803d;
    border-color: rgba(15, 110, 48, 0.7);
    box-shadow:
        0 8px 20px rgba(22, 163, 74, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    text-decoration: none !important;
    outline: none;
}
.designs-glass a.designs-cta:focus-visible,
.orders-glass a.designs-cta:focus-visible {
    outline: 2px solid rgba(22, 163, 74, 0.45);
    outline-offset: 2px;
}

/* 22.6 INFO + BULK */
.designs-glass .designs-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--glass-radius-sm);
    background: rgba(76, 129, 222, 0.08);
    border: 1px solid rgba(76, 129, 222, 0.18);
}
.designs-glass .designs-info--muted {
    background: rgba(31, 45, 90, 0.04);
    border-color: rgba(31, 45, 90, 0.10);
}
.designs-glass .designs-info--modal {
    margin: 0;
    background: rgba(224, 85, 107, 0.08);
    border-color: rgba(224, 85, 107, 0.22);
}
.designs-glass .designs-info__icon { color: #4c81de; flex: 0 0 auto; margin-top: 2px; }
.designs-glass .designs-info__text { display: grid; gap: 2px; }
.designs-glass .designs-info__text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2d5a;
}
.designs-glass .designs-info__text span,
.designs-glass .designs-info__text p {
    font-size: 12.5px;
    color: #6a738a;
    margin: 0;
}
.designs-glass .designs-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(224, 85, 107, 0.08);
    border: 1px solid rgba(224, 85, 107, 0.22);
}
.designs-glass .designs-bulk__count { font-size: 13px; color: #1f2d5a; margin-right: auto; }
.designs-glass .designs-bulk__btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    background: #e0556b;
    color: #fff;
}
.designs-glass .designs-bulk__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.designs-glass .designs-bulk__clear {
    border: 0;
    background: transparent;
    color: #6a738a;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 10px;
}

/* 22.7 SECTION HEAD */
.designs-glass .designs-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.designs-glass .designs-section-head h4 {
    margin: 0;
    font-size: clamp(16px, 2.2vw, 18px);
    font-weight: 800;
    color: #1f2d5a;
}
.designs-glass .designs-section-head__meta {
    font-size: 12px;
    font-weight: 600;
    color: #9aa1b2;
}

/* 22.8 GRID + CARDS */
.designs-glass .designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: clamp(12px, 2vw, 18px);
}
.designs-glass .designs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--glass-radius-sm);
    background: rgba(255, 255, 255, 0.78);
    background-image: var(--glass-card-sheen);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: var(--glass-card-shadow);
    /* Keep radius crop on media only — card-level overflow:hidden clips the kebab menu */
    overflow: visible;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.designs-glass .designs-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-card-shadow-hover);
}
/* Elevate the open-menu card above neighbors so Archive/Revision stay readable */
.designs-glass .designs-card.dropdown-open,
.designs-glass .designs-card:has(.designs-card__menu.show) {
    z-index: 40;
}
.designs-glass .designs-card__media {
    position: relative;
    aspect-ratio: 4 / 3.2;
    background:
        linear-gradient(145deg, rgba(238, 242, 251, 0.95), rgba(246, 248, 254, 0.9));
    overflow: hidden;
    border-radius: var(--glass-radius-sm) var(--glass-radius-sm) 0 0;
}
.designs-glass .designs-card__preview {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.designs-glass .designs-card__preview img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.45s ease;
}
.designs-glass .designs-card:hover .designs-card__preview img { transform: scale(1.04); }
.designs-glass .designs-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #b3b9cc;
    font-size: 28px;
}
.designs-glass .designs-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    background: linear-gradient(180deg, rgba(17, 24, 48, 0.28), transparent 42%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.designs-glass .designs-card:hover .designs-card__overlay,
.designs-glass .designs-card:focus-within .designs-card__overlay,
.designs-glass .designs-card .design-select-check:checked ~ label,
.designs-glass .designs-card:has(.design-select-check:checked) .designs-card__overlay {
    opacity: 1;
    pointer-events: auto;
}
.designs-glass .designs-card__check,
.designs-glass .designs-card__star {
    pointer-events: auto;
}
.designs-glass .designs-card__check .custom-control-label::before {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(255,255,255,0.92);
    border-color: rgba(31,45,90,0.25);
}
.designs-glass .designs-card__check .custom-control-input:checked ~ .custom-control-label::before {
    background: #e0556b;
    border-color: #e0556b;
}
.designs-glass .designs-card__star {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    color: #c5cad6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(17, 24, 48, 0.16);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}
.designs-glass .designs-card__star:hover { transform: scale(1.06); }
.designs-glass .designs-card__star.active { color: #f0b429; }
.designs-glass .designs-card__badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(17, 24, 48, 0.62);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.designs-glass .designs-card__badge--star { background: rgba(240, 180, 41, 0.92); color: #1f2d5a; }
.designs-glass .designs-card__badge--archive { background: rgba(106, 115, 138, 0.88); }
.designs-glass .status-badge--design-in-process,
.designs-glass .status-badge--design-request-submitted { background: rgba(76, 129, 222, 0.92); }
.designs-glass .status-badge--design-completed { background: rgba(30, 142, 62, 0.92); }

.designs-glass .designs-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
    flex: 1;
}
.designs-glass .designs-card__heading {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.designs-glass .designs-card__title {
    margin: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: #1f2d5a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.designs-glass .designs-card__sub {
    margin: 0;
    font-size: 12.5px;
    color: #7a8499;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.designs-glass .designs-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}
.designs-glass .designs-card__order {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e0556b !important;
}
.designs-glass .designs-card__order.is-muted {
    color: #b3b9cc !important;
    cursor: default;
}
.designs-glass .designs-card__status,
.designs-glass .designs-card__meta {
    font-size: 11px;
    font-weight: 700;
    color: #8a91a3;
}
.designs-glass .designs-card__status.status--approved { color: #1e8e3e; }
.designs-glass .designs-card__status.status--archived { color: #8a91a3; }

.designs-glass .designs-card__kebab {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(31, 45, 90, 0.10);
    background: rgba(255,255,255,0.7);
    color: #6a738a;
    line-height: 1;
}
.designs-glass .designs-card__kebab:hover,
.designs-glass .designs-card__menu.show .designs-card__kebab {
    background: #fff;
    color: #1f2d5a;
    box-shadow: var(--glass-card-shadow);
}
.designs-glass .designs-dropdown {
    min-width: 168px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--glass-card-border);
    background: rgba(255,255,255,0.96);
    box-shadow: var(--glass-card-shadow-hover);
    z-index: 1060;
}
.designs-glass .designs-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2d5a;
}
.designs-glass .designs-dropdown .dropdown-item i { width: 16px; color: #e0556b; }
.designs-glass .designs-dropdown .dropdown-item:hover { background: rgba(224, 85, 107, 0.08); }
.designs-glass .designs-dropdown .dropdown-item.disabled,
.designs-glass .designs-dropdown .dropdown-item.disabled:hover {
    opacity: 0.45;
    background: transparent;
    cursor: not-allowed;
}

.designs-glass .designs-card--archived { opacity: 0.92; }
.designs-glass .designs-card--archived .designs-card__preview img { filter: grayscale(0.25); }

/* 22.9 EMPTY */
.designs-glass .designs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: clamp(28px, 5vw, 48px) 18px;
    border-radius: var(--glass-radius-sm);
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(31, 45, 90, 0.16);
}
.designs-glass .designs-empty__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 129, 222, 0.10);
    color: #4c81de;
    font-size: 20px;
    margin-bottom: 4px;
}
.designs-glass .designs-empty h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #1f2d5a;
}
.designs-glass .designs-empty p {
    margin: 0 0 8px;
    max-width: 360px;
    font-size: 13px;
    color: #8a91a3;
}
.designs-glass .designs-empty--filter {
    margin-top: 12px;
}

/* 22.10 MODAL */
.designs-glass .designs-modal .modal-content,
.designs-modal .modal-content.glass-surface {
    border-radius: var(--glass-radius);
    overflow: hidden;
}
.designs-glass .designs-modal-hint {
    font-size: 13px;
    color: #6a738a;
}
.designs-glass .designs-link-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.designs-glass .designs-link-cats .category {
    cursor: pointer;
    text-align: center;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(31,45,90,0.10);
}
.designs-glass .designs-link-cats .category img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.designs-glass .designs-link-cats .category h3 {
    font-size: 12px;
    margin: 8px 0 0;
    color: #1f2d5a;
}

/* 22.11 RESPONSIVE */
@media (max-width: 767.98px) {
    /* Keep search + CTA on one row; avoid flex-grow on .designs-search in a column
       toolbar (was stretching the search block and floating the icon mid-gap). */
    .designs-glass .designs-toolbar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .designs-glass .designs-search {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }
    .designs-glass .designs-toolbar a.designs-cta {
        align-self: auto;
        flex: 0 0 44px;
    }
    .designs-glass .order-tabs .nav-tabs { gap: 6px; }
    .designs-glass .order-tabs .nav-tabs .nav-link {
        min-height: 38px;
        padding: 8px 12px !important;
        font-size: 11.5px;
    }
    .designs-glass .designs-card__overlay { opacity: 1; pointer-events: auto; }
}
@media (max-width: 479.98px) {
    .designs-glass .designs-grid {
        grid-template-columns: 1fr;
    }
}

/* 22.12 MOTION OPT-OUT */
@media (prefers-reduced-motion: reduce) {
    .designs-glass .designs-card,
    .designs-glass .designs-card__preview img,
    .designs-glass .designs-card__star,
    .designs-glass a.designs-cta,
    .orders-glass a.designs-cta,
    .designs-glass a.designs-card__chat-cta {
        transition: none;
    }
    .designs-glass .designs-card:hover,
    .designs-glass a.designs-cta:hover,
    .orders-glass a.designs-cta:hover,
    .designs-glass a.designs-card__chat-cta:hover { transform: none; }
    .designs-glass .designs-card:hover .designs-card__preview img { transform: none; }
}

/* 22.13 SOLID FALLBACK */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .designs-glass .designs-panel.card,
    .designs-glass .designs-card,
    .designs-glass .designs-search__input {
        background: #ffffff;
    }
    .designs-glass a.designs-cta,
    .orders-glass a.designs-cta {
        background: #16a34a;
    }
    .designs-glass a.designs-card__chat-cta {
        background: #e0556b;
    }
}

/* 22.14 DESIGN CHAT UNREAD BADGES */
.designs-glass .designs-chat-alerts {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.designs-glass .designs-chat-alerts__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(224, 85, 107, 0.28);
    background: rgba(255, 255, 255, 0.72);
    color: #1f2d5a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 14px rgba(224, 85, 107, 0.12);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}
.designs-glass .designs-chat-alerts__toggle::after { display: none; }
.designs-glass .designs-chat-alerts__toggle:hover,
.designs-glass .designs-chat-alerts__toggle:focus {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(224, 85, 107, 0.18);
    outline: none;
}
.designs-glass .designs-chat-alerts__toggle i { color: #e0556b; }
.designs-glass .designs-chat-alerts__menu {
    min-width: 280px;
    padding: 8px 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 32px rgba(15, 23, 53, 0.14);
}
.designs-glass .designs-chat-alerts__head {
    padding: 8px 16px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a91a3;
}
.designs-glass .designs-chat-alerts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: #1f2d5a;
}
.designs-glass .designs-chat-alerts__item:hover {
    background: rgba(224, 85, 107, 0.08);
    color: #1f2d5a;
}
.designs-glass .designs-chat-alerts__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.designs-glass .designs-chat-badge,
.app-sidebar .sidebar-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a90, #e0556b);
    border: 2px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(224, 85, 107, 0.45);
}
.designs-glass .designs-chat-badge--inline {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    border-width: 1px;
    margin-left: 0;
    vertical-align: middle;
    flex-shrink: 0;
}
.designs-glass .designs-card__chat-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%),
        rgba(224, 85, 107, 0.92);
    border: 1px solid rgba(201, 68, 90, 0.55);
    box-shadow:
        0 3px 10px rgba(224, 85, 107, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
            backdrop-filter: blur(8px) saturate(150%);
    transition: transform var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease),
                background var(--glass-transition, 0.2s ease);
}
.designs-glass .designs-card__chat-cta i {
    font-size: 12px;
    line-height: 1;
    color: inherit !important;
}
.designs-glass .designs-card__chat-cta-label {
    white-space: nowrap;
}
.designs-glass a.designs-card__chat-cta:hover,
.designs-glass a.designs-card__chat-cta:focus {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%),
        rgba(224, 85, 107, 1);
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(224, 85, 107, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.designs-glass .designs-card__chat-cta.is-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    color: #8a91a3 !important;
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(31, 45, 90, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.designs-glass .designs-card--request .designs-card__footer {
    align-items: center;
}
.designs-glass .order-tabs .nav-tabs .nav-link .badge.designs-tab-badge--alert {
    background: #e0556b !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(224, 85, 107, 0.35);
}
.app-sidebar .sidebar-navigation ul a > span {
    position: relative;
}
.app-sidebar .sidebar-nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    border-width: 1px;
}
#app-top.sidebar-collapsed .app-sidebar .sidebar-nav-badge {
    opacity: 0;
    pointer-events: none;
}
#app-top.sidebar-collapsed .app-sidebar:hover .sidebar-nav-badge {
    opacity: 1;
    pointer-events: auto;
}

/* ===========================================================================
   23. REQUEST DESIGN WIZARD — revision.blade.php (.revision-glass)
   ---------------------------------------------------------------------------
   Scoped under .revision-glass. Reuses the New Order Select Products card
   recipe from §20 (.products-glass) for category tiles, product/package
   cards (.quiz_card_area), price range bar, and Selected Products sidebar.
   Enter Quantities (§23.5) mirrors New Order calculator_row tier pricing
   (unit × qty, next-tier hint, format_amount). Color Selection (§23.6) is a
   guided Primary → Secondary → Optional (max 3) picker with live summary.
   Logos & Reference Images (§23.7) is a dual-card upload step — designs and
   logos stay separate; blueimp inputs / dropzone class hooks preserved.
   Instructions (§23.8) is a glass notes step — tips + polished textarea;
   field name="description" preserved for createDesignRequest.
   Review (§23.9) summarizes products/qty, colors, logos vs references,
   variations, instructions, request details, and estimate (Design Cost FREE,
   Due today $0) before submit — preserves design_name / order_due_date.
   Wizard step JS (#wizard1, .quiz_checkbox, .package_radio, .product_radio,
   qty[*] / color_id[] field names) stay intact — appearance + client helpers.
   Wizard chrome (§23.0): header Cancel/Next + jquery.steps stepper/actions
   benefit every step; category grid (§23.1) is step-1 only.
   =========================================================================== */
.revision-glass,
.revision-glass h3, .revision-glass h4, .revision-glass h5, .revision-glass h6,
.revision-glass p, .revision-glass span, .revision-glass a, .revision-glass button,
.revision-glass label {
    font-family: 'Poppins', sans-serif;
}

.revision-glass > .card.card-box,
.revision-glass > .card.card-box.rev-wizard-shell {
    position: relative;
    overflow: hidden;
    margin-bottom: 100px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-lg, 20px);
    background-color: var(--glass-bg-card);
    background-image:
        radial-gradient(120% 80% at 0% 0%, rgba(108, 160, 255, 0.14), transparent 55%),
        radial-gradient(90% 70% at 100% 0%, rgba(224, 85, 107, 0.08), transparent 50%),
        var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
}

/* ---------------------------------------------------------------------------
   23.0 Wizard chrome — header, stepper, prev/next (all steps)
   --------------------------------------------------------------------------- */
.revision-glass .rev-wizard-header.card-header,
.revision-glass .card-header.rev-wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(31, 45, 90, 0.10);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
}

.revision-glass .rev-wizard-header__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.revision-glass .rev-wizard-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--glass-primary);
}

.revision-glass .rev-wizard-heading {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 700;
    color: #1c2333;
    line-height: 1.3;
}

.revision-glass .rev-wizard-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Header Cancel / Next — circular glass icon controls (not text pills) */
.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--glass-card-border);
    background: var(--glass-bg-card);
    box-shadow: var(--glass-card-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    color: var(--glass-accent);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), border-color var(--glass-transition),
                color var(--glass-transition);
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn .material-icons {
    font-size: 22px;
    line-height: 1;
    color: inherit;
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--cancel {
    color: #c45a6a;
    border-color: rgba(224, 85, 107, 0.28);
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--next {
    color: var(--glass-accent);
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--submit {
    color: #2f9e6e;
    border-color: rgba(47, 158, 110, 0.32);
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn:hover,
.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn:focus {
    background: var(--glass-pill-active);
    border-color: var(--glass-border-strong);
    box-shadow: 0 6px 16px rgba(76, 129, 222, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-1px) scale(1.04);
    text-decoration: none;
    outline: none;
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--cancel:hover,
.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--cancel:focus {
    color: #e0556b;
    border-color: rgba(224, 85, 107, 0.45);
    box-shadow: 0 6px 16px rgba(224, 85, 107, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--next:hover,
.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--next:focus {
    color: #2a5298;
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--submit:hover,
.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--submit:focus {
    color: #248a5e;
    border-color: rgba(47, 158, 110, 0.48);
    box-shadow: 0 6px 16px rgba(47, 158, 110, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.35), var(--glass-card-shadow);
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--cancel:focus-visible {
    box-shadow: 0 0 0 3px rgba(224, 85, 107, 0.30), var(--glass-card-shadow);
}

.revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn--submit:focus-visible {
    box-shadow: 0 0 0 3px rgba(47, 158, 110, 0.32), var(--glass-card-shadow);
}

/* jquery.steps nav — glass strip across all wizard steps */
.revision-glass #wizard1.wizard .steps,
.revision-glass .wizard .steps {
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(31, 45, 90, 0.10);
    background:
        linear-gradient(180deg, rgba(248, 250, 255, 0.92), rgba(240, 244, 255, 0.72));
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.revision-glass #wizard1.wizard .steps ul,
.revision-glass .wizard .steps ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    min-width: max-content;
}

.revision-glass #wizard1.wizard .steps ul li,
.revision-glass .wizard .steps ul li {
    padding: 0 1.25rem 0 0;
    flex: 0 0 auto;
}

.revision-glass #wizard1.wizard .steps ul li:after,
.revision-glass .wizard .steps ul li:after {
    color: rgba(31, 45, 90, 0.22);
    right: 0.55rem;
    font-size: 0.7rem;
}

.revision-glass #wizard1.wizard .steps ul li a,
.revision-glass .wizard .steps ul li a {
    text-decoration: none;
    gap: 8px;
}

.revision-glass #wizard1.wizard .steps ul li a .number,
.revision-glass .wizard .steps ul li a .number {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
    border-color: rgba(31, 45, 90, 0.22);
    color: rgba(27, 36, 64, 0.55);
    font-size: 13px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: transform var(--glass-transition), background var(--glass-transition),
                border-color var(--glass-transition), color var(--glass-transition),
                box-shadow var(--glass-transition);
}

.revision-glass #wizard1.wizard .steps ul li a .title,
.revision-glass .wizard .steps ul li a .title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(27, 36, 64, 0.55);
    max-width: 7.5rem;
    line-height: 1.25;
}

.revision-glass #wizard1.wizard .steps ul li a:hover .number,
.revision-glass .wizard .steps ul li a:hover .number {
    border-color: rgba(108, 160, 255, 0.55);
    color: var(--glass-primary);
    transform: translateY(-1px);
}

.revision-glass #wizard1.wizard .steps ul li a:hover .title,
.revision-glass .wizard .steps ul li a:hover .title {
    color: var(--glass-primary);
}

.revision-glass #wizard1.wizard .steps ul li.current a .number,
.revision-glass .wizard .steps ul li.current a .number {
    background: linear-gradient(145deg, #5a66d4, var(--glass-primary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(60, 68, 177, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.revision-glass #wizard1.wizard .steps ul li.current a .title,
.revision-glass .wizard .steps ul li.current a .title {
    color: var(--glass-primary);
    font-weight: 700;
}

.revision-glass #wizard1.wizard .steps ul li.done a .number,
.revision-glass .wizard .steps ul li.done a .number {
    background: linear-gradient(145deg, #3ddc7a, #1bc943);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(27, 201, 67, 0.28);
}

.revision-glass #wizard1.wizard .steps ul li.done a .title,
.revision-glass .wizard .steps ul li.done a .title {
    color: #148a38;
}

.revision-glass #wizard1.wizard .content,
.revision-glass .wizard .content {
    padding: 1.35rem 1.25rem 1.5rem;
    background: transparent;
}

.revision-glass #wizard1.wizard .actions,
.revision-glass .wizard .actions {
    border-top: 1px solid rgba(31, 45, 90, 0.10);
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(248, 250, 255, 0.72));
}

/* Previous left / Continue|Submit right — Finish replaces Next on Review */
.revision-glass #wizard1.wizard .actions ul,
.revision-glass .wizard .actions ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
}

.revision-glass #wizard1.wizard .actions ul li a,
.revision-glass .wizard .actions ul li a {
    border-radius: 999px;
    padding: 0.58rem 1.45rem;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.25;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #5a66d4, var(--glass-primary));
    box-shadow: 0 8px 18px rgba(60, 68, 177, 0.32);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition);
}

/* Finish/Submit: same pill as Previous/Continue; pin to the right when alone with Previous */
.revision-glass #wizard1.wizard .actions ul > li:has(> a[href="#finish"]) {
    margin-left: auto;
}

.revision-glass #wizard1.wizard .actions ul li a[href="#finish"] {
    color: #fff;
    min-width: 5.5rem;
}

/* On Review, Force Finish visible (overrides jquery.steps .hide() / aria-hidden) */
.revision-glass #wizard1.wizard.is-review-step .actions ul > li:has(> a[href="#finish"]) {
    display: block !important;
    visibility: visible !important;
}

.revision-glass #wizard1.wizard.is-review-step .actions ul li a[href="#finish"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.revision-glass #wizard1.wizard .actions ul li a:hover,
.revision-glass .wizard .actions ul li a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(60, 68, 177, 0.38);
}

.revision-glass #wizard1.wizard .actions ul li.disabled a,
.revision-glass .wizard .actions ul li.disabled a {
    background: rgba(244, 245, 253, 0.95);
    color: #a6a6b9;
    box-shadow: none;
    cursor: not-allowed;
}

.revision-glass #wizard1.wizard .actions ul li.disabled a:hover,
.revision-glass .wizard .actions ul li.disabled a:hover {
    transform: none;
}

/* ---------------------------------------------------------------------------
   23.1 Category tiles (step 1)
   --------------------------------------------------------------------------- */
.revision-glass .rev-category-step__head {
    margin: 0 0 18px;
    max-width: 40rem;
}

.revision-glass .rev-category-step__title {
    margin: 0 0 6px;
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    font-weight: 700;
    color: #1c2333;
    letter-spacing: -0.01em;
}

.revision-glass .rev-category-step__lead {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(27, 36, 64, 0.62);
    font-weight: 500;
}

.revision-glass .prod_categories .rev-category-grid {
    margin-left: -8px;
    margin-right: -8px;
}

.revision-glass .prod_categories .rev-category-col {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

.revision-glass .prod_categories .card.select_category,
.revision-glass .prod_categories .card.prod_category_hover {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
    overflow: hidden;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.revision-glass .prod_categories .card.select_category::before,
.revision-glass .prod_categories .card.prod_category_hover::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.35), transparent 55%);
    opacity: 0.85;
    z-index: 1;
}

.revision-glass .prod_categories .card.select_category:hover,
.revision-glass .prod_categories .card.prod_category_hover:hover {
    transform: translateY(-4px);
    border-color: rgba(108, 160, 255, 0.48);
    box-shadow: var(--glass-card-shadow-hover);
}

.revision-glass .prod_categories .rev-category-card__media {
    position: relative;
    z-index: 0;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(160deg, #f4f7ff, #eef2fb);
}

.revision-glass .prod_categories .card.select_category .card-img-top {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    background: transparent;
    transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.revision-glass .prod_categories .card.select_category:hover .card-img-top {
    transform: scale(1.04);
}

.revision-glass .prod_categories .prod_category_card__bg {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 12px 10px !important;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.20), rgba(60, 68, 177, 0.12));
    border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.revision-glass .prod_categories .prod_category_card__bg .card-title {
    color: #1c2333;
    font-size: clamp(0.72rem, 1.8vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.revision-glass .prod_categories .card.select_category:hover .prod_category_card__bg {
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.36), rgba(60, 68, 177, 0.22));
}

.revision-glass .prod_categories .card.select_category_style,
.revision-glass .prod_categories .card.select_category.select_category_style {
    border-color: rgba(108, 160, 255, 0.72);
    box-shadow: var(--glass-card-shadow-hover), 0 0 0 2px rgba(108, 160, 255, 0.30);
}

.revision-glass .prod_categories .card.select_category_style .prod_category_card__bg,
.revision-glass .prod_categories .card.select_category.select_category_style .prod_category_card__bg {
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.42), rgba(60, 68, 177, 0.28));
}

.revision-glass .prod_categories .card.select_category_style .prod_category_card__bg .card-title,
.revision-glass .prod_categories .card.select_category.select_category_style .prod_category_card__bg .card-title {
    color: var(--glass-primary);
}

/* 23.2 Product select step surface */
.revision-glass #quizeSection.quiz_section {
    background: transparent;
    padding: 8px 4px 4px;
}
.revision-glass .revision-products-hint {
    font-size: 14px;
    color: #5a647c;
}

/* Section pills (Packages / Products) — same as §20 */
.revision-glass #products-view .section-pill,
.revision-glass #products-view span[style*="bolder"] {
    display: inline-block;
    margin: 4px 0 14px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--glass-primary);
    background: rgba(108, 160, 255, 0.16);
    border: 1px solid rgba(108, 160, 255, 0.28);
}
.revision-glass #products-view .section-pill--package,
.revision-glass #products-view span[style*="bolder"].section-pill--package {
    color: #9a6212;
    background: rgba(245, 173, 66, 0.18);
    border-color: rgba(217, 143, 30, 0.42);
}

/* 23.3 Product / package cards — mirror §20.5 */
.revision-glass .quiz_card_area.card {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.revision-glass .quiz_card_area { margin-bottom: 26px; }
.revision-glass .single_quiz_card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition);
}
.revision-glass .single_quiz_card:hover {
    transform: translateY(-4px);
    border-color: rgba(108, 160, 255, 0.5);
    box-shadow: var(--glass-card-shadow-hover);
}
.revision-glass .quiz_card_icon { display: block; }
.revision-glass .quiz_card_icon .card-body {
    padding: 10px 10px 4px !important;
    background: transparent;
}
.revision-glass .quiz_card_icon .card-body label.category {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    float: none;
    pointer-events: none; /* clicks hit the overlaying .quiz_checkbox */
}
.revision-glass .quiz_card_content { display: block; }
.revision-glass .quiz_card_content::after { content: ""; display: block; clear: both; }
.revision-glass .quiz_card_icon .card-body label.category img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 53, 0.05);
}
.revision-glass .quiz_card_icon .card-body label.category h3 {
    position: static;
    width: 100%;
    bottom: auto;
    padding: 0 4px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1c2333;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
}
.revision-glass .quiz_card_title.bg__card {
    margin: 6px 10px 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.16), rgba(60, 68, 177, 0.10));
    border: 1px solid rgba(108, 160, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: var(--glass-primary);
    text-align: center;
}
.revision-glass .quiz_card_title.bg__card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--glass-primary);
    letter-spacing: 0.01em;
    white-space: nowrap;
    margin: 0;
}
.revision-glass .quiz_card_title.bg__card h3 .price-low  { color: #1f9d57; }
.revision-glass .quiz_card_title.bg__card h3 .price-high { color: var(--glass-primary); }
.revision-glass .quiz_card_title.bg__card h3 .price-sep  {
    color: #9aa1b4;
    margin: 0 6px;
    font-weight: 600;
}
.revision-glass .bg__overlay .checkbox_effect { color: var(--glass-accent); }

/* Selected state — theme the legacy blue check border */
.revision-glass .quiz_checkbox:checked ~ .single_quiz_card {
    border: 2px solid rgba(108, 160, 255, 0.85);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-card-shadow-hover), 0 0 0 2px rgba(108, 160, 255, 0.22);
}
.revision-glass .quiz_checkbox:checked ~ .single_quiz_card > .bg__overlay {
    border-radius: var(--glass-radius);
    background-color: rgba(255, 255, 255, 0.42);
}

/* 23.4 Selected Products sidebar */
.revision-glass .product__list {
    position: sticky;
    top: 16px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
}
.revision-glass .product__list .product__title h5 {
    color: var(--glass-primary);
    font-size: 15px;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}
.revision-glass .product_item_list li {
    border-top-color: rgba(15, 23, 53, 0.08);
}
.revision-glass .product-wrapper > img {
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 53, 0.05);
}
.revision-glass .product_title .fw-600 {
    color: #1c2333;
}
.revision-glass .product_title span.fw-600 {
    color: var(--glass-primary);
    font-size: 13px;
}
.revision-glass .product__times_btn {
    color: #e0556b;
}

/* 23.5 Enter Quantities step — mirror New Order product-quantity card layout */
.revision-glass .pq_default_sec {
    padding: 12px 4px 8px;
}
.revision-glass .product__quantity.rev-qty-panel,
.revision-glass .rev-qty-panel {
    width: auto !important;
    margin: 0;
    padding: clamp(16px, 2.2vw, 28px);
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-lg, 20px);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
}
.revision-glass .rev-qty-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.revision-glass .rev-qty-panel__head h3 {
    color: #1c2333;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    letter-spacing: 0.01em;
}
.revision-glass .rev-qty-panel__hint {
    font-size: 14px;
    color: #5a647c;
}
.revision-glass .rev-qty-remove-all {
    flex-shrink: 0;
    color: #e0556b !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 0;
    text-decoration: none;
}
.revision-glass .rev-qty-remove-all:hover {
    color: #c43f55 !important;
    text-decoration: underline;
}

.revision-glass .rev-qty-table {
    margin-bottom: 0;
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 12px;
}
.revision-glass .rev-qty-table .pq_thead th {
    border: 0;
    padding: 0 12px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a849c;
    background: transparent;
}
.revision-glass .rev-qty-table tbody tr.rev-qty-row,
.revision-glass .rev-qty-table tbody tr {
    background-color: rgba(255, 255, 255, 0.55);
    background-image: var(--glass-card-sheen);
    box-shadow: var(--glass-card-shadow);
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition);
}
.revision-glass .rev-qty-table tbody tr:hover {
    transform: translateY(-2px);
    border-color: rgba(108, 160, 255, 0.45);
    box-shadow: var(--glass-card-shadow-hover);
}
.revision-glass .rev-qty-table tbody td,
.revision-glass .rev-qty-table tbody th {
    border: 0;
    vertical-align: middle;
    padding: 16px 14px;
    background: transparent;
}
.revision-glass .rev-qty-table tbody th:first-child {
    border-radius: var(--glass-radius) 0 0 var(--glass-radius);
}
.revision-glass .rev-qty-table tbody td:last-child {
    border-radius: 0 var(--glass-radius) var(--glass-radius) 0;
    text-align: right;
    width: 48px;
}

.revision-glass .rev-qty-product,
.revision-glass .quantity_product {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.revision-glass .rev-qty-product > img,
.revision-glass .quantity_product > img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 53, 0.06);
    flex-shrink: 0;
}
.revision-glass .rev-qty-name {
    color: #1c2333;
    font-size: 16px;
}
.revision-glass .pq_price {
    font-size: 14px;
    color: #5a647c;
}
.revision-glass .pq_price .price_per_piece_unit,
.revision-glass .pq_price .text-success {
    color: #1f9d57 !important;
}
.revision-glass .rev-qty-min,
.revision-glass .rev-qty-tier-hint,
.revision-glass .cart_count {
    font-size: 13px;
    color: #5a647c;
}
.revision-glass .quantity_to_div {
    font-weight: 700;
}

.revision-glass .quantity_box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 150px;
    max-width: 200px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid rgba(108, 160, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.revision-glass .quantity_box .add,
.revision-glass .quantity_box .sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 22px !important;
    line-height: 1 !important;
    top: 0 !important;
    color: var(--glass-primary);
    cursor: pointer;
    user-select: none;
    transition: background var(--glass-transition), color var(--glass-transition);
}
.revision-glass .quantity_box .add:hover,
.revision-glass .quantity_box .sub:hover {
    background: rgba(108, 160, 255, 0.16);
}
.revision-glass .quantity_box .input_count {
    width: 64px;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 600;
    color: #1c2333;
    top: 0 !important;
}

.revision-glass .rev-qty-cost-cell .total_price,
.revision-glass .rev-qty-cost-cell .price_per_piece {
    color: #1f9d57;
    font-size: 18px;
}
.revision-glass .rev-qty-cost-cell .row_price_per_piece {
    display: block;
    font-size: 13px;
    color: #9aa1b4;
}
.revision-glass .quantity__times_btn {
    color: #e0556b !important;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    text-decoration: none !important;
}
.revision-glass .quantity__times_btn:hover {
    color: #c43f55 !important;
}

.revision-glass .rev-qty-summary-row {
    margin-top: 8px;
}
.revision-glass .review_summary.rev-qty-summary {
    margin-top: 8px;
    padding: 18px 20px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius);
    background-color: rgba(255, 255, 255, 0.62);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
}
.revision-glass .review_summary.rev-qty-summary h5 {
    color: var(--glass-primary);
    margin-bottom: 10px;
}
.revision-glass .review_summary.rev-qty-summary p {
    font-size: 14px;
    color: #3a4460;
}
.revision-glass .review_summary.rev-qty-summary .t_price {
    font-weight: 700;
    color: #1c2333;
}

/* 23.5b Motion opt-out + solid fallback (products / category / qty / chrome) */
@media (prefers-reduced-motion: reduce) {
    .revision-glass .single_quiz_card,
    .revision-glass .prod_categories .card.select_category,
    .revision-glass .prod_categories .card.select_category .card-img-top,
    .revision-glass .rev-qty-table tbody tr,
    .revision-glass #wizard1.wizard .steps ul li a .number,
    .revision-glass #wizard1.wizard .actions ul li a,
    .revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn {
        transition: none;
    }
    .revision-glass .single_quiz_card:hover,
    .revision-glass .prod_categories .card.select_category:hover,
    .revision-glass .rev-qty-table tbody tr:hover,
    .revision-glass #wizard1.wizard .actions ul li a:hover,
    .revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn:hover,
    .revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn:focus {
        transform: none;
    }
    .revision-glass .prod_categories .card.select_category:hover .card-img-top {
        transform: none;
    }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .revision-glass > .card.card-box,
    .revision-glass .single_quiz_card,
    .revision-glass .prod_categories .card.select_category,
    .revision-glass .product__list,
    .revision-glass .rev-qty-panel,
    .revision-glass .review_summary.rev-qty-summary,
    .revision-glass #wizard1.wizard .steps,
    .revision-glass .wizard .steps,
    .revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn {
        background: #ffffff;
    }
}

@media (max-width: 991.98px) {
    .revision-glass #wizard1.wizard .steps ul li a .title,
    .revision-glass .wizard .steps ul li a .title {
        max-width: 5.5rem;
        font-size: 11px;
    }
}

@media (max-width: 767.98px) {
    .revision-glass .rev-wizard-header.card-header {
        padding: 14px 14px;
    }
    .revision-glass .rev-wizard-header__actions {
        width: 100%;
        justify-content: flex-end;
    }
    .revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn {
        width: 40px;
        height: 40px;
    }
    .revision-glass .rev-wizard-header__actions .rev-wizard-icon-btn .material-icons {
        font-size: 20px;
    }
    .revision-glass #wizard1.wizard .steps,
    .revision-glass .wizard .steps {
        padding: 12px 12px 10px;
    }
    .revision-glass #wizard1.wizard .steps ul li,
    .revision-glass .wizard .steps ul li {
        padding-right: 0.85rem;
    }
    .revision-glass #wizard1.wizard .steps ul li a .title,
    .revision-glass .wizard .steps ul li a .title {
        display: none;
    }
    .revision-glass #wizard1.wizard .steps ul li:after,
    .revision-glass .wizard .steps ul li:after {
        right: 0.28rem;
    }
    .revision-glass #wizard1.wizard .content,
    .revision-glass .wizard .content {
        padding: 1rem 0.85rem 1.15rem;
    }
    .revision-glass .prod_categories .rev-category-col {
        margin-bottom: 12px;
    }
    .revision-glass .prod_categories .prod_category_card__bg {
        padding: 10px 6px !important;
    }
    .revision-glass .prod_categories .prod_category_card__bg .card-title {
        font-size: 0.68rem;
        letter-spacing: 0.03em;
    }
    .revision-glass .product__list { position: static; margin-top: 12px; }
    .revision-glass .rev-qty-panel__head { flex-direction: column; align-items: stretch; }
    .revision-glass .rev-qty-product > img,
    .revision-glass .quantity_product > img {
        width: 64px;
        height: 64px;
    }
    .revision-glass .rev-qty-table .pq_thead { display: none; }
    .revision-glass .rev-qty-table tbody td,
    .revision-glass .rev-qty-table tbody th {
        display: block;
        width: 100% !important;
        border-radius: 0 !important;
        padding: 10px 14px;
    }
    .revision-glass .rev-qty-table tbody th:first-child {
        padding-top: 16px;
        border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important;
    }
    .revision-glass .rev-qty-table tbody td:last-child {
        padding-bottom: 16px;
        text-align: left;
        border-radius: 0 0 var(--glass-radius) var(--glass-radius) !important;
    }

    /* Product / package pickers (Products step) — 2-up compact grid, mirrors
       the New Order Add Product modal recipe (§20.6b) so the list isn't one
       giant single column of full-bleed cards. */
    .revision-glass #products-view.row,
    .revision-glass #products-package-view.row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .revision-glass #products-view.row > [class*="col-"],
    .revision-glass #products-package-view.row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .revision-glass #products-view.row > .col-sm-12,
    .revision-glass #products-view.row > .col-12,
    .revision-glass #products-package-view.row > .col-sm-12,
    .revision-glass #products-package-view.row > .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .revision-glass .quiz_card_area { margin-bottom: 12px; }
    .revision-glass .quiz_card_icon .card-body label.category img {
        height: 96px;
    }
    .revision-glass .quiz_card_icon .card-body label.category h3 {
        font-size: 0.78rem;
        line-height: 1.25;
    }
    .revision-glass .quiz_card_title.bg__card { padding: 8px 6px !important; }
    .revision-glass .quiz_card_title.bg__card h3 { font-size: 0.8rem; }
}

@media (max-width: 479.98px) {
    .revision-glass .rev-category-step__lead {
        font-size: 0.85rem;
    }
    .revision-glass .prod_categories .rev-category-card__media {
        aspect-ratio: 1 / 1;
    }
}

/* ---------------------------------------------------------------------------
   23.6 Color Selection — guided Primary → Secondary → Optional (max 3)
   --------------------------------------------------------------------------- */
.revision-glass .rev-color-step {
    margin-top: 4px;
}

.revision-glass .rev-color-picker.glass-card,
.revision-glass .rev-color-summary.glass-card {
    position: relative;
    overflow: hidden;
    padding: 20px 22px 24px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-lg, 20px);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
}

.revision-glass .rev-color-picker__title {
    margin: 0;
    padding-top: 4px !important;
    padding-bottom: 8px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    color: #1b2440;
}

.revision-glass .rev-color-picker__hint,
.revision-glass .rev-color-summary__hint,
.revision-glass .rev-color-pane__copy {
    color: rgba(27, 36, 64, 0.62);
    font-size: 0.9rem;
    line-height: 1.45;
}

.revision-glass .rev-color-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 22px;
}

.revision-glass .rev-color-stage {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 14px rgba(31, 45, 90, 0.08);
    color: #243156;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), opacity var(--glass-transition);
}

.revision-glass .rev-color-stage__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(60, 68, 177, 0.12);
    color: var(--glass-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.revision-glass .rev-color-stage__meta {
    margin-left: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(76, 129, 222, 0.14);
    color: var(--glass-accent);
    font-size: 0.72rem;
    font-weight: 600;
}

.revision-glass .rev-color-stage:hover:not(:disabled),
.revision-glass .rev-color-stage.is-active {
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.28), rgba(76, 129, 222, 0.18));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 8px 20px rgba(60, 68, 177, 0.16);
    transform: translateY(-1px);
    color: var(--glass-primary);
}

.revision-glass .rev-color-stage.is-active .rev-color-stage__num {
    background: var(--glass-primary);
    color: #fff;
}

.revision-glass .rev-color-stage.is-locked,
.revision-glass .rev-color-stage[aria-disabled="true"] {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.revision-glass .rev-color-stage.is-locked:hover,
.revision-glass .rev-color-stage[aria-disabled="true"]:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 14px rgba(31, 45, 90, 0.08);
    color: #243156;
}

.revision-glass .rev-color-pane {
    display: none;
}

.revision-glass .rev-color-pane.is-active {
    display: block;
}

.revision-glass .rev-color-pane__heading {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1b2440;
}

.revision-glass .rev-color-pane__intro {
    margin-bottom: 14px;
}

.revision-glass .rev-color-swatches.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 4px 2px 8px;
}

.revision-glass .rev-color-swatch.checkbox_color_list {
    width: 64px;
    height: 64px;
    margin: 0;
    border: 2px solid rgba(27, 36, 64, 0.14) !important;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(31, 45, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                border-color var(--glass-transition);
    cursor: pointer;
}

.revision-glass .rev-color-swatch:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 22px rgba(31, 45, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.revision-glass .rev-color-swatch.is-selected,
.revision-glass .rev-color-swatch:has(input:checked) {
    border-color: var(--glass-accent) !important;
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.28), 0 8px 18px rgba(31, 45, 90, 0.16);
}

.revision-glass .rev-color-swatch .custom-control-label {
    cursor: pointer;
}

.revision-glass .rev-color-swatch input[type='checkbox']:checked + label {
    visibility: visible !important;
}

.revision-glass .rev-color-swatch input[type='checkbox']:checked + label::after,
.revision-glass .rev-color-swatch input[type='checkbox']:checked + label::before {
    visibility: visible !important;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.92);
    background: rgba(27, 36, 64, 0.72);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.revision-glass .rev-color-summary {
    position: sticky;
    top: 88px;
}

.revision-glass .rev-color-summary__title {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 600;
    color: #1b2440;
}

.revision-glass .rev-color-summary__body {
    margin-top: 14px;
}

.revision-glass .rev-color-slot {
    margin-bottom: 16px;
}

.revision-glass .rev-color-slot .color_title {
    border-bottom: 1px solid rgba(27, 36, 64, 0.12);
    margin-bottom: 10px;
    padding-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(27, 36, 64, 0.72);
}

.revision-glass .rev-color-slot__cap {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(27, 36, 64, 0.45);
}

.revision-glass .rev-color-summary .selected__color_list {
    align-items: stretch;
    width: 100%;
}

.revision-glass .rev-color-placeholder,
.revision-glass .rev-color-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: var(--glass-radius-sm, 12px);
    background: rgba(255, 255, 255, 0.45);
    border: 1px dashed rgba(27, 36, 64, 0.16);
}

.revision-glass .rev-color-pick {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(31, 45, 90, 0.06);
}

.revision-glass .rev-color-placeholder__swatch,
.revision-glass .rev-color-pick__swatch {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(27, 36, 64, 0.14);
    background: repeating-linear-gradient(
        -45deg,
        rgba(27, 36, 64, 0.06),
        rgba(27, 36, 64, 0.06) 4px,
        rgba(255, 255, 255, 0.4) 4px,
        rgba(255, 255, 255, 0.4) 8px
    );
}

.revision-glass .rev-color-pick__swatch.checkbox_color_list {
    width: 36px;
    height: 36px;
    margin: 0;
}

.revision-glass .rev-color-placeholder__label,
.revision-glass .rev-color-pick__name {
    flex: 1 1 auto;
    font-size: 0.86rem;
    color: #243156;
}

.revision-glass .rev-color-placeholder__label {
    color: rgba(27, 36, 64, 0.45);
    font-style: italic;
}

.revision-glass .rev-color-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(224, 85, 107, 0.12);
    color: #e0556b;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--glass-transition), transform var(--glass-transition);
}

.revision-glass .rev-color-remove:hover {
    background: rgba(224, 85, 107, 0.22);
    transform: scale(1.06);
}

@media (max-width: 991.98px) {
    .revision-glass .rev-color-summary {
        position: static;
        margin-top: 16px;
    }
}

@media (max-width: 575.98px) {
    .revision-glass .rev-color-picker.glass-card,
    .revision-glass .rev-color-summary.glass-card {
        padding: 16px;
    }
    .revision-glass .rev-color-swatch.checkbox_color_list {
        width: 56px;
        height: 56px;
    }
    .revision-glass .rev-color-stage {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .revision-glass .rev-color-stage,
    .revision-glass .rev-color-swatch,
    .revision-glass .rev-color-remove {
        transition: none;
    }
    .revision-glass .rev-color-stage:hover:not(:disabled),
    .revision-glass .rev-color-stage.is-active,
    .revision-glass .rev-color-swatch:hover {
        transform: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .revision-glass .rev-color-picker.glass-card,
    .revision-glass .rev-color-summary.glass-card,
    .revision-glass .rev-color-stage {
        background: #ffffff;
    }
}

/* ---------------------------------------------------------------------------
   23.7 Logos & Reference Images — dual upload cards (designs vs logos)
   Preserves: .appended_*_holder, .append_upload_*, #fileUpload_*, name design[] /
   logo[], .trigger_upload_*, .logo_dropzone / .design_dropzone, #gallery_btn /
   #variation_btn, hidden #upload_designs / #upload_logos.
   --------------------------------------------------------------------------- */
.revision-glass .rev-upload-step {
    margin-top: 4px;
}

.revision-glass .rev-upload-step__head {
    margin-bottom: 18px;
}

.revision-glass .rev-upload-step__title {
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 600;
    color: #1b2440;
}

.revision-glass .rev-upload-step__lead {
    margin: 8px 0 0;
    max-width: 54rem;
    color: rgba(27, 36, 64, 0.62);
    font-size: 0.95rem;
    line-height: 1.5;
}

.revision-glass .rev-upload-step__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.revision-glass .rev-upload-action {
    border-radius: 999px !important;
    padding: 0.45rem 1.1rem !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(60, 68, 177, 0.18);
    transition: transform var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease);
}

.revision-glass .rev-upload-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(60, 68, 177, 0.26);
}

.revision-glass .rev-upload-tips {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: var(--glass-radius, 16px);
    border: 1px solid rgba(60, 68, 177, 0.14);
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.10), rgba(255, 255, 255, 0.55));
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
}

.revision-glass .rev-upload-tips::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    pointer-events: none;
}

.revision-glass .rev-upload-tips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.revision-glass .rev-upload-tips__list li {
    position: relative;
    padding-left: 14px;
    font-size: 0.86rem;
    line-height: 1.4;
    color: rgba(27, 36, 64, 0.72);
}

.revision-glass .rev-upload-tips__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--glass-primary, #3c44b1);
    box-shadow: 0 0 0 3px rgba(60, 68, 177, 0.12);
}

.revision-glass .rev-upload-tips__list strong {
    color: #1b2440;
    font-weight: 600;
}

.revision-glass .rev-upload-grid {
    margin-left: -10px;
    margin-right: -10px;
}

.revision-glass .rev-upload-col {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 18px;
}

.revision-glass .rev-upload-card.glass-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 20px 20px 22px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-lg, 20px);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease);
}

.revision-glass .rev-upload-card.glass-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent);
    opacity: 0.85;
}

.revision-glass .rev-upload-card.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-card-shadow-hover);
}

.revision-glass .rev-upload-card[data-upload-kind="design"] {
    border-color: rgba(60, 68, 177, 0.18);
}

.revision-glass .rev-upload-card[data-upload-kind="logo"] {
    border-color: rgba(224, 85, 107, 0.22);
}

.revision-glass .rev-upload-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.revision-glass .rev-upload-card__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, #5a66d6, #3c44b1);
    box-shadow: 0 4px 12px rgba(60, 68, 177, 0.28);
}

.revision-glass .rev-upload-card[data-upload-kind="logo"] .rev-upload-card__badge {
    background: linear-gradient(145deg, #e8788a, #c94a5e);
    box-shadow: 0 4px 12px rgba(201, 74, 94, 0.28);
}

.revision-glass .rev-upload-card__titles {
    min-width: 0;
}

.revision-glass .rev-upload-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1b2440;
    letter-spacing: 0.01em;
}

.revision-glass .rev-upload-card__subtitle {
    margin: 2px 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(27, 36, 64, 0.48);
}

.revision-glass .rev-upload-card__hint {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(27, 36, 64, 0.62);
}

.revision-glass .rev-upload-card__hint em {
    font-style: normal;
    font-weight: 600;
    color: #1b2440;
}

.revision-glass .rev-upload-card__body {
    position: relative;
    z-index: 1;
}

.revision-glass .appended_design_holder,
.revision-glass .appended_logo_holder {
    margin-left: -6px;
    margin-right: -6px;
}

.revision-glass .appended_design_holder > [class*="col-"],
.revision-glass .appended_logo_holder > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
}

.revision-glass .rev-upload-dropzone.dropzone,
.revision-glass .logo_dropzone.dropzone,
.revision-glass .design_dropzone.dropzone {
    position: relative;
    min-height: 168px;
    border-radius: 16px;
    border: 1.5px dashed rgba(60, 68, 177, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(108, 160, 255, 0.08)),
        rgba(248, 250, 255, 0.7);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: border-color var(--glass-transition, 0.2s ease),
                background-color var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease),
                transform var(--glass-transition, 0.2s ease);
    overflow: hidden;
}

.revision-glass .rev-upload-card[data-upload-kind="logo"] .rev-upload-dropzone.dropzone,
.revision-glass .logo_dropzone.dropzone {
    border-color: rgba(224, 85, 107, 0.35);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(224, 85, 107, 0.07)),
        rgba(255, 248, 250, 0.72);
}

.revision-glass .rev-upload-dropzone.dropzone:hover,
.revision-glass .rev-upload-dropzone.dropzone.is-dragover {
    border-color: rgba(60, 68, 177, 0.62);
    box-shadow: 0 0 0 4px rgba(60, 68, 177, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.revision-glass .rev-upload-card[data-upload-kind="logo"] .rev-upload-dropzone.dropzone:hover,
.revision-glass .rev-upload-card[data-upload-kind="logo"] .rev-upload-dropzone.dropzone.is-dragover {
    border-color: rgba(201, 74, 94, 0.65);
    box-shadow: 0 0 0 4px rgba(224, 85, 107, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.revision-glass .rev-upload-dropzone .fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.revision-glass .rev-upload-dropzone .upload_icon_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 168px;
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.revision-glass .rev-upload-dropzone .upload_icon_box .material-icons {
    font-size: 34px;
    line-height: 1;
    color: var(--glass-primary, #3c44b1);
    margin: 0 !important;
    padding: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 4px 14px rgba(31, 45, 90, 0.10);
    transition: transform var(--glass-transition, 0.2s ease);
}

.revision-glass .rev-upload-card[data-upload-kind="logo"] .upload_icon_box .material-icons {
    color: #c94a5e;
}

.revision-glass .rev-upload-dropzone.dropzone:hover .upload_icon_box .material-icons {
    transform: translateY(-2px);
}

.revision-glass .rev-upload-dropzone .upload_icon_box p {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: #1b2440;
}

.revision-glass .rev-upload-dropzone__meta {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(27, 36, 64, 0.5);
}

.revision-glass .logo_dropzone.dropzone,
.revision-glass .design_dropzone.dropzone,
.revision-glass .rev-upload-thumb.dropzone {
    min-height: 140px;
    border-style: solid;
    border-width: 1px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.revision-glass .logo_dropzone .upload_icon_box,
.revision-glass .design_dropzone .upload_icon_box {
    min-height: 140px;
    opacity: 0;
    pointer-events: none;
}

.revision-glass .logo_dropzone .cancelBtn,
.revision-glass .design_dropzone .cancelBtn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: rgba(27, 36, 64, 0.72);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: background var(--glass-transition, 0.2s ease), transform var(--glass-transition, 0.2s ease);
}

.revision-glass .logo_dropzone .cancelBtn:hover,
.revision-glass .design_dropzone .cancelBtn:hover {
    background: rgba(201, 74, 94, 0.92);
    transform: translateY(-1px);
}

/* Non-image upload preview (PDF / vector / font / zip) */
.revision-glass .rev-upload-thumb.rev-upload-thumb--file,
.revision-glass .rev-upload-thumb.is-file-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(108, 160, 255, 0.12)),
        rgba(248, 250, 255, 0.88) !important;
    background-image: none !important;
}

.revision-glass .rev-upload-card[data-upload-kind="logo"] .rev-upload-thumb.rev-upload-thumb--file,
.revision-glass .logo_dropzone.rev-upload-thumb--file {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(224, 85, 107, 0.10)),
        rgba(255, 248, 250, 0.9) !important;
}

.revision-glass .rev-upload-file-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 18px 12px 36px;
    text-align: center;
    pointer-events: none;
}

.revision-glass .rev-upload-file-badge .material-icons {
    font-size: 28px;
    line-height: 1;
    color: var(--glass-primary, #3c44b1);
    padding: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 4px 12px rgba(31, 45, 90, 0.10);
}

.revision-glass .rev-upload-card[data-upload-kind="logo"] .rev-upload-file-badge .material-icons,
.revision-glass .logo_dropzone .rev-upload-file-badge .material-icons {
    color: #c94a5e;
}

.revision-glass .rev-upload-file-badge__ext {
    display: inline-block;
    margin-top: 2px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1b2440;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(60, 68, 177, 0.18);
}

.revision-glass .rev-upload-file-badge__name {
    display: block;
    max-width: 100%;
    padding: 0 6px;
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(27, 36, 64, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.revision-glass .rev-upload-widget-file {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid rgba(60, 68, 177, 0.18);
    background: rgba(248, 250, 255, 0.9);
    vertical-align: top;
}

.revision-glass .rev-upload-widget-file .material-icons {
    font-size: 28px;
    color: var(--glass-primary, #3c44b1);
}

.revision-glass .rev-upload-widget-file span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #1b2440;
}


.revision-glass .rev-upload-modal .modal-content {
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-lg, 20px);
    background-color: rgba(255, 255, 255, 0.92);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--glass-card-shadow-hover);
    overflow: hidden;
}

.revision-glass .rev-upload-modal .modal-header,
.revision-glass .rev-upload-modal .modal-footer {
    border-color: rgba(31, 45, 90, 0.08);
    background: transparent;
}

.revision-glass .rev-upload-modal .modal-title {
    font-weight: 600;
    color: #1b2440;
}

@media (max-width: 767.98px) {
    .revision-glass .rev-upload-tips__list {
        flex-direction: column;
        gap: 8px;
    }

    .revision-glass .rev-upload-card.glass-card {
        padding: 16px;
    }

    .revision-glass .rev-upload-dropzone.dropzone {
        min-height: 148px;
    }

    /* Variation modal (#variation_modal) — content is server-rendered raw
       h1s per variation group; keep them from towering over the picker. */
    .revision-glass .rev-upload-modal .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }
    .revision-glass .rev-upload-modal .modal-body h1,
    .revision-glass .rev-upload-modal .modal-body h2 {
        font-size: 1.05rem;
        font-weight: 600;
        margin: 0 0 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .revision-glass .rev-upload-card.glass-card,
    .revision-glass .rev-upload-action,
    .revision-glass .rev-upload-dropzone.dropzone,
    .revision-glass .rev-upload-dropzone .upload_icon_box .material-icons,
    .revision-glass .logo_dropzone .cancelBtn,
    .revision-glass .design_dropzone .cancelBtn {
        transition: none;
    }

    .revision-glass .rev-upload-card.glass-card:hover,
    .revision-glass .rev-upload-action:hover,
    .revision-glass .rev-upload-dropzone.dropzone:hover {
        transform: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .revision-glass .rev-upload-card.glass-card,
    .revision-glass .rev-upload-tips,
    .revision-glass .rev-upload-modal .modal-content {
        background: #ffffff;
    }
}

/* ---------------------------------------------------------------------------
   23.8 Instructions — design notes for createDesignRequest (name=description)
   --------------------------------------------------------------------------- */
.revision-glass .rev-instructions-step {
    margin-top: 4px;
    max-width: 52rem;
}

.revision-glass .rev-instructions-step__head {
    margin-bottom: 18px;
}

.revision-glass .rev-instructions-step__title {
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 600;
    color: #1b2440;
}

.revision-glass .rev-instructions-step__lead {
    margin: 8px 0 0;
    max-width: 46rem;
    color: rgba(27, 36, 64, 0.62);
    font-size: 0.95rem;
    line-height: 1.5;
}

.revision-glass .rev-instructions-tips {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: var(--glass-radius, 16px);
    border: 1px solid rgba(60, 68, 177, 0.14);
    background: linear-gradient(135deg, rgba(108, 160, 255, 0.10), rgba(255, 255, 255, 0.55));
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
}

.revision-glass .rev-instructions-tips::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    pointer-events: none;
}

.revision-glass .rev-instructions-tips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.revision-glass .rev-instructions-tips__list li {
    position: relative;
    flex: 0 1 14rem;
    padding-left: 14px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(27, 36, 64, 0.72);
}

.revision-glass .rev-instructions-tips__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--glass-primary, #3c44b1);
    box-shadow: 0 0 0 3px rgba(60, 68, 177, 0.12);
}

.revision-glass .rev-instructions-tips__list strong {
    color: #1b2440;
    font-weight: 600;
}

.revision-glass .rev-instructions-card.glass-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 20px 22px 18px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-lg, 20px);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
}

.revision-glass .rev-instructions-card.glass-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
}

.revision-glass .rev-instructions-card__label {
    display: block;
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(27, 36, 64, 0.72);
}

.revision-glass .rev-instructions-textarea.form-control {
    width: 100%;
    min-height: 11rem;
    padding: 14px 16px;
    resize: vertical;
    border: 1px solid rgba(31, 45, 90, 0.14);
    border-radius: var(--glass-radius, 16px);
    background: rgba(255, 255, 255, 0.72);
    color: #1b2440;
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
                0 1px 2px rgba(31, 45, 90, 0.04);
    transition: border-color var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease),
                background-color var(--glass-transition, 0.2s ease);
}

.revision-glass .rev-instructions-textarea.form-control::placeholder {
    color: rgba(27, 36, 64, 0.42);
}

.revision-glass .rev-instructions-textarea.form-control:hover {
    border-color: rgba(60, 68, 177, 0.28);
    background: rgba(255, 255, 255, 0.88);
}

.revision-glass .rev-instructions-textarea.form-control:focus {
    outline: none;
    border-color: rgba(60, 68, 177, 0.55);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
                0 0 0 3px rgba(108, 160, 255, 0.22);
}

.revision-glass .rev-instructions-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 12px;
}

.revision-glass .rev-instructions-card__hint {
    margin: 0;
    flex: 1 1 16rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(27, 36, 64, 0.55);
}

.revision-glass .rev-instructions-card__count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(27, 36, 64, 0.48);
    font-variant-numeric: tabular-nums;
}

.revision-glass .rev-instructions-card__count.is-near-limit {
    color: var(--glass-primary, #3c44b1);
}

@media (max-width: 767.98px) {
    .revision-glass .rev-instructions-tips__list {
        flex-direction: column;
        gap: 10px;
    }

    .revision-glass .rev-instructions-tips__list li {
        flex: 0 0 auto;
        width: 100%;
    }

    .revision-glass .rev-instructions-card.glass-card {
        padding: 16px;
    }

    .revision-glass .rev-instructions-textarea.form-control {
        min-height: 9.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .revision-glass .rev-instructions-textarea.form-control {
        transition: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .revision-glass .rev-instructions-card.glass-card,
    .revision-glass .rev-instructions-tips {
        background: #ffffff;
    }

    .revision-glass .rev-instructions-textarea.form-control {
        background: #f7f8fc;
    }
}

/* ---------------------------------------------------------------------------
   23.9 Review — createDesignRequest summary (design_name, order_due_date)
   --------------------------------------------------------------------------- */
.revision-glass .rev-review-step {
    margin-top: 4px;
}

.revision-glass .rev-review-step__head {
    margin-bottom: 20px;
}

.revision-glass .rev-review-step__title {
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 600;
    color: #1b2440;
}

.revision-glass .rev-review-step__lead {
    margin: 8px 0 0;
    max-width: 46rem;
    color: rgba(27, 36, 64, 0.62);
    font-size: 0.92rem;
    line-height: 1.6;
}

.revision-glass .rev-review-legacy-chips {
    display: none !important;
}

.revision-glass .rev-review-grid {
    margin-left: -10px;
    margin-right: -10px;
}

.revision-glass .rev-review-grid > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.revision-glass .rev-review-main,
.revision-glass .rev-review-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.revision-glass .rev-review-card.glass-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 18px 20px 16px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-lg, 20px);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
    transition: transform var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease);
}

.revision-glass .rev-review-card.glass-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
}

.revision-glass .rev-review-card.glass-card:hover {
    box-shadow: var(--glass-card-shadow-hover, 0 12px 32px rgba(31, 45, 90, 0.12));
}

.revision-glass .rev-review-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.revision-glass .rev-review-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1b2440;
}

.revision-glass .rev-review-card__hint {
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(27, 36, 64, 0.55);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.revision-glass .rev-review-edit {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.28rem 0.75rem;
    border: 1px solid rgba(60, 68, 177, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--glass-primary, #3c44b1);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--glass-transition, 0.2s ease),
                border-color var(--glass-transition, 0.2s ease),
                transform var(--glass-transition, 0.2s ease);
}

.revision-glass .rev-review-edit:hover {
    background: rgba(108, 160, 255, 0.16);
    border-color: rgba(60, 68, 177, 0.4);
    transform: translateY(-1px);
}

.revision-glass .rev-review-table-wrap {
    overflow-x: auto;
    margin: 0 -4px;
    padding: 0 4px;
    border: none;
    background: transparent;
}

.revision-glass .rev-review-table-wrap .review__table,
.revision-glass .rev-review-table-wrap .rev-qty-table {
    background: transparent;
}

.revision-glass .rev-review-table-wrap .pq_thead th {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(27, 36, 64, 0.55);
    border-bottom-color: rgba(31, 45, 90, 0.1);
    background: transparent;
}

/* Soften product description block on Review only (Quantity step keeps §23.x sizes) */
.revision-glass .rev-review-step .pq_desc {
    font-size: 0.8125rem; /* 13px; was inherited ~14–16px body feel */
    font-weight: 400;
    line-height: 1.45;
    color: rgba(27, 36, 64, 0.72);
}

.revision-glass .rev-review-step .pq_desc > p {
    margin-bottom: 0.25rem;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}

.revision-glass .rev-review-step .pq_desc .rev-qty-name,
.revision-glass .rev-review-step .pq_desc > p.fw-600.mb-1:first-child {
    font-size: 0.875rem; /* 14px; was 16px via .rev-qty-name */
    font-weight: 500; /* was 600 via .fw-600 */
    line-height: 1.35;
    color: #1c2333;
}

.revision-glass .rev-review-step .pq_desc .pq_price {
    font-size: 0.8125rem; /* 13px; was 14px */
    font-weight: 400;
    color: #5a647c;
}

.revision-glass .rev-review-step .pq_desc .pq_price .fw-600,
.revision-glass .rev-review-step .pq_desc .pq_price .price_per_piece_unit,
.revision-glass .rev-review-step .pq_desc .pq_price .text-success {
    font-weight: 500; /* was 600 */
}

.revision-glass .rev-review-step .pq_desc .rev-qty-min,
.revision-glass .rev-review-step .pq_desc .rev-qty-tier-hint,
.revision-glass .rev-review-step .pq_desc .cart_count {
    font-size: 0.75rem; /* 12px; was 13px */
    font-weight: 400;
    color: #5a647c;
}

.revision-glass .rev-review-step .pq_desc .quantity_to_div {
    font-weight: 500; /* was 700 */
}

.revision-glass .rev-review-instructions__body {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #1b2440;
    font-weight: 500;
}

.revision-glass .rev-review-instructions__body.is-empty,
.revision-glass .rev-review-instructions__body:empty {
    display: none;
}

.revision-glass .rev-review-empty {
    display: none;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--glass-radius, 14px);
    border: 1px dashed rgba(60, 68, 177, 0.22);
    background: rgba(248, 250, 255, 0.72);
    color: rgba(27, 36, 64, 0.5);
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: center;
}

.revision-glass .rev-review-empty.is-visible {
    display: block;
}

.revision-glass .rev-review-empty--inline {
    padding: 10px 12px;
    font-size: 0.8rem;
}

.revision-glass .rev-review-empty--media {
    margin-top: 4px;
}

.revision-glass .rev-review-colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.revision-glass .rev-review-color-slot .color_title {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(27, 36, 64, 0.55);
}

.revision-glass .rev-review-color-slot .selected__color_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
}

/* Edge-to-edge circular swatches (no white pad between color fill & outer ring) */
.revision-glass .rev-review-colors .rev-color-pick {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    margin: 0;
    gap: 0;
    border-radius: 50%;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.revision-glass .rev-review-colors .rev-color-pick .custom-control,
.revision-glass .rev-review-colors .rev-color-pick .checkbox_color_list {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(27, 36, 64, 0.14);
    box-shadow: 0 2px 8px rgba(31, 45, 90, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    background-clip: border-box;
    overflow: hidden;
}

.revision-glass .rev-review-colors .rev-color-pick .custom-control-input {
    display: none;
}

.revision-glass .rev-review-colors .rev-color-pick .custom-control-label {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.08) 55%, transparent 72%);
    visibility: visible !important;
    cursor: default;
}

.revision-glass .rev-review-colors .rev-color-pick .custom-control-label::before,
.revision-glass .rev-review-colors .rev-color-pick .custom-control-label::after {
    display: none !important;
}

.revision-glass .rev-review-media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
}

.revision-glass .rev-review-media > img,
.revision-glass .widget_logos > img,
.revision-glass .widget_design > img {
    width: 72px;
    height: 72px;
    margin: 0 !important;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(60, 68, 177, 0.14);
    box-shadow: 0 4px 12px rgba(31, 45, 90, 0.08);
}

.revision-glass .rev-review-media .rev-upload-widget-file,
.revision-glass .widget_logos .rev-upload-widget-file,
.revision-glass .widget_design .rev-upload-widget-file {
    width: 72px;
    height: 72px;
    margin: 0 !important;
    border-radius: 12px;
}

.revision-glass .rev-review-variations {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.revision-glass .rev-review-variations .variation,
.revision-glass .variation_div .variation {
    width: 100%;
    max-width: 160px;
    height: auto;
    border: 1px solid rgba(60, 68, 177, 0.16);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
}

.revision-glass .rev-review-field {
    margin-bottom: 14px;
}

.revision-glass .rev-review-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(27, 36, 64, 0.7);
}

.revision-glass .rev-review-field__label .req {
    color: #c94a5e;
}

.revision-glass .rev-review-input.form-control {
    border: 1px solid rgba(31, 45, 90, 0.14);
    border-radius: var(--glass-radius, 14px);
    background: rgba(255, 255, 255, 0.78);
    color: #1b2440;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: border-color var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease);
}

.revision-glass .rev-review-input.form-control:focus {
    outline: none;
    border-color: rgba(60, 68, 177, 0.55);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(108, 160, 255, 0.22);
}

.revision-glass .rev-review-estimate {
    background:
        linear-gradient(160deg, rgba(108, 160, 255, 0.14), rgba(255, 255, 255, 0.58)),
        var(--glass-bg-card);
}

.revision-glass .rev-review-estimate .review_summary {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.revision-glass .rev-review-estimate__title,
.revision-glass .rev-review-estimate .rev-review-card__title {
    margin: 0 0 16px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glass-primary, #3c44b1);
}

.revision-glass .rev-review-estimate__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 10px 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: rgba(27, 36, 64, 0.72);
}

.revision-glass .rev-review-estimate__row + .rev-review-estimate__row {
    border-top: 1px solid rgba(31, 45, 90, 0.06);
}

.revision-glass .rev-review-estimate__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(27, 36, 64, 0.58);
}

.revision-glass .rev-review-estimate__row--total {
    padding-top: 2px;
    padding-bottom: 12px;
}

.revision-glass .rev-review-estimate__row--total .rev-review-estimate__label {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(27, 36, 64, 0.78);
}

.revision-glass .rev-review-estimate__row .t_price {
    flex: 0 0 auto;
    font-size: clamp(1.15rem, 2.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #1b2440;
}

.revision-glass .rev-review-estimate__row .due_today,
.revision-glass .rev-review-estimate__row .text-success,
.revision-glass .rev-review-estimate__free {
    flex: 0 0 auto;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1f9d57 !important;
}

.revision-glass .rev-review-estimate__free {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.revision-glass .rev-review-estimate__row .due_today {
    font-size: 1.02rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.revision-glass .rev-review-estimate__note {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(31, 45, 90, 0.08);
    font-size: 0.78rem;
    line-height: 1.65;
    color: rgba(27, 36, 64, 0.5);
    font-weight: 400;
    letter-spacing: 0.01em;
}

@media (max-width: 991.98px) {
    .revision-glass .rev-review-colors {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .revision-glass .rev-review-card.glass-card {
        padding: 16px;
    }

    .revision-glass .rev-review-card__head {
        flex-direction: column;
        align-items: stretch;
    }

    .revision-glass .rev-review-edit {
        align-self: flex-start;
    }

    .revision-glass .rev-review-table-wrap {
        overflow-x: visible;
    }

    .revision-glass .rev-review-table-wrap .pq_thead {
        display: none;
    }

    /* Legacy .review__table { min-width: 550px } (new_css/custom.css) forces
       the table wider than the phone viewport even once stacked — neutralize
       it here so the card can actually shrink to 100% width. */
    .revision-glass .rev-review-table-wrap .review__table,
    .revision-glass .rev-review-table-wrap .rev-qty-table {
        min-width: 0;
    }

    .revision-glass .rev-review-table-wrap .rev-qty-table tbody td,
    .revision-glass .rev-review-table-wrap .rev-qty-table tbody th {
        display: block;
        width: 100%;
    }

    .revision-glass .rev-review-grid > [class*="col-"] {
        margin-bottom: 16px;
    }

    .revision-glass .rev-review-grid > [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .revision-glass .rev-review-card.glass-card,
    .revision-glass .rev-review-edit,
    .revision-glass .rev-review-input.form-control {
        transition: none;
    }

    .revision-glass .rev-review-edit:hover {
        transform: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .revision-glass .rev-review-card.glass-card,
    .revision-glass .rev-review-estimate {
        background: #ffffff;
    }

    .revision-glass .rev-review-input.form-control {
        background: #f7f8fc;
    }
}

/* ============================================================================
   25. DESIGN REQUEST CHAT (design_request_chat.blade.php) — .chat-glass
   ----------------------------------------------------------------------------
   Frosted Liquid Glass chat thread for customer ↔ designer conversations.
   Real-time via WebSocket + polling fallback; appearance + client JS only.
   --------------------------------------------------------------------------- */

.chat-glass.content-inner {
    padding: clamp(12px, 2vw, 22px) clamp(8px, 1.6vw, 18px) clamp(18px, 2.4vw, 28px) !important;
    background:
        radial-gradient(1100px 460px at 8% -8%, rgba(108, 160, 255, 0.12), transparent 58%),
        radial-gradient(900px 420px at 108% 2%, rgba(224, 85, 107, 0.08), transparent 55%),
        linear-gradient(180deg, #eef2fb 0%, #f6f8fe 100%) !important;
    min-height: calc(100vh - 120px);
}

.chat-glass,
.chat-glass p, .chat-glass a, .chat-glass span, .chat-glass small,
.chat-glass b, .chat-glass strong, .chat-glass label, .chat-glass time,
.chat-glass h1, .chat-glass h2, .chat-glass h3,
.chat-glass h4, .chat-glass h5, .chat-glass h6,
.chat-glass .btn, .chat-glass input, .chat-glass button, .chat-glass textarea {
    font-family: 'Poppins', sans-serif !important;
}

.chat-glass-panel {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px);
    max-height: calc(100vh - 120px);
    overflow: hidden;
    position: relative;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius);
}

.chat-glass-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.5), transparent 42%);
    opacity: 0.5;
    z-index: 0;
}

.chat-glass__header,
.chat-glass__thread,
.chat-glass__composer {
    position: relative;
    z-index: 1;
}

/* --- Header --- */
.chat-glass__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 18px;
    padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 22px);
    border-bottom: 1px solid rgba(76, 129, 222, 0.14);
    border-radius: var(--glass-radius) var(--glass-radius) 0 0;
}

/* Light FLG chrome — overrides dark .glass-surface defaults for readable header */
.chat-glass__header.glass-surface {
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(108, 160, 255, 0.14), transparent 55%),
        radial-gradient(90% 65% at 100% 0%, rgba(76, 129, 222, 0.10), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.62));
    border: none;
    border-bottom: 1px solid rgba(76, 129, 222, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    color: inherit;
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
}

.chat-glass__header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.chat-glass__header-actions {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.chat-glass h1.chat-glass__title {
    margin: 0 0 4px;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.5rem);
    font-weight: 700;
    color: #1c2333;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.chat-glass__submitted {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(31, 45, 90, 0.62);
}

.chat-glass__status {
    display: inline-flex;
    align-items: center;
    margin: 8px 0 0;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(31, 45, 90, 0.52);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(76, 129, 222, 0.14);
}

.chat-glass__status[data-state="connecting"] {
    color: #4c81de;
    background: rgba(76, 129, 222, 0.10);
    border-color: rgba(76, 129, 222, 0.22);
}

.chat-glass__status[data-state="live"] {
    color: #1f9d57;
    background: rgba(31, 157, 87, 0.10);
    border-color: rgba(31, 157, 87, 0.22);
}

.chat-glass__status[data-state="polling"] {
    color: #4c81de;
    background: rgba(76, 129, 222, 0.10);
    border-color: rgba(76, 129, 222, 0.22);
}

.chat-glass__status[data-state="offline"] {
    color: #e0556b;
    background: rgba(224, 85, 107, 0.10);
    border-color: rgba(224, 85, 107, 0.22);
}

/* Connection badge hidden from UI; JS still updates data-state/text (polling/WebSocket unchanged) */
#chat_connection_status.chat-glass__status {
    display: none;
}

/* Back-to-designs — circular glass icon control, mobile-only (desktop keeps sidebar nav) */
.chat-glass__back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--glass-card-border);
    background: var(--glass-bg-card);
    box-shadow: var(--glass-card-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    color: #1f2d5a;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), color var(--glass-transition);
}

.chat-glass__back-btn i {
    font-size: 15px;
    line-height: 1;
    color: inherit;
}

.chat-glass__back-btn:hover,
.chat-glass__back-btn:focus-visible {
    background: var(--glass-pill-active);
    border-color: var(--glass-border-strong);
    color: #2a5298;
    transform: translateY(-1px) scale(1.04);
    text-decoration: none;
    outline: none;
}

/* Preview request — circular glass icon control (matches revision wizard) */
.chat-glass__preview-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--glass-card-border);
    background: var(--glass-bg-card);
    box-shadow: var(--glass-card-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    color: var(--glass-accent);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), border-color var(--glass-transition),
                color var(--glass-transition);
}

.chat-glass__preview-btn .material-icons {
    font-size: 22px;
    line-height: 1;
    color: inherit;
}

.chat-glass__preview-btn:hover,
.chat-glass__preview-btn:focus {
    background: var(--glass-pill-active);
    border-color: var(--glass-border-strong);
    box-shadow: 0 6px 16px rgba(76, 129, 222, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-1px) scale(1.04);
    color: #2a5298;
    text-decoration: none;
    outline: none;
}

.chat-glass__preview-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.35), var(--glass-card-shadow);
}

/* --- Thread --- */
.chat-glass__thread {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(14px, 2vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
}

.chat-glass__thread::-webkit-scrollbar { width: 8px; }
.chat-glass__thread::-webkit-scrollbar-thumb {
    background: rgba(31, 45, 90, 0.18);
    border-radius: 999px;
}

.chat-glass__empty {
    margin: auto;
    text-align: center;
    max-width: 340px;
    padding: 28px 18px;
    color: rgba(31, 45, 90, 0.62);
}

.chat-glass__empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(76, 129, 222, 0.12);
    color: #4c81de;
    font-size: 22px;
}

.chat-glass .chat-glass__empty h2 {
    margin: 0 0 8px;
    font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.1rem);
    font-weight: 700;
    color: #1f2d5a;
}

.chat-glass__empty p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
}

/* --- Message rows --- */
.chat-glass__msg {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 92%;
}

.chat-glass__msg--mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-glass__msg--theirs {
    align-self: flex-start;
}

.chat-glass__avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow: 0 4px 14px rgba(31, 45, 90, 0.12);
}

.chat-glass__bubble-wrap {
    min-width: 0;
    flex: 1;
}

.chat-glass__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 5px;
    font-size: 0.76rem;
    color: rgba(31, 45, 90, 0.62);
}

.chat-glass__msg--mine .chat-glass__meta {
    justify-content: flex-end;
    text-align: right;
}

.chat-glass__meta strong {
    font-weight: 600;
    color: #1f2d5a;
}

.chat-glass__role {
    font-weight: 500;
    color: rgba(31, 45, 90, 0.48);
}

.chat-glass__time {
    font-size: 0.72rem;
    color: rgba(31, 45, 90, 0.42);
}

.chat-glass__time-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.65rem 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(31, 45, 90, 0.45);
    text-align: center;
}

.chat-glass__time-sep::before,
.chat-glass__time-sep::after {
    content: '';
    flex: 1 1 auto;
    max-width: 4.5rem;
    height: 1px;
    background: rgba(31, 45, 90, 0.12);
}

.chat-glass__bubble {
    padding: 12px 16px;
    border-radius: 18px;
    word-break: break-word;
}

/* User/outgoing — soft blue-tinted FLG glass (overrides dark .glass-surface defaults) */
.chat-glass__msg--mine .chat-glass__bubble {
    border-radius: 18px 6px 18px 18px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(108, 160, 255, 0.16), transparent 55%),
        linear-gradient(145deg, rgba(232, 240, 255, 0.92), rgba(219, 231, 252, 0.86)) !important;
    border-color: rgba(76, 129, 222, 0.20) !important;
    box-shadow:
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    color: #1f2d5a;
    -webkit-backdrop-filter: blur(10px) saturate(130%);
            backdrop-filter: blur(10px) saturate(130%);
}

/* Designer/incoming — neutral frosted FLG glass (overrides dark .glass-surface defaults) */
.chat-glass__msg--theirs .chat-glass__bubble {
    border-radius: 6px 18px 18px 18px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.78), transparent 55%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(245, 247, 252, 0.82)) !important;
    border-color: rgba(31, 45, 90, 0.10) !important;
    box-shadow:
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    color: #1f2d5a;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
            backdrop-filter: blur(10px) saturate(120%);
}

.chat-glass__body {
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

.chat-glass__msg--mine .chat-glass__body {
    color: #1f2d5a !important;
}

.chat-glass__msg--mine .chat-glass__body a {
    color: #4c81de !important;
}

.chat-glass__msg--theirs .chat-glass__body,
.chat-glass__msg--theirs .chat-glass__body a {
    color: #1f2d5a !important;
}

.chat-glass__body .chat_image_preview {
    max-width: min(220px, 100%);
    border-radius: 10px;
    margin-top: 4px;
    border: 1px solid rgba(31, 45, 90, 0.10);
}

.chat-glass__body .chat_file_preview {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 120px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(31, 45, 90, 0.10);
    text-decoration: none !important;
    font-size: 0.78rem;
    font-weight: 600;
}

.chat-glass__msg--mine .chat-glass__body .chat_file_preview {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(76, 129, 222, 0.18);
    color: #1f2d5a !important;
}

.chat-glass__msg--mine .chat-glass__body .chat_image_preview {
    border-color: rgba(76, 129, 222, 0.18);
}

.chat-glass__msg--theirs .chat-glass__body .chat_file_preview {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(31, 45, 90, 0.12);
    color: #1f2d5a !important;
}

.chat-glass__msg--theirs .chat-glass__body .chat_image_preview {
    border-color: rgba(31, 45, 90, 0.12);
}

/* --- Composer --- */
.chat-glass__composer {
    flex-shrink: 0;
    padding: 12px clamp(12px, 2vw, 18px) clamp(14px, 2vw, 18px);
    border-top: 1px solid rgba(31, 45, 90, 0.08);
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
}

.chat-glass__composer.is-uploading .chat-glass__composer-form {
    opacity: 0.55;
    pointer-events: none;
}

.chat-glass__uploading {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4c81de;
    margin-bottom: 8px;
}

.chat-glass__composer.is-uploading .chat-glass__uploading {
    display: flex;
}

.chat-glass__composer-form {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: flex-end;
}

.chat-glass__attach-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(31, 45, 90, 0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.55);
    color: #1f2d5a;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.chat-glass__attach-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 45, 90, 0.12);
}

.chat-glass__input {
    width: 100%;
    min-height: 42px;
    max-height: 140px;
    resize: none;
    border: 1px solid rgba(31, 45, 90, 0.14) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    background: rgba(255,255,255,0.72) !important;
    color: #1f2d5a !important;
    box-shadow: inset 0 1px 3px rgba(31, 45, 90, 0.06);
}

.chat-glass__input:focus {
    outline: none;
    border-color: rgba(76, 129, 222, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.14);
}

/* Brand accent pill — light FLG (mirrors designs-card__chat-cta weight) */
.chat-glass .chat-glass__send-btn {
    align-self: flex-end;
    min-height: 42px;
    height: 42px;
    padding: 0 14px 0 12px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid rgba(201, 68, 90, 0.55);
    cursor: pointer;
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%),
        rgba(224, 85, 107, 0.92);
    box-shadow:
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
            backdrop-filter: blur(8px) saturate(150%);
    transition: transform var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease),
                background var(--glass-transition, 0.2s ease);
}

.chat-glass .chat-glass__send-btn i {
    font-size: 11px;
    line-height: 1;
    color: inherit !important;
}

.chat-glass .chat-glass__send-btn:hover:not(:disabled),
.chat-glass .chat-glass__send-btn:focus-visible:not(:disabled) {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%),
        rgba(224, 85, 107, 1);
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(224, 85, 107, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    outline: none;
}

.chat-glass .chat-glass__send-btn:focus-visible:not(:disabled) {
    box-shadow:
        0 0 0 3px rgba(224, 85, 107, 0.28),
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.chat-glass .chat-glass__send-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.chat-glass__composer--closed {
    text-align: center;
    padding: 18px;
}

.chat-glass__composer--closed p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f9d57;
}

.chat-glass__composer--closed i {
    margin-right: 6px;
}

@media (max-width: 767.98px) {
    /* Card no longer needs an internal bounded scroll region — the page itself
       scrolls (see .chat-glass__thread), header stays reachable via sticky,
       and the composer floats fixed above the home indicator. */
    .chat-glass.content-inner {
        padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: 14px !important;
    }

    .chat-glass-panel {
        min-height: 0;
        max-height: none;
        overflow: visible;
        /* backdrop-filter creates a new containing block for position:fixed
           descendants (the composer below) — drop it here so the composer is
           truly pinned to the viewport instead of the panel's own box. */
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }

    .chat-glass-panel::before {
        display: none;
    }

    /* --- Header: sticky just under the fixed app header, back + title + action in one row --- */
    .chat-glass__header {
        position: sticky;
        top: var(--chat-sticky-top, 78px);
        z-index: 5;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        border-radius: var(--glass-radius) var(--glass-radius) 0 0;
    }

    .chat-glass__back-btn {
        display: inline-flex;
        order: 1;
    }

    .chat-glass__header-main {
        order: 2;
        min-width: 0;
        flex: 1 1 auto;
    }

    .chat-glass h1.chat-glass__title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-glass__submitted {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-glass__header-actions {
        order: 3;
        width: auto;
        align-self: center;
        margin-left: 0;
    }

    .chat-glass__preview-btn,
    .chat-glass__back-btn {
        width: 44px;
        height: 44px;
    }

    /* --- Thread: comfortable reading width, room reserved above the fixed composer --- */
    .chat-glass__thread {
        padding: 14px 12px calc(100px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
    }

    .chat-glass__msg {
        max-width: 100%;
        gap: 8px;
    }

    .chat-glass__avatar {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .chat-glass__bubble {
        padding: 10px 13px;
    }

    .chat-glass__meta {
        font-size: 0.72rem;
    }

    /* --- Composer: detach from the card and float fixed above the safe area --- */
    .chat-glass__composer,
    .chat-glass__composer--closed {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10040;
        margin: 0;
        border-radius: 0;
        border-top: 1px solid rgba(31, 45, 90, 0.10);
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 -6px 20px rgba(7, 9, 25, 0.12);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
                backdrop-filter: blur(16px) saturate(150%);
    }

    /* Lift the composer above the PWA install/iOS-hint banners (matches order editor pattern) */
    body:has(.pwa-install.is-visible) .chat-glass__composer,
    body:has(.pwa-ios-hint.is-visible) .chat-glass__composer,
    body:has(.pwa-install.is-visible) .chat-glass__composer--closed,
    body:has(.pwa-ios-hint.is-visible) .chat-glass__composer--closed {
        bottom: 58px;
    }

    .chat-glass__composer-form {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }

    .chat-glass__attach-btn {
        width: 44px;
        height: 44px;
    }

    .chat-glass__input {
        min-height: 44px;
        font-size: 16px !important;
    }

    .chat-glass .chat-glass__send-btn {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 !important;
        border-radius: 50%;
        justify-content: center;
    }

    .chat-glass .chat-glass__send-btn span {
        display: none;
    }

    .chat-glass .chat-glass__send-btn i {
        font-size: 15px;
    }

    .chat-glass__composer--closed {
        padding-top: 14px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

@supports not (position: sticky) {
    @media (max-width: 767.98px) {
        .chat-glass__header {
            position: relative;
            top: 0;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-glass__attach-btn,
    .chat-glass__preview-btn,
    .chat-glass__thread {
        transition: none;
        scroll-behavior: auto;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .chat-glass-panel,
    .chat-glass__composer,
    .chat-glass__header.glass-surface {
        background: #ffffff;
    }

    .chat-glass__preview-btn {
        background: #ffffff;
    }

    .chat-glass__msg--mine .chat-glass__bubble {
        background: #e8f0ff !important;
    }

    .chat-glass__msg--theirs .chat-glass__bubble {
        background: #f5f7fb !important;
    }
}

/* --- Design approval card (chat thread) — scoped to .chat-glass --- */
.chat-glass .xrg-approval-request {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0 2px 12px;
    border-left: 3px solid rgba(47, 191, 113, 0.32);
}

.chat-glass .xrg-approval-request__lead {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1f2d5a;
}

.chat-glass .xrg-approval-request__lead strong {
    font-weight: 700;
}

.chat-glass .xrg-approval-request p:not(.xrg-approval-request__lead) {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.6;
    color: rgba(31, 45, 90, 0.72);
}

.chat-glass .xrg-approval-request p em {
    font-style: normal;
    font-weight: 600;
    color: #1f2d5a;
}

/* Success pill — light FLG accent (mirrors designs-card__chat-cta weight) */
.chat-glass .chat-glass__approve-btn {
    align-self: flex-start;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%),
        rgba(47, 191, 113, 0.92);
    border: 1px solid rgba(31, 157, 87, 0.45);
    box-shadow:
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
            backdrop-filter: blur(8px) saturate(150%);
    transition: transform var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease),
                background var(--glass-transition, 0.2s ease);
}

/* Neutralize legacy liquid-chrome on stored approval messages */
.chat-glass .chat-glass__approve-btn.liquid-chrome {
    height: auto;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    color: #fff !important;
    overflow: visible;
    transform: none;
}
.chat-glass .chat-glass__approve-btn.liquid-chrome::before,
.chat-glass .chat-glass__approve-btn.liquid-chrome::after {
    display: none;
}
.chat-glass .chat-glass__approve-btn.liquid-chrome:hover {
    transform: translateY(-1px);
}

.chat-glass .chat-glass__approve-btn i {
    font-size: 11px;
    line-height: 1;
    color: inherit !important;
}

.chat-glass .chat-glass__approve-btn:hover:not(:disabled),
.chat-glass .chat-glass__approve-btn:focus-visible:not(:disabled) {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%),
        rgba(47, 191, 113, 1);
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(47, 191, 113, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    outline: none;
}

.chat-glass .chat-glass__approve-btn:focus-visible:not(:disabled) {
    box-shadow:
        0 0 0 3px rgba(47, 191, 113, 0.28),
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.chat-glass .chat-glass__approve-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.chat-glass .chat-glass__approve-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: #1f7a45;
    background: rgba(62, 207, 142, 0.10);
    border: 1px solid rgba(47, 191, 113, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.chat-glass .chat-glass__approve-done .fa-check-circle {
    font-size: 11px;
    color: #2fbf71;
}

/* ============================================================================
   26. DESIGN REQUEST PREVIEW (design_request_review.blade.php) — .preview-glass
   ----------------------------------------------------------------------------
   Read-only summary for /previewDesignRequest/{id}. Mirrors revision wizard
   review cards (§23.9) in a standalone page scoped under .preview-glass.
   --------------------------------------------------------------------------- */

.preview-glass.content-inner {
    padding: clamp(12px, 2vw, 22px) clamp(8px, 1.6vw, 18px) clamp(18px, 2.4vw, 28px) !important;
    background:
        radial-gradient(1100px 460px at 8% -8%, rgba(108, 160, 255, 0.12), transparent 58%),
        radial-gradient(900px 420px at 108% 2%, rgba(224, 85, 107, 0.08), transparent 55%),
        linear-gradient(180deg, #eef2fb 0%, #f6f8fe 100%) !important;
    min-height: calc(100vh - 120px);
}

.preview-glass,
.preview-glass p, .preview-glass a, .preview-glass span, .preview-glass small,
.preview-glass dt, .preview-glass dd, .preview-glass li,
.preview-glass h1, .preview-glass h2, .preview-glass h3,
.preview-glass h4, .preview-glass h5, .preview-glass h6 {
    font-family: 'Poppins', sans-serif !important;
}

.preview-glass-shell {
    position: relative;
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    border-radius: var(--glass-radius-lg, 20px);
}

.preview-glass-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 42%);
    opacity: 0.45;
    z-index: 0;
}

.preview-glass__header,
.preview-glass__body {
    position: relative;
    z-index: 1;
}

.preview-glass__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 18px;
    padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 24px);
    border-bottom: 1px solid rgba(76, 129, 222, 0.14);
    border-radius: var(--glass-radius-lg, 20px) var(--glass-radius-lg, 20px) 0 0;
}

/* Light FLG chrome — overrides dark .glass-surface defaults for readable header */
.preview-glass__header.glass-surface {
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(108, 160, 255, 0.14), transparent 55%),
        radial-gradient(90% 65% at 100% 0%, rgba(76, 129, 222, 0.10), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(248, 251, 255, 0.68));
    border: none;
    border-bottom: 1px solid rgba(76, 129, 222, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    color: inherit;
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
}

.preview-glass__header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.preview-glass__header-actions {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.preview-glass__kicker {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(76, 129, 222, 0.88);
}

.preview-glass h1.preview-glass__title {
    margin: 0;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #1f2d5a;
}

.preview-glass__meta {
    margin: 8px 0 0;
    font-size: 0.86rem;
    color: rgba(31, 45, 90, 0.62);
}

.preview-glass__meta-sep {
    margin: 0 0.35rem;
    opacity: 0.55;
}

.preview-glass__status {
    font-weight: 600;
    color: var(--glass-primary, #3c44b1);
}

.preview-glass__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--glass-card-border);
    background: var(--glass-bg-card);
    box-shadow: var(--glass-card-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(120%);
    color: #4c81de;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background var(--glass-transition, 0.2s ease),
                border-color var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease),
                transform var(--glass-transition, 0.2s ease);
}

.preview-glass__back-btn .material-icons {
    font-size: 18px;
}

.preview-glass__back-btn:hover,
.preview-glass__back-btn:focus {
    background: rgba(76, 129, 222, 0.10);
    border-color: rgba(76, 129, 222, 0.28);
    box-shadow: 0 6px 16px rgba(76, 129, 222, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
    color: #2a5298;
}

.preview-glass__body {
    padding: clamp(14px, 2vw, 22px) clamp(12px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
}

.preview-glass__grid {
    margin-left: -10px;
    margin-right: -10px;
}

.preview-glass__grid > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.preview-glass__main,
.preview-glass__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preview-glass-card.glass-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 18px 20px 16px;
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-radius-lg, 20px);
    background-color: var(--glass-bg-card);
    background-image: var(--glass-card-sheen);
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
            backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%);
    box-shadow: var(--glass-card-shadow);
}

.preview-glass-card.glass-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
}

.preview-glass-card__head {
    margin-bottom: 14px;
}

.preview-glass-card__title {
    margin: 0;
    font-size: clamp(0.72rem, 0.68rem + 0.25vw, 0.82rem);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f2d5a;
}

.preview-glass-dl {
    margin: 0;
    display: grid;
    gap: 12px;
}

.preview-glass-dl__row {
    display: grid;
    grid-template-columns: minmax(110px, 34%) 1fr;
    gap: 8px 14px;
    align-items: start;
}

.preview-glass-dl dt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(27, 36, 64, 0.55);
}

.preview-glass-dl dd {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #1b2440;
    word-break: break-word;
}

.preview-glass-dl--compact .preview-glass-dl__row {
    grid-template-columns: minmax(90px, 42%) 1fr;
}

.preview-glass-products {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-glass-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(60, 68, 177, 0.12);
    background: rgba(255, 255, 255, 0.55);
}

.preview-glass-product__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(60, 68, 177, 0.12);
    background: #fff;
}

.preview-glass-product__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(60, 68, 177, 0.45);
}

.preview-glass-product__thumb--placeholder .material-icons {
    font-size: 24px;
}

.preview-glass-product__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.preview-glass-product__name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1b2440;
}

.preview-glass-product__package,
.preview-glass-product__qty {
    font-size: 0.78rem;
    color: rgba(27, 36, 64, 0.62);
}

.preview-glass-colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.preview-glass-color-slot__label {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(27, 36, 64, 0.55);
}

.preview-glass-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.preview-glass-color-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 76px;
}

.preview-glass-color-pick__swatch {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(27, 36, 64, 0.14);
    box-shadow: 0 2px 8px rgba(31, 45, 90, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    background-clip: border-box;
}

.preview-glass-color-pick__name {
    font-size: 0.68rem;
    line-height: 1.25;
    text-align: center;
    color: rgba(27, 36, 64, 0.72);
    word-break: break-word;
}

.preview-glass-notes {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(27, 36, 64, 0.82);
    white-space: pre-wrap;
}

.preview-glass-media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preview-glass-media__item,
.preview-glass-media__file {
    display: block;
    text-decoration: none !important;
}

.preview-glass-media__item img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(60, 68, 177, 0.14);
    box-shadow: 0 4px 12px rgba(31, 45, 90, 0.08);
    transition: transform var(--glass-transition, 0.2s ease),
                box-shadow var(--glass-transition, 0.2s ease);
}

.preview-glass-media__item:hover img {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(31, 45, 90, 0.12);
}

.preview-glass-media__file {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    border: 1px solid rgba(60, 68, 177, 0.14);
    background: rgba(255, 255, 255, 0.72);
    color: rgba(27, 36, 64, 0.72);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.preview-glass-media__file .material-icons {
    font-size: 22px;
    color: var(--glass-primary, #3c44b1);
}

.preview-glass-empty {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(27, 36, 64, 0.52);
    font-style: italic;
}

.preview-glass-empty--inline {
    font-size: 0.78rem;
}

.preview-glass-card--meta {
    margin-top: auto;
}

@media (max-width: 991px) {
    .preview-glass__side {
        margin-top: 4px;
    }
}

@media (max-width: 768px) {
    .preview-glass__header {
        flex-direction: column;
        align-items: stretch;
    }

    .preview-glass__header-actions {
        width: 100%;
    }

    .preview-glass__back-btn {
        width: 100%;
        justify-content: center;
    }

    .preview-glass-colors {
        grid-template-columns: 1fr;
    }

    .preview-glass-dl__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preview-glass__back-btn,
    .preview-glass-media__item img {
        transition: none;
    }

    .preview-glass__back-btn:hover,
    .preview-glass-media__item:hover img {
        transform: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .preview-glass-shell,
    .preview-glass-card.glass-card,
    .preview-glass__header.glass-surface,
    .preview-glass__back-btn {
        background: #ffffff;
    }

    .preview-glass-product {
        background: #f7f8fc;
    }
}

/* ===========================================================================
   22. MOBILE POLISH — order editor, orders list, touch + iPad (Jul 2026)
   ---------------------------------------------------------------------------
   Scoped with media queries only — desktop (≥1024px) layout is unchanged.
   Key surfaces: multi-step order editor (#createNotTab), orders list
   (.orders-glass), shipping/payment/review tabs.
   =========================================================================== */

/* --- 22.1 Order editor — page chrome + tab content padding --- */
@media (max-width: 767.98px) {
    .content-inner .order_title {
        margin-bottom: 0.75rem !important;
    }
    .content-inner .order_title .myOrder_title {
        font-size: clamp(0.9rem, 0.82rem + 0.35vw, 1.05rem);
        margin-bottom: 0.25rem;
    }
    .content-inner .order_title h3.fw-600 {
        font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
        margin-bottom: 0.15rem;
    }
    .content-inner .order_title p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
    .order-tabs:has(#createNotTab) .card-body {
        padding: 0.75rem;
    }
    .order-tabs:has(#createNotTab) .tab-content {
        padding: 0.75rem 0.5rem calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    .order-tabs:has(#createNotTab) .new_cart_section .card-body,
    .order-tabs:has(#createNotTab) .design-list .card-body,
    .order-tabs:has(#createNotTab) .roaster-list {
        padding: 1rem !important;
    }
    /* Prevent iOS input zoom — 16px minimum on interactive fields */
    .order-tabs:has(#createNotTab) input,
    .order-tabs:has(#createNotTab) select,
    .order-tabs:has(#createNotTab) textarea,
    .order-tabs:has(#createNotTab) .form-control {
        font-size: 16px !important;
    }
}

/* --- 22.2 Sticky Back / Next bar (phones) --- */
@media (max-width: 767.98px) {
    .order-tabs:has(#createNotTab) .order-step-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10040;
        margin: 0 !important;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
                backdrop-filter: blur(14px) saturate(140%);
        border-top: 1px solid rgba(7, 9, 25, 0.08);
        box-shadow: 0 -6px 24px rgba(7, 9, 25, 0.1);
        gap: 10px;
    }
    /* Lift step nav when PWA install banner is visible */
    body:has(.pwa-install.is-visible) .order-tabs:has(#createNotTab) .order-step-nav,
    body:has(.pwa-ios-hint.is-visible) .order-tabs:has(#createNotTab) .order-step-nav {
        bottom: 58px;
    }
    .order-tabs:has(#createNotTab) .order-step-nav .btn {
        flex: 1 1 0;
        min-height: 44px;
        padding: 0.55rem 1rem;
        font-size: 16px;
        font-weight: 600;
        border-radius: 12px;
    }
    @supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
        .order-tabs:has(#createNotTab) .order-step-nav {
            background: #ffffff;
        }
    }
}

/* --- 22.3 Designs + Roster tables → stacked cards on phones --- */
@media (max-width: 767.98px) {
    .order-tabs:has(#createNotTab) #designs table.table,
    .order-tabs:has(#createNotTab) #roster table.table {
        border: 0;
        margin-top: 1rem !important;
    }
    .order-tabs:has(#createNotTab) #designs table.table thead,
    .order-tabs:has(#createNotTab) #roster table.table thead {
        display: none;
    }
    .order-tabs:has(#createNotTab) #designs table.table tbody,
    .order-tabs:has(#createNotTab) #roster table.table tbody {
        display: block;
    }
    .order-tabs:has(#createNotTab) #designs table.table tr,
    .order-tabs:has(#createNotTab) #roster table.table tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid rgba(7, 9, 25, 0.1);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 4px 14px rgba(7, 9, 25, 0.06);
        overflow: hidden;
    }
    .order-tabs:has(#createNotTab) #designs table.table td,
    .order-tabs:has(#createNotTab) #roster table.table td {
        display: block;
        width: 100% !important;
        border: 0 !important;
        padding: 12px 14px !important;
    }
    .order-tabs:has(#createNotTab) #roster table.table td + td {
        border-top: 1px solid rgba(7, 9, 25, 0.06) !important;
        padding-top: 10px !important;
    }
    .order-tabs:has(#createNotTab) #designs #design_detail,
    .order-tabs:has(#createNotTab) #roster table.table .d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
    .order-tabs:has(#createNotTab) .roaster-list h4.fw-600 {
        font-size: 1.05rem;
    }
    .order-tabs:has(#createNotTab) .roaster-list > .d-flex span {
        display: block;
        line-height: 1.45;
    }
    .order-tabs:has(#createNotTab) .roaster-list .btn-info {
        margin-left: 0 !important;
        margin-top: 10px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .order-tabs:has(#createNotTab) #designs .btn-outline-first {
        width: 100%;
        min-height: 44px;
        margin-top: 0.5rem;
    }
}

/* --- 22.4 Products step — cart rows stack cleanly --- */
@media (max-width: 767.98px) {
    .order-tabs:has(#createNotTab) .calculator_row .col-md-3,
    .order-tabs:has(#createNotTab) .calculator_row .col-md-9,
    .order-tabs:has(#createNotTab) .calculator_row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .order-tabs:has(#createNotTab) .calculator_row .col-md-6.text-right {
        text-align: left !important;
        margin-top: 0.5rem;
    }
    .order-tabs:has(#createNotTab) .cart_img {
        margin-bottom: 0.75rem;
    }
    .order-tabs:has(#createNotTab) .cart_img img.edit_produt_img {
        max-height: 120px;
        width: auto;
        object-fit: contain;
    }
    .order-tabs:has(#createNotTab) .btn-outline-first.btn-block {
        min-height: 44px;
        margin: 0.75rem 0 0 !important;
    }
    .order-tabs:has(#createNotTab) .shopping_cart .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- 22.5 Shipping + Payment — mobile polish --- */
@media (max-width: 767.98px) {
    /* ---- Shipping ---- */
    .shipping-glass > .bg-lightgray > .card.card-box > .card-body > .row > .col-sm-12.p-4 {
        padding: 1rem !important;
    }
    .shipping-glass h4.fw-600 {
        font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.1rem);
    }
    .shipping-glass .production_method {
        padding: 12px 14px;
        margin-bottom: 10px;
        border-radius: 12px;
    }
    .shipping-glass .production_method .custom-control-label {
        padding-left: 2rem !important;
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        line-height: 1.35;
        font-size: 14px;
        font-weight: 600;
    }
    .shipping-glass .production_method .custom-control-label::before,
    .shipping-glass .production_method .custom-control-label::after {
        margin-left: 0 !important;
        left: 0;
        top: 0.2rem;
    }
    .shipping-glass .production_method .custom-control-label span {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #5a6072;
        line-height: 1.4;
    }
    .shipping-glass .addr-card {
        padding: 14px;
    }
    .shipping-glass .addr-text {
        font-size: 14px;
        line-height: 1.45;
    }
    .shipping-glass .addr-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .shipping-glass .addr-actions .glass-pill-btn {
        min-height: 44px;
        justify-content: center;
    }
    .shipping-glass .addr-actions .glass-pill-btn.primary {
        flex: 1 1 100%;
    }
    .shipping-glass .addr-actions .glass-pill-btn.ghost {
        flex: 1 1 calc(50% - 4px);
    }
    .shipping-glass .price_summry .final_prices_to_appends {
        padding: 14px !important;
    }

    /* ---- Payment ---- */
    .payment-glass .col-md-9,
    .payment-glass .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .payment-glass .main-old-col.col-sm-6,
    .payment-glass .main-new-col.col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100% !important;
        padding: 0 !important;
    }
    .payment-glass .form-row.mt-5:has(.main-new-col) {
        align-items: stretch;
    }
    .payment-glass .main-new-col.col-sm-6 {
        align-self: auto;
        margin-top: 12px;
    }
    .payment-glass .main-old-col label[for="depositPayment"] {
        font-size: 13px;
        line-height: 1.35;
        display: block;
        margin-bottom: 8px;
    }
    .payment-glass .deposit-payment {
        width: 100%;
    }
    .payment-glass .deposit-payment .form-control {
        font-size: 16px;
    }
    .payment-glass .checkbox_list_remove {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
        margin-top: 0 !important;
        width: 100%;
    }
    .payment-glass .checkbox_list_remove .form-check {
        margin-left: 0 !important;
        width: 100%;
        min-height: 40px;
    }

    .payment-glass .form-row .payment-method-col {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 4px;
        padding-right: 4px;
    }
    .payment-glass .payment-method-col .payment_method.custom-control {
        padding: 10px 8px 10px 0;
        min-height: 54px;
        margin-bottom: 8px;
    }
    .payment-glass .payment_method .custom-control-label {
        min-height: auto;
        padding: 0 0 0 calc(1.3rem + 6px) !important;
        font-size: 11px !important;
        line-height: 1.25;
        gap: 5px;
    }
    .payment-glass .payment_method .custom-control-label::before,
    .payment-glass .payment_method .custom-control-label::after {
        margin-left: 0 !important;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .payment-glass .payment_method .custom-control-label i {
        font-size: 11px;
    }

    .payment-glass .bank__transfer .btn-outline-first,
    .payment-glass #connect-bank {
        width: 100%;
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }
    .payment-glass .wallet-buttons {
        flex-direction: column;
    }
    .payment-glass .wallet-btn {
        width: 100%;
        min-width: 0;
    }
    .payment-glass .mt_btn,
    .payment-glass .btn_submit_payment {
        width: 100%;
        min-height: 44px;
    }
    .payment-glass .current_payment_head {
        margin-top: 0;
    }
    .payment-glass .col-md-3 {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
}

/* --- 22.6 Review step — summary stacks as cards, edit links stay tappable --- */
@media (max-width: 767.98px) {
    /* Main + sidebar columns stack; price summary follows summary panels */
    .review-glass .row.no-gutters {
        display: flex;
        flex-direction: column;
    }
    .review-glass .col-md-9,
    .review-glass .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .review-glass .col-md-3 {
        order: 2;
        margin-top: 4px;
    }

    /* 44px tap targets; EDIT stays right-aligned in each summary row */
    .review-glass .review-edit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        line-height: 1.2;
        padding: 0 6px !important;
        margin-left: auto !important;
        text-align: right;
    }
    .review-glass .panel-heading.d-flex {
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }
    .review-glass .panel-heading > span:first-child,
    .review-glass .panel-head > span:first-child {
        font-size: 14px;
    }
    .review-glass .panel-head {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }
    .review-glass .panel-heading > .design_incomplete_erro,
    .review-glass .panel-heading > span.design_incomplete_erro {
        flex: 1 1 100%;
        font-size: 12px;
        line-height: 1.35;
    }

    /* Tighter shell padding + a consistent gap between every summary card */
    .review-glass .card-body.p-3 {
        padding: 0.85rem !important;
    }
    .review-glass .panel.__products_table {
        margin-bottom: 14px;
    }
    .review-glass br {
        display: none; /* spacing now comes from the card margin above, not a manual <br> */
    }

    /* Products / Addons item tables → stacked cards (no horizontal squeeze) */
    .review-glass .col-md-9 > .panel.__products_table .table {
        border: 0;
    }
    .review-glass .col-md-9 > .panel.__products_table .table thead {
        display: none;
    }
    .review-glass .col-md-9 > .panel.__products_table .table,
    .review-glass .col-md-9 > .panel.__products_table .table tbody {
        display: block;
    }
    .review-glass .col-md-9 > .panel.__products_table .table tr {
        display: block;
        margin-bottom: 10px;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(15, 23, 53, 0.08);
        box-shadow: 0 4px 14px rgba(15, 23, 53, 0.05);
    }
    .review-glass .col-md-9 > .panel.__products_table .table tr:last-child {
        margin-bottom: 0;
    }
    .review-glass .col-md-9 > .panel.__products_table .table td {
        display: block;
        width: 100% !important;
        border: 0 !important;
        padding: 4px 0 !important;
    }
    .review-glass .col-md-9 > .panel.__products_table .table td + td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-top: 8px !important;
        margin-top: 6px;
        border-top: 1px solid rgba(15, 23, 53, 0.06) !important;
    }
    .review-glass .col-md-9 > .panel.__products_table .table td:nth-child(2)::before,
    .review-glass .col-md-9 > .panel.__products_table .table td:nth-child(3)::before {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #8a90a2;
        font-weight: 600;
        flex: 0 0 auto;
    }
    .review-glass .col-md-9 > .panel.__products_table .table td:nth-child(2)::before {
        content: "Qty";
    }
    .review-glass .col-md-9 > .panel.__products_table .table td:nth-child(3)::before {
        content: "Subtotal";
    }
    .review-glass .col-md-9 > .panel.__products_table .table td .float-right {
        float: none !important;
    }

    /* Designs + Rosters — stack full width as their own cards instead of a squeezed 2-up row */
    .review-glass .col-sm-6.pr-2,
    .review-glass .col-sm-6.pl-2 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .review-glass .col-sm-6.pr-2 {
        margin-bottom: 14px;
    }
    .review-glass .col-sm-6.pr-2 > .panel.__products_table .table,
    .review-glass .col-sm-6.pl-2 > .panel.__products_table .table {
        border: 0;
    }
    .review-glass .col-sm-6.pr-2 > .panel.__products_table .table tbody,
    .review-glass .col-sm-6.pl-2 > .panel.__products_table .table tr {
        display: block;
    }
    .review-glass .col-sm-6.pr-2 > .panel.__products_table .table tr,
    .review-glass .col-sm-6.pl-2 > .panel.__products_table .table tr {
        display: block;
        margin-bottom: 10px;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(15, 23, 53, 0.08);
        box-shadow: 0 4px 14px rgba(15, 23, 53, 0.05);
    }
    .review-glass .col-sm-6.pr-2 > .panel.__products_table .table td,
    .review-glass .col-sm-6.pl-2 > .panel.__products_table .table td {
        display: block;
        width: 100% !important;
        border: 0 !important;
        padding: 4px 0 !important;
    }
    .review-glass .col-sm-6.pr-2 > .panel.__products_table .table td + td,
    .review-glass .col-sm-6.pl-2 > .panel.__products_table .table td + td {
        padding-top: 8px !important;
        margin-top: 6px;
        border-top: 1px solid rgba(15, 23, 53, 0.06) !important;
    }
    .review-glass .col-sm-6.pr-2 > .panel.__products_table .table td .float-right,
    .review-glass .col-sm-6.pl-2 > .panel.__products_table .table td .float-right {
        float: none !important;
    }

    /* Bottom detail grid (Production Method / Shipping Address / Payment Method /
       Payment Amount / Billing Address / PO docs) → one field per stacked card
       instead of a cramped 3-column table */
    .review-glass .col-sm-12 > .panel.__products_table .table,
    .review-glass .col-sm-12 > .panel.__products_table .table tbody,
    .review-glass .col-sm-12 > .panel.__products_table .table tr {
        display: block;
        width: 100%;
    }
    .review-glass .col-sm-12 > .panel.__products_table .table td {
        display: block;
        width: 100% !important;
        padding: 14px !important;
        margin-bottom: 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(15, 23, 53, 0.08) !important;
        box-shadow: 0 4px 14px rgba(15, 23, 53, 0.05);
    }
    .review-glass .col-sm-12 > .panel.__products_table .table tr:last-child td:last-child {
        margin-bottom: 0;
    }

    /* Price summary + submit — full width, clear above sticky Back/Submit bar */
    .review-glass .price_summry,
    .review-glass .price_summry .final_prices_to_appends {
        width: 100%;
        padding: 16px !important;
    }
    .review-glass .btn_submit_payment {
        width: 100%;
        min-height: 44px;
    }
    .review-glass .submit_payment_container > p.m-0 {
        font-size: 10px;
        line-height: 1.45;
        margin-top: 10px !important;
    }
    .review-glass .submit_blocked_note {
        margin-top: 12px;
    }
    .review-glass .submit_blocked_fix {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 0;
    }

    /* Extra scroll room for review content above fixed step nav (+ PWA banner) */
    .order-tabs:has(#createNotTab):has(#review.active) .tab-content {
        padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:has(.pwa-install.is-visible) .order-tabs:has(#createNotTab):has(#review.active) .tab-content,
    body:has(.pwa-ios-hint.is-visible) .order-tabs:has(#createNotTab):has(#review.active) .tab-content {
        padding-bottom: calc(5.25rem + 58px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Toasts stay top-right on Review (same as every other step). */
    body:has(.order-tabs #review.active) .amaran-wrapper,
    body:has(.order-tabs #review.active) .amaran-wrapper.top.right {
        top: 64px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
    }
    body:has(.order-tabs #review.active) .amaran-wrapper .amaran.default,
    body:has(.order-tabs #review.active) .amaran-wrapper.top.right .amaran.default {
        width: 320px;
        max-width: min(360px, calc(100vw - 24px));
    }
}

/* --- 22.7 iPad / tablet (768–1023px) — comfortable two-column where useful --- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .order-tabs:has(#createNotTab) .tab-content {
        padding: 1.25rem 1rem 1.5rem !important;
    }
    .shipping-glass .row.no-gutters > .col-md-9,
    .payment-glass .row > .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .orders-glass .order-tabs .card-body {
        padding: 1.25rem;
    }
    .orders-glass h2.mb-2.fw-600 {
        font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
    }
}

/* --- 22.8 Orders list — COMPACT CARD ROWS on phones (replaces horizontal scroll) ---
   CSS-only "card" transform: table/tr/td become block/grid boxes. DataTables'
   DOM, its DESC sort (order: [] — server already sorts newest-first, untouched)
   and search/filter APIs only ever operate on the DOM structure, never on CSS
   display values, so none of that is affected. The DataTables Responsive
   extension is disabled for these 6 tables in datatables.min.js so it can't
   inject a control column or hide cells and shift the nth-child mapping below.
   Column labels come from ::before + nth-child instead of Blade edits — all
   six status tables share the same column order:
   1 Order · 2 Team Name · 3 Product · 4 Status · 5 Total · 6 Actions. */
@media (max-width: 767.98px) {
    .orders-glass .order-tabs .tab-content {
        overflow-x: visible;
    }
    .orders-glass .order-tabs table.dataTable,
    .orders-glass .order-tabs table.table {
        min-width: 0;
    }
    .orders-glass .txt-right a.designs-cta {
        flex: 0 0 44px;
    }
    .orders-glass .d-flex.justify-content-between.flex-wrap.mb-4 {
        gap: 12px;
    }
    .orders-glass .d-flex.justify-content-between.flex-wrap.mb-4 .txt-right {
        width: 100%;
        text-align: right;
    }
    /* Compact page title (user preference: avoid large rwd-step clamp on h1/h2) */
    .orders-glass h2.mb-2.fw-600 {
        font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.5rem);
    }

    /* Hide the header row; each column's label is re-injected per-cell below */
    .orders-glass .order-tabs table.table thead { display: none; }

    .orders-glass .order-tabs table.table,
    .orders-glass .order-tabs table.table tbody {
        display: block;
        width: 100%;
    }

    /* Tight 2-zone FLG card — status clears kebab; thumb + product + team stack */
    .orders-glass .order-tabs table.table tbody tr:not(:has(> td[colspan])) {
        position: relative;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        column-gap: 6px;
        row-gap: 0;
        align-items: start;
        width: 100%;
        margin: 0 0 5px;
        padding: 5px 44px 5px 8px;
        border-radius: 12px;
        background: var(--glass-bg-card-strong);
        border: 1px solid var(--glass-card-border);
        box-shadow: var(--glass-card-shadow);
    }
    .orders-glass .order-tabs table.table tbody tr:last-child { margin-bottom: 0; }
    /* Neutralise Bootstrap's .table-hover row tint (no hover on touch, avoid a stuck tap tint) */
    .orders-glass .order-tabs table.table.table-hover tbody tr:hover {
        background-color: var(--glass-bg-card-strong);
    }

    .orders-glass .order-tabs table.table tbody tr:not(:has(> td[colspan])) > td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* Row 1 — order # + date */
    .orders-glass .order-tabs table.table tbody td:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        padding-bottom: 2px !important;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(1) > a {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(1) .order-title {
        font-size: 12px !important;
        margin: 0;
        line-height: 1.15;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(1) .order_date {
        font-size: 10px;
        line-height: 1.15;
        color: #97a0b5;
    }

    /* Row 1 — status badge (clears 30px kebab + 6px gap) */
    .orders-glass .order-tabs table.table tbody td:nth-child(4) {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        text-align: right !important;
        padding-right: 14px !important;
        max-width: 36vw;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(4)::before {
        content: none;
        display: none;
    }

    /* Rows 2–3 — product cell children join the card grid */
    .orders-glass .order-tabs table.table tbody td:nth-child(3) {
        display: contents;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(3) img.tbl_img {
        grid-column: 1;
        grid-row: 2 / 4;
        align-self: start;
        width: 30px !important;
        height: 30px !important;
        object-fit: cover;
        border-radius: 6px;
        margin-top: 1px;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(3) > a {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        min-width: 0;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(3) .order-title {
        font-size: 11px !important;
        margin: 0;
        line-height: 1.15;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(3) .order-num {
        display: none;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(3):not(:has(img)) {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Team + total hug the product row */
    .orders-glass .order-tabs table.table tbody td:nth-child(2),
    .orders-glass .order-tabs table.table tbody td:nth-child(5) {
        text-align: left !important;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(2)::before,
    .orders-glass .order-tabs table.table tbody td:nth-child(5)::before {
        content: none;
        display: none;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(2) {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        margin-top: -1px;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(2) .order-num {
        margin: 0;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #5c6478;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(5) {
        grid-column: 3;
        grid-row: 2 / 4;
        align-self: center;
        justify-self: end;
        text-align: right !important;
        white-space: nowrap !important;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(5) del {
        display: block;
        font-size: 9px;
        font-weight: 400;
        line-height: 1.1;
    }

    /* Kebab — top-right, status sits just left of this */
    .orders-glass .order-tabs table.table tbody td:last-child {
        position: absolute;
        top: 4px;
        right: 4px;
        width: auto;
        padding: 0 !important;
        z-index: 2;
    }
    .orders-glass .order-tabs .btn_remove_radius {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
    .orders-glass .order-tabs table.table tbody td .badge {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 8px;
        padding: 2px 5px;
        line-height: 1.15;
        white-space: nowrap;
        vertical-align: top;
        border-radius: 999px;
    }
    /* "No orders found" row (colspan td, no siblings): plain centred text, not a card */
    .orders-glass .order-tabs table.table tbody tr:has(> td[colspan]) {
        display: block;
        width: 100%;
        padding: 20px 14px;
        text-align: center;
        box-shadow: none;
        background: transparent;
        border-style: dashed;
    }
    .orders-glass .order-tabs table.table tbody td[colspan] {
        display: block;
        width: 100%;
        text-align: center !important;
        border-bottom: 0 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        color: #6a7184;
    }
    .orders-glass .order-tabs table.table tbody td[colspan]::before { content: none; }
}

/* Very small phones — keep tight; reserve room for kebab only */
@media (max-width: 380px) {
    .orders-glass .order-tabs table.table tbody tr:not(:has(> td[colspan])) {
        padding: 5px 40px 5px 8px;
    }
    .orders-glass .order-tabs table.table tbody td:nth-child(4) {
        max-width: 34vw;
    }
    .orders-glass .order-tabs table.table tbody td:last-child {
        top: 3px;
        right: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .order-tabs:has(#createNotTab) .order-step-nav .btn {
        transition: none;
    }
}

/* =============================================================================
   §26 Balance Payment page (.balance-pay-glass)
   Dedicated follow-up payment flow — balance due only, no order editor chrome.
   Reuses .payment-glass method styles where the panel also carries that class.
   ============================================================================= */

.balance-pay-glass {
    padding: clamp(12px, 2vw, 20px);
    max-width: 1180px;
    margin: 0 auto;
}

.balance-pay-glass h1.balance-pay-glass__title {
    margin: 0;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.35rem);
    font-weight: 700;
    line-height: 1.25;
    color: #1f2d5a;
}

.balance-pay-glass__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
    padding: clamp(14px, 2vw, 20px);
    margin-bottom: 16px;
}

.balance-pay-glass__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4c81de;
    text-decoration: none !important;
    margin-bottom: 8px;
}

.balance-pay-glass__subtitle {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: rgba(31, 45, 90, 0.62);
}

.balance-pay-glass__header-kpi {
    text-align: right;
}

.balance-pay-glass__kpi small {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(31, 45, 90, 0.55);
}

.balance-pay-glass__kpi strong {
    display: block;
    margin-top: 4px;
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.55rem);
    color: #e0556b;
}

.balance-pay-glass__grid > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.balance-pay-glass__panel,
.balance-pay-glass__summary {
    padding: clamp(16px, 2.2vw, 22px);
    margin-bottom: 16px;
}

.balance-pay-glass__panel-title,
.balance-pay-glass__summary-title {
    margin: 0 0 6px;
    font-size: clamp(0.78rem, 0.72rem + 0.35vw, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1f2d5a;
}

.balance-pay-glass__panel-lead {
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(27, 36, 64, 0.62);
}

.balance-pay-glass__hint {
    font-weight: 600;
    color: rgba(31, 45, 90, 0.55);
}

.balance-pay-glass__amount-row label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1b2440;
}

.balance-pay-glass__pay-type {
    display: flex;
    align-items: flex-end;
}

.balance-pay-glass__dl {
    margin: 0;
    display: grid;
    gap: 10px;
}

.balance-pay-glass__dl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.balance-pay-glass__dl-row dt {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(27, 36, 64, 0.62);
}

.balance-pay-glass__dl-row dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1b2440;
}

.balance-pay-glass__dl-row--due dd {
    color: #e0556b;
}

.balance-pay-glass__dl-row--accent dd {
    color: #3c44b1;
    font-size: 1rem;
}

.balance-pay-glass__dl--live {
    margin-top: 4px;
}

.balance-pay-glass__note {
    margin: 14px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(27, 36, 64, 0.55);
}

.balance-pay-glass__order-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4c81de;
}

@media (max-width: 767.98px) {
    .balance-pay-glass__header-kpi {
        width: 100%;
        text-align: left;
    }

    .balance-pay-glass__pay-type {
        margin-top: 12px;
    }

    .balance-pay-glass .checkbox_list_remove {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .balance-pay-glass .checkbox_list_remove .form-check + .form-check {
        margin-left: 0 !important;
    }
}

/* ===========================================================================
   27. DASHBOARD + LEDGER + BALANCE PAY — mobile polish (Jul 2026)
   ---------------------------------------------------------------------------
   Daily-use screens at ≤767.98px (+ light iPad 768–1023px where noted).
   Desktop (≥1024px) unchanged. Scoped: .dashboard-glass, .ledger-glass,
   .balance-pay-glass.
   =========================================================================== */

/* --- 27.1 Dashboard / home — stat cards, quick actions, tables → cards --- */
@media (max-width: 767.98px) {
    .dashboard-glass {
        overflow-x: clip;
    }

    /* Stat KPI row: full-width tiles, comfortable tap (whole card is the link) */
    .dashboard-glass .top_statics > .col-md-12 > .row {
        margin-left: 0;
        margin-right: 0;
    }
    .dashboard-glass .top_statics > .col-md-12 > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    .dashboard-glass .top_statics .card.card-box {
        margin-bottom: 12px !important;
    }
    .dashboard-glass .top_statics .card.card-box > a {
        display: block;
        min-height: 44px;
    }
    .dashboard-glass .top_statics .card .d-50 {
        width: 44px;
        height: 44px;
        min-width: 44px;
        line-height: 44px;
        font-size: 1rem;
    }
    .dashboard-glass .top_statics .card-body small {
        font-size: 10px;
    }
    .dashboard-glass .top_statics .card-body .font-weight-bold > span {
        font-size: 1.15rem !important;
    }

    /* Quick actions — compact headings, tidy vertical stack */
    .dashboard-glass .equal_height_column > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    .dashboard-glass .equal_height_column .card {
        margin-bottom: 12px !important;
    }
    .dashboard-glass .equal_height_column .card > a {
        min-height: 44px;
    }
    .dashboard-glass .equal_height_column h3.heading-6 {
        font-size: clamp(0.88rem, 0.82rem + 0.35vw, 1rem) !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    .dashboard-glass .equal_height_column .card_imgsvg,
    .dashboard-glass .equal_height_column .dash-feature-icon {
        max-width: 56px;
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.25rem;
    }

    /* Recent Orders — FLG Pill mobile stack (mirrors §22.8 orders list) */
    .dashboard-glass .recent-orders-scroll {
        max-height: none;
        overflow: visible;
    }
    .dashboard-glass .recent-orders-scroll .table-responsive {
        overflow-x: visible;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table thead { display: none; }
    .dashboard-glass table.recent-orders-table.flg-pill-table,
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody {
        display: block;
        width: 100%;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        column-gap: 6px;
        row-gap: 0;
        align-items: start;
        width: 100%;
        margin: 0 0 5px;
        padding: 5px 44px 5px 8px;
        border-radius: 12px;
        background: var(--glass-bg-card-strong);
        border: 1px solid var(--glass-card-border);
        box-shadow: var(--glass-card-shadow);
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody tr:last-child { margin-bottom: 0; }
    .dashboard-glass table.recent-orders-table.flg-pill-table.table-hover tbody tr:hover {
        background-color: var(--glass-bg-card-strong);
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody tr > td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        padding-bottom: 2px !important;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(1) > a {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(1) .order-title {
        font-size: 12px !important;
        margin: 0;
        line-height: 1.15;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(1) .order_date {
        font-size: 10px;
        line-height: 1.15;
        color: #97a0b5;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(4) {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        text-align: right !important;
        padding-right: 14px !important;
        max-width: 36vw;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(3) {
        display: contents;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(3) img.tbl_img {
        grid-column: 1;
        grid-row: 2 / 4;
        align-self: start;
        width: 30px !important;
        height: 30px !important;
        object-fit: cover;
        border-radius: 6px;
        margin-top: 1px;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(3) > a {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        min-width: 0;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(3) .order-title {
        font-size: 11px !important;
        margin: 0;
        line-height: 1.15;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(3) .order-num {
        display: none;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(3):not(:has(img)) {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(2) {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        margin-top: -1px;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(2) .order-num {
        margin: 0;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #5c6478;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(5) {
        grid-column: 3;
        grid-row: 2 / 4;
        align-self: center;
        justify-self: end;
        text-align: right !important;
        white-space: nowrap !important;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(5) del {
        display: block;
        font-size: 9px;
        font-weight: 400;
        line-height: 1.1;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:last-child {
        position: absolute;
        top: 4px;
        right: 4px;
        width: auto;
        padding: 0 !important;
        z-index: 2;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table .btn_remove_radius {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td .badge {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 8px;
        padding: 2px 5px;
        line-height: 1.15;
        white-space: nowrap;
        vertical-align: top;
        border-radius: 999px;
    }

    /* Recent Quotes — FLG pill stack (Quote · Price · Actions) */
    .dashboard-glass .recent-quotes-scroll {
        max-height: none;
        overflow: visible;
    }
    .dashboard-glass .recent-quotes-scroll .table-responsive {
        overflow-x: visible;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table thead { display: none; }
    .dashboard-glass table.recent-quotes-table.flg-pill-table,
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody {
        display: block;
        width: 100%;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "thumb quote"
            "thumb price";
        column-gap: 10px;
        row-gap: 4px;
        align-items: center;
        margin: 0 0 10px;
        padding: 10px 48px 10px 10px;
        border-radius: 16px;
        background: var(--glass-bg-card-strong);
        border: 1px solid var(--glass-card-border);
        box-shadow: var(--glass-card-shadow);
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody tr:last-child { margin-bottom: 0; }
    .dashboard-glass table.recent-quotes-table.flg-pill-table.table-hover tbody tr:hover {
        background: rgba(255, 255, 255, 0.92);
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody tr > td {
        display: block;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:nth-child(1) {
        grid-area: quote;
        display: contents;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:nth-child(1) img.tbl_img {
        grid-area: thumb;
        width: 56px !important;
        height: 56px !important;
        object-fit: cover;
        border-radius: 10px;
        float: none;
        margin: 0;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:nth-child(1) > a {
        grid-area: quote;
        display: block;
        min-width: 0;
        overflow: hidden;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:nth-child(1) .order-title {
        font-size: 14px !important;
        font-weight: 700;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:nth-child(1) .order-num {
        font-size: 11px !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:nth-child(1):not(:has(img)) > a {
        grid-column: 1 / -1;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:nth-child(2) {
        grid-area: price;
        font-size: 13px;
        font-weight: 600;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:nth-child(2)::before {
        content: "Price";
        display: block;
        margin-bottom: 2px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #97a0b5;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:last-child {
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto !important;
        padding: 0 !important;
        z-index: 2;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table .btn_remove_radius {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

@media (max-width: 380px) {
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody tr {
        padding: 5px 40px 5px 8px;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:nth-child(4) {
        max-width: 34vw;
    }
    .dashboard-glass table.recent-orders-table.flg-pill-table tbody td:last-child {
        top: 3px;
        right: 3px;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody tr {
        padding: 8px 44px 8px 8px;
    }
    .dashboard-glass table.recent-quotes-table.flg-pill-table tbody td:last-child {
        top: 8px;
        right: 8px;
    }
}

/* --- 27.2 Customer Ledger — KPI stack, tappable actions, phone ledger rows --- */
@media (max-width: 767.98px) {
    .ledger-glass {
        overflow-x: clip;
    }

    .ledger-kpis {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }
    .ledger-kpi {
        padding: 14px 16px;
        gap: 12px;
    }
    .ledger-kpi__icon {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 17px;
    }
    .ledger-kpi__value {
        font-size: 1.25rem;
    }

    .ledger-glass .card.card-box.ledger-analysis,
    .ledger-glass .card.card-box.ledger-card {
        padding: 16px;
        border-radius: 16px;
    }
    .ledger-section-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .ledger-section-head h5 {
        font-size: clamp(0.88rem, 0.82rem + 0.35vw, 1rem);
    }
    .ledger-section-head p {
        font-size: 12px;
        max-width: none;
    }
    .ledger-largest {
        text-align: left;
    }
    .ledger-section-head__actions {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }
    .ledger-section-head__actions .btn-ledger-primary,
    .ledger-section-head__actions .btn-ledger-ghost {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-height: 44px;
        padding: 10px 14px;
    }
    .ledger-section-head__actions .btn-ledger-primary {
        flex: 1 1 100%;
    }

    .ledger-filters {
        gap: 6px;
        margin-bottom: 12px;
    }
    .ledger-chip {
        min-height: 44px;
        padding: 8px 14px;
    }

    .ledger-table {
        max-height: none;
    }
    .ledger-body {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }

    .ledger-glass .btn-ledger-pay,
    .ledger-glass .btn-ledger-pay--meta {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 13px;
    }

    .aging-bars {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .aging-col__track {
        height: 88px;
    }

    /* Print dialog — full-width actions on phones */
    .ledger-print-modal {
        padding: 12px;
        align-items: flex-end;
    }
    .ledger-print-dialog {
        border-radius: 16px 16px 0 0;
        max-height: 92dvh;
        overflow-y: auto;
    }
    .ledger-print-foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .ledger-print-foot .btn-ledger-primary,
    .ledger-print-foot .btn-ledger-ghost {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    .lpf-check {
        min-height: 44px;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .ledger-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .ledger-section-head__actions .btn-ledger-primary,
    .ledger-section-head__actions .btn-ledger-ghost {
        min-height: 44px;
    }
}

/* --- 27.3 Balance pay — amount row, methods, Zelle upload on narrow screens --- */
@media (max-width: 767.98px) {
    .balance-pay-glass {
        padding: 10px 8px;
    }
    .balance-pay-glass__header {
        padding: 14px;
    }
    .balance-pay-glass__back {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .balance-pay-glass__grid > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    .balance-pay-glass__amount-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .balance-pay-glass .deposit-payment .form-control {
        font-size: 16px;
        min-height: 44px;
    }
    .balance-pay-glass .checkbox_list_remove .form-check {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* payment-glass §22.5 covers method grid; reinforce for balance-pay scope */
    .balance-pay-glass.payment-glass .form-row .payment-method-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .balance-pay-glass.payment-glass .payment-method-col .payment_method.custom-control {
        min-height: 56px;
    }

    .balance-pay-glass .zelle-pay-email-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .balance-pay-glass .zelle-pay-copy {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .balance-pay-glass .upload_input_doc_group,
    .balance-pay-glass .file__text_block {
        width: 100%;
    }
    .balance-pay-glass .file__text_block {
        min-height: 120px;
        padding: 16px;
    }
    .balance-pay-glass .btn-first,
    .balance-pay-glass #connect-bank {
        width: 100%;
        min-height: 44px;
    }
    .balance-pay-glass__summary {
        margin-top: 0;
    }
    .balance-pay-glass__order-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 380px) {
    .balance-pay-glass.payment-glass .form-row .payment-method-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===========================================================================
   28. DESIGN CHAT — mobile polish pass (Jul 2026)
   ---------------------------------------------------------------------------
   Refines §25 .chat-glass at ≤767.98px (+ light iPad 768–1023px).
   Desktop (≥1024px) unchanged. JS sets --chat-sticky-top, --chat-kb-offset,
   --chat-composer-reserve (design-request-chat.js).
   =========================================================================== */

@media (max-width: 767.98px) {
    /* No horizontal scroll at 360px */
    .chat-glass.content-inner,
    .chat-glass-panel {
        overflow-x: clip;
        max-width: 100%;
    }

    .chat-glass__thread {
        overflow-x: clip;
    }

    /* Reserve space for fixed composer (+ keyboard lift via --chat-kb-offset) */
    .chat-glass__thread {
        padding-bottom: calc(
            var(--chat-composer-reserve, 100px)
            + var(--chat-kb-offset, 0px)
            + env(safe-area-inset-bottom, 0px)
        );
    }

    /* Bubble column: 32px avatar + 8px gap */
    .chat-glass__bubble-wrap {
        max-width: calc(100% - 40px);
        flex: 1 1 auto;
    }

    .chat-glass__body {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .chat-glass__body pre,
    .chat-glass__body code {
        white-space: pre-wrap;
        word-break: break-word;
        max-width: 100%;
    }

    /* Attachment previews — beat legacy myStyle.css padding on narrow screens */
    .chat-glass__body .chat_image_preview {
        display: block;
        width: auto;
        max-width: min(240px, 100%);
        height: auto;
        box-sizing: border-box;
    }

    .chat-glass__body .chat_file_preview {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        padding: 14px 12px !important;
        box-sizing: border-box;
        line-height: 1.35 !important;
        font-size: 0.76rem !important;
        text-align: center;
    }

    .chat-glass__body .download_chat_file {
        font-size: 28px !important;
        line-height: 1;
        margin: 0 !important;
    }

    /* Timestamps / sender meta stay visible beside truncated titles */
    .chat-glass__meta {
        gap: 2px 8px;
        align-items: center;
    }

    .chat-glass__time {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.68rem;
    }

    .chat-glass__header {
        padding: 10px 12px;
    }

    .chat-glass h1.chat-glass__title {
        font-size: clamp(0.82rem, 0.78rem + 0.4vw, 1rem);
        line-height: 1.2;
    }

    .chat-glass__submitted {
        font-size: 0.72rem;
    }

    /* Composer: iOS keyboard lift stacks with PWA install banner (§25 pattern) */
    .chat-glass__composer,
    .chat-glass__composer--closed {
        bottom: var(--chat-kb-offset, 0px);
        left: max(0px, env(safe-area-inset-left, 0px));
        right: max(0px, env(safe-area-inset-right, 0px));
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    body:has(.pwa-install.is-visible) .chat-glass__composer,
    body:has(.pwa-ios-hint.is-visible) .chat-glass__composer,
    body:has(.pwa-install.is-visible) .chat-glass__composer--closed,
    body:has(.pwa-ios-hint.is-visible) .chat-glass__composer--closed {
        bottom: calc(58px + var(--chat-kb-offset, 0px));
    }

    .chat-glass__attach-btn,
    .chat-glass__back-btn,
    .chat-glass__preview-btn,
    .chat-glass .chat-glass__send-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .chat-glass__input {
        max-height: 120px;
    }

    .chat-glass__uploading {
        margin-bottom: 6px;
        font-size: 0.72rem;
    }

    /* Approval card — full-width 44px CTA on phones */
    .chat-glass .xrg-approval-request {
        padding-left: 10px;
        gap: 8px;
    }

    .chat-glass .chat-glass__approve-btn,
    .chat-glass .chat-glass__approve-btn.liquid-chrome {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        align-self: stretch;
    }

    .chat-glass .chat-glass__approve-done {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }
}

@media (max-width: 380px) {
    .chat-glass__header {
        gap: 8px;
    }

    .chat-glass__submitted {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .chat-glass__msg {
        max-width: 85%;
    }

    .chat-glass__body .chat_image_preview {
        max-width: min(280px, 100%);
    }

    .chat-glass h1.chat-glass__title {
        font-size: clamp(0.9rem, 0.82rem + 0.5vw, 1.15rem);
    }

    .chat-glass__attach-btn,
    .chat-glass .chat-glass__send-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* =============================================================================
   §29 Install App instructions page (.install-glass)
   Guest + authenticated PWA install guide — compact FLG cards, responsive grid.
   ============================================================================= */

.install-glass {
    --install-accent: #e0556b;
    --install-ink: #1f2d5a;
    --install-muted: rgba(31, 45, 90, 0.62);
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(12px, 2.5vw, 24px);
}

.install-glass--guest {
    padding-top: clamp(16px, 3vw, 28px);
}

.install-glass h1.install-glass__title {
    margin: 0;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--install-ink);
}

.install-glass__guest-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.install-glass__logo img {
    display: block;
    max-width: min(140px, 42vw);
    height: auto;
}

.install-glass__sign-in {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4c81de;
    text-decoration: none !important;
}

.install-glass__page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 18px;
    margin-bottom: 14px;
}

.install-glass__page-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.install-glass__hero-app img {
    display: block;
    width: clamp(56px, 12vw, 72px);
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(31, 45, 90, 0.1);
}

.install-glass__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.install-glass__benefit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--install-ink);
}

.install-glass__benefit i {
    font-size: 0.72rem;
    color: var(--install-accent);
}

.install-glass__cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: clamp(14px, 2.2vw, 18px) clamp(16px, 2.5vw, 20px);
    margin-bottom: 14px;
}

.install-glass__cta-band--desktop {
    border-color: rgba(224, 85, 107, 0.22);
    box-shadow:
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 0 1px rgba(224, 85, 107, 0.08);
}

.install-glass h2.install-glass__cta-title {
    margin: 0;
    font-size: clamp(0.82rem, 0.76rem + 0.35vw, 0.98rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--install-ink);
}

.install-glass__cta-text {
    margin: 4px 0 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--install-muted);
}

.install-glass__cta-copy {
    flex: 1 1 220px;
    min-width: 0;
}

.install-glass__cta-actions {
    flex: 0 1 auto;
}

.install-glass__section-label {
    margin: 4px 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--install-muted);
}

.install-glass__eyebrow {
    display: block;
    margin-bottom: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--install-muted);
}

.install-glass__card-sub {
    margin: 0 0 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--install-muted);
}

.install-glass__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--install-accent);
    background: rgba(224, 85, 107, 0.1);
    border: 1px solid rgba(224, 85, 107, 0.18);
    vertical-align: middle;
}

.install-glass__dl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.install-glass__cta-band--desktop .install-glass__dl-actions {
    flex: 1 1 100%;
    margin-top: 2px;
}

@media (min-width: 640px) {
    .install-glass__cta-band--desktop {
        align-items: flex-start;
    }

    .install-glass__cta-band--desktop .install-glass__dl-actions {
        flex: 1 1 auto;
        width: auto;
        margin-top: 0;
        justify-content: flex-end;
    }
}

.install-glass__dl-hint {
    margin: 8px 0 0;
    width: 100%;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--install-muted);
    font-style: italic;
}

.install-glass__gatekeeper-note {
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(76, 129, 222, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.install-glass__gatekeeper-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--install-ink);
}

.install-glass__gatekeeper-title i {
    color: #4c81de;
    font-size: 0.85rem;
}

.install-glass__gatekeeper-text {
    margin: 0 0 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(31, 45, 90, 0.78);
}

.install-glass__gatekeeper-steps {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(31, 45, 90, 0.82);
}

.install-glass__gatekeeper-steps li + li {
    margin-top: 4px;
}

.install-glass__install-btn--outline {
    color: var(--install-ink);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(76, 129, 222, 0.35);
    box-shadow: 0 4px 14px rgba(31, 45, 90, 0.08);
}

.install-glass__install-btn--outline:hover {
    color: var(--install-ink);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 6px 16px rgba(31, 45, 90, 0.12);
}

.install-glass__install-btn--outline i {
    color: #4c81de;
}

.install-glass__hero {
    display: grid;
    gap: 14px 18px;
    padding: clamp(16px, 2.5vw, 22px);
    margin-bottom: 16px;
}

@media (min-width: 640px) {
    .install-glass__hero {
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .install-glass__hero-cta {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) {
    .install-glass__hero {
        grid-template-columns: auto 1fr auto;
    }

    .install-glass__hero-cta {
        grid-column: auto;
        justify-self: end;
        text-align: right;
        max-width: 240px;
    }
}

.install-glass__hero-icon img {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(31, 45, 90, 0.12);
}

.install-glass__lead {
    margin: 6px 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--install-muted);
}

.install-glass__install-btn {
    appearance: none;
    border: none;
    min-width: min(100%, 220px);
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #ff7a90, var(--install-accent));
    box-shadow: 0 4px 14px rgba(224, 85, 107, 0.35);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.install-glass__install-btn:hover {
    box-shadow: 0 6px 18px rgba(224, 85, 107, 0.45);
}

.install-glass__install-btn:active {
    transform: translateY(1px);
}

.install-glass__install-btn--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-decoration: none;
}

.install-glass__install-btn-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    text-align: center;
}

.install-glass__install-btn-size {
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.88;
}

.install-glass__cta-actions--card {
    margin: 0 0 0.65rem;
}

.install-glass__card .install-glass__dl-actions {
    margin-bottom: 12px;
}

.install-glass__install-btn:disabled,
.install-glass__install-btn[hidden] {
    display: none;
}

.install-glass__install-hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--install-muted);
}

.install-glass__grid {
    display: grid;
    gap: 14px;
}

@media (min-width: 720px) {
    .install-glass__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .install-glass__card--store {
        grid-column: 1 / -1;
    }
}

.install-glass__card {
    padding: clamp(14px, 2vw, 18px);
    height: 100%;
}

.install-glass__card--active {
    border-color: rgba(224, 85, 107, 0.35);
    box-shadow:
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 0 1px rgba(224, 85, 107, 0.12);
}

.install-glass__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.install-glass__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.install-glass__icon--desktop { color: #4c81de; }
.install-glass__icon--ios { color: #1f2d5a; }
.install-glass__icon--android { color: #3ddc84; }
.install-glass__icon--store { color: var(--install-accent); }

.install-glass h2.install-glass__card-title {
    margin: 0;
    font-size: clamp(0.78rem, 0.72rem + 0.35vw, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--install-ink);
    line-height: 1.3;
}

.install-glass__steps {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(27, 36, 64, 0.78);
}

.install-glass__steps li + li {
    margin-top: 8px;
}

.install-glass__steps strong {
    color: var(--install-ink);
    font-weight: 600;
}

.install-glass__store-copy {
    margin: 0 0 12px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(27, 36, 64, 0.78);
}
.install-glass__store-copy + .xrg-store-badges {
    margin-bottom: 10px;
}

.install-glass__store-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4c81de;
    text-decoration: none !important;
}

.install-glass__store-link:hover {
    color: var(--install-accent);
}

.install-glass__store-note {
    margin: 10px 0 0;
    font-size: 0.74rem;
    color: var(--install-muted);
    font-style: italic;
}

@media (max-width: 479.98px) {
    .install-glass__hero-cta {
        width: 100%;
    }

    .install-glass__install-btn,
    .install-glass__dl-actions .install-glass__install-btn {
        width: 100%;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .install-glass .glass-card {
        background: rgba(255, 255, 255, 0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .install-glass__store-link,
    .install-glass__install-btn {
        transition: none;
    }
}

/* =============================================================================
   §30 Offline read banner layout (.app-main.is-offline-read)
   Pairs with partials/offline-read-banner + pwa.css banner styles.
   ============================================================================= */

.app-main.is-offline-read .app-content {
    padding-top: 2.65rem;
}

@media (max-width: 991.98px) {
    .app-main.is-offline-read .app-content {
        padding-top: 3.1rem;
    }
}

@media (display-mode: standalone) {
    .app-main.is-offline-read .app-content {
        padding-top: calc(2.65rem + env(safe-area-inset-top, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-main.is-offline-read .app-content {
        transition: none;
    }
}

/* =============================================================================
   §31 Offline sync banner FLG polish (.xroad-offline-sync-banner)
   Refines pwa.css Task 4 base tokens — glass pill bar (mobile bottom-fixed),
   compact inline pill above footer zone on desktop. State modifiers:
   --pending | --syncing | --saved | --failed (also data-sync-state attr).
   ============================================================================= */

/* Reserve bottom space when the mobile pill is visible */
.app-main:has(.xroad-offline-sync-banner:not([hidden]):not(.is-hidden)) .app-content {
    padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    .app-main:has(.xroad-offline-sync-banner:not([hidden]):not(.is-hidden)) .app-content {
        padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    }
}

/* --- Layout overrides (refines pwa.css fixed-top desktop bar) --- */
.xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    line-height: 1.35;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.22));
    -webkit-backdrop-filter: blur(var(--glass-blur, 18px)) saturate(var(--glass-saturate, 160%));
            backdrop-filter: blur(var(--glass-blur, 18px)) saturate(var(--glass-saturate, 160%));
    box-shadow:
        var(--glass-shadow, 0 8px 28px rgba(7, 9, 25, 0.22)),
        var(--glass-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.08));
}

.xroad-offline-sync-banner__inner {
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.38rem 0.85rem;
}

.xroad-offline-sync-banner__icon {
    width: 1.45rem;
    height: 1.45rem;
    font-size: 0.68rem;
}

.xroad-offline-sync-banner__message {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.xroad-offline-sync-banner__count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-size: 0.68rem;
}

/* Mobile: bottom-fixed glass pill */
@media (max-width: 991.98px) {
    .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        top: auto;
        bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        margin: 0 auto;
        max-width: 28rem;
        border-bottom: 0;
        border-top: 1px solid var(--xroad-offline-sync-border, rgba(240, 160, 32, 0.45));
    }

    body:has(.xroad-offline-read-banner:not([hidden]):not(.is-hidden)) .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    }

    .xroad-offline-sync-banner::after {
        top: 0;
        bottom: auto;
    }
}

/* Desktop: compact inline pill above footer zone (fixed at content bottom) */
@media (min-width: 992px) {
    .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        top: auto;
        bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
        left: calc(260px + 50%);
        right: auto;
        width: min(36rem, calc(100% - 260px - 2rem));
        transform: translateX(-50%);
        border-bottom: 1px solid var(--xroad-offline-sync-border, rgba(240, 160, 32, 0.45));
    }

    #app-top.sidebar-collapsed .xroad-offline-sync-banner:not([hidden]):not(.is-hidden),
    #wrapper.close-side .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        left: calc(88px + 50%);
        width: min(36rem, calc(100% - 88px - 2rem));
    }

    body:has(.xroad-offline-read-banner:not([hidden]):not(.is-hidden)) .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        top: auto;
        bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Installed PWA: horizontal safe areas on the pill */
@media (display-mode: standalone) {
    .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        margin-left: max(0px, env(safe-area-inset-left, 0px));
        margin-right: max(0px, env(safe-area-inset-right, 0px));
    }
}

/* --- State modifiers (BEM + data-sync-state; refines pwa.css token swaps) --- */

/* pending (amber) — default pwa.css tokens */
.xroad-offline-sync-banner--pending,
.xroad-offline-sync-banner[data-sync-state="pending"] {
    --xroad-offline-sync-accent: #f0a020;
    --xroad-offline-sync-accent-alt: #e8a317;
}

.xroad-offline-sync-banner--pending .xroad-offline-sync-banner__icon-state--pending,
.xroad-offline-sync-banner[data-sync-state="pending"] .xroad-offline-sync-banner__icon-state--pending {
    display: inline-flex;
}

.xroad-offline-sync-banner--pending .xroad-offline-sync-banner__icon-state:not(.xroad-offline-sync-banner__icon-state--pending),
.xroad-offline-sync-banner[data-sync-state="pending"] .xroad-offline-sync-banner__icon-state:not(.xroad-offline-sync-banner__icon-state--pending) {
    display: none;
}

/* syncing (amber + theme pulse) */
.xroad-offline-sync-banner--syncing,
.xroad-offline-sync-banner[data-sync-state="syncing"] {
    --xroad-offline-sync-accent-alt: #e0556b;
}

.xroad-offline-sync-banner--syncing .xroad-offline-sync-banner__icon-state--syncing,
.xroad-offline-sync-banner[data-sync-state="syncing"] .xroad-offline-sync-banner__icon-state--syncing {
    display: inline-flex;
}

.xroad-offline-sync-banner--syncing .xroad-offline-sync-banner__icon-state:not(.xroad-offline-sync-banner__icon-state--syncing),
.xroad-offline-sync-banner[data-sync-state="syncing"] .xroad-offline-sync-banner__icon-state:not(.xroad-offline-sync-banner__icon-state--syncing) {
    display: none;
}

/* saved (green) */
.xroad-offline-sync-banner--saved,
.xroad-offline-sync-banner[data-sync-state="saved"] {
    --xroad-offline-sync-accent: #2d9f5f;
    --xroad-offline-sync-accent-alt: #3ecf7a;
    --xroad-offline-sync-surface: rgba(45, 159, 95, 0.16);
    --xroad-offline-sync-border: rgba(45, 159, 95, 0.48);
    --xroad-offline-sync-icon-color: #1f6b42;
    --xroad-offline-sync-icon-bg: rgba(255, 255, 255, 0.76);
    --xroad-offline-sync-icon-border: rgba(45, 159, 95, 0.42);
}

.xroad-offline-sync-banner--saved .xroad-offline-sync-banner__icon-state--saved,
.xroad-offline-sync-banner[data-sync-state="saved"] .xroad-offline-sync-banner__icon-state--saved {
    display: inline-flex;
}

.xroad-offline-sync-banner--saved .xroad-offline-sync-banner__icon-state:not(.xroad-offline-sync-banner__icon-state--saved),
.xroad-offline-sync-banner[data-sync-state="saved"] .xroad-offline-sync-banner__icon-state:not(.xroad-offline-sync-banner__icon-state--saved) {
    display: none;
}

.xroad-offline-sync-banner--saved .xroad-offline-sync-banner__count,
.xroad-offline-sync-banner[data-sync-state="saved"] .xroad-offline-sync-banner__count {
    color: #1f6b42;
    border-color: rgba(45, 159, 95, 0.45);
}

/* failed (subtle red) */
.xroad-offline-sync-banner--failed,
.xroad-offline-sync-banner[data-sync-state="failed"] {
    --xroad-offline-sync-accent: #d94a5a;
    --xroad-offline-sync-accent-alt: #e0556b;
    --xroad-offline-sync-surface: rgba(217, 74, 90, 0.14);
    --xroad-offline-sync-border: rgba(217, 74, 90, 0.42);
    --xroad-offline-sync-icon-color: #9b2f3c;
    --xroad-offline-sync-icon-bg: rgba(255, 255, 255, 0.76);
    --xroad-offline-sync-icon-border: rgba(217, 74, 90, 0.38);
}

.xroad-offline-sync-banner--failed .xroad-offline-sync-banner__icon-state--failed,
.xroad-offline-sync-banner[data-sync-state="failed"] .xroad-offline-sync-banner__icon-state--failed {
    display: inline-flex;
}

.xroad-offline-sync-banner--failed .xroad-offline-sync-banner__icon-state:not(.xroad-offline-sync-banner__icon-state--failed),
.xroad-offline-sync-banner[data-sync-state="failed"] .xroad-offline-sync-banner__icon-state:not(.xroad-offline-sync-banner__icon-state--failed) {
    display: none;
}

/* FLG sheen overlay (pairs with pwa.css ::before gradient) */
.xroad-offline-sync-banner:not([hidden]):not(.is-hidden)::before {
    border-radius: inherit;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 248, 235, 0.32) 52%, rgba(255, 255, 255, 0.14));
}

.xroad-offline-sync-banner--saved:not([hidden]):not(.is-hidden)::before,
.xroad-offline-sync-banner[data-sync-state="saved"]:not([hidden]):not(.is-hidden)::before {
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(235, 252, 242, 0.36) 52%, rgba(255, 255, 255, 0.14));
}

.xroad-offline-sync-banner--failed:not([hidden]):not(.is-hidden)::before,
.xroad-offline-sync-banner[data-sync-state="failed"]:not([hidden]):not(.is-hidden)::before {
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 240, 242, 0.34) 52%, rgba(255, 255, 255, 0.14));
}

/* Entry motion — pill slide (opt-out below) */
@media (prefers-reduced-motion: no-preference) {
    .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        animation: xroad-offline-sync-flg-in 0.32s cubic-bezier(0.4, 0.2, 0.2, 1);
    }

    .xroad-offline-sync-banner--syncing:not([hidden]):not(.is-hidden)::after,
    .xroad-offline-sync-banner[data-sync-state="syncing"]:not([hidden]):not(.is-hidden)::after {
        animation: xroad-offline-sync-flg-pulse 1.4s ease-in-out infinite;
    }

    @keyframes xroad-offline-sync-flg-in {
        from {
            opacity: 0;
            transform: translateY(0.4rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes xroad-offline-sync-flg-pulse {
        0%,
        100% {
            opacity: 0.7;
        }

        50% {
            opacity: 1;
        }
    }
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        animation: xroad-offline-sync-flg-desktop-in 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);
    }

    @keyframes xroad-offline-sync-flg-desktop-in {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(0.45rem);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        background: rgba(255, 244, 224, 0.96);
        border-color: rgba(240, 160, 32, 0.55);
    }

    .xroad-offline-sync-banner--saved:not([hidden]):not(.is-hidden),
    .xroad-offline-sync-banner[data-sync-state="saved"]:not([hidden]):not(.is-hidden) {
        background: rgba(232, 252, 240, 0.96);
        border-color: rgba(45, 159, 95, 0.55);
    }

    .xroad-offline-sync-banner--failed:not([hidden]):not(.is-hidden),
    .xroad-offline-sync-banner[data-sync-state="failed"]:not([hidden]):not(.is-hidden) {
        background: rgba(255, 238, 240, 0.96);
        border-color: rgba(217, 74, 90, 0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .xroad-offline-sync-banner:not([hidden]):not(.is-hidden) {
        animation: none;
    }

    .xroad-offline-sync-banner--syncing:not([hidden]):not(.is-hidden)::after,
    .xroad-offline-sync-banner[data-sync-state="syncing"]:not([hidden]):not(.is-hidden)::after {
        animation: none;
    }
}

/* =============================================================================
   §32 Sign up page (.signup-glass)
   Full-bleed guest auth inside .app-content — professional FLG card, soft fields.
   ============================================================================= */

/* Collapse app chrome so signup fills the viewport (no light strip above) */
#app-top:has(.signup-glass),
#app-top:has(.signup-glass) .app-wrapper,
#app-top:has(.signup-glass) .app-main,
#app-top:has(.signup-glass) .app-content,
#app-top:has(.signup-glass) .app-content--inner {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

#app-top:has(.signup-glass) .app-sidebar,
#app-top:has(.signup-glass) .app-header,
#app-top:has(.signup-glass) .sidebar-mobile-overlay,
#app-top:has(.signup-glass) .login-footer,
#app-top:has(.signup-glass) .app-footer,
#app-top:has(.signup-glass) .xroad-offline-read-banner,
#app-top:has(.signup-glass) .xroad-offline-sync-banner {
    display: none !important;
}

#app-top:has(.signup-glass) .app-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.signup-glass {
    --signup-ink: #1a2744;
    --signup-muted: rgba(26, 39, 68, 0.62);
    --signup-accent: #e0556b;
    --signup-line: rgba(26, 39, 68, 0.1);
    --signup-field-bg: rgba(255, 255, 255, 0.92);
    --signup-field-border: rgba(26, 39, 68, 0.12);
    --signup-page-bg: url('../images/hero.jpg');
}

.signup-glass.bg-second {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(0.85rem, 3vw, 1.75rem) !important;
    background:
        radial-gradient(90% 60% at 50% -10%, rgba(76, 129, 222, 0.28), transparent 55%),
        linear-gradient(165deg, rgba(7, 9, 25, 0.94) 0%, rgba(12, 22, 48, 0.9) 48%, rgba(7, 9, 25, 0.96) 100%),
        var(--signup-page-bg) center 18% / cover no-repeat !important;
}

/* Compact single-field auth cards (forgot password) */
.signup-glass--compact .container.signup-glass__container,
.signup-glass--compact .signup-glass__container {
    max-width: min(440px, 100%) !important;
}

.signup-glass .container.signup-glass__container,
.signup-glass__container {
    width: 100%;
    max-width: min(640px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.signup-glass__shell.glass-card,
.signup-glass__shell.modal-content,
.signup-glass__shell.card,
.signup-glass__shell.main-sd {
    margin: 0 auto;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 1.15rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    box-shadow:
        0 1.25rem 3rem rgba(7, 9, 25, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    overflow: hidden;
}

.signup-glass__inner.card,
.signup-glass__inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.signup-glass__inner > .row {
    margin: 0 !important;
}

.signup-glass__panel,
.signup-glass__panel.main-txt {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    padding: clamp(1.35rem, 2.6vw, 1.85rem) clamp(1.1rem, 3vw, 1.85rem) 1.35rem !important;
    background: rgba(248, 251, 255, 0.95) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.signup-glass__panel::before,
.signup-glass__panel::after {
    content: none !important;
    display: none !important;
}

.signup-glass__panel > * {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
}

.signup-glass__brand {
    display: flex;
    justify-content: center;
    margin: 0 0 0.85rem;
}

.signup-glass__brand img {
    display: block;
    width: auto;
    height: 2rem;
    object-fit: contain;
}

.signup-glass__hint {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 400;
    color: #6b7280;
}

.signup-glass__panel form.login-form {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.signup-glass__panel form.login-form > .row {
    margin-left: -0.45rem;
    margin-right: -0.45rem;
}

.signup-glass__panel form.login-form > .row > [class*='col-'] {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.signup-glass .main-head {
    text-align: center;
    margin: 0 0 1rem;
}

.signup-glass .main-head h1 {
    margin: 0 0 0.3rem;
    font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.35rem) !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--signup-ink) !important;
}

.signup-glass .main-head p {
    margin: 0;
    color: var(--signup-muted);
    font-weight: 400;
    font-size: 0.88rem !important;
    line-height: 1.4;
}

.signup-glass .required-legend {
    margin-top: 0.45rem !important;
    color: var(--signup-muted);
    font-size: 0.7rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.signup-glass .req-mark {
    color: var(--signup-accent);
}

.signup-glass .section-divider {
    margin: 0.85rem 0 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--signup-line);
    text-align: center;
}

.signup-glass .section-divider h4 {
    margin: 0;
    color: var(--signup-ink);
    font-size: 0.92rem !important;
    font-weight: 600;
}

.signup-glass .section-divider span {
    display: block;
    margin-top: 0.15rem;
    color: var(--signup-muted);
    font-size: 0.75rem !important;
}

/* Soft professional fields — no heavy embossed boards */
.signup-glass .text-field,
.signup-glass .form-control {
    height: auto;
    min-height: 2.55rem;
    padding: 0.55rem 1.05rem;
    color: var(--signup-ink) !important;
    font-weight: 500;
    font-size: 0.9rem;
    background: var(--signup-field-bg) !important;
    border: 1px solid var(--signup-field-border) !important;
    border-radius: 0.7rem !important;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.signup-glass .text-field::placeholder {
    color: rgba(26, 39, 68, 0.42);
    font-weight: 400;
}

.signup-glass .text-field:focus,
.signup-glass .form-control:focus {
    outline: none !important;
    background: #fff !important;
    border-color: rgba(76, 129, 222, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.16) !important;
    transform: none;
}

.signup-glass select.text-field,
.signup-glass select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a2744' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-color: var(--signup-field-bg) !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 12px !important;
    padding-right: 2.4rem !important;
    cursor: pointer;
}

.signup-glass #state_select,
.signup-glass #state_text,
.signup-glass #country {
    text-align: left;
    text-align-last: left;
}

.signup-glass .form-group {
    margin-bottom: 0.7rem;
}

.signup-glass .btn-second {
    min-height: 2.65rem;
    width: 100%;
    max-width: 18rem;
    padding: 0.65rem 1.75rem !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #e0556b 0%, #c93f58 48%, #1f2d5a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8rem;
    box-shadow: 0 8px 22px rgba(224, 85, 107, 0.26);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.signup-glass .btn-second:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(224, 85, 107, 0.32);
}

.signup-glass .btn-pill-sm {
    border-radius: 999px;
    background: #1a2744;
    box-shadow: none;
    padding: 0.4rem 1rem;
    font-size: 0.78rem;
}

.signup-glass__actions {
    margin-top: 0.15rem;
    text-align: center;
}

.signup-glass__footer {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--signup-line);
    text-align: center;
}

.signup-glass__footer p {
    margin: 0 0 0.55rem;
    color: var(--signup-muted);
    font-size: 0.82rem !important;
}

.signup-glass__footer p:last-child {
    margin-bottom: 0;
    font-size: 0.72rem !important;
    line-height: 1.45;
}

.signup-glass__footer a,
.signup-glass .main-head a,
.signup-glass .main-rec a {
    color: #3d6fc4;
    font-weight: 500;
}

.signup-glass .account-switch {
    gap: 0.55rem;
}

.signup-glass .address-suggestions {
    border-radius: 0.7rem;
    border-color: var(--signup-field-border);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 28px rgba(26, 39, 68, 0.12);
}

.signup-glass .alert-danger {
    border-radius: 0.55rem;
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.45rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .signup-glass__shell.glass-card,
    .signup-glass__shell.modal-content {
        background: rgba(245, 250, 255, 0.96) !important;
    }

    .signup-glass__panel {
        background: rgba(248, 251, 255, 0.97) !important;
    }

    .signup-glass .text-field,
    .signup-glass .form-control {
        background: #fff !important;
    }
}

@media (max-width: 575.98px) {
    .signup-glass.bg-second {
        align-items: flex-start;
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }

    .signup-glass__container {
        max-width: 100%;
    }

    .signup-glass__panel {
        padding: 1.15rem 0.95rem 1.1rem !important;
    }

    .signup-glass .btn-second {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .signup-glass .btn-second,
    .signup-glass .btn-pill-sm,
    .signup-glass .text-field,
    .signup-glass .form-control {
        transition: none;
    }

    .signup-glass .btn-second:hover {
        transform: none;
    }
}

/* =============================================================================
   §33 Design modal font fields (#modal-bbb4 .design-modal-glass)
   Player Font Name / Front Team Name Font — FLG labels + frosted inputs
   (mirrors address-glass form fields).
   ============================================================================= */

.design-modal-glass .design-font-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.design-modal-glass .design-font-fields .form-group {
    margin-bottom: 14px;
}

.design-modal-glass .design-font-fields .form-group:last-child {
    margin-bottom: 0;
}

.design-modal-glass .design-font-fields label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #2e3648;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.design-modal-glass .design-font-fields .form-control {
    width: 100%;
    height: 46px;
    padding: 10px 16px;
    border-radius: 13px;
    border: 1px solid rgba(60, 68, 177, 0.16);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
            backdrop-filter: blur(6px) saturate(120%);
    color: #1c2333;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: inset 0 1px 2px rgba(31, 45, 90, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition);
}

.design-modal-glass .design-font-fields .form-control::placeholder {
    color: #a3aabb;
    font-weight: 400;
}

.design-modal-glass .design-font-fields .form-control:hover {
    border-color: rgba(60, 68, 177, 0.3);
}

.design-modal-glass .design-font-fields .form-control:focus {
    outline: 0;
    background: #ffffff;
    border-color: rgba(60, 68, 177, 0.6);
    box-shadow: 0 0 0 4px rgba(108, 160, 255, 0.2), inset 0 1px 2px rgba(31, 45, 90, 0.04);
}

@media (prefers-reduced-motion: reduce) {
    .design-modal-glass .design-font-fields .form-control {
        transition: none;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .design-modal-glass .design-font-fields .form-control {
        background: #ffffff;
    }
}

/* Footer — Close left, Save right (overrides global .m-footer justify-content: end) */
.design-modal-glass .m-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(15, 23, 53, 0.08);
    border-radius: 0 0 10px 10px;
}

.design-modal-glass .m-footer .glass-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 22px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform var(--glass-transition), box-shadow var(--glass-transition),
                background var(--glass-transition), color var(--glass-transition);
}

.design-modal-glass .m-footer .glass-pill-btn.ghost,
.design-modal-glass .m-footer .design-modal-glass__close {
    color: #fff;
    background: linear-gradient(135deg, #e0556b, #c93d55);
    border-color: rgba(224, 85, 107, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px rgba(201, 61, 85, 0.28);
}

.design-modal-glass .m-footer .glass-pill-btn.ghost:hover,
.design-modal-glass .m-footer .design-modal-glass__close:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 24px rgba(201, 61, 85, 0.36);
}

.design-modal-glass .m-footer .glass-pill-btn.primary,
.design-modal-glass .m-footer .design-modal-glass__save {
    color: #fff;
    background: linear-gradient(135deg, #6ca0ff, #3c44b1);
    border-color: rgba(60, 68, 177, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px rgba(60, 68, 177, 0.32);
}

.design-modal-glass .m-footer .glass-pill-btn.primary:hover,
.design-modal-glass .m-footer .design-modal-glass__save:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 26px rgba(60, 68, 177, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .design-modal-glass .m-footer .glass-pill-btn {
        transition: none;
    }
    .design-modal-glass .m-footer .glass-pill-btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   33. CALENDAR (calendar.blade.php + profile Calendar tab) — .calendar-glass
   Month + Week views, event modal, Mac/iOS-inspired compact FLG chrome.
   ========================================================================== */
.calendar-glass {
    --cal-blue: #4c81de;
    --cal-green: #2f9e6b;
    --cal-orange: #e08a3a;
    --cal-red: #e0556b;
    --cal-purple: #7a5cff;
    --cal-teal: #1aa6a6;
    color: #2b2f45;
    font-family: 'Poppins', sans-serif;
}
.calendar-glass .cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.calendar-glass .cal-toolbar__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.calendar-glass .cal-toolbar__title {
    margin: 0 0 0 4px;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.35rem);
    font-weight: 700;
    color: var(--glass-primary);
    white-space: nowrap;
}
.calendar-glass .cal-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.calendar-glass .cal-btn,
.calendar-glass .cal-icon-btn {
    border: 1px solid var(--glass-card-border);
    background: var(--glass-bg-card);
    color: #2b2f45;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: transform var(--glass-transition), background var(--glass-transition);
}
.calendar-glass .cal-btn { padding: 8px 14px; }
.calendar-glass .cal-btn--primary {
    background: linear-gradient(135deg, #4c5bd4, #3c44b1);
    border-color: transparent;
    color: #fff;
}
.calendar-glass .cal-btn--danger {
    background: rgba(224, 85, 107, 0.12);
    border-color: rgba(224, 85, 107, 0.28);
    color: #c13b52;
}
.calendar-glass .cal-btn--ghost { background: rgba(255,255,255,0.55); }
.calendar-glass .cal-icon-btn {
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.calendar-glass .cal-btn:hover,
.calendar-glass .cal-icon-btn:hover { transform: translateY(-1px); }
.calendar-glass .cal-view-toggle {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(60, 68, 177, 0.08);
    border: 1px solid rgba(60, 68, 177, 0.12);
}
.calendar-glass .cal-view-toggle__btn {
    border: 0; background: transparent; cursor: pointer;
    padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #5b6280;
}
.calendar-glass .cal-view-toggle__btn.is-active {
    background: #fff; color: var(--glass-primary); box-shadow: var(--glass-card-shadow);
}
.calendar-glass .cal-board {
    padding: 12px;
    overflow: hidden;
}
.calendar-glass .cal-month__head,
.calendar-glass .cal-month__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.calendar-glass .cal-month__dow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #7a819a;
    padding: 4px 0 8px;
}
.calendar-glass .cal-month__cell {
    min-height: 88px;
    border-radius: 12px;
    border: 1px solid rgba(31, 45, 90, 0.08);
    background: rgba(255, 255, 255, 0.55);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.calendar-glass .cal-month__cell.is-outside { opacity: 0.45; }
.calendar-glass .cal-month__cell.is-today {
    border-color: rgba(76, 129, 222, 0.45);
    box-shadow: inset 0 0 0 1px rgba(76, 129, 222, 0.18);
}
.calendar-glass .cal-month__daynum {
    align-self: flex-start;
    border: 0; background: transparent; cursor: pointer;
    width: 24px; height: 24px; border-radius: 50%;
    font-size: 12px; font-weight: 600; color: #2b2f45;
}
.calendar-glass .cal-month__cell.is-today .cal-month__daynum {
    background: var(--glass-primary); color: #fff;
}
.calendar-glass .cal-month__events {
    display: flex; flex-direction: column; gap: 2px; min-height: 0;
}
.calendar-glass .cal-month__more {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: #4c81de;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1.2;
}
.calendar-glass .cal-month__more:hover,
.calendar-glass .cal-month__more:focus-visible {
    background: rgba(76, 129, 222, 0.12);
    color: #2f5fad;
    outline: none;
}
.calendar-glass .cal-day-list .cal-modal__panel {
    max-width: 420px;
    max-height: min(80vh, 560px);
    display: flex;
    flex-direction: column;
}
.calendar-glass .cal-day-list__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
    min-height: 0;
    flex: 1;
}
.calendar-glass .cal-day-list__item .cal-chip,
.calendar-glass .cal-day-list__item .cal-chip__main {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
    padding: 8px 10px;
    font-size: 12px;
}
.calendar-glass .cal-day-list__item .cal-chip--linked {
    align-items: stretch;
}
.calendar-glass .cal-day-list__empty {
    margin: 8px 0;
    font-size: 13px;
    color: #7a819a;
    text-align: center;
}
.calendar-glass .cal-day-list__foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(31, 45, 90, 0.08);
}
.calendar-glass .cal-chip {
    border: 0; cursor: pointer; text-align: left;
    border-radius: 6px; padding: 2px 6px;
    font-size: 11px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.calendar-glass .cal-chip--blue { background: var(--cal-blue); }
.calendar-glass .cal-chip--green { background: var(--cal-green); }
.calendar-glass .cal-chip--orange { background: var(--cal-orange); }
.calendar-glass .cal-chip--red { background: var(--cal-red); }
.calendar-glass .cal-chip--purple { background: var(--cal-purple); }
.calendar-glass .cal-chip--teal { background: var(--cal-teal); }

.calendar-glass .cal-week__grid { display: flex; flex-direction: column; gap: 4px; }
.calendar-glass .cal-week__head,
.calendar-glass .cal-week__allday-row,
.calendar-glass .cal-week__body {
    display: grid;
    grid-template-columns: 64px repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.calendar-glass .cal-week__dayhead {
    text-align: center;
    padding: 6px 4px;
    border-radius: 10px;
    background: rgba(255,255,255,0.5);
}
.calendar-glass .cal-week__dayhead.is-today {
    background: rgba(76, 129, 222, 0.12);
}
.calendar-glass .cal-week__dow {
    display: block; font-size: 11px; color: #7a819a; font-weight: 600;
}
.calendar-glass .cal-week__date {
    border: 0; background: transparent; cursor: pointer;
    font-size: 15px; font-weight: 700; color: #2b2f45;
}
.calendar-glass .cal-week__label {
    font-size: 10px; color: #7a819a; font-weight: 600;
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 4px 6px 0 0;
}
.calendar-glass .cal-week__allday,
.calendar-glass .cal-week__slot {
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(31, 45, 90, 0.08);
    background: rgba(255,255,255,0.45);
    padding: 3px;
    display: flex; flex-direction: column; gap: 2px;
}
.calendar-glass .cal-week__body {
    max-height: min(520px, 58vh);
    overflow-y: auto;
    scrollbar-width: thin;
}

.calendar-glass .cal-modal[hidden] { display: none !important; }
.calendar-glass .cal-modal {
    position: fixed; inset: 0; z-index: 12000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.calendar-glass .cal-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 28, 55, 0.48);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.calendar-glass .cal-modal__panel {
    position: relative; z-index: 1;
    width: min(480px, 100%);
    padding: 18px 20px;
    max-height: min(90vh, 720px);
    overflow-y: auto;
    background: var(--glass-bg-card, rgba(255, 255, 255, 0.82));
    border: 1px solid var(--glass-card-border, rgba(31, 45, 90, 0.12));
    border-radius: var(--glass-radius, 16px);
    box-shadow: var(--glass-card-shadow, 0 18px 40px rgba(20, 28, 55, 0.22));
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
}
.calendar-glass .cal-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.calendar-glass .cal-modal__head h2 {
    margin: 0;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.2rem);
    font-weight: 700;
    color: var(--glass-primary);
}
.calendar-glass .cal-modal__form { display: flex; flex-direction: column; gap: 12px; }
.calendar-glass .cal-field {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12px; font-weight: 600; color: #5b6280;
}
.calendar-glass .cal-field input,
.calendar-glass .cal-field textarea {
    border: 1px solid var(--glass-card-border, rgba(31, 45, 90, 0.14));
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #2b2f45;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--glass-card-shadow, 0 1px 3px rgba(20, 28, 55, 0.06));
}
.calendar-glass .cal-field textarea {
    border-radius: 14px;
    resize: vertical;
    min-height: 72px;
}
.calendar-glass .cal-field input:focus,
.calendar-glass .cal-field textarea:focus {
    outline: none;
    border-color: var(--glass-accent, #4c81de);
    box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.18);
}
.calendar-glass .cal-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calendar-glass .cal-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #2b2f45;
}
.calendar-glass .cal-colors {
    border: 0; margin: 0; padding: 10px 12px;
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    border-radius: 14px;
    background: rgba(60, 68, 177, 0.05);
    border: 1px solid rgba(60, 68, 177, 0.10);
}
.calendar-glass .cal-colors legend {
    width: 100%; float: none; padding: 0;
    font-size: 12px; font-weight: 600; color: #5b6280; margin-bottom: 2px;
}
.calendar-glass .cal-colors label {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    margin: 0;
}
.calendar-glass .cal-colors input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.calendar-glass .cal-swatch {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(20, 28, 55, 0.18);
}
.calendar-glass .cal-colors input:checked + .cal-swatch {
    outline: 2px solid var(--glass-primary, #3c44b1);
    outline-offset: 2px;
}
.calendar-glass .cal-swatch--blue { background: #4c81de !important; }
.calendar-glass .cal-swatch--green { background: #2f9e6b !important; }
.calendar-glass .cal-swatch--orange { background: #e08a3a !important; }
.calendar-glass .cal-swatch--red { background: #e0556b !important; }
.calendar-glass .cal-swatch--purple { background: #7a5cff !important; }
.calendar-glass .cal-swatch--teal { background: #1aa6a6 !important; }
.calendar-glass .cal-modal__actions {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px;
}
.calendar-glass .cal-modal__actions-right { display: flex; gap: 8px; margin-left: auto; }
.calendar-glass .cal-modal .cal-btn,
.calendar-glass .cal-modal .cal-icon-btn {
    border: 1px solid var(--glass-card-border, rgba(31, 45, 90, 0.12));
    background: rgba(255, 255, 255, 0.72);
    color: #2b2f45;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--glass-card-shadow, 0 1px 3px rgba(20, 28, 55, 0.08));
    transition: transform var(--glass-transition, 0.18s ease), background var(--glass-transition, 0.18s ease);
}
.calendar-glass .cal-modal .cal-btn { padding: 9px 16px; }
.calendar-glass .cal-modal .cal-btn--primary {
    background: linear-gradient(135deg, #4c5bd4, #3c44b1);
    border-color: transparent;
    color: #fff;
}
.calendar-glass .cal-modal .cal-btn--danger {
    background: rgba(224, 85, 107, 0.12);
    border-color: rgba(224, 85, 107, 0.28);
    color: #c13b52;
}
.calendar-glass .cal-modal .cal-btn--ghost {
    background: rgba(255, 255, 255, 0.7);
}
.calendar-glass .cal-modal .cal-icon-btn {
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
}
.calendar-glass .cal-modal .cal-btn:hover,
.calendar-glass .cal-modal .cal-icon-btn:hover {
    transform: translateY(-1px);
}

/* Profile embed */
.pp-panel .calendar-glass { margin-top: 4px; }
.pp-panel .calendar-glass .cal-month__cell { min-height: 72px; }
.pp-panel .calendar-glass .cal-week__body { max-height: min(420px, 50vh); }

.calendar-glass .cal-team-note {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #4a5270;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(31, 45, 90, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.calendar-glass .cal-chip--shared { opacity: 0.92; }
.calendar-glass .cal-readonly-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    z-index: 12001;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #2b2f45;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(31, 45, 90, 0.12);
    box-shadow: var(--glass-card-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.calendar-glass .cal-readonly-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 767.98px) {
    .calendar-glass .cal-toolbar { align-items: stretch; }
    .calendar-glass .cal-toolbar__actions { width: 100%; justify-content: space-between; }
    .calendar-glass .cal-month__cell { min-height: 68px; }
    .calendar-glass .cal-field-row { grid-template-columns: 1fr; }
    .calendar-glass .cal-week__label { font-size: 9px; }
}

/* Linked order chips — primary click opens order; pencil opens edit modal */
.calendar-glass .cal-chip--linked {
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}
.calendar-glass .cal-chip__main {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    padding: 2px 4px 2px 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-glass .cal-chip__edit {
    flex-shrink: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.15);
    color: inherit;
    padding: 0 5px;
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 6px 6px 0;
    opacity: 0.85;
}
.calendar-glass .cal-chip__edit:hover {
    background: rgba(0, 0, 0, 0.25);
    opacity: 1;
}

/* ==========================================================================
   Dashboard attention strip — home.blade.php (.dash-attention*)
   Actionable “Needs your attention” pills above dashboard stats.
   ========================================================================== */
.dashboard-glass .dash-attention {
    --dash-attn-ink: #ffffff;
    --dash-attn-muted: #ffffff;
    --dash-attn-accent: #e0556b;
    /* Same night-sky blue as .glass-surface (#14244a), lighter mid tone */
    --dash-attn-pill-bg: rgba(70, 98, 168, 0.78);
    --dash-attn-pill-bg-strong: rgba(70, 98, 168, 0.88);
    margin: 0 0 clamp(14px, 2.5vw, 20px);
}

.dashboard-glass .dash-attention__head {
    margin-bottom: 10px;
}

.dashboard-glass h2.dash-attention__title {
    margin: 0;
    font-size: clamp(0.82rem, 0.7rem + 0.55vw, 1rem);
    font-weight: 700;
    line-height: 1.25;
    color: #1f2d5a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard-glass .dash-attention__title i {
    color: var(--dash-attn-accent);
    font-size: 0.95em;
}

.dashboard-glass .dash-attention__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-glass .dash-attention__item {
    flex: 1 1 220px;
    min-width: min(100%, 220px);
    max-width: 100%;
}

.dashboard-glass .dash-attention__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--dash-attn-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dashboard-glass .dash-attention__link.glass-surface {
    background: var(--dash-attn-pill-bg);
    color: var(--dash-attn-ink);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 6px 18px rgba(7, 9, 25, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.dashboard-glass .dash-attention__link:hover,
.dashboard-glass .dash-attention__link:focus {
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--dash-attn-ink);
    background: var(--dash-attn-pill-bg-strong);
}

.dashboard-glass .dash-attention__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.9rem;
}

.dashboard-glass .dash-attention__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-glass .dash-attention__label {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

.dashboard-glass .dash-attention__meta {
    font-size: 0.72rem;
    line-height: 1.3;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-glass .dash-attention__value {
    flex-shrink: 0;
    min-width: 28px;
    padding: 0 10px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e0556b; /* sharp theme pink — same as .order-chat-unread-badge */
    color: #fff !important;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(224, 85, 107, 0.45);
}

.dashboard-glass .dash-attention__item[data-attn-key="balance"] .dash-attention__value {
    padding: 0 12px;
    min-width: auto;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
}

@media (max-width: 767.98px) {
    .dashboard-glass .dash-attention__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
        margin-right: -4px;
    }

    .dashboard-glass .dash-attention__item {
        flex: 0 0 min(88vw, 300px);
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-glass .dash-attention__link {
        transition: none;
    }
    .dashboard-glass .dash-attention__link:hover,
    .dashboard-glass .dash-attention__link:focus {
        transform: none;
    }
}

/* Order list — unread staff chat badge */
.order-chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e0556b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgba(224, 85, 107, 0.45);
}

/* =============================================================================
   34. MESSAGES HUB (messages.blade.php) — .messages-glass
   ============================================================================= */

.messages-glass {
    --msg-ink: #1f2d5a;
    --msg-muted: #5a647c;
    --msg-accent: #e0556b;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(12px, 2.5vw, 20px);
}

.messages-glass,
.messages-glass p,
.messages-glass a,
.messages-glass span,
.messages-glass h1,
.messages-glass h2 {
    font-family: 'Poppins', sans-serif;
    color: var(--msg-ink);
}

.messages-glass h1.messages-glass__title {
    margin: 0;
    font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
}

.messages-glass__shell.card {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.messages-glass__shell > .card-body {
    padding: clamp(14px, 2.5vw, 22px);
}

.messages-glass__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.messages-glass__lead {
    margin: 6px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--msg-muted);
}

.messages-glass__total-badge {
    flex-shrink: 0;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--msg-accent);
    color: #fff !important;
    font-size: 0.72rem;
    font-weight: 700;
}

.messages-glass__section + .messages-glass__section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(31, 45, 90, 0.08);
}

.messages-glass__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.messages-glass h2.messages-glass__section-title {
    margin: 0;
    font-size: clamp(0.78rem, 0.68rem + 0.45vw, 0.95rem);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.messages-glass__section-title i {
    color: #4c81de;
    font-size: 0.9em;
}

.messages-glass__section-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--msg-accent);
    background: rgba(224, 85, 107, 0.12);
    border-radius: 999px;
    padding: 2px 8px;
}

.messages-glass__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.messages-glass__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    /* Light glass — not the dark chrome --glass-bg from .glass-surface */
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(31, 45, 90, 0.08);
    box-shadow: 0 2px 10px rgba(31, 45, 90, 0.04);
    color: var(--msg-ink);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.messages-glass__row:hover,
.messages-glass__row:focus {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 6px 18px rgba(31, 45, 90, 0.08);
    color: var(--msg-ink);
}

.messages-glass__row-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(76, 129, 222, 0.12);
    color: #4c81de;
    font-size: 0.9rem;
}

.messages-glass__row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.messages-glass__row-title {
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messages-glass__row-meta {
    font-size: 0.72rem;
    color: var(--msg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messages-glass__badge {
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--msg-accent);
    color: #fff !important; /* beat .messages-glass span { color: --msg-ink } */
    font-size: 0.68rem;
    font-weight: 700;
}

.messages-glass__empty {
    margin: 0;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: var(--msg-muted);
}

@media (max-width: 479.98px) {
    .messages-glass__head { flex-direction: column; }
    .messages-glass__row { padding: 9px 10px; gap: 10px; }
}

/* --- Messages hub toolbar: filter pills + mark-all --- */
.messages-glass__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-bottom: 16px;
}

.messages-glass__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.messages-glass__filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--msg-ink);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(31, 45, 90, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.messages-glass__filter:hover,
.messages-glass__filter:focus {
    text-decoration: none;
    color: var(--msg-ink);
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.82);
}

.messages-glass__filter.is-active {
    color: #fff;
    background: linear-gradient(135deg, #6ca0ff, #4c81de);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(76, 129, 222, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.messages-glass__filter.is-active:hover,
.messages-glass__filter.is-active:focus {
    color: #fff;
}

.messages-glass__filter-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(31, 45, 90, 0.1);
    color: inherit;
}

.messages-glass__filter.is-active .messages-glass__filter-count {
    background: rgba(255, 255, 255, 0.28);
}

.messages-glass__mark-all {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: var(--msg-accent);
    background: rgba(224, 85, 107, 0.1);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.messages-glass__mark-all:hover,
.messages-glass__mark-all:focus {
    background: rgba(224, 85, 107, 0.18);
    transform: translateY(-1px);
    outline: none;
}

.messages-glass__mark-all:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.messages-glass__section--roster {
    padding: 12px 12px 4px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(76, 129, 222, 0.06), rgba(224, 85, 107, 0.07));
    border: 1px solid rgba(224, 85, 107, 0.16);
}
.messages-glass__section-count--roster {
    background: rgba(224, 85, 107, 0.14);
    color: #e0556b;
}
.messages-glass__filter-count--roster {
    background: #e0556b;
    color: #fff;
}
.messages-glass__row--roster.notif--roster-change {
    border: 1px solid rgba(224, 85, 107, 0.32);
    box-shadow: inset 3px 0 0 #e0556b;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(224, 85, 107, 0.08));
}
.messages-glass__row--roster.notif--roster-change:hover,
.messages-glass__row--roster.notif--roster-change:focus {
    border-color: rgba(224, 85, 107, 0.48);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(224, 85, 107, 0.12));
}
.messages-glass__row-icon--roster {
    background: linear-gradient(135deg, rgba(76, 129, 222, 0.18), rgba(224, 85, 107, 0.2));
    color: #e0556b;
}
.messages-glass__row-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-bottom: 0.2rem;
}
.messages-glass__badge--roster {
    background: #e0556b !important;
}
.messages-glass__badge--roster-seen {
    background: rgba(60, 68, 177, 0.14) !important;
    color: #3c44b1 !important;
}

@media (max-width: 479.98px) {
    .messages-glass__toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .messages-glass__mark-all {
        align-self: flex-end;
    }
}

/* =============================================================================
   35. ROSTER CHANGE CONFIRM (roster_change_confirm.blade.php) — .roster-change-glass
   Client FLG (light glass, pill CTAs) — not admin Soft Slate.
   ============================================================================= */

.roster-change-glass {
  --rc-ink: #1f2d5a;
  --rc-muted: #5a647c;
  --rc-accent: #e0556b;
  --rc-primary: #3c44b1;
  --rc-blue: #4c81de;
  --rc-panel: rgba(255, 255, 255, 0.78);
  --rc-panel-border: rgba(31, 45, 90, 0.08);
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(12px, 2.5vw, 22px);
  isolation: isolate;
}

/* Soft page atmosphere (gradient wash — not a flat white Bootstrap card) */
.roster-change-glass::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  pointer-events: none;
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(76, 129, 222, 0.16), transparent 55%),
    radial-gradient(90% 70% at 92% 12%, rgba(224, 85, 107, 0.10), transparent 50%),
    linear-gradient(180deg, rgba(251, 252, 255, 0.55), rgba(245, 247, 252, 0.2));
}

.roster-change-glass,
.roster-change-glass p,
.roster-change-glass a,
.roster-change-glass span,
.roster-change-glass td,
.roster-change-glass th,
.roster-change-glass strong,
.roster-change-glass label,
.roster-change-glass button,
.roster-change-glass input,
.roster-change-glass select,
.roster-change-glass h1 {
  font-family: 'Poppins', sans-serif;
  color: var(--rc-ink);
}

.app-content--inner .roster-change-glass h1.roster-change-glass__title,
.roster-change-glass h1.roster-change-glass__title {
  margin: 0;
  font-size: clamp(0.9rem, 0.7rem + 0.975vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rc-ink);
}

.roster-change-glass__shell.card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.roster-change-glass__shell > .card-body {
  padding: clamp(14px, 2.5vw, 22px);
  border-radius: 20px;
  background: var(--rc-panel);
  border: 1px solid var(--rc-panel-border);
  box-shadow:
    0 10px 32px rgba(31, 45, 90, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  min-width: 0;
  overflow-x: hidden;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .roster-change-glass__shell > .card-body {
    background: #f8f9fd;
  }
}

.roster-change-glass__head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.roster-change-glass__lead {
  margin: 6px 0 0;
  color: var(--rc-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 46rem;
}

.roster-change-glass__lead strong {
  color: var(--rc-ink);
  font-weight: 600;
}

.roster-change-glass__status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(76, 129, 222, 0.12);
  color: var(--rc-blue) !important;
  border: 1px solid rgba(76, 129, 222, 0.18);
}

.roster-change-glass__status.is-pending {
  background: rgba(224, 85, 107, 0.12);
  color: var(--rc-accent) !important;
  border-color: rgba(224, 85, 107, 0.2);
}

.roster-change-glass__note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--rc-panel-border);
  box-shadow: 0 2px 10px rgba(31, 45, 90, 0.04);
  font-size: 0.84rem;
  line-height: 1.45;
}

.roster-change-glass__alert {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

.roster-change-glass__alert.is-success {
  background: rgba(76, 129, 222, 0.12);
  color: var(--rc-blue);
}

.roster-change-glass__alert.is-error {
  background: rgba(224, 85, 107, 0.12);
  color: var(--rc-accent);
}

.roster-change-glass__table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border-radius: 16px;
  background: transparent;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.roster-change-glass__table-wrap .table-responsive {
  max-width: 100%;
  overflow-x: visible;
}

.roster-change-glass table.roster-change-glass__table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin: 0;
  background: transparent;
  color: var(--rc-ink);
}

.roster-change-glass table.roster-change-glass__table.table > thead > tr > th,
.roster-change-glass table.roster-change-glass__table.table > tbody > tr > td,
.roster-change-glass table.roster-change-glass__table.table > tbody > tr > th {
  border-top: 0;
  border-bottom: 0;
}

.roster-change-glass table.roster-change-glass__table.table {
  margin-bottom: 0;
}

.roster-change-glass table.roster-change-glass__table thead th {
  padding: 4px 8px 8px;
  border: 0;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-change-glass table.roster-change-glass__table thead th:nth-child(1) { width: 72px; }
.roster-change-glass table.roster-change-glass__table thead th:nth-child(2) { width: 12%; }
.roster-change-glass table.roster-change-glass__table thead th:nth-child(3) { width: 22%; }
.roster-change-glass table.roster-change-glass__table thead th:nth-child(4) { width: 14%; }
.roster-change-glass table.roster-change-glass__table thead th:nth-child(5) { width: 14%; }
.roster-change-glass table.roster-change-glass__table thead th.roster-change-glass__col-actions,
.roster-change-glass table.roster-change-glass__table thead th:last-child {
  width: 108px;
}

.roster-change-glass table.roster-change-glass__table tbody tr.roster-change-glass__row {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 10px rgba(31, 45, 90, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.roster-change-glass table.roster-change-glass__table tbody tr.roster-change-glass__row:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(31, 45, 90, 0.08);
}

.roster-change-glass table.roster-change-glass__table tbody td {
  padding: 10px 8px;
  border: 0;
  border-top: 1px solid var(--rc-panel-border);
  border-bottom: 1px solid var(--rc-panel-border);
  font-size: 0.84rem;
  vertical-align: middle;
  background: transparent;
  overflow: hidden;
  word-break: break-word;
}

.roster-change-glass table.roster-change-glass__table tbody td:first-child {
  border-left: 1px solid var(--rc-panel-border);
  border-radius: 18px 0 0 18px;
  padding-left: 12px;
  overflow: visible;
}

.roster-change-glass table.roster-change-glass__table tbody td:last-child {
  border-right: 1px solid var(--rc-panel-border);
  border-radius: 0 18px 18px 0;
  padding-right: 10px;
  overflow: visible;
}

.roster-change-glass__empty-row td {
  border-radius: 14px !important;
  text-align: center;
  color: var(--rc-muted);
  background: rgba(255, 255, 255, 0.7);
}

.roster-change-glass__type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(31, 45, 90, 0.08);
  color: var(--rc-ink);
}

.roster-change-glass__row.is-add .roster-change-glass__type,
.roster-change-glass__row.is-edit .roster-change-glass__type {
  background: rgba(76, 129, 222, 0.14);
  color: var(--rc-blue);
}

.roster-change-glass__row.is-remove .roster-change-glass__type {
  background: rgba(224, 85, 107, 0.14);
  color: var(--rc-accent);
}

.roster-change-glass__old {
  color: var(--rc-muted);
  text-decoration: line-through;
  font-size: 0.72rem;
  line-height: 1.3;
}

.roster-change-glass__arrow {
  margin: 0 3px;
  color: var(--rc-muted);
  font-size: 0.72rem;
}

.roster-change-glass__new {
  font-weight: 600;
  color: var(--rc-blue);
}

/* Stack old→new above the field so columns stay inside the card */
.roster-change-glass table.roster-change-glass__table tbody td .roster-change-glass__old,
.roster-change-glass table.roster-change-glass__table tbody td .roster-change-glass__arrow {
  display: inline;
}

.roster-change-glass__input.form-control,
.roster-change-glass__input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  height: 34px;
  padding: 4px 10px;
  border-radius: 999px !important;
  border: 1px solid rgba(31, 45, 90, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 2px rgba(31, 45, 90, 0.04);
  font-size: 0.78rem;
  color: var(--rc-ink);
}

.roster-change-glass__input:focus {
  border-color: rgba(76, 129, 222, 0.45);
  box-shadow: 0 0 0 3px rgba(76, 129, 222, 0.15);
  outline: none;
}

.roster-change-glass select.roster-change-glass__input {
  min-width: 0;
  padding-right: 1.6rem;
}

.roster-change-glass input[data-rc-field="name"].roster-change-glass__input {
  min-width: 0;
  max-width: 100%;
}

.roster-change-glass input[data-rc-field="quantity"].roster-change-glass__input {
  min-width: 0;
  width: 100%;
  text-align: center;
}

.roster-change-glass__row-actions {
  white-space: normal;
  text-align: right;
  vertical-align: middle;
}

.roster-change-glass__col-actions {
  width: 108px;
}

.roster-change-glass__hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(31, 45, 90, 0.72);
  max-width: 46rem;
}

/* Compact row pill buttons (Remove / Reset row / Undo remove) — stacked in actions col */
.roster-change-glass__pill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.roster-change-glass__row-actions .roster-change-glass__pill-btn:last-child {
  margin-bottom: 0;
}

.roster-change-glass__pill-btn:hover,
.roster-change-glass__pill-btn:focus {
  transform: translateY(-1px);
  outline: none;
}

.roster-change-glass__pill-btn--ghost {
  background: rgba(31, 45, 90, 0.07);
  color: var(--rc-ink);
}

.roster-change-glass__pill-btn--ghost:hover,
.roster-change-glass__pill-btn--ghost:focus {
  background: rgba(31, 45, 90, 0.12);
}

.roster-change-glass__pill-btn--danger {
  background: rgba(224, 85, 107, 0.12);
  color: var(--rc-accent);
}

.roster-change-glass__pill-btn--danger:hover,
.roster-change-glass__pill-btn--danger:focus {
  background: rgba(224, 85, 107, 0.2);
}

.roster-change-glass__row.is-remove td {
  opacity: 0.88;
  background: rgba(224, 85, 107, 0.04);
}

.roster-change-glass__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
}

.roster-change-glass__actions-secondary,
.roster-change-glass__actions-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.roster-change-glass__actions-primary {
  margin-left: auto;
}

.roster-change-glass__form {
  display: inline-flex;
  margin: 0;
}

/* FLG confirm dialog — Remove / Reject / Approve (replaces native window.confirm) */
.roster-change-glass__dialog {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.roster-change-glass__dialog[hidden] {
  display: none !important;
}

.roster-change-glass__dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 28, 48, 0.38);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.roster-change-glass__dialog-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 1px 3px 5px rgba(255, 255, 255, 0.30),
    inset -1px -3px 3px rgba(255, 255, 255, 0.10),
    inset 0 2px 10px rgba(53, 53, 53, 0.05),
    0 24px 60px rgba(15, 23, 53, 0.28);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  overflow: hidden;
}

.roster-change-glass__dialog-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 80% at 0% 0%,
    rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%);
}

.app-content--inner .roster-change-glass h2.roster-change-glass__dialog-title,
.roster-change-glass__dialog-title {
  position: relative;
  margin: 0 0 0.55rem;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--rc-ink);
  font-family: 'Poppins', sans-serif;
}

.roster-change-glass__dialog-text {
  position: relative;
  margin: 0;
  color: var(--rc-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 500;
  white-space: pre-line;
}

.roster-change-glass__dialog-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1.15rem;
}

body.roster-change-dialog-open {
  overflow: hidden;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .roster-change-glass__dialog-panel {
    background: #ffffff;
  }
}

/* Primary page CTAs — always pill-shaped */
.roster-change-glass__btn,
a.roster-change-glass__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 42px;
  font-size: 0.84rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.roster-change-glass__btn:hover,
.roster-change-glass__btn:focus,
a.roster-change-glass__btn:hover,
a.roster-change-glass__btn:focus {
  transform: translateY(-1px);
  outline: none;
}

.roster-change-glass__btn--approve {
  background: linear-gradient(135deg, var(--rc-primary), var(--rc-blue));
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(60, 68, 177, 0.28);
}

.roster-change-glass__btn--approve:hover,
.roster-change-glass__btn--approve:focus {
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(60, 68, 177, 0.34);
  color: #fff !important;
}

.roster-change-glass__btn--reject {
  background: rgba(224, 85, 107, 0.12);
  color: var(--rc-accent) !important;
  border: 1px solid rgba(224, 85, 107, 0.22);
}

.roster-change-glass__btn--reject:hover,
.roster-change-glass__btn--reject:focus {
  background: rgba(224, 85, 107, 0.2);
}

.roster-change-glass__btn--ghost {
  background: rgba(255, 255, 255, 0.86);
  color: var(--rc-ink) !important;
  border: 1px solid var(--rc-panel-border);
  box-shadow: 0 2px 8px rgba(31, 45, 90, 0.05);
}

.roster-change-glass__btn--ghost:hover,
.roster-change-glass__btn--ghost:focus {
  background: #fff;
}

/* Secondary: Save draft — quieter than Approve, clearer than ghost */
.roster-change-glass__btn--secondary {
  background: rgba(60, 68, 177, 0.08);
  color: var(--rc-primary) !important;
  border: 1px solid rgba(60, 68, 177, 0.18);
  font-weight: 600;
  box-shadow: none;
}

.roster-change-glass__btn--secondary:hover,
.roster-change-glass__btn--secondary:focus {
  background: rgba(60, 68, 177, 0.14);
}

.roster-change-glass__btn:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

/* Post-approve roster markers (shared client surfaces) */
.roster-row-change--admin,
.packlist-glass tr.roster-row-change--admin,
.order-detail-glass tr.roster-row-change--admin {
  background: rgba(76, 129, 222, 0.12);
  color: #4c81de;
}

.roster-row-change--client,
.packlist-glass tr.roster-row-change--client,
.order-detail-glass tr.roster-row-change--client {
  background: rgba(224, 85, 107, 0.12);
  color: #e0556b;
}

@media (prefers-reduced-motion: reduce) {
  .roster-change-glass table.roster-change-glass__table tbody tr.roster-change-glass__row,
  .roster-change-glass__btn,
  .roster-change-glass__pill-btn,
  a.roster-change-glass__btn {
    transition: none;
  }

  .roster-change-glass table.roster-change-glass__table tbody tr.roster-change-glass__row:hover,
  .roster-change-glass__btn:hover,
  .roster-change-glass__pill-btn:hover {
    transform: none;
  }

  .roster-change-glass__dialog-panel {
    transition: none;
  }
}

/* Tablet / narrow — keep pills, allow wrap without page-level horiz scroll */
@media (max-width: 991.98px) {
  .roster-change-glass table.roster-change-glass__table thead th.roster-change-glass__col-actions,
  .roster-change-glass table.roster-change-glass__table thead th:last-child {
    width: 88px;
  }

  .roster-change-glass table.roster-change-glass__table tbody td:first-child,
  .roster-change-glass table.roster-change-glass__table tbody td:last-child {
    border-radius: 16px;
  }

  .roster-change-glass table.roster-change-glass__table tbody td:first-child {
    border-radius: 16px 0 0 16px;
  }

  .roster-change-glass table.roster-change-glass__table tbody td:last-child {
    border-radius: 0 16px 16px 0;
  }
}

/* Mobile card stack — no horizontal scroll at 360px */
@media (max-width: 767.98px) {
  .roster-change-glass__head {
    flex-direction: column;
    align-items: stretch;
  }

  .roster-change-glass__status {
    align-self: flex-start;
  }

  .roster-change-glass__table-wrap {
    overflow-x: visible;
  }

  .roster-change-glass__table-wrap .table-responsive {
    overflow: visible;
  }

  .roster-change-glass table.roster-change-glass__table,
  .roster-change-glass table.roster-change-glass__table thead,
  .roster-change-glass table.roster-change-glass__table tbody,
  .roster-change-glass table.roster-change-glass__table tr,
  .roster-change-glass table.roster-change-glass__table th,
  .roster-change-glass table.roster-change-glass__table td {
    display: block;
    width: 100%;
  }

  .roster-change-glass table.roster-change-glass__table {
    table-layout: auto;
    border-spacing: 0;
  }

  .roster-change-glass table.roster-change-glass__table thead th:nth-child(n) {
    width: auto;
  }

  .roster-change-glass table.roster-change-glass__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .roster-change-glass table.roster-change-glass__table tbody tr.roster-change-glass__row {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--rc-panel-border);
    box-shadow: 0 2px 10px rgba(31, 45, 90, 0.05);
  }

  .roster-change-glass table.roster-change-glass__table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px dashed rgba(31, 45, 90, 0.08) !important;
  }

  .roster-change-glass table.roster-change-glass__table tbody td:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0;
  }

  .roster-change-glass table.roster-change-glass__table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rc-muted);
  }

  .roster-change-glass__row-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    white-space: normal;
  }

  .roster-change-glass__pill-btn {
    width: auto;
    min-width: 5.5rem;
    margin: 0;
  }

  .roster-change-glass__input.form-control,
  .roster-change-glass__input {
    width: auto;
    max-width: 62%;
    min-width: 0;
    margin-top: 0;
    display: inline-block;
  }

  .roster-change-glass input[data-rc-field="name"].roster-change-glass__input {
    max-width: 62%;
  }

  .roster-change-glass__empty-row td {
    text-align: left;
  }

  .roster-change-glass__empty-row td::before {
    content: none;
  }

  .roster-change-glass__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .roster-change-glass__form,
  .roster-change-glass__btn,
  a.roster-change-glass__btn {
    width: 100%;
  }
}

@media (max-width: 359.98px) {
  .roster-change-glass {
    padding-left: 8px;
    padding-right: 8px;
  }

  .roster-change-glass__shell > .card-body {
    padding: 12px;
  }
}

/* ==========================================================================
   § Marketing popups (.xrg-mkt*) — Live & Marketing campaigns
   ========================================================================== */

.xrg-mkt-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 24, 40, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.xrg-mkt-card {
  position: relative;
  width: min(420px, 100%);
  padding: 1.35rem 1.4rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 50px rgba(20, 24, 40, 0.22);
  color: #1a1d26;
  animation: xrgMktIn 0.28s ease;
}

@keyframes xrgMktIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.xrg-mkt-card--flg-urgent {
  border-top: 3px solid #e0556b;
}

.xrg-mkt-card--flg-promo {
  border-top: 3px solid #3c44b1;
}

.xrg-mkt-card--flg-info {
  border-top: 3px solid #11c5db;
}

.xrg-mkt-close {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

.xrg-mkt-title {
  margin: 0 1.5rem 0.55rem 0;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
  font-weight: 700;
}

.xrg-mkt-body {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #3a3f4b;
}

.xrg-mkt-body p { margin: 0 0 0.5rem; }

.xrg-mkt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  align-items: center;
}

.xrg-mkt-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #3c44b1;
  color: #fff !important;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
}

.xrg-mkt-cta:hover { background: #4c81de; color: #fff !important; }

.xrg-mkt-dismiss {
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

html.xrg-mkt-open { overflow: hidden; }