/* ==========================================================================
   BOOKING WIDGET V2 — Applicare
   7-screen app-like flow: City → Appliance → Type → Service → Date → Details → Done
   Prefix: .bw2-*  (no conflicts with v1 .bw-* classes)
   ========================================================================== */

/* ─── Page tokens ─────────────────────────────────────────────────────────
   Design A restyle (2026-09-28): this page now links ONLY css/a-kit.css (no
   design-system.css / applicare-v2.css / Google Fonts - kit only, per the
   kit migration). a-kit.css already supplies most of the names this file's
   rules were written against, unchanged: --brand/-light/-dark/-deep, --accent/
   -dark, --warning, --ink, --paper, --card, --tint, --line/-2, --shadow-1/-2,
   --serif, --sans, --radius-md/lg/xl/2xl/pill, --ease-*, --d-*. The block
   below aliases only the handful of names the kit does not define, so every
   rule below keeps resolving off a kit token, never a hex literal. Spacing
   and the wider type scale are this page's own (the kit sets neither a
   numbered spacing scale nor UI-text sizes past 21px) and are unchanged. */
:root {
  --white:          var(--card);      /* the kit's near-white surface, not pure #fff (a-kit.css header) */
  --navy:           var(--night);
  --border:         var(--line-2);
  --border-light:   var(--line);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-tertiary:  var(--ink-3);
  --slate-600:      var(--ink-2);
  --surface:        var(--paper);
  --surface-subtle: var(--tint);
  --brand-lighter:  var(--tint);
  --accent-light:   var(--accent);
  --font:           var(--sans);
  /* rgba(45,135,131,.15) is --brand's own RGB at 15% (the kit's own focus-ring
     recipe, design-direction.md §11); rgba(255,107,53,.25) is --accent's own
     RGB at 25% (the kit's own shadow recipe for that colour). Neither is a
     new invented colour. */
  --brand-glow:     rgba(45, 135, 131, .15);
  --shadow-accent:  0 4px 20px rgba(255, 107, 53, .25);
  /* The kit has no error/danger token; this is the app's one existing error
     red (design-system.css), reused as-is rather than invented. */
  --danger:         #EF4444;

  /* Spacing scale (unchanged) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* Typography (unchanged) */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   60px;
  --text-5xl:   76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* This page's many option "cards" are real <button>s (screen-reader and
   keyboard correctness); this file never restyled the browser's own button
   chrome because that reset lived in the now-dropped applicare-v2.css
   (`button{border:none;background:none;cursor:pointer;font-family:inherit}`).
   a-kit.css only resets font/color on button, not appearance/border/background
   (its own buttons carry the full look via .btn), so this page needs its own. */
button { appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit; color: inherit; }

/* ─── Wrapper ──────────────────────────────────────────────────────────── */
.bw2-wrap {
    max-width: 640px;
    margin: 0 auto;
    font-family: var(--font);
}

/* ─── Progress stepper ──────────────────────────────────────────────────── */
/* Design A: one step header everywhere - "Step N of M" + the step name (the
   markup the widget already renders as .bw2p-mobile) over a thin fill bar,
   never the numbered dot-stepper below (kept only so nothing else that reads
   it, e.g. the .bw2p-step.done styling, has to change; .bw2p-step is hidden
   unconditionally a few rules down). */
.bw2-progress {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-8);
    padding-bottom: 14px;
    position: relative;
}

.bw2-progress::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border);
}

.bw2-progress::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--bw2-progress-value, 16.666%);
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    transition: width 0.25s ease;
}

.bw2p-step {
    display: none;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.bw2p-step.done::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--brand);
    z-index: 0;
}

.bw2p-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--white);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: background-color 0.25s ease-out, border-color 0.25s ease-out, color 0.25s ease-out, box-shadow 0.25s ease-out;
}

.bw2p-step.active .bw2p-dot {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--white);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.bw2p-step.done .bw2p-dot {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--white);
}

.bw2p-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    text-align: center;
    line-height: 1.2;
}

.bw2p-step.active .bw2p-label { color: var(--brand); }
.bw2p-step.done  .bw2p-label  { color: var(--text-secondary); }

/* ─── On-demand service overview ───────────────────────────────────────── */
.bw2-story-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 54px;
    margin: calc(var(--space-4) * -1) 0 var(--space-6);
    padding: 9px 11px;
    border: 1px solid rgba(45, 135, 131, 0.20);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(232,246,245,0.92), rgba(255,255,255,0.96));
    color: var(--brand-dark);
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bw2-story-trigger:focus-visible {
    border-color: var(--brand-light);
    box-shadow: 0 8px 24px rgba(45,135,131,0.10);
    outline: none;
    transform: translateY(-1px);
}
@media (hover: hover) and (pointer: fine) {
    .bw2-story-trigger:hover {
        border-color: var(--brand-light);
        box-shadow: 0 8px 24px rgba(45,135,131,0.10);
        outline: none;
        transform: translateY(-1px);
    }
}

.bw2-story-trigger > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.bw2-story-trigger strong { color: var(--brand-dark); font-size: 11px; line-height: 1.35; }
.bw2-story-trigger small { color: var(--text-tertiary); font-size: 9px; line-height: 1.4; }
.bw2-story-trigger-arrow { width: 17px; height: 17px; flex: 0 0 17px; color: var(--brand); }

/* ─── Screens ───────────────────────────────────────────────────────────── */
.bw2-screen {
    display: none;
}

.bw2-screen.active {
    display: block;
    animation: bw2SlideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bw2-screen.active.bw2-back {
    animation: bw2SlideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bw2SlideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes bw2SlideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Back nav ──────────────────────────────────────────────────────────── */
.bw2-nav-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--space-6);
    min-height: 44px;
    padding: var(--space-2) 0;
    transition: color 0.15s;
    user-select: none;
    border: 0;
    background: transparent;
    font-family: var(--font);
}

@media (hover: hover) and (pointer: fine) { .bw2-nav-back:hover { color: var(--brand); } }

/* ─── Step header ───────────────────────────────────────────────────────── */
.bw2-step-header {
    margin-bottom: var(--space-6);
}

