/* ==========================================================================
   Novo booking widget — shared styles.

   Extracted verbatim from calculator.html so the residential calculator and the
   vacant-land page render the SAME booking interface rather than two that drift.
   Duplication is not hypothetical here: the pricing page once embedded an older
   copy of the pricing engine and quoted different numbers from the calculator,
   which was the worst correctness bug in this build.

   Depends on shared.css for the palette and type tokens.
   ========================================================================== */

/* Step marker for the two-step booking. Same device as the glance panel's
   three-step version, so a visitor who met one recognises the other. */
.bk-steps{display:flex;gap:7px;align-items:center;margin-top:24px;}
.bk-dot{width:7px;height:7px;border-radius:50%;background:var(--line);}
.bk-dot.on{background:var(--gold-deep);}
.bk-dot.done{background:var(--ink-soft);}
.bk-steplab{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-soft);margin-left:8px;}
.bk-steps + .bk-head{margin-top:10px;}
.bk-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;}
.bk-title{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;font-size:22px;margin:0;}
.bk-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:36px;margin-top:16px;align-items:start;}
@media(max-width:860px){.bk-grid{grid-template-columns:1fr;gap:22px;}}
.bk-panel{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px 24px 24px;}
.bk-sec{margin-top:22px;}
.bk-sec:first-child{margin-top:0;}
.bk-lab{font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:560px){.bk-row{grid-template-columns:1fr;}}
.bk-field{display:block;}
.bk-field > span{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px;}
.bk-input,.bk-area{width:100%;font-family:var(--ff);font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:10px 12px;
  outline:none;transition:border-color .18s ease;}
.bk-input:focus,.bk-area:focus{border-color:var(--gold-deep);}
.bk-area{min-height:84px;resize:vertical;line-height:1.5;font-family:var(--ff);}
.bk-input.err,.bk-area.err{border-color:#a2432f;}
.bk-err{font-family:var(--fm);font-size:11px;color:#a2432f;margin-top:5px;}
.bk-note{font-family:var(--fm);font-size:11px;color:var(--gold-deep);margin-top:8px;line-height:1.5;}
/* option pills reuse the add-on shape so the form reads as one system */
.bk-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media(max-width:560px){.bk-opts{grid-template-columns:1fr;}}
.bk-opt{font-family:var(--ff);font-size:13.5px;text-align:left;padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background-color:var(--paper);color:var(--ink);cursor:pointer;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;}
.bk-opt:hover{border-color:var(--gold-deep);}
.bk-opt[aria-pressed="true"]{background-color:var(--ink);border-color:var(--ink);color:var(--paper);}
/* calendar */
/* The calendar fills its column. Capping the width to keep the cells square
   left a third of the row empty; fixing the cell HEIGHT instead lets the grid
   span the full width without growing 85px day boxes. */
.cal{border:1px solid var(--line);border-radius:6px;padding:14px;background:var(--paper);}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cal-mon{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:-.02em;}
.cal-nav{font-family:var(--fm);font-size:15px;line-height:1;width:32px;height:32px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;}
.cal-nav:hover:not(:disabled){border-color:var(--gold-deep);color:var(--ink);}
.cal-nav:disabled{opacity:.3;cursor:default;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px;}
.cal-dow span{font-family:var(--fm);font-size:11px;color:var(--ink-soft);text-align:center;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day{height:46px;font-family:var(--fm);font-size:12px;border-radius:5px;border:1px solid transparent;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;}
.cal-day:disabled{color:rgba(59,47,38,.22);cursor:default;}
.cal-day.has:not(:disabled):hover{border-color:var(--gold-deep);}
.cal-day.has{background-color:var(--paper-deep);}
.cal-day[aria-pressed="true"]{background-color:var(--ink);color:var(--paper);}
.cal-note{font-family:var(--fm);font-size:11px;color:var(--ink-soft);margin-top:10px;text-align:center;}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;margin-top:10px;}
.slot{font-family:var(--fm);font-size:12px;padding:9px 6px;border-radius:5px;border:1px solid var(--line);
  background-color:var(--paper);color:var(--ink);cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;}
.slot:hover{border-color:var(--gold-deep);}
.slot[aria-pressed="true"]{background-color:var(--ink);border-color:var(--ink);color:var(--paper);}
.slot-empty{font-size:13px;color:var(--ink-soft);margin-top:10px;}
/* summary */
.bk-sum{background:var(--paper-deep);border-radius:6px;padding:20px;position:sticky;top:20px;}
.bk-sum h4{font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;margin:0 0 10px;}
.bk-sum-tier{font-family:var(--fd);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1;}
.bk-sum-price{font-family:var(--fd);font-weight:800;font-size:40px;letter-spacing:-.04em;line-height:1;margin-top:6px;}
.bk-dur{font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:8px;}
.bk-sum-list{margin:14px 0 0;padding:0;list-style:none;}
.bk-sum-list li{font-size:13px;color:var(--ink-soft);padding:3px 0;display:flex;gap:7px;line-height:1.45;}
.bk-sum-list li::before{content:'✓';color:var(--gold-deep);flex:none;}
.bk-when{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;font-size:13.5px;line-height:1.5;}
.bk-when b{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;}
.bk-when .none{color:var(--ink-soft);}
.bk-submit{width:100%;margin-top:16px;}
.bk-fine{font-family:var(--fm);font-size:11px;color:var(--ink-soft);margin-top:10px;line-height:1.5;}
/* confirmation */
.bk-done{text-align:center;padding:38px 24px;}
.bk-done .tick{width:52px;height:52px;border-radius:999px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;}
.bk-done h3{font-family:var(--fd);font-weight:800;font-size:24px;letter-spacing:-.03em;margin:0 0 8px;}
.bk-done p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 auto;max-width:46ch;}

/* The package name and its escape hatch share a line. On land the packages are
   chosen on the embedding page, so "Change" asks the parent to swap back to the
   cards rather than showing a second list inside the frame. */
.bk-sum-tierrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;}
/* "Estate & development" is the longest package name and wraps to two lines in
   this column; letting the label drop below it beats squeezing the name. */
