/* =============================================================
   SHARED SIGNUP MODAL — Free Course Variants
   Self-contained styles for the email-capture modal used by all
   /free-course/* variants. Depends on these CSS custom properties
   being defined on the host page:
     --charcoal, --white, --amber, --amber-hover, --amber-glow,
     --teal, --warm-grey, --text, --text-light, --off-white, --serif, --sans
   Error colour is hardcoded (#c23b22) so host pages don't need
   a --error variable.
   ============================================================= */

/* ===== SIGNUP FORM ===== */
.signup-form{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:1.5rem;
  max-width:480px;
  margin:1.5rem auto 0;
}
.signup-form.on-light{
  background:var(--white);
  border:1px solid var(--warm-grey);
  box-shadow:0 6px 30px rgba(0,0,0,.08);
}
.signup-form label{
  display:block;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  color:rgba(255,255,255,.85);
  margin-bottom:.4rem;
  text-align:left;
}
.signup-form.on-light label{color:var(--charcoal)}
.signup-form input[type="email"],
.signup-form input[type="text"]{
  width:100%;
  padding:.95rem 1rem;
  font-family:var(--sans);
  font-size:1.05rem;
  border:2px solid rgba(255,255,255,.2);
  border-radius:6px;
  background:var(--white);
  color:var(--text);
  transition:border-color .2s;
}
.signup-form .field-row{margin-bottom:.7rem}
.signup-form.on-light input[type="email"],
.signup-form.on-light input[type="text"]{border-color:var(--warm-grey)}
.signup-form input[type="email"]:focus,
.signup-form input[type="text"]:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-glow)}
.signup-form .submit-btn{
  width:100%;
  margin-top:1rem;
  padding:1.05rem;
  font-size:1.1rem;
}
.signup-form .form-footnote{
  font-family:var(--sans);
  font-size:.9rem;
  color:rgba(255,255,255,.7);
  margin-top:.85rem;
  text-align:center;
}
.signup-form.on-light .form-footnote{color:var(--text-light)}
.signup-form .form-error{
  display:none;
  background:rgba(194,59,34,.1);
  border-left:3px solid #c23b22;
  color:#fff;
  padding:.75rem 1rem;
  border-radius:4px;
  font-size:.95rem;
  margin-top:1rem;
  font-family:var(--sans);
  text-align:left;
}
.signup-form.on-light .form-error{color:#c23b22;background:rgba(194,59,34,.08)}
.signup-form .form-error.show{display:block}
.signup-form .form-error-fallback{margin-top:.6rem;font-size:.9rem}
.signup-form .form-error-fallback a{color:#c23b22;text-decoration:underline;font-weight:600}
.signup-form .form-error-fallback a:hover{opacity:.8}
.signup-form .form-loading{
  display:none;
  text-align:center;
  color:rgba(255,255,255,.85);
  font-family:var(--sans);
  font-size:.95rem;
  margin-top:1rem;
}
.signup-form.on-light .form-loading{color:var(--text-light)}
.signup-form .form-loading.show{display:block}

/* Existing-user "welcome back" panel, shown in place of the form fields if email already registered */
.welcome-back{
  display:none;
  text-align:left;
  color:var(--white);
  font-family:var(--sans);
}
.signup-form.on-light .welcome-back{color:var(--charcoal)}
.welcome-back.show{display:block}
.welcome-back h3{
  font-family:var(--serif);
  font-size:1.4rem;
  margin-bottom:.5rem;
  color:var(--amber);
}
.signup-form.on-light .welcome-back h3{color:var(--teal)}
.welcome-back p{
  font-size:1rem;
  line-height:1.6;
  margin-bottom:1rem;
  color:rgba(255,255,255,.85);
}
.signup-form.on-light .welcome-back p{color:var(--text-light)}
.welcome-back .login-btn{
  display:block;
  width:100%;
  text-align:center;
  background:var(--amber);
  color:var(--white);
  padding:.95rem 1rem;
  border-radius:6px;
  font-weight:700;
  font-family:var(--sans);
  text-decoration:none;
  margin-bottom:.75rem;
}
.welcome-back .login-btn:hover{background:var(--amber-hover)}
.welcome-back .reset-link{
  display:block;
  text-align:center;
  color:rgba(255,255,255,.75);
  font-size:.9rem;
  text-decoration:underline;
}
.signup-form.on-light .welcome-back .reset-link{color:var(--text-light)}

.signup-form.is-submitting .form-fields{opacity:.5;pointer-events:none}
.signup-form.is-submitting .form-loading{display:block}

/* ===== SPINNER ===== */
@keyframes vlSpin{to{transform:rotate(360deg)}}
.signup-form .spinner{
  display:inline-block;width:18px;height:18px;
  border:3px solid rgba(0,0,0,.15);
  border-top-color:var(--amber);
  border-radius:50%;
  animation:vlSpin .8s linear infinite;
  vertical-align:middle;
  margin-right:.5rem;
}

/* ===== SIGNUP MODAL ===== */
.signup-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  padding:1rem;
  font-family:var(--sans);
}
.signup-modal.open{display:flex}
.signup-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(24,24,24,.72);
  backdrop-filter:blur(4px);
  animation:vlFadeIn .2s ease;
}
.signup-modal-panel{
  position:relative;
  background:var(--white);
  color:var(--charcoal);
  border-radius:14px;
  padding:clamp(1.5rem,5vw,2.5rem);
  width:100%;max-width:460px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:vlModalIn .25s cubic-bezier(.2,.9,.3,1.2);
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
}
@keyframes vlFadeIn{from{opacity:0}to{opacity:1}}
@keyframes vlModalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.signup-modal-close{
  position:absolute;top:.6rem;right:.8rem;
  background:none;border:none;
  font-size:1.8rem;line-height:1;
  color:var(--text-light);cursor:pointer;
  padding:.3rem .55rem;border-radius:6px;
  transition:background .15s, color .15s;
}
.signup-modal-close:hover{background:var(--warm-grey);color:var(--charcoal)}
.signup-modal-panel .modal-eyebrow{
  font-family:var(--sans);font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);font-weight:700;
  margin-bottom:.4rem;
}
.signup-modal-panel h2{
  font-family:var(--serif);
  font-size:clamp(1.5rem,4vw,1.9rem);
  line-height:1.2;margin-bottom:.55rem;
  color:var(--charcoal);
}
.signup-modal-panel .modal-sub{
  font-size:.98rem;line-height:1.55;
  color:var(--text-light);
  margin-bottom:1.25rem;
}
.signup-modal .signup-form .submit-btn{margin-top:.85rem}
.signup-modal .trust-row{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.85rem;color:var(--text-light);
  margin-top:1rem;
}
.signup-modal .trust-row .stars{color:var(--amber)}

body.modal-open{overflow:hidden}