.bw2-step-title {
    font-family: var(--serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    line-height: 1.15;
}

.bw2-step-sub {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0;
}


.bw2-city-card {
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .bw2-city-card:hover {
        border-color: var(--brand-light);
        background: var(--brand-lighter);
    }
}

.bw2-city-card.selected {
    border-color: var(--brand);
    background: var(--brand-lighter);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* All cities expandable list */
.bw2-cities-all {
    margin-bottom: var(--space-4);
}

.bw2-city-list-heading {
    margin: 0 2px var(--space-2);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bw2-search-wrap {
    position: relative;
    margin-bottom: var(--space-3);
}

.bw2-search-wrap svg {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

.bw2-search-input {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 24px);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.bw2-search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.bw2-search-input::placeholder { color: var(--text-tertiary); }

.bw2-cities-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    background: var(--white);
}

.bw2-city-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: var(--space-3) calc(var(--space-4) + 30px) var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    transition: background 0.15s;
}

/* Design A: a radio circle on every option row (city, service, time slot -
   the "choose one" pattern), filled with a check once selected. */
.bw2-city-list-item::after,
.bw2-service-card::after,
.bw2-slot-pill::after {
    content: '';
    position: absolute;
    right: var(--space-4);
    top: 50%;
    width: 22px;
    height: 22px;
    flex: none;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bw2-city-list-item.selected::after,
.bw2-service-card.selected::after,
.bw2-slot-pill.selected::after {
    border-color: var(--brand);
    background-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.bw2-city-list-item.selected {
    background: var(--brand-lighter);
    color: var(--brand-dark);
}
@media (hover: hover) and (pointer: fine) {
    .bw2-city-list-item:hover {
        background: var(--brand-lighter);
        color: var(--brand-dark);
    }
}

.bw2-city-no-results {
    padding: var(--space-5) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.55;
    text-align: center;
}

/* ─── Appliance grid ────────────────────────────────────────────────────── */
.bw2-appliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bw2-appliance-card {
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3);
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    user-select: none;
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
    .bw2-appliance-card:hover {
        border-color: var(--brand-light);
        background: var(--brand-lighter);
    }
}

/* Design A: the same radio circle, as a corner badge on the appliance/job-type
   grid cards (a full-width row doesn't fit a multi-column grid). */
.bw2-appliance-card::after,
.bw2-job-type-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bw2-appliance-card.selected::after,
.bw2-job-type-card.selected::after {
    border-color: var(--brand);
    background-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.bw2-appliance-card.selected {
    border-color: var(--brand);
    background: var(--brand-lighter);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.bw2-appliance-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

/* Returning-customer account UI (details step) */
.bw2-welcome-chip {
    background: rgba(45, 135, 131, 0.10);
    color: var(--navy, #0F1B2D);
    border: 1px solid rgba(45, 135, 131, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}
/* Pin state on a saved-address card (app form "Where"): carried pins read
   as done, pinless ones as the one remaining thing to do. */
.bw2-address-pin { display: block; font-size: 12px; font-weight: 600; margin-top: 4px; }
.bw2-address-pin.is-saved { color: var(--brand, #2D8783); }
.bw2-address-pin.is-needed { color: var(--accent-dark); }
.bw2-address-card {
    display: block; width: 100%; text-align: left;
    background: #fff; border: 1.5px solid #E4E9EE; border-radius: 12px;
    padding: 10px 14px; margin-bottom: 8px; cursor: pointer;
    font: inherit; transition: border-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { .bw2-address-card:hover { border-color: var(--brand, #2D8783); } }
.bw2-address-card.selected { border-color: var(--brand, #2D8783); background: rgba(45, 135, 131, 0.06); }
.bw2-address-label {
    display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--brand, #2D8783); margin-bottom: 2px;
}
.bw2-address-line { display: block; font-size: 13.5px; color: #21313F; }
.bw2-address-meta { display: block; font-size: 12px; color: #5B6B7B; margin-top: 2px; }
.bw2-address-new .bw2-address-label { font-size: 15px; }
/* Other-city saved address (W8b): muted and not selectable as-is */
.bw2-address-card.bw2-address-other { cursor: default; background: #FAFCFB; }
@media (hover: hover) and (pointer: fine) { .bw2-address-card.bw2-address-other:hover { border-color: #E4E9EE; } }
.bw2-address-other .bw2-address-line { color: #5B6B7B; }
.bw2-address-other .bw2-address-switch { margin-top: 8px; }

/* Saved-address card with Edit and Delete on it (owner 2026-10-16). The card is a
   div; the tap area to pick it is the button inside; the two tools sit in a row
   under it, always visible, 44px tall. */
.bw2-address-card--saved { padding: 0; cursor: default; overflow: hidden; }
.bw2-address-pick {
    display: block; width: 100%; text-align: left; font: inherit; color: inherit;
    background: none; border: 0; padding: 10px 14px; cursor: pointer; min-height: 44px;
}
.bw2-address-pick:focus-visible, .bw2-address-tool:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: -3px; }
.bw2-address-tools { display: flex; border-top: 1px solid #E4E9EE; }
.bw2-address-tool {
    flex: 1; min-height: 44px; padding: 0 var(--space-3); background: none; border: 0;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--brand-dark); cursor: pointer;
    transition: background-color 0.15s ease-out;
}
.bw2-address-tool + .bw2-address-tool { border-left: 1px solid #E4E9EE; }
.bw2-address-tool--delete { color: #B91C1C; }
.bw2-address-tool:active { background: rgba(45, 135, 131, 0.10); }
.bw2-address-tool--delete:active { background: rgba(185, 28, 28, 0.08); }
@media (hover: hover) and (pointer: fine) {
    .bw2-address-tool:hover { background: rgba(45, 135, 131, 0.08); }
    .bw2-address-tool--delete:hover { background: rgba(185, 28, 28, 0.07); }
}
.bw2-address-edit, .bw2-address-confirm { padding: var(--space-3) 14px var(--space-4); cursor: default; }
.bw2-address-confirm { border-top: 1px solid #E4E9EE; background: #FEF6F5; }
.bw2-address-edit-title, .bw2-address-confirm-title { font-weight: 700; font-size: 15px; color: var(--text-primary); margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.bw2-address-confirm-title { margin-bottom: var(--space-1); }
.bw2-address-confirm-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--space-3); }
.bw2-address-edit .bw2-field { margin-bottom: var(--space-3); }
.bw2-address-confirm-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.bw2-address-confirm-actions .bw2-btn { flex: 1 1 140px; padding-inline: var(--space-3); white-space: nowrap; }
.bw2-btn-danger { background: #B91C1C; color: #fff; border-color: #B91C1C; }
@media (hover: hover) and (pointer: fine) { .bw2-btn-danger:hover:not(:disabled) { background: #991B1B; border-color: #991B1B; } }
.bw2-btn-danger:disabled { opacity: .6; cursor: not-allowed; }
/* Wide screens: the tools are two compact buttons, not two full-width bars */
@media (min-width: 768px) {
    .bw2-address-tools { justify-content: flex-start; gap: var(--space-2); border-top: 0; padding: 0 var(--space-2) var(--space-2); }
    .bw2-address-tool, .bw2-address-tool + .bw2-address-tool { flex: 0 0 auto; padding: 0 var(--space-5); border: 1px solid #E4E9EE; border-radius: var(--radius-pill); }
    .bw2-address-edit { max-width: 520px; }
    .bw2-address-confirm-actions { flex-wrap: nowrap; max-width: 520px; }
}
/* The pin ask, parked directly under the saved card that needs it */
.bw2-system-note.bw2-pin-under-card { margin: calc(-1 * var(--space-1)) 0 var(--space-2); }
.bw2-field.bw2-pin-under-card { margin-bottom: var(--space-4); scroll-margin-bottom: 120px; }

/* Variant phase: letter tile when a variant has no image yet */
.bw2-variant-initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 135, 131, 0.12);
    color: var(--brand, #2D8783);
    font-size: 18px;
    font-weight: 700;
}

.bw2-appliance-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* ─── Job type grid ─────────────────────────────────────────────────────── */
.bw2-job-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bw2-job-type-card {
    position: relative;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-5) calc(var(--space-4) + 26px) var(--space-5) var(--space-4);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .bw2-job-type-card:hover {
        border-color: var(--brand-light);
        background: var(--brand-lighter);
        transform: translateY(-1px);
    }
}

.bw2-job-type-card.selected {
    border-color: var(--brand);
    background: var(--brand-lighter);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

/* A job type this appliance has no priced service for in this city (Wave 1,
   C1). Still readable so the customer knows the option exists elsewhere;
   visibly not a button. */
.bw2-job-type-card[disabled],
.bw2-job-type-card[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--white);
    border-color: var(--border);
    box-shadow: none;
    transform: none;
}

.bw2-job-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(45,135,131,0.1);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bw2-job-icon svg { width: 20px; height: 20px; }

.bw2-job-label {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
}

.bw2-job-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ─── Service list ──────────────────────────────────────────────────────── */
.bw2-service-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bw2-service-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    position: relative;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) calc(var(--space-5) + 30px) var(--space-4) var(--space-5);
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .bw2-service-card:hover {
        border-color: var(--brand-light);
        background: var(--brand-lighter);
    }
}

.bw2-service-card.selected {
    border-color: var(--brand);
    background: var(--brand-lighter);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.bw2-service-info { flex: 1; min-width: 0; }

.bw2-service-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.bw2-service-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
}

.bw2-service-price-wrap { text-align: right; flex-shrink: 0; }

.bw2-service-price-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.bw2-service-price {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--brand);
    white-space: nowrap;
}

.bw2-service-price-note {
    font-size: var(--text-xs);
    color: var(--slate-600, #5a6b7f);
    white-space: nowrap;
    margin-top: 2px;
}

/* Inspection note */
.bw2-parts-note { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
.bw2-inspection-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: rgba(45,135,131,0.08);
    border: 1.5px solid var(--brand-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--brand-dark);
}

.bw2-inspection-note svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand); margin-top: 1px; }
.bw2-inspection-note div { display: flex; flex-direction: column; gap: 2px; }
.bw2-inspection-note strong { font-weight: 700; font-size: var(--text-sm); }
.bw2-inspection-note span  { color: var(--text-secondary); font-size: var(--text-xs); }

.bw2-system-note {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid rgba(217,119,6,0.28);
    border-radius: var(--radius-lg);
    background: rgba(245,158,11,0.08);
    color: #8A4B08;
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* ─── Date strip ────────────────────────────────────────────────────────── */
.bw2-date-strip-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-6);
    /* hide scrollbar */
    scrollbar-width: none;
}

.bw2-date-strip-wrap::-webkit-scrollbar { display: none; }

.bw2-date-strip {
    display: flex;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    min-width: max-content;
}

.bw2-date-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    padding: var(--space-3) var(--space-2);
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
    .bw2-date-btn:hover:not(:disabled) {
        border-color: var(--brand-light);
        background: var(--brand-lighter);
    }
}

.bw2-date-btn.selected {
    border-color: var(--brand);
    background: var(--brand-lighter);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.bw2-date-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bw2-date-day {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bw2-date-btn.selected .bw2-date-day { color: var(--brand); }

.bw2-date-num {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.bw2-date-btn.selected .bw2-date-num { color: var(--brand-dark); }

.bw2-date-today-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-glow);
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    margin-top: 2px;
}

.bw2-slots-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.bw2-slot-pills {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bw2-slot-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: var(--space-4) calc(var(--space-5) + 30px) var(--space-4) var(--space-5);
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    text-align: left;
}

@media (hover: hover) and (pointer: fine) {
    .bw2-slot-pill:hover:not(:disabled):not(.unavailable) {
        border-color: var(--brand-light);
        background: var(--brand-lighter);
    }
}

.bw2-slot-pill.selected {
    border-color: var(--brand);
    background: var(--brand-lighter);
    box-shadow: 0 0 0 3px var(--brand-glow);
}

.bw2-slot-pill.unavailable,
.bw2-slot-pill:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--surface);
}

.bw2-slot-label {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
}

.bw2-slot-pill.selected .bw2-slot-label { color: var(--brand-dark); }

.bw2-slot-time {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

/* ─── Form fields ───────────────────────────────────────────────────────── */
.bw2-field {
    margin-bottom: var(--space-5);
}

.bw2-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.bw2-required { color: var(--danger); margin-left: 2px; }
.bw2-optional { font-weight: 400; color: var(--text-tertiary); font-size: var(--text-xs); }

.bw2-input {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: var(--text-md);
    color: var(--text-primary);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.bw2-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.bw2-input::placeholder { color: var(--text-tertiary); }

.bw2-phone-wrap {
    display: flex;
    align-items: center;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bw2-phone-wrap:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.bw2-phone-prefix {
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-secondary);
    border-right: 2px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    white-space: nowrap;
}

.bw2-phone-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    flex: 1;
}

.bw2-error {
    font-size: var(--text-sm);
    color: var(--danger);
    margin-top: var(--space-2);
    display: none;
}

.bw2-error.visible { display: block; }

.bw2-field-help {
    margin-top: var(--space-2);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    line-height: 1.45;
}

/* ─── Consent line (DPDP clickwrap, R64/R77) ────────────────────────────── */
.bw2-consent-line {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-secondary);
}

.bw2-consent-line a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
}

/* ─── Trust strip above the booking action (R95) ────────────────────────── */
.bw2-trust-strip {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--brand-lighter);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    list-style: none;
}
.bw2-trust-strip li { display: flex; align-items: center; gap: var(--space-2); }
.bw2-trust-strip svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--brand-dark); }
@media (min-width: 641px) {
    .bw2-trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
    .bw2-trust-strip li { align-items: flex-start; }
}
/* The strip says it by the button; the process row under the card would
   repeat two of its three lines on this step. */
body[data-booking-step="6"] .booking-assurance { display: none; }

/* ─── Booking snapshot ──────────────────────────────────────────────────── */
.bw2-booking-snapshot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.bw2-snapshot-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.bw2-snapshot-row svg { flex-shrink: 0; color: var(--brand); }

.bw2-snapshot-price {
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.bw2-snapshot-note {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* ─── OTP ───────────────────────────────────────────────────────────────── */
.bw2-otp-wrap {
    text-align: center;
    margin-bottom: var(--space-6);
}

/* One real input laid over six drawn boxes: the input keeps one-tap code
   fill and paste working; the boxes only show its value. */
.bw2-otp-field {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 0 auto var(--space-4);
}

.bw2-otp-boxes {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.bw2-otp-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 64px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: var(--text-3xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bw2-otp-box.is-filled {
    border-color: var(--brand);
    background: var(--brand-lighter);
}

.bw2-otp-field:focus-within .bw2-otp-box.is-active {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-glow);
}

.bw2-otp-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    font-size: 16px; /* no iOS zoom on focus */
    letter-spacing: 2em;
    outline: none; /* focus is drawn on the active box above */
    cursor: text;
}

.bw2-otp-input::selection { background: transparent; }
.bw2-otp-input:disabled { cursor: default; }

/* Duplicate-booking (409) note: two choices side by side, stacked on phones. */
.bw2-existing-booking p { margin: 0 0 var(--space-2); }
.bw2-existing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.bw2-existing-actions .bw2-btn { flex: 1 1 140px; }

.bw2-otp-timer {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

.bw2-link-btn {
    background: none;
    border: none;
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    text-decoration: underline;
    min-height: 44px;
    padding: var(--space-2) 0;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) and (pointer: fine) { .bw2-link-btn:hover { color: var(--text-secondary); } }
.bw2-link-btn:disabled { color: var(--text-tertiary); opacity: .65; cursor: not-allowed; text-decoration: none; }

/* Code by email (Phase 5): the two ways to get a new code sit on their own
   lines (they read as one sentence side by side), and the email form is a
   left-aligned field with room above its button. */
.bw2-otp-wrap #bw2-resend-otp-btn,
.bw2-otp-wrap #bw2-email-code-btn { display: flex; margin: 0 auto; }
.bw2-otp-wrap #bw2-email-code-btn[style*="display: none"],
.bw2-otp-wrap #bw2-resend-otp-btn[style*="display: none"] { display: none; }
.bw2-otp-wrap #bw2-email-code-form { text-align: left; margin-top: var(--space-4); }
.bw2-otp-wrap #bw2-email-code-form[hidden] { display: none; }
.bw2-otp-wrap #bw2-email-code-send { width: 100%; margin-top: var(--space-3); }

/* ─── Actions ───────────────────────────────────────────────────────────── */
.bw2-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.bw2-btn {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    border: 2px solid transparent;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
}

.bw2-btn-primary {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
    box-shadow: var(--shadow-accent);
}

@media (hover: hover) and (pointer: fine) {
    .bw2-btn-primary:hover:not(:disabled) {
        background: var(--accent-dark);
        border-color: var(--accent-dark);
        transform: translateY(-1px);
        box-shadow: 0 6px 24px rgba(255,107,53,0.35);
    }
}

.bw2-btn-primary:disabled {
    background: var(--border);
    border-color: var(--border);
    color: var(--text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.bw2-btn-ghost {
    background: var(--white);
    color: var(--text-secondary);
    border-color: var(--border);
    flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
    .bw2-btn-ghost:hover {
        border-color: var(--text-secondary);
        color: var(--text-primary);
    }
}

.bw2-btn-wa { color: #25D366 !important; border-color: #25D366 !important; }
@media (hover: hover) and (pointer: fine) { .bw2-btn-wa:hover { background: rgba(37,211,102,0.08) !important; } }

/* ─── Loading ────────────────────────────────────────────────────────────── */
.bw2-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.bw2-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: bw2Spin 0.75s linear infinite;
    flex-shrink: 0;
}

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

/* ─── Success screen ────────────────────────────────────────────────────── */
.bw2-success {
    text-align: center;
    padding: var(--space-10) var(--space-4);
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    overflow-x: clip; /* the confetti fans wider than a 375px column */
}

/* The one moment of delight in the flow (customer register: spend it here
   and nowhere else). A calm ease-out settle, the tick draws itself, then a
   short confetti burst. No bounce, no sound; reduced-motion gets the fade. */
.bw2-success-anim {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(45,135,131,0.12);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    animation: bw2PopIn 0.32s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes bw2PopIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.bw2-success-anim svg { width: 40px; height: 40px; }
.bw2-success-anim polyline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: bw2TickDraw 0.3s 0.18s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes bw2TickDraw { to { stroke-dashoffset: 0; } }

.bw2-success-cheer {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: var(--space-2);
    animation: bw2FadeIn 0.3s 0.3s ease-out both;
}
.bw2-success-cheer[hidden] { display: none; }

/* Confetti: pieces start at the centre of the tick circle and fly out and
   down. transform + opacity only; pieces are created by celebrateBooking()
   and removed again after the burst. */
.bw2-confetti {
    position: absolute;
    left: 50%;
    top: calc(var(--space-10) + 40px);
    width: 0;
    height: 0;
    pointer-events: none;
}
.bw2-confetti i {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
    animation: bw2ConfettiFly 1.15s cubic-bezier(0.16, 0.8, 0.3, 1) both;
}
.bw2-confetti i:nth-child(3n)   { width: 8px; height: 8px; border-radius: 50%; }
.bw2-confetti i:nth-child(4n+1) { background: var(--brand); }
.bw2-confetti i:nth-child(4n+2) { background: var(--accent); }
.bw2-confetti i:nth-child(4n+3) { background: var(--brand-light); }
.bw2-confetti i:nth-child(4n)   { background: var(--warning); }
@keyframes bw2ConfettiFly {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.6); }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}

.bw2-success h2 {
    font-family: var(--serif);
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.bw2-success-msg {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.bw2-success-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    text-align: left;
    margin-bottom: var(--space-6);
}

.bw2-success-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-light);
}

.bw2-success-row:last-child { border-bottom: none; }
.bw2-success-row span  { color: var(--text-secondary); flex-shrink: 0; }
.bw2-success-row strong { color: var(--text-primary); text-align: right; }

/* The price-by-call line (no amount was quoted online): sits where a price
   row would, plain text instead of a ₹0 amount. */
.bw2-success-pricenote {
    margin: var(--space-3) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.bw2-success-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

.bw2-success-actions .bw2-btn { flex: 0 0 auto; }

.bw2-next-expectations {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--white);
    text-align: left;
}

.bw2-next-expectations h3 {
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 700;
}

.bw2-next-expectations ol {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.bw2-next-expectations li + li { margin-top: var(--space-2); }

.bw2-back-home {
    display: inline-block;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) { .bw2-back-home:hover { color: var(--text-secondary); } }

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .bw2-step-title { font-size: var(--text-xl); }

    

    .bw2-appliance-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }

    .bw2-appliance-card { padding: var(--space-3) var(--space-2); }
    
    .bw2-appliance-name { font-size: 11px; }

    .bw2-job-type-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .bw2-job-type-card { padding: var(--space-4) var(--space-3); }
    .bw2-job-label { font-size: var(--text-base); }

    .bw2-actions { flex-direction: column-reverse; }
    .bw2-btn-ghost { flex: 1; }

    .bw2-service-card { flex-direction: column; align-items: flex-start; }
    .bw2-service-price-wrap { text-align: left; }

    .bw2-otp-boxes { gap: var(--space-2); }
    .bw2-otp-box { width: 42px; height: 54px; font-size: var(--text-xl); }

    .bw2-success h2 { font-size: var(--text-2xl); }
    .bw2-success-actions { flex-direction: column; align-items: center; }
    .bw2-success-actions .bw2-btn { width: 100%; max-width: 300px; }

    .bw2p-label { font-size: 9px; }
}

@media (max-width: 400px) {
    .bw2-appliance-grid { grid-template-columns: repeat(2, 1fr); }
    .bw2-job-type-grid  { grid-template-columns: 1fr 1fr; }
    
}

/* ─── Step header (progress) ─────────────────────────────────────────────
   Design A: shown at every width (the numbered dot-stepper is hidden
   unconditionally above; .bw2-progress::before/::after draw the bar). */
.bw2p-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    color: var(--text-tertiary);
    font: 700 var(--text-sm)/1.2 var(--font);
}

.bw2p-mobile strong { color: var(--brand-dark); font-family: var(--serif); font-weight: 600; }

/* Interactive cards are real buttons; preserve the card visual language. */
button.bw2-city-card,
button.bw2-city-list-item,
button.bw2-appliance-card,
button.bw2-job-type-card,
button.bw2-service-card {
    width: 100%;
    font-family: var(--font);
}

button.bw2-city-list-item,
button.bw2-service-card { text-align: left; }

.booking-section {
    min-height: 60vh;
    padding: var(--space-6) 0 var(--space-16);
    background: linear-gradient(180deg, var(--surface) 0%, var(--white) 100%);
}

#booking-widget-v2 {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-5);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    background: var(--white);
    box-shadow: 0 18px 55px rgba(15, 27, 45, 0.09);
}

.booking-assurance {
    display: grid;
    gap: var(--space-2);
    max-width: 640px;
    margin: var(--space-5) auto 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.booking-assurance span { display: flex; align-items: center; gap: var(--space-2); }

.booking-assurance strong {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    background: var(--brand-lighter);
    color: var(--brand-dark);
    font-size: 10px;
}

.booking-story-eyebrow {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--brand-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.booking-story-dialog {
    width: min(920px, calc(100vw - 32px));
    max-width: 920px;
    max-height: min(720px, calc(100svh - 32px));
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 28px;
    background: transparent;
    color: var(--text-primary);
    box-shadow: 0 34px 100px rgba(4,18,29,0.34);
}

.booking-story-dialog::backdrop {
    background: rgba(6, 24, 34, 0.72);
    backdrop-filter: blur(8px);
}

.booking-story-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: inherit;
    background: var(--white);
}

.booking-story-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 50%;
    background: rgba(15,27,45,0.72);
    color: var(--white);
    backdrop-filter: blur(10px);
}

.booking-story-close svg { width: 20px; height: 20px; }
.booking-story-close:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }

/* The visit footage is portrait: a 4:5 box on every size, so it is never a
   cropped band (R95). Navy fills any space the box leaves in its column. */
.booking-story-video-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
}

.booking-story-video-wrap video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--navy);
}

/* Top corner: at the bottom it sat on the video's own play and time controls. */
.booking-story-generated-label {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: var(--radius-pill);
    background: rgba(15,27,45,0.70);
    color: rgba(255,255,255,0.88);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.booking-story-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-10) var(--space-8);
    background:
        radial-gradient(circle at 100% 0, rgba(255,107,53,0.10), transparent 32%),
        var(--white);
}

.booking-story-copy h2 {
    margin-bottom: var(--space-6);
    font-size: var(--text-2xl);
    letter-spacing: -0.025em;
}

.booking-story-copy ol { display: grid; gap: var(--space-4); }

.booking-story-copy li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: var(--space-3);
    align-items: start;
}

.booking-story-copy li > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--brand-lighter);
    color: var(--brand-dark);
    font-size: 9px;
    font-weight: 800;
}

.booking-story-copy li div { display: flex; flex-direction: column; gap: 3px; }
.booking-story-copy li strong { color: var(--text-primary); font-size: 12px; }
.booking-story-copy li small { color: var(--text-secondary); font-size: 10px; line-height: 1.5; }

/* Booking-specific mobile dock replaces generic site navigation while in flow. */
.booking-mobile-dock { display: none; }

@media (min-width: 641px) {
    
    
    .booking-section { padding: var(--space-10) 0 var(--space-20); }
    #booking-widget-v2 { padding: var(--space-8); }
    .booking-assurance { grid-template-columns: repeat(3, 1fr); }
    .booking-assurance span { align-items: flex-start; }
    
    
}

@media (max-width: 640px) {
    .booking-page {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
    }

    
    
    
    
    
    
    

    .bw2-progress { margin-bottom: var(--space-4); }

    .bw2-story-trigger { margin: -4px 0 var(--space-4); min-height: 50px; }
    
    
    
    
    
    .booking-section { min-height: calc(100svh - 120px); padding: 10px 0 var(--space-10); }
    .booking-section > .container { padding-inline: 10px; }
    
    #booking-widget-v2 {
        padding: var(--space-4);
        border-radius: 16px;
        box-shadow: 0 8px 30px rgba(15, 27, 45, 0.08);
    }
    .bw2-nav-back { display: none; }
    .bw2-step-header { margin-bottom: var(--space-4); }
    .bw2-step-title { font-size: 1.22rem; }
    .bw2-step-sub { font-size: 12px; }
    .bw2-search-wrap { margin-bottom: var(--space-2); }
    .bw2-search-input { min-height: 48px; font-size: 16px; }
    .bw2-cities-list { max-height: 230px; }
    .bw2-city-list-item { min-height: 44px; padding: 9px 10px; }
    .booking-assurance { margin-top: var(--space-4); padding-inline: 4px; }

    .booking-mobile-dock {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr) 68px;
        align-items: stretch;
        min-height: 64px;
        padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--card) 97%, transparent);
        box-shadow: var(--shadow-2);
        backdrop-filter: blur(14px);
    }

    .booking-dock-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 44px;
        min-height: 48px;
        border-radius: var(--radius-lg);
        color: var(--brand-dark);
        font-size: 10px;
        font-weight: 800;
    }

    /* Round caps: the "?" dot is a zero-length line (M12 17h.01), which a flat cap draws as nothing. */
    .booking-dock-action svg { width: 20px; height: 20px; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    /* Focus ring sits on the icon itself: the old box ring around the whole
       button was clipped by the dock's 68px column and read as a broken circle. */
    /* Help draws the eye, once and calmly: the "?" is a solid teal badge, and a small
       "Need help booking?" card settles in above it with one soft ripple on the badge,
       holds, then fades (~10s, once per page load). No bounce, no loop. */
    #booking-dock-help { position: relative; }
    #booking-dock-help svg {
        border-radius: 50%;
        background: var(--brand);
        color: var(--white);
        animation: booking-help-ripple 1.4s ease-out 1.2s 1 both;
    }
    #booking-dock-help::after {
        content: "Need help booking?";
        position: absolute;
        right: 2px;
        bottom: calc(100% + 12px);
        padding: 10px 14px;
        border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
        border-radius: 14px;
        background: var(--card);
        color: var(--brand-deep);
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        white-space: nowrap;
        box-shadow: 0 10px 28px rgba(13, 74, 70, 0.16), 0 2px 6px rgba(13, 74, 70, 0.08);
        pointer-events: none;
        opacity: 0;
        transform-origin: 85% 100%;
        animation: booking-help-card 10s ease-out 1.2s 1 both;
    }
    #booking-dock-help::before {
        content: "";
        position: absolute;
        right: 20px;
        bottom: calc(100% + 6px);
        z-index: 1;
        width: 12px;
        height: 12px;
        border-right: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
        border-bottom-right-radius: 3px;
        background: var(--card);
        transform: rotate(45deg);
        pointer-events: none;
        opacity: 0;
        animation: booking-help-tail 10s ease-out 1.2s 1 both;
    }
    @keyframes booking-help-card {
        0%    { opacity: 0; transform: translateY(8px) scale(0.96); }
        2.5%  { opacity: 1; transform: translateY(0) scale(1); }
        94%   { opacity: 1; transform: translateY(0) scale(1); }
        100%  { opacity: 0; transform: translateY(4px) scale(0.98); }
    }
    @keyframes booking-help-tail {
        0%    { opacity: 0; }
        2.5%, 94% { opacity: 1; }
        100%  { opacity: 0; }
    }
    @keyframes booking-help-ripple {
        0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }
        100% { box-shadow: 0 0 0 14px transparent; }
    }
    /* Reduced motion: no movement, the card still shows (fades only) so the hint is not lost. */
    @media (prefers-reduced-motion: reduce) {
        #booking-dock-help svg { animation: none; }
        #booking-dock-help::before,
        #booking-dock-help::after { animation-name: booking-help-fade; }
        @keyframes booking-help-fade {
            0%, 100% { opacity: 0; }
            5%, 94% { opacity: 1; }
        }
    }
    .booking-dock-action:focus-visible { outline: none; }
    .booking-dock-action:focus-visible svg { outline: 3px solid var(--brand-glow); outline-offset: 2px; border-radius: 50%; }

    .booking-page .mobile-bottom-nav { display: none !important; }
    
    
    
    
    
    

    .booking-story-dialog {
        width: 100%;
        max-width: none;
        max-height: 92svh;
        margin: auto 0 0;
        border-radius: 24px 24px 0 0;
    }

    .booking-story-panel {
        display: block;
        max-height: 92svh;
        overflow-y: auto;
        border-radius: inherit;
    }

    .booking-story-copy { padding: var(--space-6) var(--space-5) var(--space-8); }
    .booking-story-copy h2 { margin-bottom: var(--space-5); font-size: var(--text-xl); }
    
}

