/* 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) ── */
.bk { background:var(--pine); 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); }
.cal-grid { display:grid; grid-template-columns:repeat(7,48px); gap:1px; width:-webkit-fit-content; width:fit-content; margin:0 auto; background:var(--gold-line); border:2px solid var(--gold-line); border-radius:var(--radius-sm); overflow:hidden; }
.cal-cell { width:48px; height:52px; border:none; background:var(--pine); 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.empty { background:var(--pine); cursor:default; }
.cal-cell.avail { cursor:pointer; }
.cal-cell.avail:hover { background:rgba(201,169,110,0.1); }
.cal-cell.unavail, .cal-cell.past { color:rgba(245,240,232,0.2); cursor:default; }
.cal-cell.unavail .px, .cal-cell.past .px { visibility:hidden; }
.cal-cell.in-range { background:var(--gold-dim); border-radius:0; }
.cal-cell.end { background:var(--gold); color:var(--forest); }
.cal-cell.end .px { color:rgba(13,17,25,0.6); }
.cal-cell.start { border-top-right-radius:0; border-bottom-right-radius:0; }
.cal-cell.finish { border-top-left-radius:0; border-bottom-left-radius:0; }
.bk-hint { font-size:1.08rem; color:var(--sage); text-align:center; margin-top:0.7rem; margin-bottom:1rem; min-height:1.1em; font-style:italic; font-family:var(--display); }
.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; }
}