/*
 * Buff App Stylesheet (dase_buff)
 * Loaded fleet-wide on every tenant-facing Buff page via hooks.py web_include_css.
 * Design sources:
 *   DASE_BUFF_DESIGN_SESSION_1_ADDENDUM_2026-07-06.md
 *   DASE_BUFF_CUSTOMER_UI_LAYOUT_v1_2026-07-09.md
 *   DASE_BUFF_CUSTOMER_UI_LAYOUT_v1_1_2026-07-11.md
 */

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    /* =====================================================================
       Buff Sheen System v1 tokens
       Source: DASE_BUFF_DESIGN_BRIEF_SHEEN_v1_2026-07-19.md
       Supersedes: v1/v1.1 token block (warm cream + flat #00ACBD teal).
       Names preserved for backward compatibility with downstream selectors;
       values repainted to the Sheen palette.
       ===================================================================== */

    /* Peacock teal ramp (Sheen §2.1, §2.2)
       Brand teal canonicalised to #0FA6B8 per Brief §2.1, superseding
       the Session 5A #00ACBD alignment. */
    --buff-primary: #0FA6B8;              /* Brand teal (canonical) */
    --buff-primary-dark: #0A7684;         /* Section titles, text on tint */
    --buff-primary-shade: #06525C;        /* Deep petrol ink (text only, never surface) */
    --buff-primary-tint-solid: #E6F8FA;   /* Soft sheen tint fill (was #DAF0F3) */
    --buff-primary-hover-bg: rgba(15, 166, 184, 0.06);
    --buff-primary-active-bg: rgba(15, 166, 184, 0.09);
    --buff-primary-focus-ring: rgba(15, 166, 184, 0.3);

    /* Legacy dashboard aliases (kept; repointed to new values) */
    --buff-primary-tint: var(--buff-primary-hover-bg);
    --buff-primary-tint-strong: var(--buff-primary-active-bg);
    --buff-primary-bg: rgba(15, 166, 184, 0.04);

    /* Sheen gradient stops (new, Brief §2.1) */
    --buff-sheen-1: #0FA6B8;
    --buff-sheen-2: #3FC2D2;
    --buff-sheen-3: #7ADCE8;
    --buff-sheen: linear-gradient(180deg, var(--buff-sheen-1), var(--buff-sheen-2) 55%, var(--buff-sheen-3));
    --buff-sheen-h: linear-gradient(90deg, #4CC9D8, #8FE3EE);
    --buff-sheen-soft: linear-gradient(90deg, #C9F2F7, #E2F8FA);
    --buff-sheen-hero: linear-gradient(135deg, #DFF7FA, #F2FDFE);
    --buff-sheen-tint: linear-gradient(90deg, #E8FAFC, #F6FEFE);

    /* Canvas + surfaces (Sheen §2.2, §4) */
    --buff-bg: #F2FBFC;                   /* Canvas (was #FBFAF6) */
    --buff-surface: #FFFFFF;
    --buff-surface-tint: #EFF8F9;
    --buff-surface-deeper: #E4F2F5;
    --buff-surface-subtle: #F7FCFD;
    --buff-hairline: #EAF6F8;
    --buff-border: #E4F2F5;
    --buff-border-subtle: #F2F9FA;
    --buff-border-strong: rgba(15, 166, 184, 0.18);

    /* Text (Sheen §2.2) */
    --buff-text: #0E3A40;
    --buff-text-strong: #093138;
    --buff-text-muted: #4E8A93;
    --buff-text-muted-2: #4E8A93;
    --buff-text-muted-3: #7FA8AE;
    --buff-text-placeholder: #A6C3C7;

    /* Semantic ramps (Sheen §2.3) */
    --buff-success-fill: #EAF3DE;
    --buff-success-text: #3B6D11;
    --buff-success-dot: #97C459;

    --buff-warning-fill: #FAEEDA;
    --buff-warning-fill-soft: #FEF8ED;
    --buff-warning-text: #854F0B;
    --buff-warning-dot: #C6892C;

    --buff-danger-fill: #FCEBEB;
    --buff-danger-text: #A32D2D;
    --buff-danger-dot: #A32D2D;

    --buff-neutral-fill: #F0F7F8;
    --buff-neutral-text: #4E8A93;
    --buff-neutral-dot: #7FA8AE;

    --buff-max-fill: #EEEDFE;
    --buff-max-text: #3C3489;

    /* Legacy semantic aliases (kept) */
    --buff-danger: var(--buff-danger-dot);
    --buff-danger-bg: rgba(163, 45, 45, 0.06);
    --buff-success: var(--buff-success-dot);
    --buff-warning: var(--buff-warning-dot);

    /* Shadows (new, Brief §2.4) — teal-tinted, never grey. */
    --buff-shadow-card: 0 6px 18px rgba(15, 166, 184, 0.11);
    --buff-shadow-hero: 0 10px 26px rgba(15, 166, 184, 0.16);
    --buff-shadow-btn:  0 6px 18px rgba(15, 166, 184, 0.35);
    --buff-shadow-side: 0 8px 20px rgba(15, 166, 184, 0.25);

    /* Spacing (unchanged) */
    --buff-page-x: 24px;
    --buff-page-b: 28px;
    --buff-panel-p: 22px;
    --buff-panel-gap: 12px;
    --buff-field-gap: 16px;

    /* Radius (Sheen §4 — larger) */
    --buff-r-pip: 999px;
    --buff-r-btn: 11px;
    --buff-r-card: 14px;
    --buff-r-panel: 16px;
    --buff-r-tile: 10px;
    --buff-r-round: 999px;
}

/* ==========================================================================
   Reset + Frappe web.html overrides
   ========================================================================== */
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--buff-bg); color: var(--buff-text);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.web-footer, .web-footer-menu, .navbar, .footer,
.page-header, .breadcrumb-container, .website-navbar {
    display: none !important;
}
main.container, main.container-fluid, .container.my-4, .page_content {
    padding: 0 !important; margin: 0 !important; max-width: none !important;
}
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }
button { font-family: inherit; }

/* Focus + reduced motion */
:focus-visible { outline: 2px solid var(--buff-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   App shell (chrome inherited by every Buff page)
   ========================================================================== */
.buff-shell { display: flex; min-height: 100vh; background: var(--buff-bg); }

/* Sidebar */
.buff-side {
    position: fixed; top: 0; left: 0;
    width: 240px; height: 100vh;
    background: var(--buff-sheen);
    border-right: none;
    box-shadow: var(--buff-shadow-side);
    display: flex; flex-direction: column;
    padding: 16px 0 12px;
    overflow: hidden;
    z-index: 30;
}
.buff-side::before {
    content: ""; position: absolute;
    top: 0; bottom: 0; width: 38%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0));
    transform: translateX(-120%) skewX(-18deg);
    animation: buff-sweep 1.1s 0.3s ease-out 1 both;
    pointer-events: none;
}
@keyframes buff-sweep { to { transform: translateX(340%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .buff-side::before { display: none; } }
.buff-wm-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 22px 6px;
    flex-shrink: 0;
    position: relative; z-index: 1;
}
.buff-wm {
    font-size: 22px; font-weight: 700;
    color: white; letter-spacing: -0.5px;
}
.buff-wm::after {
    content: "."; color: var(--buff-primary-shade);
}
.buff-wm-logo {
    height: 32px; width: auto; display: block;
}
.buff-search-hint {
    padding: 0 22px 16px;
    font-size: 11px; color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    position: relative; z-index: 1;
}
.buff-search-hint kbd {
    background: rgba(255, 255, 255, 0.2);
    color: white; font-family: inherit;
    border-radius: 5px; padding: 1px 6px; font-size: 10.5px;
}
.buff-close {
    display: none;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--buff-r-pip); color: var(--buff-text-muted-2);
    cursor: pointer; padding: 0;
}
.buff-close i { font-size: 18px; }

.buff-nav { flex: 1; padding: 0 10px; overflow-y: auto; min-height: 0; position: relative; z-index: 1; }
.buff-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    color: white;
    font-size: 13.5px; font-weight: 500;
    margin-bottom: 2px;
    transition: background 0.12s;
}
.buff-nav a:hover { background: rgba(255, 255, 255, 0.18); }
.buff-nav a.on {
    background: white; color: var(--buff-primary-dark);
    box-shadow: 0 4px 12px rgba(6, 82, 92, 0.16);
}
.buff-nav a i { font-size: 16px; opacity: 0.95; }
.buff-div { height: 1px; background: rgba(255, 255, 255, 0.35); margin: 10px 14px; }

