/* Booking a consultation (modules/book): the four steps across the page, the About you step, and the two buttons of
   the questionnaire. The rest comes from the panels, fields, tick cards and the calendar's day chips and time pills. */

/* --- The steps: numbered circles joined by a line across the full width, the current one in blue, done ones ticked.
   The first and last names line up with the page edges; the middle ones sit centred under their circle. --- */
.book-steps {
  display: flex;
  margin-block: var(--sp-2) var(--sp-8);
}

.book-steps__step {
  position: relative;
  display: grid;
  flex: 1;
  justify-items: start;
  min-width: 0; /* the current step's name on phones may stick out, but never widens its step: the circles stay evenly spaced */
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* The last step is only as wide as its circle, so the four circles are evenly spaced; its name reaches out to the left. */
.book-steps__step:last-child {
  flex: none;
  grid-template-columns: var(--sp-8);
  justify-items: end;
}

.book-steps__step:last-child .book-steps__label {
  white-space: nowrap;
}

/* The line from each circle to the next. */
.book-steps__step::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-8) / 2);
  right: 0;
  left: var(--sp-8);
  border-top: var(--border-1) solid var(--c-line);
}

.book-steps__dot {
  position: relative; /* over the line */
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  font-weight: 600;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: 50%;
}

.book-steps__step:not(:first-child, :last-child) .book-steps__label {
  translate: calc(-50% + var(--sp-8) / 2) 0;
  text-align: center;
}

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

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

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

/* Phones show only the current step's name, so the names do not run into each other; all of them from 576px. */
.book-steps__step:not([aria-current]) .book-steps__label {
  display: none;
}

.book-steps__step[aria-current] .book-steps__label {
  white-space: nowrap;
}

@media (min-width: 576px) {
  .book-steps__step:not([aria-current]) .book-steps__label {
    display: block;
  }

  .book-steps__step[aria-current] .book-steps__label {
    white-space: normal;
  }
}

