/* ===========================================================
   EASYDAY – Contact / Demo Modal (mailto-based)
   Replaces the Calendly-style booking modal with a simple
   module-interest + contact-info form that opens a mailto link.
   =========================================================== */

/* --- Scrim (reuses .bk-scrim positioning) --- */
.ct-scrim{
  position:fixed; inset:0;
  background:oklch(0.2 0.02 250 / .55);
  backdrop-filter:blur(4px);
  z-index:95; display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.ct-scrim.open{ opacity:1; pointer-events:auto; }

/* --- Panel --- */
.ct-panel{
  background:var(--surface); border-radius:22px;
  width:min(560px, 100%); max-height:calc(100vh - 40px);
  overflow-y:auto; padding:clamp(28px,4vw,40px);
  box-shadow:var(--shadow-m);
  transform:translateY(14px) scale(.985);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.ct-scrim.open .ct-panel{ transform:none; }

/* close button */
.ct-x{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-3); transition:background .15s, color .15s;
}
.ct-x:hover{ background:var(--bg-soft); color:var(--ink); }

/* --- Header --- */
.ct-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px;
}
.ct-head .ct-ic{
  width:46px; height:46px; border-radius:12px;
  background:var(--teal-soft); color:var(--accent-ink);
  display:grid; place-items:center; flex:none;
}
.ct-head .ct-ic svg{ width:23px; height:23px; }
.ct-head h3{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(20px,2.4vw,26px); letter-spacing:-0.01em;
  margin:0;
}
.ct-head p{
  margin:4px 0 0; font-size:14.5px; color:var(--ink-2);
}

/* --- Module selection --- */
.ct-modules{
  margin-bottom:22px;
}
.ct-modules legend{
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  margin-bottom:12px; display:block;
}
.ct-mod-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
}
@media (max-width:480px){ .ct-mod-grid{ grid-template-columns:1fr; } }

.ct-mod-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 13px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--bg);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.ct-mod-item:hover{ border-color:var(--teal); background:var(--teal-soft); }
.ct-mod-item input[type="checkbox"]{
  width:17px; height:17px; accent-color:var(--teal);
  flex:none; cursor:pointer;
}
.ct-mod-item span{
  font-size:14px; font-weight:500; color:var(--ink);
}

/* --- Contact fields --- */
.ct-fields{
  display:grid; grid-template-columns:1fr 1fr; gap:13px;
  margin-bottom:18px;
}
@media (max-width:480px){ .ct-fields{ grid-template-columns:1fr; } }

.ct-field{
  display:flex; flex-direction:column; gap:6px;
}
.ct-field.full{ grid-column:1 / -1; }
.ct-field label{
  font-size:12.5px; font-weight:550; color:var(--ink-2);
}
.ct-field input,
.ct-field textarea{
  border:1.5px solid var(--line); border-radius:10px;
  padding:11px 13px; font:inherit; font-size:14.5px;
  background:var(--bg); color:var(--ink); outline:none;
  transition:border-color .15s;
}
.ct-field input:focus,
.ct-field textarea:focus{ border-color:var(--teal); }
.ct-field textarea{ resize:vertical; min-height:66px; }

/* --- Submit --- */
.ct-submit{
  width:100%; justify-content:center; margin-top:8px;
}

/* --- Success state --- */
.ct-success{
  text-align:center; padding:18px 0 8px; display:none;
}
.ct-success.show{ display:block; }
.ct-success .ct-check{
  width:66px; height:66px; border-radius:50%;
  background:var(--teal-soft); color:var(--teal);
  display:grid; place-items:center; margin:0 auto 20px;
}
.ct-success .ct-check svg{ width:32px; height:32px; }
.ct-success h3{ font-size:24px; margin:0 0 10px; }
.ct-success p{ color:var(--ink-2); font-size:15px; max-width:38ch; margin-inline:auto; }

.ct-form-wrap.hidden{ display:none; }