.buff-foot {
    padding: 12px 14px 0;
    border-top: none;
    margin-top: 12px;
    flex-shrink: 0;
    position: relative; z-index: 1;
}
.buff-al {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 10px 12px; margin-bottom: 12px;
}
.buff-al-r {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--buff-primary-shade);
    margin-bottom: 4px; font-weight: 500;
}
.buff-bar {
    height: 4px; background: rgba(255, 255, 255, 0.7);
    border-radius: 99px; overflow: hidden; margin-bottom: 8px;
}
.buff-bar:last-child { margin-bottom: 0; }
.buff-bar > div { height: 100%; background: linear-gradient(90deg, var(--buff-primary-dark), var(--buff-primary)); border-radius: 99px; }

.buff-user {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 4px 6px;
}
.buff-user-info { flex: 1; min-width: 0; }
.buff-av {
    width: 32px; height: 32px; border-radius: var(--buff-r-round);
    background: white; color: var(--buff-primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 500; flex-shrink: 0;
}
.buff-un {
    font-size: 12.5px; font-weight: 500; line-height: 1.2;
    color: white;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buff-ut {
    font-size: 10.5px; color: rgba(255, 255, 255, 0.8); line-height: 1.2;
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buff-out {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--buff-r-pip); color: rgba(255, 255, 255, 0.7);
    cursor: pointer; transition: all 0.12s; flex-shrink: 0; padding: 0;
}
.buff-out:hover { color: white; background: rgba(255, 255, 255, 0.15); }
.buff-out i { font-size: 14px; }

/* Main area */
.buff-main { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: 240px; }

/* Mobile floating menu (replaces the deleted top bar's hamburger) */
.buff-mobile-menu {
    display: none;
    position: fixed; top: 14px; left: 14px;
    width: 40px; height: 40px;
    border: none;
    background: var(--buff-sheen-h);
    color: var(--buff-primary-dark);
    border-radius: 12px;
    box-shadow: var(--buff-shadow-btn);
    cursor: pointer;
    z-index: 40;
    align-items: center; justify-content: center; padding: 0;
}
.buff-mobile-menu i { font-size: 20px; }
@media (max-width: 900px) {
    .buff-mobile-menu { display: flex; }
    .buff-main { margin-left: 0; }
}

.buff-cont {
    flex: 1;
    padding: var(--buff-page-x); padding-bottom: var(--buff-page-b);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.buff-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 8px 14px;
    border-radius: var(--buff-r-btn);
    font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    border: 0.5px solid var(--buff-border-strong);
    background: white; color: var(--buff-text);
    transition: all 0.12s;
}
.buff-btn:hover { border-color: rgba(0, 0, 0, 0.22); }
.buff-btn:active { transform: scale(0.97); }
.buff-btn.pri {
    background: var(--buff-sheen-h); color: var(--buff-primary-dark);
    border-color: transparent;
    box-shadow: var(--buff-shadow-btn);
}
.buff-btn.pri:hover {
    background: var(--buff-sheen-h);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(15, 166, 184, 0.45);
}
.buff-btn.pri:active {
    background: var(--buff-primary-shade);
    border-color: var(--buff-primary-shade);
}
.buff-btn.sec:hover {
    background: var(--buff-primary);
    color: white; border-color: var(--buff-primary);
}
.buff-btn i { font-size: 14px; }
.buff-btn.iconbtn { width: 34px; height: 34px; padding: 0; }

/* ==========================================================================
   Pips (fleet-wide status + type + tier markers)
   ========================================================================== */
.buff-pip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    font-size: 11px; font-weight: 500;
    border-radius: var(--buff-r-round);
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.buff-pip.success { background: var(--buff-success-fill); color: var(--buff-success-text); }
.buff-pip.warning { background: var(--buff-warning-fill); color: var(--buff-warning-text); }
.buff-pip.danger  { background: var(--buff-danger-fill);  color: var(--buff-danger-text); }
.buff-pip.neutral { background: var(--buff-neutral-fill); color: var(--buff-neutral-text); }
.buff-pip.teal    { background: var(--buff-primary-tint-solid); color: var(--buff-primary-dark); }
.buff-pip.max     { background: var(--buff-max-fill); color: var(--buff-max-text); }
.buff-pip i { font-size: 12px; }
.buff-pip.small { font-size: 10px; padding: 2px 8px; }
.buff-pip.tier-caps {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 4px 8px; border-radius: 4px; font-weight: 500;
}

/* ==========================================================================
   Panel language (v1 §11)
   ========================================================================== */
.buff-panel {
    background: var(--buff-surface-subtle);
    border: 0.5px solid var(--buff-border);
    border-radius: var(--buff-r-panel);
    padding: var(--buff-panel-p);
    margin-bottom: var(--buff-panel-gap);
    position: relative;
}
.buff-panel-h {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 500;
    color: var(--buff-primary-dark);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.buff-panel-underscore {
    width: 40px; height: 2px; background: var(--buff-primary);
    margin: 0 0 20px 0;
}

/* ==========================================================================
   Field label + value (v1 §7 identity block treatment)
   ========================================================================== */
.buff-field {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: var(--buff-field-gap);
}
.buff-flabel {
    font-size: 12px; font-weight: 400;
    color: var(--buff-text-muted-2);
}
.buff-fval {
    font-size: 14.5px; font-weight: 400;
    color: var(--buff-text);
}
.buff-fval.muted-empty,
.buff-fval .muted-empty,
.muted-empty {
    font-style: italic; color: var(--buff-text-placeholder);
}
.buff-fval.readonly {
    background: var(--buff-surface-tint);
    padding: 8px 12px; border-radius: var(--buff-r-pip);
    color: var(--buff-text-muted); font-size: 14px;
    display: inline-block;
}
.buff-fval.mono {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 13px; font-weight: 500; letter-spacing: 0.03em;
}
.buff-fhelp {
    font-size: 12px; color: var(--buff-text-muted-3); margin-top: 2px;
}
.buff-fgrid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
}

/* ==========================================================================
   Backdrop (mobile drawer)
   ========================================================================== */
.buff-bd {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45); z-index: 40;
}
.buff-bd.open { display: block; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
    .buff-main { margin-left: 0; }
    .buff-side {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 84%; max-width: 320px; z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
    }
    .buff-side.open { transform: translateX(0); }
    .buff-close { display: flex; }
    .buff-ham { display: flex; }
    .buff-top { padding: 12px 14px; }
    .buff-ptitle { display: none; }
    .buff-wm-inline { display: block; }
    .buff-cont { padding: 16px; padding-bottom: 24px; }
    .buff-fgrid { grid-template-columns: 1fr; }
}

/* ============================================================================
 * Reg plate — fleet-wide UK number plate treatment (Session 19)
 * Applies to: Vehicles tab, Jobs tab, VCR reports, Sales Invoice line items,
 *             print templates, portal.
 * ============================================================================ */
.reg-plate {
    display: inline-block;
    background: #F5D935;
    color: #111111;
    border: 1px solid #C9AE1F;
    font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: 3px;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ============================================================================
 * Form input tokens — graduated fleet-side Session 27 (from Session 21 Delta).
 * Used inline in customer_detail.html AND inside .buff-drawer bodies.
 * ============================================================================ */
.buff-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.buff-flabel {
    font-size: 10px;
    font-weight: 500;
    color: #888780;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.buff-input {
    background: #FFFFFF;
    border: 1px solid #DDDBD3;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}
.buff-input:focus {
    outline: none;
    border-color: var(--buff-primary);
    box-shadow: 0 0 0 3px rgba(0, 172, 189, 0.15);
}
.buff-input:disabled {
    background: #F1EFE8;
    color: #888780;
    cursor: not-allowed;
}
.buff-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0 0 0;
    border-top: 1px solid var(--buff-hairline);
    margin-top: 8px;
}
.buff-edit-error {
    padding: 10px 12px;
    background: #FCEBEB;
    border: 1px solid #F5C6C6;
    border-radius: 6px;
    color: #7A2020;
    font-size: 13px;
    margin-top: 12px;
}
.buff-save-label.is-hidden,
.buff-save-spin.is-hidden { display: none; }

/* ============================================================================
 * Session 27 — Fleet-wide drawer + toast primitives
 * API: window.buff_drawer.{open, close, values}
 *      window.buff_toast.{show, dismiss}
 * Consumers: Address tab (S27), future Vehicles/Contact/SP adds.
 * ============================================================================ */

/* --- Backdrop --- */
.buff-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
    z-index: 55;
}
.buff-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Drawer shell (desktop: right-side; mobile: bottom-sheet) --- */
.buff-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--buff-bg);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 60;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.buff-drawer.is-open { transform: translateX(0); }
.buff-drawer.is-wide { width: 560px; }

