/* DoseFit intake wizard v1.3 — Medvi-style structure, DoseFit palette.
   White airy card, segmented progress, oversized inputs, icon option tiles. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.dosefit-survey{
	--df-forest:#14342B; --df-emerald:#2E6B52; --df-gold:#B8923F;
	--df-ink:#111827; --df-sub:#6b7280; --df-line:#e5e7eb; --df-soft:#f7f8f7;
	--df-shadow:0 4px 20px rgba(0,0,0,.08);
	max-width:620px; margin:0 auto; font-family:'Inter',-apple-system,'Segoe UI',sans-serif; color:var(--df-ink);
}

/* Card */
.dosefit-survey .df-card{
	background:#fff; border-radius:16px; box-shadow:var(--df-shadow);
	padding:1.6rem 2rem 1.8rem;
}

/* Top brand row */
.dosefit-survey .df-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
.dosefit-survey .df-top__brand{ font-weight:800; letter-spacing:-.02em; font-size:1.15rem; color:var(--df-forest); }
.dosefit-survey .df-top__brand i{ font-style:normal; color:var(--df-gold); }
.dosefit-survey .df-top__trust{ font-size:.78rem; font-weight:600; color:var(--df-emerald); background:#eef5f1; padding:.35rem .7rem; border-radius:999px; }

/* Segmented progress (Medvi pills) */
.dosefit-survey .df-progress{ margin-bottom:1.7rem; }
.dosefit-survey .df-progress__segs{ display:flex; gap:8px; }
.dosefit-survey .df-progress__segs span{ flex:1; height:8px; border-radius:999px; background:#eceef0; transition:background .3s; }
.dosefit-survey .df-progress__segs span.done{ background:var(--df-forest); }
.dosefit-survey .df-progress__segs span.active{ background:linear-gradient(90deg,var(--df-forest) 60%,#cdd9d2 60%); }
.dosefit-survey .df-progress__meta{ display:flex; justify-content:space-between; margin-top:.55rem; font-size:.78rem; font-weight:600; color:var(--df-sub); }
.dosefit-survey .df-progress__meta span:first-child{ color:var(--df-forest); }

/* Step */
.dosefit-survey .df-step{ animation:dfIn .35s ease; min-height:200px; }
@keyframes dfIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.dosefit-survey .df-q{ font-size:1.45rem; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:var(--df-ink); margin:0 0 .35rem; }
.dosefit-survey .df-help{ color:var(--df-sub); font-size:.95rem; line-height:1.5; margin:0 0 1.35rem; }
.dosefit-survey .df-sublabel{ font-weight:600; font-size:.95rem; margin:1.3rem 0 .6rem; }

/* Fields — oversized Medvi inputs */
.dosefit-survey .df-field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1rem; }
.dosefit-survey .df-label{ font-size:.92rem; font-weight:600; color:var(--df-ink); }
.dosefit-survey .df-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.dosefit-survey input[type=text],.dosefit-survey input[type=tel],.dosefit-survey input[type=email],.dosefit-survey input[type=number]{
	width:100%; height:62px; padding:0 1.1rem; border:1px solid var(--df-line); border-radius:12px;
	font-size:1.05rem; font-family:inherit; color:var(--df-ink); background:#fff;
	box-shadow:0 1px 2px rgba(16,24,40,.04); transition:border-color .15s, box-shadow .15s; }
.dosefit-survey input::placeholder{ color:#9ca3af; }
.dosefit-survey input:focus{ outline:none; border-color:var(--df-emerald); box-shadow:0 0 0 4px rgba(46,107,82,.12); }

/* Hidden elements must always stay hidden (overrides display:grid etc.) */
.dosefit-survey [hidden]{ display:none !important; }
/* Height unit toggle */
.dosefit-survey .df-label:has(.df-unit){ display:flex; align-items:center; justify-content:space-between; }
.dosefit-survey .df-unit{ display:inline-flex; background:#eef0ee; border-radius:999px; padding:3px; }
.dosefit-survey .df-unit__btn{ border:0; background:transparent; font-family:inherit; font-size:.74rem; font-weight:600; padding:5px 13px; border-radius:999px; cursor:pointer; color:var(--df-sub); transition:.15s; }
.dosefit-survey .df-unit__btn.is-active{ background:#fff; color:var(--df-forest); box-shadow:0 1px 2px rgba(0,0,0,.1); }
.dosefit-survey .df-height{ margin-top:.45rem; }
.dosefit-survey #df-h-ft-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.dosefit-survey .df-bmi{ margin-top:.5rem; background:var(--df-soft); border:1px solid var(--df-line); color:var(--df-forest); padding:.7rem 1rem; border-radius:12px; font-size:.95rem; }
.dosefit-survey .df-bmi b{ font-size:1.12rem; margin-left:.35rem; }

/* Option tiles (Medvi gender-card style) */
.dosefit-survey .df-opts--tiles{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dosefit-survey .df-opts--tiles .df-opt{
	position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem;
	min-height:138px; padding:1.3rem .8rem; cursor:pointer; text-align:center;
	background:#fff; border:1.5px solid #eef0ee; border-radius:16px; box-shadow:var(--df-shadow);
	font-size:1.02rem; font-weight:600; color:var(--df-ink);
	transition:transform .12s cubic-bezier(.4,0,.2,1), border-color .15s, background .15s, box-shadow .15s; }
.dosefit-survey .df-opts--tiles .df-opt:hover{ border-color:var(--df-emerald); transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,52,43,.12); }
.dosefit-survey .df-opts--tiles .df-opt:active{ transform:translateY(0) scale(.99); }
.dosefit-survey .df-opt__ico{
	width:60px; height:60px; border-radius:50%; background:#eef5f1; color:var(--df-emerald);
	display:flex; align-items:center; justify-content:center; position:relative;
	transition:background .18s, color .18s, transform .18s; }
.dosefit-survey .df-opt__ico svg{ display:block; }
.dosefit-survey .df-opts--tiles .df-opt input{ position:absolute; opacity:0; pointer-events:none; }
.dosefit-survey .df-opts--tiles .df-opt:has(input:checked){ border-color:var(--df-forest); background:#f3f7f4; box-shadow:0 10px 26px rgba(20,52,43,.14); }
.dosefit-survey .df-opts--tiles .df-opt:has(input:checked) .df-opt__ico{ background:var(--df-forest); color:#fff; transform:scale(1.06); }
/* selected check badge */
.dosefit-survey .df-opts--tiles .df-opt:has(input:checked)::after{
	content:''; position:absolute; top:11px; right:11px; width:22px; height:22px; border-radius:50%;
	background:var(--df-forest) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/13px no-repeat; }

/* Option rows (multi-select) */
.dosefit-survey .df-opts--rows{ display:flex; flex-direction:column; gap:10px; }
.dosefit-survey .df-opts--rows .df-opt{
	position:relative; display:flex; align-items:center; gap:.85rem; cursor:pointer;
	padding:1.05rem 1.1rem; background:#fff; border:1.5px solid var(--df-line); border-radius:12px;
	box-shadow:0 1px 2px rgba(16,24,40,.04); font-size:1rem; font-weight:500; transition:border-color .15s, background .15s; }
.dosefit-survey .df-opts--rows .df-opt:hover{ border-color:var(--df-emerald); }
.dosefit-survey .df-opts--rows .df-opt input{ position:absolute; opacity:0; pointer-events:none; }
.dosefit-survey .df-opt__box{ flex:0 0 auto; width:22px; height:22px; border:2px solid #d1d5db; border-radius:7px; position:relative; transition:.15s; }
.dosefit-survey .df-opt__box::after{ content:''; position:absolute; left:5px; top:1px; width:7px; height:12px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(40deg) scale(0); transition:.15s; }
.dosefit-survey .df-opts--rows .df-opt:has(input:checked){ border-color:var(--df-forest); background:#f2f7f4; }
.dosefit-survey .df-opts--rows .df-opt:has(input:checked) .df-opt__box{ background:var(--df-forest); border-color:var(--df-forest); }
.dosefit-survey .df-opts--rows .df-opt:has(input:checked) .df-opt__box::after{ transform:rotate(40deg) scale(1); }

/* Review summary */
.dosefit-survey .df-summary{ background:var(--df-soft); border:1px solid var(--df-line); border-radius:12px; padding:.4rem 1.1rem; margin-bottom:1.2rem; }
.dosefit-survey .df-summary div{ display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px solid var(--df-line); font-size:.95rem; }
.dosefit-survey .df-summary div:last-child{ border-bottom:0; }
.dosefit-survey .df-summary span{ color:var(--df-sub); }

/* Consent + notes */
.dosefit-survey .df-consent{ display:flex; align-items:flex-start; gap:.6rem; font-size:.86rem; line-height:1.5; margin:0 0 .9rem; }
.dosefit-survey .df-consent input{ width:20px; height:20px; margin-top:.1rem; accent-color:var(--df-forest); flex:0 0 auto; }
.dosefit-survey .df-consent a{ color:var(--df-emerald); }
.dosefit-survey .df-disclaimer{ font-size:.78rem; color:#9ca3af; line-height:1.5; }

/* Nav — pill buttons */
.dosefit-survey .df-nav{ display:flex; align-items:center; gap:.7rem; margin-top:1.6rem; }
.dosefit-survey .df-next,.dosefit-survey .df-submit{
	flex:1; height:58px; background:var(--df-forest); color:#fff; border:0; border-radius:999px;
	font-family:inherit; font-size:1.02rem; font-weight:700; letter-spacing:.01em; cursor:pointer;
	box-shadow:0 6px 16px rgba(20,52,43,.22); transition:background .15s, transform .06s; }
.dosefit-survey .df-next:hover,.dosefit-survey .df-submit:hover{ background:#0f261f; }
.dosefit-survey .df-next:active,.dosefit-survey .df-submit:active{ transform:scale(.99); }
.dosefit-survey .df-submit{ background:var(--df-gold); box-shadow:0 6px 16px rgba(184,146,63,.3); }
.dosefit-survey .df-submit:hover{ background:#a07d31; }
.dosefit-survey .df-next:disabled,.dosefit-survey .df-submit:disabled{ opacity:.6; cursor:not-allowed; }
.dosefit-survey .df-back{ flex:0 0 52px; height:52px; border-radius:50%; background:#fff; border:1px solid var(--df-line); color:var(--df-sub); font-size:1.1rem; font-weight:700; cursor:pointer; }
.dosefit-survey .df-back:hover{ color:var(--df-ink); border-color:#cfd4da; }

.dosefit-survey .df-privacy-note{ text-align:center; font-size:.78rem; color:#9ca3af; margin:1rem 0 0; }
.dosefit-survey .df-message{ margin-top:1rem; padding:.8rem 1rem; border-radius:12px; font-size:.9rem; }
.dosefit-survey .df-message:empty{ display:none; }
.dosefit-survey .df-message.error{ background:#fdecea; color:#b3261e; }
.dosefit-survey .df-message.success{ background:#e7f6ee; color:#146c43; }

/* ---- Mobile ---- */
@media (max-width:600px){
	.dosefit-survey{ padding:0 4px; }
	.dosefit-survey .df-card{ padding:1.2rem 1.05rem 1.3rem; border-radius:14px; }
	.dosefit-survey .df-q{ font-size:1.3rem; }
	.dosefit-survey .df-grid{ grid-template-columns:1fr 1fr; }
	.dosefit-survey .df-opts--tiles{ gap:10px; }
	.dosefit-survey .df-opts--tiles .df-opt{ min-height:112px; }
	.dosefit-survey input[type=text],.dosefit-survey input[type=tel],.dosefit-survey input[type=email],.dosefit-survey input[type=number]{ font-size:16px; height:58px; }
	.dosefit-survey .df-next,.dosefit-survey .df-submit{ height:54px; }
}
/* :has() fallback */
@supports not (selector(:has(*))){
	.dosefit-survey .df-opt input:checked ~ .df-opt__txt{ font-weight:700; color:var(--df-forest); }
}