/**
 * Vivid Nails — booking flow.
 *
 * Uses the theme's own tokens (--vv-*) rather than redeclaring colours, so the
 * panel follows the brand if the palette is ever retuned in the Customizer.
 * Fallbacks are supplied so the plugin still renders sanely under another theme.
 */

.vb {
  --vb-line:    var(--vv-line, rgba(44, 38, 42, .16));
  --vb-ink:     var(--vv-ink, #2C262A);
  --vb-soft:    var(--vv-ink-soft, #574B51);
  --vb-olive:   var(--vv-olive, #585C41);
  --vb-moss:    var(--vv-moss, #95904F);
  --vb-paper:   var(--vv-paper, #EDE8E5);
  --vb-surface: var(--vv-surface, #F8F5F3);
  --vb-radius:  var(--vv-r-lg, .875rem);

  display: grid;
  gap: 28px;
  color: var(--bb-ink, var(--vb-ink));
}
.vb[hidden] { display: none; }

/* ------------------------------------------------------------------- rail */

.vb-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--vb-line);
  list-style: none;
  counter-reset: none;
}
.vb-rail__step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vb-soft);
  opacity: .5;
}
.vb-rail__step[hidden] { display: none; }
.vb-rail__step.is-done { opacity: .85; }
.vb-rail__step.is-current { opacity: 1; color: var(--vb-olive); font-weight: 600; }
.vb-rail__num { font-variant-numeric: tabular-nums; }
.vb-rail__step.is-done .vb-rail__num::after { content: " ✓"; }

/* ------------------------------------------------------------------- body */

.vb-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.vb-pane { display: none; }
.vb-pane.is-active { display: block; }

.vb-pane__title {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
}
.vb-pane__note { margin: 0 0 18px; color: var(--vb-soft); font-size: 14px; }

/* ------------------------------------------------------- providers / rows */

.vb-providers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.vb-card {
  display: grid;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--vb-line);
  border-radius: var(--vb-radius);
  background: var(--vb-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.vb-card__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.vb-card__name { font-weight: 600; }
.vb-card__meta { font-size: 13px; color: var(--vb-soft); line-height: 1.45; }
.vb-pane__hint { margin: 14px 0 0; font-size: 13px; color: var(--vb-soft); }
/* A limit someone has just hit is not a footnote. */
.vb-pane__hint--warn {
  padding: 12px 14px;
  border-radius: 8px;
  background: #fdf3e6;
  border: 1px solid #e0b874;
  color: #7a4e07;
  font-size: 14px;
}
.vb-card[aria-pressed="true"] {
  border-color: var(--vb-olive);
  box-shadow: 0 0 0 1px var(--vb-olive), 0 0 22px -8px var(--vb-moss);
}

.vb-group { margin-top: 22px; }
.vb-group__title {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vb-soft);
}

.vb-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid rgba(44, 38, 42, 0.12);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, padding-left 150ms ease;
}
.vb-row:hover { background: var(--vb-surface); padding-left: 10px; }
.vb-row:focus-visible { outline: 2px solid var(--vb-olive); outline-offset: -2px; }
.vb-row__name  { font-size: 16px; color: var(--vb-ink); }
.vb-row__meta  { font-size: 13px; color: var(--vb-soft); font-variant-numeric: tabular-nums; }
.vb-row__price { font-size: 15px; font-weight: 600; color: var(--vb-ink); font-variant-numeric: tabular-nums; }
.vb-row[aria-pressed="true"] { background: var(--vb-surface); padding-left: 10px; }
.vb-row[aria-pressed="true"] .vb-row__name { font-weight: 600; }

.vb-row--addon,
.vb-row--pick { grid-template-columns: 22px 1fr auto auto; }

/* Add-on groups are nested under the service they belong to, so the indent and
   the lighter rule make the ownership visible rather than implied. */
.vb-group--addons {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 2px solid var(--vb-line);
}
.vb-group--addons .vb-group__title {
  margin-bottom: 2px;
  color: var(--vb-olive);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}
/* The box has to look like something you can tick. --vb-line is 16% ink, which
   composites to about rgb(221,220,221) on white — roughly 1.26:1, effectively
   invisible. WCAG wants 3:1 for a control's boundary, so this uses the olive at
   full strength instead of a tint of the divider colour. */
.vb-row__tick {
  width: 20px; height: 20px;
  border: 2px solid var(--vb-olive);
  border-radius: 5px;
  background: #fff;
  transition: background 150ms ease, border-color 150ms ease;
}
.vb-row:hover .vb-row__tick { border-color: var(--vb-ink); }
.vb-row--addon[aria-pressed="true"] .vb-row__tick,
.vb-row--pick[aria-pressed="true"] .vb-row__tick {
  border-color: var(--vb-olive);
  background: var(--vb-olive);
  position: relative;
}
.vb-row--addon[aria-pressed="true"] .vb-row__tick::after,
.vb-row--pick[aria-pressed="true"] .vb-row__tick::after {
  content: "";
  position: absolute; left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* -------------------------------------------------------------- calendar */

.vb-when {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 40px;
  margin-top: 22px;
  align-items: start;
}

.vb-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vb-cal__month { font-weight: 600; }
.vb-cal__nav {
  width: 34px; height: 34px;
  border: 1px solid var(--vb-line); border-radius: 50%;
  background: none; cursor: pointer; font-size: 17px; line-height: 1;
}
.vb-cal__nav:hover { border-color: var(--vb-olive); }

.vb-cal__dows, .vb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.vb-cal__dow {
  padding: 4px 0; text-align: center;
  font-size: 11px; letter-spacing: .1em; color: var(--vb-soft);
}
.vb-cal__grid.is-loading { opacity: .45; }
.vb-cal__pad { aspect-ratio: 1; }
.vb-cal__day {
  aspect-ratio: 1;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--vb-surface);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 150ms ease, border-color 150ms ease;
}
.vb-cal__day:hover:not(:disabled) { border-color: var(--vb-olive); }
.vb-cal__day:disabled { background: none; color: color-mix(in srgb, var(--vb-soft) 40%, transparent); cursor: not-allowed; }
.vb-cal__day[aria-pressed="true"] { background: var(--vb-olive); color: #fff; border-color: var(--vb-olive); }

.vb-times__head {
  margin: 0 0 14px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vb-soft);
}
/* auto-fill, so a wide column gives four or five across instead of one long
   vertical list — the panel used to sit in a 760px prose container and the
   times had nowhere to go but downwards. */
.vb-times__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.vb-time {
  padding: 12px 10px;
  border: 1px solid var(--vb-line); border-radius: 10px;
  background: var(--vb-surface); cursor: pointer;
  font-size: 14px; font-variant-numeric: tabular-nums;
  text-align: center; white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.vb-time:hover { border-color: var(--vb-olive); }
.vb-time[aria-pressed="true"] { background: var(--vb-olive); border-color: var(--vb-olive); color: #fff; }

/* ------------------------------------------------------------------ form */

.vb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.vb-field { display: grid; gap: 6px; margin: 0; }
.vb-field--wide { grid-column: 1 / -1; }
.vb-field label { font-size: 13px; color: var(--vb-soft); }
.vb-field input, .vb-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--vb-line); border-radius: 8px;
  background: #fff; font: inherit; font-size: 15px;
}
.vb-field input:focus, .vb-field textarea:focus {
  outline: 2px solid var(--vb-olive); outline-offset: 1px; border-color: transparent;
}

/* Off-screen rather than display:none — some bots skip hidden inputs. */
.vb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vb-policy { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--vb-soft); }
.vb-policy p { margin: 0 0 .5em; }
.vb-error {
  grid-column: 1 / -1; margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fdecea; color: #8a1c13;
  font-size: 14px;
}

