/* Live booking widget — calendar, time slots, deposit panel.
   Scoped to .bk-* so it cannot disturb the rest of the site. Colours all come
   from the theme variables the Worker injects, so the widget follows whichever
   scheme she has picked in the CMS. */

.bk-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 12px 0;
}

/* ── Calendar ───────────────────────────────────────────────────────── */

.bk-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bk-cal-head h3 {
  font-size: 1rem;
  margin: 0;
  font-family: var(--font-heading, inherit);
}

.bk-nav {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  /* Without this reset a bare <button> renders white-on-white in some themes. */
  -webkit-appearance: none;
  appearance: none;
}

.bk-nav:hover { background: var(--bg-secondary); }

.bk-dow,
.bk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.bk-dow span {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 6px;
}

.bk-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.85rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.bk-empty { visibility: hidden; }

.bk-open {
  cursor: pointer;
  background: var(--bg-secondary);
  border-color: var(--border);
  font-weight: 600;
}

.bk-open:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.bk-shut {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: default;
}

.bk-sel,
.bk-open.bk-sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Time slots ─────────────────────────────────────────────────────── */

.bk-slots-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 20px 0 10px;
}

.bk-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.bk-time {
  padding: 10px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.bk-time:hover { border-color: var(--accent); }

.bk-time.bk-sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ── Summary ────────────────────────────────────────────────────────── */

.bk-sum {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.bk-sum > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.bk-sum > div:last-child { border-bottom: 0; }

.bk-sum dt {
  color: var(--text-muted);
  margin: 0;
}

.bk-sum dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.bk-travel {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 6px;
  min-height: 1.2em;
}

.bk-travel-warn { color: #c0392b; }

/* ── Payment ────────────────────────────────────────────────────────── */

.bk-pay-head {
  text-align: center;
  margin-bottom: 18px;
}

.bk-amount {
  font-size: 2.2rem;
  font-family: var(--font-heading, inherit);
  color: var(--accent);
  display: block;
  line-height: 1.1;
}

.bk-consent {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 0.82rem;
  line-height: 1.55;
}

.bk-consent label {
  display: flex;
  gap: 10px;
  /* In a flex row the checkbox stretches to the text height without this. */
  align-items: flex-start;
  cursor: pointer;
  margin-top: 10px;
  font-weight: 600;
}

.bk-consent input { margin-top: 3px; flex-shrink: 0; }

/* The pane dims until the box is ticked, so nobody wonders why a button did
   nothing when they pressed it. */
.bk-locked #bk-paypal,
.bk-locked #bk-card {
  opacity: 0.45;
  pointer-events: none;
}

@keyframes bk-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.bk-shake { animation: bk-shake 0.4s; }

.bk-card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* PayPal renders each card field as an iframe that sizes ITSELF — about
   78px once its internal padding and validation row are counted. Pinning this
   wrapper to 44px clipped them, so the inputs spilled out and landed on top of
   the pay button. Let the iframe decide the height; this only draws the frame
   around it. */
/* No border, no background, no padding here on purpose. PayPal already
   draws a bordered, filled input inside its iframe, so anything drawn on this
   wrapper reads as a second frame around the first — a box within a box with a
   gap between them. This element exists only to position the iframe. */
.bk-cf {
  min-height: 78px;
}

.bk-cf iframe {
  width: 100% !important;
  display: block;
}

.bk-cf-full { grid-column: 1 / -1; }

.bk-or {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 4px;
}

.bk-timer {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
}

.bk-sandbox {
  display: none;
  background: #fff4d6;
  border: 1px solid #e0c060;
  color: #6b5310;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  margin-bottom: 14px;
}

/* ── Done ───────────────────────────────────────────────────────────── */

#bk-done {
  text-align: center;
  padding: 8px 0;
}

.bk-tick {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 10px;
}

#bk-done h3 {
  font-family: var(--font-heading, inherit);
  margin-bottom: 10px;
}

#bk-done p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* A class beats [hidden] when the class sets a display value, so this has to
   win explicitly. */
[hidden] { display: none !important; }

@media (max-width: 600px) {
  .bk-card-fields { grid-template-columns: 1fr; }
  .bk-times { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ── Page background from the CMS ───────────────────────────────────── */

/* Fixed rather than scrolling with the page: the booking form gets long once
   the calendar and the details are open, and a background that scrolls away
   halfway down looks like a mistake. The fade layer sits between the image and
   the content so the form stays readable over a busy photo. */

body.bk-has-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--bk-bg-image);
  background-size: cover;
  background-position: center;
  z-index: -2;
}

body.bk-has-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  opacity: var(--bk-bg-fade, 0.7);
  z-index: -1;
}

/* The page's own solid backgrounds would hide the image entirely, so the
   sections it covers go transparent and let the layers below show through. */
body.bk-has-bg,
body.bk-has-bg .page-hero,
body.bk-has-bg .section {
  background: transparent;
}

/* Cards stay opaque — that is what keeps the form itself legible. */
body.bk-has-bg .contact-info-card {
  background: var(--card-bg);
}

/* ── Confirmation modal ─────────────────────────────────────────────── */

/* The form runs long once the calendar and details are open, so replacing the
   content in place left people scrolled far below their own confirmation.
   An overlay puts the result where their eyes already are. */

.bk-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.bk-modal.open { opacity: 1; }