/* ==========================================================================
   Dedicated booking app shell — compact task surface with persistent proof
   ========================================================================== */
.booking-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 85% 5%, rgba(45,135,131,0.10), transparent 25rem),
        #f4f7f7;
}

.booking-page.booking-dialog-open { overflow: hidden; }

.booking-app-header {
    position: sticky;
    top: 0;
    z-index: 900;
    height: 62px;
    border-bottom: 1px solid var(--line);
    background: rgba(243,245,241,0.92); /* the kit's --paper, see-through under the blur (same as the site header) */
    backdrop-filter: blur(16px);
}

.booking-app-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: min(1120px, calc(100% - 32px));
    height: 100%;
    margin: 0 auto;
}

.booking-app-logo { display: inline-flex; width: fit-content; }
.booking-app-logo img { display: block; width: auto; height: 28px; }

.booking-app-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.booking-app-heading strong { color: var(--ink); font-size: var(--t-14); }
.booking-app-heading span { margin-top: 2px; color: var(--ink-3); font-size: var(--t-12); }

.booking-app-help {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 9px;
    min-height: 42px;
    padding: 6px 10px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--radius-pill);
    color: var(--brand-deep);
    background: var(--card);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) { .booking-app-help:hover { border-color: var(--brand); } }
.booking-app-help:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.booking-app-help > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.booking-app-help > span { display: flex; flex-direction: column; }
.booking-app-help small { color: var(--ink-3); font-size: var(--t-12); }
.booking-app-help strong { color: var(--ink); font-size: var(--t-14); }