@media (max-width: 768px) {
    .buff-drawer {
        top: auto;
        right: 0;
        left: 224px;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15);
    }
    .buff-drawer.is-open { transform: translateY(0); }
    .buff-drawer.is-wide { width: 100vw; }
}

/* --- Header --- */
.buff-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--buff-hairline);
    flex-shrink: 0;
    background: var(--buff-bg);
}
.buff-drawer-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.buff-drawer-title {
    font-family: 'Coolvetica Rg', 'Coolvetica', 'DM Sans', -apple-system, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--buff-text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.1;
}
.buff-drawer-title-accent {
    height: 2px;
    width: 32px;
    background: var(--buff-primary);
    border-radius: 1px;
}
.buff-drawer-close {
    background: transparent;
    border: none;
    padding: 6px;
    color: #888780;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
    line-height: 0;
}
.buff-drawer-close:hover { background: var(--buff-surface-tint); color: var(--buff-text); }
.buff-drawer-close i { font-size: 20px; }

/* Mobile drag handle */
.buff-drawer-grabber {
    display: none;
    width: 36px;
    height: 4px;
    background: #DDDBD3;
    border-radius: 2px;
    margin: 8px auto 4px;
}
@media (max-width: 768px) {
    .buff-drawer-grabber { display: block; }
}

