/* Public booking page (Calendar v2-C Diff 2). Adapted from the locked mockup
   docs/closeflow-public-booking-v2c-MOCKUP.html. White-label: every color is a --hub-* token,
   overridden per-agent server-side via the page <style> block (agent palette). Focused-flow
   centered column (the documented exception to the no-cap layout rule). */
:root{
  --hub-bg:#F8F7F5; --hub-text:#16181D; --hub-primary:#8D4F3D;
  --hub-text-on-primary:#ffffff; --hub-card:#ffffff; --hub-accent:#B7791F;
  --hub-muted:#6B6F76; --hub-border:#ECEDEF; --hub-faint:#9AA0A6;
  --hub-ok:#15803D; --hub-ok-bg:#ECFDF3; --hub-danger:#B23B3B; --hub-danger-bg:#FBEDED;
  /* derived from --hub-primary so the page is fully white-label from the agent's base tokens alone */
  --hub-primary-soft:color-mix(in srgb, var(--hub-primary), #000 16%);
  --hub-primary-tint:color-mix(in srgb, var(--hub-primary) 10%, #fff);
  --hub-ring:color-mix(in srgb, var(--hub-primary) 16%, transparent);
  --rad:12px; --rad-btn:11px;
  --sh-soft:0 1px 2px rgba(16,18,22,.04);
  --sh-lift:0 18px 44px -22px rgba(16,18,22,.30), 0 2px 6px rgba(16,18,22,.05);
  --serif:'Newsreader','Iowan Old Style','Apple Garamond',Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--hub-bg);color:var(--hub-text);font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-weight:600;}

.stage{max-width:520px;margin:16px auto 0;padding:0 18px 8px;}
.card{background:var(--hub-card);border:1px solid var(--hub-border);border-radius:var(--rad);box-shadow:var(--sh-soft);}
.card.lift{box-shadow:var(--sh-lift);}
.pad{padding:20px;}
.stack > * + *{margin-top:20px;}
.hidden{display:none !important;}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hub-accent);}
.h-serif{font-family:var(--serif);letter-spacing:-.01em;}
.lead{font-size:14.5px;color:var(--hub-muted);line-height:1.6;}
.muted{color:var(--hub-muted);} .faint{color:var(--hub-faint);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:var(--rad-btn);font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1;cursor:pointer;
  border:1px solid transparent;width:100%;transition:transform .12s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;}
