/* ==========================================================================
   GALAD native consultation booking (front end only)
   --------------------------------------------------------------------------
   Everything here is scoped under .gbk so nothing leaks into the rest of the
   site. Colours, type and radius come from the tokens in galad.css; this file
   defines no new brand values.
   ========================================================================== */

.gbk {
  --gbk-day: 44px;                 /* day circle size */
  --gbk-off: #A3A8B0;              /* unavailable dates; decorative, not body text */
  --gbk-row: 48px;                 /* height of the first row in each column (logo / heading / date) */
  --gbk-tgap: 22px;                /* space either side of the times divider */
  background: var(--paper);
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-lg);
  max-width: 1100px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: var(--body);
  text-align: left;
  overflow: hidden;
}

/* The card sits inside .booking.on-ink, which turns focus rings white for the
   dark background. Inside the white card they have to be red again. */
.gbk :focus-visible { outline-color: var(--galad); }

/* --------------------------------------------------------------------------
   Left: consultation details
   -------------------------------------------------------------------------- */
.gbk-info {
  padding: clamp(26px, 3.4vw, 40px);
  border-bottom: 1px solid var(--line);
}

.gbk-brand { display: flex; align-items: center; gap: 12px; min-height: var(--gbk-row); margin-bottom: 14px; }
.gbk-mark { width: 48px; height: 48px; flex: none; object-fit: contain; }
.gbk-firm { font-size: 15.5px; font-weight: 500; color: var(--ink); letter-spacing: -.005em; }

.gbk-title {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: clamp(23px, 2.1vw, 27px); line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 12px;
}