/* --- Body (scrollable) --- */
.buff-drawer-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.buff-drawer-body .buff-field { margin-bottom: 14px; }
.buff-drawer-body .buff-field:last-child { margin-bottom: 0; }

/* --- Footer (action bar) --- */
.buff-drawer-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--buff-hairline);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    background: var(--buff-bg);
}

/* Buttons inside drawer footer */
.buff-btn-primary,
.buff-btn-secondary {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.buff-btn-primary {
    background: var(--buff-primary);
    color: #FFFFFF;
}
.buff-btn-primary:hover { background: var(--buff-primary-dark); }
.buff-btn-primary:disabled {
    background: #B7DFE4;
    cursor: not-allowed;
}
.buff-btn-secondary {
    background: transparent;
    color: var(--buff-text);
    border-color: var(--buff-border);
}
.buff-btn-secondary:hover { background: var(--buff-surface-tint); }

/* Body scroll-lock while drawer open */
body.buff-drawer-lock { overflow: hidden; }

/* --- Toast (bottom-left, above drawer) --- */
.buff-toast-region {
    position: fixed;
    bottom: 24px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 70;
    pointer-events: none;
}
.buff-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #1F1E1B;
    color: #F5F4EE;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    font-size: 13px;
    font-family: inherit;
    max-width: 380px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: auto;
}
.buff-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.buff-toast-msg { flex: 1 1 auto; }
.buff-toast-action {
    background: transparent;
    border: none;
    color: #6DCCD8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.12s ease;
}
.buff-toast-action:hover { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 768px) {
    .buff-toast-region {
        bottom: 16px;
        left: 16px;
        right: 16px;
    }
    .buff-toast { max-width: 100%; }
}

/* ============================================================================
 * Session 27 — Anchored menu (dropdown) + confirm popover primitives
 * API: window.buff_menu.{open, close}
 *      window.buff_popover_confirm.{open, close}
 * ============================================================================ */