.btn svg{width:17px;height:17px;}
.btn[disabled]{opacity:.6;cursor:default;}
.btn-primary{background:var(--hub-primary);color:var(--hub-text-on-primary);box-shadow:0 6px 16px -8px var(--hub-primary);}
.btn-primary:hover:not([disabled]){background:var(--hub-primary-soft);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{background:var(--hub-card);color:var(--hub-text);border-color:var(--hub-border);box-shadow:var(--sh-soft);}
.btn-secondary:hover{border-color:var(--hub-primary-soft);color:var(--hub-primary);}
.btn-danger{background:var(--hub-card);color:var(--hub-danger);border-color:#EBD6D6;}
.btn-danger:hover{background:var(--hub-danger-bg);}
.btn-ghost{background:transparent;color:var(--hub-primary);min-height:auto;padding:6px 4px;width:auto;font-size:13.5px;}
.btn-ghost:hover{text-decoration:underline;}
.btn.sm{min-height:40px;font-size:13.5px;}

.agent-row{display:flex;align-items:center;gap:14px;}
.avatar{width:58px;height:58px;border-radius:50%;flex-shrink:0;background:linear-gradient(150deg,var(--hub-primary),var(--hub-primary-soft));
  color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:21px;font-weight:600;
  letter-spacing:.02em;box-shadow:0 6px 16px -8px var(--hub-primary);overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar.lg{width:72px;height:72px;font-size:26px;} .avatar.sm{width:46px;height:46px;font-size:17px;}
.agent-name{font-size:17px;font-weight:600;letter-spacing:-.01em;}
.agent-title{font-size:13px;color:var(--hub-muted);margin-top:1px;}
.agent-brokerage{font-size:12px;color:var(--hub-faint);margin-top:2px;}
.pill{display:inline-flex;align-items:center;gap:5px;margin-top:8px;background:var(--hub-primary-tint);color:var(--hub-primary);
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;} .pill svg{width:13px;height:13px;}

.sec-title{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em;}
.sec-sub{font-size:14px;color:var(--hub-muted);line-height:1.6;margin-top:7px;}
.strip-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.strip-head .mlabel{font-size:13px;font-weight:600;color:var(--hub-muted);}
.daystrip{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 10px;margin:0 -2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.daystrip::-webkit-scrollbar{height:5px;} .daystrip::-webkit-scrollbar-thumb{background:var(--hub-border);border-radius:999px;}
.day{scroll-snap-align:start;flex:0 0 auto;width:58px;min-height:78px;border:1px solid var(--hub-border);border-radius:14px;
  background:var(--hub-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
  padding:10px 0 9px;transition:all .14s ease;position:relative;}
.day .dow{font-size:11px;font-weight:600;color:var(--hub-muted);letter-spacing:.03em;text-transform:uppercase;}
.day .dnum{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1;}
.day .dot{width:5px;height:5px;border-radius:50%;background:var(--hub-accent);margin-top:3px;}
.day:hover{border-color:var(--hub-primary-soft);transform:translateY(-2px);box-shadow:var(--sh-soft);}
.day.sel{background:var(--hub-primary);border-color:var(--hub-primary);color:#fff;box-shadow:var(--sh-lift);}
.day.sel .dow{color:rgba(255,255,255,.82);} .day.sel .dot{background:#fff;}
.day.off{opacity:.42;cursor:not-allowed;background:var(--hub-bg);}
.day.off:hover{transform:none;border-color:var(--hub-border);box-shadow:none;} .day.off .dot{visibility:hidden;}
.meta-line{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--hub-muted);margin-top:2px;}
.meta-line svg{width:15px;height:15px;color:var(--hub-faint);}

.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--hub-primary);cursor:pointer;}
.backlink svg{width:15px;height:15px;}
.daychip{display:inline-flex;align-items:center;gap:7px;background:var(--hub-primary-tint);color:var(--hub-primary);
  font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;} .daychip svg{width:14px;height:14px;}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.slot{min-height:44px;border:1px solid var(--hub-border);border-radius:10px;background:var(--hub-card);font-family:var(--sans);
  font-size:14px;font-weight:600;color:var(--hub-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .13s ease;}
.slot:hover{border-color:var(--hub-primary-soft);color:var(--hub-primary);transform:translateY(-1px);}
.slot.sel{background:var(--hub-primary);border-color:var(--hub-primary);color:#fff;box-shadow:0 6px 16px -9px var(--hub-primary);}

.field{margin-bottom:15px;}
.flabel{display:block;font-size:12.5px;font-weight:600;color:var(--hub-text);margin-bottom:6px;}
.flabel .opt{color:var(--hub-faint);font-weight:500;}
.input,textarea.input{width:100%;border:1px solid var(--hub-border);border-radius:10px;background:var(--hub-card);font-family:var(--sans);
  font-size:14.5px;color:var(--hub-text);padding:12px 13px;outline:0;transition:border-color .14s ease,box-shadow .14s ease;}
.input::placeholder{color:var(--hub-faint);}
.input:focus{border-color:var(--hub-primary-soft);box-shadow:0 0 0 3px var(--hub-ring);}
.input.err{border-color:var(--hub-danger);}
textarea.input{resize:vertical;min-height:78px;line-height:1.5;}
.ferr{display:none;font-size:12px;color:var(--hub-danger);margin-top:5px;}
.ferr.show{display:block;}
/* honeypot - visually + a11y hidden, bots fill it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.summary-bar{display:flex;align-items:center;gap:12px;background:var(--hub-primary-tint);border:1px solid #E7D8D1;border-radius:12px;padding:13px 15px;}
.summary-bar .ic{width:38px;height:38px;border-radius:10px;background:var(--hub-card);border:1px solid #E7D8D1;display:flex;align-items:center;justify-content:center;color:var(--hub-primary);flex-shrink:0;}
.summary-bar .ic svg{width:19px;height:19px;}
.summary-bar .st{font-size:14px;font-weight:600;color:var(--hub-text);}
.summary-bar .ss{font-size:12.5px;color:var(--hub-muted);margin-top:1px;}

/* TCR/A2P hotfix: consents are NATIVE checkboxes. The <input class="cchk"> is
   visually replaced by the .cbox tile via :checked sibling selectors; the input
   itself stays focusable (keyboard + AT) and the wrapping <label> makes the
   whole row a genuine toggle. Unchecked state uses the darker muted border so
   the empty box reads as a control, not decoration (K prod report). */
.consent{position:relative;display:flex;gap:11px;align-items:flex-start;padding:12px 0;cursor:pointer;}
.consent + .consent{border-top:1px solid var(--hub-border);}
/* aligned to the .cbox tile (label pad-top 12px + box margin-top 1px) so an
   assistive-tech focus rectangle traces the visible box, not the consent text. */
.cchk{position:absolute;top:13px;left:0;width:20px;height:20px;margin:0;opacity:0;pointer-events:none;}
.cbox{width:20px;height:20px;flex-shrink:0;margin-top:1px;border:1.5px solid var(--hub-muted);border-radius:6px;background:var(--hub-card);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .13s ease;
  box-shadow:inset 0 1px 2px rgba(31,31,31,.05);}
.cbox svg{width:13px;height:13px;color:var(--hub-text-on-primary);opacity:0;transition:opacity .1s;}
.cchk:checked ~ .cbox{background:var(--hub-primary);border-color:var(--hub-primary);box-shadow:none;}
.cchk:checked ~ .cbox svg{opacity:1;}
.cchk:focus-visible ~ .cbox{outline:2px solid var(--hub-primary);outline-offset:2px;}
.consent .ctxt{font-size:12.5px;line-height:1.5;color:var(--hub-text);}
.consent.required .ctxt::after{content:" Required";color:var(--hub-accent);font-weight:600;font-size:11px;}
/* HF-2 (2026-07-08): the SMS consent row is ALWAYS visible so the opt-in control is
   present for every visitor and for TCR/A2P reviewers, regardless of whether a phone
   number has been entered. It is disabled/greyed until a usable phone is present;
   booking-public.js toggles .disabled + the native input.disabled on phone input and
   force-unchecks + re-disables it when the phone is cleared. */
.consent.sms-consent.disabled{cursor:not-allowed;}
.consent.sms-consent.disabled .ctxt{color:var(--hub-muted);}
.consent.sms-consent.disabled .cbox{background:var(--hub-bg);border-color:var(--hub-border);opacity:.6;}
.sms-hint{display:none;margin:2px 0 0 31px;font-size:11.5px;color:var(--hub-muted);}
#consent-sms.disabled + .sms-hint{display:block;}
@keyframes fadein{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}

.recaptcha{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--hub-faint);margin:14px 0 4px;flex-wrap:wrap;}
.recaptcha svg{width:14px;height:14px;} .recaptcha a{color:var(--hub-muted);text-decoration:underline;}

.banner{display:flex;gap:9px;align-items:flex-start;border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.5;margin-bottom:14px;}
.banner.err{background:var(--hub-danger-bg);border:1px solid #EBD6D6;color:#8A2D2D;}
.banner svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;}

.success-mark{width:74px;height:74px;border-radius:50%;margin:0 auto;background:var(--hub-ok-bg);color:var(--hub-ok);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(21,128,61,.06);}
.success-mark svg{width:34px;height:34px;}
.kv{display:flex;gap:12px;padding:12px 0;}
.kv + .kv{border-top:1px solid var(--hub-border);}
.kv .ic{width:34px;height:34px;border-radius:9px;background:var(--hub-primary-tint);color:var(--hub-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kv .ic svg{width:17px;height:17px;}
.kv .kl{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--hub-faint);}
.kv .kvv{font-size:14.5px;font-weight:600;margin-top:2px;}
.kv .kvv .sub{font-size:12.5px;font-weight:500;color:var(--hub-muted);display:block;margin-top:1px;}
.contact-card{display:flex;align-items:center;gap:13px;}
.contact-card .lines a{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--hub-muted);margin-top:4px;}
.contact-card .lines a svg{width:14px;height:14px;color:var(--hub-faint);} .contact-card .lines a:hover{color:var(--hub-primary);}
.cal-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.next-list{margin:0;padding:0;list-style:none;}
.next-list li{display:flex;gap:10px;font-size:13.5px;color:var(--hub-text);line-height:1.5;padding:7px 0;}
.next-list li svg{width:16px;height:16px;color:var(--hub-primary);flex-shrink:0;margin-top:2px;}

.empty{text-align:center;padding:18px 8px 6px;}
.empty .ic{width:62px;height:62px;border-radius:50%;margin:0 auto 16px;background:var(--hub-bg);border:1px solid var(--hub-border);display:flex;align-items:center;justify-content:center;color:var(--hub-faint);}
.empty .ic svg{width:28px;height:28px;}
.powered{text-align:center;font-size:11.5px;color:var(--hub-faint);margin:18px 0 14px;letter-spacing:.01em;}
.powered b{font-weight:600;color:var(--hub-muted);}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:sp .6s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}