/* ============================================================
   Prime Shine — quote-visit wizard. Loads after page.css, on /book/ only.
   Mobile first: every rule here is written for a phone held in one hand,
   and widened at the breakpoints, not the other way round.
   ============================================================ */

.wiz { max-width: 720px; margin: 0 auto; }

/* ---- Progress ---- */
.wiz-head { margin-bottom: 1.6rem; }
#wiz-bar {
  height: 4px; border-radius: 2px; background: var(--surface-rule);
  overflow: hidden; margin: .85rem 0 .6rem;
}
#wiz-bar::after {
  content: ""; display: block; height: 100%; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--ps-blue), var(--ps-water));
  transition: width .32s cubic-bezier(.4,0,.2,1);
}
#wiz-progress {
  font-family: var(--cb-font-heading_family); font-variant-numeric: tabular-nums;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
#wiz-stepper { display: none; }
@media (min-width: 780px) {
  #wiz-stepper {
    display: flex; list-style: none; padding: 0; margin: 0 0 .3rem; gap: .35rem;
    font-size: .74rem; color: var(--text-muted); flex-wrap: wrap;
  }
  #wiz-stepper li { display: flex; align-items: center; gap: .4rem; padding-right: .6rem; }
  #wiz-stepper li span {
    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    font-size: .68rem; font-weight: 700; background: var(--surface-rule); color: var(--text-muted);
  }
  #wiz-stepper li[data-state="current"] { color: var(--ps-navy); font-weight: 600; }
  #wiz-stepper li[data-state="current"] span { background: var(--ps-blue); color: #fff; }
  #wiz-stepper li[data-state="done"] span { background: var(--ps-green-ink); color: #fff; }
}

/* ---- Body ---- */
#wiz-body { outline: none; }
#wiz-body:focus-visible { outline: none; }
.wiz-q { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); letter-spacing: -0.025em; margin: 0 0 .5rem; }
.wiz-sub { font-size: 1.02rem; font-weight: 700; padding: 0; margin-bottom: .3rem; color: var(--ps-navy); }
.wiz-hint { color: var(--text-muted); font-size: var(--cb-type-scale-small); margin: 0 0 1.2rem; display: block; }
.wiz-fs { border: 0; padding: 0; margin: 0 0 1.8rem; min-inline-size: 0; }
.wiz-field { margin-bottom: 1.35rem; }
.wiz-lab { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .45rem; color: var(--ps-navy); }
.wiz-lab .wiz-opt, .wiz-opt { font-weight: 400; color: var(--text-muted); font-size: .82rem; }
.wiz-in {
  width: 100%; font: inherit; font-size: 1rem;      /* 16px stops iOS zooming on focus */
  padding: .85rem 1rem; min-height: 50px;
  border: 1px solid var(--surface-rule); border-radius: var(--cb-radius-input, 10px);
  background: #fff; color: var(--ps-navy);
}
.wiz-in:focus-visible { outline: 3px solid var(--ps-blue); outline-offset: 1px; border-color: var(--ps-blue); }
.wiz-in--pc { text-transform: uppercase; max-width: 12rem; }
textarea.wiz-in { min-height: 90px; resize: vertical; }

