/* ============================================================
   Credova.ro — prima pagina
   ============================================================ */

/* ── Deschidere ─────────────────────────────────────
   Pe telefon: titlu, simulator, explicatie, cifre.
   Pe ecran lat: text in stanga, simulator in dreapta.
   ─────────────────────────────────────────────────── */

.hero { padding-block: var(--space-7) var(--section-y); }

.hero__inner { display: grid; gap: var(--space-6); }

.hero__head h1 { margin-bottom: 0; }
.hero__rest .lead { margin-bottom: var(--space-6); }

/* Cifrele: pe telefon una sub alta, pe un rand, nu trei blocuri mari. */
.facts {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: var(--space-3);
}
.facts__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.facts__value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-strong);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.facts__label { font-size: var(--text-sm); color: var(--color-text-secondary); text-align: right; }

@media (min-width: 941px) {
  .hero { padding-block: var(--space-9) var(--section-y); }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: auto 1fr;
    gap: var(--space-7) var(--space-9);
    align-items: start;
  }
  .hero__head { grid-column: 1; grid-row: 1; }
  .hero__rest { grid-column: 1; grid-row: 2; }
  .sim { grid-column: 2; grid-row: 1 / span 2; }

  /* Pe ecran lat cifrele stau una langa alta, sub text. */
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .facts__item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .facts__label { text-align: left; }
  .facts__value { font-size: var(--text-lg); }
}

/* ── Simulator ──────────────────────────────────────── */

.sim {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-box);
  padding: var(--space-6);
  background: var(--color-bg);
}
.sim__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
}

.sim__field { margin-bottom: var(--space-5); }
.sim__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.sim__label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.sim__out {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-strong);
}
.sim__ends { display: flex; justify-content: space-between; margin-top: 4px; }

/* Cursorul: pista subtire, buton mare, usor de prins cu degetul. */
.sim__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  display: block;
}
.sim__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--color-line);
}
.sim__range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--color-line);
}
.sim__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.sim__range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.sim__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px rgba(39, 108, 144, 0.35); }
.sim__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px rgba(39, 108, 144, 0.35); }

.sim__result {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-5);
  margin-bottom: var(--space-5);
}
.sim__result-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.sim__result .figure { margin-bottom: var(--space-3); }
.sim__result p:last-child { margin-bottom: 0; }
.sim__meta { margin-top: var(--space-3); text-align: center; }

@media (max-width: 940px) {
  /* Pe telefon simulatorul nu mai e o cutie in pagina: are doar linii sus si jos,
     ca sa nu apara un chenar plutind pe alb. */
  .sim {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: var(--space-6) 0;
    margin-inline: 0;
  }
  .sim__title { font-size: var(--text-md); }
}

/* ── Titluri de secțiune ────────────────────────────── */

.head { margin-bottom: var(--space-7); max-width: 60ch; }
.head h2 { margin-bottom: 0; }

/* ── Pași ───────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.steps__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.steps__item:last-child { border-bottom: 1px solid var(--color-line); }
.steps__no {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-muted);
  line-height: 1.2;
}
.steps__title { font-size: var(--text-md); margin-bottom: var(--space-2); }
.steps__body p { margin-bottom: 0; }

@media (max-width: 720px) {
  .steps__item { grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-5); }
}

/* ── Doua coloane ───────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.split__left h2 { margin-bottom: var(--space-3); }

@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ── Listă simplă, fără pictograme ──────────────────── */

.plain-list { display: grid; gap: 0; margin-top: var(--space-6); }
.plain-list__item {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.plain-list__item:last-child { border-bottom: 1px solid var(--color-line); }
.plain-list__title { font-size: var(--text-md); margin-bottom: var(--space-2); }
.plain-list__item p { margin-bottom: 0; }

/* ── Centrat ────────────────────────────────────────── */

.center { text-align: center; }
.center h2 { margin-bottom: var(--space-4); }
.center-text { margin-inline: auto; }
.center-actions { margin-block: var(--space-6) var(--space-3); }

/* ── Întrebări ──────────────────────────────────────
   Deschidere native cu <details>: merge si fara JavaScript. */

.faq { margin-top: var(--space-6); }
.faq__item { border-top: 1px solid var(--color-line); }
.faq__item:last-child { border-bottom: 1px solid var(--color-line); }

.faq__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 40px var(--space-5) 0;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-strong);
  line-height: 1.35;
}
.faq__q::-webkit-details-marker { display: none; }

/* Semnul plus, desenat din doua linii. Fara pictograma de biblioteca. */
.faq__q::before,
.faq__q::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--color-primary);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] .faq__q::after { transform: rotate(0deg); opacity: 0; }

.faq__q:hover { color: var(--color-primary); }
.faq__item[open] .faq__q { padding-bottom: var(--space-3); }

.faq__a { padding-bottom: var(--space-5); }
.faq__a p { margin-bottom: var(--space-3); color: var(--color-text-secondary); }
.faq__a p:last-child { margin-bottom: 0; }


/* -- Banda cu institutiile partenere ----------------
   Text, nu sigle: o sigla straina pe pagina noastra ar putea sugera o relatie
   pe care nu o avem si ar ridica o problema de marca. */

.inst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.inst__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
}
.inst__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-strong);
}
.inst__legal { font-size: var(--text-sm); color: var(--color-text-secondary); }
.inst__reg { font-size: var(--text-xs); color: var(--color-muted); }
.inst__note { margin-top: var(--space-5); max-width: 80ch; }

/* Sigla partenerului, cand exista. Inaltime fixa si scara care pastreaza
   proportiile: siglele vin in forme foarte diferite. */
.inst__logo {
  height: 26px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 8px;
  border-radius: 0;
}
.inst__group { margin-top: var(--space-7); }
.inst__more { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }