/* The booking page in the landing's manner: the mark alone in the top-right corner, one big
   serif line, the nearest free time as the one gold button, the other times as outline pills
   down the page, underlined fields, nothing boxed. Loaded after styles.css and landing.css
   (the tokens, the buttons, the fine print come from there); booking.ts writes the widget. */

.booking-page {
  min-height: 100svh;
  overflow-anchor: auto;
}

.bk-main {
  padding: calc(var(--nav-h) + 5svh) max(var(--gutter), env(safe-area-inset-right)) 8svh
    max(var(--gutter), env(safe-area-inset-left));
}

.bk-wrap {
  display: grid;
  gap: 2rem;
  width: min(100%, 46rem);
  margin-inline: auto;
}

.bk-head {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

.bk-head h1 {
  font-size: clamp(2.6rem, min(6.4vw, 9svh), 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.bk-lead {
  max-width: 34em;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  text-wrap: balance;
}

/* the widget: under a thin gold line, its parts one under another */
.bk {
  display: grid;
  gap: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(220, 184, 103, 0.22);
}

/* the three steps in small spaced capitals, the one in progress in gold (the rail's manner) */
.bk-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
}

.bk-step {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.34);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: default;
  transition: color 0.5s ease;
}

.bk-step.on {
  color: var(--gold-2);
  text-shadow: 0 0 12px rgba(247, 223, 158, 0.35);
}

.bk-step.done {
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.bk-label {
  display: block;
  color: var(--gold-2);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.bk-meta,
.bk-note,
.bk-wait,
.bk-hint {
  color: var(--ink-faint);
  font-size: 0.86rem;
  line-height: 1.5;
}

.bk-hint a {
  color: var(--gold-2);
}

/* the nearest free time: the one gold button, the day and the hour in the serif */
.bk-times {
  display: grid;
  gap: 2rem;
}

.bk-next {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
}

.bk-next-btn {
  max-width: 100%;
  padding: 0.75rem 1.7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
}

/* the other times: a day in the serif, its hours as outline pills */
.bk-days,
.bk-more {
  display: grid;
  gap: 1.3rem;
}

.bk-day {
  display: grid;
  gap: 0.55rem;
}

.bk-day-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.bk-day-label::first-letter {
  text-transform: uppercase;
}

.bk-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bk-slot {
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(220, 184, 103, 0.38);
  border-radius: 999px;
  background: none;
  color: var(--gold-1);
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    border-color 0.4s ease,
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.bk-slot:hover,
.bk-slot.on {
  border-color: rgba(247, 223, 158, 0.85);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 18px -6px rgba(247, 223, 158, 0.5);
}

.bk-slot:focus-visible {
  outline: 1px solid var(--gold-2);
  outline-offset: 2px;
}

.bk-unfold {
  min-width: 0;
  justify-self: start;
  padding: 0.6rem 1.3rem;
  font-size: 0.9rem;
}

/* the details: the chosen time above, underlined fields, the consent, one gold button */
.bk-form {
  display: grid;
  gap: 1.3rem;
}

.bk-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(220, 184, 103, 0.22);
}

.bk-when {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.1;
}

.bk-when::first-letter {
  text-transform: uppercase;
}

.bk-change {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-2);
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.bk-row {
  display: grid;
  gap: 1rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.bk-field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.bk-field label {
  color: var(--ink-faint);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.bk-req {
  color: var(--gold-2);
}

.bk-input {
  width: 100%;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid rgba(243, 236, 223, 0.24);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  outline: none;
  transition: border-color 0.4s ease;
}

.bk-input:focus {
  border-bottom-color: var(--gold-2);
}

.bk-textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.bk-select option {
  background: #14120f;
}

.bk-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.8rem;
  align-items: start;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.bk-check {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--gold-2);
}

.bk-clause {
  grid-column: 2;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.5;
}

.bk-clause ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.bk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  padding-top: 0.4rem;
}

/* the meeting's language: two outline pills, the chosen one filled with a little glass */
.bk-lang {
  gap: 0.5rem;
}

.bk-label-plain {
  color: var(--ink-faint);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.bk-seg {
  display: inline-flex;
  gap: 0.4rem;
}

.bk-seg-btn {
  min-width: 3.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(220, 184, 103, 0.38);
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition:
    border-color 0.4s ease,
    background 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

.bk-seg-btn:hover {
  border-color: rgba(247, 223, 158, 0.6);
}

.bk-seg-btn[aria-pressed="true"] {
  border-color: rgba(247, 223, 158, 0.85);
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-1);
  box-shadow: 0 0 18px -6px rgba(247, 223, 158, 0.5);
}

.bk-seg-btn:focus-visible {
  outline: 1px solid var(--gold-2);
  outline-offset: 2px;
}

/* done: a ring with a tick, the time in the serif, the link */
.bk-done {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

.bk-done-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(220, 184, 103, 0.5);
  border-radius: 50%;
  color: var(--gold-1);
}

.bk-done-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.bk-done-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
}

.bk-closed {
  color: var(--ink-soft);
}

.booking-page .alert {
  max-width: 40rem;
}

/* the way back: a small spaced line with a chevron in the top-left corner, opposite the mark */
.booking-page .back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.2rem;
  color: var(--gold-2);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.4s ease,
    text-shadow 0.4s ease;
}

.booking-page .back svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 1.6;
  transition: transform 0.5s var(--ease);
}

.booking-page .back:hover,
.booking-page .back:focus-visible {
  color: var(--gold-1);
  text-shadow: 0 0 12px rgba(247, 223, 158, 0.35);
  outline: none;
}

.booking-page .back:hover svg,
.booking-page .back:focus-visible svg {
  transform: translateX(-0.2rem);
}

/* the fine print sits at the foot of the page, always shown, in the same words as the landing */
.booking-page .fine {
  position: static;
  margin-top: 4svh;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #0b0a09;
}

/* on a phone everything stands in the middle */
@media (max-width: 640px) {
  .bk-head,
  .bk-next,
  .bk-days,
  .bk-day,
  .bk-done {
    justify-items: center;
    text-align: center;
  }

  .bk-steps,
  .bk-slots,
  .bk-summary,
  .bk-actions {
    justify-content: center;
    text-align: center;
  }

  .bk-next-btn {
    text-align: center;
  }

  .bk-unfold {
    justify-self: center;
  }

  .bk-field {
    justify-items: center;
    text-align: center;
  }

  .bk-input {
    text-align: center;
  }

  .bk-consent {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .bk-clause {
    grid-column: 1;
  }

  .bk-lead {
    margin-inline: auto;
  }
}