/*
 * SSK Mechanics — Booking Wizard v4 enhancement layer
 * -------------------------------------------------------------------------
 * Progressive enhancement over booking.css v3. Loaded ONLY when the
 * ssk_book_v4_enabled option is on. Adds:
 *   1. Mobile/tablet app-style bottom bar + order-summary bottom sheet.
 *   2. Inline contextual service upsell pills.
 *   3. 52px minimum touch targets in the thumb zone.
 *
 * Design constraints deliberately honoured:
 *   - Reuses the EXISTING brand tokens from booking.css (--bk-*). Defines no
 *     new colour, font or radius tokens (doc 18 flagged token duplication as
 *     existing debt — this must not add to it).
 *   - Reuses the EXISTING 860px breakpoint. Adds no 14th breakpoint value.
 *   - Never moves a DOM node: the sheet IS .ssk-bk__sidebar repositioned, so
 *     #ssk-sum-lines / #ssk-sum-total keep their single source of truth and
 *     booking.js keeps writing to them untouched.
 *
 * All rules are scoped under .ssk-bk--v4, added to #ssk-bk-root by
 * booking-v4.js. With the flag off, this file is not enqueued at all; if it
 * ever were, the missing class makes every rule inert.
 */

/* ── 1. Inline upsell pills (all viewports) ─────────────────────────── */

.ssk-bk--v4 .ssk-bk__upsells {
  margin: 14px 0 4px;
}
.ssk-bk--v4 .ssk-bk__upsells:empty {
  display: none;
}
.ssk-bk--v4 .ssk-upsell-group {
  background: var(--bk-mist);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  animation: bkFadeIn .25s ease;
}
.ssk-bk--v4 .ssk-upsell-group__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--bk-steel);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 10px;
  display: block;
}
.ssk-bk--v4 .ssk-upsell-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ssk-bk--v4 .ssk-upsell-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 16px;
  background: var(--bk-white);
  border: 1.5px solid var(--bk-line);
  border-radius: 999px;
  font-family: var(--bk-font-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--bk-ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  text-align: left;
  line-height: 1.35;
}
.ssk-bk--v4 .ssk-upsell-pill:hover,
.ssk-bk--v4 .ssk-upsell-pill:focus-visible {
  border-color: var(--bk-red);
  outline: none;
}
.ssk-bk--v4 .ssk-upsell-pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(214, 0, 28, .25);
}
.ssk-bk--v4 .ssk-upsell-pill__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bk-red);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}
.ssk-bk--v4 .ssk-upsell-pill__price {
  font-weight: 800;
  color: var(--bk-red);
  white-space: nowrap;
}
.ssk-bk--v4 .ssk-upsell-pill.is-added {
  background: var(--bk-green);
  border-color: var(--bk-green);
  color: #fff;
}
.ssk-bk--v4 .ssk-upsell-pill.is-added .ssk-upsell-pill__plus {
  background: rgba(255, 255, 255, .25);
}
.ssk-bk--v4 .ssk-upsell-pill.is-added .ssk-upsell-pill__price {
  color: #fff;
}

/* ── 2. Mobile bottom bar + order-summary sheet (<= 860px) ──────────── */

.ssk-bk__v4bar,
.ssk-bk__v4backdrop {
  display: none;
}