.buff-menu {
    position: absolute;
    background: var(--buff-surface);
    border: 1px solid var(--buff-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 4px;
    min-width: 180px;
    z-index: 65;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
}
.buff-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.buff-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--buff-text);
    transition: background 0.1s ease;
    user-select: none;
}
.buff-menu-item:hover { background: var(--buff-surface-tint); }
.buff-menu-item i { font-size: 15px; color: #888780; flex-shrink: 0; }
.buff-menu-item.is-destructive { color: #B23030; }
.buff-menu-item.is-destructive i { color: #B23030; }
.buff-menu-item.is-destructive:hover { background: #FCEBEB; }

.buff-menu-divider {
    height: 1px;
    background: var(--buff-hairline);
    margin: 4px 0;
}

/* Confirm popover (anchored, mini) */
.buff-popover {
    position: absolute;
    background: var(--buff-surface);
    border: 1px solid var(--buff-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 14px;
    min-width: 240px;
    max-width: 320px;
    z-index: 65;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.buff-popover.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.buff-popover-msg {
    font-size: 13px;
    color: var(--buff-text);
    margin-bottom: 12px;
    line-height: 1.4;
}
.buff-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.buff-popover-actions .buff-btn-primary,
.buff-popover-actions .buff-btn-secondary {
    font-size: 13px;
    padding: 6px 12px;
}
.buff-popover-actions .buff-btn-destructive {
    background: #B23030;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.buff-popover-actions .buff-btn-destructive:hover { background: #8F2626; }

/* ============================================================================
 * Session 27 — Address autocomplete dropdown (Ideal Postcodes integration)
 * Positioned relative to the input field it decorates. Reusable pattern for
 * future picker/autocomplete surfaces (customer search, service picker, etc.)
 * ============================================================================ */
.buff-autocomplete-wrap { position: relative; }

.buff-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 224px;
    right: 0;
    background: var(--buff-surface);
    border: 1px solid var(--buff-border);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    z-index: 5;
    margin-top: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.buff-autocomplete-dropdown.is-open {
    opacity: 1;
    pointer-events: auto;
}
.buff-autocomplete-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--buff-text);
    border-bottom: 1px solid var(--buff-hairline);
    transition: background 0.08s ease;
    user-select: none;
}
.buff-autocomplete-item:last-child { border-bottom: none; }
.buff-autocomplete-item:hover,
.buff-autocomplete-item.is-highlighted {
    background: var(--buff-primary-hover-bg);
}
.buff-autocomplete-loading,
.buff-autocomplete-empty {
    padding: 8px 12px;
    font-size: 12px;
    color: #888780;
    font-style: italic;
}

/* ============================================================================
 * Session 27 — Frosted Tier Preview primitive (Foundations Part 24)
 * Fleet-wide reusable component. Expected to be applied 30-50 times across Buff v1.
 *
 * Usage:
 *   <div class="buff-frost-wrap">
 *     <div class="buff-frost-content">... actual (blurred, non-interactive) content ...</div>
 *     <div class="buff-frost-overlay">
 *       <i class="ti ti-lock buff-frost-icon"></i>
 *       <div class="buff-frost-headline">Available on Pro and Max</div>
 *       <div class="buff-frost-desc">One-line value prop</div>
 *       <button class="buff-frost-upgrade">Upgrade</button>
 *     </div>
 *   </div>
 * ============================================================================ */



/* ============================================================================
 * Frosted Tier Preview — proper Foundations Part 24 style
 * Placeholder content underneath (blurred, non-interactive), teal-tinted
 * overlay on top with lockup content centred. For field-level, gives a
 * proper box shape at approximately the size the enabled field would take.
 * ============================================================================ */
.buff-frost-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.buff-frost-content {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
    padding: 8px 0;
}

.buff-frost-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 172, 189, 0.14);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    z-index: 2;
}

.buff-frost-icon-wrap {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(5, 78, 88, 0.08);
}
.buff-frost-icon-wrap i {
    color: #054E58;
    font-size: 15px;
    line-height: 1;
}

.buff-frost-body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}
.buff-frost-headline {
    font-size: 13px;
    font-weight: 500;
    color: #054E58;
    letter-spacing: -0.005em;
    margin: 0;
}
.buff-frost-desc {
    font-size: 12px;
    color: #087683;
    margin-top: 2px;
}

/* Beat Frappe's global button styles with specificity, no !important abuse */
.buff-frost-wrap button.buff-frost-upgrade {
    background: var(--buff-primary);
    color: #FFFFFF;
    border: 1px solid var(--buff-primary);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 172, 189, 0.32);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.buff-frost-wrap button.buff-frost-upgrade:hover {
    background: var(--buff-primary-dark);
    border-color: var(--buff-primary-dark);
    box-shadow: 0 2px 5px rgba(0, 172, 189, 0.42);
}


/* ── Global cursor rules ──────────────────────────────
 * Ensure any interactive element shows pointer cursor.
 * Buttons, links, and elements with role=switch/checkbox/radio.
 * Disabled elements get not-allowed. */
button:not([disabled]),
[role="button"]:not([disabled]),
[role="switch"]:not([disabled]),
[role="checkbox"]:not([disabled]),
[role="tab"]:not([disabled]),
[role="link"]:not([disabled]),
label[for],
summary,
input[type="checkbox"]:not([disabled]),
input[type="radio"]:not([disabled]),
input[type="submit"]:not([disabled]),
input[type="button"]:not([disabled]),
input[type="file"]:not([disabled]),
select:not([disabled]) {
    cursor: pointer;
}
button[disabled],
[role="button"][disabled],
input:disabled,
select:disabled {
    cursor: not-allowed;
}


/* ── Toggle switch (used site-wide) ────────────────────────────
 * Originally defined inline in customer_detail.html.
 * Promoted to global CSS so any page can use nt-toggle. */
.nt-toggle {
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 24px;
    background: #DDDBD3;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    padding: 2px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.nt-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 166, 184, 0.15);
}
.nt-toggle-thumb {
    display: block;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
    transform: translateX(0);
}
.nt-toggle.is-on {
    background: var(--buff-primary);
}
.nt-toggle.is-on .nt-toggle-thumb {
    transform: translateX(20px);
}
.nt-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Number input — suppress browser spinners globally (CP-094)
 * Promoted from service_detail.html and service_new.html. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}



/* ==== buff-modal (Design mini-session S76) ==== */
.buff-modal-scrim{position:fixed;inset:0;background:rgba(9,49,56,.45);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:1200;
  opacity:0;transition:opacity .2s ease-out;padding:20px;}
.buff-modal-scrim.is-open{opacity:1;}
.buff-modal{background:#fff;border-radius:16px;max-width:440px;width:100%;
  padding:22px;box-shadow:0 10px 26px rgba(15,166,184,.16);
  transform:translateY(8px);transition:transform .2s ease-out;}
.buff-modal-scrim.is-open .buff-modal{transform:translateY(0);}
.buff-modal h3{font-size:17px;font-weight:700;color:var(--buff-ink,#0E3A40);
  margin:0 0 10px;}
.buff-modal .bm-body{font-size:14px;color:#4E8A93;line-height:1.55;
  margin:0 0 6px;}
.buff-modal .bm-body strong{color:var(--buff-ink,#0E3A40);}
.buff-modal ul.bm-list{list-style:none;margin:10px 0 4px;padding:0;}
.buff-modal ul.bm-list li{position:relative;padding-left:18px;
  font-size:13.5px;color:var(--buff-ink,#0E3A40);margin-bottom:6px;}
.buff-modal ul.bm-list li::before{content:"";position:absolute;left:2px;
  top:7px;width:6px;height:6px;border-radius:99px;background:#0FA6B8;}
.buff-modal ul.bm-list.amber li::before{background:#D99A2B;}
.buff-modal .bm-foot{display:flex;justify-content:flex-end;gap:10px;
  margin-top:18px;}
.buff-modal .bm-btn{border-radius:11px;padding:9px 16px;font-size:14px;
  font-weight:500;cursor:pointer;font-family:inherit;}
.buff-modal .bm-btn.pri{background:var(--buff-sheen-h);
  color:#0A6B77;border:none;box-shadow:0 6px 18px rgba(15,166,184,.35);}
.buff-modal .bm-btn.pri:hover{transform:translateY(-1px);}
.buff-modal .bm-btn.sec{background:#fff;border:1px solid #CFEDF2;
  color:#0A6B77;}
.buff-modal .bm-btn.danger{background:#fff;border:1px solid #F2C7C7;
  color:#A32D2D;}
@media (prefers-reduced-motion: reduce){
  .buff-modal-scrim,.buff-modal{transition:none;}
}

/* ==== buff-pending-panel ==== */
.buff-pending-panel{display:flex;align-items:center;gap:12px;
  background:#FEF8ED;border:1px solid #F5D5A0;border-radius:12px;
  padding:14px 16px;margin-top:14px;}
.buff-pending-panel .bpp-icon{flex:0 0 auto;color:#854F0B;}
.buff-pending-panel .bpp-text{flex:1;font-size:14px;color:#854F0B;
  line-height:1.5;}
.buff-pending-panel .bpp-text strong{font-weight:700;}
.buff-pending-panel .bpp-sub{font-size:12.5px;opacity:.85;}
.buff-pending-panel .bpp-btn{flex:0 0 auto;background:#fff;
  border:1px solid #F5D5A0;color:#854F0B;border-radius:10px;
  padding:8px 14px;font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:inherit;}
.buff-pending-panel .bpp-btn:hover{transform:translateY(-1px);}


/* --- buff-seg: canonical segmented control (S85) --- */
.buff-seg{display:inline-flex;background:#f0efe9;border-radius:10px;padding:3px;gap:2px}
.buff-seg-btn{border:0;background:transparent;padding:8px 16px;border-radius:8px;font-size:0.875rem;font-family:inherit;color:#555;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.buff-seg-btn.active{background:#fff;color:#0FA6B8;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.buff-seg-btn:not(.active):hover{color:#222}

/* --- buff-slider: range with live value (S85) --- */
.buff-slider-row{display:flex;align-items:center;gap:14px}
.buff-slider-row input[type=range]{flex:1;accent-color:#0FA6B8}
.buff-slider-val{min-width:52px;text-align:right;font-weight:600;color:#0FA6B8;font-size:0.95rem}


/* --- buff-ta: canonical typeahead dropdown (S85; 3rd instance rule) --- */
.buff-ta-wrap{position:relative}
.buff-ta-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid var(--buff-border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);max-height:220px;overflow-y:auto;z-index:50;display:none}
.buff-ta-list.open{display:block}
.buff-ta-item{padding:10px 14px;font-size:14px;cursor:pointer;color:var(--buff-text)}
.buff-ta-item:hover,.buff-ta-item.hl{background:var(--buff-sheen-1,#e8f7f9);color:var(--buff-primary-dark)}
.buff-ta-empty{padding:10px 14px;font-size:13px;color:var(--buff-text-muted-3,#999)}



/* ============================================================
   BOOKING PAGE V3 — S87
   ============================================================ */
.bk-closed{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:40px 20px;text-align:center}
.bk-closed-inner h1{font-size:1.4rem;color:var(--buff-text);margin-bottom:12px}
.bk-closed-inner p{color:var(--buff-text-muted)}

.bk-wrap{max-width:600px;margin:0 auto;padding:0 16px 80px}

/* Step pips */
.bk-steps{display:flex;justify-content:center;margin:24px 0 28px;position:relative}
.bk-steps::before{content:'';position:absolute;top:17px;left:12%;right:12%;height:2px;background:var(--buff-border);z-index:0}
.bk-step-pip{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative;z-index:1}
.bk-step-pip span{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;background:var(--buff-surface);border:2px solid var(--buff-border);color:var(--buff-text-muted);transition:all .2s}
.bk-step-pip small{font-size:0.7rem;color:var(--buff-text-muted);font-weight:500}
.bk-step-pip.active span{background:var(--buff-primary);border-color:var(--buff-primary);color:#fff}
.bk-step-pip.active small{color:var(--buff-primary)}
.bk-step-pip.done span{background:var(--buff-primary-tint-solid);border-color:var(--buff-primary);color:var(--buff-primary-dark)}

/* Price bar */
.bk-price-bar{position:sticky;top:0;z-index:100;background:var(--buff-surface);border-bottom:1px solid var(--buff-border);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;margin:0 -16px 20px;backdrop-filter:blur(8px)}
.bk-price-total{font-size:1.2rem;font-weight:700;color:var(--buff-primary)}
.bk-price-deposit{font-size:0.8rem;color:var(--buff-text-muted);font-weight:500}

.bk-step-title{font-size:1.15rem;font-weight:700;color:var(--buff-text);margin-bottom:20px}
.bk-section-title{font-size:0.9rem;font-weight:600;color:var(--buff-text);margin:20px 0 10px}
.bk-hint-text{font-size:0.82rem;color:var(--buff-text-muted);margin-bottom:14px}
.bk-req{color:var(--buff-primary)}
.bk-opt{color:var(--buff-text-muted);font-weight:400}

/* Vehicle input */
.bk-vehicle-input{display:flex;gap:8px;margin-bottom:6px}
.bk-reg-field{flex:1;height:48px;padding:0 16px;border:2px solid var(--buff-border);border-radius:10px;font-size:1rem;font-family:inherit;color:var(--buff-text);background:var(--buff-surface);transition:border-color .15s;outline:none}
.bk-reg-field:focus{border-color:var(--buff-primary)}
.bk-find-btn{height:48px;padding:0 20px;border-radius:10px;background:var(--buff-primary);color:#fff;border:none;font-size:0.9rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:opacity .15s}
.bk-find-btn:hover{opacity:.9}
.bk-find-btn:disabled{opacity:.6;cursor:default}
.bk-reg-hint{font-size:0.75rem;color:var(--buff-text-muted);margin-bottom:16px}

/* Confirmed vehicle card */
.bk-vcard-confirmed{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--buff-primary-tint-solid);border-radius:12px;margin-bottom:16px;border:1.5px solid var(--buff-primary)}
.bk-vcard-dot{width:32px;height:32px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.bk-vcard-info{display:flex;flex-direction:column;gap:2px}
.bk-vcard-reg{font-weight:700;font-size:1rem;color:var(--buff-text);letter-spacing:.04em}
.bk-vcard-desc{font-size:0.8rem;color:var(--buff-primary-dark)}

/* No match */
.bk-no-match{display:flex;gap:10px;align-items:flex-start;padding:14px;background:#fff5f5;border:1.5px solid #fecaca;border-radius:10px;margin-bottom:16px}
.bk-no-match i{color:#dc2626;font-size:18px;flex-shrink:0;margin-top:2px}
.bk-no-match p{font-size:0.875rem;color:#7f1d1d;margin:0 0 4px}
.bk-no-match a{color:#dc2626;font-weight:600}

/* Services */
.bk-services-label{font-size:0.82rem;font-weight:600;color:var(--buff-text-muted);margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em}
.bk-svc-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;border:1.5px solid var(--buff-border);background:var(--buff-surface);cursor:pointer;transition:all .15s;margin-bottom:6px}
.bk-svc-item:hover{border-color:var(--buff-primary)}
.bk-svc-item.sel{border-color:var(--buff-primary);background:var(--buff-primary-tint-solid)}
.bk-svc-item-info{display:flex;flex-direction:column;gap:2px}
.bk-svc-item-name{font-weight:600;font-size:0.9rem;color:var(--buff-text)}
.bk-svc-item-desc{font-size:0.75rem;color:var(--buff-text-muted)}
.bk-svc-item-price{font-weight:700;color:var(--buff-primary);font-size:0.95rem;white-space:nowrap;margin-left:12px}

/* Chips */
.bk-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 14px 10px}
.bk-chip{padding:5px 14px;border-radius:20px;font-size:0.78rem;font-weight:500;border:1.5px solid var(--buff-border);background:var(--buff-surface);color:var(--buff-text);cursor:pointer;transition:all .15s}
.bk-chip:hover{border-color:var(--buff-primary)}
.bk-chip.sel{border-color:var(--buff-primary);background:var(--buff-primary-tint-solid);color:var(--buff-primary-dark)}

/* Add another */
.bk-add-another{width:100%;padding:12px;border-radius:10px;border:2px dashed var(--buff-border);background:transparent;color:var(--buff-text-muted);font-size:0.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;margin-top:8px}
.bk-add-another:hover{border-color:var(--buff-primary);color:var(--buff-primary)}

/* Completed vehicles */
.bk-completed-v{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--buff-surface-tint);border-radius:10px;margin-bottom:8px}
.bk-cv-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0}
.bk-cv-info{flex:1;display:flex;flex-direction:column;gap:1px}
.bk-cv-reg{font-weight:700;font-size:0.875rem;color:var(--buff-text)}
.bk-cv-svcs{font-size:0.75rem;color:var(--buff-text-muted)}
.bk-cv-price{font-weight:700;color:var(--buff-primary);font-size:0.875rem}

/* Calendar */
.bk-cal-nav{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bk-cal-month{flex:1;text-align:center;font-weight:600;color:var(--buff-text)}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:20px}
.bk-cal-dow{text-align:center;font-size:0.7rem;font-weight:600;color:var(--buff-text-muted);padding:4px 0}
.bk-cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:0.875rem;cursor:pointer;border:1.5px solid transparent;transition:all .15s}
.bk-cal-day:hover{border-color:var(--buff-primary);background:var(--buff-primary-tint-solid)}
.bk-cal-day.sel{background:var(--buff-primary);color:#fff;border-color:var(--buff-primary)}
.bk-cal-day.dis{color:var(--buff-border);cursor:default}
.bk-cal-day.dis:hover{border-color:transparent;background:transparent}
.bk-slots-label{font-size:0.9rem;font-weight:600;color:var(--buff-text);margin-bottom:12px}
.bk-slots-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.bk-slot{padding:9px 18px;border-radius:8px;font-size:0.875rem;font-weight:500;border:1.5px solid var(--buff-border);background:var(--buff-surface);color:var(--buff-text);cursor:pointer;transition:all .15s}
.bk-slot:hover,.bk-slot.sel{border-color:var(--buff-primary);background:var(--buff-primary-tint-solid);color:var(--buff-primary-dark)}

/* Form */
.bk-form{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.bk-field{display:flex;flex-direction:column;gap:5px}
.bk-field label{font-size:0.85rem;font-weight:500;color:var(--buff-text)}
.bk-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bk-postcode-row{display:flex;gap:8px}
.bk-postcode-row .buff-input{flex:1}
.bk-field-error{color:#c0392b;font-size:0.78rem}
.bk-toggle-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--buff-border);font-size:0.875rem;color:var(--buff-text)}
.bk-yn-btn{padding:5px 18px;border-radius:20px;font-size:0.8rem;font-weight:600;border:1.5px solid var(--buff-border);background:var(--buff-surface);color:var(--buff-text-muted);cursor:pointer;transition:all .15s;min-width:48px}
.bk-yn-btn.active{border-color:var(--buff-primary);background:var(--buff-primary-tint-solid);color:var(--buff-primary-dark)}
.bk-consent-row{display:flex;align-items:flex-start;gap:8px;cursor:pointer}
.bk-checkbox{margin-top:3px;accent-color:var(--buff-primary);width:15px;height:15px}
.bk-consent-label{font-size:0.78rem;color:var(--buff-text-muted)}

/* Summary */
.bk-summary-card{background:var(--buff-surface);border:1.5px solid var(--buff-border);border-radius:12px;padding:4px 0;margin-bottom:20px}
.bk-sum-table{width:100%;border-collapse:collapse}
.bk-sum-table tr{border-bottom:1px solid var(--buff-border)}
.bk-sum-table tr:last-child{border-bottom:none}
.bk-sum-k{padding:11px 16px;font-size:0.82rem;color:var(--buff-text-muted);width:38%;vertical-align:top}
.bk-sum-v{padding:11px 16px;font-size:0.85rem;font-weight:500;color:var(--buff-text)}

/* Payment */
.bk-pay-label{font-weight:600;color:var(--buff-text);margin-bottom:12px;font-size:0.95rem}
#bk-stripe-el{padding:14px;border:1.5px solid var(--buff-border);border-radius:8px;background:var(--buff-surface);margin-bottom:6px}

/* Done */
.bk-done{text-align:center;padding:48px 20px}
.bk-done-icon{font-size:56px;color:var(--buff-primary);margin-bottom:16px}
.bk-done h2{font-size:1.3rem;color:var(--buff-text);margin-bottom:10px}
.bk-done p{color:var(--buff-text-muted)}

/* Step footer */
.bk-step-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--buff-border)}

/* Spinner */
@keyframes bk-spin{to{transform:rotate(360deg)}}
.bk-spin{display:inline-block;animation:bk-spin .7s linear infinite}

@media(max-width:480px){
  .bk-row2{grid-template-columns:1fr}
  .bk-steps::before{left:8%;right:8%}
}

/* Change vehicle button */
.bk-change-btn{margin-left:auto;padding:5px 14px;border-radius:20px;font-size:0.78rem;font-weight:600;border:1.5px solid var(--buff-primary);background:transparent;color:var(--buff-primary);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.bk-change-btn:hover{background:var(--buff-primary);color:#fff}

/* Service group label */
.bk-svc-group-label{font-size:0.72rem;font-weight:700;color:var(--buff-text-muted);text-transform:uppercase;letter-spacing:.06em;padding:14px 0 6px;margin-top:4px}
.bk-svc-group-label:first-child{padding-top:0}

/* Expand/collapse button */
.bk-expand-btn{width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--buff-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s;flex-shrink:0}
.bk-expand-btn:hover{background:var(--buff-surface-tint);color:var(--buff-primary)}

/* Full vehicle card (V3 collapsible) */
.bk-vfull{background:var(--buff-surface);border:2px solid var(--buff-border);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .15s}
.bk-vfull.open{border-color:var(--buff-primary)}
.bk-vfull-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .15s}
.bk-vfull-head:hover{background:var(--buff-surface-subtle)}
.bk-vfull.open .bk-vfull-head{background:var(--buff-primary-tint-solid)}
.bk-vfull-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.bk-vfull-panel{padding:14px 16px 16px;border-top:1px solid var(--buff-border)}
.bk-chev{font-size:20px;color:var(--buff-text-muted);line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:background .15s}
.bk-chev:hover{background:var(--buff-surface-tint)}
.bk-vfull-right{gap:6px;margin-left:auto}
.bk-remove-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--buff-border);background:var(--buff-surface);color:var(--buff-text-muted);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;line-height:1}
.bk-remove-btn:hover{border-color:#dc2626;background:#fee2e2;color:#dc2626}
.bk-add-another{width:100%;padding:13px;border-radius:10px;border:2px dashed var(--buff-border);background:transparent;color:var(--buff-primary);font-size:0.9rem;font-weight:600;cursor:pointer;display:block;text-align:center;transition:all .15s;margin:8px 0 16px}
.bk-add-another:hover{border-color:var(--buff-primary);background:var(--buff-primary-tint-solid)}

/* Unicode icon styles (guest page has no icon font) */
.bk-chev{font-size:14px;color:var(--buff-text-muted);flex-shrink:0}
.bk-warn-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#dc2626;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.bk-done-icon{font-size:56px;color:var(--buff-primary);margin-bottom:16px;font-weight:700}

/* Service category accordion */
.bk-svc-group{margin-bottom:6px;border:1.5px solid var(--buff-border);border-radius:10px;overflow:hidden}
.bk-svc-group-hd{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;background:var(--buff-surface);font-size:0.8rem;font-weight:700;color:var(--buff-text-muted);text-transform:uppercase;letter-spacing:.05em;transition:background .15s}
.bk-svc-group-hd:hover{background:var(--buff-surface-tint)}
.bk-grp-chev{transition:transform .2s;flex-shrink:0;color:var(--buff-text-muted)}
.bk-svc-group-body{padding:6px 8px 8px}
.bk-svc-group-body .bk-svc-item{border-radius:8px;margin-bottom:4px}