/*
 * Booking pages: the forms, the calendar, the chooser and a booking's own page.
 * Loaded only on those pages (ebd_head 'stylesheets'), so the rest of the site
 * pays nothing for it. Mobile-first, like everything else.
 */

/* ---- layout -------------------------------------------------------------- */
.booking { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 64rem) {
  .booking { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--sp-6); }
  .booking-summary { position: sticky; top: 5.5rem; }
}

.booking-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-4);
  scroll-margin-top: 5rem;
}
@media (min-width: 48rem) { .booking-step { padding: var(--sp-5) var(--sp-6); } }
.booking-step > h2 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}
.step-n {
  display: inline-grid; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0;
}
.step-help { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); max-width: var(--measure); }
.optional { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); letter-spacing: 0; }

/* ---- fields --------------------------------------------------------------- */
.field { margin: 0 0 var(--sp-4); padding: 0; border: 0; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > legend {
  display: block; padding: 0;
  font-size: var(--fs-sm); font-weight: 600;
  margin-bottom: var(--sp-1);
}
.field-help { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 var(--sp-2); }
.field-narrow { max-width: 16rem; margin-top: var(--sp-5); }
.field-row { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48rem) { .field-row-3 { grid-template-columns: 1fr 1fr 1fr; } }

.booking input[type="text"], .booking input[type="email"], .booking input[type="url"],
.booking input[type="date"] {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid #d6d6d1;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: max(16px, var(--fs-base)); /* 16px stops iOS zooming into the field */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.booking input::placeholder { color: #9a9ca0; }
.booking input:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.booking input[aria-invalid="true"] { border-color: var(--price-fg); }
.booking input[type="file"] { font: inherit; font-size: var(--fs-sm); max-width: 100%; }

.field-error {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm); color: var(--price-fg); font-weight: 550;
}
.field-error::before { content: "!"; flex: none; display: inline-grid; place-items: center;
  width: 1.1rem; height: 1.1rem; margin-top: .1rem; border-radius: 50%;
  background: var(--price-fg); color: #fff; font-size: .7rem; font-weight: 800; }
.booking-step > .field-error { margin: 0 0 var(--sp-3); }

.note {
  font-size: var(--fs-sm);
  background: var(--sunken);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-2) 0 0;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- the calendar ---------------------------------------------------------- */
.cal { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.cal-month { margin: 0; padding: 0; border: 0; min-width: 0; }
.cal-title { font-size: var(--fs-sm); font-weight: 650; margin: 0 0 var(--sp-2); padding: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); padding-bottom: 2px; }

.cal-day {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 3.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  line-height: 1.1;
  text-decoration: none;
  color: var(--text);
  user-select: none;
}
.cal-num { font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-left { font-size: .62rem; margin-top: 2px; color: var(--text-muted); white-space: nowrap; }
.cal-day.is-open { background: var(--free-bg); border-color: #cbe8d5; }
.cal-day.is-open .cal-left { color: var(--free-fg); }
.cal-day.is-some { background: var(--warn-bg); border-color: var(--warn-line); }
.cal-day.is-some .cal-left { color: var(--warn-fg); }
.cal-day.is-full { background: var(--sunken); color: #a3a5a8; }
.cal-day.is-full .cal-num { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-day.is-full .cal-left { color: #a3a5a8; }
.cal-day.is-out { color: #c4c5c7; }
.cal-day.is-out .cal-num { font-weight: 450; }
.cal-day.is-today::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
}

/* Pick mode: the radio is invisible; the whole cell is the control. */
label.cal-day { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
label.cal-day input { position: absolute; opacity: 0; pointer-events: none; }
@media (hover: hover) {
  label.cal-day:hover, a.cal-day:hover { box-shadow: 0 0 0 2px var(--brand) inset; }
}
label.cal-day:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--brand) inset, var(--ring); }
label.cal-day:has(input:checked) {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 4px 10px -4px rgba(36, 86, 166, .6);
  transform: translateY(-1px);
}
label.cal-day:has(input:checked) .cal-left { color: rgba(255, 255, 255, .85); }
label.cal-day:has(input:checked) .cal-left::before { content: "✓ "; }
/* Browsers without :has() still show which day is chosen. */
label.cal-day input:checked ~ .cal-num { text-decoration: underline; text-underline-offset: 3px; }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.cal-legend li { display: flex; align-items: center; gap: var(--sp-2); }
.cal-swatch { width: .9rem; height: .9rem; border-radius: 3px; border: 1px solid; }
.cal-swatch.is-open { background: var(--free-bg); border-color: #cbe8d5; }
.cal-swatch.is-some { background: var(--warn-bg); border-color: var(--warn-line); }
.cal-swatch.is-full { background: var(--sunken); border-color: var(--border); }

/* ---- segmented choice (run length) ------------------------------------------ */
.segmented {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--sunken); border-radius: var(--radius);
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; }
.segmented span {
  display: block; padding: .45rem 1rem; border-radius: calc(var(--radius) - 3px);
  font-size: var(--fs-sm); font-weight: 550; color: var(--text-muted);
}
.segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { box-shadow: var(--ring); }

/* ---- store / add-on choices -------------------------------------------------- */
.choice-list { display: grid; gap: var(--sp-2); }
@media (min-width: 40rem) { .choice-list { grid-template-columns: 1fr 1fr; } }
.choice {
  border: 1px solid #d6d6d1;
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.choice.is-on, .choice:has(> .choice-head input:checked) { border-color: var(--brand); background: #f5f8fd; }
.choice-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  min-height: 3.25rem;
}
.choice-head input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); flex: none; margin: 0; }
.choice-name { flex: 1; font-weight: 600; font-size: var(--fs-base); }
.choice-sub { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.choice-price { font-weight: 650; font-variant-numeric: tabular-nums; }
.choice-detail { padding: 0 var(--sp-4) var(--sp-3); }
/* With JavaScript, a store's link field only appears once the store is chosen.
   Without it every field shows, and the server says which ones it needs. */
.booking.js .choice:not(.is-on) > [data-reveal] { display: none; }
.booking-step > .choice { margin-bottom: var(--sp-5); }

.boost { margin-top: var(--sp-5); }
.boost-options { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr; }
@media (min-width: 48rem) { .boost-options { grid-template-columns: repeat(4, 1fr); } }
.boost-opt {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: var(--sp-3);
  min-height: 3.6rem;
  border: 1px solid #d6d6d1; border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
}
.boost-opt input { position: absolute; opacity: 0; }
.boost-reach { font-size: var(--fs-sm); font-weight: 550; line-height: 1.25; }
.boost-price { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 650; }
.boost-opt:has(input:checked) { border-color: var(--brand); background: #f5f8fd; box-shadow: 0 0 0 1px var(--brand) inset; }
.boost-opt:has(input:checked) .boost-price { color: var(--brand); }
.boost-opt:has(input:focus-visible) { box-shadow: var(--ring); }
.boost-opt input:checked ~ .boost-reach { color: var(--brand); } /* no-:has() fallback */

.socials { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.socials summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--brand); }
.socials[open] summary { margin-bottom: var(--sp-4); }

/* ---- summary ------------------------------------------------------------------- */
.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-5);
}
.summary-card h2 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.summary-date { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-4); }
.summary-lines { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.summary-lines li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border);
}
.summary-lines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: var(--sp-3) 0 var(--sp-5);
  font-weight: 600;
}
.summary-total strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.consent { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); cursor: pointer; }
.consent input { margin-top: 2px; width: 1rem; height: 1rem; accent-color: var(--brand); flex: none; }
.btn-lg { min-height: 3.1rem; font-size: var(--fs-md); }
.summary-note { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--sp-3) 0 0; text-align: center; }