.booking-app-main { min-height: 0; }

.booking-section {
    min-height: 0;
    padding: 18px 16px 38px;
    background: transparent;
}

.booking-app-layout {
    display: grid;
    width: min(1120px, 100%);
    margin: 0 auto;
}

.booking-flow-column { min-width: 0; }

.booking-flow-intro {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 3px 16px;
    margin-bottom: 12px;
}

.booking-flow-intro h1 { margin: 0; color: var(--text-primary); font-size: clamp(1.3rem, 2.5vw, 1.7rem); letter-spacing: -0.025em; }
.booking-flow-intro p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }

.booking-proof-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}


#booking-widget-v2 {
    max-width: none;
    margin: 0;
    padding: 20px 24px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-2xl);
    background: var(--card);
    box-shadow: var(--shadow-1);
}

.bw2-wrap { max-width: none; }
.bw2-progress { margin-bottom: 18px; }
.bw2-step-header { margin-bottom: 16px; }
.bw2-step-title { margin-bottom: 4px; font-size: 1.38rem; }
.bw2-step-sub { font-size: 12px; }
.bw2-nav-back { margin-bottom: 8px; min-height: 34px; padding: 2px 0; font-size: 11px; }

.booking-assurance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    margin: 10px 0 0;
    padding: 0 8px;
    color: var(--text-secondary);
    font-size: 9px;
}

.booking-assurance span { align-items: center; }

.booking-confidence-panel { display: none; }

.bw2-story-trigger {
    min-height: 58px;
    margin: -5px 0 14px;
    padding: 7px 9px;
    overflow: hidden;
}

.bw2-story-trigger-visual {
    position: relative;
    width: 70px;
    height: 42px;
    flex: 0 0 70px;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--navy);
}

.bw2-story-trigger-visual > img { width: 100%; height: 100%; object-fit: cover; }
.bw2-story-trigger-visual > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: auto;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255,255,255,0.48);
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--brand-dark);
    box-shadow: 0 4px 12px rgba(4,18,29,0.24);
}

.bw2-story-trigger-visual svg { width: 14px; height: 14px; }
.bw2-story-trigger-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.bw2-story-trigger strong { font-size: 11px; }
.bw2-story-trigger small { font-size: 8px; }

.bw2-service-list { gap: 10px; }
.bw2-service-option {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bw2-service-option:has(.bw2-service-card.selected) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.bw2-service-option .bw2-service-card { border: 0; border-radius: 0; box-shadow: none; }
.bw2-service-option .bw2-service-card.selected { box-shadow: none; }
.bw2-service-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    padding: 7px 14px;
    border-top: 1px solid var(--border-light);
    background: rgba(244,247,247,0.72);
    color: var(--brand-dark);
    font: 800 9px/1.2 var(--font);
    text-align: left;
}

@media (hover: hover) and (pointer: fine) { .bw2-service-details:hover { background: var(--brand-lighter); } }
.bw2-service-details:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: -3px; }
.bw2-service-details svg { width: 15px; height: 15px; }
.bw2-appliance-img-fallback { object-fit: contain; opacity: 0.72; }

/* Service attributes come from the selected city/service pair. Radio targets
   remain comfortably tappable and the calculated price is the source of truth. */
.bw2-attribute-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 12px;
}
.bw2-attribute-loading .bw2-spinner { width: 16px; height: 16px; }
.bw2-service-attributes {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle, #f6faf9);
}
/* Brand block above the service card: it needs air below it too (the card used to touch it). */
.bw2-brand-pick.bw2-service-attributes { margin-bottom: 16px; }
.bw2-attribute-intro { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.bw2-attribute-group { margin: 0; padding: 0; border: 0; }
.bw2-attribute-group + .bw2-attribute-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-light); }
.bw2-attribute-group legend { padding: 0; color: var(--text-primary); font-size: 13px; font-weight: 700; }
.bw2-attribute-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 8px; margin-top: 8px; }
.bw2-attribute-option {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
}
.bw2-attribute-option:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
.bw2-attribute-option input { flex: none; accent-color: var(--brand); }
.bw2-attribute-option span { min-width: 0; overflow-wrap: anywhere; }
.bw2-attribute-group > select.bw2-input { margin-top: 8px; }

/* Rich process sheet */
.booking-story-dialog,
.booking-service-dialog {
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    box-shadow: 0 34px 100px rgba(4,18,29,0.34);
}

.booking-story-dialog { width: min(920px, calc(100vw - 32px)); max-width: 920px; max-height: calc(100svh - 32px); border-radius: 28px; }
.booking-service-dialog { width: min(680px, calc(100vw - 32px)); max-width: 680px; max-height: calc(100svh - 32px); border-radius: 26px; }
.booking-story-dialog::backdrop,
.booking-service-dialog::backdrop { background: rgba(6,24,34,0.76); backdrop-filter: blur(8px); }

.booking-story-panel {
    position: relative;
    display: block;
    max-height: calc(100svh - 32px);
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: inherit;
    background: var(--white);
    overscroll-behavior: contain;
}

.booking-story-close,
.booking-service-close {
    position: sticky;
    top: 12px;
    z-index: 5;
    float: right;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 12px 12px -54px 0;
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    background: rgba(15,27,45,0.78);
    color: var(--white);
    box-shadow: 0 5px 18px rgba(4,18,29,0.20);
    backdrop-filter: blur(10px);
}

.booking-story-close svg,
.booking-service-close svg { width: 20px; height: 20px; }
.booking-story-close:focus-visible,
.booking-service-close:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }

.booking-story-hero { display: grid; grid-template-columns: min(360px, 42%) minmax(0, 1fr); }
.booking-story-copy { min-height: 390px; padding: 42px 34px; }
.booking-story-copy h2 { margin-bottom: 22px; font-size: 1.5rem; line-height: 1.2; }
.booking-story-copy ol { gap: 14px; }

.booking-story-section { padding: 42px 46px; }
.booking-story-section h3 { max-width: 650px; margin: 0 0 10px; font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.22; letter-spacing: -0.025em; }
.booking-story-section > p { max-width: 700px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }

.booking-price-protection {
    border-top: 1px solid var(--border-light);
    background:
        radial-gradient(circle at 95% 5%, rgba(255,107,53,0.10), transparent 17rem),
        #fffaf6;
}

.booking-price-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 16px; }
.booking-price-steps > div { min-height: 112px; padding: 16px; border: 1px solid rgba(255,107,53,0.16); border-radius: 16px; background: rgba(255,255,255,0.82); }
.booking-price-steps strong { display: block; margin-bottom: 6px; color: var(--text-primary); font-size: 12px; }
.booking-price-steps span { color: var(--text-secondary); font-size: 10px; line-height: 1.55; }

.booking-refund-promise { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border: 1px solid rgba(45,135,131,0.18); border-radius: 16px; background: var(--brand-lighter); color: var(--brand-dark); }
.booking-refund-promise svg { width: 22px; height: 22px; flex: 0 0 22px; }
.booking-refund-promise p { margin: 0; font-size: 10px; line-height: 1.62; }
.booking-refund-promise strong { display: block; margin-bottom: 2px; color: var(--brand-dark); font-size: 11px; }

.booking-story-journey { margin: 0; border-block: 1px solid var(--border-light); background: #fbf7ed; }
.booking-story-journey img { display: block; width: 100%; aspect-ratio: 1200 / 670; object-fit: cover; }
.booking-story-journey figcaption { padding: 10px 18px; color: var(--text-tertiary); background: var(--white); font-size: 8px; line-height: 1.5; text-align: center; }

.booking-story-inclusions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr); gap: 38px; align-items: center; }
.booking-story-inclusions ul { display: grid; gap: 9px; }
.booking-story-inclusions li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--surface); }
.booking-story-inclusions li svg { width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: var(--brand-lighter); color: var(--brand-dark); }
.booking-story-inclusions li span { color: var(--text-secondary); font-size: 9px; line-height: 1.5; }
.booking-story-inclusions li strong { display: block; margin-bottom: 2px; color: var(--text-primary); font-size: 11px; }

