:root{
  --deep:#062f23;
  --deep2:#031c16;
  --green:#0b6b3d;
  --teal:#18c7b7;
  --lime:#a8f12d;
  --yellow:#f7dc34;
  --gold:#ffd24a;
  --cream:#fbfff4;
  --warm:#eef6d4;
  --text:#103126;
  --muted:#5f746b;
  --danger:#a33636;
  --shadow:0 20px 54px rgba(6,47,35,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 90% 4%,rgba(168,241,45,.22),transparent 26%),
    radial-gradient(circle at 4% 12%,rgba(24,199,183,.14),transparent 24%),
    linear-gradient(180deg,#f4f8e6 0%,#ffffff 40%,#f5fbdf 100%);
  line-height:1.55;
}
a{text-decoration:none;color:inherit}

.intake-header{
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(90deg,rgba(3,28,22,.98),rgba(6,47,35,.98),rgba(11,107,61,.96));
  box-shadow:0 14px 38px rgba(0,0,0,.18);
  padding:10px 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.intake-brand img{
  width:220px;
  max-height:64px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
#languageSelector{
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-weight:900;
  font-size:.85rem;
  background:white;
  color:var(--deep);
  flex-shrink:0;
}

.intake-shell{
  max-width:760px;
  margin:0 auto;
  padding:48px 6% 80px;
}

.intake-intro{
  text-align:center;
  margin-bottom:38px;
}
.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  font-size:.72rem;
  color:var(--green);
  background:var(--warm);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:14px;
}
.intake-intro h1{
  font-size:clamp(1.7rem,4vw,2.4rem);
  color:var(--deep);
  margin-bottom:12px;
  text-wrap:balance;
}
.intro-text{
  color:var(--muted);
  max-width:560px;
  margin:0 auto;
  font-size:.98rem;
}

.intake-card{
  background:#ffffff;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:28px 26px;
  margin-bottom:22px;
  border-top:4px solid transparent;
  border-image:linear-gradient(100deg,var(--teal),var(--lime),var(--yellow),var(--gold)) 1;
}
.intake-card h2{
  font-size:1.15rem;
  color:var(--deep);
  margin-bottom:6px;
}
.card-hint{
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:16px;
}

/* .field/.measurement-field set display:flex unconditionally below, which
   as author CSS beats the UA stylesheet's [hidden]{display:none} at equal
   specificity — without this, JS setting .hidden=true on a conditional
   field (countryOtherWrap previously, heightMetricField/heightImperialField
   still today) had no visual effect and both states rendered at once. */
[hidden]{display:none !important}

.field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.field-grid .field{margin-bottom:0}
.field span{
  font-weight:700;
  font-size:.85rem;
  color:var(--text);
}
.field input,
.field textarea,
.field select,
.measurement-field input{
  border:1px solid #d8e3d3;
  border-radius:10px;
  padding:12px 13px;
  font:inherit;
  color:var(--text);
  background:var(--cream);
  width:100%;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.measurement-field input:focus{
  outline:2px solid var(--teal);
  outline-offset:1px;
}
.field textarea{resize:vertical}
.field input[type="file"]{
  background:transparent;
  border:1px dashed #b9cdb1;
  padding:14px 13px;
}
.field input[type="checkbox"]{width:auto}

.file-preview-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.file-preview-thumb{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #d8e3d3;
  background:var(--cream);
}

.lab-credit-note{
  background:linear-gradient(100deg,rgba(255,210,74,.22),rgba(168,241,45,.18));
  border:1px solid var(--gold);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:18px;
  font-size:.88rem;
  font-weight:700;
  color:var(--text);
}

.file-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 6px 6px;
  border:1px solid #d8e3d3;
  border-radius:10px;
  background:var(--cream);
  max-width:100%;
}
.file-chip-name{
  font-size:.8rem;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:160px;
}
.file-chip-remove{
  border:0;
  background:rgba(163,54,54,.12);
  color:var(--danger);
  font-weight:900;
  width:20px;
  height:20px;
  line-height:1;
  border-radius:50%;
  cursor:pointer;
  flex-shrink:0;
  font-size:.85rem;
}
.file-chip-remove:hover{background:rgba(163,54,54,.22)}

.dob-input-row{display:flex;gap:8px;align-items:stretch}
.dob-input-row input[type="text"]{flex:1;min-width:0}
.dob-picker-wrap{position:relative;flex-shrink:0}
.dob-picker-btn{
  width:46px;
  height:100%;
  min-height:46px;
  border:1px solid #d8e3d3;
  border-radius:10px;
  background:var(--cream);
  color:var(--deep);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.dob-picker-btn:hover{background:#eef5ea}
.dob-picker-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.dob-native-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  border:0;
  padding:0;
  margin:0;
}

.measurement-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.measurement-field{display:flex;flex-direction:column;gap:6px;margin-bottom:0}
.measurement-field label{font-weight:700;font-size:.85rem}
.height-imperial-row{display:flex;gap:10px}
.height-imperial-row input{width:100%}
.unit-badge{font-weight:400;color:var(--muted)}

.yesno-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 16px;
  padding:14px 0;
  border-bottom:1px solid #eef3ea;
}
.yesno-row:last-of-type{border-bottom:0}
.yesno-label{
  font-weight:700;
  font-size:1.05rem;
  color:var(--text);
}
.yesno-options{display:flex;gap:10px}
.yesno-pill{position:relative;cursor:pointer}
.yesno-pill input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  margin:0;
}
.yesno-pill span{
  display:inline-block;
  min-width:66px;
  text-align:center;
  padding:11px 20px;
  border-radius:999px;
  border:2px solid #d8e3d3;
  background:var(--cream);
  font-weight:700;
  font-size:.95rem;
  color:var(--text);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.yesno-pill input:checked + span{
  background:var(--green);
  border-color:var(--green);
  color:#ffffff;
}
.yesno-pill input:focus-visible + span{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

.conditional-field{
  margin:6px 0 16px;
  padding-left:14px;
  border-left:3px solid var(--gold);
}
.other-condition-field{margin-top:18px}

.confirmation-card{text-align:center}
.confirmation-card h2{color:var(--green);font-size:1.4rem}
.client-id-display{
  font-size:clamp(1.6rem,5vw,2.2rem);
  font-weight:900;
  letter-spacing:.06em;
  color:var(--deep);
  background:var(--warm);
  border-radius:14px;
  padding:16px 20px;
  margin:16px 0;
}

.consent-card{background:var(--warm)}
.consent-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
}
.consent-row input{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.consent-row span{font-size:.88rem;color:var(--text)}

.validation-summary{
  background:#fdf1f1;
  border:2px solid var(--danger);
  color:var(--danger);
  font-weight:800;
  font-size:.95rem;
  padding:14px 18px;
  border-radius:14px;
  margin-bottom:22px;
  text-align:center;
}
.field-error-msg{
  color:var(--danger);
  font-size:.8rem;
  font-weight:700;
  margin:2px 0 0;
  width:100%;
  flex-basis:100%;
}
.field.field-invalid input,
.field.field-invalid textarea,
.field.field-invalid select{
  border-color:var(--danger);
  background:#fdf1f1;
}
.field.field-invalid > span:first-of-type{color:var(--danger)}
.yesno-row.field-invalid{
  background:#fdf1f1;
  border-radius:12px;
  margin:0 -12px;
  padding:14px 12px;
  flex-wrap:wrap;
}
.yesno-row.field-invalid .yesno-label{color:var(--danger)}
.yesno-row.field-invalid .yesno-pill span{border-color:var(--danger)}
.consent-row.field-invalid{
  outline:2px solid var(--danger);
  outline-offset:6px;
  border-radius:10px;
  flex-wrap:wrap;
}

.submit-row{
  text-align:center;
  margin-top:8px;
}
.book-auth-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.book-auth-actions button{
  border-radius:999px;
  padding:13px 22px;
  font-weight:900;
  border:1px solid var(--green);
  background:transparent;
  color:var(--green);
  cursor:pointer;
  font:inherit;
}
#submitBtn,
.cta-link{
  display:inline-block;
  border:0;
  border-radius:999px;
  padding:17px 40px;
  font-weight:900;
  font-size:1rem;
  color:var(--deep);
  background:linear-gradient(100deg,var(--teal),var(--lime),var(--yellow),var(--gold));
  box-shadow:0 12px 28px rgba(168,241,45,.30);
  cursor:pointer;
  transition:transform .15s ease,opacity .15s ease;
}
#submitBtn:hover,
.cta-link:hover{transform:translateY(-1px)}
#submitBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.form-status{
  margin-top:16px;
  font-weight:700;
  font-size:.9rem;
  min-height:1.3em;
  white-space:pre-line;
}
.form-status[data-state="error"]{color:var(--danger)}
.form-status[data-state="success"]{color:var(--green)}

.intake-footer{
  text-align:center;
  padding:26px 6%;
  background:var(--deep2);
  color:#cfe4d4;
  font-size:.8rem;
}

@media(max-width:640px){
  .field-grid{grid-template-columns:1fr}
  .measurement-grid{grid-template-columns:repeat(2,1fr)}
  .intake-card{padding:22px 18px}
  .intake-brand img{width:150px}
  #languageSelector{padding:8px 12px;font-size:.78rem}
  .yesno-row{flex-direction:column;align-items:flex-start;gap:10px}
  .yesno-options{width:100%}
  .yesno-pill{flex:1}
  .yesno-pill span{width:100%}
}
@media(max-width:420px){
  .measurement-grid{grid-template-columns:1fr}
}