/* ============================================================
   ELIGIBILITY WIZARD STYLES
   ============================================================ */

.wiz-shell { max-width: 860px; margin-inline: auto; }

.wiz-card {
  /* Denser than a plain .card. This is a five-step form the
     visitor works through — it has to read as a solid panel, not
     as another pane of glass floating over the sky. */
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.wiz-bar {
  height: 5px;
  background: var(--line-soft);
  position: relative;
  overflow: hidden;
}
.wiz-bar__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--navy-700), var(--navy-600) 55%, var(--mauve-500));
  border-radius: 0 3px 3px 0;
  transition: width .55s var(--ease);
}

.wiz-in { padding: clamp(24px, 4vw, 46px); }

.wiz-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

#wizBody { transition: opacity .22s var(--ease), transform .22s var(--ease); }

.wiz-q { font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin-bottom: 10px; }
.wiz-sub { color: var(--ink-soft); font-size: .98rem; margin-bottom: var(--sp-6); max-width: 60ch; }

/* option buttons */
.wiz-opts { display: flex; flex-direction: column; gap: 10px; }

.opt {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: 17px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(232, 239, 249, .55);
  text-align: left;
  font-size: .97rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease,
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) ease;
  animation: opt-in .4s var(--ease) both;
  animation-delay: calc(var(--i) * .045s);
}
@keyframes opt-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.opt:hover {
  border-color: var(--navy-600);
  background: rgba(232, 239, 249, .9);
  transform: translateX(4px);
}
.opt.sel {
  border-color: var(--red-500);
  background: var(--red-100);
  box-shadow: 0 0 0 3px rgba(var(--rgb-red),.12);
}
.opt__radio {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 2px solid var(--navy-200);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--t-fast) ease;
}
.opt.sel .opt__radio { border-color: var(--red-500); }
.opt.sel .opt__radio::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--red-500);
  animation: pop .28s var(--ease);
}
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.opt__label { line-height: 1.45; }

/* country picker */
.wiz-region { margin-bottom: var(--sp-6); }
.wiz-region h3 {
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--sp-3);
}
.wiz-copts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px; }

.copt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(232, 239, 249, .55);
  text-align: left;
  transition: all var(--t-fast) ease;
  flex-wrap: wrap;
}
.copt:hover { border-color: var(--navy-600); background: rgba(232, 239, 249, .9); transform: translateY(-2px); }
.copt.sel { border-color: var(--red-500); background: var(--red-100); box-shadow: 0 0 0 3px rgba(var(--rgb-red),.12); }
.copt__flag { font-size: 1.42rem; line-height: 1; }
.copt__name { font-weight: 700; font-size: .93rem; color: var(--navy-900); flex: 1; }
.copt__tier { font-size: .66rem !important; padding: 3px 9px !important; width: 100%; justify-content: center; }

/* nav buttons */
.wiz-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) clamp(24px, 4vw, 46px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(226,235,248,.5), rgba(226,205,217,.34));
}
#wizNext:disabled { opacity: .38; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* ---------- ANALYSING ---------- */
.analysing { padding: clamp(56px, 10vw, 100px) var(--sp-5); text-align: center; }
.analysing h3 {
  font-size: 1.16rem;
  margin-top: var(--sp-6);
  transition: opacity .18s ease;
  min-height: 1.6em;
}
.analysing__ring {
  position: relative;
  width: 82px; height: 82px;
  margin-inline: auto;
}
/* Three rings across the ramp — blue, slate, mauve — rather than
   red on the outside. This runs for two seconds while the score is
   being worked out, and a spinning red ring reads as a warning
   about the answer before the answer exists. */
.analysing__ring div {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-top-color: var(--navy-400);
  border-radius: 50%;
  animation: spin 1.3s cubic-bezier(.5,0,.5,1) infinite;
}
.analysing__ring div:nth-child(2) { inset: 11px; border-top-color: var(--navy-700); animation-duration: 1.7s; animation-direction: reverse; }
.analysing__ring div:nth-child(3) { inset: 22px; border-top-color: var(--mauve-500); animation-duration: 2.1s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- RESULT ---------- */
.result { padding: clamp(26px, 4vw, 46px); }
.result__hd { text-align: center; margin-bottom: var(--sp-6); }

.gauge {
  position: relative;
  width: 210px;
  margin: var(--sp-6) auto var(--sp-5);
}
.gauge__svg { width: 100%; height: auto; overflow: visible; }
.gauge__mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.gauge__num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}
.gauge__of { font-size: .78rem; color: var(--ink-mute); font-weight: 600; margin-top: 3px; }

/* .notice lives in base.css — shared across several pages */

/* factor bars */
.bars { display: flex; flex-direction: column; gap: var(--sp-4); }
.bar { animation: opt-in .5s var(--ease) both; animation-delay: var(--d); }
.bar__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.bar__lbl { font-weight: 700; font-size: .92rem; color: var(--navy-900); }
.bar__val { font-weight: 800; font-size: .88rem; font-family: var(--font-display); }
.bar__val--strong { color: var(--green-500); }
.bar__val--fair   { color: var(--amber-500); }
.bar__val--weak   { color: var(--red-500); }
.bar__track { height: 9px; background: var(--line-soft); border-radius: var(--r-full); overflow: hidden; }
.bar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  transition: width 1.1s var(--ease);
}
.bar__fill--strong { background: linear-gradient(90deg, #0E8A44, var(--green-500)); }
.bar__fill--fair   { background: linear-gradient(90deg, #D98A0B, var(--amber-500)); }
.bar__fill--weak   { background: linear-gradient(90deg, var(--red-600), var(--red-400)); }
.bar__ans { font-size: .82rem; color: var(--ink-mute); margin-top: 5px; }

/* advice */
/* The bars above these keep green / amber / red: those encode how
   strong each factor is, and that's data, not decoration. The
   surfaces around them move onto the ramp. */
.advice { display: flex; flex-direction: column; gap: var(--sp-4); }
.advice__row {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(140deg, rgba(var(--rgb-blue), .15), rgba(var(--rgb-mauve), .12));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.advice__ico {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  color: var(--mauve-700);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.advice__ico svg { width: 16px; height: 16px; }
.advice__row strong { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--navy-900); margin-bottom: 4px; }
.advice__row p { font-size: .91rem; color: var(--ink-soft); line-height: 1.7; }

/* alternatives */
.alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.alt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy-900);
  background: var(--card);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: all var(--t-fast) ease;
  flex-wrap: wrap;
}
.alt:hover { border-color: rgba(var(--rgb-mauve), .6); transform: translateY(-2px); box-shadow: var(--sh-md); }

.result__cta {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  text-align: center;
}

@media print {
  .hdr, .ft, .chat-fab, .wa-float, .chat-panel, .result__cta, .disclaimer { display: none !important; }
  .result { padding: 0; }
  body { background: #fff; }
}

@media (max-width: 560px) {
  .wiz-copts { grid-template-columns: 1fr; }
  .gauge { width: 175px; }
  .gauge__num { font-size: 2.9rem; }
}