/* Public booking page (calendar-site skill), in Real Agent brand dress.
   Self-contained — no shared tokens, no web fonts, no CDN, since this ships to
   Cloudflare Pages, not the admin shell. Colours sampled from the Real Agent
   booking page. booking.js is untouched; every class it builds at runtime
   (bk-nav, bk-arrow, bk-nav-label, bk-day, bk-day-title, bk-day-slots, bk-slot,
   bk-day-empty, bk-extend*) is styled here. */
:root {
  --bk-bg: #fafaf8;
  --bk-card: #ffffff;
  --bk-ink: #161616;
  --bk-muted: #6b6b66;
  --bk-line: #e3e3e0;
  --bk-line-strong: #d5d5ce;
  --bk-lime: #d6fd52;
  --bk-accent: #161616;
  --bk-accent-ink: #ffffff;
  --bk-radius: 14px;
  --bk-radius-card: 22px;
  --bk-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
             Helvetica, Arial, 'Noto Sans', sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bk-bg);
  color: var(--bk-ink);
  font-family: var(--bk-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- brand bar ---------------------------------------------------------- */
.ra-bar {
  background: var(--bk-ink);
  color: #ffffff;
}
.ra-bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ra-mark {
  width: 26px;
  height: 24px;
  flex: none;
  color: #ffffff;
}
.ra-wordmark {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ra-wordmark-alt { color: var(--bk-lime); }

/* ---- page shell --------------------------------------------------------- */
.ra-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 28px 64px;
}
.ra-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}

/* ---- statement headline ------------------------------------------------- */
.ra-lede { max-width: 34rem; }
.ra-headline {
  margin: 0 0 28px;
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.ra-headline-plain,
.ra-headline-block { display: block; }
.ra-headline-plain { color: var(--bk-ink); }
.ra-headline-block {
  width: fit-content;
  margin-top: 0.08em;
  padding: 0.1em 0.2em 0.16em;
  background: var(--bk-ink);
  color: var(--bk-lime);
}
.ra-lede-copy {
  margin: 0;
  max-width: 30rem;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--bk-muted);
}

/* ---- booking card ------------------------------------------------------- */
.bk-card {
  background: var(--bk-card);
  border-radius: var(--bk-radius-card);
  padding: 36px 36px 40px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.bk-badge {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 15px 8px;
  border-radius: 999px;
  background: var(--bk-lime);
  color: var(--bk-ink);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}

.bk-title {
  margin: 0 0 4px;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.bk-sub { margin: 0; color: var(--bk-muted); font-size: 1.02rem; }
.bk-sub:empty { display: none; }
.bk-status { margin: 14px 0 0; color: var(--bk-muted); font-size: 0.95rem; }
.bk-status:empty { display: none; }

.bk-slots { display: block; margin-top: 22px; }
/* booking.js hides this section by setting .hidden once a slot is picked. The
   display rule above would otherwise beat the UA [hidden] rule and leave the
   slot list on screen behind the form, so keep `hidden` authoritative. */
.bk-slots[hidden] { display: none; }

/* ---- five-day window pager (built by booking.js) ------------------------ */
.bk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.bk-nav-label {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bk-ink);
}
.bk-arrow {
  flex: none;
  border: 1px solid var(--bk-line);
  background: var(--bk-card);
  color: var(--bk-ink);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  font-size: 1.15rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.bk-arrow:hover:not(:disabled) { border-color: var(--bk-ink); background: #f4f4f1; }
.bk-arrow:disabled { opacity: 0.3; cursor: default; }

/* ---- day groups and slots (built by booking.js) ------------------------- */
.bk-day { margin-bottom: 26px; }
.bk-day:last-child { margin-bottom: 0; }
.bk-day-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bk-ink);
}
.bk-day-slots { display: flex; flex-wrap: wrap; gap: 12px; }
.bk-day-empty { margin: 0; font-size: 0.92rem; color: var(--bk-muted); }

.bk-slot {
  flex: 0 1 auto;
  min-width: 112px;
  border: 1px solid var(--bk-line-strong);
  background: var(--bk-card);
  color: var(--bk-ink);
  border-radius: 12px;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.bk-slot:hover { border-color: var(--bk-ink); background: var(--bk-lime); }
.bk-slot:focus-visible { outline: 2px solid var(--bk-ink); outline-offset: 2px; }

/* ---- extend / shorten a back-to-back booking (operator-enabled) --------- */
.bk-extend { display: flex; gap: 10px; margin: 0 0 6px; }
.bk-extend-btn {
  border: 1px solid var(--bk-line-strong);
  background: var(--bk-card);
  color: var(--bk-ink);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.bk-extend-btn:hover:not(:disabled) { border-color: var(--bk-ink); background: var(--bk-lime); }
.bk-extend-btn:disabled { opacity: 0.4; cursor: default; }

/* ---- form --------------------------------------------------------------- */
.bk-form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
/* The form's display:flex would otherwise beat the UA [hidden] rule and show
   the form before a slot is picked; this keeps `hidden` authoritative. */
.bk-form[hidden] { display: none; }
.bk-chosen { font-weight: 700; font-size: 1.05rem; margin: 0; }
.bk-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bk-muted);
}
.bk-input {
  border: 1px solid var(--bk-line-strong);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--bk-ink);
  background: var(--bk-card);
  font-family: inherit;
}
.bk-input:focus { outline: 2px solid var(--bk-ink); outline-offset: 1px; border-color: var(--bk-ink); }

