/* ============================================================
   Lead CTA form — styles for the form itself.

   Pairs with cta-form.js. Everything here is the form: fields, submit
   button, slot grid, the confirmation state. No overlay, no dialog card,
   no close button — the host owns its own chrome (see cta-modal.css for
   the modal's, /book/ for the standalone page's).

   Two knobs a host can turn, because the same form has to sit inside a
   540px dialog and on a full page:

     --cta-form-pad    padding around the panel        (default 44px 40px)
     --cta-sched-max   height cap on the scrolling
                       slot list, or `none` to let
                       the page scroll instead        (default 330px)

   The form reads --purple, --ink, --muted, --red, --font-head and
   --font-body off the host page, so it picks up the site's tokens rather
   than restating them and drifting.
   ============================================================ */

.m-form{
  padding:var(--cta-form-pad,44px 40px);
  direction:rtl;
}
html[dir="ltr"] .m-form{direction:ltr}
/* .m-title, not h3: the host picks the heading level (see cta-form.js) */
.m-form .m-title{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}

/* --- 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:var(--cta-sched-max,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)}

/* --- the confirmation state (replaces the details panel in place) --- */
.m-done{padding:var(--cta-done-pad,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 .m-title{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}
/* The Meet link reads as an action, not as more body copy, so it gets the
   button-ish treatment rather than inheriting .m-done p's muted grey. */
.m-done .m-meet{margin-top:18px}
.m-done .m-meet a{
  display:inline-block;padding:11px 22px;border-radius:999px;
  background:#f3ecff;color:#6b34cc;font-size:14.5px;font-weight:600;
  text-decoration:none;border:1px solid #e0d0ff;
}
.m-done .m-meet a:hover{background:#eae0ff}

@media(max-width:760px){
  .m-form{padding:var(--cta-form-pad,40px 26px)}
}
@media(max-width:620px){
  .m-form{padding:var(--cta-form-pad,34px 20px)}
  .m-form .m-title{font-size:24px}
  .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-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px}
  .slot{font-size:13.5px;padding:10px 0}
  .m-done{padding:var(--cta-done-pad,44px 22px)}
}