/* ============================================================
   Afranga · SaveSmart - final flow
   1:1 rebuild of the Figma section "SaveSmart - V1 - 3 steps"
   (40000974:34407). Uses styles.css tokens; all sizing in
   em/rem, BEM naming, no px (per project rules).
   ============================================================ */

:root {
  /* type styles the shared sheet does not carry */
  --ssv2-h2: 600 1.5rem/2rem 'Montserrat', sans-serif;        /* H2 */
  --ssv2-h3: 600 1.25rem/1.75rem 'Montserrat', sans-serif;    /* H3 */
  --ssv2-label-l: 600 1rem/1.5rem 'Montserrat', sans-serif;   /* Label L */
  --ssv2-title-l: 600 1.0625rem/1.5rem 'Montserrat', sans-serif;
  /* colors the shared sheet does not carry */
  --ssv2-warm: #6e6a66;          /* semantic/text-secondary-warm */
  --ssv2-success: #30c07e;       /* semantic/accent-success */
  --ssv2-green-900: #0e3a26;     /* Badge Success text */
  --ssv2-banner-border: #feebd3; /* peach/200 - Banner Info stroke */
}

.main--ssv2 { padding: 2.25rem 2.5rem 2.5rem; }

.ssv2 { max-width: 36.75rem; margin: 0 auto; }

