/* ============================================================
   Lead CTA modal — one component, shared by every page.

   Injected by cta-modal.js. Every CTA on the site opens this, so a
   visitor gets the same two-step flow (details, then pick a slot)
   wherever they click, instead of a mailto: on some pages and this
   dialog on others.
   ============================================================ */

/* ---------- LEAD MODAL ---------- */
.ov{
  position:fixed;inset:0;z-index:200;
  background:rgba(14,14,16,.5);
  display:flex;align-items:center;justify-content:center;padding:26px;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s,visibility .3s;
}
/* backdrop-filter must ONLY exist while open: on a hidden overlay Chrome
   still filters the backdrop and blurs the whole page. */
.ov.open{opacity:1;pointer-events:auto;visibility:visible;backdrop-filter:blur(6px)}
.modal{
  position:relative;direction:ltr;         /* pinned: form left, image right */
  width:min(540px,100%);max-height:calc(100vh - 52px);
  background:#fff;border-radius:30px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.3);
  transform:translateY(20px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.ov.open .modal{transform:none}
.m-form{padding:44px 40px;overflow-y:auto;direction:rtl}
html[dir="ltr"] .m-form{direction:ltr}
.m-form h3{font-family:var(--font-head);font-size:29px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.m-form .m-sub{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:10px}
.fld{margin-top:16px}
.fld label{display:block;font-size:13px;font-weight:500;margin-bottom:7px}
.fld input,.fld textarea{
  width:100%;font-family:var(--font-body);font-size:14.5px;color:var(--ink);
  background:#f7f7f8;border:1.5px solid #ececef;border-radius:13px;
  padding:13px 15px;outline:none;transition:border-color .2s,background .2s;
}
.fld textarea{resize:vertical;min-height:74px}
.fld input:focus,.fld textarea:focus{border-color:var(--purple);background:#fff}
.fld input::placeholder,.fld textarea::placeholder{color:#b6b6bd}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.m-submit{
  width:100%;margin-top:20px;
  background:linear-gradient(180deg,#f6604f,#ef4433);
  color:#fff;border:none;border-radius:14px;
  font-family:var(--font-body);font-size:16px;font-weight:500;
  padding:16px 0;cursor:pointer;
  box-shadow:0 14px 30px rgba(241,75,60,.32), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s,opacity .2s;
}
.m-submit:hover{transform:translateY(-2px)}
.m-submit:disabled{opacity:.6;cursor:default;transform:none}
.m-note{margin-top:13px;font-size:12.5px;color:#a5a5ae;text-align:center}
.m-msg{margin-top:13px;font-size:13.5px;color:var(--red);min-height:1em}
.m-close{
  position:absolute;top:16px;right:16px;z-index:3;
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:center;
}
/* --- scheduling step --- */
.m-back{
  background:none;border:none;cursor:pointer;padding:0;margin-bottom:14px;
  font-family:var(--font-body);font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:6px;
}
.m-back:hover{color:var(--ink)}
.m-back svg{transform:scaleX(-1)}
html[dir="ltr"] .m-back svg{transform:none}
.sched-tz{
  margin-top:14px;font-size:12.5px;color:#a5a5ae;
  display:flex;align-items:center;gap:7px;
}
.sched-load{padding:26px 0;text-align:center;color:var(--muted);font-size:14px}
.sched-days{margin-top:8px;max-height:330px;overflow-y:auto;padding-inline-end:4px}
.sched-day+.sched-day{margin-top:18px}
.sched-dh{
  font-size:13px;font-weight:600;margin-bottom:9px;
  position:sticky;top:0;background:#fff;padding:4px 0;z-index:1;
}
.sched-dh span{color:var(--muted);font-weight:400;margin-inline-start:6px}
.sched-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.slot{
  font-family:var(--font-body);font-size:14px;font-variant-numeric:tabular-nums;
  background:#f7f7f8;border:1.5px solid #ececef;border-radius:11px;
  padding:11px 0;cursor:pointer;color:var(--ink);
  transition:border-color .2s,background .2s,transform .2s;
}
.slot:hover{border-color:#c9a9ff;background:#fff;transform:translateY(-1px)}
.slot.sel{
  background:linear-gradient(180deg,#a76cff,#8f4df3);color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(149,89,251,.35);
}
.sched-none{padding:22px 0;color:var(--muted);font-size:14px;line-height:1.7}
.m-skip{
  display:block;width:100%;margin-top:12px;
  background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:13px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.m-skip:hover{color:var(--ink)}
.m-done{padding:60px 40px;text-align:center;direction:rtl}
html[dir="ltr"] .m-done{direction:ltr}
.m-done .tick{
  width:70px;height:70px;border-radius:50%;margin:0 auto 22px;
  background:linear-gradient(160deg,#a875ff,#8b4bf0);
  display:flex;align-items:center;justify-content:center;
}
.m-done h3{font-family:var(--font-head);font-size:27px;font-weight:600;letter-spacing:-.02em}
.m-done p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-top:12px}
body.locked{overflow:hidden}
@media(max-width:760px){
  .m-form{padding:40px 26px}
}

@media(max-width:620px){
  .ov{padding:10px}
  .modal{border-radius:22px;max-height:calc(100vh - 20px)}
  .m-form{padding:34px 20px}
  .m-form h3{font-size:24px}
  .m-close{top:12px;right:12px;width:34px;height:34px}
  .m-back{padding-inline-end:46px}   /* clear the close button in RTL */
  .fld input,.fld textarea{font-size:15px;padding:12px 13px}  /* >=15px stops iOS zoom-on-focus */
  .m-submit{padding:15px 0;font-size:15.5px}
  .sched-days{max-height:42vh}
  .sched-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px}
  .slot{font-size:13.5px;padding:10px 0}
  .m-done{padding:44px 22px}
}