@media (max-width: 860px) {

  /* The v3 floating per-step nav is superseded by the v4 bar, which proxies
     clicks straight through to those same buttons. Keep it in the DOM and
     keep it operable by booking.js — just take it out of the layout. */
  .ssk-bk--v4 .ssk-bk__nav {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    box-shadow: none;
  }

  /* Sidebar becomes the bottom sheet. No DOM move — same node, new position. */
  .ssk-bk--v4 .ssk-bk__sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    order: 0;
    z-index: 60;
    max-height: min(82vh, 680px);
    max-height: min(82dvh, 680px); /* dvh: Safari 15.4+. vh above is the fallback. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(101%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ssk-bk--v4.is-sheet-open .ssk-bk__sidebar {
    transform: translateY(0);
  }
  .ssk-bk--v4 .ssk-bk__summary {
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .22);
  }

  /* Grab handle */
  .ssk-bk--v4 .ssk-bk__summary-header {
    position: relative;
    padding-top: 22px;
  }
  .ssk-bk--v4 .ssk-bk__summary-header::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .32);
  }

  /* Inside the sheet the summary is always expanded, so the v3 Show/Hide
     accordion toggle becomes a Close control instead. */
  .ssk-bk--v4 .ssk-bk__summary-body {
    display: block !important;
  }
  .ssk-bk--v4 .ssk-bk__summary-toggle {
    display: none !important;
  }
  .ssk-bk--v4 .ssk-bk__sheet-close {
    min-width: 52px;
    min-height: 44px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, .14);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: var(--bk-font-b);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  .ssk-bk--v4 .ssk-bk__sheet-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* Backdrop */
  .ssk-bk--v4 .ssk-bk__v4backdrop {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; /* inset shorthand is Safari 14.1+ */
    z-index: 59;
    background: rgba(13, 14, 16, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  .ssk-bk--v4.is-sheet-open .ssk-bk__v4backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Persistent bottom bar */
  .ssk-bk--v4 .ssk-bk__v4bar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 58;
    background: var(--bk-white);
    border-top: 1px solid var(--bk-line);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .1);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .ssk-bk--v4 .ssk-bk__v4summary-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    min-height: 52px;
    padding: 6px 12px;
    background: var(--bk-mist);
    border: 1.5px solid var(--bk-line);
    border-radius: var(--bk-radius);
    font-family: var(--bk-font-b);
    cursor: pointer;
    text-align: left;
  }
  .ssk-bk--v4 .ssk-bk__v4summary-btn:focus-visible {
    outline: none;
    border-color: var(--bk-red);
    box-shadow: 0 0 0 3px rgba(214, 0, 28, .25);
  }
  .ssk-bk--v4 .ssk-bk__v4step {
    font-size: 10px;
    font-weight: 700;
    color: var(--bk-steel);
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
  }
  .ssk-bk--v4 .ssk-bk__v4total-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
  }
  .ssk-bk--v4 .ssk-bk__v4total {
    font-family: var(--bk-font-h);
    font-size: 19px;
    font-weight: 800;
    color: var(--bk-ink);
    line-height: 1.1;
    white-space: nowrap;
  }
  .ssk-bk--v4 .ssk-bk__v4caret {
    font-size: 11px;
    color: var(--bk-red);
    font-weight: 800;
    transition: transform .2s ease;
    display: inline-block;
  }
  .ssk-bk--v4.is-sheet-open .ssk-bk__v4caret {
    transform: rotate(180deg);
  }

  .ssk-bk--v4 .ssk-bk__v4actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  .ssk-bk--v4 .ssk-bk__v4back {
    min-width: 52px;
    min-height: 52px;
    flex-shrink: 0;
    background: var(--bk-white);
    border: 1.5px solid var(--bk-line);
    border-radius: var(--bk-radius);
    color: var(--bk-steel);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    font-family: var(--bk-font-b);
  }
  .ssk-bk--v4 .ssk-bk__v4back[hidden] {
    display: none;
  }
  .ssk-bk--v4 .ssk-bk__v4next {
    flex: 1;
    min-height: 52px;
    padding: 0 16px;
    background: var(--bk-red);
    border: none;
    border-radius: var(--bk-radius);
    color: #fff;
    font-family: var(--bk-font-b);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ssk-bk--v4 .ssk-bk__v4next:hover:not(:disabled) {
    background: var(--bk-red-dk);
  }
  .ssk-bk--v4 .ssk-bk__v4next:disabled {
    opacity: .45;
    cursor: not-allowed;
  }
  .ssk-bk--v4 .ssk-bk__v4next:focus-visible,
  .ssk-bk--v4 .ssk-bk__v4back:focus-visible {
    outline: 3px solid var(--bk-ink);
    outline-offset: 2px;
  }

  /* Clear the fixed bar so the last field is never trapped underneath it. */
  .ssk-bk--v4 .ssk-bk__main {
    padding-bottom: 92px;
  }

  /* Thumb-zone sizing for the controls customers tap most. */
  .ssk-bk--v4 .ssk-bk__time-slot,
  .ssk-bk--v4 .ssk-bk__parts-opt,
  .ssk-bk--v4 .ssk-svc-filter,
  .ssk-bk--v4 .ssk-body-shape {
    min-height: 52px;
  }
  .ssk-bk--v4 .ssk-bk__lookup-btn,
  .ssk-bk--v4 .ssk-svc-search,
  .ssk-bk--v4 .ssk-bk__field input,
  .ssk-bk--v4 .ssk-bk__field select,
  .ssk-bk--v4 .ssk-bk__manual-form input,
  .ssk-bk--v4 .ssk-bk__manual-form select {
    min-height: 52px;
  }
}