.gbk-meta { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.gbk-meta li { display: flex; align-items: center; gap: 11px; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.gbk-meta svg { flex: none; color: var(--ink); }

.gbk-desc { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

.gbk-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.gbk-points li { display: flex; align-items: center; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--body); }
.gbk-points svg { flex: none; }

/* --------------------------------------------------------------------------
   Right: date and time picker
   -------------------------------------------------------------------------- */
.gbk-picker { padding: clamp(26px, 3.4vw, 40px); min-width: 0; }

.gbk-heading {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: 19px; letter-spacing: -.01em; margin: 0 0 18px;
}

.gbk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* Calendar ------------------------------------------------------------------ */
.gbk-cal { min-width: 0; position: relative; }

.gbk-cal-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.gbk-month {
  font-family: var(--sans); font-weight: 500; font-size: 17px; color: var(--ink);
  margin: 0; text-align: center; letter-spacing: -.005em;
}
.gbk-nav {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  color: var(--ink); cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.gbk-nav:hover:not(:disabled) { background: var(--mist); border-color: var(--line); }
.gbk-nav:disabled { color: var(--silver); cursor: default; }

.gbk-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gbk-grid th {
  font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--muted);
  padding: 0 0 8px; text-align: center;
}
.gbk-grid td { padding: 3px 0; text-align: center; vertical-align: middle; }

.gbk-day {
  width: 100%; max-width: var(--gbk-day); aspect-ratio: 1;
  margin: 0 auto; padding: 0;
  display: flex; align-items: center; justify-content: center; position: relative;
  font-family: var(--sans); font-size: 15.5px; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.gbk-day.is-outside { color: var(--silver); }

/* bookable */
.gbk-day.is-open { background: var(--galad-wash); color: var(--galad-ink); font-weight: 600; cursor: pointer; }
.gbk-day.is-open:hover { background: #FAD9DE; }

/* not bookable: weekends, past dates, closures */
.gbk-day[aria-disabled="true"] { color: var(--gbk-off); cursor: not-allowed; font-weight: 400; }

/* today marker */
.gbk-day.is-today::after {
  content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: currentColor;
}

/* selected */
.gbk-day[aria-pressed="true"] {
  background: var(--galad); color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(230, 23, 54, .8);
}
.gbk-day[aria-pressed="true"]:hover { background: var(--galad-deep); }

.gbk-day:focus-visible { outline-offset: 2px; border-radius: 50%; }

/* Times ---------------------------------------------------------------------- */
.gbk-times { min-width: 0; }
.gbk-times fieldset { position: relative; border: 0; margin: 0; padding: 0; min-width: 0; }
.gbk-date-label {
  display: block; width: 100%; padding: 0; margin: 0 0 12px;
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink);
}

/* The slots scroll inside their own box so a long day never stretches the
   card; the date above them stays put. The padding keeps focus rings from
   being clipped by the scroll edge, and the negative margin cancels it so
   the buttons still line up with the date label. */
.gbk-slots {
  position: relative;               /* offsetParent for keeping a slot in view (booking.js) */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  align-content: start;
  max-height: 296px;                /* phones: about five rows of two, the sixth peeking */
  overflow-y: auto; overscroll-behavior-y: auto;
  padding: 6px 12px 6px 6px; margin: -6px -12px -6px -6px;
  scroll-padding: 6px 0 40px;       /* keyboard focus never lands under the fade */
  scrollbar-width: thin;
  scrollbar-color: #C9CDD4 transparent;
}
.gbk-slots::-webkit-scrollbar { width: 6px; }
.gbk-slots::-webkit-scrollbar-track { background: var(--mist); border-radius: 3px; }
.gbk-slots::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 3px; }
.gbk-slots::-webkit-scrollbar-thumb:hover { background: #A3A8B0; }

/* A soft fade at the bottom while more times are hidden below. booking.js
   adds .has-more only when the list can still scroll down. */
.gbk-times fieldset::after {
  content: ""; position: absolute; left: 0; right: 14px; bottom: 0; height: 40px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--paper) 85%);
  pointer-events: none; opacity: 0; transition: opacity .2s var(--ease);
}
.gbk-times.has-more fieldset::after { opacity: 1; }

.gbk-slot { position: relative; display: block; }
.gbk-slot input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.gbk-slot span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 12px;
  font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.gbk-slot input:hover + span { border-color: var(--galad); color: var(--galad-ink); }
.gbk-slot input:checked + span {
  background: var(--galad); border-color: var(--galad); color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px -12px rgba(230, 23, 54, .9);
}
.gbk-slot input:focus-visible + span { outline: 2px solid var(--galad); outline-offset: 3px; }

.gbk-empty { font-size: 14.5px; color: var(--muted); margin: 0; }

/* Footer: summary and continue ---------------------------------------------- */
.gbk-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.gbk-summary { margin: 0; font-size: 15px; color: var(--muted); }
.gbk-summary strong { color: var(--ink); font-weight: 600; }
.gbk-foot .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.gbk-foot .btn:disabled:hover { background: var(--galad); }

.gbk-note {
  margin: 16px 0 0; padding: 14px 16px;
  background: var(--galad-wash); border-radius: var(--radius);
  font-size: 14.5px; line-height: 1.6; color: var(--ink);
}
.gbk-note a { color: var(--galad-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Step 2: your details
   Text inputs use the site's shared .field / .field.err / .msg styles from
   galad.css; only the pieces specific to this card are defined here.
   -------------------------------------------------------------------------- */
.gbk-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px 0 10px; margin: -6px 0 18px -10px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--galad-ink);
  background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
  transition: background .18s var(--ease);
}
.gbk-back:hover { background: var(--galad-wash); }
.gbk-back svg { transition: transform .18s var(--ease); }
.gbk-back:hover svg { transform: translateX(-3px); }

.gbk-appt {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; margin-bottom: 28px;
  background: var(--mist); border-left: 3px solid var(--galad); border-radius: var(--radius);
}
.gbk-appt:focus { outline: none; }
.gbk-appt:focus-visible { outline: 2px solid var(--galad); outline-offset: 3px; }
.gbk-appt-ico { color: var(--galad); flex: none; margin-top: 1px; }
.gbk-appt p { margin: 0; }
.gbk-appt-date { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.35; letter-spacing: -.01em; }
.gbk-appt .gbk-appt-time { font-size: 16px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.gbk-appt .gbk-appt-type { font-size: 14.5px; color: var(--muted); margin-top: 2px; }

.gbk-form .field-2 { gap: 0 18px; }
@media (min-width: 560px) { .gbk-form .field-2 { grid-template-columns: 1fr 1fr; } }

/* radio groups: fieldset carries .field so the shared .err/.msg rules apply */
.gbk-group { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.gbk-group legend {
  display: block; padding: 0; margin-bottom: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.gbk-group legend .req { color: var(--galad); }

.gbk-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.gbk-choices-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .gbk-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* galad.css styles every ".field label"; reset that for the option tiles */
.gbk-group .gbk-choice { position: relative; display: block; margin: 0; font-weight: 400; }
.gbk-choice input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.gbk-choice span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 8px 12px;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.gbk-choice input:hover + span { border-color: var(--galad); color: var(--galad-ink); }
.gbk-choice input:checked + span {
  background: var(--galad-wash); border-color: var(--galad); color: var(--galad-ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--galad);
}
.gbk-choice input:focus-visible + span { outline: 2px solid var(--galad); outline-offset: 3px; }
.gbk-group.err .gbk-choice span { border-color: rgba(230, 23, 54, .55); }

.gbk-form textarea { min-height: 110px; }

.gbk-submit { margin-top: 6px; }
.gbk-submit .btn { min-height: 50px; padding-left: 30px; padding-right: 30px; }

.gbk-details .gbk-note { margin-top: 18px; scroll-margin: 120px 0; }
.gbk-details .gbk-note:focus { outline: none; }
.gbk-details .gbk-note:focus-visible { outline: 2px solid var(--galad); outline-offset: 3px; }

/* Live availability states -------------------------------------------------- */
.gbk-cal[aria-busy="true"] .gbk-grid tbody { opacity: .45; transition: opacity .2s var(--ease); }
.gbk-retry { margin-top: 12px; }
.gbk-picker .gbk-notice { margin: 0 0 20px; }
.gbk-notice:focus { outline: none; }
.gbk-back:disabled { opacity: .5; cursor: default; }
.gbk-submit .btn[aria-busy="true"] { opacity: .75; cursor: progress; }

/* Dates closed by a blocked_slots row: struck through as well as greyed, so
   the state does not depend on colour, and the reason line underneath. */
.gbk-day.is-closed {
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  cursor: not-allowed;
}
.gbk-day.is-closed:hover { background: var(--mist); }
.gbk-closed-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 0; padding: 10px 12px;
  font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink);
  background: var(--mist); border-left: 3px solid var(--galad); border-radius: var(--radius);
}
.gbk-closed-note[hidden] { display: none; }

/* honeypot: off screen, never shown to people */
.gbk-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Booking confirmed --------------------------------------------------------- */
.gbk-done { padding: 4px 0 0; }
.gbk-done:focus { outline: none; }
.gbk-done-ico { display: block; margin-bottom: 14px; }
.gbk-done .gbk-heading { margin-bottom: 10px; }
.gbk-done p { font-size: 15.5px; color: var(--body); margin: 0 0 10px; }
.gbk-done .gbk-done-ref strong { color: var(--ink); font-family: var(--mono); font-size: 15px; letter-spacing: .04em; }
.gbk-done a { color: var(--galad-ink); font-weight: 600; }

/* keep the sticky header from covering the panel when it scrolls into view */
#book, .gbk-picker { scroll-margin-top: calc(var(--hdr-h) + 16px); }

/* Shown only when scripting is off */
.gbk-fallback { font-size: 15px; color: var(--muted); margin: 0; }
.gbk-fallback a { color: var(--galad-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* Tablet and desktop: calendar and times side by side.

   The calendar alone sets the height of this row. The times column is
   lifted out of the height calculation (its fieldset is absolutely
   positioned inside the cell) and the slot list scrolls within whatever
   height the calendar gives it, so 16 or 30 times never make the card
   taller.

   The first row of every column is --gbk-row tall: the logo and firm name,
   "Select a date and time", and the selected date. The times column is
   pulled up by that row so its date sits level with the heading. */
@media (min-width: 720px) {
  .gbk-picker { padding: 28px 30px 26px; }
  /* :not([hidden]) so this display rule never un-hides the heading on the
     details step, where booking.js hides it */
  .gbk-picker > .gbk-heading:not([hidden]) {
    display: flex; align-items: center; min-height: var(--gbk-row);
    margin: 0 0 14px; line-height: 1.25;
  }

  .gbk-body { grid-template-columns: minmax(0, 1fr) 200px; gap: 0; }

  /* room under the grid for the "Closed — reason" line, reserved so hovering
     a closed date never changes the card's height */
  .gbk-cal { padding-bottom: 54px; }
  .gbk-closed-note { position: absolute; left: 0; right: 0; top: calc(100% - 46px); margin: 0; }

  .gbk-cal-nav { margin-bottom: 8px; }
  .gbk-nav { width: 36px; height: 36px; }
  .gbk-grid th { padding-bottom: 6px; }
  .gbk-grid td { padding: 2px 0; }
  .gbk { --gbk-day: 42px; }

  .gbk-times {
    position: relative;
    margin: calc(-1 * (var(--gbk-row) + 14px)) 0 0 var(--gbk-tgap);
    padding-left: var(--gbk-tgap);
    border-left: 1px solid var(--line);
  }
  /* when a "slot just taken" notice sits above the calendar, keep the times
     below it rather than lifting them over it */
  .gbk-notice:not([hidden]) + .gbk-body .gbk-times { margin-top: 0; }

  .gbk-times fieldset {
    position: absolute; top: 0; bottom: 0; right: 0; left: var(--gbk-tgap);
    display: flex; flex-direction: column;
  }
  .gbk-date-label {
    display: flex; align-items: center; min-height: var(--gbk-row);
    margin-bottom: 14px; line-height: 1.3;
  }
  .gbk-slots {
    flex: 1 1 auto; min-height: 0; max-height: none;
    grid-template-columns: minmax(0, 1fr);
  }
  .gbk-slot span { min-height: 44px; }

  .gbk-foot { margin-top: 18px; padding-top: 16px; }
  .gbk-foot .btn { min-height: 42px; }

  /* details on top: two short columns instead of one long one */
  .gbk-info {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px;
    grid-template-areas: "brand desc" "title desc" "meta points";
    align-items: start;
    padding: 26px 30px;
  }
  .gbk-brand { grid-area: brand; }
  .gbk-title { grid-area: title; }
  .gbk-meta { grid-area: meta; margin-bottom: 0; }
  .gbk-desc { grid-area: desc; }
  .gbk-points { grid-area: points; }
}

/* Desktop: three columns. Info about 31%, calendar about 44%, times about
   25% of the card. */
@media (min-width: 960px) {
  .gbk { grid-template-columns: minmax(0, 31fr) minmax(0, 69fr); }
  .gbk-info {
    display: block;
    padding: 28px 28px 26px 30px;
    border-bottom: 0; border-right: 1px solid var(--line);
  }
  .gbk-meta { margin-bottom: 16px; }
  .gbk-body { grid-template-columns: minmax(0, 44fr) minmax(0, 25fr); }
}

/* Phones: let the card use more of the dark panel's padding so the day
   targets stay comfortably tappable. .booking keeps overflow hidden, and the
   negative margin is smaller than its padding, so nothing reaches the edge. */
@media (max-width: 560px) {
  .gbk { margin-left: -18px; margin-right: -18px; }
  .gbk-info, .gbk-picker { padding: 24px 18px; }
  .gbk-mark { width: 48px; height: 48px; }
  .gbk-grid th { font-size: 12.5px; }
  .gbk-day { font-size: 15px; }
  .gbk-day.is-today::after { bottom: 4px; }
  .gbk-foot .btn { width: 100%; }
  .gbk-submit .btn { width: 100%; }
  .gbk-appt { padding: 16px; }
  /* 16px stops iOS zooming the page when a field is focused */
  .gbk-form input, .gbk-form textarea { font-size: 16px; }
}

/* Small phones (320-380px): reclaim a little more width for the grid */
@media (max-width: 380px) {
  .gbk { margin-left: -26px; margin-right: -26px; }
  .gbk-info, .gbk-picker { padding: 22px 14px; }
  .gbk-month { font-size: 16px; white-space: nowrap; }
  .gbk-nav { width: 36px; height: 36px; }
  .gbk-grid th { font-size: 11.5px; }
  .gbk-day { font-size: 14px; }
  .gbk-day.is-today::after { bottom: 3px; width: 3px; height: 3px; margin-left: -1.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gbk-day, .gbk-slot span, .gbk-nav { transition: none; }
}