/* --------------------------------------------------------------- summary */

/* Summary and actions move together, and stick together, so the button is
   always beside the thing it acts on no matter how long the service list is. */
/* A long booking makes the summary card tall enough to push the buttons back
   off-screen — the same bug in a new place. So the column is capped to the
   viewport, the card shrinks and scrolls inside it, and the actions never
   shrink. The button stays reachable whatever is in the basket. */
.vb-side {
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 128px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vb-summary {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.vb-actions { flex: 0 0 auto; }

.vb-summary {
  padding: 20px;
  border: 1px solid var(--vb-line); border-radius: var(--vb-radius);
  background: var(--vb-surface);
}
.vb-summary[hidden] { display: none; }
.vb-summary__title { margin: 0 0 12px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--vb-soft); }
.vb-summary__list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.vb-summary__list dt { color: var(--vb-soft); }
.vb-summary__list dt:not(:first-of-type) { padding-top: 2px; }
.vb-summary__list dd { margin: 0; }
.vb-summary__empty { margin: 0; font-size: 14px; color: var(--vb-soft); }
.vb-summary__total {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--vb-line);
}
.vb-total__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.vb-total__row--deposit { margin-top: 8px; }
.vb-total__label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--vb-soft); }
.vb-total__value { font-size: 20px; font-weight: 600; color: var(--vb-ink); }
/* The deposit is the number that costs money today, so it reads clearly —
   but under the total, not competing with it. */