/* Nothing here should animate for people who asked it not to. */
@media (prefers-reduced-motion: reduce) {
  .ssk-bk--v4 .ssk-bk__sidebar,
  .ssk-bk--v4 .ssk-bk__v4backdrop,
  .ssk-bk--v4 .ssk-bk__v4caret,
  .ssk-bk--v4 .ssk-upsell-group {
    transition: none !important;
    animation: none !important;
  }
}


/* FOCUS FALLBACK — :focus-visible is Safari 15.4+. Without a plain :focus
   rule first, keyboard users on older engines get no visible focus ring
   at all. The @supports block removes the broader ring where the finer
   selector is available. */
.ssk-bk--v4 .ssk-bk__v4next:focus,
.ssk-bk--v4 .ssk-bk__v4back:focus,
.ssk-bk--v4 .ssk-bk__v4summary-btn:focus,
.ssk-bk--v4 .ssk-bk__sheet-close:focus,
.ssk-bk--v4 .ssk-upsell-pill:focus { outline: 3px solid var(--bk-ink); outline-offset: 2px; }
@supports selector(:focus-visible) {
  .ssk-bk--v4 .ssk-bk__v4next:focus,
  .ssk-bk--v4 .ssk-bk__v4back:focus,
  .ssk-bk--v4 .ssk-bk__v4summary-btn:focus,
  .ssk-bk--v4 .ssk-bk__sheet-close:focus,
  .ssk-bk--v4 .ssk-upsell-pill:focus { outline: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Category & service icons (added with the 2026-08 catalogue rebuild)

   Twelve of the fifteen category icons used to resolve to nothing and
   Icons::get() fell back to a question mark, so the booking engine showed
   "?" against Brakes, Engine, Clutch, Suspension and the rest. The icons
   now exist; these rules give them somewhere to sit.

   The point of the icon is that a customer who cannot read the label can
   still tell which part of the car a row is about, so the icon is sized
   for recognition (22px) rather than decoration, and it never shrinks
   below that on mobile.
   ══════════════════════════════════════════════════════════════════════ */

.ssk-svc-filter__icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  vertical-align: -4px;
}
.ssk-svc-filter__icon .ssk-icon { width: 18px; height: 18px; }

.ssk-bk__cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  flex: 0 0 28px;
  color: var(--bk-red, #d6001c);
}
.ssk-bk__cat-icon .ssk-icon { width: 22px; height: 22px; }

.ssk-svc-category summary.ssk-bk__cat-label {
  display: flex;
  align-items: center;
}

.ssk-svc-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-top: 1px;
  color: var(--bk-steel, #5b6472);
  transition: color .15s;
}
.ssk-svc-item__icon .ssk-icon { width: 22px; height: 22px; }
.ssk-svc-item:hover .ssk-svc-item__icon,
.ssk-svc-item.is-selected .ssk-svc-item__icon { color: var(--bk-red, #d6001c); }

/* The icon is the fallback signal for anyone who cannot read the label, so
   it must not be the thing that gets dropped when space is tight. Only the
   filter-pill icons go, and only under 380px, where the pill row would
   otherwise wrap to three lines. */
@media (max-width: 380px) {
  .ssk-svc-filter__icon { display: none; }
}

@media (prefers-contrast: more) {
  .ssk-svc-item__icon { color: currentColor; }
}

/* ── Same-visit extras (step 2) ───────────────────────────────────────
   Sits under the contextual upsell pills. Deliberately a different shape
   from those pills: a pill is a one-line "add this too", an extra carries
   a reason, because the customer has no trigger telling them why wipers
   are relevant to a brake job. Rows, not chips, so the reason has room.
   ──────────────────────────────────────────────────────────────────── */
.ssk-extras{margin-top:14px;padding:14px;border-radius:12px;background:#f6f8fb;border:1px solid #e3e7ee}
.ssk-extras__title{display:block;font-size:14px;font-weight:800;color:#16181d}
.ssk-extras__sub{display:block;font-size:12.5px;color:#5b6472;margin:2px 0 10px}
.ssk-extras__list{display:grid;grid-template-columns:1fr;gap:8px}
.ssk-extras__item{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid #dfe4ec;cursor:pointer;text-align:left;font:inherit;transition:border-color .15s,background .15s}
.ssk-extras__item:hover,.ssk-extras__item:focus-visible{border-color:#d6001c;background:#fff5f6}
.ssk-extras__item:focus-visible{outline:2px solid #d6001c;outline-offset:2px}
.ssk-extras__item.is-added{opacity:.55;pointer-events:none}
.ssk-extras__plus{flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#d6001c;color:#fff;font-weight:800;font-size:15px;line-height:1}
.ssk-extras__body{flex:1 1 auto;min-width:0}
.ssk-extras__name{display:block;font-size:13.5px;font-weight:700;color:#16181d;line-height:1.3}
.ssk-extras__why{display:block;font-size:12px;color:#5b6472;line-height:1.35;margin-top:1px}
.ssk-extras__price{flex:0 0 auto;font-size:13.5px;font-weight:800;color:#16181d;white-space:nowrap}
@media (min-width:760px){.ssk-extras__list{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.ssk-extras__item{transition:none}}
@media (prefers-contrast:more){.ssk-extras__why{color:#3a4250}.ssk-extras__item{border-color:#8b93a1}}
/* At 390px the reason wraps to four lines and each row grows past 180px, so
   four extras become a 600px wall the customer has to scroll past to reach
   the date step. Clamp to two lines; the full sentence stays available in
   the title attribute and the aria-label, so nothing is lost to a screen
   reader or a hover. */
.ssk-extras__why{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Wrapping the price onto its own row made each item taller, not shorter.
   Keep the single row: the button inherits a 16px/24.8px body font, so
   reset the type scale inside it and let the two-line clamp do the work. */
.ssk-extras__item{font-size:13px;line-height:1.35}
@media (max-width:420px){
  .ssk-extras__name{font-size:13px}
  .ssk-extras__why{font-size:11.5px}
  .ssk-extras__price{font-size:13px;color:#d6001c}
}

/* ── Date notice (step 3) ─────────────────────────────────────────────
   Replaces a native alert() on blocked dates and carries the day-capacity
   message. Sized so appearing does not shift the fields below it more than
   its own height. */
.ssk-bk__date-note{margin:8px 0 0;padding:9px 12px;border-radius:8px;font-size:13px;line-height:1.4}
.ssk-bk__date-note.is-warn{background:#fff5f6;border:1px solid #f3c9ce;color:#8d0014}
.ssk-bk__date-note.is-info{background:#f0f4f8;border:1px solid #dfe4ec;color:#3a4250}
@media (prefers-contrast:more){.ssk-bk__date-note.is-warn{color:#6b0010;border-color:#8d0014}}

/* Vehicle/service-aware appointment calendar. The native date input remains
   in the markup as a no-JavaScript fallback. */
.ssk-bk--v4 .ssk-bk__field .ssk-bk__native-date-fallback{position:absolute!important;width:1px!important;min-width:1px!important;max-width:1px!important;height:1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.ssk-bk__price-calendar{border:1px solid #dfe4ec;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(19,29,46,.08);overflow:hidden}
.ssk-bk__cal-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:14px 16px;background:linear-gradient(135deg,#151922,#272d39);color:#fff}
.ssk-bk__cal-head strong{text-align:center;font-size:16px;letter-spacing:.01em}
.ssk-bk__cal-head button{width:36px;height:36px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:17px;cursor:pointer}
.ssk-bk__cal-head button:last-child{justify-self:end}.ssk-bk__cal-head button:disabled{opacity:.28;cursor:not-allowed}
.ssk-bk__cal-weekdays,.ssk-bk__cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ssk-bk__cal-weekdays{padding:10px 10px 4px;color:#657083;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.06em}
.ssk-bk__cal-grid{gap:5px;padding:6px 10px 12px}
.ssk-bk__cal-blank{min-height:58px}
.ssk-bk__cal-day{min-width:0;min-height:62px;border:1px solid #e4e8ef;border-radius:11px;background:#fff;color:#171b23;padding:7px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.ssk-bk__cal-day>span{font-size:14px;font-weight:900}.ssk-bk__cal-day>small{display:block;max-width:100%;font-size:9px;line-height:1.15;color:#596579;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssk-bk__cal-day:hover:not(:disabled){border-color:#d6001c;box-shadow:0 5px 15px rgba(214,0,28,.12);transform:translateY(-1px)}
.ssk-bk__cal-day.is-premium{background:#fff8f0;border-color:#f4d5b2}.ssk-bk__cal-day.is-premium small{color:#9b4b00}
.ssk-bk__cal-day.is-selected{background:#d6001c;border-color:#d6001c;color:#fff;box-shadow:0 7px 18px rgba(214,0,28,.24)}.ssk-bk__cal-day.is-selected small{color:#fff}
.ssk-bk__cal-day:disabled{background:#f5f6f8;color:#a7afbc;border-color:#edf0f4;cursor:not-allowed}.ssk-bk__cal-day:disabled small{color:#a7afbc}
.ssk-bk__cal-legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:10px 14px;border-top:1px solid #edf0f4;background:#fafbfc;color:#657083;font-size:10px}.ssk-bk__cal-legend span{display:inline-flex;align-items:center;gap:5px}.ssk-bk__cal-legend i{width:9px;height:9px;border:1px solid #dfe4ec;border-radius:3px;background:#fff}.ssk-bk__cal-legend i.is-premium{background:#fff0dd;border-color:#f4d5b2}
.ssk-bk__time-slot{display:flex!important;flex-direction:column;align-items:flex-start;gap:2px;min-width:94px}.ssk-bk__time-slot small{font-size:9px;font-weight:700;opacity:.72}.ssk-bk__time-slot.is-premium{border-color:#e7a650;background:#fff9f0}.ssk-bk__time-slot.selected small{opacity:.9}
.ssk-bk__sum-appointment{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #e7ebf1;color:#596579;font-size:12px}.ssk-bk__sum-appointment strong{color:#171b23;text-align:right}
@media(max-width:560px){.ssk-bk__cal-grid{gap:3px;padding-inline:6px}.ssk-bk__cal-weekdays{padding-inline:6px}.ssk-bk__cal-day{min-height:55px;border-radius:8px}.ssk-bk__cal-day>small{font-size:8px}.ssk-bk__cal-legend{gap:7px 12px}}