/* ==========================================================================
   Elmet Aesthetics — base stylesheet
   Reset, typography, layout primitives, shared components, Mud overrides.
   Every value comes from tokens.css. No literal colours below this line.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); letter-spacing: 0; }

p { margin: 0 0 var(--space-4); }
p, li { max-width: var(--measure); }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--fg); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

::selection { background: var(--gold); color: var(--ink); }

/* Numeric columns — prices, times, durations — line up. */
.tnum { font-variant-numeric: tabular-nums; }

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

.page { display: flex; flex-direction: column; min-height: 100dvh; }
.page__body { flex: 1; }

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.container--narrow { max-width: 820px; }

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--alt { background: var(--surface-alt); }
.section--tint { background: var(--blush-tint); }
/* Deliberately pinned to the logo's black in BOTH themes rather than to
   --surface-inverse. This is the brand's signature panel; flipping it to cream
   in dark mode turns the hero into a bright slab and throws away the
   black-and-gold identity the logo is built on. */
.section--inverse {
    background: var(--ink);
    color: var(--on-ink);
    border-block: 1px solid var(--line);
}
.section--inverse h1, .section--inverse h2, .section--inverse h3 { color: var(--on-ink); }
.section--inverse .muted, .section--inverse .lede { color: var(--on-ink-muted); }

@media (min-width: 900px) {
  .section { padding-block: var(--space-9); }

  /* Must be repeated inside the query: the rule above has identical specificity
     and comes later in the file, so without this --tight is silently ignored on
     desktop and every "tight" section gets the full 96px instead. */
  .section--tight { padding-block: var(--space-7); }
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-3);
}

.section--inverse .eyebrow { color: var(--gold); }

.display { font-size: var(--text-3xl); }
@media (max-width: 640px) { .display { font-size: var(--text-2xl); } }

.lede { font-size: var(--text-md); color: var(--fg-muted); }
.muted { color: var(--fg-muted); }
.small { font-size: var(--text-sm); }

.rule { height: 1px; background: var(--line); border: 0; margin: var(--space-6) 0; }
.rule--accent { height: 2px; width: 56px; background: var(--gold-gradient); margin: 0 0 var(--space-5); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.btn--primary { background: var(--gold-fill); color: var(--accent-contrast); }
.btn--primary:hover { background: var(--gold-fill-hover); color: var(--accent-contrast); }

.btn--secondary { border-color: var(--line-strong); color: var(--fg); }
.btn--secondary:hover { border-color: var(--fg); color: var(--fg); background: var(--surface-alt); }

.btn--quiet { color: var(--accent-text); padding-inline: var(--space-2); }
.btn--quiet:hover { color: var(--fg); }

.section--inverse .btn--secondary { border-color: var(--on-ink-muted); color: var(--on-ink); }
.section--inverse .btn--secondary:hover { border-color: var(--on-ink); background: transparent; }

.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

.card--flush { padding: 0; overflow: hidden; }
.card__body { padding: var(--space-5); }

.card--link { text-decoration: none; color: inherit; display: block; transition: border-color var(--dur) var(--ease); }
.card--link:hover { border-color: var(--line-strong); color: inherit; }

/* --------------------------------------------------------------------------
   Badges / notices
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.badge--accent { border-color: var(--gold); color: var(--accent-text); }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: var(--space-4);
  font-size: var(--text-sm);
}

.notice strong { display: block; margin-bottom: var(--space-1); }
.notice--warning { border-left-color: var(--warning); }
.notice--danger  { border-left-color: var(--danger); }

/* --------------------------------------------------------------------------
   Booking — panels, slot picker, chips
   Global rather than scoped to Book.razor because the self-service page
   (ManageBooking) reuses all of it; scoped CSS would not reach it.
   -------------------------------------------------------------------------- */

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

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: var(--space-5);
}

.panel__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.panel__actions .btn--primary { margin-left: auto; }

@media (min-width: 720px) {
    .panel { padding: var(--space-6); }
}

/* ---- summary block -------------------------------------------------------- */

.summary {
    background: var(--surface-alt);
    border-left: 2px solid var(--gold);
    padding: var(--space-4);
    margin: var(--space-5) 0;
}

.summary > :last-child { margin-bottom: 0; }

.summary__name {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.summary__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    margin-bottom: 0;
}

/* ---- slot picker ----------------------------------------------------------- */

.slot-picker {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-5);
}

@media (min-width: 860px) {
    .slot-picker { grid-template-columns: auto 1fr; align-items: start; }
}

.slot-picker__heading {
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--space-2);
}

