/* Booking pages. Structure for every brand plus the Ripe Leads tokens, copied from
   ripeleads.eu (index.html :root) so the page reads as part of the site: paper, ink,
   husk lines, one coral accent. Radius scale: 4 (chips, days), 8 (inputs, buttons),
   14 (the one panel). Other brands load assets/b/<brand>/theme.css after this file and
   only swap tokens, faces and a few shapes; every colour below goes through a token. */

:root{
  --coral:#FB5C2D; --coral-deep:#C9431C; --coral-tint:#FFEDE4;
  --ink:#15120E; --ink-soft:#221D16; --paper:#FBF7F0; --card:#FFFDF9;
  --husk:#ECE6DA; --stone:#5F5950; --blend:#D2C9B5; --green:#1E7A4C; --red:#B3261E;
  --display:'Clash Display',Georgia,serif; --sans:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  --field:#fff; --on-accent:#fff; --accent-hover:#A9381A; --open-hover:#FFD9C7;
  --ok-bg:#E3F1E8; --bad-bg:#F7E2E0; --shadow:0 24px 60px -32px rgba(21,18,14,.22);
  --r-panel:14px; --r-ctl:8px; --r-sm:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.bk{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--sans);min-height:100vh;display:flex;flex-direction:column}
body.bk-embed{min-height:0;background:transparent}
a{color:var(--coral-deep)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--coral-deep);outline-offset:2px}

.bk-shell{width:100%;max-width:1040px;margin:40px auto 24px;padding:0 20px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  background:var(--card);border:1px solid var(--husk);border-radius:var(--r-panel);box-shadow:var(--shadow);overflow:hidden}
.bk-embed .bk-shell{margin:0 auto;box-shadow:none}
.bk-shell-narrow{max-width:720px;grid-template-columns:1fr}

.bk-info{padding:32px 28px;border-right:1px solid var(--husk)}
.bk-info-wide{border-right:0;border-bottom:1px solid var(--husk)}
.bk-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;min-height:44px}
.bk-word-muted{font-weight:400;color:var(--stone)}
.bk-host{display:flex;align-items:center;gap:12px;margin:20px 0 8px}
.bk-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 20%;background:var(--husk)}
.bk-host-name{margin:0;font-weight:500}
.bk-host-role{margin:0;color:var(--stone);font-size:14px}
.bk-title{font:600 30px/1.15 var(--display);letter-spacing:-.01em;margin:12px 0 16px}
.bk-facts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;color:var(--stone);font-weight:500}
.bk-facts li{display:flex;align-items:center;gap:10px}
.bk-facts svg{width:20px;height:20px;flex:none;color:var(--ink)}
.bk-desc{color:var(--ink-soft);margin:0}

.bk-pick{padding:32px 28px;min-height:480px;position:relative}
.bk-step{font:600 22px/1.2 var(--display);margin:0 0 18px}
.bk-step:focus{outline:none}
.bk-picker{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:28px;align-items:start}

.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bk-month{margin:0;font-weight:600}
.bk-nav{width:44px;height:44px;border-radius:var(--r-ctl);border:1px solid var(--husk);background:transparent;font-size:22px;line-height:1;cursor:pointer}
.bk-nav:hover:not(:disabled){border-color:var(--ink)}
.bk-nav:disabled{opacity:.35;cursor:default}
.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-wd{font-size:12px;color:var(--stone);text-align:center;padding:6px 0;font-weight:500;letter-spacing:.02em}
.bk-day{aspect-ratio:1;min-height:44px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--blend);font-weight:500;cursor:default}
.bk-day.bk-open{background:var(--coral-tint);color:var(--coral-deep);font-weight:600;cursor:pointer}
.bk-day.bk-open:hover{background:var(--open-hover)}
.bk-day.bk-sel{background:var(--coral);color:var(--on-accent)}
.bk-loading .bk-grid{opacity:.45}

.bk-tz-row{margin-top:16px;display:grid;gap:4px}
.bk-tz-row label{font-size:13px;color:var(--stone);font-weight:500}
.bk-tz{min-height:44px;border:1px solid var(--husk);border-radius:var(--r-ctl);background:var(--card);padding:0 10px;max-width:100%}