.booking-warranty-card { border-block: 1px solid var(--border-light); background: #f1f8f7; }

.booking-warranty-card > p { font-size: 9px; }

.booking-story-faq { padding-bottom: 52px; }
.booking-story-faq details { border-bottom: 1px solid var(--border); }
.booking-story-faq summary { position: relative; padding: 16px 34px 16px 0; color: var(--text-primary); font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.booking-story-faq summary::-webkit-details-marker { display: none; }
.booking-story-faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; color: var(--brand); font-size: 20px; font-weight: 500; }
.booking-story-faq details[open] summary::after { content: '–'; }
.booking-story-faq details p { margin: -4px 0 16px; color: var(--text-secondary); font-size: 10px; line-height: 1.65; }

/* Service-specific detail sheet */
.booking-service-panel {
    position: relative;
    max-height: calc(100svh - 32px);
    overflow-y: auto;
    border-radius: inherit;
    background: var(--white);
    overscroll-behavior: contain;
}

.booking-service-visual { position: relative; height: 230px; overflow: hidden; background: linear-gradient(135deg, #e8f6f5, #f7fbfb); }
.booking-service-visual img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.booking-service-visual > span { position: absolute; bottom: 14px; left: 16px; padding: 6px 9px; border-radius: var(--radius-pill); background: rgba(15,27,45,0.76); color: var(--white); font-size: 8px; font-weight: 800; backdrop-filter: blur(8px); }
.booking-service-content { padding: 26px 30px 30px; }
.booking-service-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.booking-service-title-row h2 { margin: 0; font-size: 1.45rem; letter-spacing: -0.025em; }
.booking-service-price { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; padding: 9px 11px; border-radius: 12px; background: var(--brand-lighter); }
.booking-service-price small { color: var(--text-tertiary); font-size: 7px; text-transform: uppercase; letter-spacing: 0.05em; }
.booking-service-price strong { margin-top: 2px; color: var(--brand-dark); font-size: 12px; }
.booking-service-content > p { margin: 10px 0 20px; color: var(--text-secondary); font-size: 11px; line-height: 1.65; }
.booking-service-highlights { padding: 18px; border-radius: 16px; background: var(--surface); }
.booking-service-highlights h3 { margin: 0 0 11px; font-size: 13px; }
.booking-service-highlights ul { display: grid; gap: 9px; }
.booking-service-highlights li { display: flex; align-items: flex-start; gap: 9px; color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.booking-service-highlights li svg { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 6px; background: var(--brand-lighter); color: var(--brand-dark); }
.booking-service-protection { display: flex; flex-direction: column; gap: 4px; margin: 14px 0; padding: 14px 15px; border: 1px solid rgba(45,135,131,0.16); border-radius: 14px; background: var(--brand-lighter); }
.booking-service-protection strong { color: var(--brand-dark); font-size: 11px; }
.booking-service-protection span { color: var(--brand-dark); font-size: 9px; line-height: 1.58; }
.booking-service-choose { width: 100%; min-height: 48px; border-radius: 13px; background: var(--accent); color: var(--white); font: 800 12px/1 var(--font); box-shadow: 0 9px 24px rgba(255,107,53,0.20); }
@media (hover: hover) and (pointer: fine) { .booking-service-choose:hover { background: var(--accent-dark); } }
.booking-service-choose:focus-visible { outline: 3px solid rgba(255,107,53,0.28); outline-offset: 2px; }

/* Legal strip (R111): the one line kept on every step of the app form; the
   full legal text lives in the sheet its "Details" button opens. */
.booking-legal-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 12px 0 20px;
    border-top: 1px solid rgba(15,27,45,0.08);
}
.booking-legal-strip-text { max-width: 620px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; text-align: center; }
.booking-legal-strip-links { display: flex; justify-content: center; gap: 2px; }
/* Tap targets are 44px tall via padding (S4 recipe); the text stays 12px. */
.booking-legal-strip-links a,
.booking-legal-strip-links button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--brand-dark);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
}
.booking-legal-strip-links a:focus-visible,
.booking-legal-strip-links button:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }

/* Legal sheet (R111): bottom sheet on phones, centred panel on wide screens
   (same shape as .booking-help-dialog). */
.booking-legal-sheet {
    width: min(100%, 440px);
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--white);
    color: var(--text-primary);
}
.booking-legal-sheet::backdrop { background: rgba(15, 23, 42, 0.5); }
.booking-legal-panel { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
.booking-legal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.booking-legal-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.booking-legal-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%;
    background: var(--surface); color: var(--text-secondary); cursor: pointer;
}
.booking-legal-close svg { width: 20px; height: 20px; }
.booking-legal-close:focus-visible,
.booking-legal-done:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
.booking-legal-panel p { margin: 10px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.booking-legal-panel a { color: var(--brand-dark); font-weight: 700; }
.booking-legal-business strong { display: block; color: var(--text-primary); }
.booking-legal-business span { color: var(--text-tertiary); font-size: 12px; }
.booking-legal-links { display: flex; gap: 2px; margin-top: 12px; }
.booking-legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: underline; }
.booking-legal-done { width: 100%; min-height: 48px; margin-top: 10px; border: 0; border-radius: 13px; background: var(--brand); color: var(--white); font: 800 14px/1 var(--font); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .booking-legal-done:hover { background: var(--brand-dark); } }
@media (min-width: 641px) { .booking-legal-sheet { margin: auto; border-radius: 20px; } }

@media (min-width: 960px) {
    .booking-app-layout { grid-template-columns: minmax(0, 720px) 330px; gap: 24px; align-items: start; }
    .booking-confidence-panel {
        position: sticky;
        top: 80px;
        display: block;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius-2xl);
        background: color-mix(in srgb, var(--card) 94%, transparent);
        box-shadow: var(--shadow-2);
    }

    .bw2-story-trigger { display: none; }
    .booking-side-rating { display: flex; align-items: center; gap: 12px; padding: 16px 18px 13px; }
    .booking-side-rating-number { color: var(--text-primary); font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }
    .booking-side-rating > div { display: flex; flex-direction: column; gap: 2px; }
    .booking-rating-stars { color: #f4ad00; font-size: 12px; letter-spacing: 1px; }
    .booking-side-rating a { color: var(--brand-dark); font-size: 9px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
    .booking-side-story { display: grid; grid-template-columns: 92px 1fr 18px; align-items: center; gap: 11px; width: calc(100% - 24px); margin: 0 12px; padding: 8px; border: 1px solid rgba(45,135,131,0.16); border-radius: 15px; background: var(--brand-lighter); text-align: left; }
    @media (hover: hover) and (pointer: fine) { .booking-side-story:hover { border-color: var(--brand-light); box-shadow: 0 8px 22px rgba(45,135,131,0.10); } }
    .booking-side-story:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 1px; }
    .booking-side-story-visual { position: relative; height: 60px; overflow: hidden; border-radius: 10px; background: var(--navy); }
    .booking-side-story-visual img { width: 100%; height: 100%; object-fit: cover; }
    .booking-side-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
    .booking-side-preview.is-on { opacity: 1; }
    .booking-side-story + .booking-side-story { margin-top: 10px; }
    .booking-side-play { position: absolute; inset: 0; display: grid; place-items: center; width: 30px; height: 30px; margin: auto; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--brand-dark); box-shadow: 0 4px 12px rgba(4,18,29,0.25); }
    .booking-side-play svg { width: 16px; height: 16px; }
    .booking-side-story-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .booking-side-story-copy strong { color: var(--text-primary); font-size: 10px; }
    .booking-side-story-copy small { color: var(--text-secondary); font-size: 8px; line-height: 1.4; }
    .booking-side-arrow { width: 17px; color: var(--brand-dark); }
    .booking-side-protection { display: grid; grid-template-columns: 32px 1fr; gap: 10px; margin: 12px; padding: 12px; border: 1px solid rgba(45,135,131,0.16); border-radius: 15px; background: #f8fbfb; }
    .booking-side-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-lighter); color: var(--brand-dark); }
    .booking-side-icon svg { width: 18px; height: 18px; }
    .booking-side-protection strong { display: block; color: var(--text-primary); font-size: 10px; line-height: 1.35; }
    .booking-side-protection p { margin: 3px 0 0; color: var(--text-secondary); font-size: 8px; line-height: 1.5; }
    .booking-side-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 9px; padding: 0 16px 14px; }
    .booking-side-facts li { display: flex; align-items: flex-start; gap: 5px; color: var(--text-secondary); font-size: 8px; line-height: 1.35; }
    .booking-side-facts svg { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%; background: var(--brand-lighter); color: var(--brand-dark); }
    .booking-side-live { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border-light); background: var(--brand-lighter); color: var(--brand-dark); }
    .booking-side-live > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(45,135,131,0.12); }
    .booking-side-live strong { font-size: 9px; }
}

@media (max-width: 959px) {
    .booking-app-layout { max-width: 700px; }
}

