/* booking.css — shared styles for the booking module (booking.js).
 *
 * Extracted VERBATIM from vacation-rentals.html so the widget renders identically
 * wherever it mounts — the grid modal AND the /stay/{slug} pages. Depends on the
 * shared.css design tokens (--pine, --gold, --parchment, --radius, etc.).
 *
 * (While the grid modal still carries its own inline copy, this file + that copy
 * are the same rules; the inline copy is removed when the modal adopts booking.js.)
 */

/* ── NATIVE DIRECT-BOOKING MODULE (calendar + quote + reserve) ── */
/* ~~background:var(--pine)~~ SUPERSEDED 2026-08-26 (Elec, calendar-grounds
   round): the pine box made the WHOLE calendar read grey. Transparent lets
   each surface's own navy show through - the modal glass inside the
   one-sheet, the page ground on /stay - which is his "blue background of
   the rest of the modal", by construction. Border and padding stand. */
.bk { background:transparent; border:2px solid var(--gold-border); border-radius:var(--radius); padding:1.4rem 1.35rem; max-width:420px; }
/* Book layout: calendar (left) + optional property recap (right); recap drops below when narrow */
.bk-layout { display:flex; gap:1.75rem; align-items:flex-start; }
.bk-recap { flex:1 1 0; min-width:0; padding-top:0.15rem; }
.bk-recap .card-desc { -webkit-line-clamp: 7; line-clamp: 7; }
.bk-recap-top { margin-bottom:0.55rem; }
.bk-loading { text-align:center; color:var(--sage); font-style:italic; font-family:var(--display); padding:2.5rem 0; }
.bk-from { text-align:center; margin:0 -1.35rem 1.4rem; padding:0 1.35rem 1.4rem; border-bottom:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.bk-from .amt { font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--gold); }
.bk-from .lbl { font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-left:0.4rem; }
.bk-from-pre { font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-right:0.4rem; }
.cal-nav { display:flex; align-items:center; justify-content:space-between; max-width:344px; margin:0 auto 0.6rem; }
.cal-month { font-family:var(--display); font-size:1.15rem; font-weight:600; }
.cal-arrow { width:32px; height:32px; border:1px solid var(--gold-line); border-radius:50%; background:transparent; color:var(--gold); font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all 0.16s; }
.cal-arrow:hover:not(:disabled) { background:var(--gold-dim); border-color:var(--gold); }
.cal-arrow:disabled { opacity:0.25; cursor:default; }
.cal-dow { display:grid; grid-template-columns:repeat(7,48px); gap:1px; width:-webkit-fit-content; width:fit-content; margin:0 auto 4px; padding:0 2px; }
.cal-dow span { text-align:center; font-size:0.56rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--sage); }
/* Grid ground TRANSPARENT (Elec 2026-08-27, on the sheet's property calendar:
   "the current background id call 'greyed out' and would only like it this
   way on specific days that are not available.. available days show the
   underlying background.. spacer cells also not greyed"). The gold-line wash
   here was the old gridline trick — container bg through 1px gaps — and once
   the 08-26 grounds round made the cells transparent it surfaced as a slab
   over the whole month. Ground gone; the gold frame border stays (line-work);
   only .unavail/.past cells carry their per-day slate cloud. */
.cal-grid { display:grid; grid-template-columns:repeat(7,48px); gap:1px; width:-webkit-fit-content; width:fit-content; margin:0 auto; background:transparent; border:2px solid var(--gold-line); border-radius:var(--radius-sm); overflow:hidden; }
/* GROUNDS (Elec 2026-08-26, extending his approved overlay grammar to EVERY
   surface this calendar renders on - modal book pane + /stay: "only the
   already booked days ... grey and not selectable. other dates ... show the
   nightly rate ... AND have the blue background of the rest of the modal.
   any cell ... blank ... also in blue instead of grey"). Cells are
   TRANSPARENT so the surrounding surface's own navy shows through - that IS
   "the blue of the rest of the modal", by construction. Grey survives only
   as the dead-day slate cloud (the flow-and-glow form he approved after
   rejecting two slabs). Unavailable days were never clickable (booking.js
   binds click to .avail only). */