/* ---- a booking's own page ---------------------------------------------------------- */
.booking-done { max-width: 62rem; }
.booking-kicker { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-1); }
.ref { font-family: var(--font-mono); font-weight: 600; color: var(--text); letter-spacing: .04em; }
.booking-lede { font-size: var(--fs-md); max-width: var(--measure); }
.hold-timer { font-variant-numeric: tabular-nums; color: var(--warn-fg); font-weight: 600; }
.booking-done-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); align-items: start; }
@media (min-width: 48rem) { .booking-done-grid { grid-template-columns: 1fr 1fr; } }
.booking-facts { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-sm); }
.booking-facts dt { color: var(--text-muted); }
.booking-facts dd { margin: 0; font-weight: 550; }
.pay-card .flash { margin: var(--sp-3) 0 0; }

/* ---- calendar page -------------------------------------------------------------------- */
.type-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  background: var(--sunken); border-radius: var(--radius);
  margin-bottom: var(--sp-5);
}
.type-tabs a {
  padding: .5rem 1.1rem; border-radius: calc(var(--radius) - 3px);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.type-tabs a:hover { color: var(--text); }
.type-tabs a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.cal-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 48rem) { .cal-panel { padding: var(--sp-5) var(--sp-6); } }
a.cal-day.is-open, a.cal-day.is-some { transition: box-shadow .12s ease; }
.cal-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ---- chooser ---------------------------------------------------------------------------- */
.product-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 56rem) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.product-card.is-featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-md); }
.product-card h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.product-price { margin: 0 0 var(--sp-3); }
.product-price strong { font-size: var(--fs-2xl); letter-spacing: -.03em; }
.product-blurb { font-size: var(--fs-sm); color: var(--text-muted); }
.product-includes { list-style: none; padding: 0; margin: 0 0 var(--sp-5); font-size: var(--fs-sm); }
.product-includes li { position: relative; padding-left: 1.5rem; margin-bottom: var(--sp-2); }
.product-includes li::before { content: "✓"; position: absolute; left: 0; color: var(--free); font-weight: 800; }
.product-actions { margin-top: auto; display: grid; gap: var(--sp-2); text-align: center; }
.product-more { font-size: var(--fs-sm); }
.house-rules {
  margin-top: var(--sp-6);
  max-width: var(--measure);
}
.house-rules h2 { font-size: var(--fs-lg); }
.house-rules ul { padding-left: 1.2rem; }
.house-rules li { margin-bottom: var(--sp-2); }