.slot {
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.slot:hover { border-color: var(--gold); }

.slot.is-selected {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
    font-weight: 600;
}

/* ---- practitioner choice ---------------------------------------------------- */

.beautician-choice { margin-top: var(--space-6); }

.beautician-choice__label {
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.chip {
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font-size: var(--text-sm);
    cursor: pointer;
}

.chip.is-selected {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
    font-weight: 600;
}

/* ---- details form ------------------------------------------------------------ */

.fields {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
    .fields { grid-template-columns: 1fr 1fr; }
    .fields > :nth-child(4) { grid-column: 1 / -1; }
}

/* Self-service booking card */

.booking-card { margin-bottom: var(--space-5); }

.booking-card__treatment {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.booking-card__when {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  margin-bottom: var(--space-2);
}

.booking-card__status { margin-top: var(--space-3); }

.manage-actions { margin-top: var(--space-5); }

/* Off-screen rather than display:none — some bots skip hidden inputs.
   Global, not scoped: both the booking form and the contact form use it. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The date/time block that heads the final step. */
.summary--when { margin-bottom: var(--space-4); }
.summary--when .summary__name { font-size: var(--text-md); }
.summary--when p:last-child:empty { display: none; }

/* ---- social icons ---- */

.socials {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.socials li { max-width: none; }

/* 44px targets: the icon is small, the thing a thumb has to hit is not. */
.socials__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.socials__link:hover,
.socials__link:focus-visible {
  border-color: var(--gold);
  color: var(--accent-text);
}

/* On the ink footer. */
.socials--footer .socials__link {
  border-color: rgb(255 255 255 / 0.2);
  color: var(--on-ink);
}

.socials--footer .socials__link:hover,
.socials--footer .socials__link:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

/* ---- offers ---- */

.price-tag--sale {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}

.price-tag__now { color: var(--fg); }

.price-tag__was {
  color: var(--fg-muted);
  font-weight: 400;
  font-size: 0.85em;
}

/* Blush for a running offer, gold border + filled label once it is inside the
   last 48 hours. Urgent, not alarming: no red, no flashing. */
.offer-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: 2px var(--space-2) 2px 2px;
  border: 1px solid var(--blush);
  border-radius: var(--radius);
  background: var(--blush-tint);
  font-size: var(--text-xs);
  line-height: 1.4;
  max-width: 100%;
}

.offer-badge__label {
  padding: 1px 6px;
  border-radius: var(--radius);
  background: var(--blush);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.offer-badge__time { color: var(--blush-text); font-weight: 600; }

.offer-badge.is-urgent { border-color: var(--gold); }
.offer-badge.is-urgent .offer-badge__label { background: var(--gold); }
.offer-badge.is-urgent .offer-badge__time { color: var(--accent-text); }

/* Site-wide strip under the header. */
.offer-banner {
  background: var(--blush-tint);
  border-bottom: 1px solid var(--blush);
  font-size: var(--text-sm);
}

.offer-banner.is-urgent {
  background: var(--gold);
  border-bottom-color: var(--gold-deep);
  color: var(--ink);
}

.offer-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-2);
}

.offer-banner__text { margin: 0; max-width: none; }
.offer-banner__price { margin-left: var(--space-2); font-weight: 600; }
.offer-banner__price s { font-weight: 400; opacity: 0.7; margin-left: 4px; }
.offer-banner__time { opacity: 0.85; }

.offer-banner__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
}

.offer-banner.is-urgent .offer-banner__link { color: var(--ink); }

/* Home page offer cards. */
.offers { background: var(--blush-tint); }
.offers__grid { margin-top: var(--space-5); }

.offer-card {
  display: flex;
  flex-direction: column;
  border-color: var(--blush);
  background: var(--bg);
}

.offer-card__name { font-size: var(--text-md); margin-bottom: var(--space-2); }

.offer-card__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-md);
}

.offer-card__fine { margin: var(--space-3) 0 0; }

.chip__offer {
  padding: 0 6px;
  border-radius: var(--radius);
  background: var(--blush);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.totals__row--saving .totals__label,
.totals__row--saving .totals__value { color: var(--success); font-weight: 600; }

/* ---- chosen treatments ---- */

.basket {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* Directly beneath another block on the details step — no need for the gap. */
.summary--when + .basket { margin-top: 0; }

.basket__empty { margin: var(--space-6) 0 0; }

.basket__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  max-width: none;
}

.basket__name {
  font-weight: 600;
  margin-bottom: 2px;
}

.basket__item p { margin: 0; max-width: 46ch; }

.basket__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

.basket__remove {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.basket__remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}

@media (max-width: 560px) {
  .basket__item {
      grid-template-columns: 1fr auto;
      row-gap: var(--space-2);
  }

  .basket__meta { grid-column: 1; }
  .basket__remove { grid-row: 1 / span 2; }
}

/* Shown when a group booking lists per-person prices above party totals. */
.basket__note {
  margin: var(--space-3) 0 0;
  max-width: none;
}

/* ---- booking totals ---- */

.totals {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-alt);
}

.totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.totals__row--main {
  border-top: 1px solid var(--line);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}

.totals__label { color: var(--fg-muted); font-size: var(--text-sm); }

