/* The booking wizard. Loaded only on book.php and confirm.php. */

@layer components {

  /* ------------------------------------------------------------ shell */

  .wiz {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 62rem) {
    .wiz { grid-template-columns: minmax(0, 1fr) 21rem; }
  }

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

  .rail {
    display: flex;
    gap: .35rem;
    margin-block-end: clamp(1.6rem, 4vw, 2.6rem);
    counter-reset: rail;
  }
  .rail__step {
    flex: 1;
    display: grid;
    gap: .55rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
    color: var(--cream-3);
    font: inherit;
    cursor: default;
  }
  .rail__step::before {
    content: "";
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--line);
    transition: background-color .4s var(--ease);
  }
  .rail__step span {
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .3s var(--ease);
  }
  .rail__step[data-done]      { cursor: pointer; color: var(--cream-2); }
  .rail__step[data-done]::before { background: color-mix(in srgb, var(--gold) 55%, var(--line)); }
  .rail__step[data-done]:hover span { color: var(--gold-lit); }
  .rail__step[aria-current="step"] { color: var(--gold-lit); }
  .rail__step[aria-current="step"]::before { background: var(--gold-face); }

  @media (max-width: 40rem) {
    .rail__step span { font-size: .62rem; letter-spacing: .06em; }
  }

  /* ------------------------------------------------------------ panels */

  .wiz__panel { animation: panel-in .45s var(--ease) both; }
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wiz__panel { animation: none; }
  }

  .wiz__heading { margin-block-end: 1.6rem; }
  .wiz__heading h2 { font-family: var(--serif); font-weight: 400; font-size: var(--t-3); line-height: 1.1; }
  .wiz__heading p  { margin-block-start: .5rem; color: var(--cream-3); text-wrap: pretty; }

  .wiz__nav {
    display: flex;
    gap: .8rem;
    align-items: center;
    margin-block-start: 2rem;
  }
  .wiz__nav .btn--back { margin-inline-end: auto; }

  /* ------------------------------------------------------------ choices */

  .choices { display: grid; gap: .7rem; }
  .choices--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

  .choice {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--ink-600);
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .2s var(--ease);
  }
  .choice:hover { border-color: color-mix(in srgb, var(--accent, var(--gold)) 55%, var(--line)); background: var(--ink-500); }
  .choice:active { transform: scale(.995); }

  .choice[aria-pressed="true"],
  .choice[data-selected] {
    border-color: var(--accent, var(--gold));
    background: color-mix(in srgb, var(--accent, var(--gold)) 12%, var(--ink-600));
  }
  .choice[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: -1px;
    width: 3px;
    height: calc(100% + 2px);
    border-radius: 3px 0 0 3px;
    background: var(--accent, var(--gold));
  }

  .choice[disabled] {
    opacity: .42;
    cursor: not-allowed;
    background: var(--ink-700);
  }
  .choice[disabled]:hover { border-color: var(--line); background: var(--ink-700); transform: none; }

  .choice__thumb {
    width: 3.6rem;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--ink-500);
  }
  .choice__thumb--round { border-radius: 50%; }

  .choice__body { min-width: 0; }
  /* These are spans inside buttons, so they need an explicit block. */
  .choice__name { display: block; font-family: var(--serif); font-size: var(--t-1); font-weight: 500; line-height: 1.2; }
  .choice__meta { display: block; margin-block-start: .2rem; font-size: var(--t--1); color: var(--cream-3); text-wrap: pretty; }
  .choice__meta em { font-style: normal; color: var(--warn); }

  .choice__price { text-align: end; white-space: nowrap; }
  .choice__price b { display: block; font-family: var(--serif); font-size: var(--t-1); font-weight: 500; }
  .choice__price small { font-size: var(--t--1); color: var(--cream-3); }

  .choice__initial {
    display: grid;
    place-items: center;
    width: 3.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gold) 15%, var(--ink-500));
    font-family: var(--serif);
    font-size: var(--t-2);
    color: var(--gold-lit);
  }

  /* The recommended "anyone who is free" option, given real weight. */
  .choice--feature {
    grid-template-columns: auto 1fr;
    padding: 1.15rem 1.2rem;
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 11%, var(--ink-600)), var(--ink-600));
  }
  .choice--feature .choice__name { font-size: var(--t-2); }
  .choice--feature .choice__initial { color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); }

  /* ---------------------------------------------- duration chips (step 1) */

  .choice__durations {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-block-start: .35rem;
    padding-block-start: .85rem;
    border-block-start: 1px solid var(--line);
  }
  .dur {
    display: inline-flex;
    align-items: baseline;
    gap: .45em;
    padding: .5em 1em;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--ink-800);
    color: var(--cream-2);
    font-size: var(--t--1);
    cursor: pointer;
    transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
  }
  .dur b { font-family: var(--serif); font-size: var(--t-0); font-weight: 500; color: var(--cream); }
  .dur em { font-style: normal; font-size: .8em; color: var(--gold); }
  .dur:hover { border-color: var(--accent, var(--gold)); }
  .dur[aria-pressed="true"] {
    border-color: transparent;
    background: var(--gold-face);
    color: #17110A;
  }
  .dur[aria-pressed="true"] b,
  .dur[aria-pressed="true"] em { color: #17110A; }

  /* ------------------------------------------------------------ dates */

  .datestrip {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-block-end: .6rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .datestrip::-webkit-scrollbar { height: 6px; }
  .datestrip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

  .daybtn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: grid;
    justify-items: center;
    gap: .1rem;
    min-width: 4rem;
    padding: .7rem .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--ink-600);
    color: var(--cream-2);
    cursor: pointer;
    transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
  }
  .daybtn small { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3); }
  .daybtn b { font-family: var(--serif); font-size: var(--t-2); font-weight: 500; line-height: 1.05; }
  .daybtn i { font-style: normal; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }
  .daybtn:hover:not([disabled]) { border-color: var(--gold); background: var(--ink-500); }
  .daybtn[aria-pressed="true"] {
    border-color: transparent;
    background: var(--gold-face);
    color: #17110A;
  }
  .daybtn[aria-pressed="true"] small,
  .daybtn[aria-pressed="true"] i { color: #4A3A10; }
  .daybtn[disabled] { opacity: .3; cursor: not-allowed; }
  .daybtn[data-today] small { color: var(--gold); }
  .daybtn[aria-pressed="true"][data-today] small { color: #4A3A10; }

  /* ------------------------------------------------------------ times */

  .slotgroup + .slotgroup { margin-block-start: 1.6rem; }
  .slotgroup h3 {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-block-end: .8rem;
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .slotgroup h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .slotgroup h3 em {
    font-style: normal;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--cream-3);
  }

  .slots { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }
  .slot {
    padding: .75rem .4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--ink-600);
    color: var(--cream);
    font-family: var(--serif);
    font-size: var(--t-1);
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  }
  .slot:hover { border-color: var(--gold); background: var(--ink-500); transform: translateY(-1px); }
  .slot[aria-pressed="true"] {
    border-color: transparent;
    background: var(--gold-face);
    color: #17110A;
  }

  .slots-empty {
    padding: 2rem 1.2rem;
    border: 1px dashed var(--line);
    border-radius: var(--r);
    text-align: center;
    color: var(--cream-3);
  }

  .slots-loading { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }
  .slots-loading span {
    height: 3rem;
    border-radius: var(--r-sm);
    background: linear-gradient(100deg, var(--ink-600) 30%, var(--ink-500) 50%, var(--ink-600) 70%);
    background-size: 240% 100%;
    animation: shimmer 1.3s linear infinite;
  }
  @keyframes shimmer { to { background-position: -240% 0; } }

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

  .summary {
    position: sticky;
    top: 6.2rem;
    padding: 1.35rem 1.4rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--ink-600);
  }
  .summary::before {
    content: "";
    display: block;
    height: 2px;
    margin: -1.35rem -1.4rem 1.2rem;
    border-radius: var(--r) var(--r) 0 0;
    background: linear-gradient(90deg, var(--accent, var(--gold)), transparent 80%);
  }
  .summary h2 {
    margin-block-end: 1rem;
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .summary__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem 1rem;
    padding-block: .7rem;
    border-block-start: 1px solid var(--line-soft);
  }
  .summary__row:first-of-type { border-block-start: 0; padding-block-start: 0; }
  .summary__row dt { font-size: var(--t--1); color: var(--cream-3); }
  .summary__row dd { margin: 0; grid-column: 1; font-size: var(--t-0); color: var(--cream); }
  .summary__row button {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gold);
    font-size: var(--t--1);
    cursor: pointer;
  }
  .summary__row button:hover { text-decoration: underline; }
  .summary__row[data-empty] dd { color: var(--cream-3); font-style: italic; }

  .summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-block-start: 1.1rem;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--line);
  }
  .summary__total span { font-size: var(--t--1); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-3); }
  .summary__total b { font-family: var(--serif); font-size: var(--t-3); font-weight: 500; }

  .summary__note { margin-block-start: .9rem; font-size: var(--t--1); color: var(--cream-3); text-wrap: pretty; }

  .hold-timer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-block-start: 1rem;
    padding: .6rem .8rem;
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    font-size: var(--t--1);
    color: var(--gold-lit);
  }
  .hold-timer svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

  /* On a phone the summary becomes a bar pinned above the quick-action bar. */
  @media (max-width: 61.999rem) {
    .summary {
      position: fixed;
      /* `top` is still set by the desktop rule; with a definite height an
         over-constrained box keeps `top` and drops `bottom`. */
      inset-block-start: auto;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: 45;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      border-block-end: 0;
      padding-block-end: max(1rem, env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--ink-600) 96%, transparent);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-sheet);
      /* Collapsed height is set directly rather than derived from a
         translate of 100% — padding and the safe-area inset made that
         arithmetic leak extra rows into view. */
      max-height: var(--peek, 4.9rem);
      overflow: hidden;
      transition: max-height .4s var(--ease);
    }
    .summary[data-open] {
      max-height: min(80svh, 34rem);
      overflow-y: auto;
    }
    .summary::before { margin-block-start: -1.35rem; }
    .summary__handle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      min-height: 2.6rem;
      margin: -.4rem 0 .9rem;
      padding: .3rem 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      cursor: pointer;
    }
    .summary__handle b { font-family: var(--serif); font-size: var(--t-2); font-weight: 500; }
    .summary__handle span { font-size: var(--t--1); color: var(--cream-3); }
    .summary__handle svg { width: 1.1rem; height: 1.1rem; color: var(--gold); transition: transform .35s var(--ease); }
    .summary[data-open] .summary__handle svg { transform: rotate(180deg); }
    .quickbar { display: none; }
    /* room for the pinned bar */
    .wiz { padding-block-end: 5.5rem; }
  }
  @media (min-width: 62rem) {
    .summary__handle { display: none; }
  }

  /* ------------------------------------------------------------ success */

  .done { max-width: 40rem; margin-inline: auto; text-align: center; }
  .done__tick {
    display: grid;
    place-items: center;
    width: 5rem; height: 5rem;
    margin: 0 auto 1.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--good) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--good) 50%, transparent);
    color: var(--good);
    animation: pop .5s var(--ease) both;
  }
  .done__tick svg { width: 2.2rem; height: 2.2rem; stroke-width: 2; }
  @keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

  .done__ref {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin-block-start: 1.4rem;
    padding: .55em 1.2em;
    border: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent);
    border-radius: var(--r-pill);
    font-family: var(--serif);
    font-size: var(--t-2);
    letter-spacing: .1em;
    color: var(--gold-lit);
  }

  .done__card {
    margin-block-start: 2rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--ink-600);
    text-align: start;
  }
  .done__card dl { display: grid; grid-template-columns: auto 1fr; gap: .75rem 1.5rem; }
  .done__card dt { font-size: var(--t--1); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3); }
  .done__card dd { margin: 0; color: var(--cream); }

  .done__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: center;
    margin-block-start: 1.8rem;
  }
}