@media (max-width: 640px) {
    .booking-app-header { height: 56px; }
    .booking-app-header-inner { grid-template-columns: 1fr auto; width: calc(100% - 24px); }
    /* S4 (V2 launch E2E fix): the logo image stays 29px, but the tap
       target grows to 44px+ tall via invisible padding on the link. */
    .booking-app-logo { padding-block: 8px; }
    .booking-app-logo img { height: 29px; }
    .booking-app-heading { display: none; }
    .booking-app-help { gap: 6px; min-height: 38px; padding: 5px 9px; }
    .booking-app-help small { display: none; }
    .booking-app-help strong { font-size: var(--t-13); }
    /* R111 app screen: the form owns the viewport. Header is 56px; the body's
       dock clearance (.booking-page padding-bottom, 72px + safe area, same
       figure as the min-height here) takes the rest, so when a step fits, the
       strip lands directly on the dock, and when one is taller, that same
       padding keeps the strip readable above the dock at the end of the scroll. */
    .booking-app-main { display: flex; flex-direction: column; min-height: calc(100dvh - 56px - 72px - env(safe-area-inset-bottom, 0px)); }
    .booking-section { flex: 1 0 auto; min-height: 0; padding: 10px 8px 12px; }
    .booking-flow-intro { grid-template-columns: minmax(0,1fr) auto; margin: 0 4px 9px; }
    .booking-flow-intro h1 { font-size: 1.18rem; }
    .booking-flow-intro p { max-width: 245px; font-size: 9px; }
    
    
    .booking-proof-rail {
        display: flex;
        gap: 7px;
        margin: 0 -8px 9px;
        padding: 0 8px 2px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .booking-proof-rail::-webkit-scrollbar { display: none; }
    
    
    
    
    
    #booking-widget-v2 { padding: 13px 12px 15px; border-radius: 17px; }
    .bw2-progress { margin-bottom: 12px; }
    .bw2-story-trigger { margin: -3px 0 12px; min-height: 54px; }
    .bw2-story-trigger-visual { width: 66px; height: 40px; flex-basis: 66px; }
    .bw2-step-header { margin-bottom: 13px; }
    .bw2-step-title { font-size: 1.15rem; }
    .bw2-step-sub { font-size: 10px; }
    .bw2-search-input { min-height: 44px; }
    .bw2-cities-list { max-height: 220px; }
    .booking-assurance { display: none; }
    .bw2-service-card { align-items: center; padding: 12px 13px; }
    .bw2-service-name { font-size: 12px; }
    .bw2-service-price { font-size: 12px; }
    .bw2-service-desc { font-size: 9px; }
    /* The strip ends the screen: centered, compact, above the dock. The links
       keep ~48px of clearance because the dock's "Need help booking?" bubble
       floats up to ~41px above the dock top for its first 10 seconds; without
       the padding it sits on the Terms link at 375px and 360px. */
    .booking-legal-strip { width: 100%; padding: 4px 12px var(--space-12); border-top: 0; }

    .booking-story-dialog,
    .booking-service-dialog { width: 100%; max-width: none; max-height: 94svh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
    .booking-story-panel,
    .booking-service-panel { max-height: 94svh; }
    .booking-story-close,
    .booking-service-close { top: 9px; width: 40px; height: 40px; margin: 9px 9px -49px 0; }
    .booking-story-hero { display: block; }
    /* 4:5 at full width, capped near 60% of the screen height so the
       steps beside it stay one short scroll away. */
    .booking-story-video-wrap video { width: min(100%, 48svh); }
    .booking-story-copy { min-height: 0; padding: 24px 20px 28px; }
    .booking-story-copy h2 { margin-bottom: 18px; font-size: 1.25rem; }
    .booking-story-copy li strong { font-size: 11px; }
    .booking-story-copy li small { font-size: 9px; }
    .booking-story-section { padding: 30px 20px; }
    .booking-story-section h3 { font-size: 1.3rem; }
    .booking-price-steps { grid-template-columns: 1fr; gap: 7px; margin-top: 18px; }
    .booking-price-steps > div { min-height: 0; padding: 13px 14px; }
    .booking-price-steps strong { margin-bottom: 3px; }
    .booking-story-journey img { aspect-ratio: 4 / 5; object-fit: cover; }
    .booking-story-journey figcaption { text-align: left; }
    .booking-story-inclusions { display: block; }
    .booking-story-inclusions > div { margin-bottom: 18px; }
    
    
    .booking-story-faq { padding-bottom: 38px; }

    .booking-service-visual { height: 190px; }
    .booking-service-visual img { padding: 20px; }
    .booking-service-content { padding: 22px 18px 26px; }
    .booking-service-title-row { display: block; }
    .booking-service-title-row h2 { font-size: 1.3rem; }
    .booking-service-price { align-items: flex-start; width: fit-content; margin-top: 10px; }
}

/* ==========================================================================
   READABILITY + STEP REASONING PASS
   Customer-facing text never relies on tiny captions to communicate trust.
   ========================================================================== */
.booking-app-heading strong,
.booking-app-help strong { font-size: 13px; }
.booking-app-heading span,
.booking-app-help small { font-size: 12px; }
.booking-flow-intro p { font-size: 14px; }

.bw2p-dot,
.bw2p-label,
.bw2p-mobile { font-size: 12px; }
.bw2-story-trigger { min-height: 62px; }
.bw2-story-trigger strong { font-size: 13px; }
.bw2-story-trigger small { font-size: 12px; }
.bw2-step-title { font-size: 1.5rem; }
.bw2-step-sub { font-size: 14px; line-height: 1.5; }
.bw2-nav-back { font-size: 13px; }

.bw2-loading,
.bw2-system-note { font-size: 14px; }
.bw2-city-list-heading { font-size: 12px; }
.bw2-city-list-item { min-height: 48px; }
.bw2-city-list-item > span:first-child { font-size: 14px; }
.bw2-appliance-name { font-size: 14px; }

.bw2-job-label { font-size: 16px; }
.bw2-job-desc { font-size: 13px; line-height: 1.5; }
.bw2-service-name { font-size: 15px; }
.bw2-service-desc { font-size: 13px; line-height: 1.5; }
.bw2-service-price-label { font-size: 12px; }
.bw2-service-price { font-size: 15px; }
.bw2-service-details { min-height: 42px; font-size: 13px; }
.bw2-inspection-note,
.bw2-inspection-note strong { font-size: 13px; }
.bw2-inspection-note span { font-size: 12px; line-height: 1.5; }
.bw2-date-day,
.bw2-date-today-tag { font-size: 12px; }

.bw2-slots-label { font-size: 13px; }
.bw2-slot-label { font-size: 15px; }
.bw2-slot-time { font-size: 14px; }
.bw2-label { font-size: 14px; }
.bw2-optional,
.bw2-field-help,
.bw2-snapshot-note { font-size: 13px; }
.bw2-input,
.bw2-phone-prefix { font-size: 16px; }
.bw2-consent-line,
.bw2-snapshot-row,
.bw2-error,
.bw2-otp-timer,
.bw2-link-btn { font-size: 14px; }
.bw2-btn { min-height: 50px; font-size: 15px; }
.bw2-success { max-width: 520px; }
.bw2-success-msg { font-size: 15px; }
.bw2-success-row,
.bw2-next-expectations ol,
.bw2-back-home { font-size: 13px; }
.bw2-next-expectations h3 { font-size: 16px; }
.bw2-success-protection {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: -8px 0 24px;
    padding: 14px 16px;
    border: 1px solid rgba(45,135,131,0.18);
    border-radius: 16px;
    background: var(--brand-lighter);
    color: var(--brand-dark);
    text-align: left;
}
.bw2-success-protection strong { font-size: 14px; line-height: 1.4; }
.bw2-success-protection span { font-size: 13px; line-height: 1.55; }
.bw2-success-founder {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: -8px 0 24px;
    padding: 14px 16px;
    border: 1px solid rgba(45,135,131,0.18);
    border-radius: 16px;
    background: #fff;
    text-align: left;
}
.bw2-success-founder img { flex-shrink: 0; border-radius: 50%; }
.bw2-success-founder p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--brand-dark); }
.bw2-success-founder a { color: var(--brand); font-weight: 700; white-space: nowrap; }
.bw2-success-founder small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.booking-assurance { font-size: 12px; }
.booking-assurance strong { font-size: 12px; }
.booking-story-eyebrow,
.booking-story-generated-label { font-size: 12px; }
.booking-story-copy li strong { font-size: 14px; }
.booking-story-copy li > span { font-size: 12px; }

.booking-story-copy li small,
.booking-story-section > p,
.booking-price-steps span,
.booking-refund-promise p,
.booking-story-journey figcaption,
.booking-story-inclusions li span,
.booking-warranty-card > p,
.booking-story-faq summary,
.booking-story-faq details p { font-size: 13px; }
.booking-price-steps strong,
.booking-refund-promise strong,
.booking-story-inclusions li strong { font-size: 14px; }

.booking-service-visual > span { font-size: 12px; }
.booking-service-price small { font-size: 12px; }
.booking-service-price strong { font-size: 14px; }
.booking-service-content > p,
.booking-service-highlights li,
.booking-service-protection span { font-size: 13px; }
.booking-service-highlights h3,
.booking-service-protection strong { font-size: 14px; }
.booking-service-choose { min-height: 50px; font-size: 14px; }

@media (min-width: 960px) {
    .booking-side-rating a,
    .booking-side-story-copy small,
    .booking-side-protection p,
    .booking-side-facts li,
    .booking-side-live strong { font-size: 12px; }
    .booking-side-story-copy strong,
    .booking-side-protection strong { font-size: 13px; }
}

@media (max-width: 640px) {
    /* S4 (V2 launch E2E fix): was 42px, under the 44px tap-target floor. */
    .booking-app-help { min-height: 44px; padding-inline: 11px; }
    .booking-app-help strong { font-size: 13px; }
    .booking-flow-intro { align-items: center; margin-bottom: 10px; }
    .booking-flow-intro h1 { font-size: 1.25rem; }
    .booking-flow-intro p { display: none; }
    
    .booking-proof-rail { gap: 8px; margin-bottom: 10px; }
    
    
    
    #booking-widget-v2 { padding: 14px 13px 16px; }
    .bw2-progress { margin-bottom: 11px; }
    .bw2p-mobile { line-height: 1.4; }
    .bw2-story-trigger { min-height: 58px; margin-bottom: 11px; }
    .bw2-story-trigger strong { font-size: 13px; }
    .bw2-story-trigger small { font-size: 12px; }
    .bw2-step-header { margin-bottom: 12px; }
    .bw2-step-title { font-size: 1.5rem; line-height: 1.25; }
    .bw2-step-sub { font-size: 15px; }
    .bw2-search-wrap { margin-bottom: 7px; }
    .bw2-search-input { min-height: 46px; font-size: 16px; }
    .bw2-city-list-heading { margin-bottom: 5px; font-size: 12px; }
    .bw2-cities-list { max-height: 218px; }
    .bw2-city-list-item { min-height: 46px; padding: 8px 10px; }
    .bw2-appliance-name { font-size: 15px; }
    
    .bw2-job-label { font-size: 16px; }
    .bw2-job-desc,
    .bw2-service-desc { font-size: 14px; }
    .bw2-service-name,
    .bw2-service-price { font-size: 15px; }
    .bw2-service-price-label { font-size: 12px; }
    .bw2-service-details { font-size: 13px; }
    .bw2-date-day,
    .bw2-date-today-tag { font-size: 12px; }
    .bw2-slot-label { font-size: 15px; }
    .bw2-slot-time { font-size: 14px; }
    .booking-dock-action { font-size: 12px; }
    .booking-dock-primary { font-size: 16px; }
    .booking-mobile-dock { grid-template-columns: 70px minmax(0, 1fr) 70px; min-height: 68px; }
    .booking-story-copy li strong { font-size: 14px; }
    .booking-story-copy li > span { font-size: 12px; }
    
.booking-story-copy li small,
.booking-story-section > p,
.booking-price-steps span,
.booking-refund-promise p,
.booking-story-journey figcaption,
.booking-story-inclusions li span,
.booking-warranty-card > p,
.booking-story-faq summary,
.booking-story-faq details p { font-size: 13px; }
    .booking-service-content { padding: 24px 20px 28px; }
    .booking-service-title-row { flex-direction: column; gap: 12px; }
    .booking-service-price { align-items: flex-start; }
}

/* ── Typography floor (2026-07-25 audit fix) ───────────────────────────────
   Decision-critical reassurance copy was rendering at 7-9px on the money
   path. These overrides sit at the END of the file so they win over every
   earlier rule (including the mobile @media blocks) at equal specificity.
   Rule (raised 2026-10-12, owner: "some texts seem too small" on the phone):
   any sentence a customer must READ is >=13px; short labels >=12px. Nothing
   below 12px. */
.booking-flow-intro p { font-size: 13px; max-width: none; }
.bw2-service-desc { font-size: 14px; }
.bw2-story-trigger strong { font-size: 13px; }
.bw2-story-trigger small { font-size: 12px; }
.booking-app-help strong { font-size: 12px; }
.booking-app-help small { font-size: 12px; }
.booking-refund-promise p { font-size: 13px; }
.booking-price-steps span { font-size: 13px; }
.booking-service-protection span { font-size: 12px; }
.booking-story-inclusions li span { font-size: 12px; }

.booking-warranty-card > p { font-size: 13px; }
.booking-story-faq details p { font-size: 13px; }
.booking-story-copy li small { font-size: 12px; }
.bw2-parts-note,
.bw2-inspection-note span { font-size: 13px; }

/* Conversion pass 2026-09-26: the proof line and the desktop confidence
   panel meet the 12px floor (house rules), not the old 10px one. */
.booking-side-protection p, .booking-side-facts li, .booking-side-story-copy small { font-size: 12px; }
@media (min-width: 960px) {
    .booking-side-rating a,
    .booking-side-live strong { font-size: 12px; }
}

/* City with no bookable catalog — honest stop instead of a 6-step dead end
   (2026-07-26: Noida and Karnal return 0 categories from the CRM yet are
   selectable; the old static-tile fallback let customers reach OTP and then
   fail validation at submit). */
.bw2-city-offline {
    /* The parent is the appliance CSS grid — span every column or the panel
       renders squeezed into one narrow cell. */
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle, #f6faf9);
    text-align: center;
}
.bw2-city-offline strong { color: var(--text-primary); font-size: var(--text-base); line-height: 1.35; }
.bw2-city-offline > span { color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
.bw2-city-offline-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); }
.bw2-city-offline-actions .bw2-btn { text-decoration: none; }
@media (min-width: 480px) {
    .bw2-city-offline-actions { flex-direction: row; }
}