.totals__row--main .totals__label {
  color: var(--fg);
  font-weight: 600;
  font-size: var(--text-base);
}

.totals__value { font-family: var(--font-display); font-weight: 600; }

.totals__row--main .totals__value { font-size: var(--text-lg); }

.totals__note {
  margin: var(--space-2) 0 0;
  color: var(--fg-muted);
  max-width: none;
}

.totals--compact {
  margin-top: 0;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
}

.totals__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
}

.totals__names { font-weight: 600; }

.totals__row--sub {
  padding-top: 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

/* The "for 3 people" tag, wherever a selection is summarised. */
.totals__party,
.summary__party {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: middle;
}
.totals__figures { color: var(--fg-muted); white-space: nowrap; }
.totals__figures strong { color: var(--fg); }

/* ---- pagination ---- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.pager__pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pager__page,
.pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pager__page:hover,
.pager__step:hover { border-color: var(--line-strong); color: var(--fg); }

.pager__page.is-current {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
}

/* Kept in the DOM rather than removed, so the row does not jump width between
   pages — but inert to both pointer and keyboard. */
.pager__step.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pager__status {
  margin-top: var(--space-3);
  text-align: center;
}

@media (max-width: 520px) {
  .pager { gap: var(--space-2); }
  .pager__step { flex: 1 1 100%; order: 2; }
  .pager__pages { order: 1; flex: 1 1 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Visually hidden / skip link
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}

.skip-link:focus { top: var(--space-4); color: var(--ink); }

/* --------------------------------------------------------------------------
   MudBlazor overrides — pull Material back towards the brand
   -------------------------------------------------------------------------- */

.mud-typography { font-family: var(--font-body); }
.mud-input, .mud-input-label, .mud-button-root { font-family: var(--font-body); }

.mud-button-root {
  border-radius: var(--radius);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.mud-paper, .mud-card, .mud-dialog, .mud-picker-paper, .mud-popover {
  border-radius: var(--radius-card);
  background-color: var(--surface);
  color: var(--fg);
}

.mud-dialog-title { font-family: var(--font-display); letter-spacing: var(--tracking-display); }

.mud-input-outlined-border { border-color: var(--line-strong); border-radius: var(--radius); }

/* Material's ripple and heavy elevation are the two things that most give the
   game away — flatten both. */
.mud-ripple { display: none; }
.mud-elevation-1, .mud-elevation-2, .mud-elevation-3, .mud-elevation-4 { box-shadow: none; }
.mud-dialog, .mud-popover-cascading { box-shadow: var(--shadow); }

/* --------------------------------------------------------------------------
   Admin
   Same tokens as the public site, deliberately plainer and denser: this is a
   tool Becky uses, not a shop window. Gold appears only on the active nav item
   and primary buttons.
   -------------------------------------------------------------------------- */

.admin-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

.admin-header__title { font-size: var(--text-xl); margin: 0; }
.admin-header__lede { margin: var(--space-2) 0 0; }

.admin-block { margin-bottom: var(--space-7); }

.admin-block__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}

/* ---- stat row ---- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

.stat {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  line-height: 1;
}

.stat__label {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---- tables ---- */

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  margin-bottom: var(--space-4);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.admin-table th,
.admin-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.admin-table th {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
  white-space: nowrap;
}

.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--surface-alt); }

.admin-table tr.is-cancelled td { opacity: 0.55; }
.admin-table tr.is-cancelled td:nth-child(2) { text-decoration: line-through; }

.booking-note { margin: var(--space-2) 0 0; max-width: 32ch; }

.warning-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.warning-list li { margin-bottom: var(--space-1); }

/* ---- admin forms ---- */

.admin-form {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
}

.admin-form__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .admin-form__row--2 { grid-template-columns: 1fr 1fr; }
  .admin-form__row--3 { grid-template-columns: repeat(3, 1fr); }
}

.admin-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.offer-editor {
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
}

.offer-editor.is-on {
  border-style: solid;
  border-color: var(--blush);
  background: var(--blush-tint);
}

.offer-editor .admin-form__row { margin-top: var(--space-4); }

.offer-editor__preview {
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-3);
  border-left: 2px solid var(--gold);
  background: var(--surface);
  font-weight: 600;
}

.offer-admin-note { color: var(--blush-text); font-weight: 600; }

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.admin-toolbar__spacer { margin-left: auto; }

/* --------------------------------------------------------------------------
   Blazor's own error strip
   -------------------------------------------------------------------------- */

#blazor-error-ui {
  color-scheme: light only;
  background: var(--warning);
  color: #FFFFFF;
  bottom: 0;
  box-shadow: var(--shadow);
  display: none;
  left: 0;
  padding: var(--space-3) var(--space-4);
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Blazor focuses the page h1 after navigation so screen readers announce the
   new page. That focus is programmatic, not the user tabbing, so no ring. */
h1[tabindex="-1"]:focus,
h1:focus:not(:focus-visible) {
    outline: none;
}