.ssv2__title {
  font: var(--display-s);
  letter-spacing: -0.019rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ---------- stepper (matches the Add money one) ---------- */

.ssv2-stepper { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.ssv2-stepper__step { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.ssv2-stepper__dot {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--white); border: 0.0625rem solid var(--border);
  color: var(--text-muted); font: var(--label-s);
}
.ssv2-stepper__dot svg { width: 1rem; height: 1rem; display: block; }
.ssv2-stepper__step--active .ssv2-stepper__dot { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.ssv2-stepper__step--done .ssv2-stepper__dot { background: var(--ssv2-success); border-color: var(--ssv2-success); color: var(--white); }
.ssv2-stepper__label { font: var(--label-s); color: var(--text-muted); }
.ssv2-stepper__step--active .ssv2-stepper__label,
.ssv2-stepper__step--done .ssv2-stepper__label { color: var(--text-primary); }
.ssv2-stepper__bar { flex: 1; height: 0.125rem; border-radius: 0.25rem; background: var(--border); }
.ssv2-stepper__bar--done { background: var(--ssv2-success); }

/* ---------- card ---------- */

.ssv2-card {
  background: var(--white);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  padding: 2rem;
}
.ssv2-card__h2 { font: var(--ssv2-h2); letter-spacing: -0.0125rem; }
.ssv2-card__h3 { font: var(--ssv2-h3); }
.ssv2-card__sub { font: var(--body-m); color: var(--ssv2-warm); margin-top: 0.25rem; }
.ssv2-divider { height: 0.0625rem; background: var(--border); margin: 1.25rem 0; }

/* ---------- step 1: amount ---------- */

.ssv2-amount {
  display: flex; align-items: center; gap: 0.75rem;
  border: 0.125rem solid var(--border); border-radius: 0.75rem;
  padding: 1rem 1.25rem; margin-top: 1rem;
  transition: border-color var(--t-base) var(--ease);
}
.ssv2-amount:focus-within { border-color: var(--charcoal); }
.ssv2-amount__cur { font: var(--number-l); letter-spacing: -0.03125rem; color: var(--text-secondary); }
/* available money - mirrors the dashboard's Uninvested cash */
.ssv2-avail {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 0.75rem;
}
.ssv2-avail__label { font: var(--body-m); color: var(--ssv2-warm); }
.ssv2-avail__val { font: var(--value); color: var(--text-primary); }
.ssv2-amount__input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: var(--number-l); letter-spacing: -0.03125rem; color: var(--text-primary);
  padding: 0;
}

/* ---------- step 1: term options ---------- */

.ssv2-terms { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.ssv2-term {
  display: block; width: 100%; text-align: left;
  background: var(--white);
  border: 0.125rem solid var(--border); border-radius: 0.75rem;
  padding: 1rem;
  transition: border-color var(--t-base) var(--ease);
}
.ssv2-term:hover { border-color: var(--text-secondary); }
/* selected state: charcoal border + charcoal radio (selection = charcoal, 27.08) */
.ssv2-term--on { border-color: var(--charcoal); }
.ssv2-term--on:hover { border-color: var(--charcoal); }
.ssv2-term__head { display: flex; align-items: center; gap: 0.75rem; }
.ssv2-term__text { flex: 1; min-width: 0; }
.ssv2-term__label { font: var(--ssv2-label-l); display: block; }

.ssv2-radio {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 0.125rem solid var(--border); background: var(--white);
  display: grid; place-items: center;
  transition: border-color var(--t-base) var(--ease);
}
.ssv2-radio--on { border-color: var(--charcoal); }
.ssv2-radio--on::after {
  content: ''; width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--charcoal);
}

.ssv2-badge {
  flex: none; display: inline-flex; align-items: center;
  height: 1.25rem; padding: 0 0.5rem; border-radius: 62.4375rem;
  background: var(--green-bg); color: var(--ssv2-green-900);
  font: var(--label-s);
}

.ssv2-term__detail { display: block; border-top: 0.0625rem solid var(--border); margin-top: 0.875rem; padding-top: 0.75rem; }
.ssv2-term__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; }
.ssv2-term__row-label { font: var(--body-m); color: var(--ssv2-warm); }
.ssv2-term__row-val { font: var(--value); color: var(--text-primary); }
.ssv2-term__row-val--pos { color: var(--green); }
.ssv2-term__row--total { border-top: 0.0625rem solid var(--border); margin-top: 0.5rem; padding-top: 0.75rem; }
.ssv2-term__row--total .ssv2-term__row-label { font: var(--label-m); color: var(--text-primary); }
.ssv2-term__row--total .ssv2-term__row-val { font: var(--ssv2-title-l); }
/* early withdrawal - promoted strip under the total, amount is
   calculated from the investment (30%, min € 100, max € 5,000) */
.ssv2-ew {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 0.5rem; padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--ivory);
}
.ssv2-ew__left { display: flex; align-items: center; gap: 0.75rem; }
.ssv2-ew__label,
.ssv2-ew__val { font: var(--value); color: var(--text-primary); }
/* (i) before the label, charcoal, with the rule on hover/focus */
.ssv2-ew__info {
  position: relative; display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; color: var(--charcoal); cursor: help;
}
.ssv2-ew__info svg { width: 1.25rem; height: 1.25rem; display: block; }
.ssv2-ew__tip {
  position: absolute; bottom: calc(100% + 0.5rem); left: -0.75rem;
  width: 21.25rem; padding: 0.75rem 1rem; border-radius: 0.5rem;
  background: var(--charcoal); color: var(--white);
  font: var(--body-s); text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 10;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease);
}
.ssv2-ew__info:hover .ssv2-ew__tip,
.ssv2-ew__info:focus .ssv2-ew__tip { opacity: 1; visibility: visible; }

/* ---------- step 1: Re-Invest toggle ---------- */

.ssv2-reinvest { margin-top: 1.25rem; }
.ssv2-reinvest__head { display: flex; align-items: center; gap: 0.75rem; }
.ssv2-reinvest__label { font: var(--ssv2-label-l); color: var(--text-primary); }
.ssv2-reinvest__copy { font: var(--body-m); color: var(--ssv2-warm); margin-top: 0.5rem; }

.ssv2-toggle {
  flex: none; position: relative;
  width: 2.75rem; height: 1.5rem; border-radius: 62.4375rem;
  background: var(--text-muted);
  transition: background var(--t-fast) var(--ease);
}
.ssv2-toggle.is-on { background: var(--ssv2-success); }
.ssv2-toggle__knob {
  position: absolute; top: 0.125rem; left: 0.125rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--white);
  transition: transform var(--t-fast) var(--ease);
}
.ssv2-toggle.is-on .ssv2-toggle__knob { transform: translateX(1.25rem); }

/* ---------- buttons ---------- */

