/* ---- The booking page: the "Calm" look ----
   For a site whose Booking page look is Calm (booking_settings.guest_look). guest-pages.js
   marks the page <html data-site-look="calm">, adds this file, the fonts and the website-style
   header before sending it, so nothing flashes. Every other site never gets this file.

   Made to match a calm hand-built website: cream paper, Fraunces headings, Karla text, a teal
   (sage) for "chosen", a deep clay for the one main button, near-black teal (mud) bands.
   Colours are checked for older eyes: body text 14:1, muted text 5:1 or better, button text
   6:1, every tap target at least 48px.

   The colours are set on <body>, not <html>: branding.js sets a site's own brand colours
   inline on <html>, and this look deliberately keeps the website's palette instead. A
   custom property on <body> wins for everything inside it. Presentation only — no step,
   price or payment behaves any differently. */

html[data-site-look="calm"] body {
  --calm-bg: #EDE4CC;
  --calm-paper: #F7F1DF;
  --calm-field: #FFFCF3;
  --calm-ink: #241F1A;
  --calm-muted: #665F49;
  --calm-line: #D6CBAE;
  --calm-sage: #2F6E60;          /* the logo's teal, a step deeper so it reads as text */
  --calm-clay: #9E4A2E;          /* the website's clay, deepened for 6:1 white text */
  --calm-on-clay: #FFFFFF;
  --calm-mud: #16302A;
  --calm-on-mud: #F7F1DF;
  --calm-lavender: #6B4E91;
  --calm-display: 'Fraunces', Georgia, serif;
  --calm-body: 'Karla', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --calm-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* The app's own tokens, pointed at the palette above. */
  --canvas: var(--calm-bg);
  --canvas-light: var(--calm-paper);
  --surface: var(--calm-paper);
  --surface-alt: color-mix(in srgb, var(--calm-ink) 7%, var(--calm-paper));
  --surface-sunken: var(--calm-bg);
  --field-bg: var(--calm-field);
  --ink: var(--calm-ink);
  --muted: var(--calm-muted);
  --bark: var(--calm-muted);
  --line: var(--calm-line);
  --pine: var(--calm-sage);
  --pine-light: var(--calm-sage);
  --on-pine: var(--calm-paper);
  --amber: var(--calm-clay);
  --on-amber: var(--calm-on-clay);
  --clay: var(--calm-clay);
  --dusk: var(--calm-lavender);
  --tint-good: color-mix(in srgb, var(--calm-sage) 15%, var(--calm-paper));
  --tint-warn: color-mix(in srgb, var(--calm-clay) 13%, var(--calm-paper));
  --tint-bad: color-mix(in srgb, #B23A55 13%, var(--calm-paper));
  --shadow: rgba(22, 48, 42, 0.10);
  --radius: 10px;
  color-scheme: light;
}
html[data-site-look="calm"][data-theme="dark"] body {
  --calm-bg: #1B2620;
  --calm-paper: #22302A;
  --calm-field: #1A2520;
  --calm-ink: #EDE7D3;
  --calm-muted: #B9AF95;
  --calm-line: #3B4A42;
  --calm-sage: #7FC0AF;
  --calm-clay: #E08258;
  --calm-on-clay: #16130F;
  --calm-mud: #0F1815;
  --calm-on-mud: #EDE7D3;
  --calm-lavender: #B49BD6;
  --on-pine: #16130F;
  --shadow: rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
html[data-site-look="calm"] { background: var(--calm-bg, #EDE4CC); }
html[data-site-look="calm"][data-theme="dark"] { background: #1B2620; }

/* The page itself. !important only to win over a page colour/pattern a site set in
   Branding (set inline on <body> by branding.js) — this look has its own. */
html[data-site-look="calm"] body {
  background: var(--calm-bg) !important;
  background-image: none !important;
  color: var(--calm-ink);
  font-family: var(--calm-body);
  font-size: 18px;
}
html[data-site-look="calm"] h1,
html[data-site-look="calm"] h2,
html[data-site-look="calm"] h3 {
  font-family: var(--calm-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--calm-ink);
}
html[data-site-look="calm"] .bk a { color: inherit; }
html[data-site-look="calm"] :focus-visible { outline: 3px solid var(--calm-sage); outline-offset: 2px; }

/* The platform's own header gives way to the website's (below). */
html[data-site-look="calm"] header.topbar { display: none !important; }

/* ---- The website's header ---- */
.calm-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.4rem;
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  background: var(--calm-bg); border-bottom: 1px solid var(--calm-line);
  position: sticky; top: 0; z-index: 40;
}
.calm-mark {
  display: flex; align-items: center; gap: 0.6rem; min-height: 48px; min-width: 0;
  font-family: var(--calm-display); font-weight: 700; font-size: 1.12rem; line-height: 1.15;
  color: var(--calm-ink); text-decoration: none;
}
.calm-mark-icon { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.calm-links { display: flex; align-items: center; gap: 1.5rem; }
.calm-links a {
  color: var(--calm-ink); text-decoration: none; font-size: 1rem; min-height: 48px;
  display: inline-flex; align-items: center;
}
.calm-links a:hover { color: var(--calm-clay); text-decoration: underline; }
.calm-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.calm-round {
  width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--calm-line); border-radius: 50%; background: transparent; color: var(--calm-ink); cursor: pointer; padding: 0;
}
.calm-round:hover { border-color: var(--calm-ink); }
.calm-theme .icon-sun { display: none; }
.calm-theme[data-mode="dark"] .icon-sun { display: block; }
.calm-theme[data-mode="dark"] .icon-moon { display: none; }
.calm-menu { display: none; border: 0; }
.calm-menu-theme { display: none; }
.calm-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 48px;
  padding: 0 1.2rem; border-radius: 4px; text-decoration: none; white-space: nowrap;
  font-family: var(--calm-mono); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--calm-mud); color: var(--calm-on-mud); border: 1px solid var(--calm-mud);
}
.calm-ghost { background: transparent; color: var(--calm-ink); border-color: var(--calm-ink); padding: 0 0.95rem; }
/* In dark mode the mud button sits on an almost-as-dark page, so it gets a visible edge. */
html[data-site-look="calm"][data-theme="dark"] .calm-cta:not(.calm-ghost) { border-color: var(--calm-muted); }
/* Dark Reader decides light/dark itself, so a switch that can't change anything is hidden. */
html[data-darkreader-scheme] .calm-theme, html[data-darkreader-mode] .calm-theme,
html[data-darkreader-scheme] .calm-menu-theme, html[data-darkreader-mode] .calm-menu-theme { display: none !important; }

@media (max-width: 1099px) {
  .calm-menu { display: inline-flex; }
  .calm-has-menu .calm-theme { display: none; }
  .calm-links {
    order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    display: none;
  }
  .calm-links.open { display: flex; padding-bottom: 0.4rem; }
  .calm-links a { padding: 0.35rem 0; border-bottom: 1px solid var(--calm-line); font-size: 1.1rem; }
  .calm-menu-theme {
    display: block; min-height: 48px; text-align: left; background: none; border: 0; padding: 0;
    color: var(--calm-ink); font: inherit; font-size: 1.1rem; text-decoration: underline; cursor: pointer;
  }
}
@media (max-width: 560px) {
  .calm-nav { padding: 0.5rem 1rem; column-gap: 0.4rem; }
  .calm-mark { font-size: 1rem; gap: 0.5rem; }
  .calm-mark-icon { width: 32px; height: 32px; }
  .calm-right { gap: 0.35rem; }
  .calm-ghost { width: 48px; padding: 0; }
  .calm-ghost span { display: none; }
  .calm-cta { padding: 0 1rem; }
}

/* The site's announcement bar sits above the header, as on the website. */
html[data-site-look="calm"] .announce-bar { background: var(--calm-mud); color: var(--calm-on-mud); font-family: var(--calm-body); font-weight: 600; }

/* ---- The booking steps ---- */
html[data-site-look="calm"] .bk {
  --bk-font: var(--calm-body);
  --bk-ok: var(--calm-sage);
  font-size: 19px;
  max-width: 680px;
  padding-top: 1.6rem;
}
html[data-site-look="calm"] .bk h2 { font-size: 1.85rem; line-height: 1.15; margin-bottom: 1rem; }
html[data-site-look="calm"] .bk h3 { font-size: 1.3rem; }
html[data-site-look="calm"] .bk .card {
  background: var(--calm-paper); border: 1px solid var(--calm-line); border-radius: 16px;
  box-shadow: 0 14px 40px var(--shadow); padding: 1.6rem 1.4rem 1.7rem;
}
html[data-site-look="calm"] .card::before { display: none; }
html[data-site-look="calm"] .bk .card .card { box-shadow: none; }

/* Where you are: "Step 2 of 6" said plainly, then the four parts as pills. */
html[data-site-look="calm"] .bk .bk-progress { display: flex; flex-direction: column; gap: 0.55rem; margin: 0 0 1.1rem; }
html[data-site-look="calm"] #bk-step-text {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  order: -1; font-family: var(--calm-mono); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--calm-sage);
}
html[data-site-look="calm"] .bk .bk-steps { gap: 0.4rem; }
html[data-site-look="calm"] .bk .bk-steps span {
  border: 1px solid var(--calm-line); border-radius: 100px; padding: 0.45rem 0.3rem;
  font-size: 0.9rem; line-height: 1.2; color: var(--calm-muted); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
html[data-site-look="calm"] .bk .bk-steps span.done { border-color: var(--calm-sage); color: var(--calm-sage); }
html[data-site-look="calm"] .bk .bk-steps span.done::before { content: "✓ "; white-space: pre; }
html[data-site-look="calm"] .bk .bk-steps span.on { background: var(--calm-sage); border-color: var(--calm-sage); color: var(--on-pine); }

/* The short lines at the top */
html[data-site-look="calm"] .bk .bk-signin,
html[data-site-look="calm"] .bk .bk-club,
html[data-site-look="calm"] .bk .bk-note { border-radius: 12px; font-size: 1.02rem; }
html[data-site-look="calm"] .bk .bk-signin { background: transparent; border: 1px solid var(--calm-line); }
html[data-site-look="calm"] .bk .bk-signin a,
html[data-site-look="calm"] .bk .bk-club a { color: var(--calm-sage); font-weight: 700; }

/* Questions, fields, help */
html[data-site-look="calm"] .bk .bk-q { font-size: 1.1rem; }
html[data-site-look="calm"] .bk .bk-help { color: var(--calm-muted); font-size: 1rem; }
html[data-site-look="calm"] .bk .bk-field,
html[data-site-look="calm"] .bk input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-site-look="calm"] .bk select,
html[data-site-look="calm"] .bk textarea {
  background: var(--calm-field); color: var(--calm-ink); border: 2px solid var(--calm-muted);
  border-radius: 10px; min-height: 52px; font-size: 1.1rem;
}
html[data-site-look="calm"] .bk textarea { min-height: 5rem; }
html[data-site-look="calm"] .bk .bk-field:focus,
html[data-site-look="calm"] .bk input:focus,
html[data-site-look="calm"] .bk select:focus,
html[data-site-look="calm"] .bk textarea:focus { outline: 3px solid var(--calm-sage); outline-offset: 1px; border-color: var(--calm-sage); }

/* Buttons: one deep clay button per step, everything else plain outlines. */
html[data-site-look="calm"] .bk button.btn,
html[data-site-look="calm"] .bk a.btn {
  background: var(--calm-clay); color: var(--calm-on-clay); border: 2px solid var(--calm-clay);
  border-radius: 6px; min-height: 56px; font-family: var(--calm-body); font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
html[data-site-look="calm"] .bk button.btn:hover { filter: brightness(0.94); }
html[data-site-look="calm"] .bk button.btn.secondary,
html[data-site-look="calm"] .bk a.btn.secondary,
html[data-site-look="calm"] .bk .club-offer-pay #club-join-btn {
  background: transparent; color: var(--calm-ink); border: 2px solid var(--calm-ink);
}
html[data-site-look="calm"] .bk button.btn:disabled { background: var(--calm-line); border-color: var(--calm-line); color: var(--calm-muted); filter: none; }
html[data-site-look="calm"] .bk .step-nav { border-top: 1px solid var(--calm-line); padding-top: 1.2rem; margin-top: 1.8rem; }
html[data-site-look="calm"] .bk .bk-link { color: var(--calm-sage); min-height: 48px; }
html[data-site-look="calm"] .bk details summary { min-height: 48px; display: flex; align-items: center; color: var(--calm-ink); }

/* Tiles, yes/no and choices */
html[data-site-look="calm"] .bk .bk-tile,
html[data-site-look="calm"] .bk .bk-choice,
html[data-site-look="calm"] .bk .bk-tick:not(.bk-tick-small),
html[data-site-look="calm"] .bk .bf-face {
  border: 2px solid var(--calm-line); background: var(--calm-field); color: var(--calm-ink); border-radius: 12px;
}
html[data-site-look="calm"] .bk .bk-tile { min-height: 56px; font-size: 1.08rem; }
html[data-site-look="calm"] .bk .bk-yesno .bk-tile { min-height: 52px; min-width: 5.6rem; }
html[data-site-look="calm"] .bk .bk-tile:hover,
html[data-site-look="calm"] .bk .bk-choice:hover:not(.gone) { border-color: var(--calm-ink); }
html[data-site-look="calm"] .bk .bk-tile[aria-checked="true"],
html[data-site-look="calm"] .bk .bk-choice.on,
html[data-site-look="calm"] .bk .bk-tick.on:not(.bk-tick-small),
html[data-site-look="calm"] .bk .bf-face[aria-checked="true"] {
  border: 3px solid var(--calm-sage); background: var(--tint-good);
}
html[data-site-look="calm"] .bk .bk-choice { padding: 0.85rem 1rem; min-height: 64px; }
html[data-site-look="calm"] .bk .bk-choice-main b { font-family: var(--calm-display); font-weight: 600; font-size: 1.2rem; }
html[data-site-look="calm"] .bk .bk-choice-main small { font-size: 0.98rem; color: var(--calm-muted); }
html[data-site-look="calm"] .bk .bk-pill { background: var(--tint-good); color: var(--calm-ink); }
html[data-site-look="calm"] .bk .bk-pill.on { background: var(--calm-sage); color: var(--on-pine); }
html[data-site-look="calm"] .bk .bk-step-btn { border-color: var(--calm-sage); color: var(--calm-sage); background: var(--calm-field); }
html[data-site-look="calm"] .bk .bk-stepper { background: var(--calm-field); border-color: var(--calm-line); }
html[data-site-look="calm"] .bk .bk-tick input { accent-color: var(--calm-sage); }

/* Pitch types as cards: the price a night first, the stay's total under it. */
html[data-site-look="calm"] .bk .bk-choice-price { font-family: var(--calm-display); font-size: 1.3rem; font-weight: 600; }
html[data-site-look="calm"] .bk .bk-choice-price[data-night] {
  display: block; text-align: right; font-family: var(--calm-body); font-size: 0.98rem; font-weight: 400;
  color: var(--calm-muted); white-space: normal;
}
html[data-site-look="calm"] .bk .bk-choice-price[data-night]::before {
  content: attr(data-night); display: block; white-space: nowrap;
  font-family: var(--calm-display); font-size: 1.3rem; font-weight: 600; color: var(--calm-ink);
}
html[data-site-look="calm"] .bk .bk-choice-price[data-night]::after { content: " " attr(data-for); }
@media (min-width: 600px) {
  html[data-site-look="calm"] .bk #category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  html[data-site-look="calm"] .bk #category-cards > :not(.bk-choice) { grid-column: 1 / -1; }
  html[data-site-look="calm"] .bk .bk-cat { flex-direction: column; align-items: stretch; padding: 0 0 1rem; overflow: hidden; gap: 0.5rem; }
  html[data-site-look="calm"] .bk .bk-cat .bk-thumb { width: 100%; height: 150px; border-radius: 0; }
  html[data-site-look="calm"] .bk .bk-cat .bk-choice-main,
  html[data-site-look="calm"] .bk .bk-cat .bk-choice-price { padding: 0 1rem; }
  html[data-site-look="calm"] .bk .bk-cat:not(:has(.bk-thumb)) { padding-top: 1rem; }
  html[data-site-look="calm"] .bk .bk-cat .bk-choice-price,
  html[data-site-look="calm"] .bk .bk-cat .bk-choice-price[data-night] { margin-left: 0; text-align: left; margin-top: auto; }
}

/* The pitch map and pitch buttons */
html[data-site-look="calm"] .pitch-section-title {
  font-family: var(--calm-mono); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; color: var(--calm-sage);
  margin: 0.4rem 0 0.7rem;
}
html[data-site-look="calm"] .bk .pitch-chip {
  min-height: 52px; border-radius: 10px; border: 2px solid var(--calm-line); background: var(--calm-field);
  color: var(--calm-ink); font-family: var(--calm-body); font-size: 1.08rem; align-items: center; padding: 0.55rem 1rem;
}
html[data-site-look="calm"] .bk .pitch-chip:hover { border-color: var(--calm-ink); }
html[data-site-look="calm"] .bk .pitch-chip-electric { border-color: color-mix(in srgb, var(--calm-lavender) 55%, var(--calm-line)); }
html[data-site-look="calm"] .bk .pitch-chip.selected { background: var(--calm-sage); border-color: var(--calm-sage); color: var(--on-pine); }
html[data-site-look="calm"] .bk .pitch-chip .pc-meta { opacity: 0.85; font-size: 0.95rem; }
html[data-site-look="calm"] #pitch-map-image-wrap { border-radius: 12px; overflow: hidden; }

/* The calendar */
html[data-site-look="calm"] .bk .drp-trigger {
  background: var(--calm-field); border: 2px solid var(--calm-muted); border-radius: 10px; min-height: 56px; color: var(--calm-ink);
}
html[data-site-look="calm"] .bk .drp-trigger:hover,
html[data-site-look="calm"] .bk .drp-trigger[aria-expanded="true"] { border-color: var(--calm-sage); }
html[data-site-look="calm"] .bk .drp-nights-badge { color: var(--calm-sage); background: var(--tint-good); font-weight: 700; }
html[data-site-look="calm"] .bk .drp-popover {
  width: min(400px, 100%); background: var(--calm-paper); border: 1px solid var(--calm-line);
  border-radius: 14px; box-shadow: 0 14px 40px var(--shadow);
}
html[data-site-look="calm"] .bk .drp-month-label { font-family: var(--calm-display); font-size: 1.2rem; }
html[data-site-look="calm"] .bk .drp-nav button {
  width: 48px; height: 48px; border-radius: 50%; background: transparent; border: 1px solid var(--calm-line); color: var(--calm-ink);
}
html[data-site-look="calm"] .bk .drp-weekdays span { font-family: var(--calm-mono); color: var(--calm-muted); }
html[data-site-look="calm"] .bk .drp-day { font-family: var(--calm-body); font-size: 1.1rem; min-height: 44px; border-radius: 8px; }
html[data-site-look="calm"] .bk .drp-day:disabled { color: color-mix(in srgb, var(--calm-muted) 55%, transparent); }
html[data-site-look="calm"] .bk .drp-day.drp-today { box-shadow: inset 0 0 0 2px var(--calm-sage); }
html[data-site-look="calm"] .bk .drp-day.drp-in-range { background: var(--tint-good); }
html[data-site-look="calm"] .bk .drp-day.drp-range-start,
html[data-site-look="calm"] .bk .drp-day.drp-range-end { background: var(--calm-sage); color: var(--on-pine); }

/* Check and pay */
html[data-site-look="calm"] .bk .bk-review { border: 2px solid var(--calm-sage); border-radius: 12px; background: var(--calm-field); }
html[data-site-look="calm"] .bk .bk-review .row { border-top-color: var(--calm-line); }
html[data-site-look="calm"] .bk .bk-review a { color: var(--calm-sage); font-weight: 700; }
html[data-site-look="calm"] .bk .bk-total { font-family: var(--calm-display); font-weight: 600; font-size: 1.4rem; }
html[data-site-look="calm"] .bk .bk-paytoday,
html[data-site-look="calm"] .bk .bk-sofar { background: var(--tint-good); border-radius: 12px; }
html[data-site-look="calm"] .bk .bk-paytoday .now { font-family: var(--calm-display); font-weight: 600; font-size: 1.45rem; }
html[data-site-look="calm"] .bk .club-offer-pay { border-color: var(--calm-sage); border-radius: 12px; }
/* The card form is Stripe's own light design in both modes, so it sits on its own light
   paper panel (otherwise its dark labels would be lost on the dark card). */
html[data-site-look="calm"] .bk #payment-element:not(:empty) {
  background: #FFFCF3; border: 1px solid #D6CBAE; border-radius: 12px; padding: 1rem; color-scheme: light;
}
html[data-site-look="calm"] .bk .btn.bk-pay { min-height: 60px; font-size: 1.3rem; }
html[data-site-look="calm"] .bk .privacy-line { color: var(--calm-muted); font-size: 0.95rem; }
html[data-site-look="calm"] .bk .privacy-line a { color: var(--calm-sage); }

