:root{
  --blue-bg:#EAF3FB;
  --blue-mid:#AFCFEA;
  --blue-deep:#3E6D9C;
  --blue-ink:#274B6E;
  --yellow-bg:#FFF8E6;
  --yellow-mid:#F6D274;
  --yellow-deep:#C98A28;
  --ink:#33363F;
  --ink-soft:#666B78;
  --white:#FFFFFF;
  --radius:18px;
  --shadow:0 8px 24px rgba(62,109,156,0.12);
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  font-family:'Nunito Sans', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 10%, rgba(175,207,234,0.55) 0%, rgba(175,207,234,0) 42%),
    radial-gradient(circle at 95% 85%, rgba(246,210,116,0.45) 0%, rgba(246,210,116,0) 45%),
    linear-gradient(180deg, #F7FBFE 0%, #FFFDF7 100%);
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.app{
  max-width:640px;
  margin:0 auto;
  padding:28px 18px 60px;
}

header.top{
  text-align:center;
  margin-bottom:22px;
}

header.top .eyebrow{
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-deep);
  font-weight:700;
}

header.top h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:26px;
  color:var(--blue-ink);
  margin:6px 0 0;
}

/* ---------- step indicator ---------- */
.steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:22px 0 26px;
  flex-wrap:wrap;
}
.steps .dot{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--ink-soft);
  font-weight:700;
}
.steps .dot .circle{
  width:22px;height:22px;border-radius:50%;
  background:var(--white);
  border:2px solid var(--blue-mid);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--blue-deep);
}
.steps .dot.active .circle{
  background:var(--blue-deep);
  border-color:var(--blue-deep);
  color:#fff;
}
.steps .dot.done .circle{
  background:var(--yellow-mid);
  border-color:var(--yellow-mid);
  color:var(--ink);
}
.steps .dot.clickable{cursor:pointer;}
.steps .dot.clickable:hover .circle{
  background:var(--yellow-deep);
  border-color:var(--yellow-deep);
  color:#fff;
}
.steps .dot.clickable:hover .lbl{color:var(--blue-ink);}
.steps .line{
  width:22px;height:2px;background:var(--blue-mid);
  opacity:.6;
}

/* ---------- card ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 22px;
  margin-bottom:16px;
  border:1px solid rgba(175,207,234,0.5);
}

.card h2{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:20px;
  color:var(--blue-ink);
  margin:0 0 4px;
}

.card .sub{
  color:var(--ink-soft);
  font-size:14px;
  margin:0 0 18px;
}

.section-title{
  font-family:'Fraunces', serif;
  font-size:16px;
  font-weight:600;
  color:var(--blue-deep);
  margin:22px 0 12px;
  padding-bottom:6px;
  border-bottom:2px solid var(--yellow-mid);
}
.section-title:first-child{margin-top:0;}

/* ---------- choice cards (landing) ---------- */
.choice-grid{
  display:grid;
  gap:14px;
}
.choice-card{
  display:block;
  width:100%;
  text-align:left;
  background:var(--blue-bg);
  border:2px solid transparent;
  border-radius:var(--radius);
  padding:20px 20px;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  font-family:inherit;
}
.choice-card:nth-child(2){background:var(--yellow-bg);}
.choice-card:hover{transform:translateY(-2px); border-color:var(--blue-mid);}
.choice-card:nth-child(2):hover{border-color:var(--yellow-deep);}
.choice-card .ttl{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:18px;
  color:var(--blue-ink);
  margin-bottom:4px;
}
.choice-card .desc{font-size:13.5px;color:var(--ink-soft);}

/* ---------- form elements ---------- */
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:13.5px;
  font-weight:700;
  color:var(--blue-ink);
  margin-bottom:6px;
}
.field .hint{font-size:12px;color:var(--ink-soft);font-weight:400;margin-top:4px;}
.req{color:#C0392B;margin-left:2px;}

.i18n{
  font-size:11px;
  font-style:italic;
  font-weight:500;
  color:var(--ink-soft);
  opacity:.85;
  margin-top:1px;
}
header.top .i18n{margin-top:4px;font-size:12px;}

.lang-pill-group{display:flex;gap:10px;margin-top:6px;}
.lang-pill{
  flex:1;
  padding:12px 14px;
  border-radius:14px;
  border:1.5px solid #DCE6F0;
  background:#F5F9FD;
  font-family:inherit;
  font-weight:800;
  font-size:14px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .15s ease;
}
.lang-pill.active{
  background:var(--blue-deep);
  border-color:var(--blue-deep);
  color:#fff;
}
.field input.invalid,
.field select.invalid,
.field textarea.invalid{
  border-color:#E4544C !important;
  box-shadow:0 0 0 3px rgba(228,84,76,0.15) !important;
}
.checkbox-group.invalid{
  outline:1.5px solid #E4544C;
  outline-offset:6px;
  border-radius:10px;
}
.field input[type=text],
.field input[type=tel],
.field input[type=email],
.field input[type=number],
.field select,
.field textarea{
  width:100%;
  padding:11px 13px;
  border-radius:12px;
  border:1.5px solid #DCE6F0;
  background:#FCFDFE;
  font-family:inherit;
  font-size:14.5px;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--blue-deep);
  box-shadow:0 0 0 3px rgba(62,109,156,0.15);
}
.field textarea{min-height:80px;resize:vertical;}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){.row2{grid-template-columns:1fr;}}