.bk-modal-card {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  padding: 34px 28px 28px;
  max-width: 430px;
  width: 100%;
  text-align: center;
  position: relative;
  margin: auto;
  transform: translateY(10px) scale(0.985);
  transition: transform 0.22s ease;
}

.bk-modal.open .bk-modal-card { transform: none; }

.bk-modal-x {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  -webkit-appearance: none;
  appearance: none;
}

.bk-modal-x:hover { color: var(--text-primary); }

.bk-modal-card h2 {
  font-family: var(--font-heading, inherit);
  font-size: 1.5rem;
  margin: 0 0 6px;
}

.bk-modal-when {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 14px;
}

.bk-modal-card p { line-height: 1.6; }

.bk-modal-lines p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.bk-addcal {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 18px;
}

.bk-addcal-label {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.bk-addcal-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.bk-addcal-btns .btn {
  flex: 1 1 150px;
  justify-content: center;
  font-size: 0.85rem;
}

.bk-qr-wrap { margin-top: 18px; }

.bk-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #fff;          /* QR needs light quiet zone even in a dark theme */
  border-radius: 10px;
  border: 1px solid var(--border);
  min-height: 96px;
  min-width: 96px;
}

.bk-qr svg { display: block; width: 116px; height: 116px; }

.bk-qr-cap {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 8px 0 0;
}

.bk-modal-foot {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 18px 0 16px;
}

.bk-modal-done { width: 100%; justify-content: center; }

/* Stops the page scrolling behind the overlay on iOS as well as desktop. */
html.bk-modal-open,
html.bk-modal-open body {
  overflow: hidden;
}

@media (max-width: 480px) {
  .bk-modal { padding: 12px; align-items: flex-start; }
  .bk-modal-card { padding: 28px 20px 22px; }
  .bk-addcal-btns .btn { flex: 1 1 100%; }
}

/* Sets the expectation that this is a file, not a one-tap add — clicking it
   downloads, and the calendar app opens when the file does. */
.bk-addcal-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: -6px 0 12px;
}

/* ── Service cards ──────────────────────────────────────────────────── */

/* Replaces a <select>. Length, price and deposit are the things being chosen
   between, so they are visible on the card rather than hidden behind a tap. */

.bk-svc-grid {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.bk-svc {
  display: flex;
  gap: 14px;
  align-items: stretch;
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  /* A bare <button> inherits a system background and renders white-on-white
     in the darker themes without this. */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.bk-svc:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.bk-svc:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bk-svc-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  background: var(--card-bg);
}

.bk-svc-img {
  flex: 0 0 74px;
  width: 74px;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-primary);
  align-self: stretch;
  min-height: 74px;
}

.bk-svc-img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.3rem;
}

.bk-svc-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;   /* lets long descriptions ellipsis instead of stretching */
  flex: 1;
}

.bk-svc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.bk-svc-name {
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font-heading, inherit);
}

.bk-svc-price {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.bk-svc-meta {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.bk-svc-dep { color: var(--accent); }

.bk-svc-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 420px) {
  .bk-svc-img { flex-basis: 56px; width: 56px; min-height: 56px; }
  .bk-svc-desc { -webkit-line-clamp: 3; }
}

/* ── Desktop layout ─────────────────────────────────────────────────── */

/* Mobile is deliberately untouched — the stacked flow works there. Everything
   below only applies once there is width to spend.
   The problem on a laptop was that the calendar sat in a narrow column with the
   times underneath it, so the month and the available times could never be on
   screen together and every choice meant scrolling. */

@media (min-width: 1000px) {
  /* Give the booking flow more of the row than the info sidebar. */
  /* NB: named bk-layout, not bk-grid — .bk-grid is already the calendar's
     own day grid, and reusing it here collapsed the month into two columns
     of enormous cells. */
  .bk-layout {
    grid-template-columns: 1.9fr 1fr;
    gap: 44px;
  }

  /* Month on the left, times on the right, header spanning both. */
  #bk-step-when {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-areas:
      "head slots"
      "cal  slots";
    gap: 8px 28px;
    align-items: start;
  }

  .bk-cal-head { grid-area: head; margin-bottom: 4px; }
  #bk-cal      { grid-area: cal; }
  #bk-slots    { grid-area: slots; }

  /* Two columns, and deliberately NO max-height: a scrolling list hides
     times behind a gesture, which is the opposite of the point. Even a full
     day fits in roughly the height of the month beside it. */
  #bk-slots .bk-times {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  #bk-slots .bk-time {
    padding: 9px 4px;
    font-size: 0.82rem;
  }

  #bk-slots .bk-slots-label { margin-top: 0; }

  /* Bigger, more legible cells now that there is room for them. */
  .bk-day {
    font-size: 0.95rem;
    border-radius: 10px;
  }

  .bk-dow span { font-size: 0.72rem; }

  .bk-dow,
  #bk-cal .bk-grid { gap: 6px; }
}

/* Available days need to read as clearly clickable, and unavailable ones as
   clearly not — at a glance, without reading. */
.bk-open {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bk-shut {
  opacity: 1;                    /* 0.4 on everything made the digits mushy */
  color: var(--text-muted);
  background: transparent;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.6;
}

/* Today, so the month has an anchor point. */
.bk-today:not(.bk-sel) {
  outline: 1px dashed var(--accent);
  outline-offset: -3px;
}