/* "Not sure which one you have?" — the catalog's variant names (Cassette,
   Inverter, Semi-Automatic, Side by Side) are trade jargon, and picking wrong
   changes the quoted charge. Collapsed by default so it costs nothing to the
   customer who already knows. */
.bw2-variant-help {
    margin: -2px 0 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--white);
}
.bw2-variant-help summary {
    padding: 11px 13px;
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.bw2-variant-help summary::-webkit-details-marker { display: none; }
.bw2-variant-help summary::after {
    content: '';
    margin-left: auto;
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s;
}
.bw2-variant-help[open] summary::after { transform: rotate(-135deg); }
.bw2-variant-help dl { margin: 0; padding: 0 13px 2px; }
.bw2-variant-help dt { color: var(--text-primary); font-size: 13px; font-weight: 700; }
.bw2-variant-help dd { margin: 1px 0 9px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.bw2-variant-help > p { margin: 0; padding: 0 13px 12px; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; }

/* ─── Optional map-pin picker (location brief §1) ────────────────────────── */
/* Everything here is optional by design: the typed address alone completes a
   booking, so nothing in this block may ever look required or block submit. */

.bw2-pin-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md, 10px);
    text-align: left;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .bw2-pin-trigger:hover { border-color: var(--brand); } }
.bw2-pin-trigger-icon { font-size: 20px; line-height: 1; }
.bw2-pin-trigger-text { display: flex; flex-direction: column; gap: 2px; }
.bw2-pin-trigger-title { font-weight: 600; color: var(--text-primary); }
.bw2-pin-trigger-sub { color: var(--text-tertiary); font-size: 13px; }

/* Required pin (owner, 2026-10-04): on the booking page the pin is not a side
   option. A tinted card with a solid brand border and a visible action chip, so
   it reads as a step to do. Booking page only: My Bookings keeps the plain
   dashed trigger above. */
.bw2-pin-trigger--required {
    min-height: 72px;
    background: var(--brand-lighter);
    border: 2px solid var(--brand);
}
.bw2-pin-trigger--required .bw2-pin-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
}
.bw2-pin-trigger--required .bw2-pin-trigger-icon svg { width: 22px; height: 22px; }
.bw2-pin-trigger--required .bw2-pin-trigger-text { flex: 1; min-width: 0; }
.bw2-pin-trigger--required .bw2-pin-trigger-sub { color: var(--text-secondary); }
.bw2-pin-trigger-cta {
    flex: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--brand-dark);
    color: var(--white);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}
.bw2-pin-trigger--required.is-set { background: var(--white); }
.bw2-pin-trigger--required.is-set .bw2-pin-trigger-cta {
    background: var(--white);
    color: var(--brand-dark);
    border: 1px solid var(--brand);
}
.bw2-pin-trigger--required[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--white);
}
.bw2-pin-trigger--required[aria-invalid="true"] .bw2-pin-trigger-icon { background: var(--danger); }
.bw2-pin-trigger--required:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .bw2-pin-trigger--required:hover { border-color: var(--brand-dark); }
}

/* Bottom sheet on phones, centred panel on wide screens. Never a centre modal
   on mobile — a sheet is the thumb-reachable idiom. */
.bw2-pin-sheet[hidden] { display: none; }
.bw2-pin-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.bw2-pin-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); touch-action: none; }
.bw2-pin-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border-radius: 16px 16px 0 0;
    padding: var(--space-5);
}
.bw2-pin-head { display: flex; align-items: center; justify-content: space-between; }
.bw2-pin-title { margin: 0; font-size: var(--text-lg); }
.bw2-pin-close {
    min-width: 44px; min-height: 44px;
    background: none; border: none;
    font-size: 26px; line-height: 1; color: var(--text-tertiary); cursor: pointer;
}
.bw2-pin-note { margin: var(--space-2) 0 var(--space-4); color: var(--text-tertiary); font-size: var(--text-sm); }

.bw2-pin-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bw2-pin-action {
    flex: 1 1 180px;
    min-height: 48px;
    padding: var(--space-3);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md, 10px);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .bw2-pin-action:hover { border-color: var(--brand); } }
.bw2-pin-consent { margin: var(--space-3) 0 0; color: var(--text-tertiary); font-size: var(--text-xs); }

.bw2-pin-map {
    width: 100%;
    height: clamp(200px, 36dvh, 300px);
    margin-top: var(--space-4);
    border-radius: var(--radius-md, 10px);
    background: var(--border);
}
.bw2-pin-status { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.bw2-pin-status.is-error { color: var(--danger, #b91c1c); }
.bw2-pin-suggestion { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }

.bw2-pin-fallback { margin-top: var(--space-4); }
.bw2-pin-retry {
    min-height: 44px; margin-top: var(--space-3);
    padding: 0 var(--space-4);
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: var(--radius-md, 10px); cursor: pointer;
}

/* Save and Remove stay pinned to the bottom of the sheet: on a short phone the
   map pushed them below the fold and customers had to scroll to find Save. */
.bw2-pin-foot {
    display: flex; gap: var(--space-3);
    position: sticky; bottom: calc(var(--space-5) * -1); z-index: 1;
    margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
    padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid var(--border);
}
.bw2-pin-secondary {
    flex: 0 0 auto; min-height: 48px; padding: 0 var(--space-4);
    background: none; border: 1.5px solid var(--border);
    border-radius: var(--radius-md, 10px); color: var(--text-secondary); cursor: pointer;
}
.bw2-pin-primary {
    flex: 1; min-height: 48px;
    background: var(--brand); color: var(--white);
    border: none; border-radius: var(--radius-md, 10px);
    font-weight: 600; cursor: pointer;
}

@media (min-width: 640px) {
    .bw2-pin-sheet { align-items: center; }
    .bw2-pin-panel { border-radius: 16px; max-height: 88dvh; }
}

/* Save is inert until a pin is actually placed — it must LOOK inert too, or a
   customer taps a live-looking button and believes a pin was attached. */
.bw2-pin-primary:disabled {
    background: var(--border);
    color: var(--text-tertiary);
    cursor: default;
}
.bw2-pin-secondary[hidden] { display: none; }

/* ─── W2-2: greyed appliances, focus, reduced motion ───────────────────── */

/* R3: an appliance with no online booking in this city, greyed but tappable
   (it opens the call / WhatsApp / call back notice). */
.bw2-appliance-card.bw2-appliance-off {
    background: var(--surface);
    border-style: dashed;
}
.bw2-appliance-card.bw2-appliance-off .bw2-appliance-img { filter: grayscale(1); opacity: 0.55; }
.bw2-appliance-card.bw2-appliance-off .bw2-appliance-name { color: var(--text-secondary); }
.bw2-appliance-off-note { color: var(--text-secondary); font-size: 12px; font-weight: 600; }

.bw2-appliance-unbookable { text-align: left; gap: var(--space-2); padding: var(--space-4); }
.bw2-appliance-unbookable .bw2-city-offline-actions { flex-direction: row; }
.bw2-appliance-unbookable .bw2-city-offline-actions .bw2-btn {
    flex: 1;
    min-width: 0;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    white-space: nowrap;
}
.bw2-appliance-unbookable .bw2-link-btn { align-self: center; color: var(--brand-dark); }
.bw2-appliance-unbookable-head { display: flex; align-items: center; gap: var(--space-3); }
.bw2-appliance-unbookable-head .bw2-appliance-img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
}

/* A details field that failed validation (W2-2): red edge until typed into. */
.bw2-input[aria-invalid="true"] { border-color: var(--danger); }

/* Soft capacity line on the date step (R6: never blocks). */
.bw2-high-demand { color: #8A4B08; }

/* Step headings take focus on every step change so screen readers land on
   the new step. They are not in the tab order (tabindex=-1, never a control),
   so no ring is drawn on them. */
.bw2-step-title:focus,
#bw2-success-title:focus { outline: none; }

/* Gentler, not none: steps fade instead of sliding, the success mark fades
   instead of popping, the spinner keeps turning slowly. */
@media (prefers-reduced-motion: reduce) {
    .bw2-screen.active,
    .bw2-screen.active.bw2-back { animation: bw2FadeIn 0.2s ease-out; }
    .bw2-success-anim { animation: bw2FadeIn 0.2s ease-out; }
    .bw2-success-anim polyline { animation: none; stroke-dashoffset: 0; }
    .bw2-success-cheer { animation: bw2FadeIn 0.2s ease-out both; }
    .bw2-confetti { display: none; }
    .bw2-spinner { animation-duration: 1.6s; }
}
@keyframes bw2FadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Chrome trim (V2 launch W2-3) ──────────────────────────────────────────
   Step 1 keeps the proof rail and the "See how service works" card; from
   step 2 on the customer has chosen to book, so the screen is the step
   itself (the overview moves into the dock's Help sheet). Each reassurance
   is one sentence under the control it is about. */
.bw2-step-cue {
    margin: var(--space-3) 2px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}
#bw2-exact-time-line { margin-top: var(--space-4); }

body[data-booking-step]:not([data-booking-step="1"]) .booking-proof-rail,
body[data-booking-step]:not([data-booking-step="1"]) .bw2-story-trigger { display: none; }

.booking-dock-primary { display: none; }

/* applicare-v2.css sets overflow-x:hidden on html and body, which makes body
   the scroll container and stops the sticky header and progress row from
   sticking. clip hides sideways overflow without creating a scroll container. */
html:has(body.booking-page),
body.booking-page { overflow-x: clip; }

@media (max-width: 640px) {
    /* The page intro is the step-1 welcome; later steps start at the step. */
    body[data-booking-step]:not([data-booking-step="1"]) .booking-flow-intro { display: none; }

    /* Slim progress row that stays under the header while the step scrolls. */
    .bw2-progress {
        position: sticky;
        top: 56px;
        z-index: 5;
        margin-inline: -4px;
        padding: 8px 4px 10px;
        background: var(--white);
    }

    /* One primary per screen: the dock's centre button stands in for these. */
    #bw2-next-4,
    #bw2-next-5,
    #bw2-next-8,
    #bw2-next-9,
    #bw2-send-otp-btn,
    #bw2-verify-otp-btn,
    #bw2-book-direct-btn,
    #bw2-lead-fallback-btn.bw2-btn-primary { display: none !important; }
    #bw2-s4 .bw2-actions,
    #bw2-s5 .bw2-actions,
    #bw2-s6-number .bw2-actions,
    #bw2-s6-you .bw2-actions,
    #bw2-s6-where .bw2-actions,
    #bw2-s6-about .bw2-actions,
    #bw2-s6-callback .bw2-actions { display: none; }

    .booking-dock-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 48px;
        margin: 4px;
        padding: 8px 14px;
        border: 0;
        border-radius: var(--radius-pill);
        background: var(--accent);
        color: var(--white);
        font-family: var(--font);
        font-size: 16px;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        box-shadow: var(--shadow-accent);
        transition: background-color 0.15s ease-out, transform 0.15s ease-out;
    }
    .booking-dock-primary[hidden] { display: none; }
    .booking-dock-primary:active:not(:disabled) { transform: scale(0.98); }
    .booking-dock-primary:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
    /* Disabled = a hint of what the step needs, not a greyed-out button. */
    .booking-dock-primary:disabled {
        background: var(--brand-lighter);
        color: var(--brand-dark);
        box-shadow: none;
        cursor: default;
        font-size: 15px;
    }
    button.booking-dock-action { border: 0; background: none; font-family: var(--font); cursor: pointer; }
    /* Help keeps the right-hand slot even when the centre button is hidden. */
    #booking-dock-help { grid-column: 3; }
}

/* Help sheet: bottom sheet on phones, small panel on wide screens. */
.booking-help-dialog {
    width: min(100%, 440px);
    max-width: 100%;
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--white);
    color: var(--text-primary);
}
.booking-help-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.booking-help-panel { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.booking-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.booking-help-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.booking-help-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--surface); color: var(--text-secondary); cursor: pointer;
}
.booking-help-close svg { width: 20px; height: 20px; }
.booking-help-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 60px; margin-top: 8px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--white); color: var(--text-primary);
    font-family: var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.booking-help-row svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--brand); }
