/* ============================================
   REPAIRS POS STYLESHEET — Cell Phone Planet
   Color Palette (matches pos.css):
     Primary Blue:    #2563EB
     Medium Blue:     #3B82F6
     Light Blue:      #60A5FA
     Orange Accent:   #F97316
     Dark Orange:     #EA580C
     Light BG:        #F8FAFC
     Dark Text:       #1E293B
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
    --primary: #2563EB;
    --primary-mid: #3B82F6;
    --primary-light: #60A5FA;
    --accent: #F97316;
    --accent-hover: #EA580C;
    --bg-light: #F8FAFC;
    --text-dark: #1E293B;
    --success: #34D399;
    --success-dark: #10B981;
    --danger: #EF4444;
    --warning: #FBBF24;
    --muted: #94A3B8;
}
/* ========== BACKGROUND ========== */
/* Background inherited from index.css (shared dashboard bg) */

/* ========== PRINT RECEIPT ========== */
@media print {
    body * {
        visibility: hidden;
        
    }
    #receiptPrint, #receiptPrint * {
        visibility: visible;
    }
    #receiptPrint {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}

/* ── House type stack ──────────────────────────────────────────────────────
   index.css sets `html, body { font-family: 'DM Sans' }` app-wide. This file
   is loaded only by the checkout page, so overriding body here puts just this
   page on the house stack without touching the legacy pages that still expect
   DM Sans. Equal specificity, later file — it wins on source order.
   Everything declaring `font-family: inherit` follows automatically. */
body {
    font-family: var(--font-ui);
}

/* ---------- Receipt Container ---------- */
/* Stays on Courier New deliberately — this mirrors what the thermal printer
   emits, so it must not follow the house stack. Same for the print templates
   in index.php. */
.receipt-container {
    display: none;
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--font-num);
    background: white;
    color: black;
    font-weight: bold;
}
.receipt-header {
    text-align: center;
    border-bottom: 2px dashed #000;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.receipt-header h1 {
    margin: 0;
    font-size: 20px;
}
.receipt-header p {
    margin: 2px 0;
    font-size: 12px;
}
.receipt-info {
    font-size: 11px;
    margin: 10px 0;
}
.receipt-items {
    margin: 15px 0;
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
    padding: 10px 0;
}
.receipt-item {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    font-size: 11px;
}
.receipt-totals {
    margin: 10px 0;
    font-size: 12px;
}
.receipt-total-row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}
.receipt-total-row.grand-total {
    font-size: 16px;
    font-weight: bold;
    border-top: 2px solid #000;
    padding-top: 5px;
    margin-top: 10px;
}
.receipt-footer {
    text-align: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 2px dashed #000;
    font-size: 11px;
}
.receipt-footer p {
    margin: 5px 0;
}

/* ========== CHECKOUT HEADER BAR ========== */
.checkout-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.12);
}
.checkout-date-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}
.checkout-date-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 8px;
    color: #444;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}
.checkout-date-input:hover,
.checkout-date-input:focus {
    border-color: rgba(37, 99, 235, 0.45);
    background: rgba(255, 255, 255, 0.09);
}
.checkout-date-input::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(0.5) saturate(3) hue-rotate(200deg);
    cursor: pointer;
    width: 20px;
    height: 20px;
}
/* Trimmed to make room for Recent Orders beside it. The stepper row has three
   numbered chips and two connector lines to fit first; at 14px/6px-12px the
   clock and the button together pushed the last chip's label into wrapping. */
.checkout-live-clock {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-mid);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 8px;
    padding: 5px 10px;
    white-space: nowrap;
}

/* ========== BRAND DROPDOWNS ========== */
.brand-dropdowns {
    display: flex;
    gap: 10px;
    flex: 1;
}
.brand-dropdown {
    flex: 1;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    appearance: none;
    -webkit-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='%230d2a52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.brand-dropdown:hover {
    border-color: var(--glass-border);
    background: rgba(255, 255, 255, 0.85);
}
.brand-dropdown:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.9);
}
.brand-dropdown option {
    background: #fff;
    color: var(--text-primary);
    padding: 10px;
}

/* ========== CATEGORY / SEARCH ROW ========== */
.category-search-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

/* ========== ACTIVE REPAIRS SECTION ========== */
.section-title {
    color: var(--text-dark);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Glass container for active repairs column */
.repairs-glass-container {
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(100, 160, 220, 0.30);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 20px rgba(60, 100, 180, 0.10);
    width: 100%;
}

/* Active repairs header */
.active-repairs-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.active-repairs-title {
    font-size: 13px;
    font-weight: 700;
    color: #0d2a52;
}
.active-repairs-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.35);
    color: #2563EB;
    font-size: 12px;
    font-weight: 800;
}

.active-repairs-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.active-repairs-grid .active-repair-card {
    width: 100%;
}

/* More repairs badge */
.active-repairs-more-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    border: 2px solid rgba(37, 99, 235, 0.35);
    color: #2563EB;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.active-repairs-more-badge:hover {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(37, 99, 235, 0.6);
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
}
.active-repair-card {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: block;
}
.active-repair-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.7);
    border-color: var(--glass-border);
}
.repair-card-header {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    align-items: flex-start;
}
.repair-card-image {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid rgba(37, 99, 235, 0.15);
    background: rgba(255, 255, 255, 0.9);
    padding: 4px;
    flex-shrink: 0;
}
.repair-card-info {
    flex: 1;
    min-width: 0;
}
.repair-card-title {
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.repair-card-status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-in-progress {
    background: rgba(37, 99, 235, 0.15);
    color: var(--primary);
    border: 1px solid rgba(37, 99, 235, 0.3);
}
.status-parts-order {
    background: rgba(251, 191, 36, 0.15);
    color: #D97706;
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.repair-card-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(37, 99, 235, 0.08);
}
.repair-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.detail-label {
    color: var(--muted);
    font-weight: 500;
}
.detail-value {
    color: var(--text-dark);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.no-repairs-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(37, 99, 235, 0.1);
}
.no-repairs-icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.no-repairs-message p {
    color: var(--muted);
    font-size: 16px;
    margin: 0;
}

/* ========== QUICK ACCESS GRID ========== */
.quick-access-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    padding-bottom: 8px;
}
.quick-btn {
    position: relative;
    background: linear-gradient(135deg, #ffffff, #ffffff);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding: 0;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    overflow: visible;
    flex-shrink: 0;
}
.quick-btn:hover {
    border-color: rgba(37, 99, 235, 0.7);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
}
.quick-btn img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}
.quick-btn:hover img {
    opacity: 1;
    filter: grayscale(0%) drop-shadow(2px 3px 2px rgba(10, 76, 208, 0.35));
}
.quick-btn .quick-name-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75px;
    transition: color 0.3s ease;
}
.quick-btn:hover .quick-name-label {
    color: var(--text-primary);
}
.quick-price {
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
}

/* ========== POS GRID LAYOUT ========== */
/* Two columns. The third was the Active Repairs sidebar, a fixed 280px of six
   links that all went to the same page; removing it hands 300px (the column
   plus its gap) to the parts grid, which is the thing that was actually short
   of room. */
.pos-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}
.pos-left,
.pos-right,
.pos-repairs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ========== CATEGORY TABS ========== */
.category-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.category-tab {
    padding: 6px 14px;
    background: rgba(37, 99, 235, 0.06);
    border: 2px solid rgba(37, 99, 235, 0.15);
    border-radius: 18px;
    color: var(--text-dark);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.category-tab:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.3);
}
.category-tab.active {
    background: rgba(37, 99, 235, 0.6);
    border-color: var(--primary);
    color: white;
}

/* ========== PRODUCT SEARCH ========== */
.search-wrapper {
    min-width: 250px;
    /* Capped. .tb-left is the toolbar's 1fr left column and this is now the only
       thing in it — Check Warehouse moved into the grid — so `flex: 1 1 auto`
       alone stretched the box across the whole column and ran it up against the
       quick-action buttons in the centre. A search box does not get more useful
       for being wider than the text anyone types into it. */
    flex: 1 1 auto;
    max-width: 420px;
    position: relative;
    display: flex;
    align-items: center;
}
.product-search {
    width: 100%;
    padding: 14px 60px 14px 24px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-ui);
    outline: none;
    transition: all 0.25s ease;
}
.product-search::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}
.product-search:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--accent);
}