.radio-group,.checkbox-group{display:flex;flex-wrap:wrap;gap:10px;}
.radio-pill,.checkbox-pill{
  display:flex;align-items:center;gap:7px;
  background:#F5F9FD;
  border:1.5px solid #DCE6F0;
  border-radius:999px;
  padding:8px 14px;
  font-size:13.5px;
  cursor:pointer;
  transition:all .15s ease;
}
.radio-pill:has(input:checked),
.checkbox-pill:has(input:checked){
  background:var(--blue-deep);
  border-color:var(--blue-deep);
  color:#fff;
}
.radio-pill input,.checkbox-pill input{accent-color:var(--blue-deep);}

/* ---------- consent box ---------- */
.consent-box{
  background:var(--blue-bg);
  border-radius:14px;
  padding:18px 18px;
  font-size:13.8px;
  color:var(--ink);
  max-height:260px;
  overflow-y:auto;
  border:1px solid var(--blue-mid);
  line-height:1.65;
}
.consent-box p{margin:0 0 10px;}
.consent-box p:last-child{margin-bottom:0;}
.consent-box ul{margin:6px 0;padding-left:20px;}

.agree-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--yellow-bg);
  border:1.5px solid var(--yellow-mid);
  border-radius:12px;
  padding:14px 16px;
  margin-top:14px;
}
.agree-row input{margin-top:3px;accent-color:var(--yellow-deep);width:17px;height:17px;flex-shrink:0;}
.agree-row label{font-size:13.5px;font-weight:600;color:var(--ink);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 22px;
  border-radius:999px;
  border:none;
  font-family:inherit;
  font-weight:800;
  font-size:14.5px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .15s ease;
}
.btn-primary{background:var(--blue-deep);color:#fff;box-shadow:0 6px 16px rgba(62,109,156,0.3);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-secondary{background:transparent;color:var(--blue-deep);border:1.5px solid var(--blue-mid);}
.btn-secondary:hover{background:var(--blue-bg);}
.btn-full{width:100%;}

.btn-row{display:flex;gap:10px;margin-top:22px;}
.btn-row .btn{flex:1;}

/* ---------- calendar ---------- */
.cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.cal-header .month-label{
  font-family:'Fraunces', serif;font-weight:600;font-size:16.5px;color:var(--blue-ink);
}
.cal-nav{
  background:var(--blue-bg);border:none;width:32px;height:32px;border-radius:50%;
  cursor:pointer;color:var(--blue-deep);font-size:16px;font-weight:800;
}
.cal-nav:disabled{opacity:.3;cursor:not-allowed;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-dow{text-align:center;font-size:11.5px;font-weight:800;color:var(--ink-soft);padding-bottom:4px;}
.cal-day{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  font-size:13.5px;
  background:transparent;
  border:none;
  color:var(--ink);
  cursor:default;
}
.cal-day.empty{visibility:hidden;}
.cal-day.available{
  background:var(--blue-bg);
  cursor:pointer;
  font-weight:700;
  color:var(--blue-ink);
}
.cal-day.available:hover{background:var(--blue-mid);}
.cal-day.selected{background:var(--blue-deep) !important;color:#fff !important;}
.cal-day.past,.cal-day.disabled{color:#C7CCD6;}

.legend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--ink-soft);}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.legend i{width:11px;height:11px;border-radius:4px;display:inline-block;}
.legend .lg-blue{background:var(--blue-bg);border:1px solid var(--blue-mid);}

/* ---------- session list ---------- */
.session-list{display:grid;gap:10px;margin-top:16px;}
.session-opt{
  display:flex;align-items:center;justify-content:space-between;
  background:#F5F9FD;
  border:1.5px solid #DCE6F0;
  border-radius:14px;
  padding:13px 16px;
  cursor:pointer;
}
.session-opt.selected{border-color:var(--blue-deep);background:var(--blue-bg);}
.session-opt.full{opacity:.45;cursor:not-allowed;}
.session-opt .time{font-weight:800;font-size:14.5px;color:var(--ink);}
.session-opt .slot-badge{
  font-size:12px;font-weight:700;
  background:var(--yellow-mid);color:var(--ink);
  padding:4px 10px;border-radius:999px;
}
.session-opt.full .slot-badge{background:#EDEEF2;color:var(--ink-soft);}

.manual-time-box{margin-top:16px;}

/* ---------- summary ---------- */
.summary-box{
  background:var(--blue-bg);
  border-radius:14px;
  padding:16px 18px;
  font-size:13.8px;
}
.summary-box .row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed rgba(62,109,156,0.2);}
.summary-box .row:last-child{border-bottom:none;}
.summary-box .row span:first-child{color:var(--ink-soft);}
.summary-box .row span:last-child{font-weight:700;color:var(--blue-ink);}

/* ---------- success ---------- */
.success-wrap{text-align:center;padding:20px 6px;}
.success-wrap .icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--yellow-mid);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;margin:0 auto 16px;
}
.success-wrap h2{margin-bottom:8px;}

.error-msg{
  background:#FDEEEE;color:#B3423A;border:1.5px solid #F3C6C2;
  padding:11px 14px;border-radius:12px;font-size:13.5px;margin-bottom:14px;
}

.helper-text{font-size:12.5px;color:var(--ink-soft);margin-top:10px;}

.hidden{display:none !important;}

.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.4);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

footer.foot{
  text-align:center;
  margin-top:26px;
  font-size:12px;
  color:var(--ink-soft);
}