.booking-help-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.booking-help-row strong { font-size: 15px; font-weight: 700; }
.booking-help-row small { color: var(--text-secondary); font-size: 13px; }
.booking-help-row:focus-visible,
.booking-help-close:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
/* The two video rows carry a thumbnail in place of the line icon. */
.booking-help-row--video { padding: 8px 12px 8px 8px; }
/* The how-to-book video's voice promises the booking goes through, which
   is only true while online booking is ON; booking-widget-v2.js keeps
   these two entries hidden until booking_enabled says so. Top level, so it
   beats the display rules of the desktop card (min-width: 960px) and the
   help row at every width. */
.booking-side-story[hidden], .booking-help-row[hidden] { display: none; }
.booking-help-row .booking-help-thumb {
    position: relative; display: block; flex: 0 0 96px; width: 96px; height: 72px;
    border-radius: 10px; overflow: hidden; background: var(--surface);
}
.booking-help-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.booking-help-play {
    position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}
.booking-help-row .booking-help-play svg { width: 14px; height: 14px; flex: 0 0 14px; margin-left: 1px; color: inherit; }

/* "How to book" video dialog: a portrait 9:16 player that fits any phone. */
.booking-howto-dialog {
    position: relative; width: min(400px, calc(100vw - 32px)); max-height: calc(100svh - 32px);
    margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 24px;
    background: var(--navy); color: var(--white);
    box-shadow: 0 34px 100px rgba(4, 18, 29, 0.34);
}
.booking-howto-dialog::backdrop { background: rgba(6, 24, 34, 0.72); backdrop-filter: blur(8px); }
.booking-howto-dialog video {
    display: block; width: 100%; height: auto; max-height: calc(100svh - 32px);
    aspect-ratio: 9 / 16; object-fit: contain; background: var(--navy);
}

@media (min-width: 641px) {
    .booking-help-dialog { margin: auto; border-radius: 20px; }
}

/* Coverage (R3-3): under the pincode, a quiet line, the city nudge, or the
   "we don't cover this exact spot yet" card whose call-back replaces the
   booking buttons. Sits in the pincode field's bottom space. */
.bw2-coverage { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.bw2-coverage[hidden] { display: none; }
.bw2-coverage > .bw2-field-help { margin-top: 0; }
.bw2-coverage .bw2-system-note { margin-bottom: 0; }
.bw2-coverage .bw2-system-note + .bw2-system-note { margin-top: var(--space-2); }
.bw2-coverage .bw2-system-note p { margin: 0 0 var(--space-2); }
.bw2-coverage .bw2-system-note p:last-child { margin-bottom: 0; }
.bw2-coverage .bw2-existing-actions { margin-bottom: var(--space-2); }
.bw2-coverage-ok { color: var(--brand-dark); }
.bw2-coverage-outside:focus { outline: none; }
.bw2-coverage-outside:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
@media (max-width: 640px) {
    /* One primary per screen: on phones the dock's centre is the call-back. */
    .bw2-coverage-outside .bw2-existing-actions { display: none; }
}

/* ==========================================================================
   CONVERSION PASS (2026-09-26): first city tap within 320px of the top at
   375x812, step 1's shape painted before the script (CLS), skeletons in
   place of spinners, and a confirmation whose first action saves the visit.
   ========================================================================== */

/* One proof line in place of the pill + card rail. It keeps the
   .booking-proof-rail class, so the step-2+ rule above still hides it. */
.booking-flow-intro { display: block; margin: 0 0 12px; }
.booking-flow-intro .booking-flow-intro-sub { margin: 2px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.booking-flow-intro .booking-proof-rail.booking-proof-line {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    overflow: visible;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.booking-proof-line a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: rgba(15,27,45,0.25);
    text-underline-offset: 3px;
}
.booking-proof-line a:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; border-radius: 4px; }
.booking-proof-star { color: #B07A00; }

/* Step 1 sits under its list; "See how service works" follows the city
   choice instead of standing in front of it. */
#bw2-s1 .bw2-story-trigger,
.bw2-static-shell .bw2-story-trigger { margin: 12px 0 0; }
.bw2-story-trigger-skel { min-height: 58px; }

/* The popular list shows part of its fifth row, so it reads as a list
   that scrolls (a visible affordance, not a silent inner scroll). */
.bw2-cities-list { max-height: 252px; }

/* Skeletons: the real shape, never a spinner. */
.bw2-city-skel,
.bw2-slot-skel {
    display: block;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, #edf2f2 25%, #f6f9f9 50%, #edf2f2 75%);
    background-size: 200% 100%;
    animation: bw2Shimmer 1.4s linear infinite;
}
.bw2-city-skel { height: 48px; }
.bw2-slot-skel { height: 60px; border-radius: var(--radius-lg); }
@keyframes bw2Shimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bw2-city-skel, .bw2-slot-skel { animation: none; }
}
.bw2-static-shell .bw2-search-input:disabled { background: var(--white); opacity: 1; cursor: default; }

/* The first paint of step 1 (static or widget) never slides in: it would
   read as the page loading twice. Later step changes keep their motion. */
.bw2-wrap:not(.bw2-ready) .bw2-screen.active { animation: none; }

/* The footer cannot move while step 1 fills in: its height is reserved. */
body:not([data-booking-step]) #booking-widget-v2,
body[data-booking-step="1"] #booking-widget-v2 { min-height: 540px; }

/* City search with no match: the ways out, not a dead end. */
.bw2-city-no-results { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-2); font-size: 13px; }
.bw2-city-no-results p { margin: 0; }
.bw2-city-no-results .bw2-city-offline-actions { margin-top: 0; }
.bw2-city-no-results .bw2-btn { text-decoration: none; }

/* Confirmation: the technician's call and "Save our number" first. */
.bw2-success-call {
    max-width: 420px;
    margin: calc(-1 * var(--space-3)) auto var(--space-4);
    padding: 10px 14px;
    border: 1px solid rgba(45,135,131,0.18);
    border-radius: 14px;
    background: var(--brand-lighter);
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}
.bw2-success-call[hidden] { display: none; }
.bw2-success-actions.bw2-success-actions-top {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-6);
}
.bw2-success-actions-top .bw2-btn { width: 100%; max-width: 300px; }
.bw2-save-contact-note { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }

@media (max-width: 640px) {
    /* The step title names the task on phones; the h1 stays for screen
       readers and search, the proof line is the one visible line. */
    .booking-flow-intro h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .booking-flow-intro { margin: 0 4px 8px; }
    .booking-flow-intro .booking-flow-intro-sub { display: none; }
    .booking-flow-intro .booking-proof-rail.booking-proof-line { margin: 0; }
    .bw2-city-skel { height: 46px; }
    .bw2-cities-list { max-height: 240px; }
    body:not([data-booking-step]) #booking-widget-v2,
    body[data-booking-step="1"] #booking-widget-v2 { min-height: 520px; }

    .bw2-success { padding-top: var(--space-4); }
    .bw2-success-anim { width: 56px; height: 56px; margin-bottom: var(--space-3); }
    .bw2-success-anim svg { width: 28px; height: 28px; }
    .bw2-success h2 { font-size: 1.6rem; }
    .bw2-success-msg { margin-bottom: var(--space-4); }
}

/* Second type pass 2026-10-12 (owner: "some texts too small"). Customer-visible text is never
   under 12px and a sentence a customer must read is 13px+. These sit last so they beat the older
   per-screen rules above (the process sheet, the service sheet, the desktop side panel). */
.bw2-service-price-note { font-size: 13px; }
.bw2-snapshot-row { text-wrap: balance; }
.bw2-address-label { font-size: 12px; }
.booking-refund-promise strong,
.booking-story-faq summary { font-size: 14px; }
.booking-story-journey figcaption { font-size: 12px; }
.booking-service-content > p,
.booking-service-highlights li { font-size: 13px; }
.booking-service-protection strong { font-size: 14px; }
.booking-side-rating a { font-size: 12px; }

/* ─── App-form waves 1-2 (2026-10-12, brief §5): the signed-in header chip
       on every step + the appliance step's common-8 grid with "Show all".
       Appended block; sits last so it beats the older per-screen rules. ─── */

/* One line, "Signed in as X · Not you?", above the progress bar. The row
   itself is the 44px hit area for the Not-you button (bw2-link-btn already
   carries min-height:44px). */
.bw2-signed-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--brand-lighter);
    border: 1px solid rgba(45, 135, 131, 0.25);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--navy);
}
.bw2-signed-chip-id { min-width: 0; }
.bw2-signed-chip-id strong { color: var(--brand-dark); }
.bw2-signed-chip .bw2-link-btn { flex: none; padding: var(--space-2) 0 var(--space-2) var(--space-3); }
@media (hover: hover) and (pointer: fine) { .bw2-signed-chip .bw2-link-btn:hover { color: var(--brand); } }

/* Full-width "Show all N appliances" under the common tiles. */
.bw2-show-all {
    grid-column: 1 / -1;
    min-height: 48px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand);
    background: var(--white);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.2s ease-out, color 0.2s ease-out, background-color 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
    .bw2-show-all:hover { border-color: var(--brand); background: var(--brand-lighter); }
}

/* Phone app screen: the common 8 + the button fit one 375x667 screen.
   Two columns, ~84px compact tiles, icon pulled in; names stay >=14px
   (the later type pass above already floors them at 14-15px). */
@media (max-width: 640px) {
    .bw2-appliance-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .bw2-appliance-card { min-height: 84px; padding: 10px var(--space-2); gap: 6px; justify-content: center; }
    .bw2-appliance-img { width: 34px; height: 34px; }
    .bw2-appliance-name { font-size: 14px; line-height: 1.25; }
}

/* ─── Reassurance, not fine print (2026-10-16) ───────────────────────────────
   Owner: the gray sentence at the foot of every card plus the "Disclaimer"
   paragraph below it read like small print. Now: each card's one reassurance is
   a tinted row with an icon (a promise beside the action), the warranty
   paragraph folds into "Warranty details", and the legal line is one quiet
   sentence with a single link (Privacy and Terms live in the sheet). */
.bw2-step-cue {
    --bw2-cue-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--brand-lighter);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
}
.bw2-step-cue::before,
.bw2-parts-note::before {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    margin-top: 1px;
    background: var(--brand-dark);
    -webkit-mask: var(--bw2-cue-icon) center / contain no-repeat;
            mask: var(--bw2-cue-icon) center / contain no-repeat;
}
#bw2-exact-time-line {
    --bw2-cue-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
}

/* Spare parts is part of the price story: sits right under the price card, with the same icon. */
.bw2-parts-note {
    --bw2-cue-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-3) 2px 0;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
}

/* The guarantee leads; the warranty is one tap away, not a paragraph. */
.bw2-inspection-note {
    border: 0;
    background: var(--brand-lighter);
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-4);
}
.bw2-inspection-note strong { font-size: 15px; line-height: 1.35; }
.bw2-warranty summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-block: -2px;
    cursor: pointer;
    list-style: none;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bw2-warranty summary::-webkit-details-marker { display: none; }
.bw2-warranty summary:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; border-radius: var(--radius-md); }
.bw2-warranty span { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: 13px; line-height: 1.5; }

/* Legal line under the card, as before; its links one size up (2026-10-16). */
.booking-legal-strip-links a,
.booking-legal-strip-links button { font-size: 15px; }