.cal-cell { width:48px; height:52px; border:none; background:transparent; color:var(--parchment); border-radius:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--body); font-size:0.82rem; font-weight:500; padding:0; transition:background 0.13s,color 0.13s; }
.cal-cell .px { font-size:0.75rem; color:var(--sage); font-weight:400; margin-top:2px; line-height:1; white-space:nowrap; }
.cal-cell.avail .px { color:var(--gold); }
.cal-cell.empty { background:transparent; cursor:default; }
.cal-cell.avail { cursor:pointer; }
.cal-cell.avail:hover:not(.end) { background:rgba(201,169,110,0.1); }
/* Elec 2026-08-27 tune: "on the unavailable days id like to still be able to
   read the date more by it being more opaque, and the background to be
   slightly more greyed out" — ink 0.2 -> 0.38, cloud 0.34/0.12 -> 0.46/0.18. */
.cal-cell.unavail, .cal-cell.past { color:rgba(245,240,232,0.38); cursor:default;
  background:radial-gradient(ellipse 70% 62% at center,
    rgba(54,66,83,0.46) 0%, rgba(54,66,83,0.18) 60%, transparent 100%); }
.cal-cell.unavail .px, .cal-cell.past .px { visibility:hidden; }
/* SELECTION (Elec 2026-08-26: "the effects of clicking just turn the whole
   cell golden, id like the selection of days to match the popout calendar
   with semi transparent circle that stretch a gold bar to the check out
   date which also get the faded out gold circle upon click"). The popout's
   ring grammar, verbatim values (engine-layout .dr-pop rules): endpoints =
   translucent gold circle + 2px inset ring, clean (no half-bars - his
   "endpoints sit clean" ruling); the in-between days carry the slim
   centred connector. ~~gold slab .end / gold-dim .in-range / edge-radius
   trims~~ retired. Hover guarded :not(.end) like the popout's :not(.sel). */
.cal-cell.in-range { background:linear-gradient(rgba(201,169,110,0.13), rgba(201,169,110,0.13)) center/100% 58% no-repeat; }
.cal-cell.end { border-radius:50%; background:rgba(201,169,110,0.18);
  box-shadow:inset 0 0 0 2px var(--gold); color:var(--parchment); font-weight:700; }
/* Elec 2026-08-28, on the property calendar: "the text is hard to read. all is
   in script white font that gets progressively smaller each line. the 'select
   your date..' line should be the all cap font in gold." Measured stack before:
   hint 17.28px Cormorant italic pale-parchment -> cue 14.4px Cormorant italic
   sage; two script lines shrinking into each other with nothing to separate
   them. The hint now takes the chrome register - body face, uppercase, tracked,
   gold - so it reads as the instruction it is and stops competing with the
   prose line below it. */
