/* Booking a consultation (views/layouts/booking.php, modules/consultations/views/book-*.php), after the drberan
   consultations site: the logo on white, the steps in a cream strip under it, then the page on cream with the
   hexagons at the top right, each step in a white panel. One column, at most --text-w wide. */

body:has(.book-top) {
  background-color: var(--c-ground);
}

/* --- The top: logo, and "Consultations" at the right --- */
.book-top {
  background-color: var(--c-page);
  border-bottom: var(--border-1) solid var(--c-line);
}

.book-top__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}

.book-top__home {
  display: inline-flex;
  height: var(--logo-h);
  color: var(--c-heading);
}

.book-top__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

/* --- The steps: numbered dots, ticked when done; the labels show from 768px (on phones only the current one).
   The done steps that can be gone back to are buttons. --- */
.book-steps {
  background-color: var(--c-page);
  border-bottom: var(--border-1) solid var(--c-line);
}

.book-steps__list {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
}

.book-steps__step {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.book-steps__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
}

.book-steps__item--go:hover .book-steps__label {
  text-decoration: underline;
}

.book-steps__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
  font-size: var(--fs-small);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
  background-color: var(--c-page);
}

.book-steps__step--done .book-steps__dot {
  color: var(--c-page);
  background-color: var(--c-tick);
  border-color: var(--c-tick);
}

.book-steps__step[aria-current="step"] {
  font-weight: 600;
  color: var(--c-text);
}

.book-steps__step[aria-current="step"] .book-steps__dot {
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
  border-color: var(--c-menu-button);
}

.book-steps__label {
  display: none;
}

.book-steps__step[aria-current="step"] .book-steps__label {
  display: inline;
}

@media (min-width: 768px) {
  .book-steps__label {
    display: inline;
  }
}

/* --- The page --- */
.book {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the column never grows past the container for wide content */
  gap: var(--sp-6);
  justify-items: center;
  padding-block: var(--sp-8) var(--sp-16);
}

.book > * {
  width: 100%;
  max-width: var(--text-w);
}

.book__hex {
  inset: 0 0 auto auto;
  z-index: -1;
  width: 100%;
  max-width: none;
  height: var(--sp-24);
  --hex-fade: radial-gradient(70% 100% at 100% 0, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.book__head {
  display: grid;
  gap: var(--sp-2);
}

.book__title {
  font-size: var(--fs-h2);
}

.book__lead {
  color: var(--c-text-muted);
}

.book__panel {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-4);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

@media (min-width: 576px) {
  .book__panel {
    padding-inline: var(--sp-8);
  }
}

.book__form {
  display: grid;
  gap: var(--sp-5);
}

.book__form .button {
  justify-self: start;
}

.book__pair {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 576px) {
  .book__pair {
    grid-template-columns: 1fr 1fr;
  }
}

.book__small {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.book__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.book__link {
  padding: 0;
  font: inherit;
  color: var(--c-action);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.book__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Step 1: the kinds of consultation */
.book__types {
  display: grid;
  gap: var(--sp-4);
}

.book__type .button {
  justify-self: start;
}

.book__type-name {
  font-size: var(--fs-h4);
}

.book__type-length {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--c-heading);
}

.book__ticks {
  display: grid;
  gap: var(--sp-2);
  color: var(--c-text-muted);
}

.book__ticks .bi {
  color: var(--c-tick);
}

/* Step 2: the consent tick box, and the code */
.book__tick {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
}

.book__tick input {
  width: var(--sp-5);
  height: var(--sp-5);
  margin-top: var(--sp-1);
  accent-color: var(--c-menu-button);
}

.book__tick .field__error {
  grid-column: 2;
}

.book__code {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-caps);
}

/* Step 3: questions, each answer a pill (a radio or tick box with its words beside it) */
.book__secure {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.book__ask {
  display: grid;
  gap: var(--sp-3);
  padding: 0;
  margin: 0;
  border: 0;
}

.book__question {
  display: grid;
  gap: var(--sp-1);
  padding: 0;
  margin-bottom: var(--sp-3);
  font-weight: 600;
}

.book__hint {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-text-muted);
}

.book__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.book__pill {
  position: relative;
  display: inline-flex;
}

.book__pill input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.book__pill span {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
  background-color: var(--c-page);
  cursor: pointer;
}

.book__pill input:checked + span {
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border-color: var(--c-menu-button);
}

.book__pill input:focus-visible + span {
  box-shadow: var(--focus-ring);
}

.book__pill input[aria-invalid="true"] + span {
  border-color: var(--c-error);
}

.book__pill--time span {
  font-variant-numeric: tabular-nums;
}

.book__more {
  display: grid;
  gap: var(--sp-2);
}

.book__rows {
  display: grid;
}

.book__row {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-line);
}

@media (min-width: 576px) {
  .book__row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.book__row-name {
  font-size: var(--fs-small);
}

.book__scale {
  display: flex;
  gap: var(--sp-1);
}

.book__pill--score span {
  display: grid;
  place-items: center;
  width: var(--sp-10);
  padding: var(--sp-2) 0;
}

/* The full questionnaire (paid): the parts as a row of links, a tick on each saved one */
.book__parts-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.book__part {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-text);
  text-decoration: none;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
}

.book__part--saved .bi {
  color: var(--c-tick);
}

.book__part[aria-current="step"] {
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
  border-color: var(--c-menu-button);
}

.book__part[aria-current="step"] .bi {
  color: inherit;
}

/* Medicines and supplements: a numbered row of four boxes each, two by two from 576px */
.book__items {
  display: grid;
  gap: var(--sp-4);
}

.book__item {
  display: grid;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  border-bottom: var(--border-1) solid var(--c-line);
}

@media (min-width: 576px) {
  .book__item {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-4);
  }

  .book__item .book__eyebrow {
    grid-column: 1 / -1;
  }
}