/* --- About you: the form, and beside it from 992px a card on what the first consultation is like --- */
.book-start {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 992px) {
  .book-start {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.book-start .panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.book-start__form {
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}

/* The encryption chip sits across the middle of the form's top border. */
.book-start__chip {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
}

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

.book-start__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.book-start__birth {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.book-start__legend {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Day, Month and Year in a row; Month is wider for its chevron. */
.book-start__date {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: var(--sp-3);
}

/* Phones: a little less room inside the three boxes, so Day, Month and Year all fit; the usual room from 576px. */
.book-start__date .field__input,
.book-start__date .field__label {
  padding-inline: var(--sp-3);
}

.book-start__date select.field__input {
  padding-right: var(--sp-8);
  background-position: right var(--sp-2) center;
}

@media (min-width: 576px) {
  .book-start__date {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .book-start__date .field__input,
  .book-start__date .field__label {
    padding-inline: var(--sp-4);
  }

  .book-start__date select.field__input {
    padding-right: var(--sp-12);
    background-position: right var(--sp-4) center;
  }
}

/* Back on the left, Continue on the right, under a line; on phones Continue full width with Back under it. */
.book-start__actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  text-align: center;
  border-top: var(--border-1) solid var(--c-line);
}

.book-start__actions .button {
  justify-content: center;
}

@media (min-width: 576px) {
  .book-start__actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.book-start__back {
  font-size: var(--fs-small);
  color: var(--c-accent-text);
  text-decoration: none;
}

.book-start__back:hover {
  text-decoration: underline;
}

/* What the first consultation is like: the picture on top; from 768px to 991px beside the words instead. */
.book-start__about {
  overflow: hidden;
  padding: 0 var(--sp-6) var(--sp-6);
}

.book-start__image {
  width: calc(100% + 2 * var(--sp-6));
  max-width: none;
  height: auto;
  margin-inline: calc(-1 * var(--sp-6));
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

@media (min-width: 992px) {
  .book-start__image {
    aspect-ratio: 16 / 10;
  }
}

.book-start__title {
  font-size: var(--fs-lead);
  color: var(--c-accent-text);
}

.book-start__facts {
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.book-start__facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.book-start__facts .bi {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border-radius: 50%;
}

.book-start__facts strong {
  display: block;
  font-weight: 600;
  color: var(--c-text);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .book-start .book-start__about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    column-gap: var(--sp-6);
    padding: 0;
  }

  .book-start__image {
    grid-row: 1 / span 2;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
  }

  .book-start__about .book-start__title {
    padding: var(--sp-6) var(--sp-6) 0 0;
  }

  .book-start__about .book-start__facts {
    padding: 0 var(--sp-6) var(--sp-6) 0;
  }
}

/* --- The health questionnaire: one section at a time in the form, the list of sections beside it from 992px --- */

/* How far through: under the steps on phones and tablets; in the side panel from 992px. */
.q-progress {
  display: grid;
  gap: var(--sp-2);
}

.q-progress--top {
  margin-bottom: var(--sp-8);
}

@media (min-width: 992px) {
  .q-progress--top {
    display: none;
  }
}

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

.q-progress__bar {
  width: 100%;
  height: var(--sp-1);
  overflow: hidden;
  appearance: none;
  background-color: var(--c-surface);
  border: 0;
  border-radius: var(--radius-pill);
}

/* Chrome and Safari draw the bar's two parts with these; Firefox with ::-moz-progress-bar. */
.q-progress__bar::-webkit-progress-bar {
  background-color: var(--c-surface);
}

.q-progress__bar::-webkit-progress-value {
  background-color: var(--c-menu-button);
}

.q-progress__bar::-moz-progress-bar {
  background-color: var(--c-menu-button);
}

/* The side panel: only from 992px, where there is room beside the form. */
.book-start .q-side {
  display: none;
}

@media (min-width: 992px) {
  .book-start .q-side {
    position: sticky;
    top: calc(var(--sp-16) + var(--sp-6));
    display: flex;
    padding: var(--sp-6);
  }
}

.q-side__list {
  display: grid;
  font-size: var(--fs-small);
}

.q-side__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}

.q-side__item .bi {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  font-size: var(--fs-xs);
  color: transparent;
  border: var(--border-1) solid var(--c-line);
  border-radius: 50%;
}

.q-side__item a {
  color: inherit;
  text-decoration: none;
}

.q-side__item a:hover {
  text-decoration: underline;
}

.q-side__item--done .bi {
  color: var(--c-on-dark);
  background-color: var(--c-tick);
  border-color: var(--c-tick);
}

.q-side__item--now {
  font-weight: 600;
  color: var(--c-accent-text);
}

.q-side__item--now .bi {
  border-color: var(--c-menu-button);
  box-shadow: inset 0 0 0 var(--sp-1) var(--c-accent);
}

/* A section's title and questions, with room between the questions. */
.book-start__form:has(.q__title) {
  gap: var(--sp-6);
}

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

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

.q__question {
  padding: 0;
  font-weight: 600;
  color: var(--c-heading);
}

/* A legend sits outside its fieldset's grid, so it takes the gap as a margin. */
legend.q__question {
  margin-bottom: var(--sp-3);
}

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

.q__long {
  min-height: var(--sp-24);
}

/* 0 to 4: the key, then a row per area; the numbers sit under the name on phones, beside it from 768px. */
.q__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.q__key b {
  color: var(--c-accent-text);
}

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

.q__row:last-child {
  border-bottom: var(--border-1) solid var(--c-line);
}

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

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

@media (min-width: 768px) {
  .q__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .q__scale {
    grid-template-columns: repeat(5, var(--sp-12));
  }
}

/* A pill to choose: a number on the scale, or an answer. Pale blue once chosen. */
.q__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.q__pill {
  position: relative;
}

.q__pill input {
  position: absolute;
  opacity: 0;
}

.q__pill > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--button-h);
  font-size: var(--fs-small);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease);
}

.q__pill--wide > span {
  padding-inline: var(--sp-4);
}

.q__pill > span .bi {
  display: none;
}

.q__pill > span:hover {
  border-color: var(--c-accent-border);
}

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

.q__pill input:checked + span .bi {
  display: block;
}

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

/* Medicines: a soft card per item, its four boxes two by two from 576px and in one row from 1200px. */
.q__item {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background-color: var(--c-panel);
  border-radius: var(--radius-2);
}

.q__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
  font-weight: 600;
}

.q__remove {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 400;
  color: var(--c-text-muted);
}

.q__remove:hover {
  color: var(--c-text);
}

.q__item-boxes {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 576px) {
  .q__item-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .q__item-boxes {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }
}

.q__add {
  justify-self: start;
}

/* Back and Next together on the right; stacked full width on phones, Next on top. */
.q__nav {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-3);
}