.bk-sum-tierrow .bk-change{white-space:nowrap;}
.bk-change{font-family:var(--fm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  background:none;border:none;padding:0;color:var(--ink-soft);cursor:pointer;flex:none;
  text-decoration:underline;text-underline-offset:4px;}
.bk-change:hover{color:var(--ink);}

/* ---- busy + empty states -------------------------------------------------
   A static "Working…" on a button reads as a frozen page: nothing moves while
   a request is in flight, so the only feedback is text that could equally mean
   it died. Motion is what distinguishes "in progress" from "broken", and an
   empty month has to SAY it is empty rather than render a grid of dead days
   (Justin, 2026-08-31). */
@keyframes novo-spin{to{transform:rotate(360deg);}}
.novo-spin{display:inline-block;width:1em;height:1em;vertical-align:-.14em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:novo-spin .7s linear infinite;flex:none;}
/* Reduced motion still needs to move -- a frozen spinner is worse than none --
   so it slows rather than stops. */
@media(prefers-reduced-motion:reduce){.novo-spin{animation-duration:2.4s;}}
.cal-busy{display:flex;align-items:center;justify-content:center;gap:11px;
  padding:30px 16px;color:var(--ink-soft);font-size:14px;min-height:120px;}
.cal-empty{display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;padding:22px 16px;color:var(--ink-soft);font-size:14px;line-height:1.55;}
.cal-empty b{color:var(--ink);font-weight:600;}
.cal-empty .cal-empty-hint{font-size:13px;opacity:.85;}

/* ---- address autocomplete ------------------------------------------------
   Body-level so it escapes the calculator iframe's clipped panels; positioned
   against the input on every scroll and resize. */
.addr-ac{position:absolute;z-index:9999;background:var(--paper,#FBF8F2);
  border:1px solid var(--line,rgba(59,47,38,.16));border-radius:10px;overflow:hidden;
  box-shadow:0 18px 40px -16px rgba(21,19,15,.34);}
.addr-ac[hidden]{display:none;}
.addr-ac-item{display:block;width:100%;text-align:left;background:none;border:0;
  font-family:var(--ff,system-ui);font-size:14.5px;line-height:1.45;color:var(--ink,#3B2F26);
  padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--line,rgba(59,47,38,.10));}
.addr-ac-item:last-child{border-bottom:0;}
.addr-ac-item:hover,.addr-ac-item.on{background:rgba(201,162,114,.16);}