.bk-times-day{margin:6px 0 12px;font-weight:600}
.bk-time-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:420px;overflow-y:auto;padding-right:4px}
.bk-time{width:100%;min-height:48px;border-radius:var(--r-ctl);border:1px solid var(--blend);background:var(--card);font-weight:600;color:var(--ink);cursor:pointer}
.bk-time:hover{border-color:var(--coral-deep);color:var(--coral-deep)}

.bk-skel-head{height:44px;border-radius:var(--r-ctl);background:var(--husk);margin-bottom:12px;width:60%}
.bk-skel-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:520px}
.bk-skel-grid span,.bk-skel-times span{display:block;aspect-ratio:1;border-radius:var(--r-sm);background:var(--husk);animation:bk-pulse 1.4s ease-in-out infinite}
.bk-skel-times{display:grid;gap:8px}
.bk-skel-times span{aspect-ratio:auto;height:48px;border-radius:var(--r-ctl)}
@keyframes bk-pulse{50%{opacity:.5}}
.bk-busy::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--coral) 0 30%,transparent 30%);background-size:200% 100%;animation:bk-bar 1s linear infinite}
@keyframes bk-bar{to{background-position:-200% 0}}

.bk-back{border:0;background:none;color:var(--stone);padding:0;min-height:44px;cursor:pointer;font-weight:500;margin:-12px 0 4px}
.bk-back:hover{color:var(--ink)}
.bk-when{margin:0 0 18px;color:var(--ink-soft);font-weight:500}
.bk-when-big{font:600 20px/1.3 var(--display);color:var(--ink)}
.bk-form{display:grid;gap:14px;max-width:460px}
.bk-field{display:grid;gap:4px}
.bk-field label{font-weight:500;font-size:15px}
.bk-opt{color:var(--stone);font-weight:400}
.bk-field input,.bk-field textarea{width:100%;min-height:46px;border:1px solid var(--blend);border-radius:var(--r-ctl);background:var(--field);padding:10px 12px;font-size:16px}
.bk-field textarea{resize:vertical}
.bk-field input:focus,.bk-field textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--coral-tint)}
[aria-invalid="true"]{border-color:var(--red)!important}
.bk-ferr{margin:0;min-height:0;color:var(--red);font-size:14px}
.bk-ferr:empty{display:none}
.bk-err{color:var(--red);margin:0;font-weight:500}
.bk-err:empty{display:none}
.bk-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bk-fine{font-size:13px;color:var(--stone);margin:0}
.bk-note{color:var(--stone);margin:0 0 12px}

.bk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:var(--r-ctl);border:1px solid var(--blend);
  background:var(--card);font-weight:600;text-decoration:none;color:var(--ink);cursor:pointer}
.bk-btn:hover{border-color:var(--ink)}
.bk-btn-primary{background:var(--coral-deep);border-color:var(--coral-deep);color:var(--on-accent);min-height:48px}
.bk-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.bk-btn-danger{background:var(--red);border-color:var(--red);color:var(--on-accent)}
.bk-btn:disabled{opacity:.6;cursor:progress}
.bk-submit{justify-self:start;min-width:200px}
.bk-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.bk-link{font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.bk-badge{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:var(--r-sm);background:var(--ok-bg);color:var(--green);font-weight:600;font-size:13px;letter-spacing:.02em}
.bk-badge-off{background:var(--bad-bg);color:var(--red)}

.bk-types{list-style:none;margin:0;padding:12px 28px 28px;display:grid;gap:10px}
.bk-type{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:16px 18px;border:1px solid var(--husk);border-radius:var(--r-ctl);text-decoration:none;color:var(--ink)}
.bk-type:hover{border-color:var(--coral-deep)}
.bk-type-t{font-weight:600;font-size:17px}
.bk-type-d{color:var(--stone);font-weight:500}
.bk-type-x{grid-column:1/-1;color:var(--stone);font-size:15px}

.bk-foot{margin:auto auto 24px;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--stone)}
.bk-foot a{color:var(--stone);min-height:44px;display:inline-flex;align-items:center}
.bk-embed .bk-foot{margin:8px auto}

@media (max-width:900px){
  .bk-picker{grid-template-columns:1fr}
  .bk-time-list{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));max-height:none}
}
@media (max-width:720px){
  .bk-shell{grid-template-columns:1fr;margin:0;border-radius:0;border-left:0;border-right:0;padding:0}
  .bk-info{border-right:0;border-bottom:1px solid var(--husk);padding:20px}
  .bk-pick{padding:20px;min-height:0}
  .bk-title{font-size:26px}
  .bk-host{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}