@media (min-width: 576px) {
  .q__nav {
    flex-direction: row;
  }
}

/* --- Choose a time: the week, the day's times by consultant, and beside it from 992px the time chosen --- */
.book-time {
  gap: var(--sp-5);
}

.book-time__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.book-time__month {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  color: var(--c-heading);
}

.book-time__arrows {
  display: flex;
  gap: var(--sp-2);
}

.book-time__arrow {
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  color: var(--c-text);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: 50%;
}

a.book-time__arrow:hover {
  border-color: var(--c-accent-border);
}

.book-time__arrow--off {
  opacity: 0.4;
}

/* Seven days in a row; a green dot under those with free times. Days without are stone and cannot be chosen. */
.book-time__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-1);
}

@media (min-width: 576px) {
  .book-time__days {
    gap: var(--sp-2);
  }
}

.book-time__day {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-decoration: none;
  text-transform: uppercase;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

@media (min-width: 576px) {
  .book-time__day {
    letter-spacing: var(--tracking-caps);
  }
}

.book-time__day b {
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--c-heading);
}

.book-time__day i {
  width: var(--sp-1);
  height: var(--sp-1);
  background-color: var(--c-tick);
  border-radius: 50%;
}

a.book-time__day:hover {
  border-color: var(--c-accent-border);
}

.book-time__day[aria-current] {
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border-color: var(--c-menu-button);
}

.book-time__day[aria-current] b {
  color: var(--c-accent-text);
}

.book-time__day--none {
  background-color: var(--c-surface);
  border-color: transparent;
  opacity: 0.6;
}

.book-time__day--none i {
  background-color: transparent;
}

.book-time__date {
  font-size: var(--fs-h4);
  color: var(--c-heading);
}

/* Each consultant: their name on a soft strip, then their times by part of the day. */
.book-time__consultant {
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.book-time__who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-bottom: var(--sp-5); /* a legend sits outside its fieldset's grid, so it takes the gap as a margin */
  padding: var(--sp-3);
  font-size: var(--fs-small);
  background-color: var(--c-panel);
  border-radius: var(--radius-2);
}

.book-time__who strong {
  display: block;
  color: var(--c-heading);
}

.book-time__initials {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  font-family: var(--font-heading);
  color: var(--c-text-muted);
  background-color: var(--c-surface);
  border-radius: 50%;
}

.book-time__group {
  display: grid;
  gap: var(--sp-3);
}

.book-time__part {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-heading);
}

.book-time__part .bi,
.book-time__zone .bi {
  color: var(--c-text-muted);
}

.book-time__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sp-24), 1fr));
  gap: var(--sp-2);
}

.book-time__zone {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* The side card: under the form on smaller screens, beside it from 992px. */
.book-start .book-time__side {
  padding: var(--sp-6);
}

.book-time__choice {
  padding: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border: var(--border-1) dashed var(--c-accent-border);
  border-radius: var(--radius-2);
}

.book-time__choice strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  font-weight: 500;
}

/* --- Check and book: the date large, then the other details on lines --- */
.book-confirm__when {
  color: var(--c-text-muted);
}

.book-confirm__when strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--c-heading);
}

.book-confirm__facts > div {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-top: var(--border-1) solid var(--c-line);
}

@media (min-width: 576px) {
  .book-confirm__facts > div {
    grid-template-columns: var(--sp-24) minmax(0, 1fr);
    gap: var(--sp-4);
  }
}

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