/* Reuses the current English booking calendar’s visual rules. */
#booking-step{--sky:#3e5f9e;--sky-dark:#2b4c86;--sky-soft:#eaeff7;--ink-soft:#8a94a3;--font-head:var(--font);--font-body:var(--font);--ease:ease;--t-micro:100ms;--t-med:240ms;--t-small:150ms;--ease-out:ease-out;--spring:ease-out;--hair:var(--line)}
.booking-screen{background-color:#f4f6f8;background-image:radial-gradient(#d8dee6 1px,transparent 1px);background-size:22px 22px}.booking-screen .page{width:min(100% - 36px,560px)}
#booking-step .gcard{border:0;border-radius:20px;padding:1.1rem 1.15rem;margin:0 0 .85rem;background:#fff;box-shadow:0 6px 18px -6px rgba(20,39,79,.08)}
.report-notice{display:flex;gap:12px;align-items:flex-start;background:#f4f7fc;border:1px solid #dce5f2;border-radius:12px;padding:15px;margin:8px 0 24px}.report-notice[data-state=error]{background:#fff5f3;border-color:#f0d6d0}.report-notice strong{display:block;font-size:14px;margin-bottom:5px}.report-notice p{font-size:12px;line-height:1.6;color:var(--ink);margin:0}.notice-icon{width:24px;flex:none;font-size:20px}.booking-meta{font-size:12px;color:var(--ink);margin:14px 0}.booking-demo-controls{padding:12px;background:#f4f6fa;border:1px dashed #bbc6d7;border-radius:10px;font-size:11px;margin:24px 0}.booking-demo-controls button{border:1px solid var(--line);border-radius:6px;background:white;color:var(--navy);padding:6px 9px;margin:5px 4px 0 0;font-size:11px}.booking-demo-controls .is-on{background:var(--navy);color:white}.booking-tz-select{width:100%;font:13px var(--font);color:var(--navy);border:0;border-radius:10px;background:#f1f4f8;padding:12px}.booked-preview{padding:22px;border:1px solid #dce5f2;border-radius:15px;margin:18px 0}.booked-preview h2{font-size:22px;margin:0 0 12px}.booked-preview p{font-size:13px;line-height:1.6}.booking-heading h1{font-size:clamp(27px,4.5vw,34px);line-height:1.12;letter-spacing:-1px;margin-bottom:12px}.booking-heading p{line-height:1.6}.booking-heading{text-align:left}.booking-meta{margin:12px 0 18px}.report-notice{margin:0 0 20px;background:#ffffffb8;border-color:#dfe5ee}.booking-tz-select{appearance:none;border-radius:12px;font-size:.82rem;color:var(--ink);padding:.55rem 2rem .55rem .8rem;background:#f1f4f8}.booking-tz-select:focus-visible{outline:2.5px solid var(--sky);outline-offset:2px}#skin-calendar-status:empty{display:none}@media(max-width:640px){.booking-screen{background-image:none}}@media(max-width:360px){#booking-step .bk-seg{gap:4px}#booking-step .bk-seg button{font-size:.7rem;gap:3px}#booking-step .bk-seg button svg{width:12px}}@media(prefers-reduced-motion:reduce){#booking-step *{animation:none!important}}.bk-grid button:focus-visible{outline-offset:1px}.bk-day{min-height:40px}.bk-slot{min-height:44px}
  /* ================= Step 2 — calendar ================= */
  .bk-greet{ margin:0 0 1rem; font-size:.92rem; color:var(--ink); }
  .bk-greet strong{ color:var(--navy); }
  .bk-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
  .bk-month{ font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:1.05rem;
        letter-spacing:-.01em; text-transform:capitalize; }
  .bk-nav{ display:flex; gap:.4rem; }
  .bk-nav button{ width:34px; height:34px; border-radius:50%; border:none; background:#F1F4F8;
        display:grid; place-items:center; cursor:pointer; color:var(--navy);
        transition:all .18s var(--ease); }
  .bk-nav button svg{ width:14px; height:14px; }
  .bk-nav button:hover:not(:disabled){ background:var(--sky-soft); }
  .bk-nav button:active:not(:disabled){ transform:scale(.9); transition-duration:var(--t-micro); }
  .bk-nav button:disabled{ opacity:.3; cursor:default; }

  .bk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .bk-dow{ text-align:center; font-size:.64rem; font-weight:600; letter-spacing:.1em;
        color:var(--ink-soft); padding-block:.35rem; }
  .bk-day{ aspect-ratio:1; border-radius:50%; border:none; background:transparent;
        font-variant-numeric:tabular-nums;
        display:flex; align-items:center; justify-content:center;
        font-family:var(--font-head); font-size:.92rem; font-weight:500; color:#C2C9D6;
        position:relative; transition:all .16s var(--ease); padding:0; cursor:default; }
  .bk-day .dot{ display:none; }
  .bk-day.has-slots{ background:var(--sky-soft); color:var(--navy); font-weight:600; cursor:pointer; }
  /* hover only on mouse devices — on touch, iOS "sticks" hover after a tap and it would mask the selected state */
  @media (hover:hover){ .bk-day.has-slots:not(.is-selected):hover{ background:#DAE4F4; } }
  .bk-day.has-slots:active{ transform:scale(.92); transition-duration:var(--t-micro); }
  .bk-day.is-selected{ background:var(--navy); color:#fff; font-weight:700;
        box-shadow:0 4px 12px -2px rgba(20,39,79,.4); transform:scale(1.06);
        animation:dayPop var(--t-med) var(--spring); }
  @keyframes dayPop{ 0%{ transform:scale(.88); } 60%{ transform:scale(1.14); } 100%{ transform:scale(1.06); } }
  .bk-day.is-empty{ visibility:hidden; }
  .bk-day.is-today:not(.has-slots):not(.is-selected){ color:var(--navy);
        box-shadow:inset 0 0 0 1.5px #C7D1E2; }
  .bk-legend{ display:flex; gap:1.1rem; margin-top:.75rem; }
  .bk-legend span{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--ink-soft); }
  .bk-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; }
  .bk-legend .lg-av i{ background:var(--sky-soft); border:1px solid #C4D2E8; }
  .bk-legend .lg-today i{ background:transparent; box-shadow:inset 0 0 0 1.5px #C7D1E2; }

  /* timezone dropdown */
  .bk-tz{ margin-top:.9rem; display:flex; align-items:center; gap:.5rem; }
  .bk-tz > svg{ width:14px; height:14px; color:var(--ink-soft); flex:0 0 auto; }
  .bk-tzdd{ position:relative; flex:1; min-width:0; }
  .bk-tzbtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
        border:none; border-radius:12px; background:#F1F4F8;
        padding:.55rem .8rem; font-family:var(--font-body); font-size:.82rem; color:var(--ink);
        cursor:pointer; transition:background .18s var(--ease); text-align:left; }
  .bk-tzbtn:hover{ background:var(--sky-soft); }
  .bk-tzbtn svg{ width:10px; height:10px; color:var(--ink-soft); flex:0 0 auto;
        transition:transform .25s var(--ease); }
  .bk-tzdd.is-open .bk-tzbtn svg{ transform:rotate(180deg); }
  .bk-tzlist{ position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:30;
        margin:0; padding:.35rem; list-style:none;
        background:#fff; border:1px solid var(--hair); border-radius:14px; box-shadow:var(--shadow-sheet);
        max-height:250px; overflow-y:auto; animation:tzIn var(--t-small) var(--ease-out); }
  @keyframes tzIn{ from{ opacity:0; transform:translateY(5px) scale(.98); } to{ opacity:1; transform:none; } }
  .bk-tzlist li{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
        padding:.55rem .7rem; border-radius:9px; font-size:.83rem; color:var(--ink);
        cursor:pointer; transition:background .15s var(--ease); }
  .bk-tzlist li:hover{ background:var(--sky-soft); color:var(--navy); }
  .bk-tzlist li.is-selected{ color:var(--navy); font-weight:600; }
  .bk-tzlist li .chk{ width:13px; height:13px; color:var(--green); flex:0 0 auto; visibility:hidden; }
  .bk-tzlist li.is-selected .chk{ visibility:visible; }

  /* times */
  .bk-slots{ margin-top:0; }
  .bk-slots-title{ font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:.98rem;
        margin:0 0 .8rem; }
  .bk-slot-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:.45rem; }
  .bk-slot{ border:none; background:#F1F4F8; border-radius:12px; padding:.75rem .2rem;
        font-family:var(--font-head); font-size:.84rem; font-weight:600; color:var(--navy);
        font-variant-numeric:tabular-nums; cursor:pointer; text-align:center; transition:all .15s var(--ease);
        animation:slotIn var(--t-med) var(--ease-out) both;
        animation-delay:min(calc(var(--i,0) * 22ms), 330ms); }
  @keyframes slotIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  .bk-slot:hover{ background:#E4EAF3; transform:translateY(-1px); }
  .bk-slot:active{ transform:scale(.95); transition-duration:var(--t-micro); }
  .bk-slot.is-selected{ background:var(--navy); color:#fff; box-shadow:0 4px 12px -3px rgba(20,39,79,.45);
        animation:slotIn var(--t-med) var(--ease-out) both, popIn var(--t-small) var(--spring); }
  .bk-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem;
        color:var(--ink-soft); font-size:.85rem; padding:1.8rem 1rem; }
  .bk-empty svg{ width:26px; height:26px; color:#CBD2DE; }
  .bk-status{ text-align:center; padding:2rem 1rem; color:var(--ink-soft); font-size:.88rem; }
  .bk-skel{ border-radius:50%; background:linear-gradient(90deg,#EFF2F7 25%,#F7F9FC 50%,#EFF2F7 75%);
        background-size:200% 100%; animation:shimmer 1.2s infinite linear; }
  @keyframes shimmer{ to{ background-position:-200% 0; } }
  .cal-spinner{ width:30px; height:30px; border-radius:50%; margin:0 auto .7rem;
        border:3px solid var(--sky-soft); border-top-color:var(--navy); animation:spin .8s linear infinite; }
  .bk-retry{ margin-top:.8rem; width:auto; display:inline-flex; padding:.6rem 1.4rem; font-size:.88rem; }

  /* segment: three obvious period buttons + single grid */
  .bk-seg{ display:flex; gap:.5rem; margin-bottom:.85rem; }
  .bk-seg button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
        border:1.5px solid #E2E7F0; background:#fff; border-radius:11px; padding:.5rem .3rem;
        font-family:var(--font-head); font-weight:600; font-size:.8rem; color:var(--navy);
        cursor:pointer; transition:all .18s var(--ease); white-space:nowrap;
        box-shadow:0 2px 6px -2px rgba(20,39,79,.08); }
  .bk-seg button svg{ width:14px; height:14px; color:var(--sky-dark); flex:0 0 auto; }
  .bk-seg button span{ font-weight:500; font-size:.74rem; color:var(--ink-soft); }
  .bk-seg button:hover{ border-color:var(--sky); transform:translateY(-1px); }
  .bk-seg button:active{ transform:scale(.96); transition-duration:var(--t-micro); }
  .bk-seg button.is-on{ background:var(--navy); border-color:var(--navy); color:#fff;
        box-shadow:0 6px 14px -4px rgba(20,39,79,.45); animation:popIn var(--t-small) var(--spring); }
  .bk-seg button.is-on svg{ color:#fff; }
  .bk-seg button.is-on span{ color:rgba(255,255,255,.75); }

  /* confirm bar */
  .bk-confirmbar{ margin-top:.9rem; background:#fff; border-radius:20px; padding:1rem 1.1rem;
        box-shadow:0 6px 18px -6px rgba(20,39,79,.08); animation:barUp var(--t-med) var(--ease-out); }
  .bk-confirmbar[hidden]{ display:none; }
  @keyframes barUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  .bk-confirm-when{ display:flex; align-items:center; justify-content:center; gap:.45rem;
        font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:.95rem;
        text-align:center; margin-bottom:.8rem; }
  .bk-confirm-when svg{ width:15px; height:15px; color:var(--ink-soft); flex:0 0 auto; }
  .bk-confirm-who{ display:flex; align-items:center; justify-content:center; gap:.55rem; margin-top:.8rem; }
  .bk-confirm-who img{ width:26px; height:26px; border-radius:50%; object-fit:cover; object-position:top; }
  .bk-confirm-who span{ font-size:.78rem; color:var(--ink-soft); }
  .bk-confirm-who strong{ color:var(--navy); font-weight:600; }
  .bk-server-err{ display:none; text-align:center; font-size:.83rem; color:var(--red); font-weight:500;
        background:#FCF0F2; border:1px solid #F2D4DA; border-radius:12px; padding:.7rem 1rem; margin-bottom:.8rem; }
  .bk-server-err.is-visible{ display:block; animation:errIn var(--t-small) var(--ease-out), shake .4s var(--ease) var(--t-small); }


.booking-tz-field{position:relative;flex:1;min-width:0}.booking-tz-field>svg{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);width:10px;height:10px;color:var(--ink-soft);pointer-events:none}

/* Brief report update above the consultation centerpiece. */
#booking-step .report-notice{display:block;background:none;border:0;border-radius:0;padding:0;margin:0 auto 22px;text-align:center;max-width:500px;color:var(--ink);font-size:13px;line-height:1.6}
#booking-step .report-notice strong,#booking-step .report-notice p{display:inline;font-size:inherit;font-weight:400;line-height:inherit;margin:0}
#booking-step .report-notice strong::after{content:" "}
#booking-step .report-notice .link-button{display:block;margin:8px auto 0}
#booking-step .report-notice .link-button[hidden]{display:none}
#booking-step .booking-heading{text-align:center}
#booking-step .booking-heading h1{font-size:clamp(30px,5vw,38px);line-height:1.12;margin:0 0 12px}
#booking-step .booking-heading p{max-width:490px;margin:0 auto}
#booking-step .booking-meta{text-align:center;margin:16px 0 22px}