/* ==========================================================================
   Quick Start wizard — standalone page, deliberately NOT sharing the main
   site header/footer/container so it can be a true full-screen app-like
   flow on mobile (matches the reference design's clean, focused feel).
   ========================================================================== */

:root{
  --qs-maroon: #a91b47;
  --qs-maroon-dark: #7a1330;
  --qs-pink-bg: #fdeef1;
  --qs-ink: #1f1620;
  --qs-muted: #7a6a70;
  --qs-line: #f0dfe2;
}

*{ box-sizing:border-box; }

.mm-qs-body{
  margin:0;
  font-family:'Lexend','Noto Sans Devanagari',sans-serif;
  background:#f4f2f3;
  color:var(--qs-ink);
  min-height:100vh;
}

.mm-qs-shell{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  background:#fff;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.06);
}

.mm-qs-header{
  padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--qs-line);
}
.mm-qs-logo{
  font-weight:800;
  font-size:1.3rem;
  color:var(--qs-maroon);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.mm-qs-logo-img{ height:32px; width:auto; display:block; }

.mm-qs-progress{
  padding:.8rem 1.4rem 0;
  display:flex;
  align-items:center;
  gap:.8rem;
}
.mm-qs-progress-bar-track{ flex:1; }
.mm-qs-progress{ position:relative; }
.mm-qs-progress-bar{
  height:5px;
  border-radius:99px;
  background:var(--qs-line);
  flex:1;
  position:relative;
  overflow:hidden;
}
.mm-qs-progress-bar::after{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:var(--qs-progress, 0%);
  background:linear-gradient(90deg, var(--qs-maroon), #d34a6f);
  border-radius:99px;
  transition:width .35s ease;
}
.mm-qs-progress-pct{
  font-size:.75rem;
  color:var(--qs-muted);
  font-weight:600;
  min-width:34px;
  text-align:right;
}

.mm-qs-card{
  flex:1;
  padding:2rem 1.4rem 3rem;
  position:relative;
  overflow:hidden;
}

.mm-qs-step{
  display:none;
  animation:qsFadeIn .3s ease;
}
.mm-qs-step.active{ display:block; }
.mm-qs-step-center{ text-align:center; padding-top:2.5rem; }

@keyframes qsFadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.mm-qs-back{
  border:none;
  background:transparent;
  font-size:1.4rem;
  color:var(--qs-ink);
  padding:0;
  margin-bottom:1.2rem;
  cursor:pointer;
}

.mm-qs-hero-badge{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--qs-pink-bg);
  color:var(--qs-maroon);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  margin:0 auto 1.2rem;
}
.mm-qs-hero-badge-img{ width:36px; height:36px; object-fit:contain; }

.mm-qs-card h1{
  font-size:1.6rem;
  font-weight:800;
  margin-bottom:.5rem;
  text-align:center;
}
.mm-qs-card h2{
  font-size:1.35rem;
  font-weight:800;
  margin-bottom:.5rem;
  line-height:1.3;
}
.mm-qs-tagline{
  text-align:center;
  color:var(--qs-muted);
  font-size:.9rem;
  margin-bottom:2.2rem;
}
.mm-qs-sub{
  color:var(--qs-muted);
  font-size:.88rem;
  margin-bottom:1.5rem;
}
.mm-qs-eyebrow{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--qs-muted);
  margin-bottom:.6rem;
}
.mm-qs-hint{ font-size:.82rem; color:var(--qs-muted); margin:.6rem 0 0; }
.mm-qs-link{ color:var(--qs-maroon); font-weight:600; text-decoration:none; }