/* ---- Big tappable service cards ---- */
.pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
@media (min-width: 620px) { .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick__i {
  position: relative; display: block; cursor: pointer; min-width: 0; max-width: 100%;
  padding: 1rem 1rem 1rem 3.1rem; min-height: 64px;
  border: 1.5px solid var(--surface-rule); border-radius: var(--cb-radius-card, 12px);
  background: #fff; transition: border-color .15s, background .15s;
}
.pick__i:hover { border-color: var(--ps-water); }
.pick__i.is-on { border-color: var(--ps-blue); background: var(--surface-alt); }
.pick__i input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick__i::before {
  content: ""; position: absolute; left: 1rem; top: 1.05rem;
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--surface-rule); background: #fff;
}
.pick__i.is-on::before {
  border-color: var(--ps-blue); background: var(--ps-blue) center / 14px no-repeat
    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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.pick__i:has(input:focus-visible) { outline: 3px solid var(--ps-blue); outline-offset: -3px; }
.pick__i.is-on:has(input:focus-visible) { outline-color: #fff; }
.pick__t { display: block; overflow-wrap: anywhere; font-weight: 650; color: var(--ps-navy); }
.pick__d { display: block; overflow-wrap: anywhere; font-size: .84rem; color: var(--text-muted); margin-top: .15rem; }

/* ---- Chips (single choice) ---- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font: inherit; font-size: .93rem; cursor: pointer; max-width: 100%; overflow-wrap: anywhere;
  padding: .62rem 1.05rem; min-height: 46px;
  border: 1.5px solid var(--surface-rule); border-radius: 999px;
  background: #fff; color: var(--text-muted);
}
.chip:hover { border-color: var(--ps-water); }
.chip.is-on { background: var(--ps-navy); border-color: var(--ps-navy); color: #fff; font-weight: 600; }
.chip:focus-visible { outline: 3px solid var(--ps-blue); outline-offset: 2px; }

/* ---- Calendar ---- */
.cal { border: 1px solid var(--surface-rule); border-radius: var(--cb-radius-card, 12px); padding: .9rem; margin-bottom: 1.4rem; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.cal__head strong { font-size: 1rem; }
.cal__nav {
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer; font-size: 1.1rem;
  border: 1px solid var(--surface-rule); background: #fff; color: var(--ps-navy);
}
.cal__nav[disabled] { opacity: .35; cursor: not-allowed; }
.cal__nav:focus-visible { outline: 3px solid var(--ps-blue); outline-offset: 2px; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow span { text-align: center; font-size: .7rem; color: var(--text-muted); padding-bottom: .3rem; }
.cal__pad { aspect-ratio: 1; }
.cal__d {
  aspect-ratio: 1; min-height: 40px; font: inherit;
  font-variant-numeric: tabular-nums; font-size: .92rem; cursor: pointer;
  border: 1px solid transparent; border-radius: 9px; background: var(--surface-alt); color: var(--ps-navy);
}
.cal__d:hover:not([disabled]) { border-color: var(--ps-blue); }
.cal__d.is-off { background: transparent; color: #B6BFCC; cursor: not-allowed; text-decoration: line-through; }
.cal__d.is-sel { background: var(--ps-navy); color: #fff; font-weight: 700; }
.cal__d:focus-visible { outline: 3px solid var(--ps-blue); outline-offset: 2px; }
.slots { margin-bottom: 1rem; }

/* ---- Skeleton, an honest loading state rather than a spinner ---- */
.skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; margin: 1rem 0; }
.skel span {
  height: 46px; border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-alt) 25%, #E8F4FA 50%, var(--surface-alt) 75%);
  background-size: 200% 100%;
}
.io .skel span { animation: skel 1.3s ease-in-out infinite; }
.io .skel span:nth-child(2) { animation-delay: .1s } .io .skel span:nth-child(3) { animation-delay: .2s }
.io .skel span:nth-child(4) { animation-delay: .3s } .io .skel span:nth-child(5) { animation-delay: .4s }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .io .skel span { animation: none; } }

/* ---- Photos ---- */
.drop {
  border: 2px dashed var(--surface-rule); border-radius: var(--cb-radius-card, 12px);
  padding: 1.8rem 1rem; text-align: center; background: var(--surface-alt);
}
.drop.is-over { border-color: var(--ps-blue); background: #E8F4FA; }
.thumbs { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--surface-rule); background: var(--surface-alt); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb[data-pending] img { opacity: .55; }
.thumb__bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 2px; background: rgba(5,37,90,.2); }
.thumb__bar i { display: block; height: 100%; border-radius: 2px; background: var(--ps-blue); transition: width .2s; }
.thumb__err { position: absolute; inset: auto 0 0 0; background: #A3342A; color: #fff; font-size: .64rem; padding: .25rem .35rem; }
.thumb__x {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(5,37,90,.82); color: #fff; font-size: 1.05rem; line-height: 1;
}
.thumb__x:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }

/* ---- Review + consent ---- */
.review { background: var(--surface-alt); border-radius: var(--cb-radius-card, 12px); padding: 1.1rem 1.2rem; margin: 1.6rem 0; }
.review h3 { margin: 0 0 .7rem; font-size: 1rem; }
.review dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: .45rem .8rem; margin: 0; font-size: .92rem; }
.review dt { color: var(--text-muted); }
.review dd { margin: 0; color: var(--ps-navy); font-weight: 500; }
@media (max-width: 460px) { .review dl { grid-template-columns: 1fr; gap: .1rem .8rem; } .review dt { margin-top: .5rem; } }

.wiz-consent { display: grid; gap: .85rem; margin: 1.4rem 0; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--text-muted); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ps-blue); }
.check a { color: var(--ps-blue); }

/* Honeypot: off-screen rather than display:none, so a bot filling everything
   still trips it, and labelled in case a screen reader lands on it. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Errors and alerts ---- */