/* The price so far, kept in view: a mud band like the website's. */
html[data-site-look="calm"] .bk-pricebar {
  max-width: 680px; background: var(--calm-mud); color: var(--calm-on-mud);
  font-family: var(--calm-body); font-size: 1.1rem; border-radius: 14px 14px 0 0;
}
html[data-site-look="calm"] .bk-pricebar b { font-family: var(--calm-display); font-weight: 600; font-size: 1.4rem; }

/* After paying */
html[data-site-look="calm"] .bk .bk-done-tick { background: var(--calm-sage); color: var(--on-pine); }

/* Messages */
html[data-site-look="calm"] .bk .error-msg { font-size: 1rem; }

/* Footer: quiet, like the website's */
html[data-site-look="calm"] .site-footer {
  border-top: 1px solid var(--calm-line); margin-top: 2rem; padding: 1.6rem 1rem 2.6rem;
  font-family: var(--calm-body); font-size: 0.95rem; color: var(--calm-muted);
}
html[data-site-look="calm"] .site-footer a { color: var(--calm-muted); text-decoration-color: var(--calm-line); }

@media (max-width: 480px) {
  html[data-site-look="calm"] .bk { font-size: 18px; padding-left: 0.9rem; padding-right: 0.9rem; }
  html[data-site-look="calm"] .bk .card { padding: 1.3rem 1rem 1.4rem; border-radius: 14px; }
  html[data-site-look="calm"] .bk h2 { font-size: 1.6rem; }
  html[data-site-look="calm"] .bk .bk-steps span { font-size: 0.82rem; padding: 0.4rem 0.15rem; }
}