/* Under the Amazon field: what was recognised in it. */
.asin-note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.asin-note.is-found { color: var(--free-fg); font-weight: 600; }

/* Payment */
.pay-amount { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -.02em; margin: var(--sp-2) 0 var(--sp-4); }
.pay-amount .muted { font-size: var(--fs-sm); font-weight: 500; }
.btn-paypal { background: #ffc439; color: #111 !important; border-color: #ffc439; font-weight: 700; }
.btn-paypal:hover { background: #f2b52e; border-color: #f2b52e; }
.confirm-wait { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-weight: 600; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--brand); animation: ebdSpin .8s linear infinite; }
@keyframes ebdSpin { to { transform: rotate(360deg); } }

/* ---- contact form (views/contact_form.php) --------------------------------- */
.contact { max-width: 44rem; margin-top: var(--sp-4); }
.contact-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 48rem) { .contact-card { padding: var(--sp-6); } }
.contact-form > .flash { margin: 0 0 var(--sp-4); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form select, .contact-form textarea {
  width: 100%; padding: .7rem .8rem;
  border: 1px solid #d6d6d1; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: max(16px, var(--fs-base));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form textarea { resize: vertical; min-height: 10rem; line-height: 1.5; }
.contact-form select { appearance: none; padding-right: 2.2rem;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2363666b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center; }
.contact-form :is(input, select, textarea):focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.contact-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--price-fg); }
.contact-form > .flash p { margin: 0; }
.contact-form .field[hidden] { display: none; }
.contact-note { margin: 0 0 var(--sp-4); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); }
.contact-privacy { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 29.99rem) { .contact-actions .btn { width: 100%; } }
.contact-sent { text-align: center; padding-block: var(--sp-7); }
.contact-sent h2 { font-size: var(--fs-xl); margin: var(--sp-3) 0 var(--sp-2); }
.contact-sent p { color: var(--text-muted); max-width: 34rem; margin-inline: auto; }
.contact-sent-icon { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--free-bg); color: var(--free-fg); }
.contact-form .turnstile { margin-top: var(--sp-4); min-height: 65px; } /* the widget's height: no jump when it loads */
.contact-form .turnstile + .field-error { margin-top: 0; }