.wiz-err {
  color: #8E2A20; background: #FDF2F0; border: 1px solid #F2CFC9;
  border-radius: 9px; padding: .7rem .9rem; margin: .9rem 0 0; font-size: .92rem; font-weight: 500;
}
.wiz-alert { background: var(--surface-alt); border-left: 3px solid var(--ps-blue); border-radius: 8px; padding: 1rem 1.1rem; margin: 0 0 1.4rem; }
.wiz-alert--bad { background: #FDF2F0; border-left-color: #A3342A; }
.wiz-alert p { margin: 0 0 .6rem; }
.wiz-alert p:last-child { margin-bottom: 0; }

/* ---- Nav buttons. On mobile they sit in the sticky bar so the primary
   action is always under a thumb. ---- */
.wiz-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .85rem; margin-top: 2rem; }
.wiz-nav .btn { width: 100%; min-width: 0; margin: 0; padding-inline: .75rem; white-space: normal; overflow-wrap: anywhere; }
.wiz-nav .btn:hover { transform: none; }
@media (max-width: 860px) {
  .wiz-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; margin: 0;
    padding: .6rem .75rem; padding-bottom: max(.6rem, env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--surface-rule);
  }
  .wiz-nav .btn { min-height: 52px; }
  body.has-wizard { padding-bottom: 84px; }
  body.has-wizard .actionbar { display: none; }   /* one sticky bar, not two */
}

/* ---- Confirmation ---- */
.done { text-align: left; }
.done__tick {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #E7F5EC; color: var(--ps-green-ink); margin-bottom: 1.1rem;
}
.done__tick svg { width: 28px; height: 28px; }
.done h2 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.3rem); margin: 0 0 .6rem; letter-spacing: -0.03em; }
.done__lead { font-size: 1.08rem; color: var(--text-muted); margin: 0 0 1.6rem; }
.done__d { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem .9rem; margin: 0 0 1.8rem; padding: 1.1rem 1.2rem; background: var(--surface-alt); border-radius: var(--cb-radius-card, 12px); font-size: .95rem; }
.done__d dt { color: var(--text-muted); }
.done__d dd { margin: 0; }
@media (max-width: 460px) { .done__d { grid-template-columns: 1fr; gap: .1rem; } .done__d dt { margin-top: .55rem; } }
.done h3 { font-size: 1rem; margin: 0 0 .7rem; }
.done__next { margin: 0 0 1.8rem; padding-left: 1.2rem; color: var(--text-muted); display: grid; gap: .45rem; }

/* ---- No-JS fallback. The wizard needs JS; the enquiry form does not. ---- */
.nojs-form { display: block; }
.booking-ready .nojs-form { display: none; }
html:not(.booking-ready) :is(#wizard, #wiz-bar, #wiz-progress, #wiz-stepper) { display: none; }
html:not(.booking-ready) body.has-wizard { padding-bottom: 0; }
.no-js-note { display: none; }

/* ---- Fixes found in QA, 12 Aug 2026 ---- */

/* The sticky nav was covering the top of whatever we scrolled to, so the
   confirmation tick and the top of each step landed underneath it. */
#wiz-body, .done, .wiz { scroll-margin-top: 90px; }

/* The kit resets list-style on ol, which left "What happens next" as three
   unnumbered lines when the whole point is that it is a sequence. */
.done__next { list-style: decimal; }
.done__next li { padding-left: .2rem; }
.done__next li::marker { color: var(--ps-blue); font-weight: 700; }

/* Same iOS clearance problem as the homepage action bar: env(safe-area-inset-
   bottom) is 0 on an iPhone in portrait when Safari's URL bar is at the
   bottom, because browser chrome is not a safe-area inset. Without a real
   margin the Continue button ends up jammed against Safari's toolbar, and
   this is the primary control of the whole booking flow. Full width is right
   here, unlike the homepage bar, because it is a form action rather than a
   floating prompt. */
@media (max-width: 860px) {
  .wiz-nav {
    padding-bottom: calc(1.15rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(5, 37, 90, .08);
  }
  body.has-wizard { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

/* A photo restored from sessionStorage has a server id but no blob preview,
   because blob: URLs die with the document. Show that it is attached rather
   than a broken image. */
.thumb--done {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; text-align: center; padding: .6rem;
  background: var(--surface-alt); color: var(--text-muted);
}
.thumb__ok { font-size: 1.4rem; line-height: 1; color: var(--ps-green-ink); }
.thumb__lab { font-size: .74rem; line-height: 1.25; }

/* The wizard injects step 1 into an empty #wiz-body after booking.js parses,
   so the footer painted first and was then shoved down the page: measured CLS
   0.218 on /book/ arriving from the homepage. Reserving roughly a step's worth
   of height means the layout lands once. Only a floor, so a taller step still
   grows normally, and it is dropped the moment real content is in. */
#wiz-body:empty { min-height: 60vh; }
@media (min-width: 861px) { #wiz-body:empty { min-height: 420px; } }

@media (forced-colors: active) {
  .pick__i::before { display: none; }
  .pick__i input { opacity: 1; width: 22px; height: 22px; left: 1rem; top: 1.05rem; }
  .pick__i:has(input:focus-visible), .pick__i.is-on:has(input:focus-visible) { outline-color: Highlight; }
  .chip.is-on, .cal__d.is-sel { border: 3px solid Highlight; }
}