.mm-qs-choice-list{ display:flex; flex-direction:column; gap:.9rem; margin-top:2.5rem; }
.mm-qs-choice-btn{
  width:100%;
  padding:.9rem 1.2rem;
  border-radius:99px;
  border:1.5px solid var(--qs-maroon);
  background:#fff;
  color:var(--qs-maroon);
  font-weight:700;
  font-size:.95rem;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  cursor:pointer;
  transition:background .15s ease;
}
.mm-qs-choice-btn:disabled{ opacity:.45; cursor:not-allowed; }
.mm-qs-choice-btn:not(:disabled):hover{ background:var(--qs-pink-bg); }
.mm-qs-choice-primary{ background:var(--qs-maroon); color:#fff; }
.mm-qs-choice-primary:hover{ background:var(--qs-maroon-dark) !important; color:#fff; }

.mm-qs-legal{
  font-size:.72rem;
  color:var(--qs-muted);
  text-align:center;
  margin-top:2.5rem;
  line-height:1.6;
}
.mm-qs-legal a{ color:var(--qs-ink); font-weight:600; }

.mm-qs-field{ margin-bottom:1.1rem; }
.mm-qs-field label{
  display:block;
  font-size:.72rem;
  font-weight:700;
  color:var(--qs-muted);
  margin-bottom:.35rem;
  letter-spacing:.03em;
}

/* Floating label pattern — label sits inside the input until focused or
   filled, then shrinks and floats to the top. Saves vertical space vs a
   separate label line above every field, especially useful when several
   fields stack on a single mobile screen. */
.mm-qs-field-floating{
  position:relative;
  margin-bottom:1.1rem;
}
.mm-qs-field-floating .mm-qs-input{
  padding-top:1.4rem;
  padding-bottom:.5rem;
  height:58px;
}
.mm-qs-field-floating label{
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1rem;
  font-weight:400;
  color:var(--qs-muted);
  margin:0;
  pointer-events:none;
  transition:all .15s ease;
  background:transparent;
}
.mm-qs-field-floating .mm-qs-input:focus + label,
.mm-qs-field-floating .mm-qs-input:not(:placeholder-shown) + label{
  top:.85rem;
  transform:translateY(0);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--qs-maroon);
}
.mm-qs-input, .mm-qs-textarea{
  width:100%;
  border:1.5px solid var(--qs-line);
  border-radius:14px;
  padding:.85rem 1rem;
  font-size:1rem;
  font-family:inherit;
  background:#fbf9fa;
  outline:none;
  transition:border-color .15s ease;
}
.mm-qs-input:focus, .mm-qs-textarea:focus{ border-color:var(--qs-maroon); background:#fff; }
.mm-qs-textarea{ resize:vertical; min-height:140px; margin-bottom:.5rem; }

.mm-typeahead-wrap{ position:relative; }
.mm-typeahead-dropdown{
  display:none;
  position:fixed;
  background:#fff;
  border:1.5px solid var(--qs-line);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  max-height:220px;
  overflow-y:auto;
  z-index:2000;
}
.mm-typeahead-dropdown.show{ display:block; }
.mm-typeahead-item{
  padding:.65rem 1rem;
  font-size:.9rem;
  cursor:pointer;
}
.mm-typeahead-item:hover, .mm-typeahead-item.active{ background:var(--qs-pink-bg); color:var(--qs-maroon); }

.mm-qs-cta{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  padding:.95rem 1.2rem;
  border-radius:99px;
  border:none;
  background:var(--qs-maroon);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  text-decoration:none;
  margin-top:.6rem;
  transition:background .15s ease, opacity .15s ease;
}
.mm-qs-cta:hover{ background:var(--qs-maroon-dark); color:#fff; }
.mm-qs-cta:disabled{ opacity:.45; cursor:not-allowed; }
.mm-qs-cta-ghost{
  background:transparent;
  color:var(--qs-maroon);
  border:1.5px solid var(--qs-line);
}
.mm-qs-cta-ghost:hover{ background:var(--qs-pink-bg); color:var(--qs-maroon-dark); }

.mm-qs-photo-upload-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  border:1.5px dashed var(--qs-maroon);
  color:var(--qs-maroon);
  background:var(--qs-pink-bg);
  border-radius:14px;
  padding:.9rem;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
}
.mm-qs-photo-upload-btn:hover{ background:var(--qs-line); }

.mm-qs-alert{
  font-size:.85rem;
  margin-top:.4rem;
}
.mm-qs-alert.error{ color:#c0392b; }
.mm-qs-alert.success{ color:#1f9d55; }

/* OTP boxes */
.mm-qs-otp-boxes{ display:flex; gap:.6rem; margin-bottom:.4rem; }
.mm-qs-otp-box{
  width:100%;
  aspect-ratio:1/1;
  text-align:center;
  font-size:1.4rem;
  font-weight:700;
  border:1.5px solid var(--qs-line);
  border-radius:12px;
  background:#fbf9fa;
  outline:none;
}
.mm-qs-otp-box:focus{ border-color:var(--qs-maroon); background:#fff; }

/* Pill groups (who-for, brothers count) */
.mm-qs-pill-group{ display:flex; flex-wrap:wrap; gap:.6rem; }
.mm-qs-pill{
  padding:.55rem 1.1rem;
  border-radius:99px;
  border:1.5px solid var(--qs-line);
  background:#fff;
  color:var(--qs-ink);
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
}
.mm-qs-pill.active{ border-color:var(--qs-maroon); color:var(--qs-maroon); background:var(--qs-pink-bg); }

/* Gender cards */
.mm-qs-gender-cards{ display:flex; gap:1rem; margin-top:1rem; }
.mm-qs-gender-card{
  flex:1;
  border:1.5px solid var(--qs-line);
  border-radius:16px;
  background:#fff;
  padding:1.4rem .8rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  cursor:pointer;
  font-weight:600;
}
.mm-qs-gender-card i{ font-size:2rem; color:var(--qs-muted); }
.mm-qs-gender-card.active{ border-color:var(--qs-maroon); background:var(--qs-pink-bg); }
.mm-qs-gender-card.active i{ color:var(--qs-maroon); }

/* Radio list (mother tongue) */
.mm-qs-radio-list{ display:flex; flex-direction:column; gap:.2rem; margin-bottom:.5rem; }
.mm-qs-radio-row{
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem .2rem;
  border-bottom:1px solid var(--qs-line);
  cursor:pointer;
  font-size:.95rem;
}
.mm-qs-radio-row input{ accent-color:var(--qs-maroon); width:18px; height:18px; }

.mm-qs-notice{
  background:#f4f0fb;
  color:#4b3a70;
  border-radius:12px;
  padding:.8rem 1rem;
  font-size:.82rem;
  display:flex; gap:.5rem;
  margin-bottom:1.2rem;
  line-height:1.5;
}

.mm-qs-small-label{
  display:block;
  font-size:.72rem;
  font-weight:700;
  color:var(--qs-muted);
  margin-bottom:.3rem;
}

/* Success / congratulations */
.mm-qs-success-icon{
  width:80px; height:80px;
  border-radius:50%;
  background:#e5f8ec;
  color:#1f9d55;
  font-size:2.4rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.4rem;
  animation:qsPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qsPop{
  0%{ transform:scale(0); }
  70%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}
.mm-qs-confetti-wrap{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.mm-qs-confetti-piece{
  position:absolute;
  top:-10px;
  width:8px; height:14px;
  opacity:.9;
  animation:qsConfettiFall linear forwards;
}
@keyframes qsConfettiFall{
  to{ transform:translateY(110vh) rotate(360deg); opacity:0; }
}

@media (max-width: 575.98px){
  .mm-qs-shell{ box-shadow:none; }
  .mm-qs-card{ padding:1.5rem 1.1rem 2.5rem; }
}

/* ---- DOB step + magic age reveal ---- */
.mm-qs-dob-row{
  display:flex;
  gap:.6rem;
  margin-bottom:1rem;
}
.mm-qs-dob-select{
  flex:1;
  min-width:0;
}
.mm-qs-dob-reveal{
  text-align:center;
  padding-top:2rem;
  animation: mmQsDobFadeIn .4s ease;
}
@keyframes mmQsDobFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.mm-qs-dob-reveal-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  background:linear-gradient(135deg, #e0a63b, var(--qs-maroon));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  margin:0 auto 1.2rem;
  animation: mmQsDobPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mmQsDobPop{
  0%{ transform:scale(0); }
  70%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}
.mm-qs-dob-reveal-label{
  font-size:.9rem;
  color:var(--qs-muted);
  margin-bottom:.2rem;
}
.mm-qs-dob-reveal-age{
  font-size:2.6rem;
  font-weight:800;
  color:var(--qs-maroon-dark);
  margin-bottom:.8rem;
}
.mm-qs-dob-reveal-age span:last-child{
  font-size:1.1rem;
  font-weight:600;
  color:var(--qs-muted);
}
.mm-qs-dob-reveal-msg{
  font-size:.92rem;
  color:var(--qs-muted);
  margin-bottom:1.6rem;
}