.ssv2-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 3rem; border-radius: 0.5rem;
  font: var(--ssv2-label-l);
  transition: background var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.ssv2-btn--primary { background: var(--coral); color: var(--white); margin-top: 1.25rem; }
.ssv2-btn--primary:hover { background: var(--coral-dark); }
.ssv2-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.ssv2-btn--primary:disabled:hover { background: var(--coral); }
.ssv2-btn--ghost {
  width: fit-content; height: auto; margin: 1rem auto 0;
  font: var(--ssv2-label-l); color: var(--text-primary);
}
.ssv2-btn--ghost:hover { color: var(--coral); }

/* ---------- key-value rows (steps 2 + 3) ---------- */

.ssv2-kv { margin-top: 1.25rem; }
.ssv2-kv__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 0.0625rem solid var(--border);
}
.ssv2-kv__row:last-child { border-bottom: 0; }
.ssv2-kv__label { font: var(--body-m); color: var(--ssv2-warm); }
.ssv2-kv__val { font: var(--value); color: var(--text-primary); }
.ssv2-kv__val--pos { color: var(--green); }
/* Full Loan Details - opens the Loan sidebar */
.ssv2-loan-link {
  display: block; width: fit-content; margin-top: 1.25rem;
  font: var(--label-m); color: var(--coral);
  text-decoration: underline; text-underline-offset: 0.125rem;
}
.ssv2-loan-link:hover { color: var(--coral-dark); }

/* ---------- step 2: documents ---------- */

.ssv2-docs-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.25rem;
}
.ssv2-docs-head__btn {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; margin: -0.375rem -0.375rem -0.375rem 0;
  border-radius: 0.5rem; color: var(--text-primary);
  transition: background var(--t-fast) var(--ease);
}
.ssv2-docs-head__btn:hover { background: var(--bg-light); }
.ssv2-docs-head__btn svg { width: 1.25rem; height: 1.25rem; }

.ssv2-docs { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.ssv2-doc {
  display: flex; align-items: center; gap: 0.5rem;
  border: 0.0625rem solid var(--border); border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
.ssv2-doc svg { width: 1rem; height: 1rem; flex: none; color: var(--text-primary); }
.ssv2-doc__name { flex: 1; font: var(--body-m); color: var(--text-primary); }
.ssv2-doc__open { font: var(--label-s); color: var(--coral); flex: none; }
.ssv2-doc__open:hover { color: var(--coral-dark); }

/* ---------- step 2: reflection banner + ECSPR ---------- */

.ssv2-banner {
  background: var(--bg-light);
  border: 0.0625rem solid var(--ssv2-banner-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem; margin-top: 1.25rem;
  font: var(--body-m); color: var(--text-primary);
}

.ssv2-ecspr { font: var(--caption-s); color: var(--text-muted); margin-top: 1.25rem; }

/* ---------- step 3: reflection banner below the card (same Banner/Info recipe) ---------- */

.ssv2-banner--below { margin-top: 1.5rem; }

/* ---------- FAQ (transparent section) ---------- */

.ssv2-faq { padding: 2rem; }
.ssv2-faq__title { font: var(--ssv2-h3); margin-bottom: 1rem; }
.ssv2-faq__list { display: flex; flex-direction: column; gap: 1rem; }
.ssv2-faq__q {
  display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; text-align: left;
  font: var(--ssv2-label-l); color: var(--text-primary);
}
.ssv2-faq__q svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.125rem; transition: transform var(--t-base) var(--ease); }
.ssv2-faq__item--open .ssv2-faq__q svg { transform: rotate(180deg); }
.ssv2-faq__a { font: var(--body-m); color: var(--text-primary); margin: 0.5rem 0 0 1.75rem; display: none; }
.ssv2-faq__item--open .ssv2-faq__a { display: block; }

/* motion: calm reveal for the expanding term detail */
@media (prefers-reduced-motion: no-preference) {
  .ssv2-term__detail, .ssv2-docs, .ssv2-faq__item--open .ssv2-faq__a { animation: ssv2-reveal 0.25s var(--ease); }
  @keyframes ssv2-reveal {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ssv2-toggle, .ssv2-toggle__knob { transition: none; }
}