/* honeypot — visually and from the layout removed, still in the DOM for bots */
.bk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bk-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.bk-back {
  background: var(--bk-card);
  border: 1px solid var(--bk-line-strong);
  border-radius: 12px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--bk-muted);
}
.bk-back:hover { border-color: var(--bk-ink); color: var(--bk-ink); }
.bk-submit {
  background: var(--bk-accent);
  color: var(--bk-accent-ink);
  border: 1px solid var(--bk-accent);
  border-radius: 12px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.bk-submit:hover:not(:disabled) { background: var(--bk-lime); color: var(--bk-ink); }
.bk-submit:disabled { opacity: 0.6; cursor: default; }

.bk-done { text-align: center; padding: 20px 0 4px; }
.bk-done-title { margin: 0 0 8px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.bk-done-msg { color: var(--bk-muted); margin: 0; }

/* ---- brand strip -------------------------------------------------------- */
/* Sits on white so the Real Agency JPEG's own white plate disappears into the
   band. One shared height does not level these three, because their internal
   padding AND their lettering scale both differ. Measured off the files, the
   wordmark height as a fraction of the image is 0.21 (muvin), 0.114 (Real
   Agent) and 0.157 (Real Agency) — so an equal box would render Real Agent's
   type at half the size of muvin's. Each box below is sized to bring all three
   wordmarks to the same ~6.6px cap height, which is what the eye actually
   reads as "one row"; the outer boxes then land within 3px of each other. */
.bk-brands {
  background: var(--bk-card);
  border-top: 1px solid var(--bk-line);
  padding: 34px 28px 38px;
  text-align: center;
}
.bk-brands-title {
  margin: 0 0 22px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-muted);
}
.bk-brands-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 52px;
}
.bk-brand { display: flex; }
.bk-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
}
.bk-brand-img {
  display: block;
  width: auto;
  object-fit: contain;
  opacity: 0.78;
  filter: grayscale(100%);
  transition: opacity 0.18s ease, filter 0.18s ease;
}
/* Per-logo boxes, tuned against how each file actually renders. */
/* Solid-tile artwork: fills its square, so it is the smallest box and carries a
   touch less opacity than the line-art marks to stop the block dominating. */
.bk-brand-muvin {
  height: 32px;
  width: 32px;
  border-radius: 5px;
  opacity: 0.66;
}
/* Stacked lockup with ~40% internal whitespace and the smallest lettering of
   the three, so it needs the largest box to read level. */
.bk-brand-ra {
  height: 58px;
  width: 58px;
}
/* Landscape plate; nudged down 1px because its artwork sits above the file's
   vertical centre. */
.bk-brand-ragency {
  height: 42px;
  width: 55px;
  transform: translateY(1px);
}
.bk-brand-link:hover .bk-brand-img,
.bk-brand-link:focus-visible .bk-brand-img {
  opacity: 1;
  filter: grayscale(0%);
}
.bk-brand-link:focus-visible { outline: 2px solid var(--bk-ink); outline-offset: 4px; }

/* ---- tablet ------------------------------------------------------------- */
@media (max-width: 900px) {
  .ra-page { padding: 48px 24px 48px; }
  .ra-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .ra-lede { max-width: none; }
  .ra-headline { font-size: clamp(2.4rem, 9vw, 3.6rem); margin-bottom: 20px; }
  .ra-lede-copy { font-size: 1.08rem; max-width: 36rem; }
}

/* ---- phone -------------------------------------------------------------- */
@media (max-width: 560px) {
  .ra-bar-inner { padding: 15px 20px; gap: 11px; }
  .ra-mark { width: 22px; height: 20px; }
  .ra-wordmark { font-size: 1.12rem; }

  .ra-page { padding: 36px 20px 40px; }
  .ra-headline { font-size: clamp(2.1rem, 12vw, 3rem); }
  .ra-lede-copy { font-size: 1.02rem; }

  .bk-card { padding: 24px 20px 28px; border-radius: 18px; }
  .bk-title { font-size: 1.55rem; }
  .bk-arrow { width: 40px; height: 40px; }
  .bk-nav-label { font-size: 0.92rem; }
  .bk-day-slots { gap: 10px; }
  .bk-slot {
    /* Half-width pairs that wrap; grow is off so an odd last slot stays half
       width instead of stretching across the card. */
    flex: 0 0 calc(50% - 5px);
    min-width: 0;
    padding: 13px 10px;
    text-align: center;
  }
  .bk-actions { flex-direction: column-reverse; }
  .bk-back, .bk-submit { width: 100%; }

  .bk-brands { padding: 28px 20px 32px; }
  .bk-brands-row { gap: 18px 34px; }
}

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