/* ---------- Shared Search Circle Button ---------- */
.search-circle-btn {
    position: absolute;
    right: 5px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same accent ramp as the Continue / Complete Sale buttons.
       !important clears embossed.css's catch-all
       `body.embossed-mode button:not(.dark-toggle-label):not(.emb-seg-btn)`
       at specificity (0,2,2), which repaints every button on the page. */
    background: linear-gradient(135deg, var(--accent2, #2980d4), var(--accent, #F97316)) !important;
    transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
    box-shadow: 0 4px 12px rgba(26, 95, 168, 0.35);
    flex-shrink: 0;
}
.search-circle-btn:hover {
    filter: brightness(1.06);
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(26, 95, 168, 0.45);
}
/* ========== CUSTOMER CARD ========== */
.glass-card-cus {
    position: relative;
    width: 100%;
    min-height: 340px;
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    padding: 30px;
    box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    display: flex;
    flex-direction: column;
}
/* ========== PRODUCTS GLASS CONTAINER ========== */
.products-glass-container {
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(100, 160, 220, 0.30);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(60, 100, 180, 0.10);
}
.products-glass-container .category-search-row {
    margin-bottom: 14px;
}

/* ========== PRODUCTS GRID ========== */
.products-card {
    padding: 0;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* ---------- Product Card ---------- */
.product-card {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.6);
}
.product-card::before {
    display: none;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* -- Card Top (glass area with name + image) -- */
.card-top {
    background: rgba(255,255,255,0.5);
    /* Top padding reserves the badge row. Applied to every card, badge or not,
       so names sit at the same height right across the grid. */
    padding: 36px 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px 20px 0 0;
}
.product-card .product-name {
    color: var(--text-primary, #1e293b);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* -- Quality grade badge (MobileSentrix-style, card's top-left corner) --
   Room for it is made VERTICALLY, via .card-top's padding-top below, not by
   padding .product-name inwards: these cards are only ~250px wide, so clearing
   both corners horizontally would have left barely 90px for the name and sent
   every longer part onto four or five lines. */
.part-grade {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 3;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-ui, inherit);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    pointer-events: none;   /* never intercept the click that adds the part */
}

/* -- Provider mark (card's top-right corner) --
   The pill rules below are COPIED VERBATIM from activerepairs.css so the two
   pages render the identical object. index.php does not load that stylesheet,
   and pulling it in for three rules would drag the whole Active Repairs sheet
   onto the till screen. If either copy changes, change both — they are meant
   to stay in step, and the point of the mark is that it looks the same
   everywhere. */
.part-prov {
    position: absolute;
    top: 9px;
    right: 11px;
    z-index: 3;
    pointer-events: none;   /* the whole card is the click target */
}

.source-pill {
    /* inline-flex, not inline-block: the pill carries artwork rather than text,
       and baseline alignment leaves a logo sitting a pixel or two low. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Height-led with width:auto, so each mark keeps its own proportions rather
   than being squeezed into one shared box.

   EVERY RULE HERE IS SCOPED UNDER .part-prov, and it has to be. This page has
       .product-card img { width:130px; height:130px; background:white;
                           padding:5px; border-radius:12px }
   for the part photo — (0,1,1), which beats a bare .src-ico at (0,1,0). The
   marks were being rendered as 130px white tiles with the logo shrunk inside.
   Prefixing lifts these to (0,2,0), which wins, and the three resets below
   undo the photo styling the marks inherited. Active Repairs needed none of
   this because it has no .product-card img rule to fight. */
.part-prov .src-ico {
    width: auto;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
    background: none;
    padding: 0;
    border-radius: 0;
}
/* The shop mark is roughly square, so its height IS its size. */
.part-prov .src-ico-house { height: 15px; }
/* The Mobile Sentrix wordmark is wide with small type inside it — shorter,
   with a ceiling so an unexpectedly wide file cannot stretch the pill. */
.part-prov .src-ico-prov  { height: 12px; max-width: 82px; }
/* Same per-artwork sizing as activerepairs.css — see the note there. Still
   scoped under .part-prov so it clears .product-card img at (0,1,1). */
.part-prov .src-ico-maya  { height: 17px; }

/* In House: dashed outline, filled to match the logo's own backdrop. cp.png
   ships with an OPAQUE near-white background, so on a transparent pill the
   logo's rectangle shows as a pale block floating inside it. Painting the pill
   that same near-white makes the two read as one surface.

   --cp-logo-bg is an ESTIMATE, shared with activerepairs.css. If a seam shows
   at the logo's edge, correct that one value in both files. The permanent fix
   is upstream: re-save cp.png with a transparent background. */
.source-pill-plain {
    --cp-logo-bg: #f4f7fb;
    background: var(--cp-logo-bg) !important;
    border: 1.5px dashed rgba(120, 140, 170, 0.42);
    /* The border adds 3px across; trimmed from the padding so the pill stays
       the same size as the tinted ones. */
    padding: 1px 8px;
}

.product-card img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    border-radius: 12px;
    background: white;
    padding: 5px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* -- Card Bottom -- */
.card-bottom {
    background: rgba(255,255,255,0.25);
    padding: 18px 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    text-align: center;
    position: relative;
}
.card-bottom-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
}
.detail-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
}
.detail-row-full {
    justify-content: center;
}
.detail-item {
    color: var(--text-secondary, #64748b);
    font-size: 11px;
    font-family: var(--font-num);
    font-weight: 400;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Cost Display - inline under model */
.cost-display {
    color: var(--text-secondary, #94a3b8);
    font-size: 10px;
    font-family: var(--font-num);
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* -- Card Bottom Footer (stock badge + price) -- */
.card-bottom-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
}
.product-card .product-price {
    display: block;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg, #2563EB 0%, #2563EB 40%, #F97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stock Badge - inline in card footer */
.stock-badge {
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 10px;
    padding: 0 10px;
    white-space: nowrap;
    letter-spacing: 0.3px;
    background: transparent;
    border: 1.5px dashed transparent;   /* colour comes from the variant below */
}
/* Outline, not fill. The colour moved from a solid wash to a dashed ring so the
   label itself can be read as engraved rather than sitting on a coloured chip.

   border-style is set on .stock-badge above — these rules have ALWAYS declared
   border-color, but with no style to render against it painted nothing, so the
   colour was doing no work at all until now. Same trap as the theme catch-alls.

   Alpha lifted from .3 to .55: a dashed border shows roughly half as much ink
   as a solid one, so the value that read correctly as a solid edge disappears
   as a dashed one. */
.stock-badge-green {
    color: rgba(22, 101, 52, 1);
    border-color: rgba(34, 197, 94, 0.55);
}
.stock-badge-yellow {
    color: rgba(161, 98, 7, 1);
    border-color: rgba(234, 179, 8, 0.55);
}
.stock-badge-red {
    color: rgba(153, 27, 27, 1);
    border-color: rgba(239, 68, 68, 0.55);
}

/* -- Brand Badge (circle logo) -- */
.brand-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.brand-badge img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
.brand-badge-empty {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.product-info {
    text-align: center;
}
.product-name {
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 5px;
}
.product-imei {
    color: var(--muted);
    font-size: 10px;
    font-family: var(--font-num);
    margin-bottom: 3px;
}
.product-price {
    color: var(--accent);
    font-weight: 700;
    font-size: 18px;
}

/* ========== CUSTOMER CARD ========== */
.customer-card {
    padding: 20px;
}

/* ---------- Top Row: Date | Time | Search ---------- */
.checkout-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.checkout-top-divider {
    width: 1px;
    height: 24px;
    background: rgba(37, 99, 235, 0.2);
    flex-shrink: 0;
}
.checkout-top-row .customer-search-wrapper {
    margin-bottom: 0;
}
.checkout-top-row .checkout-date-picker {
    flex-shrink: 0;
}
.checkout-top-row .checkout-live-clock {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- Customer Search ---------- */
.customer-search-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
    flex: 1;
    min-width: 0;
}
.customer-search-input {
    width: 100%;
    padding: 14px 60px 14px 24px;
    background: #ffffff;
    border: none;
    border-radius: 50px;
    color: #1e293b;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.customer-search-input::placeholder {
    color: #b0b8c4;
    font-weight: 400;
}
.customer-search-input:focus {
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
}
.search-result {
    min-height: 30px;
    font-size: 13px;
    color: #2d5a88;
}
/* Shown on a part card that's appearing under a model other than its own.
   Without it, browsing "12 Pro" and seeing a card labelled "iPhone - 12" looks
   like a filtering bug rather than a compatible part. */
.product-fits {
    font-size: 10px;
    font-weight: 700;
    color: #059669;
    text-align: center;
    margin-top: 2px;
}

/* Customer name and phone centred in their boxes. Scoped by id rather than
   .form-input, which is shared by inputs elsewhere on the page. The phone also
   gets the house figure stack so the digits line up with the search chip. */
#customerName,
#customerPhone {
    text-align: center;
    font-weight: 700;
    /* House blue. Not var(--accent) — this file overrides --accent to orange,
       so that token doesn't resolve to a blue here; --brand-blue exists in
       index.css:root precisely so the colour survives that.
       An ID beats the .form-input rules and embossed.css's --emb-ink, so this
       holds in every theme without !important. */
    color: var(--brand-blue, #1a5fa8);
}
#customerPhone {
    font-family: var(--font-num);
}
/* Placeholders stay light and unbolded — they're prompts, not values, and
   would otherwise inherit the weight and colour above. */
#customerName::placeholder,
#customerPhone::placeholder {
    font-weight: 500;
    color: #94A3B8;
}
body.dark-mode #customerName,
body.dark-mode #customerPhone { color: #e2e8f0; }

/* A raised green chip — a match is good news, and it should read as something
   you press rather than a notice you read. Lifts on hover, presses in on
   click, so the "Click to select" hint is backed by how it behaves. */
.customer-found {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(180deg, #E8F7EE 0%, #D6F0E0 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    padding: 12px 16px;
    /* Spacing lives on the chip, not on .search-result — that container is
       always in the DOM, so a margin there would leave a permanent gap above
       the name field even with no search result. Generous at the bottom
       because the chip lifts 2px and casts --e3 on hover. */
    margin: 8px 0 18px;
    color: #14532d;
    cursor: pointer;
    box-shadow: var(--e2, 0 6px 18px rgba(13, 42, 82, 0.12));
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.customer-found:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
    box-shadow: var(--e3, 0 12px 28px rgba(13, 42, 82, 0.18));
}
.customer-found:active {
    transform: translateY(0);
    box-shadow: var(--inset, inset 0 1px 3px rgba(13, 42, 82, 0.10));
}
/* Two columns instead of four stacked lines: who it is on the left, what they
   have on the right. The "Name:" / "Phone#:" labels are gone — a name and a
   phone number don't need announcing — and the two ✓ marks collapse into one
   badge, since a green chip only ever appears on a match. */
.cf-id {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.cf-check {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10B981;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.cf-text { min-width: 0; }

.customer-found-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: #14532d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-found-phone {
    font-family: var(--font-num);
    font-size: 13px;
    color: #4d7c5f;
    line-height: 1.3;
}

.cf-meta {
    flex: 0 0 auto;
    text-align: right;
}
.cf-points {
    font-family: var(--font-num);
    font-size: 15px;
    font-weight: 700;
    color: #047857;
    line-height: 1.25;
}
.cf-pts-unit {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
}
/* Was rgba(255,255,255,0.6) inline — white on a pale green chip, effectively
   invisible. It's a hint, so quiet but readable. */
.cf-hint {
    font-size: 11px;
    color: #4d7c5f;
    line-height: 1.3;
}

/* Dark glass: the pale green would glare, so tint the card instead of filling it */
body.dark-mode .customer-found {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(52, 211, 153, 0.28);
    color: #d1fae5;
}
body.dark-mode .customer-found-name { color: #ecfdf5; }
body.dark-mode .customer-found-phone { color: #86b39a; }
body.dark-mode .cf-points { color: #34D399; }
body.dark-mode .cf-hint { color: #86b39a; }
body.dark-mode .cf-check { background: #34D399; color: #06281c; }
.no-customer-found {
    color: var(--danger);
    font-weight: 600;
    padding: 10px;
    margin-bottom: 14px;   /* same clearance as the found chip */
    text-align: center;
}

/* ========== REWARD POINTS ========== */
.reward-points-section {
    background: rgba(37, 99, 235, 0.04);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.reward-points-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.points-label {
    color: var(--text-dark);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.points-badge {
    background: rgba(37, 99, 235, 0.6);
    color: white;
    padding: 3px 10px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid var(--primary);
    white-space: nowrap;
}
.points-value {
    color: var(--primary-mid);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.points-divider {
    width: 1px;
    height: 20px;
    background: rgba(37, 99, 235, 0.25);
    flex-shrink: 0;
}
.points-input-inline {
    width: 70px;
    padding: 5px 8px;
    background: rgba(238, 240, 243, 0.98);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 6px;
    color: var(--text-dark);
    font-size: 12px;
    font-weight: 600;
    outline: none;
    font-family: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
}
.points-input-inline::-webkit-outer-spin-button,
.points-input-inline::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.points-input-inline:focus {
    border-color: rgba(37, 99, 235, 0.5);
}
.redeem-btn-inline {
    padding: 5px 12px;
    background: rgba(37, 99, 235, 0.6);
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: white;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}
.redeem-btn-inline:hover {
    background: rgba(37, 99, 235, 0.85);
}
.redeem-message {
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
}
.redeem-success {
    color: var(--success);
}
.redeem-error {
    color: var(--danger);
}

/* ========== FORM ELEMENTS ========== */
.card-title {
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}
.form-group {
    margin-bottom: 0;
}
.form-group label,
.form-group2 label {
    display: block;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.required {
    color: var(--danger);
    font-weight: 700;
    margin-left: 3px;
}
.form-input,
.form-select {
    width: 100%;
    padding: 12px 15px;
    background: rgb(254, 255, 255);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #444;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}
.form-input:focus,
.form-select:focus {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(37, 99, 235, 0.5);
}
.form-input2,
.form-select2 {
    width: 100%;
    padding: 12px 15px;
    background: rgb(255, 255, 255);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #444;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}
.form-input2:focus,
.form-select2:focus {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(37, 99, 235, 0.5);
}
.form-select option {
    background: var(--text-dark);
    color: white;
}

/* ========== NOTES TEXTAREA ========== */
#saleNotes {
    width: 100%;
    resize: vertical;
    min-height: 70px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 10px;
    color: #1e293b;
    padding: 12px 15px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
}
#saleNotes:focus {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.35);
}
.form-group.notes-group {
    grid-column: 1 / -1;
    margin-top: 10px;
}

/* ========== PAYMENT TYPE SELECTOR ========== */
.payment-icons-row {
    display: flex;
    gap: 10px;
}
.payment-icon-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(37, 99, 235, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}
.payment-icon-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--primary-light);
}
/* Old blue-tint selected state removed — the shared accent rule below owns it */
.payment-icon-btn img {
    transition: transform 0.2s ease;
}
.payment-icon-btn.active img {
    transform: scale(1.15);
}
/* Corner checkmark removed — the accent fill already says which one is picked,
   and the tick just repeated it. */
.payment-icon-btn {
    position: relative;
}

/* ========== DEVICE LOCATION SELECTOR ========== */
.device-location-row {
    display: flex;
    gap: 8px;
}
.device-loc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px dashed rgba(200, 60, 60, 0.35);
    background: rgba(200, 60, 60, 0.04);
    color: var(--text-mid, #475569);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
}
.device-loc-btn:hover {
    border-color: rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.06);
}
.device-loc-icon {
    font-size: 18px;
}
/* ── Selected state, shared by Device Location / Payment Type / Status ──────
   All three wear the same accent ramp .co-next uses, so "chosen" reads the
   same everywhere on this page.

   !important is not decoration here: embossed.css carries a catch-all
   `body.embossed-mode button:not(...)` at specificity (0,2,2), which outranks
   a plain .btn.active at (0,2,0) and loads afterwards. Without it the
   selection is invisible in embossed mode.

   Border stays 2px but transparent — Device Location is 2px dashed when
   unselected, and dropping to 0 would jog the row by 4px on every click. */
.device-loc-btn.active,
.payment-icon-btn.active,
.status-pill-btn.active {
    background: linear-gradient(135deg, var(--accent2, #2980d4), var(--accent, #F97316)) !important;
    border: 2px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(26, 95, 168, 0.30) !important;
}

/* The icons are coloured PNG artwork — on the blue end of the gradient they'd
   all but disappear. brightness(0) crushes the artwork to black, invert(1)
   flips it to solid white, whatever colours the source uses. */
.device-loc-btn.active .device-loc-icon img,
.payment-icon-btn.active img {
    filter: brightness(0) invert(1);
}

/* The dot has to hold against the gradient rather than tint with it */
.status-pill-btn.active .status-pill-dot {
    background: #fff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7) !important;
}

/* Status warning */
.status-warning {
    font-size: 11px;
    font-weight: 600;
    color: #EF4444;
    animation: statusPulse 1.5s ease infinite;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ========== STATUS PILL SELECTOR ========== */
.status-pills-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Step 3 lost its second column when Payment Type was removed, but .form-row
   is a 1fr 1fr grid — so the status group has to be told to span both, or it
   sits in the left half. */
.co-status-group { grid-column: 1 / -1; }
/* No label any more — the warning takes its place when it fires, centred over
   the buttons rather than hanging off the left edge. */
.co-status-group > .status-warning { display: block; text-align: center; margin-bottom: 6px; }

/* Three equal circles in a row. aspect-ratio locks them round no matter what
   the label does, so "Pay on Pickup" wrapping to two lines can't stretch its
   button into an oval. */
.co-status-group .status-pills-row {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 38px;
}
/* ── Payment status: a switch panel ─────────────────────────────────────────
   Label above, a key you press in the middle, an indicator lamp beneath it.
   The <button> is now an invisible CONTAINER — everything that looks pressable
   lives on .spb-key, and the lamp is the only thing that changes on select.

   !important on the three surface properties because the per-status rules
   further down this file (`[data-value="Deposit"].active` and friends) are
   (0,3,0) and land after these, so they would paint the container's old pill
   background back on. Those rules still own the round pills on Active Repairs,
   so they cannot simply be deleted. */
.co-status-group .status-pill-btn {
    flex: 0 0 auto;
    /* Wide enough for "Pay on Pickup" on ONE line — the <br> is gone from the
       markup. All three share the width so the keys stay a matched set.
       3 × 184 + 2 × 38 gap + Paid's 14px margin = 646px, inside the ~800px the
       step body has once its padding is taken off. */
    width: 184px;
    aspect-ratio: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    text-align: center;
    line-height: 1.25;
    font-size: 13px;
}
/* The label leads now, so it sits at label weight rather than button weight.
   nowrap because the button is sized to hold the longest of the three on one
   line — if it ever wrapped again, that one key would drop below the others. */
.co-status-group .status-pill-btn .spb-label {
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* The key. Raised, squared-off, with the icon cut into its face — the shape in
   the reference, in our palette. */
.co-status-group .spb-key {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 92px;
    border-radius: 19px;
    /* The resting face for all three: grey, and graded rather than filled.
       Three stops, not two — a two-stop ramp across 92px is close enough to a
       flat fill that the eye reads it as one, which is what made the row look
       flat. Highlight at the top, body at 45%, deeper shade at the foot. */
    background: linear-gradient(160deg, #f8fafd 0%, #edf1f7 45%, #dfe6f1 100%);
    color: #8f9db2;
    box-shadow: 0 4px 9px rgba(63, 74, 86, .13),
                0 1px 2px rgba(63, 74, 86, .10),
                inset 0 1px 0 rgba(255, 255, 255, .95);
    transition: all .18s ease;
}
.co-status-group .spb-key svg { width: 36px; height: 36px; display: block; }
/* ── Hover lights the GLYPH, and nothing else ───────────────────────────────
   The key itself does not move or change. Its two states are resting and
   pressed, and a third surface treatment in between blurs the one that matters.
   The icon taking its status colour is enough to say "this one is under your
   cursor", and it previews what selecting will do.

   currentColor drives the stroke, so one `color` per status is the whole
   effect. The glow reads currentColor too — no per-status shadow colours.

   :not(.active) so hovering the chosen key leaves it alone; it is already lit,
   and re-lighting it would look like it had changed. */
.co-status-group .status-pill-btn[data-value="Paid"]:hover:not(.active) .spb-key { color: #23794d; }
.co-status-group .status-pill-btn[data-value="Deposit"]:hover:not(.active) .spb-key { color: #9a6516; }
.co-status-group .status-pill-btn[data-value="Pay on Pickup"]:hover:not(.active) .spb-key { color: #2b5f9e; }
/* (0,4,1) — beats `body.neu-mode .co-status-group .spb-key svg` at (0,3,2),
   so the engrave gives way to the glow on hover in every theme without each
   theme file needing its own copy of this. */
.co-status-group .status-pill-btn:hover:not(.active) .spb-key svg {
    filter: drop-shadow(0 0 5px currentColor);
    transition: filter .18s ease;
}
/* Pressed IN when chosen. The travel is the state — same language as a real
   key, and it reads before any colour does. */
.co-status-group .status-pill-btn.active .spb-key {
    transform: translateY(2px);
    box-shadow: 0 1px 2px rgba(63, 74, 86, .10),
                inset 0 2px 5px rgba(63, 74, 86, .18);
}

/* ── Colour arrives on selection, never before ──────────────────────────────
   Resting keys stay on the neutral grey ramp above — all three identical, and
   grey. Only the chosen one takes a hue, which is what makes the choice legible
   from across the counter: one coloured key in a row of grey ones, rather than
   three colours where you have to work out which is the lit one.

   Still short of saturated: the lamp below is the loud signal, and if the key
   matches it you get two things shouting the same thing at different volumes.
   Five class-level parts, so these beat the generic .active rule above them
   regardless of order in the file. */
.co-status-group .status-pill-btn[data-value="Paid"].active .spb-key {
    background: linear-gradient(160deg, #eafaf1 0%, #d3efdf 55%, #c0e6cf 100%);
    color: #23794d;
}
.co-status-group .status-pill-btn[data-value="Deposit"].active .spb-key {
    background: linear-gradient(160deg, #fdf5e6 0%, #f7e7c8 55%, #f0daad 100%);
    color: #9a6516;
}
.co-status-group .status-pill-btn[data-value="Pay on Pickup"].active .spb-key {
    background: linear-gradient(160deg, #e9f2fd 0%, #d4e3f7 55%, #c2d8f2 100%);
    color: #2b5f9e;
}

/* The lamp. Dark and inert until chosen, then lit in that status's own colour
   with a bloom under it — the one place in this control that carries hue. */
.co-status-group .status-pill-dot {
    width: 36px;
    height: 6px;
    border-radius: 99px;
    background: #c3cddd;
    box-shadow: inset 0 1px 2px rgba(63, 74, 86, .30);
    transition: all .22s ease;
}
/* Per status, and each of these beats the generic dot rules further down by
   carrying .co-status-group in front of them. Green asserts money in hand,
   amber that some is still owed, blue that none has been taken yet. */
.co-status-group .status-pill-btn.active .status-pill-dot {
    box-shadow: none;
}
.co-status-group .status-pill-btn[data-value="Paid"].active .status-pill-dot {
    background: #16a34a !important;
    box-shadow: 0 0 10px 1px rgba(22, 163, 74, .75) !important;
}
.co-status-group .status-pill-btn[data-value="Deposit"].active .status-pill-dot {
    background: #d97706 !important;
    box-shadow: 0 0 10px 1px rgba(217, 119, 6, .75) !important;
}
.co-status-group .status-pill-btn[data-value="Pay on Pickup"].active .status-pill-dot {
    background: #2b74c4 !important;
    box-shadow: 0 0 10px 1px rgba(43, 116, 196, .75) !important;
}
/* The label takes the lit colour too, so the choice is legible without having
   to compare three small lamps. */
.co-status-group .status-pill-btn[data-value="Paid"].active .spb-label { color: #15803d; }
.co-status-group .status-pill-btn[data-value="Deposit"].active .spb-label { color: #b45309; }
.co-status-group .status-pill-btn[data-value="Pay on Pickup"].active .spb-label { color: #1a5fa8; }

/* The separators were sized for 116px circles. Match the key instead, so they
   sit against the thing they divide: the label is one line (17px × 1.25 ≈ 21px)
   plus the 9px gap, so the key starts about 30px down and ends 15px off the
   bottom once the lamp and its gap are counted. */
.co-status-group .status-pills-row .status-pill-btn[data-value="Paid"]::after,
.co-status-group .status-pills-row .status-pill-btn[data-value="Deposit"]::after {
    top: 34px;
    bottom: 19px;
}

/* What the Paid modal confirmed, kept on screen after it closes. Quiet by
   default — it's a receipt, not an alert. */
.status-confirm-note {
    margin-top: 14px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #059669;
}
/* Loud only when the cart moved after the confirmation, so the figure on
   screen no longer matches the sale. */
.status-confirm-note.stale {
    color: #DC2626;
}

/* Amount + method, under the circles. Shown only for Deposit. */
.dep-detail-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}
.dep-method-btn {
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid var(--hairline, rgba(120, 140, 170, 0.28));
    background: transparent;
    color: var(--text-mid, #475569);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.dep-method-btn.active {
    background: linear-gradient(135deg, var(--accent2, #2980d4), var(--accent, #F97316)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(26, 95, 168, 0.30);
}

/* A rule after Paid and after Deposit, so all three read as separate choices.
   Paid also keeps extra margin: it's the only status that asserts money was
   collected, and a stray tap aimed at Deposit shouldn't be able to land on it.
   Cheapest part of the mis-click fix: no logic, just distance. */
.status-pills-row .status-pill-btn[data-value="Paid"] {
    margin-right: 14px;
}
.status-pills-row .status-pill-btn[data-value="Paid"],
.status-pills-row .status-pill-btn[data-value="Deposit"] {
    position: relative;
}
.status-pills-row .status-pill-btn[data-value="Paid"]::after,
.status-pills-row .status-pill-btn[data-value="Deposit"]::after {
    content: '';
    position: absolute;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: var(--hairline, rgba(120, 140, 170, 0.28));
}
/* Each sits in the middle of its own gap — Paid's is wider by its margin. */
.status-pills-row .status-pill-btn[data-value="Paid"]::after    { right: -22px; }
.status-pills-row .status-pill-btn[data-value="Deposit"]::after { right: -15px; }
.status-pill-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.status-pill-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--primary-light);
}
.status-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
/* Old green selected state removed — the shared accent rule above owns both
   the pill and its dot now. */
/* Deposit inline input inside pill */
.deposit-inline-input {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    background: #fff;
    border-radius: 5px;
    padding: 1px 4px;
    border: 1px solid rgba(217, 119, 6, 0.4);
}
/* Focus lives on the WRAPPER. The input's own focus styling is suppressed by
   the id rule below — it has to be, or the theme paints its well back on the
   moment you click into it — so without this there is no focus indicator at all
   on the one field in this step that takes a number. */
.deposit-inline-input:focus-within {
    border-color: rgba(217, 119, 6, 0.85);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
}
.deposit-dollar {
    font-size: 12px;
    font-weight: 700;
    color: #B45309;
    margin-right: 1px;
}
/* The wrapper supplies the box; the input itself must stay invisible inside it.
   Every theme fills input[type="number"] with its own well colour and shadow
   using !important, which shows as a grey block sitting inside the white box.

   BY ID, deliberately. The rule below it was written for the same problem but
   as `.deposit-inline-input input` — (0,1,1) — which loses to
   `body.neu-mode input[type="number"]` at (0,2,2) no matter what it marks
   !important, because specificity is compared before importance among equally
   important declarations. An id is (1,0,0) and clears all three theme files at
   once, so this does not need re-fixing per theme. */
#depositAmount {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #b45309 !important;
}
.deposit-inline-input input {
    width: 60px;
    border: none !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 700;
    color: #B45309 !important;
    padding: 2px 2px;
    font-family: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
}
.deposit-inline-input input::-webkit-outer-spin-button,
.deposit-inline-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.status-pill-btn[data-value="Deposit"].active,
.status-pill-btn[data-value="deposit"].active {
    background: rgba(217, 119, 6, 0.14);
    border-color: rgba(217, 119, 6, 0.55);
    color: #B45309;
    box-shadow: 0 0 14px rgba(217, 119, 6, 0.15);
}
.status-pill-btn[data-value="Deposit"].active .status-pill-dot,
.status-pill-btn[data-value="deposit"].active .status-pill-dot {
    background: #B45309;
    box-shadow: 0 0 8px rgba(180, 83, 9, 0.6);
}
.status-pill-btn[data-value="Pay on Pickup"].active,
.status-pill-btn[data-value="pickup"].active {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.5);
    color: var(--primary-mid);
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.15);
}
.status-pill-btn[data-value="Pay on Pickup"].active .status-pill-dot,
.status-pill-btn[data-value="pickup"].active .status-pill-dot {
    background: var(--primary-mid);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.status-pill-btn[data-value="In Progress"].active {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.5);
    color: var(--primary-mid);
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.15);
}
.status-pill-btn[data-value="In Progress"].active .status-pill-dot {
    background: var(--primary-mid);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.status-pill-btn[data-value="Parts Order"].active {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.5);
    color: #D97706;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.15);
}
.status-pill-btn[data-value="Parts Order"].active .status-pill-dot {
    background: #D97706;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
.status-pill-btn.type-pill.active {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.5);
    color: var(--primary-mid);
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.15);
}
.status-pill-btn.type-pill.active .status-pill-dot {
    background: var(--primary-mid);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

/* ========== CHECKOUT BUTTONS ========== */
.checkout-btn-row {
    display: flex;
    gap: 10px;
}
.cancel-sale-btn {
    flex: 0.6;
    padding: 15px;
    background: rgba(249, 115, 22, 0.75);
    border: 2px solid #E67E22;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}
.cancel-sale-btn:hover {
    background: rgba(249, 115, 22, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.3);
}
/* Same accent ramp as the step Continue buttons — it's the last link in that
   chain, so it should look like the end of it rather than a different control.
   !important clears embossed.css's catch-all
   `body.embossed-mode button:not(.dark-toggle-label):not(.emb-seg-btn)`
   at specificity (0,2,2), which otherwise repaints it with the flat surface. */
.submit-sale-btn {
    flex: 1.5;
    padding: 15px;
    background: linear-gradient(135deg, var(--accent2, #2980d4), var(--accent, #F97316)) !important;
    border: 0 !important;
    border-radius: 12px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(26, 95, 168, 0.30);
    transition: filter .15s, box-shadow .15s, transform .15s;
    font-family: inherit;
}
.submit-sale-btn:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(26, 95, 168, 0.38);
}
/* Locked: drop the gradient entirely. Dimming it still reads as a live
   button — removing it reads as unavailable, same as .co-next:disabled. */
.submit-sale-btn:disabled {
    background: #F1F5F9 !important;
    color: #94A3B8 !important;
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
    transform: none;
}

/* ========== CHECKOUT CART ========== */
.checkout-card {
    padding: 20px;
}
.cart-items {
    margin-bottom: 15px;
}
.empty-cart {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}
.empty-cart-icon {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.3;
}
.empty-cart p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}
.empty-cart span {
    font-size: 13px;
}
.cart-item {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    transition: background .2s ease, border-color .2s ease;
}

/* ── Tax on / tax off, said with the row's own colour (Luis, 2026-09-22) ──
   The line is the switch, so the line has to show the state — there is no
   label to read it off. The house pair, the same two the dashboard uses for
   money: in-house green while tax is being charged, plum once it is off.

   Both kept very light on purpose. This sits behind a product name, an IMEI
   and a price, and a tint that competes with them would cost more than it
   tells. The hover is a shade deeper — the only feedback the row gives, and
   the pointer is the only other hint that it does anything at all, which is
   one only the person holding the mouse can see. */
/* Named tax-row-*, not tax-on/tax-off: repairs.css styles those two
   names unqualified and with !important for the per-item toggle BUTTONS,
   so a row wearing them would take a flat button green — and RED rather
   than plum when off — over the whole line, text colour included. */
.cart-item.tax-row-on,
.cart-item.tax-row-off { cursor: pointer; }
.cart-item.tax-row-on {
  background: linear-gradient(180deg, rgba(63, 122, 104, 0.11) 0%, rgba(63, 122, 104, 0.04) 100%);
  border-color: rgba(63, 122, 104, 0.22);
}
.cart-item.tax-row-off {
  background: linear-gradient(180deg, rgba(107, 55, 68, 0.13) 0%, rgba(107, 55, 68, 0.05) 100%);
  border-color: rgba(107, 55, 68, 0.24);
}
.cart-item.tax-row-on:hover {
  background: linear-gradient(180deg, rgba(63, 122, 104, 0.17) 0%, rgba(63, 122, 104, 0.07) 100%);
}
.cart-item.tax-row-off:hover {
  background: linear-gradient(180deg, rgba(107, 55, 68, 0.19) 0%, rgba(107, 55, 68, 0.08) 100%);
}
.cart-item-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid rgba(37, 99, 235, 0.12);
    flex-shrink: 0;
}
.cart-item-info {
    flex: 1;
    min-width: 0;
}
.cart-item-details-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.cart-item-name {
    color: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
    font-weight: 600;
    font-size: 14px;
}
.cart-item-imei {
    color: rgba(104, 98, 98, 0.5);
    font-size: 11px;
    font-family: var(--font-num);
}
/* Now the second row, under the sourcing buttons, and it carries the points
   figure as a fourth item — so it wraps rather than overflowing on a narrow
   panel. */
.cart-item-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
/* Bigger, and in house blue. It's the one editable figure on the row, so it
   should carry the weight of one.
   The colour needs !important: embossed.css styles every input[type="number"]
   at (0,2,2), which outranks this rule and would repaint the text with
   --emb-ink. Background is left to that rule in embossed mode; the values
   below are what the glass themes use. */
.price-edit {
    width: 110px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--hairline, rgba(120, 140, 170, 0.25));
    border-radius: 10px;
    font-family: var(--font-num);
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-blue, #1a5fa8) !important;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.price-edit:focus {
    border-color: rgba(41, 128, 212, 0.6);
    box-shadow: 0 0 0 3px rgba(41, 128, 212, 0.15);
}
/* House blue goes near-black on a dark card */
body.dark-mode .price-edit {
    background: rgba(255, 255, 255, 0.06);
    color: #93c5fd !important;
}
.tax-toggle {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid;
}
/* Tax and Pts share one on/off pair so the two toggles are learnable as a
   single control: on (the default) is light green, off is light red. Tax used
   to be blue-on / grey-off, which read as "selected vs disabled" rather than
   "on vs off".

   !important clears embossed.css's catch-all
   `body.embossed-mode button:not(.dark-toggle-label):not(.emb-seg-btn)`,
   which sits at specificity (0,2,2) and repaints every button on the page
   with the neumorphic surface. */
.tax-on,
.pts-on {
    background: rgba(0, 138, 90, 0.12) !important;
    color: #007a50 !important;
    border-color: rgba(0, 138, 90, 0.35) !important;
}
.tax-off,
.pts-off {
    background: rgba(181, 32, 32, 0.10) !important;
    color: #b52020 !important;
    border-color: rgba(181, 32, 32, 0.30) !important;
}
.tax-toggle:hover {
    transform: scale(1.05);
}
.item-tax {
    color: var(--primary-mid);
    font-size: 11px;
    margin-top: 4px;
    font-weight: 600;
}
/* .pts-on / .pts-off are defined with .tax-on / .tax-off above */
/* Inline beside the Pts toggle now, not a block under it — the margin-top it
   used to need would push it off the row's centre line. */
.item-pts {
    color: #007a50;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.cart-item-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.cart-item-price {
    color: #1e293b;
    font-weight: 700;
    font-size: 16px;
}
.cart-item-remove {
    background: rgba(239, 68, 68, 0.6);
    border: 1px solid var(--danger);
    border-radius: 8px;
    color: white;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-item-remove:hover {
    background: rgba(239, 68, 68, 0.8);
    transform: scale(1.1);
}

/* ========== CART SUMMARY ========== */
.cart-summary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: rgba(122, 117, 117, 0.8);
    font-size: 14px;
}
.summary-row:last-child {
    margin-bottom: 0;
}
.summary-divider {
    height: 1px;
    background: rgba(37, 99, 235, 0.15);
    margin: 6px 0 10px;
}
.summary-total {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.summary-total span:last-child {
    color: #1e293b;
}
#balanceDueRow {
    font-size: 20px;
}
#balanceDueRow span:last-child {
    color: #EF4444;
}

/* ========== SALES CARD ========== */
.sales-card {
    padding: 20px;
    background: linear-gradient(to right, #00000045, rgba(30, 41, 59, 0.93));
}
.sales-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sale-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}
.sale-item:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
}
.sale-product {
    flex: 1;
}
.sale-name {
    color: white;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}
.sale-price {
    color: rgba(52, 211, 153, 1);
    font-weight: 700;
    font-size: 14px;
}
.sale-tax {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 400;
}
.sale-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.sale-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
}
.sale-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}
.sale-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* ========== STATUS BADGES ========== */
.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.status-paid {
    background: rgba(52, 211, 153, 0.6);
    color: white;
    border: 1px solid rgba(52, 211, 153, 0.8);
}
.status-unpaid {
    background: rgba(239, 68, 68, 0.6);
    color: white;
    border: 1px solid rgba(239, 68, 68, 0.8);
}
.status-deposit {
    background: rgba(251, 191, 36, 0.6);
    color: white;
    border: 1px solid rgba(251, 191, 36, 0.8);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1600px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* The .pos-repairs / .active-repairs-grid reflow that used to live here went
   with the sidebar column. .pos-grid is already 1fr 1fr at every width now, so
   this breakpoint has nothing left to change until 900px takes it to one. */
@media (max-width: 1200px) {
    .pos-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 900px) {
    .pos-grid {
        grid-template-columns: 1fr;
    }
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .quick-access-grid {
        gap: 14px;
        justify-content: center;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .brand-dropdowns {
        flex-direction: column;
    }
    .category-search-row {
        flex-direction: column;
    }
    .search-wrapper {
        min-width: 100%;
    }
}
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body background inherited from index.css (1234.png) */




@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

.glass-card {
    position: relative;
    width: 100%;
    min-height: 340px;
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    padding: 30px;
    box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.glass-card-cus {
    position: relative;
    width: 100%;
    min-height: 340px;
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    padding: 30px;
    box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* Dark Mode Glass Card */
.glass-card-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.glass-card-dark:hover {
    box-shadow:
        0 12px 48px 0 rgba(0, 0, 0, 0.6),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.glass-card-dark .stat {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.glass-card-dark .chart-container {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.card-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 28px;
}

.card-title {
    color: white;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    min-height: 28px;
}

.card-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
}

.card-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 0;
}

.stat-value {
    color: rgb(7, 126, 224);
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    word-break: break-word;
    line-height: 1.2;
}

.stat-value-small {
    color: white;
    font-size: 15px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    word-break: break-word;
    line-height: 1.2;
}

.date-badge {
    background: rgba(52, 211, 153, 0.3);
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: #86efac;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.glass-button {
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.glass-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.glass-button:hover::before {
    width: 300px;
    height: 300px;
}

.glass-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.glass-button:active {
    transform: translateY(0);
}

.glass-button span {
    position: relative;
    z-index: 1;
}

/* Chart Container */
.chart-container {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 200px;
    position: relative;
}

.chart-container canvas {
    max-height: 100%;
}

/* Decorative elements */
.glass-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Container for cards */
.container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* Tables section */
.tables-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.glass-table-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.37),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

/* Dark Mode Glass Table */
.glass-table-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.glass-table-dark .glass-table thead tr {
    background: rgba(0, 0, 0, 0.25);
}

.glass-table-dark .glass-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.2);
}

.table-title {
    color: white;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.glass-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.glass-table thead tr {
    background: rgba(255, 255, 255, 0.15);
}

.glass-table th {
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-table th:first-child {
    border-top-left-radius: 12px;
}

.glass-table th:last-child {
    border-top-right-radius: 12px;
}

.glass-table tbody tr {
    transition: background 0.2s ease;
}

.glass-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

.glass-table td {
    color: rgba(255, 255, 255, 0.9);
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-table td:nth-child(4) {
    font-size: 13px;
}

.glass-table tbody tr:last-child td {
    border-bottom: none;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.status-active {
    background: rgba(52, 211, 153, 0.3);
    border-color: rgba(52, 211, 153, 0.5);
    color: #a7f3d0;
}

.status-pending {
    background: rgba(251, 191, 36, 0.3);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fde68a;
}

.status-inactive {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

/* Table Images */
.product-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: white;
    padding: 2px;
}

.pay-type-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.customer-name {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.model-name {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.amount-total {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.product-name-small {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    font-size: 12px;
}

.order-number {
    font-family: var(--font-num);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
}

.imei-number {
    font-family: var(--font-num);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
}

/* Bank Badges */
.bank-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    border: 1px solid;
}

.bank-badge-green {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

.bank-badge-red {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

/* Table Header Row */
.table-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.view-all-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.view-all-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

@media (max-width: 1400px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .tables-section {
        grid-template-columns: 1fr;
    }
}

/* Full Width Navigation */
.full-width-nav {
    width: 100%;

    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.nav-content {
    max-width: 100%;
    width: 100%;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
    position: relative;
}

.logo-center {
    justify-self: center;
    z-index: 10;
}

.brand-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.4);
    object-fit: cover;
}

/* Dashboard Icon Button - Perfect Circle */
.dashboard-icon-button {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 24px !important;
    aspect-ratio: 1/1 !important;
}

.dashboard-icon-button .nav-icon {
    margin: 0 !important;
}

/* Icon-only button (for Bank and similar) */
.icon-only-button {
    width: 60px !important;
    height: 60px !important;
    border-radius: 60% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-only-button .nav-icon {
    margin: 0 !important;
}

/* Navigation item with label */
.nav-item-labeled {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    padding: 0 15px;
}

/* Vertical separator line between buttons */
.nav-item-labeled:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12.5px;
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

.nav-label {
    color: white;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}


.nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    overflow: visible;
}

.nav-brand {
    color: white;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-menu {
    display: flex;
    gap: 40px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    justify-self: end;
}

/* Hide scrollbar but keep functionality */
.nav-menu::-webkit-scrollbar {
    display: none;
}

.nav-menu {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    text-decoration: none;
    padding: 12px 18px;
    background: rgba(6, 61, 120, 0.4);
    font-size: 14px;
    font-weight: 600;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: all 0.3s ease;
    white-space: nowrap;
    filter: drop-shadow(0px 2px 2px rgb(34, 174, 238));
}

.nav-link:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 0, 0, 0.5);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.nav-link.active {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.nav-icon {
    font-size: 18px;
}

/* Dropdown Styles */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    display: block;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 99999;
    list-style: none;
    padding: 10px;
    margin: 0;
    pointer-events: none;
}

/* Show on hover (desktop) */
.dropdown:hover .dropdown-menu,
.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    display: block;
    width: 100%;
}

.dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    background: transparent;
}

.dropdown-link:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateX(5px);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: white;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle:hover {
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: block;
    }

    .nav-content {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .sticky-notes-section {
        order: 2;
        justify-self: center;
    }

    .logo-center {
        order: 1;
        justify-self: center;
    }

    .nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        order: 4;
        justify-self: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        padding: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .nav-menu.active {
        display: flex;
    }

    .mobile-menu-toggle {
        order: 3;
        justify-self: center;
    }

    .nav-link {
        width: 100%;
        justify-content: flex-start;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 10px;
        display: none;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }

    .full-width-nav {
        padding: 15px 0;
    }
}


/* Date Picker Floating Button Styles */
.date-filter-floating {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.date-fab-button {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.date-fab-button:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.5);
}

.date-filter-panel {
    position: absolute;
    bottom: 80px;
    right: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.4);
    padding: 25px;
    min-width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s ease;
}

.date-filter-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.date-panel-header {
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.date-input-wrapper-floating {
    display: flex;
    gap: 10px;
}

.glass-input-floating {
    flex: 1;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    outline: none;
}

.glass-input-floating:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.glass-input-floating::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.date-submit-btn-floating {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.date-submit-btn-floating:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.current-date-display {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.quick-date-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-date-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-date-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

/* ============================================
   STICKY NOTES STYLES
   ============================================ */

/* Sticky Notes Section on Left Side */
.sticky-notes-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 20;
}

.add-note-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(70, 148, 182, 0.622);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-note-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Notes Preview Container */
.notes-preview-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Import handwriting font for sticky notes */

/* Mini Sticky Note Preview */
.sticky-note-mini {
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    transform: rotate(-2deg);
}

.sticky-note-mini:nth-child(2n) {
    transform: rotate(2deg);
}

.sticky-note-mini:nth-child(3n) {
    transform: rotate(-3deg);
}

/* Shadow behind the mini sticky note */
.sticky-note-mini:before {
    content: '';
    position: absolute;
    width: 90%;
    height: 75%;
    left: 3px;
    top: 30%;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: -2px 2px 10px 0 rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.sticky-note-mini:hover {
    transform: translateY(-5px) rotate(0deg) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.sticky-note-mini .sticky-note-text {
    font-size: 8px;
    line-height: 1.3;
    color: #333;
    font-weight: 400;
    word-wrap: break-word;
    padding: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Note Modal */
.note-modal {
    display: none;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.note-modal-content {
    background: rgba(30, 30, 50, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease;
}

.view-all-modal {
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.note-modal-header h2 {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.note-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 36px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.note-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

/* Note Modal Form Styles */
.note-modal-content .form-group {
    margin-bottom: 20px;
}

.note-modal-content .form-group label {
    display: block;
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.note-modal-content .form-group input[type="text"],
.note-modal-content .form-group select,
.note-modal-content .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(30, 30, 50, 0.221);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #333333;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.note-modal-content .form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

.note-modal-content .form-group select option {
    background: rgba(30, 30, 50, 0.95);
    color: white;
    padding: 10px;
}

.note-modal-content .form-group input[type="text"]:focus,
.note-modal-content .form-group select:focus,
.note-modal-content .form-group textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.note-modal-content .form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 10px;
}

.color-picker input[type="radio"] {
    display: none;
}

.color-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.color-picker input[type="radio"]:checked + .color-option {
    border-color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Modal Buttons */
.modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.btn-cancel,
.btn-add {
    flex: 1;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-add {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* All Notes Grid */
.all-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}

/* Large Sticky Note */
.sticky-note-large {
    width: 250px;
    min-height: 250px;
    padding: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    background: transparent;
    transform: rotate(-1deg);
}

.sticky-note-large:nth-child(2n) {
    transform: rotate(1deg);
}

.sticky-note-large:nth-child(3n) {
    transform: rotate(-2deg);
}

/* Shadow behind the large sticky note */
.sticky-note-large:before {
    content: '';
    position: absolute;
    width: 90%;
    height: 75%;
    left: 5px;
    top: 30%;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/* Curled corner effect */
.sticky-note-large:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent;
    z-index: 1;
}

.sticky-note-large:hover {
    transform: translateY(-8px) rotate(0deg) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.sticky-note-content {
    flex: 1;
    padding: 30px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    clip-path: polygon(
        0% 0%,
        95% 0%,
        100% 5%,
        100% 100%,
        0% 100%
    );
}

.sticky-note-text-large {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    word-wrap: break-word;
    white-space: pre-wrap;
    text-align: center;
    font-weight: 400;
}

.sticky-note-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.note-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.note-author,
.note-date,
.note-id {
    font-family: var(--font-ui);
    font-size: 11px;
    color: #555;
    font-weight: 600;
}

.note-delete-btn {
    background: rgba(255, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-delete-btn:hover {
    background: rgba(255, 0, 0, 0.9);
    transform: scale(1.1);
}

/* Responsive Styles for Sticky Notes */
@media (max-width: 1024px) {
    .sticky-notes-section {
        order: -2;
        margin-bottom: 15px;
    }
    
    .notes-preview-container {
        flex-wrap: wrap;
    }
    
    .all-notes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sticky-note-mini {
        width: 50px;
        height: 50px;
        padding: 6px;
    }
    
    .note-modal-content {
        width: 95%;
        padding: 20px;
    }
}

/* ============================================
   NOTIFICATION TOAST STYLES
   ============================================ */

.main-note-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 200000;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
}

.main-note-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.main-note-notification-success {
    background: linear-gradient(135deg, #52c234 0%, #3da024 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.main-note-notification-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.main-note-notification-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ========== DEVICE UNLOCK ========== */
.ulk-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px dashed rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.05);
    color: #2563EB;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}
.ulk-btn:hover { background: rgba(37, 99, 235, 0.1); }
.ulk-btn.ulk-btn-set {
    border-style: solid;
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
}
.ulk-btn-icon { font-size: 16px; flex-shrink: 0; }
.ulk-btn-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ulk-btn-clear {
    font-size: 18px;
    line-height: 1;
    color: #94a3b8;
    padding: 0 4px;
    border-radius: 6px;
    flex-shrink: 0;
}
.ulk-btn-clear:hover { color: #EF4444; background: rgba(239, 68, 68, 0.1); }

/* Modal */
.ulk-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(13, 42, 82, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ulk-modal-overlay.open { display: flex; }
.ulk-modal {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 24px 60px rgba(13, 42, 82, 0.3);
    overflow: hidden;
    animation: ulkPop 0.2s ease;
}
@keyframes ulkPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.ulk-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f7;
}
.ulk-modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #0d2a52; }
.ulk-close { background: none; border: none; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; }
.ulk-close:hover { color: #EF4444; }

.ulk-tabs { display: flex; gap: 4px; padding: 12px 16px 0; }
.ulk-tab {
    flex: 1;
    padding: 8px 4px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ulk-tab.active { background: linear-gradient(135deg, #2563EB, #1a5fa8); color: #fff; }

.ulk-panel { padding: 16px 20px 4px; }
.ulk-hint { text-align: center; font-size: 12.5px; color: #64748b; margin: 0 0 14px; }
.ulk-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px;
    font-family: inherit;
    color: #0d2a52;
    border: 1px solid rgba(100, 160, 220, 0.4);
    border-radius: 10px;
    outline: none;
    text-align: center;
    letter-spacing: 1px;
}
.ulk-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

/* Pattern pad */
.ulk-pad {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.ulk-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ulk-line { stroke: #2563EB; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.ulk-line-live { opacity: 0.4; }
.ulk-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.ulk-dot span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: transform 0.12s ease, background 0.12s ease;
}
.ulk-dot.sel span {
    background: #2563EB;
    transform: scale(1.35);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15);
}
.ulk-seq {
    text-align: center;
    font-family: var(--font-num);
    font-size: 14px;
    font-weight: 700;
    color: #0d2a52;
    margin-top: 12px;
    letter-spacing: 1px;
}
.ulk-reset {
    display: block;
    margin: 8px auto 0;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #64748b;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.ulk-reset:hover { background: #e2e8f0; }

.ulk-modal-actions { display: flex; gap: 10px; padding: 16px 20px 20px; }
.ulk-btn-cancel, .ulk-btn-save {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
}
.ulk-btn-cancel { background: #f1f5f9; color: #475569; }
.ulk-btn-cancel:hover { background: #e2e8f0; }
.ulk-btn-save { flex: 1.5; background: linear-gradient(135deg, #2563EB, #1a5fa8); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); }
.ulk-btn-save:hover { transform: translateY(-1px); }

/* ========== CART LINE — per-part provider + sourcing ========== */
/* ── Sourcing chip ─────────────────────────────────────────────────────────
   Its own chip above each item chip. Sits tight to the item below it so the
   pairing reads as one unit — the gap under it is deliberately smaller than
   the gap between items. */
.cart-source-chip {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--hairline, rgba(120, 140, 170, 0.22));
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 6px;
}
/* A sourcing chip following an item chip starts the next item's pair, so it
   needs real separation. 6px inside a pair vs 18px between them is what makes
   the pairing legible when several items are in the cart. Collapses against
   .cart-item's 10px bottom margin, so 18px is the actual gap. */
.cart-item + .cart-source-chip {
    margin-top: 18px;
}
.csc-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--label-quiet, #A3AFC0);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Radios centred, header stays left — the header labels the chip, the radios
   are the choice being made. */
.csc-radios {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* The native input is hidden but kept in the DOM — it's what makes this a real
   radio group: one name per item, so the browser enforces pick-one and
   keyboard/arrow navigation works for free. */
.csc-radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--hairline, rgba(120, 140, 170, 0.25));
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-mid, #475569);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.csc-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
/* 16px, not 13px. The lit state's core is inset 3px inside a 2px border, so at
   13px it came out 5px across — too small for a gradient or a glow to read at
   all. At 16px the core is 8px and the light actually shows. */
.csc-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex: 0 0 auto;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.csc-radio.on {
    background: linear-gradient(135deg, var(--accent2, #2980d4), var(--accent, #F97316));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(26, 95, 168, 0.28);
}
/* Lit indicator. The bloom is cast by the RING, not by the tiny core — a glow
   from an 8px dot barely clears its own border, whereas the 16px ring throws
   light well past it. The ring also gets a translucent white fill so the gap
   between ring and core lights up instead of staying dark. */
.csc-radio.on .csc-dot {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 9px 2px rgba(255, 255, 255, 0.9),
                0 0 18px 5px rgba(255, 255, 255, 0.45);
}
.csc-radio.on .csc-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 1);
}
/* Visible focus ring, since the real input is off-screen */
.csc-radio input:focus-visible + .csc-dot {
    box-shadow: 0 0 0 3px rgba(41, 128, 212, 0.35);
}

/* Provider sits inline in the radio row, directly right of its own option.
   .csc-radios wraps, so a long provider name drops to a second line instead of
   pushing out of the chip. */
.csc-provider {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 2px;
}
.csc-provider-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-mid, #475569);
}

body.dark-mode .cart-source-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.16);
}

.cart-item-sourcing {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.cart-provider-select {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(100, 160, 220, 0.45);
    background: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-family: inherit;
    color: #0d2a52;
    outline: none;
    max-width: 160px;
    cursor: pointer;
}
.cart-provider-select:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.cart-source-toggle { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cart-source-btn {
    padding: 5px 11px;
    border-radius: 20px;
    border: 1px solid rgba(100, 160, 220, 0.45);
    background: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}
.cart-source-btn:hover { border-color: #94a3b8; }
.cart-source-btn.active.src-InHouse { background: rgba(5, 150, 105, 0.12); border-color: #059669; color: #059669; }
.cart-source-btn.active.src-Ordering { background: rgba(202, 138, 4, 0.12); border-color: #CA8A04; color: #CA8A04; }
.cart-source-btn.active.src-Pickup { background: rgba(37, 99, 235, 0.12); border-color: #2563EB; color: #2563EB; }

/* Grayed-out provider dropdown when part is In House */
.cart-provider-select:disabled {
    opacity: 0.55;
    background: #eef2f7;
    color: #94a3b8;
    border-style: dashed;
    cursor: not-allowed;
    box-shadow: none;
}

/* ══ TOOLBAR ════════════════════════════════════════════════════════════════
   One row: search on the left, quick actions centred, brand tabs on the right.

   GRID, not flex with space-between. space-between only centres the middle item
   when the outer two are the same width, and a search box and three brand pills
   never are — the quick actions would drift depending on how many models each
   brand has. 1fr auto 1fr pins the centre to the row's true middle and lets the
   sides be whatever width they need. */
.pos-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px 16px 12px;
}
/* Row, not a stack. Without display:flex the search box — a block-level
   .search-wrapper — claims a line of its own and pushes Check Warehouse above
   it, which is what it did before this rule existed. */
.tb-left {
    justify-self: start;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.tb-center { justify-self: center; }
/* start, not end (Luis, 2026-09-16). The brand tabs sat at the far edge of the
   right column with a stretch of empty toolbar between them and the quick
   buttons — on a 1164px bar the gap ran from 787 to 845 and the tabs finished
   against the rail. Pinned to the near edge they pick up directly after the
   last quick button, which is where the eye goes next. The column widths are
   untouched, so the search box on the left keeps the room it had. */
.tb-right  { justify-self: start;  min-width: 0; }

/* The quick-access row carries inline padding from when it was a band of its
   own; zero it now that the toolbar supplies the spacing. */
.tb-center .quick-access-grid { padding: 0 !important; gap: 14px !important; }

@media (max-width: 1100px) {
    /* Below this the three zones cannot share a line without the search box
       collapsing. Stack: centred actions on top, search and tabs beneath. */
    .pos-toolbar { grid-template-columns: 1fr auto; }
    .tb-center   { grid-column: 1 / -1; }
}

/* ══ MODEL PICKER ═══════════════════════════════════════════════════════════
   A brand tab per brand, centred over the parts grid; hovering or clicking one
   drops that brand's models beneath it.

   TO BRING THE OLD DROPDOWNS BACK: delete the .brand-dropdowns rule below.
   They are still rendered and still wired to filterByBrand() — only hidden —
   so that one deletion is the whole rollback. */
.brand-dropdowns { display: none; }

/* The wrap spans the row so the tabs can centre inside it while the panel
   below still lines up with the grid rather than with the tabs. */
.mp-wrap { position: relative; flex: 1 1 auto; }

.mp-bar {
    display: flex;
    align-items: center;
    gap: 18px;   /* was 10px: the slabs' 4px white rings meet in the middle of it */
    flex-wrap: wrap;
}

/* The slab. RAISED, not sunk — in the reference the whole control sits above
   the page on a soft shadow, and the selected segment is a near-white pill
   floating inside it. An inset track reads as the opposite: everything pressed
   in, nothing standing out. */
.mp-seg {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 6px;
    /* A full pill, and a white ring around it (Luis, 2026-09-20) — the
       reference is one soft capsule floating clear of the page.

       The ring is a box-shadow spread, NOT a border: a border is part of the
       box, so 4px of it would have pushed every tab inward and grown both
       slabs by 8px. A shadow costs no layout at all.

       Shadow order matters. The first layer paints nearest, so the solid white
       ring goes first and the soft drop sits behind it — and that drop carries
       its own 2px spread so it clears the ring instead of hiding under it. */
    border-radius: 999px;
    /* Apple's canvas tone (Luis, 2026-09-20). Was rgba(226,232,240,.62) — a
       slate wash that took its cast from whatever sat behind it, which is what
       made it read grey-blue against this page rather than neutral. Flat and
       opaque now, so both slabs are the same colour wherever they land.

       One rule covers both: the brand tabs and the Recent Orders / Active
       Repairs / Quote trio are the same .mp-seg, the second wearing
       .mp-seg-aux for its layout only. */
    /* A shade under the page, not level with it (Luis, 2026-09-20).
     *
     * It was #f5f5f7, and so is the page: --ap-ground is that exact value, so
     * the slab had no body of its own and only the white ring and the shadow
     * described it — which is why it read as a dip inside the ring rather than
     * a capsule on the surface, and why two passes of shadow tuning barely
     * moved it. A shadow seats an object; it cannot supply one.
     *
     * #ececef is the same relationship the reference photo has: a light grey
     * capsule on a lighter page, ringed in white. The ring stays the brightest
     * thing in the group, which is what makes the whole assembly sit up. */
    background: #ececef;
    /* LIFTED, not sunk (Luis, 2026-09-20).
     *
     * The old stack read as a recess for two reasons, and the shadow was only
     * the second of them. Its drop was symmetric — 0 10px 24px, spreading the
     * same amount on every side — so nothing in it said where the light was
     * coming from, and a panel with no light direction reads as a hole.
     *
     * A raised object needs the pair: a white highlight up and to the LEFT,
     * where the light is, and the body's own shadow down and to the RIGHT,
     * where it falls. That is the same relationship the house engrave uses,
     * run the other way round — engrave puts both of them INSET, so the lit
     * edge is the far wall of the dish; here they sit outside, so the lit edge
     * is the near lip of something standing on the page.
     *
     * The inset highlight is gone with it. A white line just inside the top
     * edge is the top wall of a recess catching light — exactly the cue being
     * argued against.
     *
     * Both offsets clear the 4px ring, or the ring would sit on top of them
     * and hide the very thing doing the work.
     *
     * Three drops rather than one, each roughly double the last: a tight
     * dark one right under the edge for the contact, a mid one for the
     * body, and a wide faint one for the ambient. A single 20px blur at
     * 0.17 spread its weight so evenly over a near-white page that it read
     * as haze rather than as a thing casting a shadow — the contact layer
     * is what actually tells you the slab is off the surface. */
    box-shadow:
        0 0 0 4px #ffffff,
        -4px -4px 10px rgba(255, 255, 255, 0.95),
        0 3px 6px rgba(31, 45, 61, 0.13),
        0 9px 18px rgba(31, 45, 61, 0.15),
        0 18px 34px rgba(31, 45, 61, 0.10);
}

.mp-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 17px;
    background: transparent;
    font-family: var(--font-ui, inherit);
    /* Larger than the 13px it was: in the reference the label is the biggest
       thing in the control, and at 13px the logos beside it had nothing to sit
       against. */
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mp-tab-label { line-height: 1; }

.mp-tab:hover { color: var(--text-primary); }

/* .open = its panel is showing. .chosen = the model filtering the grid came
   from this brand and survives the panel closing. A tab can be both, so they
   set the same values rather than competing. */
.mp-tab.open,
.mp-tab.chosen {
    color: #1f2d3d;
    background: #fdfdfe;
    box-shadow: 0 2px 6px rgba(31, 45, 61, 0.13),
                0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* ── Icons ──
   The generic glyph is drawn in currentColor, so it goes blue on the selected
   segment for free — the accent in the reference. */
.mp-tab-ico { width: 18px; height: 18px; flex: 0 0 auto; opacity: .7; }
.mp-tab.open   .mp-tab-ico,
.mp-tab.chosen .mp-tab-ico { color: var(--brand-blue, #1a5fa8); opacity: 1; }

/* Brand logos share a HEIGHT rather than a fixed square. The Apple mark is tall
   and narrow and a Samsung wordmark is wide; boxing both into one square would
   shrink the wide one to a sliver to make it fit. Equal height is what actually
   reads as "the same size". */
.mp-tab-img {
    width: auto;
    height: 20px;
    max-width: 40px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .45;
    transition: filter .18s ease, opacity .18s ease;
}
.mp-tab.open   .mp-tab-img,
.mp-tab.chosen .mp-tab-img { filter: none; opacity: 1; }

/* The Apple mark alone, larger. Targeted by data-brand rather than a new class
   so the markup stays untouched — the attribute is already on the tab because
   the JS filters by it.

   It needs the extra height because of what the artwork IS: a compact silhouette
   with no descenders or wordmark beside it, so at a height shared with a wide
   logo it reads noticeably smaller. Equal height is not equal presence here. */
.mp-tab[data-brand="iPhone"] .mp-tab-img { height: 28px; max-width: 34px; }

/* The selected model, hung UNDER its own tab rather than parked beside the
   control. It is absolutely positioned against .mp-tab (which is already
   position:relative), so it tracks whichever tab it belongs to without anything
   having to measure or recompute on resize.

   z-index below the panel's 60: when a tab is hovered the panel opens over this
   spot, and the panel should win rather than the two overlapping. */
.mp-chip {
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(26, 95, 168, 0.10);
    font-family: var(--font-ui, inherit);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--brand-blue, #1a5fa8);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.mp-chip[hidden] { display: none; }
.mp-chip:hover   { background: rgba(26, 95, 168, 0.17); }
.mp-chip-x       { font-size: 11px; opacity: .65; }

.mp-panel {
    position: absolute;
    top: calc(100% + 10px);
    /* Anchored to the tabs' RIGHT edge: the picker sits at the end of the
       row now, and a centre-anchored panel would hang off the page. */
    right: 0;
    z-index: 60;
    width: min(760px, 92vw);
    padding: 14px 16px;
    max-height: 62vh;
    overflow-y: auto;
    border-radius: 20px;
    padding: 18px 18px 16px;
    /* Layered rather than flat: a graded face so the panel has a top and a
       bottom, a hairline that catches light along its upper edge, and a shadow
       in two parts — a tight contact shadow that anchors it to the tabs plus a
       wide soft one that lifts it off the grid behind. One big blur alone reads
       as a drop shadow effect; two read as an object above a surface. */
    background: linear-gradient(180deg, #fdfeff 0%, #f4f7fc 55%, #eef3fa 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 2px 6px rgba(31, 45, 61, .10),
                0 26px 60px -12px rgba(31, 45, 61, .30),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}
.mp-panel[hidden] { display: none; }
/* An animation rather than a transition: the panel is shown by removing
   [hidden], and there is no transition from display:none — the browser has
   nothing to interpolate from, which is why it used to appear fully formed in
   one frame. An animation runs the moment the element is first displayed.
   Anchored at the top-right because that is the tab it comes out of. */
/* It unfolds out of the tab (Luis, 2026-09-16). The old version nudged down
   six pixels in a sixth of a second, which reads as an appearance rather than a
   movement. This starts small and blurred at the tab's own middle — the origin
   is written by placePanel(), so it follows whichever tab you opened — and
   settles with a little overshoot. The blur clearing as it arrives is what
   makes it liquid rather than a zoom.

   No transform-origin here: setting one would fight the one the script writes. */
@keyframes mpPanelIn {
    from { opacity: 0; transform: scale(.72) translateY(-14px); filter: blur(7px); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
.mp-panel:not([hidden]) {
    animation: mpPanelIn .42s var(--ease-liquid);
}
@media (prefers-reduced-motion: reduce) {
    .mp-panel:not([hidden]) { animation: mpPanelIn .12s ease; }
    @keyframes mpPanelIn { from { opacity: 0; } to { opacity: 1; } }
}
/* A thin scrollbar, in palette. The default chrome bar is the one thing on this
   panel that would still look like a browser default. */
.mp-panel::-webkit-scrollbar { width: 9px; }
.mp-panel::-webkit-scrollbar-track { background: transparent; }
.mp-panel::-webkit-scrollbar-thumb {
    background: rgba(120, 140, 170, .30);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}
.mp-panel::-webkit-scrollbar-thumb:hover { background: rgba(120, 140, 170, .50); background-clip: content-box; }

/* 37 models is far too many for one column — the same reason the site this is
   modelled on uses three. The rule between columns is what turns three lists
   into one table; without it the eye reads across the gap and pairs names that
   have nothing to do with each other. */
/* The columns live on .mp-list, NOT here.
   Every brand's models are wrapped in .mp-body > .mp-list now, and leaving
   column-count on the group meant the group columnised .mp-body while .mp-list
   columnised again inside it — three columns of three, so iPhone came out as
   nine strips of truncated names. A columnising container must not contain a
   columnising child. */
.mp-group { display: none; }
.mp-group.active { display: block; }

.mp-model {
    break-inside: avoid;
    position: relative;
    /* Padding grew with the type. At 6px the rows touched at 14px text and the
       three columns read as one block of words rather than a list. The extra on
       the left is the gutter the selected marker sits in — reserved on every row
       so nothing shifts sideways when one becomes selected. */
    padding: 8px 10px 8px 20px;
    border-radius: 9px;
    font-family: var(--font-ui, inherit);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .14s ease, color .14s ease;
}
.mp-model:hover {
    background: linear-gradient(90deg, rgba(26, 95, 168, .10), rgba(26, 95, 168, .04));
    color: var(--brand-blue, #1a5fa8);
}
.mp-model.picked {
    color: var(--brand-blue, #1a5fa8);
    font-weight: 800;
    background: linear-gradient(90deg, rgba(26, 95, 168, .13), rgba(26, 95, 168, .03));
}
/* The marker for the chosen model. A dot rather than a tick: it has to read at
   a glance down a column of 14 names, and a tick at this size is a smudge. */
.mp-model.picked::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-blue, #1a5fa8);
    box-shadow: 0 0 0 3px rgba(26, 95, 168, .16);
}
.mp-empty { font-size: 13px; color: var(--text-secondary); opacity: .7; padding: 6px 8px; }

/* ═══ SAMSUNG PICKER TOOLS ══════════════════════════════════════════════════
   Two features in one block, kept apart on purpose so either can go.
   DELETE THE SEARCH: the .mp-tools / .mp-search / .mp-search-x rules.
   DELETE THE RAIL:   the .mp-rail / .mp-series rules.
   .mp-body and .mp-list are NOT part of either feature — every brand uses them
   and the 3-column layout lives on .mp-list. Leave them alone. */

/* .mp-body and .mp-list wrap EVERY brand's models, not just Samsung's — the
   markup is uniform and only Samsung puts a rail inside the body. For iPhone
   and Others the body is a flex row with a single child, which lays out exactly
   as the old plain block did.
   Keep .mp-list even if both tools below are removed: the 3-column rule lives
   here now, so deleting it would drop the models into one long column. */
.mp-body { display: flex; align-items: flex-start; gap: 16px; }
/* min-width:0 or the columns refuse to shrink and push the rail off the edge. */
.mp-list { flex: 1 1 auto; min-width: 0; column-count: 3; column-gap: 26px;
           column-rule: 1px solid rgba(120, 140, 170, .16); }
/* Motorola names carry their year — "Moto G Stylus 5G (2025)" — and the year
   is what tells six of them apart, so it must never be the part cut off: two
   columns, and a long name wraps (2026-10-13). */
.mp-group[data-for="Motorola"] .mp-list  { column-count: 3; }
.mp-group[data-for="Motorola"] .mp-model { white-space: normal; }

/* ── the search box ── */
.mp-tools { position: relative; margin: 0 0 14px; }
.mp-search {
    width: 100%;
    padding: 9px 30px 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(120, 140, 170, .28);
    background: rgba(255, 255, 255, .75);
    font-family: var(--font-ui, inherit);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
}
.mp-search:focus { border-color: var(--brand-blue, #1a5fa8);
                   box-shadow: 0 0 0 3px rgba(26, 95, 168, .14); }
.mp-search-x {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 17px; line-height: 1; color: var(--text-secondary);
    cursor: pointer; user-select: none;
    visibility: hidden;      /* JS shows it once there is something to clear */
}

/* ── the series rail ── */
.mp-rail {
    flex: 0 0 124px;
    display: flex; flex-direction: column; gap: 2px;
    padding-right: 14px;
    border-right: 1px solid rgba(120, 140, 170, .18);
}
.mp-series {
    padding: 8px 10px;
    border-radius: 9px;
    font-family: var(--font-ui, inherit);
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: background .14s ease, color .14s ease;
}
.mp-series:hover { color: var(--brand-blue, #1a5fa8);
                   background: linear-gradient(90deg, rgba(26,95,168,.09), rgba(26,95,168,.02)); }
.mp-series.active {
    color: var(--brand-blue, #1a5fa8); font-weight: 800;
    background: linear-gradient(90deg, rgba(26,95,168,.15), rgba(26,95,168,.03));
}
.mp-noresult { padding: 8px 10px; font-size: 13px; color: var(--text-secondary); opacity: .75; }
.mp-noresult[hidden] { display: none; }

@media (max-width: 760px) {
    /* The rail lies down. 124px beside two columns of model names leaves the
       names too narrow to read. */
    .mp-body { flex-direction: column; }
    .mp-rail { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap;
               padding-right: 0; padding-bottom: 10px;
               border-right: none; border-bottom: 1px solid rgba(120,140,170,.18); }
    .mp-list { column-count: 2; }
}
/* ═══ end SAMSUNG PICKER TOOLS ══════════════════════════════════════════════ */

/* ── The model photo, top right (Luis, 2026-10-14) ──────────────────────────
   As on MobileSentrix's own menu: the hovered model's photo in the panel's top
   right corner, its name and model code beside it. The search box keeps the
   rest of the row. Photos are theirs, linked from static.mobilesentrix.com;
   a model they have no photo for shows one of its parts (its back cover, or
   failing that its screen), and failing both, the name and code alone.
   Laid out even before anything is hovered (visibility, not display), so the
   list does not jump down the first time the pointer reaches it. */
/* Pinned to the top of the panel (Luis, 2026-10-14): scrolling a long list
   took the photo away with it, exactly when it was wanted. top is minus the
   panel's top padding, so it sticks flush to the edge; the background is the
   top of the panel's own gradient so the list passes cleanly underneath. */
.mp-head { display: flex; align-items: flex-start; gap: 16px;
           position: sticky; top: -18px; z-index: 2;
           margin: -18px -18px 0; padding: 18px 18px 0;
           background: #fdfeff; border-radius: 20px 20px 0 0; }
body.neu-mode .mp-head { background: #f7fafe; }

/* Samsung and Motorola, the brands with a series rail, get a wide panel and the
   window's full height (Luis, 2026-10-14): at 760px x 62vh, 176 Motorolas were
   two columns of wrapped names and a scrollbar. The height is set by
   placePanel() from where the panel actually starts. */
.mp-panel[data-brand="Motorola"],
.mp-panel[data-brand="Samsung"] { width: min(1200px, calc(100vw - 16px)); }
.mp-head .mp-tools { flex: 1 1 auto; min-width: 0; }
/* The card itself moved OUT of the panel (Luis, 2026-10-14): a card of its
   own just right of the panel, in the middle of the screen, the name and code
   on top and the photo large below. It is on the page rather than in the
   panel (see mpPeek() in index.php); placePeek() sets its left, and moves
   the panel over to make room when it must. */
.mp-peek-card {
    position: fixed; top: 50%; left: 0; z-index: 61;
    width: 270px; box-sizing: border-box;
    padding: 18px 18px 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fdfeff 0%, #f4f7fc 55%, #eef3fa 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 2px 6px rgba(31, 45, 61, .10),
                0 26px 60px -12px rgba(31, 45, 61, .30),
                inset 0 1px 0 rgba(255, 255, 255, 1);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) scale(.96);
    transition: opacity .18s ease, transform .2s ease;
}
.mp-peek-card.on {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition: opacity .3s ease, transform .42s var(--ease-liquid);
}
.mp-peek-name {
    font-family: var(--font-ui, inherit);
    font-size: 15px; font-weight: 700; line-height: 1.3;
    color: var(--text-primary);
}
/* The code is an identifier, so it is set in the house mono, as a chip like
   their Compatibility row. */
.mp-peek-code:empty { display: none; }
.mp-peek-code {
    display: inline-block; margin-top: 8px;
    padding: 2px 8px; border-radius: 6px;
    font-family: var(--font-num, ui-monospace, monospace);
    font-size: 11.5px; font-weight: 700;
    color: var(--brand-blue, #1a5fa8);
    background: rgba(26, 95, 168, .08);
    border: 1px solid rgba(26, 95, 168, .18);
}
/* No white tile (Luis, 2026-10-14), the way the main checkout's phone cards do
   it: the photo is multiplied onto a soft gradient, so its white studio
   background takes the gradient's colour and the phone sits in the panel.
   The gradient holds no pure white — white there would show the photo's white
   back again. Cost, as on the checkout: white inside the phone tints a little. */
.mp-peek-frame {
    margin-top: 14px; height: 300px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; overflow: hidden;
    background: linear-gradient(165deg, #f2f5fa 0%, #e8edf5 55%, #dfe6f0 100%);
}
/* A model with neither a photo nor a part to stand in: name and code alone. */
.mp-peek-card.no-img .mp-peek-frame { display: none; }
/* Studio backgrounds are often a shade off white (#f4–#f8), which multiply
   leaves as a faint box; a touch of brightness and contrast takes them to
   white first, so they vanish too. */
.mp-peek-img { max-width: 100%; max-height: 100%; object-fit: contain;
               mix-blend-mode: multiply; filter: brightness(1.04) contrast(1.06); }
.mp-peek-img[hidden] { display: none; }
@media (max-height: 720px) { .mp-peek-frame { height: 220px; } }
@media (prefers-reduced-motion: reduce) {
    .mp-peek-card, .mp-peek-card.on { transform: translateY(-50%); transition: opacity .15s ease; }
}

@media (max-width: 760px) {
    /* .mp-list, not .mp-group — the columns moved off the group. Left pointing
       at the group this would re-create the nested-columns bug below 760px,
       where it is hardest to notice. */
    .mp-list { column-count: 2; }
    .mp-tab  { padding: 8px 13px; font-size: 12.5px; }
    .mp-group[data-for="Motorola"] .mp-list { column-count: 2; }
}

/* ── Check Warehouse ─────────────────────────────────────────────────────────
   MobileSentrix parts shown as the same cards as your own stock. Only the
   things that genuinely differ are styled differently — the badge and the
   price — so the grid still reads as one list. */
/* The tile that asks MobileSentrix.
   A grid item, not a toolbar button — it sits in the cell after the last part
   you stock, so it is the thing your eye reaches when the shelf runs out. It
   takes the card's radius and gap but stays dashed and unfilled: it is an
   action, and must not be mistaken for a part at a glance.

   No fixed height. Grid items stretch by default, so it matches whatever its
   row is, and the row stays level. */
.wh-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 190px;
    padding: 22px 18px;
    border-radius: 20px;
    border: 2px dashed rgba(202, 138, 4, 0.42);
    background: rgba(202, 138, 4, 0.06);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background .18s ease, border-color .18s ease, transform .14s ease;
}
/* [hidden] is only display:none at browser-default weight, and the rule above
   sets display:flex — so without this the tile is never actually hidden. */
.wh-tile[hidden] { display: none; }
.wh-tile:hover {
    background: rgba(202, 138, 4, 0.13);
    border-color: rgba(202, 138, 4, 0.62);
    transform: translateY(-2px);
}
.wh-tile:active { transform: translateY(0); }
.wh-tile-plus {
    font-family: var(--font-ui, inherit);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #ca8a04;
    opacity: .85;
}
.wh-tile-label {
    font-family: var(--font-ui, inherit);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #b45309;
}
/* Carries the ANSWER after a lookup — "12 in stock to order", "out of stock at
   MobileSentrix", the error. It replaces what the old button's label used to
   say, and reads better here because it is where you were already looking. */
.wh-tile-sub {
    font-family: var(--font-ui, inherit);
    /* Empty until a lookup answers. .wh-tile has gap:6px, which would otherwise
       still be spent on a span with nothing in it. */
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #92600a;
    opacity: .75;
    max-width: 190px;
}
.wh-tile-sub:empty { display: none; }

/* ── Loading the warehouse ───────────────────────────────────────────────────
   One click fans out to several MobileSentrix endpoints and can take a few
   seconds. Without a modal the page looks like it ignored you, and the second
   click is what people do next. */
.wh-modal {
    position: fixed;
    inset: 0;
    z-index: 200001;   /* above the checkout overlays, which top out at 200000 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.wh-modal[hidden] { display: none; }
.wh-modal-box {
    width: min(340px, calc(100vw - 48px));
    padding: 26px 26px 22px;
    border-radius: 20px;
    background: var(--card-bg, #fff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    text-align: center;
}
.wh-modal-title {
    font-family: var(--font-ui, inherit);
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary, #1e293b);
    margin-bottom: 5px;
}
.wh-modal-sub {
    font-family: var(--font-ui, inherit);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    margin-bottom: 16px;
}
/* Indeterminate. None of the endpoints behind this reports progress, so a
   percentage would be invented — the bar says "working", not "how far". */
.wh-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(202, 138, 4, 0.15);
    overflow: hidden;
}
.wh-bar-fill {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #eab308, #b45309);
    animation: whBarSlide 1.15s ease-in-out infinite;
}
@keyframes whBarSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
/* Someone watching a bar loop for several seconds is the exact case the
   reduced-motion setting exists for. Hold it still and let the text carry it. */
@media (prefers-reduced-motion: reduce) {
    .wh-bar-fill { animation: none; width: 100%; opacity: .55; }
}

/* Full-width break before the MobileSentrix block, same device as the stock
   divider above it — one grid, three clearly separated groups. */
.wh-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 14px 2px 4px;
    padding-top: 12px;
    border-top: 1px dashed rgba(202, 138, 4, 0.35);
}
/* No caption on this divider. The dashed rule, the gold chips and the dashed
   card edges below already say "MobileSentrix, to order" three times over; a
   fourth in words was noise. The chips carry their own counts. */
.wh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

/* Category chips.
   These are <span>s carrying role="button", NOT <button>s — see the note where
   they are built. That also means none of the browser's button defaults apply,
   so everything from the cursor to the font has to be stated here. */
.wh-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;                       /* "Screens 8", not "Screens8" */
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(202, 138, 4, 0.28);
    background: rgba(202, 138, 4, 0.07);
    font-family: var(--font-ui, inherit);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    color: #92600a;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s, transform .12s, color .15s;
}
.wh-chip:hover {
    background: rgba(202, 138, 4, 0.15);
    border-color: rgba(202, 138, 4, 0.45);
    transform: translateY(-1px);
}
/* The count is a figure, so it takes the tabular face and sits in its own
   well — at the same weight as the label it read as part of the word. */
.wh-chip-n {
    font-family: var(--font-ui, inherit);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(202, 138, 4, 0.16);
    color: #b45309;
}
.wh-chip.active {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
}
.wh-chip.active .wh-chip-n {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

/* Dashed edge marks the whole card as "not on the shelf" without needing a
   second look at the badge.

   The entrance is on .wh-card and NOT on .product-card generally: warehouse
   cards are inserted once, when you press Check Warehouse, so the animation
   runs once. The in-house cards are shown and hidden by the search on every
   keystroke, and an entrance there would re-fire per character and strobe. */
.wh-card { border: 1px dashed rgba(202, 138, 4, 0.38) !important; }
@keyframes whCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.wh-card { animation: whCardIn .3s cubic-bezier(.22, .8, .28, 1) backwards; }
.wh-divider { animation: whCardIn .3s cubic-bezier(.22, .8, .28, 1) backwards; }

@media (prefers-reduced-motion: reduce) {
    .wh-card, .wh-divider, .mp-panel:not([hidden]) { animation: none; }
}
.wh-badge {
    color: #b45309 !important;
    border-color: rgba(202, 138, 4, 0.55) !important;
}
/* Not a figure — MobileSentrix quotes cost, never your retail — so it is set in
   the label voice rather than the price voice, and no gradient. */
.wh-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    letter-spacing: 0 !important;
}

/* The glass part card (.product-card.card-instock / .card-restock and every
   .gsm-* rule) lives in part_card.css now — it is shared with the active
   repairs board. Link it right after this sheet. */

/* ── Quote mode ─────────────────────────────────────────────────────────────
   body.quote-mode: the three sale steps fold away and Save quote stands where
   Complete Sale was, with the note above it. Save quote opens the ticket
   dialog asking only who the quote is for (name and phone; no date, no
   repair step), and the dialog's Save quote saves it (2026-10-09). The grid
   and cart are untouched. The header button reads as pressed while the mode
   is on, so nobody makes a sale thinking it is a quote or the other way round. */
body.quote-mode .co-stepper,
body.quote-mode .co-step[data-step="2"],
body.quote-mode .co-step[data-step="3"],
body.quote-mode .co-step[data-step="1"] .co-next,
body.quote-mode #ticketModal .checkout-date-picker,
body.quote-mode #rewardPointsSection { display: none !important; }
body.quote-mode .co-step[data-step="1"] .co-head-chev { visibility: hidden; }
.quote-mode-btn.active { background: var(--accent, #1a5fa8) !important; color: #fff !important; }
.quote-note-wrap { margin: 0 0 12px; }
.quote-note-wrap label { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.quote-note-wrap .muted { font-weight: 400; color: var(--text-secondary); }
.quote-note-wrap textarea { width: 100%; resize: vertical; font: inherit; font-size: 13px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--glass-border); }
/* The banner above the buttons when a quote is loaded into a sale. */
.quote-loaded-bar { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--text-primary);
  background: rgba(26,95,168,.08); border: 1px solid rgba(26,95,168,.18); }
.quote-expired { color: #a16207; font-weight: 600; }
/* The hint under the customer search. */
.quote-hint { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.quote-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px;
  background: rgba(26,95,168,.08); border: 1px solid rgba(26,95,168,.18); font-size: 12.5px; color: var(--text-primary); }
.quote-hint-row.expired { opacity: .7; }
.quote-hint-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.quote-hint-load { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: var(--accent, #1a5fa8); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
/* The mode swap uses the hidden attribute; the button rules above set their
   own display, which would otherwise win over the UA's [hidden]. */
#completeSaleBtn[hidden], #saveQuoteBtn[hidden], #quoteNoteWrap[hidden], #quoteLoadedBar[hidden] { display: none !important; }

/* ── The favourites, sitting in the brand track (Luis, 2026-09-16) ──────────
   A TRIAL. The round quick buttons are still above; this is the same four
   parts drawn as tabs so the two can be judged together before either goes.

   .mp-svc borrows .mp-tab's shape and overrides only what differs: a brand tab
   is a filter you leave open, one of these is a press that drops a part into
   the ticket. */
.mp-sep {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    margin: 6px 8px;
    background: rgba(31, 45, 61, 0.14);
}

/* index.css hides .lq-ico everywhere by default — it was drawn for the Liquid
   theme and each theme opts back in. This is that opt-in for the bar, so the
   plug, the arrows, the brackets and the bug show in every theme rather than
   leaving four labels with a blank where the icon should be. */
.mp-svc .lq-ico { display: block; width: 19px; height: 19px; flex: 0 0 auto; opacity: .72; }
.mp-svc:hover .lq-ico { opacity: 1; }

/* Icon only, with the name on the tooltip. Measured, not guessed: with labels
   the seven-item bar came to 884px against the 409px its column had, and it ran
   455px past the end of the toolbar. The icons are the whole point of putting
   these here, so they are what stays.

   The label is kept in the markup and hidden by clip rather than deleted, so a
   screen reader still reads the part's name off the tab. */
.mp-svc { padding: 11px 13px; cursor: pointer; }
.mp-svc .mp-tab-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}
/* A bar that runs out of room takes a second line instead of running off the
   end of the toolbar. Only reachable while the round buttons are still there
   for comparison; on its own the bar fits the row. */
.mp-seg { flex-wrap: wrap; max-width: 100%; }

/* Both on one row (Luis, 2026-09-16). Two columns, not three: .tb-center
   went with the round quick buttons, so the old 1fr auto 1fr left an empty
   third column taking a share of the width for nothing.

   The search gets a FLOOR and a ceiling. Its column collapsed to 8px last time
   precisely because 1fr will shrink to nothing when the auto column beside it
   asks for more than there is; minmax stops that happening whatever the bar
   grows into. The bar takes the rest and centres in it. */
/* BOTH containers, because the toolbar grid is not always the same element:
   measured, the grid is .ql-content in one theme and .pos-toolbar in another.
   Naming only one left the other on its old "1fr auto 1fr", whose outer columns
   squeezed to 165px each and shoved the search box under the bar — the search
   button ended up sitting on top of the first tab icon.

   300, not 360: at 360 the bar had 732px and needed about 730 unwrapped, close
   enough that it wrapped onto two lines anyway. Measured, then set. */
.ql-content,
.pos-toolbar { grid-template-columns: minmax(240px, 300px) 1fr !important; }
.tb-right { grid-column: 2; justify-self: center; }

/* ── The three aux controls, in the bar (Luis, 2026-09-16) ──────────────────
   Recent Orders, Active Repairs and Quote, moved out of the customer card.

   These are <button>s where the brand tabs are <div>s, and that difference is
   deliberate on both sides: the tabs are divs BECAUSE every theme repaints
   buttons through a catch-all keyed on the element, which was eating .active
   off them. These three want that repaint even less, sitting in a track that
   already has its own look — so the catch-alls are undone here rather than the
   elements being changed, since the quote script and the themes both expect a
   button. */
.mp-act {
    padding: 11px 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    font: inherit;
    color: inherit;
    min-height: 0 !important;
    min-width: 0 !important;
}
.mp-act:hover { background: rgba(255, 255, 255, 0.55) !important; }
.mp-act .mp-tab-ico { width: 16px; height: 16px; }

/* Icon only, like the favourites beside them (Luis, 2026-09-16). With their
   labels the bar came to 1012px and could not share the search's row: the grid
   gave its auto column what it asked for, the search column collapsed to 8px
   and the box spilled out underneath. The three labels were about 250px of
   that. Names live on the tooltip; the repair count stays, because a wrench
   with a number on it is the one thing here worth crossing the room for. */
.mp-act .mp-tab-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}
.mp-act { padding: 11px 12px !important; }
.mp-act .co-aux-count { margin-left: 5px; }

/* The count rides inside the tab rather than after it, so the pill and its
   number move as one thing when the track wraps. */
.mp-act .co-aux-count {
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-blue, #1a5fa8);
    background: rgba(26, 95, 168, 0.12);
}

/* Quote is a mode you turn on, not a place you go. */
.mp-act[aria-pressed="true"] {
    background: rgba(26, 95, 168, 0.12) !important;
    color: var(--brand-blue, #1a5fa8) !important;
}

/* ── The aux pill, at the right end of the row (Luis, 2026-09-16) ───────────
   Two tracks now, not one: brands and favourites in the first, the three
   "somewhere else" controls in a second. .mp-bar was already a flex row, so
   spreading it is the whole layout — the first pill hugs the search, the
   second hugs the right edge, and the gap between them is the toolbar's.

   .tb-right has to STRETCH for that to mean anything. Sized to its content it
   was only as wide as the two pills together, and space-between had no space
   to put between them. */
.tb-right { justify-self: stretch !important; }
.mp-wrap  { width: 100%; }
/* The first pill centres, the second stays hard right (Luis, 2026-09-16).

   Not space-between, which put the first pill against the search. Auto margins
   on the first pill take ALL the free space and split it evenly either side of
   it, so it centres in whatever is left once the second pill has taken its
   width — and the second, having no auto margin of its own, ends up flush
   against the right edge.

   Centring it in the WHOLE column instead would overlap them: 589 + 165 needs
   770 of the column's 806, so a pill centred on the full width runs under the
   one pinned beside it. */
.mp-bar   { gap: 16px; }
.mp-seg:not(.mp-seg-aux) { margin-left: auto; margin-right: auto; }

/* The second pill wears the first one's slab, and nothing else needs saying:
   the shape IS the statement that these belong together and not to the track
   beside them. */
.mp-seg-aux { flex: 0 0 auto; }

/* Both pills the same height. The first is 62px because its brand tabs carry
   logos, which are taller than the 16px glyphs in the second; left alone the
   two read as a control and its afterthought rather than as a pair. Measured
   at 62 and 50, so the tabs inside the second get the 50px the first one's
   already have. */
/* !important because the .mp-act reset above sets min-height:0 that way, to
   get out from under the theme catch-alls — without it this rule loses to it. */
.mp-seg-aux .mp-act { min-height: 50px !important; }

/* ── The hover label (Luis, 2026-09-16) ─────────────────────────────────────
   The icon-only tabs — the four favourites and the three aux controls — used
   the browser's own tooltip, which arrives a second late, in the system font,
   wherever the pointer happens to be. This is the same name as a small pill
   above the icon, appearing at once and where the icon is.

   It is the SAME element either way: .mp-tab-label already carries the real
   text and was only being hidden by clip. Positioning it instead of clipping
   it means the name is still in the accessibility tree and still what gives
   these buttons their accessible name — which is why the title attributes
   could be removed rather than left to fire underneath this. */
.mp-svc,
.mp-seg-aux .mp-act { position: relative; overflow: visible; }

.mp-svc .mp-tab-label,
.mp-seg-aux .mp-act .mp-tab-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: auto; height: auto; margin: 0;
    clip: auto; clip-path: none; overflow: visible;
    padding: 5px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(31, 45, 61, 0.18), 0 0 0 1px rgba(31, 45, 61, 0.06);
    font-family: var(--font-ui, inherit);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #1f2d3d;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px) scale(.72);
    filter: blur(7px);
    transform-origin: 50% 120%;
    transition: opacity .12s ease, transform .16s ease, filter .12s ease;
    z-index: 40;
}
.mp-svc:hover .mp-tab-label,
.mp-svc:focus-visible .mp-tab-label,
.mp-seg-aux .mp-act:hover .mp-tab-label,
.mp-seg-aux .mp-act:focus-visible .mp-tab-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
    /* The swell is on the way IN only. Reversing a 0.38s curve on the way out
       leaves the name hanging over the bar after the pointer has gone, which
       reads as lag rather than polish, so the resting rule above tidies it
       away in a third of the time. */
    transition: opacity .2s ease,
                transform .38s var(--ease-liquid),
                filter .26s ease;
}
@media (prefers-reduced-motion: reduce) {
    .mp-svc .mp-tab-label,
    .mp-seg-aux .mp-act .mp-tab-label { transition: opacity .1s ease; transform: translateX(-50%); filter: none; }
    .mp-svc:hover .mp-tab-label,
    .mp-seg-aux .mp-act:hover .mp-tab-label { transform: translateX(-50%); filter: none; }
}

/* Nothing between the label and the page may crop it. The pills carry a radius
   and a background, which is exactly the kind of box that clips by default. */
.mp-seg, .mp-seg-aux, .mp-bar, .mp-wrap, .tb-right { overflow: visible; }

/* ── Room for a fourth brand (Motorola, 2026-10-13) ───────────────────────────
   Four brand names did not fit beside the icon tabs below about 2100px, and
   the bar broke onto a second row. .mp-compact is set by the picker script
   only when the row would wrap: the three brands with a logo then show the
   logo alone and their name rises as the same hover label the icon tabs use.
   Others keeps its word — its icon is a generic phone. Wide screens are
   unchanged. */
.mp-bar.mp-compact .mp-tab[data-brand]:not([data-brand="Others"]) { padding-left: 15px; padding-right: 15px; overflow: visible; }
.mp-bar.mp-compact .mp-tab[data-brand]:not([data-brand="Others"]) .mp-tab-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    padding: 5px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(31, 45, 61, 0.18), 0 0 0 1px rgba(31, 45, 61, 0.06);
    font-size: 11.5px;
    font-weight: 600;
    color: #1f2d3d;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px) scale(.72);
    filter: blur(7px);
    transform-origin: 50% 120%;
    transition: opacity .12s ease, transform .16s ease, filter .12s ease;
    z-index: 40;
}
.mp-bar.mp-compact .mp-tab[data-brand]:not([data-brand="Others"]):hover .mp-tab-label,
.mp-bar.mp-compact .mp-tab[data-brand]:not([data-brand="Others"]):focus-visible .mp-tab-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
    transition: opacity .2s ease, transform .38s var(--ease-liquid), filter .26s ease;
}
@media (prefers-reduced-motion: reduce) {
    .mp-bar.mp-compact .mp-tab[data-brand] .mp-tab-label { transition: opacity .1s ease; transform: translateX(-50%); filter: none; }
}

/* ── The icon wells and their ring (Luis, 2026-09-16) ───────────────────────
   The same treatment the dashboard's table avatars wear: the glyph sits in a
   shallow engraved well, and on hover a ring grows out of it and fades. The
   recipe is copied deliberately rather than invented — inset 3px, a 1.5px
   house-green edge, scale to 1.55 over 1.6s — so the two read as one idea in
   two places. The keyframes are redeclared here because that rule lives in
   dashboard.css, which this page does not load. */
.mp-ico-well {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(23, 54, 59, 0.045);
    box-shadow: inset 2px 2px 4px rgba(23, 54, 59, 0.18),
                inset -2px -2px 4px rgba(255, 255, 255, 0.9);
}
.mp-ico-well::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(63, 122, 104, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: scale(1);
}
.mp-svc:hover .mp-ico-well::after,
.mp-svc:focus-visible .mp-ico-well::after,
.mp-act:hover .mp-ico-well::after,
.mp-act:focus-visible .mp-ico-well::after { animation: mp-ring 1.6s ease-out infinite; }
@keyframes mp-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.55); opacity: 0; } }

/* The glyphs themselves move on hover, each in the way its own object would.
   Declared here rather than in apple.css like the favourites' flicks, because
   these three belong to this page and should animate in every theme. */
@keyframes mp-receipt { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-2.5px) rotate(-3deg); } 70% { transform: translateY(0.5px); } }
@keyframes mp-gear-cw  { to { transform: rotate(360deg); } }
@keyframes mp-gear-ccw { to { transform: rotate(-360deg); } }
@keyframes mp-tag     { 0%,100% { transform: rotate(0); } 30% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }
.mp-act:hover .mp-ico-receipt { animation: mp-receipt .55s ease; }
/* Each gear turns about its own centre, in view-box units, the way the topbar's
   single gear does. Opposite directions and a 4:3 period, because they are drawn
   meshed at eight teeth and six: a pair that turned the same way, or at the same
   rate, would read as two loose wheels rather than one mechanism. */
.mp-ico-gears .mp-gear   { transform-box: view-box; }
.mp-ico-gears .mp-gear-a { transform-origin: 9.2px 9.2px; }
.mp-ico-gears .mp-gear-b { transform-origin: 17px 16.8px; }
.mp-act:hover .mp-gear-a,
.mp-act:focus-visible .mp-gear-a { animation: mp-gear-cw 2.4s linear infinite; }
.mp-act:hover .mp-gear-b,
.mp-act:focus-visible .mp-gear-b { animation: mp-gear-ccw 1.8s linear infinite; }
.mp-act:hover .mp-ico-tag     { animation: mp-tag .55s ease; transform-origin: 70% 30%; }

@media (prefers-reduced-motion: reduce) {
    .mp-svc:hover .mp-ico-well::after,
    .mp-act:hover .mp-ico-well::after { animation: none; opacity: .45; }
    .mp-act:hover .mp-tab-ico { animation: none; }
    .mp-act:hover .mp-gear    { animation: none; }
}

/* Room to breathe between them. The wells give each glyph its own edge, so the
   old tight padding made them touch; the gap does the separating now and the
   padding comes back down. */
.mp-seg     { gap: 6px; }
.mp-svc     { padding: 6px 8px !important; }
.mp-seg-aux { gap: 8px; }
.mp-seg-aux .mp-act { padding: 6px 8px !important; }

/* Trimmed to fit (Luis, 2026-09-16). The wells and the new spacing took the
   two pills to 848px in a column of 806, and a flex row with negative free
   space does not tidy itself: the auto margins that centre the first pill
   collapsed to zero and the two ran straight over each other.

   Measured, then cut where it costs least: the well comes down 4px, the tabs
   around it lose a little padding, and the brand tabs give up the 22px of side
   air they were carrying — they are the widest things in the bar and the least
   in need of it. */
.mp-ico-well { width: 28px; height: 28px; }
.mp-svc, .mp-seg-aux .mp-act { padding: 6px 7px !important; }
.mp-seg     { gap: 5px; }
.mp-seg-aux { gap: 6px; }
.mp-tab[data-brand] { padding: 11px 15px; }

/* No backing plate behind the glyphs (Luis, 2026-09-16). The well came over
   from the dashboard avatars a moment ago, where a photo needs something to
   sit in; a line drawing does not, and seven light discs in a row read as
   seven badges rather than seven icons.

   The element stays and keeps its size. It is what the hover ring is drawn
   around and measured from — take it away and the ring has nothing to grow
   out of. It just paints nothing now. */
.mp-ico-well { background: none; box-shadow: none; }

/* An engraved ring around each glyph (Luis, 2026-09-16). A groove, not a
   border: the house cut puts the dark wall up and to the left and the lit lip
   down and to the right, which is the same direction --ap-engrave uses on the
   figures, so the two read as the same light falling on the same surface.

   Inset, not an outer shadow. An outer one on a transparent circle casts the
   whole disc's silhouette and the ring comes out looking raised — the opposite
   of what it should be. The hairline border is the groove itself; the two
   shadows are its two walls.

   It sits at -2px and the hover ring at -3px, so they never touch. */
.mp-ico-well::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(31, 45, 61, 0.10);
    box-shadow: inset 1px 1px 1px rgba(23, 54, 59, 0.22),
                inset -1px -1px 1px rgba(255, 255, 255, 0.95);
    pointer-events: none;
}

/* Bigger glyphs (Luis, 2026-09-16). The brand logos are 20px tall and read as
   the largest things in the bar; the favourites were 19 and the aux three only
   16, which made them look like a smaller class of control rather than peers.
   All seven go to 22 — above the logos, because a line drawing carries less
   ink than a filled mark at the same height.

   The wells grow with them so the engraved ring keeps its proportion, and the
   tabs give back a little padding to pay for it: the column has about 37px
   spare and the larger wells want 42, so the difference comes out of the air
   around them rather than out of the row. */
.mp-svc .lq-ico,
.mp-act .mp-tab-ico { width: 22px !important; height: 22px !important; }
.mp-ico-well { width: 34px; height: 34px; }
.mp-svc, .mp-seg-aux .mp-act { padding: 5px !important; }

/* The three aux glyphs take the house green on hover (Luis, 2026-09-16) —
   the same #3f7a68 the ring around them grows in, so the colour and the ring
   are one gesture rather than two. */
.mp-act:hover .mp-tab-ico,
.mp-act:focus-visible .mp-tab-ico { color: #3f7a68; }
.mp-act .mp-tab-ico { transition: color .16s ease; }

/* ── Engraved pills, a trial (Luis, 2026-09-16) ───────────────────────────────
   Both bars pressed INTO the page instead of floating above it. The raised
   drop shadow goes entirely; what replaces it is the two-light recess the icon
   wells already use — dark from the top-left, white from the bottom-right — so
   the pill and the wells inside it are lit by the same lamp.

   A recess has no shadow to draw its edge with, which is what the hairline ring
   is for: without it the pill's boundary dissolves into the page wherever the
   background behind it happens to be pale. It is an outset box-shadow rather
   than a border on purpose, so nothing about the layout moves and this block
   can be deleted whole to go back.

   RESTORE (repairs.css line ~4245):
       box-shadow: 0 6px 16px rgba(31, 45, 61, 0.10),
                   0 1px 0 rgba(255, 255, 255, 0.85) inset;            */
.mp-seg {
    box-shadow: inset 2px 2px 5px rgba(23, 54, 59, 0.16),
                inset -2px -2px 5px rgba(255, 255, 255, 0.95),
                0 0 0 1px rgba(31, 45, 61, 0.10);
}

/* ── The parts search folds to its button (Luis, 2026-09-16) ──────────────────
   The same control as the one in the top bar, and now the same behaviour: it is
   just the circle until it is wanted.

   Only the CLOSED state is written here, and it is written as :not(.is-open) on
   purpose. Open, the box is painted by whichever theme is running — a white
   pill in Apple, a well in Neumorphic — and none of that is touched or copied.
   Closed, this strips the decoration back to nothing so what is left standing
   on the bar is the button alone.

   RESTORE: delete this block and the id on the wrapper in index.php.          */
/* Geometry lives HERE, on the element itself, and is the SAME KIND in both
   states. That is the whole of why this used to open hard (Luis, 2026-09-16).

   Before, only the closed state pinned `flex: 0 0 auto`; open, it fell back to
   .search-wrapper's `flex: 1 1 auto`, so the flex algorithm decided the box's
   rendered width and the `width` property the transition was animating had no
   say. The box jumped to its flexed size and the curve never ran — no curve
   was ever going to fix that, which is why the liquid one changed nothing.

   Two more of the same kind of trap are closed off here: `max-width` used to
   jump 46px -> 420px untransitioned, clamping the first frame; and the width
   ran 46px -> 100%, asking the browser to interpolate a length against a
   percentage. Both ends are plain pixels now.

   This is exactly how .topbar-search-wrap has always done it — flex pinned,
   two fixed widths — and why that one glides. */
#partsSearchWrap {
    flex: 0 0 auto;
    width: 46px;
    min-width: 0;
    max-width: none;
    transition: width .52s var(--ease-liquid),
                background .32s ease, border-color .32s ease,
                padding .32s ease, box-shadow .32s ease;
}
/* Engraved, to match the two pills beside it (Luis, 2026-09-16). OPEN ONLY —
   folded, the :not(.is-open) block below strips the decoration back to
   nothing, and an engraved 46px disc would only be a second ring fighting the
   one the button already carries.

   The border goes transparent and the hairline ring takes over, so this box
   and the pills get their edge from the same 1px at the same colour instead of
   from two mechanisms that drift apart the next time one is touched.

   The background comes down off pure white because a recess needs it to: the
   bottom-right half of an engrave is a WHITE highlight, and on a white ground
   there is nothing for it to show against — the hollow reads from one side
   only and looks like a smudge rather than a dish. Same tone as .mp-seg, so
   the whole bar is one material.

   RESTORE white: background #ffffff, border-color var(--ap-line), no shadow. */
#partsSearchWrap.is-open {
    width: 300px;
    background: rgba(226, 232, 240, 0.62);
    border-color: transparent;
    box-shadow: inset 2px 2px 5px rgba(23, 54, 59, 0.16),
                inset -2px -2px 5px rgba(255, 255, 255, 0.95),
                0 0 0 1px rgba(31, 45, 61, 0.10);
}


/* Closed: decoration only, nothing that decides size. */
#partsSearchWrap:not(.is-open) {
    /* The gap goes too. Left in, it holds 8px open beside a field that is no
       longer there and shoulders the button out past the clip. */
    gap: 0 !important;
    padding: 0 !important;
    justify-content: center;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* The field itself folds the same way the top bar's does: no width and no
   opacity, so none of it is caught showing in the gap while the box animates.
   The fade is held back .08s so the box is already opening when the text
   arrives, rather than the two racing each other. */
#partsSearchWrap #productSearch {
    flex: 1 1 auto;
    min-width: 0;
    filter: blur(0);
    transition: opacity .3s ease .1s, filter .34s ease .1s;
}
#partsSearchWrap:not(.is-open) #productSearch {
    /* flex-grow off, not just width:0. Left growing, the field takes the few
       pixels spare beside the button and stays a focusable sliver. */
    flex: 0 0 0 !important;
    width: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    filter: blur(6px) !important;
    border: 0 !important;
}

/* No focus ring on the parts search (Luis, 2026-09-16).
   apple.css already asks for this at line 621, but the blanket
   `:is(input, select, textarea):focus` rule above it at line 293 is one point
   more specific and carries !important too, so the intent never landed and the
   ring came back anyway. Two ids settle it, in every theme rather than just
   Apple's.

   Dropping a focus ring is normally the wrong move, but this field cannot be
   reached without the box opening first — the opening IS the focus signal, and
   a 2px ring around a box that just animated open is the one place it says
   nothing that was not already obvious. */
#partsSearchWrap #productSearch:focus,
#partsSearchWrap #productSearch:focus-visible {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #partsSearchWrap { transition: width .01s linear; }
    #partsSearchWrap #productSearch { transition: opacity .01s linear; }
    #partsSearchWrap:not(.is-open) #productSearch { filter: none !important; }
}

/* ── Parts search: the iOS pill, on trial (Luis, 2026-09-19) ─────────────────
 *
 * "make the search bar ... look like this one on the photo, give it a soft
 * gradiant ... just want to see how it looks".
 *
 * One block, appended, touching nothing above it — so seeing how it looks costs
 * one deploy and changing your mind costs deleting from this comment to the end
 * of the file.
 *
 * Scoped to .is-open, and that matters. This search is not a static pill: it
 * lives at 46px folded and opens to 300px, and the circle IS the control that
 * opens it. Restyling the folded state would have left the button looking like
 * nothing to press.
 *
 * The magnifier moves to the LEFT, as the photo has it, by reordering the
 * button rather than hiding it and drawing a new glyph — so it keeps its click
 * target and the search still folds and unfolds exactly as before. It only has
 * to stop looking like a button: no fill, no shadow, grey stroke. The white
 * inner field goes transparent at the same time, because the photo's box is ONE
 * surface and the current one is a pill inside a pill.
 *
 * !important throughout the input: this page runs the Apple theme, and
 * apple.css sets background, border and border-radius on
 * :is(input, select, textarea) with !important. Specificity alone would win
 * here, but not against its !important. */
#partsSearchWrap.is-open {
  /* Replaces the engraved slate. A recess needs a light source above it; this
     wants the opposite — a soft top-down ramp, grey into white, sitting on the
     page rather than cut into it. */
  background: linear-gradient(180deg, #ececee 0%, #f4f4f6 52%, #fdfdfe 100%) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
  /* A hairline lift, a wider soft drop, and a white inset along the top edge
     that reads as the light the gradient implies. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 8px 18px -8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  padding-left: 6px;
}
/* The toggle, moved and undressed — still the same button, still opens and
   closes the field. */
#partsSearchWrap.is-open .search-circle-btn {
  order: -1;
  width: 32px;
  height: 32px;
  margin-left: 2px;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* stroke as a presentation attribute on the <svg> loses to a stylesheet, which
   is how the white glyph becomes a grey one without touching the markup. */
#partsSearchWrap.is-open .search-circle-btn svg {
  width: 17px;
  height: 17px;
  stroke: #8e8e93;
  stroke-width: 2.2;
}
#partsSearchWrap.is-open .search-circle-btn:hover svg { stroke: #6e6e73; }
/* One surface, not two: the field gives up its own fill, border and blur and
   lets the wrapper be the pill. */
#partsSearchWrap.is-open #productSearch {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 13px 18px 13px 6px !important;
  font-size: 14px;
  color: #1d1d1f !important;
}
#partsSearchWrap.is-open #productSearch::placeholder {
  color: #86868b !important;
  font-weight: 400;
}
/* Focus lightens the fill rather than adding a ring — the box should look like
   it has woken up, not like it has grown an outline it did not have. */
#partsSearchWrap.is-open:focus-within {
  background: linear-gradient(180deg, #f6f6f8 0%, #fefefe 60%, #ffffff 100%) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}
#partsSearchWrap.is-open:focus-within .search-circle-btn svg { stroke: #6e6e73; }

/* ── Customer search: the same pill (Luis, 2026-09-19) ───────────────────────
 *
 * "on the customer info card ... make the search bar exactly like in the first
 * photo" — the parts search above. Same recipe, same values, so the two read as
 * one component rather than two that happen to resemble each other.
 *
 * Built the other way round from that one, because the markup is the other way
 * round: on the parts bar the WRAPPER is the pill and the field sits
 * transparent inside it, while here the INPUT has always carried the white fill
 * and the radius. Rather than leave one of each, the wrapper becomes the pill
 * here too and the field gives up its fill — so a later change to the look is
 * one edit applied twice, not two different edits.
 *
 * This button is NOT decoration: it calls searchCustomer(). It is reordered and
 * undressed, never hidden, so the click target survives exactly as it was — the
 * same treatment the parts toggle got, and for the same reason.
 *
 * The input is addressed by ID. apple.css sets background and border on
 * :is(input, select, textarea) with !important at (0,2,2), and a class pair
 * would tie on !important and lose on specificity; an id outranks it. */
.customer-search-wrapper {
  gap: 0;
  padding-left: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ececee 0%, #f4f4f6 52%, #fdfdfe 100%);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 8px 18px -8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: background .22s ease, border-color .22s ease;
}
/* Addressed through the input's ID, not by class pair. apple.css styles
   .search-circle-btn at (0,2,1) WITH !important and its svg stroke at
   (0,2,2) — a class-only selector here ties the first and loses the
   second, which is exactly what happened: the pill came out right and the
   button stayed a dark circle with a white glyph. The button is the
   input's next sibling, so ~ borrows its id and wins on the id column in
   every theme. The parts bar never hit this because #partsSearchWrap put
   an id in its selectors already. */
#customerSearchInput ~ .search-circle-btn {
  position: static;   /* it was absolutely positioned against the right edge */
  order: -1;
  width: 32px;
  height: 32px;
  margin-left: 2px;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* stroke as a presentation attribute on the <svg> loses to a stylesheet, which
   is how the white glyph becomes a grey one without touching the markup. */
#customerSearchInput ~ .search-circle-btn svg {
  width: 17px;
  height: 17px;
  stroke: #8e8e93;
  stroke-width: 2.2;
}
#customerSearchInput ~ .search-circle-btn:hover svg { stroke: #6e6e73; }

#customerSearchInput {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 13px 18px 13px 6px !important;
  font-size: 14px;
  color: #1d1d1f !important;
}
#customerSearchInput::placeholder {
  color: #86868b !important;
  font-weight: 400;
}
/* No blue ring (Luis, 2026-09-19). apple.css gives every input
   `outline: 2px solid var(--ap-blue-hi) !important` on focus, and on a pill
   this size it lands as a hard blue racetrack around a soft grey box. The
   parts search never showed it because apple.css exempts .product-search by
   name; this field had no such exemption, so it gets one here. An id beats
   that rule's (0,3,2).

   The ring is replaced, NOT simply deleted. Something has to say where the
   cursor is, so the whole pill takes the job: the fill lifts toward white, the
   hairline darkens, and a soft neutral halo sits under it. That reads as the
   box waking up rather than as an outline appearing around it, and it is the
   same language the rest of this page uses. */
#customerSearchInput:focus,
#customerSearchInput:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.customer-search-wrapper:focus-within {
  background: linear-gradient(180deg, #f6f6f8 0%, #fefefe 60%, #ffffff 100%);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 16px -6px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.customer-search-wrapper:focus-within #customerSearchInput ~ .search-circle-btn svg { stroke: #6e6e73; }

/* ── The customer match popover (Luis, 2026-09-19) ───────────────────────────
 *
 * Floats under the search bar rather than pushing a row into the card below it.
 * Anchored to .customer-search-wrapper, which is already position:relative, and
 * stretched left:0/right:0 so it is exactly as wide as the bar it belongs to.
 *
 * The motion is the house one, the same curve the category dropdown uses: it
 * swells in on --ease-liquid and is tidied away in a fraction of that, because
 * reversing the long curve on the way out leaves the panel hanging after the
 * choice is made. */
.cust-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  /* A floor, because the panel is only as wide as the bar it hangs off
     and that bar is a flex item: on the checkout row it collapses to its
     150px minimum once the Recent Sales / Drawer Log / Change / Cash out
     buttons crowd it, which left a name and a phone number stacked in a
     column barely wider than the word 'Tienda'. It grows rightward from
     the bar rather than shrinking to it. */
  min-width: 240px;
  z-index: 60;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(31, 45, 61, 0.18),
              0 0 0 1px rgba(31, 45, 61, 0.07);
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transform-origin: 50% 0;
  transition: opacity .12s ease, transform .16s ease;
}
.cust-pop.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .2s ease, transform .34s var(--ease-liquid, ease);
}
/* display beats the attribute — .cust-pop is not display:block by default once
   a theme gets hold of it, and the same trap has been hit elsewhere in here. */
.cust-pop[hidden] { display: none !important; }
/* The card inside keeps its own look; it only loses the hover lift, which was
   designed for a row sitting in the page and reads as a wobble inside a panel
   that is already floating. */
.cust-pop .customer-found { margin: 0; }
.cust-pop .customer-found:hover { transform: none; }
.cust-pop-wait {
  padding: 14px 10px;
  text-align: center;
  font-size: 13px;
  color: #86868b;
}

/* Chrome paints an autofilled field with its own pale blue and will not take a
   background from CSS — which is where the bluish box came from, not from
   anything in this file. The colour is applied through a transition, so a
   transition long enough to never arrive is what keeps it off; the text colour
   has to be set through -webkit-text-fill-color for the same reason. The pill
   behind it then shows through, which is the whole point. */
#customerSearchInput:-webkit-autofill,
#customerSearchInput:-webkit-autofill:hover,
#customerSearchInput:-webkit-autofill:focus,
#customerSearchInput:-webkit-autofill:active {
  -webkit-text-fill-color: #1d1d1f !important;
  -webkit-transition: background-color 100000s ease-in-out 0s !important;
          transition: background-color 100000s ease-in-out 0s !important;
  caret-color: #1d1d1f;
}

/* ── Customer name and phone, in the house figure style (Luis, 2026-09-19) ───
 *
 * "make customer name and phone numbers font the big number gradiant popup
 * style we been using along the way."
 *
 * They get the weight, the size, the tight tracking and the RAISE — the white
 * edge above and the soft shadow below that gives the headline figures their
 * lift. What they cannot have is the clipped gradient ramp, and that is a
 * browser limit rather than a choice:
 *
 *   background-clip:text does not apply to an <input>'s value. The value is
 *   drawn by the browser's own text control, not as inline content, so the clip
 *   has nothing to act on — and paired with -webkit-text-fill-color:transparent
 *   the result is a field that holds "Tienda" and displays nothing at all.
 *   That is exactly what the first attempt at this did. It works on the
 *   dashboard's figures because those are <div>s.
 *
 * So the colour is the ramp's own top note, #1d1d1f, which is the tone those
 * figures read as anyway — the ramp only lightens toward the foot of tall
 * glyphs. Side by side with a card value the difference is the gradient, not
 * the character.
 *
 * The filter carries a literal fallback: --ap-raise-filter is defined on
 * body.apple-mode, and a var() that resolves to nothing would drop the lift
 * silently in any other theme. */
#customerName,
#customerPhone {
  font-size: 16px;
  font-weight: 700 !important;
  letter-spacing: -0.022em;
  color: #1d1d1f !important;
  filter: var(--ap-raise-filter,
          drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95))
          drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.28)));
}
/* Prompts, not values: lighter, unbolded, and carrying none of the lift — a
   raised placeholder reads as a value that is already there. */
#customerName::placeholder,
#customerPhone::placeholder {
  color: #b0b8c4 !important;
  -webkit-text-fill-color: #b0b8c4 !important;
  font-weight: 400;
  letter-spacing: 0;
}

/* ── Parts search as the Quick Sale inventory search (Luis, 2026-09-29) ─────
   Copied from checkout/index.css (.category-search-row .inv-glow) and scoped
   to #partsSearchWrap: the white pill, plum edge, pulsing glow and travelling
   arc (sbGlowPulse / sbBorderRun / --sb-ang are index.css's), the label
   centred and quiet, the barcode glyph scanning at the right end. !important
   throughout, because apple.css dresses .search-wrapper / .search-circle-btn
   with its own !important rules. */
#partsSearchWrap.inv-glow {
  position: relative !important; height: 52px !important; padding: 0 50px !important; box-sizing: border-box; gap: 0 !important;
  border-radius: 999px !important; background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%) !important;
  border: 1px solid rgb(180, 157, 164) !important;
  box-shadow: 0 2px 8px rgba(31, 45, 61, 0.10), 0 1px 2px rgba(31, 45, 61, 0.06), inset 0 1px 0 #ffffff !important;
}
#partsSearchWrap.inv-glow:focus-within { box-shadow: 0 0 0 3px rgba(107, 55, 68, 0.12), 0 2px 8px rgba(31, 45, 61, 0.10) !important; }
#partsSearchWrap.inv-glow::before, #partsSearchWrap.inv-glow::after { content: ''; position: absolute; inset: -1px; border-radius: 999px; pointer-events: none; z-index: 1; }
#partsSearchWrap.inv-glow::before { box-shadow: 0 0 16px 1px rgba(107, 55, 68, 0.28); animation: sbGlowPulse 3.8s ease-in-out infinite; }
#partsSearchWrap.inv-glow::after {
  padding: 1px;
  background: conic-gradient(from var(--sb-ang), transparent 0deg, rgb(118, 70, 82) 16deg, transparent 54deg);
  -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;
  animation: sbBorderRun 7s linear infinite; opacity: .85;
}
#partsSearchWrap.inv-glow #productSearch {
  width: 100% !important; height: auto !important; padding: 0 !important; text-align: center !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
  font-family: var(--font-ui) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: .02em !important; color: #12161d !important;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, .95), 1px 1px 2px rgba(30, 50, 90, .32) !important;
}
#partsSearchWrap.inv-glow #productSearch::placeholder { font-size: 13px !important; letter-spacing: .18em; font-weight: 600 !important; color: #8e9095 !important; text-shadow: none; }
#partsSearchWrap.inv-glow #productSearch:focus::placeholder { color: transparent !important; }
#partsSearchWrap.inv-glow #partsSearchBtn {
  position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 36px !important; height: 36px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 10px !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2; cursor: pointer;
}
#partsSearchWrap.inv-glow #partsSearchBtn:hover { background: rgba(63, 122, 104, 0.08) !important; }
#partsSearchWrap .inv-bc { display: block; overflow: visible; }
#partsSearchWrap .inv-bc .inv-corners, #partsSearchWrap .inv-bc .inv-bars { stroke: #3f7a68; }
#partsSearchWrap .inv-bc .inv-corners { transform-box: fill-box; transform-origin: center; animation: rpFrame 2.4s ease-in-out infinite; }
#partsSearchWrap .inv-bc .inv-laser { stroke: #e5484d; filter: drop-shadow(0 0 1.5px rgba(229, 72, 77, .8)); animation: rpLaser 2.4s ease-in-out infinite; }
@keyframes rpFrame { 0%, 100% { transform: scale(1); } 50% { transform: scale(.88); } }
@keyframes rpLaser { 0%, 100% { transform: translateY(-4.5px); opacity: .95; } 50% { transform: translateY(4.5px); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { #partsSearchWrap .inv-bc .inv-corners, #partsSearchWrap .inv-bc .inv-laser, #partsSearchWrap.inv-glow::before, #partsSearchWrap.inv-glow::after { animation: none; } }
/* Always open and as wide as its column: the fold's 46px / 300px widths and
   its sunken open-state face are replaced by the pill above. */
#partsSearchWrap.inv-glow, #partsSearchWrap.inv-glow.is-open {
  width: 100% !important; max-width: 440px !important; min-width: 260px !important; flex: 1 1 auto !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%) !important;
  border-color: rgb(180, 157, 164) !important;
  box-shadow: 0 2px 8px rgba(31, 45, 61, 0.10), 0 1px 2px rgba(31, 45, 61, 0.06), inset 0 1px 0 #ffffff !important;
  overflow: visible !important; transition: box-shadow .25s ease !important;
}
#partsSearchWrap.inv-glow.is-open:focus-within { box-shadow: 0 0 0 3px rgba(107, 55, 68, 0.12), 0 2px 8px rgba(31, 45, 61, 0.10) !important; }
#partsSearchWrap.inv-glow #productSearch { flex: 1 1 auto !important; opacity: 1 !important; filter: none !important; transition: none !important; }
/* The line's points as one pill (Luis, 2026-09-29): the card-fee chip's shape,
   green on with the points it earns, red off. Click flips it. */
.pts-pill { margin-left: 8px; white-space: nowrap; }