/* Booking widget — shared by the landing page and the standalone /book page.
   Edited in one place on purpose: two copies of this drift, and the copy nobody
   is looking at is the one customers end up using. */

  /* ---------- BOOKING WIDGET ----------
     Native, no iframe, no third-party script. Two panes on desktop (event
     details | calendar + times), stacked on mobile. Everything below is
     scoped under .bk so it cannot leak into the rest of the page. */
  .bk { min-height:560px; }
  .bk *, .bk *::before, .bk *::after { box-sizing:border-box; }

  /* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto, so the
     times list forced this column wider than the card and the card's
     overflow:hidden silently clipped the right edge off. */
  .bk-shell { display:grid; grid-template-columns:274px minmax(0,1fr); }
  @media (max-width:860px){ .bk-shell{ grid-template-columns:1fr; } }

  /* ---- left pane: what the visitor is actually booking ---- */
  .bk-side {
    padding:26px 26px 26px 4px; border-right:1px solid rgba(11,31,29,.09);
  }
  @media (max-width:860px){
    .bk-side{ padding:4px 4px 22px; border-right:0; border-bottom:1px solid rgba(11,31,29,.09); margin-bottom:22px; }
  }
  .bk-logo { max-height:54px; max-width:210px; width:auto; display:block; margin-bottom:16px; }
  @media (max-width:860px){ .bk-logo{ max-height:46px; max-width:180px; } }
  .bk-brand {
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
  }
  .bk-title { font-size:22px; font-weight:800; line-height:1.22; letter-spacing:-.01em; margin:0 0 14px; }
  .bk-meta { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
  .bk-meta-row { display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--ink); }
  .bk-meta-row svg { flex:0 0 17px; color:var(--ink-soft); }
  .bk-desc { font-size:14px; line-height:1.5; color:var(--ink-soft); }

  /* ---- right pane ---- */
  .bk-main { padding:26px 4px 4px 26px; }
  @media (max-width:860px){ .bk-main{ padding:0; } }
  .bk-cols { display:grid; grid-template-columns:minmax(0,1fr) 244px; gap:24px; }
  @media (max-width:1040px){ .bk-cols{ grid-template-columns:minmax(0,1fr) 208px; gap:18px; } }
  /* Mobile is two steps, not one long scroll: the month grid, then the times
     for the day they tapped. data-m says which pane is showing. */
  @media (max-width:860px){
    .bk-cols{ grid-template-columns:1fr; gap:0; }
    .bk-cols[data-m="cal"]   .bk-pane-times { display:none; }
    .bk-cols[data-m="times"] .bk-pane-cal   { display:none; }
    /* One column means the month grid would stretch to the full width and the
       day cells balloon on a tablet. Cap it and centre instead. */
    .bk-dow, .bk-grid-days { max-width:440px; margin-left:auto; margin-right:auto; }
  }

  /* ---- month grid ---- */
  .bk-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .bk-month { font-size:16px; font-weight:800; }
  .bk-nav { display:flex; gap:4px; }
  .bk-nav button {
    width:34px; height:34px; border-radius:10px; border:0; background:transparent;
    cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center;
    transition:.12s;
  }
  .bk-nav button:hover:not(:disabled){ background:rgba(11,31,29,.06); }
  .bk-nav button:disabled{ opacity:.25; cursor:not-allowed; }

  .bk-dow { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
  .bk-dow span {
    text-align:center; font-family:'JetBrains Mono',monospace; font-size:10px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  }
  .bk-grid-days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .bk-d {
    position:relative; aspect-ratio:1/1; min-height:44px; border:0; border-radius:11px;
    background:transparent; font:inherit; font-size:14.5px; font-weight:600;
    color:rgba(11,31,29,.28); cursor:default; display:flex;
    align-items:center; justify-content:center; transition:.1s;
  }
  .bk-d.has { background:rgba(94,231,200,.16); color:var(--teal); cursor:pointer; font-weight:700; }
  .bk-d.has:hover { background:rgba(94,231,200,.34); }
  .bk-d.on { background:var(--teal); color:#fff; }
  .bk-d.today::after {
    content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.7;
  }

  /* ---- times ---- */
  .bk-times-head { display:flex; align-items:center; margin-bottom:12px; gap:8px; min-height:34px; }
  .bk-times-day { font-size:15px; font-weight:800; }
  /* The 12h/24h switch lives next to the timezone picker, not above the times.
     Sharing that narrow column with the day name squeezed "24h" off the edge. */
  .bk-h12 { display:flex; background:rgba(11,31,29,.05); border-radius:999px; padding:2px; flex:0 0 auto; }
  .bk-h12 button {
    border:0; background:transparent; font:inherit; font-size:11px; font-weight:700;
    padding:5px 12px; border-radius:999px; cursor:pointer; color:var(--ink-soft); transition:.12s;
    white-space:nowrap;
  }
  .bk-h12 button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(11,31,29,.14); }

  /* Back to the month grid. Mobile only — on desktop both panes are visible. */
  .bk-mback {
    display:none; align-items:center; justify-content:center; flex:0 0 34px;
    width:34px; height:34px; border:0; border-radius:10px; background:rgba(11,31,29,.06);
    color:var(--ink); cursor:pointer; padding:0;
  }
  @media (max-width:860px){ .bk-mback{ display:flex; } }

  .bk-times { display:flex; flex-direction:column; gap:8px; max-height:404px; overflow-y:auto; padding-right:4px; }
  @media (max-width:860px){
    .bk-times{ max-height:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); padding-right:0; }
  }
  .bk-slot {
    padding:13px 10px; border-radius:12px; border:1px solid rgba(11,31,29,.13);
    background:#fff; cursor:pointer; font:inherit; font-weight:700; font-size:14.5px;
    color:var(--teal); text-align:center; transition:.12s; width:100%;
  }
  .bk-slot:hover { border-color:var(--green); background:rgba(94,231,200,.1); }
  .bk-empty { font-size:14px; color:var(--ink-soft); padding:14px 2px; }

  /* ---- timezone ---- */
  .bk-foot-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-top:16px; flex-wrap:wrap;
  }
  .bk-tz { display:flex; align-items:center; gap:7px; min-width:0; font-size:13px; color:var(--ink-soft); }
  .bk-tz select { flex:1 1 auto; text-overflow:ellipsis; }
  .bk-tz svg { flex:0 0 15px; }
  .bk-tz select {
    border:0; background:transparent; font:inherit; font-size:13px; font-weight:600;
    color:var(--ink); cursor:pointer; max-width:100%; padding:2px 0;
  }

  /* ---- form ---- */
  .bk-form-wrap { max-width:560px; }
  .bk-back {
    display:inline-flex; align-items:center; gap:6px; background:none; border:0;
    font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft);
    cursor:pointer; padding:0; margin-bottom:16px;
  }
  .bk-back:hover { color:var(--ink); }
  .bk-chosen {
    display:flex; align-items:center; gap:9px; padding:13px 16px; border-radius:12px;
    background:rgba(94,231,200,.16); margin-bottom:20px; font-size:15px; font-weight:700; color:var(--teal);
  }
  .bk-field { margin-bottom:15px; }
  .bk-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:560px){ .bk-row{ grid-template-columns:1fr; } }
  .bk label { display:block; margin:0 0 6px; font-size:13.5px; font-weight:700; }
  .bk .req { color:var(--green); }
  .bk input, .bk select, .bk textarea {
    width:100%; padding:12px 14px; border:1px solid rgba(11,31,29,.13);
    border-radius:11px; font:inherit; font-size:16px; background:#fff; color:var(--ink); outline:0;
    transition:.12s;
  }
  .bk input:focus, .bk select:focus, .bk textarea:focus {
    border-color:var(--green); box-shadow:0 0 0 3px rgba(94,231,200,.3);
  }
  .bk textarea { min-height:86px; resize:vertical; }
  .bk-hint { font-size:12.5px; color:var(--ink-soft); margin-top:5px; }

  /* Field wrapper so a country prefix and a validity tick can sit inside the
     box without the text ever running underneath either of them. */
  .bk-inp { position:relative; }
  .bk-inp input { padding-right:42px; }
  .bk-inp.tel input { padding-left:46px; }
  .bk-inp.tel.intl input { padding-left:14px; }
  .bk-prefix {
    position:absolute; left:15px; top:50%; transform:translateY(-50%);
    font-size:16px; font-weight:600; color:var(--ink-soft); pointer-events:none;
  }
  .bk-inp.intl .bk-prefix { display:none; }
  .bk-ok {
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    color:var(--green); opacity:0; transform-origin:center;
    transition:opacity .15s ease;
    display:flex; align-items:center; pointer-events:none;
  }
  .bk-inp.valid .bk-ok { opacity:1; }
  .bk-inp.valid input { border-color:var(--green); }

  /* Centred: a full-width form with the submit hard left looked unfinished. */
  .bk-submit { display:flex; justify-content:center; margin-top:22px; }

  .bk-guest-add {
    display:inline-flex; align-items:center; gap:6px; background:none; border:0;
    font:inherit; font-size:13.5px; font-weight:700; color:var(--green);
    cursor:pointer; padding:0;
  }
  .bk-guests { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  .bk-guest { display:flex; gap:8px; }
  .bk-guest button {
    flex:0 0 42px; border:1px solid rgba(11,31,29,.13); border-radius:11px;
    background:#fff; cursor:pointer; color:var(--ink-soft); font-size:17px; line-height:1;
  }
  .bk-guest button:hover { color:#b3261e; border-color:rgba(179,38,30,.35); }

  .bk-go {
    border:0; border-radius:999px; padding:15px 32px; font:inherit; font-weight:800; font-size:15.5px;
    cursor:pointer; background:var(--green); color:#fff;
    box-shadow:0 10px 26px -8px rgba(46,161,117,.65); transition:.15s;
  }
  .bk-go:hover:not([disabled]) { background:#1a6b4a; }
  .bk-go[disabled] { opacity:.5; cursor:not-allowed; box-shadow:none; }
  .bk-err { margin-top:14px; padding:12px 15px; border-radius:11px; font-size:14px; background:rgba(220,38,38,.07); color:#b3261e; }

  /* ---- confirmation ---- */
  .bk-done { max-width:560px; margin:0 auto; text-align:center; padding:26px 4px; }
  .bk-tick {
    width:58px; height:58px; border-radius:999px; background:rgba(94,231,200,.24);
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--green);
  }
  .bk-done h3 { font-size:25px; margin:0 0 8px; letter-spacing:-.01em; }
  .bk-done p { color:var(--ink-soft); font-size:15px; line-height:1.55; margin:0 0 8px; }
  .bk-recap {
    text-align:left; border:1px solid rgba(11,31,29,.11); border-radius:14px;
    padding:16px 18px; margin:28px 0 0; display:flex; flex-direction:column; gap:10px;
  }
  .bk-recap-row { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:600; }
  .bk-recap-row svg { flex:0 0 17px; margin-top:1px; color:var(--ink-soft); }
  .bk-recap-row a { color:var(--green); word-break:break-all; }

  .bk-addcal-label {
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-soft); margin:22px 0 10px;
  }
  .bk-addcal { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
  @media (max-width:460px){ .bk-addcal{ grid-template-columns:1fr; } }
  .bk-cal-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 10px; border:1px solid rgba(11,31,29,.13); border-radius:12px;
    background:#fff; font:inherit; font-size:13.5px; font-weight:700; color:var(--ink);
    cursor:pointer; text-decoration:none; transition:.12s;
  }
  .bk-cal-btn:hover { border-color:var(--green); background:rgba(94,231,200,.09); }
  .bk-cal-btn svg { flex:0 0 17px; }

  /* ---- confirmation extras ---- */
  .bk-sec-head {
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-soft); margin:24px 0 10px;
  }
  .bk-upload {
    text-align:left; border:1px solid rgba(11,31,29,.11); border-radius:16px;
    padding:22px; margin-top:8px;
  }
  /* .bk label sets display:block and outranks .bk-drop on specificity, which
     collapsed the flex column and ran the title into the hint. Matching label
     explicitly is what makes the column layout stick. */
  .bk-upload h4 {
    font-size:21px; line-height:1.25; margin:0 0 8px; letter-spacing:-.015em; font-weight:800;
  }
  .bk-upload > p { font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 16px; }
  .bk-drops { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  @media (max-width:620px){ .bk-drops{ grid-template-columns:1fr; } }

  .bk label.bk-drop {
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:6px; margin:0; padding:18px 12px;
    border:1.5px dashed rgba(11,31,29,.18); border-radius:12px;
    cursor:pointer; text-align:center; transition:.12s; background:#fff;
    font-weight:400;
  }
  .bk label.bk-drop:hover { border-color:var(--green); background:rgba(94,231,200,.07); }
  .bk label.bk-drop.has { border-style:solid; border-color:var(--green); background:rgba(94,231,200,.1); }
  .bk-drop .t { display:block; font-size:14px; font-weight:700; line-height:1.3; }
  .bk-drop .s { display:block; font-size:12px; color:var(--ink-soft); line-height:1.35; }
  .bk-drop svg { color:var(--ink-soft); margin-bottom:2px; }
  .bk label.bk-drop.has svg { color:var(--green); }

  .bk-files { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:7px; }
  .bk-files li {
    display:flex; align-items:center; gap:9px; font-size:13.5px;
    background:rgba(94,231,200,.14); border-radius:10px; padding:10px 12px;
    color:var(--teal); font-weight:600;
  }
  .bk-files li .nm { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bk-files li .rm {
    flex:0 0 auto; background:none; border:0; font:inherit; font-size:17px; line-height:1;
    color:var(--ink-soft); cursor:pointer; padding:0 2px;
  }
  .bk-files li .rm:hover { color:#b3261e; }
  .bk-files li.done { background:rgba(46,161,117,.14); }

  .bk-secure {
    display:flex; align-items:flex-start; gap:9px; margin-top:16px;
    font-size:13px; line-height:1.5; color:var(--ink-soft);
  }
  .bk-secure svg { flex:0 0 15px; margin-top:2px; color:var(--green); }

  .bk-send {
    width:100%; margin-top:16px; border:0; border-radius:999px;
    padding:15px 26px; font:inherit; font-weight:800; font-size:15.5px;
    cursor:pointer; background:var(--green); color:#fff;
    box-shadow:0 10px 26px -8px rgba(46,161,117,.65); transition:.15s;
  }
  .bk-send:hover:not([disabled]) { background:#1a6b4a; }
  .bk-send[disabled] { opacity:.4; cursor:not-allowed; box-shadow:none; }

  .bk-later {
    display:block; margin:14px auto 0; background:none; border:0; font:inherit;
    font-size:13.5px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; padding:0;
  }
  .bk-later:hover { color:var(--ink); }
  .bk-upload-note { font-size:14px; color:var(--ink-soft); margin:0; line-height:1.5; }
  .bk-media-head { font-size:17px; font-weight:800; margin:26px 0 12px; line-height:1.35; letter-spacing:-.01em; }
  .bk-media-body { font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:14px 0 0; }
  .bk-media { margin-top:12px; border-radius:14px; overflow:hidden; }
  .bk-media img, .bk-media video { width:100%; display:block; border-radius:14px; }

  .bk-skel { height:46px; border-radius:12px; background:linear-gradient(90deg,#f4f4f4,#ececec,#f4f4f4);
    background-size:200% 100%; animation:bk-sh 1.2s infinite; }
  @keyframes bk-sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
  @media (prefers-reduced-motion:reduce){ .bk-skel{ animation:none; } }

  .cal-loading {
    display:flex; align-items:center; justify-content:center; gap:10px;
    min-height:560px; border-radius:12px;
    font-size:14px; font-weight:600; color:var(--ink-soft);
    background:#fff;
  }