/* Step 4: consultants, the week, the times */
.book__consultants {
  display: grid;
  gap: var(--sp-2);
}

@media (min-width: 576px) {
  .book__consultants {
    grid-template-columns: repeat(auto-fill, minmax(var(--book-pick-w), 1fr));
  }
}

.book__consultant {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

.book__consultant[aria-current="true"] {
  border-color: var(--c-menu-button);
  box-shadow: inset 0 0 0 var(--border-1) var(--c-menu-button);
}

.book__avatar {
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  font-size: var(--fs-small);
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border-radius: var(--radius-pill);
}

.book__week {
  display: grid;
  grid-template-columns: var(--sp-8) 1fr var(--sp-8);
  align-items: center;
  gap: var(--sp-1);
}

.book__week-move {
  display: grid;
  place-items: center;
  height: var(--sp-8);
  color: var(--c-text);
  border-radius: var(--radius-1);
}

button.book__week-move:hover {
  background-color: var(--c-ground);
}

.book__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-1);
}

.book__day {
  display: grid;
  width: 100%;
  justify-items: center;
  padding-block: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-decoration: none;
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-1);
}

.book__day strong {
  font-size: var(--fs-body);
  color: var(--c-text);
}

.book__day--off {
  opacity: 0.5;
  background-image: repeating-linear-gradient(45deg, var(--c-line) 0 var(--border-1), transparent var(--border-1) var(--sp-2));
}

.book__day[aria-current="date"] {
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
  border-color: var(--c-menu-button);
}

.book__day[aria-current="date"] strong {
  color: var(--c-menu-button-text);
}

/* Step 5 and done */
.book__summary {
  display: grid;
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-1);
}

.book__summary > div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-1) solid var(--c-line);
}

.book__summary > div:last-child {
  border-bottom: 0;
}

@media (min-width: 576px) {
  .book__summary > div {
    grid-template-columns: var(--book-label-w) 1fr;
  }
}

.book__summary dt {
  color: var(--c-text-muted);
}

.book__done {
  justify-items: center;
  text-align: center;
}

.book__done .button {
  justify-self: center;
}

.book__tickmark {
  display: grid;
  place-items: center;
  width: var(--sp-16);
  height: var(--sp-16);
  font-size: var(--fs-h3);
  color: var(--c-page);
  background-color: var(--c-tick);
  border-radius: var(--radius-pill);
}