/* ============================================================
   Post Office appointment — layout only

   Loaded after portal.css on the portal surface, and nowhere else.
   Every colour, radius, shadow and font here comes from
   tokens.css, and every control the wizard uses (.btn, .input,
   .pcard, .inset, .option, .kv) is portal.css's. What is left is
   the handful of arrangements portal.css has no reason to carry:
   a step rail, a results list, two chip grids and a confirmation
   card.

   Nothing in this file styles a bare element or a class the rest
   of the portal uses, so loading it cannot change how any other
   section looks. That is deliberate: the wizard is new, and new
   should not be able to break old.
   ============================================================ */

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

.appt-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.appt-steps__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.appt-steps__item::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}

.appt-steps__item:last-child::after { display: none; }

.appt-steps__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: var(--r-pill);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-faint);
  font-size: 12.5px;
  font-weight: 700;
}

.appt-steps__item.is-current .appt-steps__dot {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
  box-shadow: var(--sh-ring);
}

.appt-steps__item.is-done .appt-steps__dot {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

.appt-steps__item.is-done::after { background: var(--ok-line); }

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

.appt-panel { margin-top: 18px; }

.appt-panel__sub {
  font-size: 14.5px;
  margin: -2px 0 16px;
}

.appt-label {
  display: block;
  margin: 20px 0 9px;
}

.appt-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

/* A Back button belongs at the far end of the row from the one
   that moves forward, so the destructive-feeling action is never
   under the thumb that is reaching for Continue. */
.appt-foot [data-appt="back"] { margin-right: auto; }

.appt-hint { margin-top: 12px; }

.appt-error { margin-top: 16px; }

.appt-busy {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-ctl);
  background: var(--surface-sunk);
  color: var(--ink-muted);
  font-size: 14.5px;
}

/* ---- fields ---------------------------------------------- */

.appt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.appt-grid--search {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: end;
}

.appt-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.appt-search { height: 46px; }

.appt-code {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.34em;
  text-align: center;
}

.appt-field--code { max-width: 260px; }

.appt-sent {
  font-size: 14.5px;
  margin: 0 0 16px;
}

.appt-resend {
  margin-top: 12px;
  align-self: flex-start;
}

/* A quieter button for "Change" and "Send a new code": secondary
   to everything around it, and never the thing you reach for by
   accident. */
.btn--tiny {
  padding: 7px 13px;
  font-size: 13.5px;
  min-height: 0;
}

.appt-who,
.appt-chosen { margin-bottom: 4px; }

.appt-chosen {
  display: flex;
  align-items: center;
  gap: 12px;
}

.appt-chosen .btn--tiny { margin-left: auto; flex: 0 0 auto; }

.appt-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* .option is portal.css's; only the chosen state is new. */
.option.is-on {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
  box-shadow: var(--sh-ring);
}

/* ---- location results ------------------------------------ */

.appt-locs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  /* Twenty branches is a long page on a phone. Capped and scrolled
     so the Continue button stays reachable without a long scroll
     back down past every result. */
  max-height: 460px;
  overflow-y: auto;
}

/* ---- search modes and filter ----------------------------- */

.appt-modes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
}

.appt-mode {
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.appt-mode.is-on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-card);
}

.appt-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--ink-muted);
  cursor: pointer;
}