.vb-total__deposit { font-size: 16px; font-weight: 600; color: var(--vb-olive); }
.vb-total__note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--vb-soft); }

/* --------------------------------------------------------------- actions */

.vb-actions { display: grid; gap: 10px; }
.vb-actions[hidden] { display: none; }
.vb-actions__row { display: flex; gap: 10px; }
/* The theme's .btn carries 27px of side padding plus room for its arrow. In a
   320px column split two ways that leaves under 100px for the label, and even
   "Book now" broke onto two lines. Tighter sides and no wrapping. */
.vb-actions__row .btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding-inline: 14px 34px;
  text-align: center;
  white-space: nowrap;
}
.vb-actions .btn[disabled] { opacity: .45; pointer-events: none; }

/* Why the button beside it will not move. */
.vb-actions__why {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7a4e07;
}
.vb-actions__why[hidden] { display: none; }

/* Deliberately not a button shape — starting over is a way out, not an action
   competing with Continue. */
.vb-reset {
  justify-self: center;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--vb-soft);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.vb-reset:hover { color: var(--vb-ink); }
.vb-reset:focus-visible { outline: 2px solid var(--vb-olive); outline-offset: 2px; border-radius: 3px; }
.vb-reset[hidden] { display: none; }

.vb-live {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ done */

.vb-pane--done { max-width: 56ch; }
.vb-done__title { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); }
.vb-done__lead { margin: 0 0 18px; }
.vb-done__list { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 18px; font-size: 15px; }
.vb-done__list dt { color: var(--vb-soft); }
.vb-done__list dd { margin: 0; }
.vb-done__note { font-size: 14px; color: var(--vb-soft); }

.vb-unavailable {
  padding: 18px;
  border: 1px solid var(--vv-line, rgba(44,38,42,.16));
  border-radius: .875rem;
  background: var(--vv-surface, #F8F5F3);
}

/* ----------------------------------------------------------- responsive */

/* The calendar is a fixed ~340px; below this the times column is left under
   200px, which collapses the slot grid to a single tall column. Stacking gives
   the times the full width and four or five across instead. */
@media (max-width: 1180px) {
  .vb-when { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

@media (max-width: 900px) {
  .vb-body { grid-template-columns: minmax(0, 1fr); }
  /* The column dissolves so its two children can sit on either side of the
     panes: summary above (what you have so far), actions below (what to do
     next). Keeping them together here would put Continue above the thing it
     continues from. */
  .vb-side { display: contents; }
  .vb-summary { position: static; order: -1; max-height: none; overflow: visible; }
  /* Room for the sticky bar to sit over, so the last thing in the pane is not
     permanently half-covered by it. */
  .vb-panes { order: 0; padding-bottom: 8px; }
  .vb-actions {
    order: 1;
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 4px;
    /* Full-bleed so the bar spans the gutter rather than ending mid-air. */
    margin-inline: calc(var(--vb-gutter, 16px) * -1);
    padding: 14px var(--vb-gutter, 16px);
    /* Solid, with a rule along the top. A feathered edge made whatever sat
       behind it look cut off — the summary card in particular read as clipped
       rather than as content behind a bar. An overlay should look like one. */
    background: #fff;
    border-top: 1px solid var(--vb-line);
    box-shadow: 0 -8px 18px -14px rgba(35, 36, 28, .45);
  }
  /* Enough room that the column's last content can clear the bar. */
  .vb-body { padding-bottom: 8px; }
}
@media (max-width: 560px) {
  .vb-form { grid-template-columns: minmax(0, 1fr); }
  .vb-providers { grid-template-columns: minmax(0, 1fr); }
  .vb-times__list { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .vb-rail { gap: 8px 16px; }
  .vb-rail__label { display: none; }
  .vb-rail__step.is-current .vb-rail__label { display: inline; }
  .vb-actions { justify-content: stretch; }
  .vb-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vb-card, .vb-row, .vb-time, .vb-cal__day { transition: none; }
}