.bk-hint { font-size:0.8rem; color:var(--gold); text-align:center; margin-top:0.7rem; margin-bottom:1rem; min-height:1.1em; font-style:normal; font-family:var(--body); font-weight:600; text-transform:uppercase; letter-spacing:0.14em; }
.bk-ctl { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0; border-top:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.bk-ctl:first-of-type { margin-top:0.8rem; }
.bk-ctl-label { font-size:0.9rem; }
.bk-ctl-sub { font-size:0.66rem; color:var(--sage); }
.bk-step { display:flex; align-items:center; gap:0.85rem; }
.bk-step-btn { width:28px; height:28px; border:1px solid var(--gold-line); border-radius:50%; background:transparent; color:var(--gold); font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:all 0.16s; }
.bk-step-btn:hover:not(:disabled) { background:var(--gold-dim); border-color:var(--gold); }
.bk-step-btn:disabled { opacity:0.25; cursor:default; }
.bk-step-val { min-width:1.1rem; text-align:center; font-size:0.92rem; }
.bk-toggle { position:relative; width:44px; height:25px; border-radius:13px; background:var(--mist); border:1px solid var(--gold-line); transition:background 0.2s; flex-shrink:0; cursor:pointer; }
.bk-toggle.on { background:var(--gold); }
.bk-toggle::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:var(--parchment); transition:transform 0.2s var(--ease-out); }
.bk-toggle.on::after { transform:translateX(19px); background:var(--forest); }
.bk-quote:not(:empty) { margin-top:0.3rem; padding-top:1rem; border-top:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.bk-q-line { display:flex; justify-content:space-between; align-items:baseline; font-size:0.8rem; color:rgba(245,240,232,0.82); margin-bottom:0.55rem; }
.bk-q-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.bk-q-total .lbl { font-family:var(--display); font-size:1.1rem; font-weight:600; }
.bk-q-total .val { font-family:var(--display); font-size:1.45rem; font-weight:700; color:var(--gold); }
.bk-q-dep { font-size:0.68rem; color:var(--sage); text-align:right; margin-top:0.3rem; }
.bk-q-loading { text-align:center; color:var(--sage); font-style:italic; font-family:var(--display); padding:0.8rem 0; }
.bk-q-err { color:#cf9a86; font-size:0.8rem; text-align:center; padding:0.6rem 0; line-height:1.5; }
.bk-reserve { width:100%; margin-top:1rem; padding:0.9rem; background:rgba(201,169,110,0.25); color:var(--parchment); border:2px solid var(--gold); border-radius:var(--radius-sm); font-family:var(--body); font-size:0.8rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; transition:background 0.18s; }
.bk-reserve:hover:not(:disabled) { background:rgba(201,169,110,0.75); }
.bk-reserve:disabled { opacity:0.4; cursor:default; }
.bk-inquire { display:block; width:100%; margin-top:0.6rem; padding:0.35rem; background:transparent; color:var(--gold); border:none; font-family:var(--body); font-size:0.72rem; font-weight:600; letter-spacing:0.06em; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.bk-inquire:hover { color:var(--parchment); }
.bk-inquire[hidden] { display:none; }
.bk-guest { display:none; }
.bk-guest.show { display:block; }
.bk-field { margin-bottom:0.8rem; }
.bk-field label { display:block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage); margin-bottom:0.35rem; }
.bk-field input, .bk-field textarea { width:100%; padding:0.7rem 0.85rem; background:var(--forest); border:1px solid var(--gold-line); border-radius:var(--radius-sm); color:var(--parchment); font-family:var(--body); font-size:16px; outline:none; transition:border-color 0.18s; -webkit-appearance:none; resize:vertical; }
.bk-field input:focus, .bk-field textarea:focus { border-color:var(--gold); }
.bk-row2 { display:flex; gap:0.6rem; }
.bk-row2 .bk-field { flex:1; min-width:0; }
.bk-optin { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.76rem; color:var(--sage); margin:0.2rem 0 0.9rem; cursor:pointer; }
.bk-optin input { margin-top:0.2rem; accent-color:var(--gold); }
.bk-back { background:none; border:none; color:var(--gold); font-size:0.74rem; cursor:pointer; font-family:var(--body); padding:0; margin-bottom:0.85rem; }
.bk-summary { font-size:0.8rem; color:var(--sage); line-height:1.7; margin-bottom:1rem; padding:0.85rem; background:var(--forest); border:1px solid var(--gold-line); border-radius:var(--radius-sm); }
.bk-summary strong { color:var(--parchment); }
.bk-msg { font-size:0.84rem; text-align:center; padding:0.6rem 0; min-height:1.1em; line-height:1.6; }
.bk-msg.ok { color:var(--parchment); font-family:var(--display); font-style:italic; font-size:1.1rem; }
.bk-msg.err { color:#cf9a86; }
.book-fallback { text-align:center; font-size:0.78rem; color:var(--sage); margin-top:1.1rem; }
.book-fallback a { color:var(--gold); text-decoration:underline; }

/* ── responsive (same breakpoints as the source) ── */
@media(max-width:768px) {
  .bk-layout { flex-direction:column; gap:1.35rem; }
  .bk { max-width:none; }
  .bk-recap { border-top:1px solid var(--gold-line); margin-left:-1.1rem; margin-right:-1.1rem; padding:1.35rem 1.1rem 0; }
}
@media(max-width:480px) {
  .bk { padding:1.2rem 0.9rem; }
  .cal-nav { max-width:290px; }
  .cal-dow, .cal-grid { grid-template-columns:repeat(7,40px); }
  .cal-cell { width:40px; height:48px; }
  .bk-from { margin-left:-0.9rem; margin-right:-0.9rem; padding-left:0.9rem; padding-right:0.9rem; }
}
@media(max-width:360px) {
  .cal-nav { max-width:262px; }
  .cal-dow, .cal-grid { grid-template-columns:repeat(7,36px); }
  .cal-cell { width:36px; height:46px; }
}

/* ── EMBEDDED CHECKOUT OVERLAY (booking.js openCheckout) ──────────────────────
   The Hostfully DBS checkout, embedded in an on-brand panel so the guest never
   leaves simplyhome.us. Our CSS controls the frame's CHROME (backdrop, panel,
   bar, sizing); the DBS canvas INSIDE the frame is themed by booking-theme.css
   (Hostfully white-label). The frame-wrap is cream (--sh-cream #F4EFE6) to match
   the DBS canvas so there's no color flash while it loads. */
body.bkco-lock { overflow: hidden; }
/* Base state is VISIBLE (opacity 1, transform none). The entrance animation is a
   pure enhancement with NO backwards fill — so if a browser pauses/skips animations
   (headless, reduced-motion, etc.) the overlay simply appears, never stuck hidden. */
.bkco-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 2.5vh 2vw; background: rgba(13,17,25,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: bkco-fade 0.24s var(--ease-out); }
.bkco-overlay.closing { animation: bkco-fadeout 0.2s var(--ease-out) forwards; }
.bkco-panel { width: 100%; max-width: 1120px; height: 92vh; display: flex; flex-direction: column;
  background: var(--forest); border: 2px solid var(--gold-border); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 80px rgba(13,17,25,0.7); animation: bkco-rise 0.26s var(--ease-out); }
@keyframes bkco-fade { from { opacity: 0; } }
@keyframes bkco-fadeout { to { opacity: 0; } }
@keyframes bkco-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.bkco-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-shrink: 0;
  padding: 0.85rem 1.25rem; background: var(--pine); border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.bkco-bar-title { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-size: 1.12rem;
  color: var(--parchment); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkco-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; box-shadow: 0 0 10px rgba(201,169,110,0.8); }
.bkco-bar-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.bkco-newtab { color: var(--sage); font-size: 0.72rem; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; }
.bkco-newtab:hover { color: var(--gold); text-decoration: underline; }
.bkco-close { width: 34px; height: 34px; border: 1px solid var(--gold-line); border-radius: var(--radius-sm); background: transparent;
  color: var(--sage); font-size: 1.35rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.18s; font-family: var(--body); }
.bkco-close:hover { border-color: var(--gold); color: var(--parchment); background: rgba(201,169,110,0.1); }
.bkco-frame-wrap { position: relative; flex: 1 1 auto; min-height: 0; background: #F4EFE6; }
.bkco-frame { width: 100%; height: 100%; border: 0; display: block; }
.bkco-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--sage); background: #F4EFE6; }
.bkco-spinner { width: 18px; height: 18px; border: 2px solid rgba(201,169,110,0.3); border-top-color: var(--gold);
  border-radius: 50%; animation: bkco-spin 0.7s linear infinite; }
@keyframes bkco-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .bkco-overlay { padding: 0; }
  .bkco-panel { height: 100vh; height: 100dvh; max-width: none; border: 0; border-radius: 0; }
  .bkco-bar-title { font-size: 0.98rem; }
  .bkco-newtab { display: none; }
}

/* ── URGENCY COPY under Book & Pay (Elec 2026-08-27 — his words verbatim in
   booking.js; ⚠ DRAFT pending his eyes). Quiet register per the design law:
   an invitation, never an alert. Lead line speaks in parchment with the
   direct-booking claim carrying the weight; the fill-fast line recedes in
   sage. Engine sheet only — the markup is calOverlay-gated. */
.bk-urgency { margin: 0.65rem 0 0.15rem; text-align: center; }
.bk-urgency p { margin: 0; }
.bk-u-lead { color: var(--parchment); font-size: 0.82rem; letter-spacing: 0.035em; }
.bk-u-line { color: var(--sage); font-size: 0.74rem; margin-top: 0.2rem; letter-spacing: 0.025em; }

/* ── SCROLL CUE UNDER THE PROPERTY CALENDAR (Elec 2026-08-27, verbatim:
   "directly after the property specific calendar there should something
   suggesting that all the details are just a little scroll down. right now it
   looks empty beneath and a scroll here would almost be accidental").
   The blank he is describing is real and has a cause: engine-responsive's
   `.bk-calwrap.open ~ *{visibility:hidden}` (the no-tails rule from earlier the
   same night) blanks the booking controls that sit below the calendar, so they
   hold their layout space while showing nothing. The details themselves are
   fine - a whole pane of photos and amenities - just below the fold with nothing
   announcing them. This names them and points.
   ⚑ SCOPED TO THE ONE-SHEET: the /stay page mounts the same module with an
   inline calendar and no detail pane beneath, so the cue would point at nothing
   there. Default none, shown only inside .bd-modal. */
.bk-scrollcue { display: none; }
.bd-modal .bk-scrollcue {
  display: flex; flex-direction: column; align-items: center; gap: 0.12rem;
  width: 100%; margin-top: 0.55rem; padding: 0.15rem 0 0.1rem;
  background: none; border: 0; cursor: pointer; font-family: var(--display);
}
/* "and the last line should increased in size" (Elec 2026-08-28) - it was the
   smallest of the stack at 0.9rem, the bottom of the shrinking ladder he
   objected to. Now the largest line under the calendar, and with the hint above
   it moved to the gold chrome register the two no longer read as one fading
   run of script. */
.bd-modal .bk-scrollcue-t {
  font-style: italic; font-size: 1.08rem; color: var(--sage);
  transition: color 0.32s var(--ease-out);
}
/* The chevron is drawn, not typed: a glyph would carry a font's own baseline
   and sit off-centre under the line. Two borders on a rotated square land the
   point exactly under the text's midpoint. */
.bd-modal .bk-scrollcue-c {
  width: 0.46rem; height: 0.46rem; margin-top: 0.1rem;
  border-right: 1.3px solid var(--gold); border-bottom: 1.3px solid var(--gold);
  transform: rotate(45deg); transform-origin: center;
  opacity: 0.85;
}
.bd-modal .bk-scrollcue:hover .bk-scrollcue-t { color: var(--parchment); }
/* MOTION LAW (Design-Language §2): one heartbeat, 2.6s - the gesture plays
   through one beat and RESTS through the next, so the cycle is 5.2s (2x) with
   the movement confined to the first beat. "every couple of seconds", never
   constant fidgeting. transform-origin pinned so the nudge cannot drift the
   glyph off the text's centre line. */
@keyframes bkCueNudge {
  0%, 4%   { transform: rotate(45deg) translate(0, 0); }
  12%      { transform: rotate(45deg) translate(1.6px, 1.6px); }
  20%      { transform: rotate(45deg) translate(0, 0); }
  28%      { transform: rotate(45deg) translate(1.1px, 1.1px); }
  38%, 100%{ transform: rotate(45deg) translate(0, 0); }
}
.bd-modal .bk-scrollcue-c { animation: bkCueNudge 5.2s var(--ease-out) infinite; }
@media (prefers-reduced-motion: reduce) {
  .bd-modal .bk-scrollcue-c { animation: none; }
}