.appt-check input { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- a result --------------------------------------------- */

.appt-loc {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.appt-loc:hover { border-color: var(--line-strong); }

.appt-loc.is-on {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
  box-shadow: var(--sh-ring);
}

/* The whole card used to be one button. It cannot be any more: the hours
   toggle is a button too, and a button inside a button is invalid markup
   that browsers un-nest, which loses the click handler. So the card is a
   div and this is the part that selects it. */
.appt-loc__pick {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.appt-loc__pin {
  color: var(--brand-primary);
  flex: 0 0 auto;
  margin-top: 2px;
}

.appt-loc__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.appt-loc__name {
  font-weight: 650;
  font-size: 15px;
  color: var(--ink);
}

.appt-loc__addr {
  font-size: 13.5px;
  color: var(--ink-muted);
}

.appt-loc__flag {
  font-size: 13px;
  color: var(--warn-ink);
  margin-top: 3px;
}

.appt-loc__flag--info { color: var(--brand-primary); }

.appt-loc__name .tag { margin-left: 6px; vertical-align: middle; }

/* ---- opening hours ---------------------------------------- */

.appt-loc__hourstoggle {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 9px 16px 11px 47px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.appt-loc__hourstoggle:hover { color: var(--brand-primary); }

.appt-loc__hourstoggle svg { transition: transform var(--dur) var(--ease); }
.appt-loc__hourstoggle.is-open svg { transform: rotate(180deg); }

.appt-hours {
  padding: 4px 16px 16px 47px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.appt-hours__set { display: flex; flex-direction: column; gap: 3px; }

.appt-hours__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.appt-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-muted);
}

.appt-hours__row span:last-child { color: var(--ink); white-space: nowrap; }

.appt-loc__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  text-align: right;
}

.appt-loc__dist {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}

.appt-loc__days {
  font-size: 12px;
  color: var(--ink-faint);
  max-width: 96px;
  line-height: 1.35;
}

/* ---- date and time chips --------------------------------- */

.appt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.appt-chip {
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.appt-chip:hover { border-color: var(--brand-primary); }

.appt-chip.is-on {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
}

/* ---- review ---------------------------------------------- */

.appt-review {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}

.appt-review__row {
  display: grid;
  grid-template-columns: 24px 74px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.appt-review__row:last-child { border-bottom: 0; }

.appt-review__icon {
  color: var(--ink-faint);
  align-self: center;
}

.appt-review__k {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.appt-review__v {
  font-size: 15px;
  color: var(--ink);
  font-weight: 550;
}

.appt-fee { margin-top: 4px; }

/* ---- confirmation ---------------------------------------- */

.appt-conf {
  margin-top: 22px;
  text-align: center;
}

.appt-conf__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-pill);
  background: var(--ok-bg);
  color: var(--ok);
  margin-bottom: 14px;
}

.appt-conf__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.appt-conf__when {
  font-size: 17px;
  font-weight: 650;
  color: var(--ink);
  margin: 12px 0 2px;
}

.appt-conf__where {
  font-size: 14.5px;
  color: var(--ink-muted);
  margin: 0;
}

.appt-conf__num {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  margin: 22px auto 6px;
  padding: 16px 20px;
  max-width: 320px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--surface-sunk);
}

.appt-conf__num .kv__v--mono {
  font-size: 19px;
  letter-spacing: 0.06em;
}

.appt-conf__kv {
  margin-top: 20px;
  text-align: left;
}

/* A quieter action than the confirmation it sits under: rebooking is
   the rarer thing to want, and the card above it is the answer for
   almost everyone. */
.appt-conf__again {
  margin-top: 20px;
}

/* ---- embedded scheduler ----------------------------------- */

.appt-rebook-warn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
}

.appt-rebook-warn .btn--tiny {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
}

@media (max-width: 720px) {
  .appt-rebook-warn { flex-wrap: wrap; }
  .appt-rebook-warn .btn--tiny { margin-left: 30px; }
}

.appt-embed {
  margin-top: 22px;
  padding: 0;
  overflow: hidden;
}

.appt-embed__loading {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 28px var(--card-pad);
  color: var(--ink-muted);
  font-size: 14.5px;
}

/* The height is set from the frame's own content once it loads, so there
   is never a scrollbar inside a scrollbar. This is only the starting
   height, and the floor while it works that out. */
.appt-embed__frame {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
  background: transparent;
}

@media (max-width: 720px) {
  /* Edge to edge on a phone: the framed page carries its own gutters,
     and a second set inside the card wastes a quarter of the width. */
  .appt-embed { margin-left: -2px; margin-right: -2px; }
  .appt-embed__frame { min-height: 560px; }
}

/* ---- mail-in alternative --------------------------------- */

.appt-mail {
  margin-top: 18px;
  background: var(--surface-soft);
}

/* ---- narrow ---------------------------------------------- */

@media (max-width: 720px) {
  .appt-grid,
  .appt-grid--search { grid-template-columns: 1fr; }

  .appt-search { width: 100%; }

  /* The distance column stops earning its width below this, and
     wrapping it under the address reads better than squeezing the
     branch name into two words per line. */
  .appt-loc { flex-wrap: wrap; }

  .appt-loc__pick { flex-wrap: wrap; }

  .appt-loc__meta {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-left: 31px;
    text-align: left;
  }

  .appt-loc__days { max-width: none; }

  .appt-modes { display: flex; width: 100%; }
  .appt-mode { flex: 1; text-align: center; }

  .appt-loc__hourstoggle,
  .appt-hours { padding-left: 16px; }

  .appt-hours { grid-template-columns: 1fr; }

  .appt-review__row { grid-template-columns: 24px 1fr; }

  .appt-review__k { grid-column: 2; }

  .appt-review__v { grid-column: 2; }

  .appt-foot { flex-direction: column-reverse; }

  .appt-foot .btn { width: 100%; }
}