@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — WIZARD DE ÎNREGISTRARE
   --------------------------------------------------------------------------
   Se încarcă din secțiunea „Styles" a fiecărui view din Views/Inregistrare/,
   DUPĂ design-tokens.css, layout.css și componentele de bază.

   Toate valorile vin din tokenii --ps-* (design-tokens.css). Nicio culoare,
   nicio dimensiune și niciun radius nu sunt scrise literal aici.

   Modificatorii sunt în ROMÂNĂ, ca restul sistemului (.ps-btn--primar).
   ========================================================================== */


/* ==========================================================================
   1. CADRU
   ========================================================================== */

.ps-inregistrare {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-25);
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--ps-space-30);
}

.ps-inregistrare--lat { max-width: 960px; }

.ps-inregistrare__antet {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-10);
}

.ps-inregistrare__titlu {
  margin: 0;
  font: var(--ps-type-h2);
  color: var(--ps-text);
}

.ps-inregistrare__subtitlu {
  margin: 0;
  font: var(--ps-type-body);
  color: var(--ps-text-ui);
}

.ps-inregistrare__subsol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-15);
  padding-top: var(--ps-space-15);
  border-top: var(--ps-border-width) solid var(--ps-border);
  font: var(--ps-type-caption);
  color: var(--ps-text-ui);
}

/* formularul de abandon nu trebuie să rupă rândul subsolului */
.ps-inregistrare__renunta { margin: 0; }


/* ==========================================================================
   2. INDICATOR DE PROGRES
   --------------------------------------------------------------------------
   Cerculețele sunt decorative (aria-hidden). Informația obligatorie pentru
   cititoarele de ecran este rezumatul textual „Pasul 2 din 6".
   ========================================================================== */

.ps-pasi {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-10);
}

.ps-pasi__rezumat {
  margin: 0;
  font: var(--ps-type-label);
  color: var(--ps-text-ui);
}

.ps-pasi__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-space-10) var(--ps-space-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-pasi__item {
  display: flex;
  align-items: center;
  gap: var(--ps-space-6);
  font: var(--ps-type-caption);
  color: var(--ps-text-faint-aa);
}

.ps-pasi__numar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ps-icon-24);
  height: var(--ps-icon-24);
  border: var(--ps-border-width) solid var(--ps-border);
  border-radius: var(--ps-radius-full);
  background: var(--ps-surface);
  font: var(--ps-type-caption);
  line-height: 1;
}

.ps-pasi__item--finalizat { color: var(--ps-text-ui); }
.ps-pasi__item--finalizat .ps-pasi__numar {
  border-color: var(--ps-primary);
  background: var(--ps-primary);
  color: var(--ps-primary-contrast);
}

.ps-pasi__item--curent {
  color: var(--ps-text);
  font-weight: var(--ps-fw-semibold);
}
.ps-pasi__item--curent .ps-pasi__numar {
  border-color: var(--ps-primary);
  color: var(--ps-primary);
}

/* pe telefon, pașii stau pe două coloane, fiecare cu eticheta lui */
@media (max-width: 575.98px) {
  .ps-pasi__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ps-space-6);
  }

  .ps-pasi__item {
    min-width: 0;
    padding: var(--ps-space-6) var(--ps-space-10);
    border: var(--ps-border-width) solid var(--ps-border-soft);
    border-radius: var(--ps-radius-control);
    background: var(--ps-surface);
  }

  .ps-pasi__item--curent {
    border-color: var(--ps-primary);
    background: var(--ps-primary-soft);
  }

  .ps-pasi__numar { flex: none; }
  .ps-pasi__eticheta { min-width: 0; overflow-wrap: anywhere; }
}


/* ==========================================================================
   3. CARDURI DE OPȚIUNE (radio mare)
   --------------------------------------------------------------------------
   Se folosesc la alegerea tipului de cont și la gate-ul de interes.
   Input-ul rămâne un <input type="radio"> real, doar ascuns vizual: tastatura,
   grupul de radio-uri și cititoarele de ecran continuă să funcționeze nativ.
   ========================================================================== */

.ps-optiuni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--ps-space-15);
  margin: 0;
  padding: 0;
  border: 0;
}

.ps-optiune { position: relative; display: flex; }

.ps-optiune__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ps-optiune__continut {
  display: flex;
  gap: var(--ps-space-15);
  width: 100%;
  padding: var(--ps-space-20);
  border: var(--ps-border-width) solid var(--ps-border);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  transition: var(--ps-transition-color), box-shadow var(--ps-duration) var(--ps-ease);
}

.ps-optiune__icon {
  flex: none;
  color: var(--ps-primary);
}

.ps-optiune__text {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
  min-width: 0;
}

.ps-optiune__titlu {
  font: var(--ps-type-label);
  color: var(--ps-text);
}

.ps-optiune__descriere {
  margin: 0;
  font: var(--ps-type-caption);
  color: var(--ps-text-ui);
}

.ps-optiune__input:hover + .ps-optiune__continut { border-color: var(--ps-line); }

.ps-optiune__input:checked + .ps-optiune__continut {
  border-color: var(--ps-primary);
  background: var(--ps-primary-soft);
}

/* Focus vizibil pe card, pentru că input-ul propriu-zis este transparent. */
.ps-optiune__input:focus-visible + .ps-optiune__continut {
  outline: var(--ps-focus-width, 2px) solid var(--ps-primary);
  outline-offset: 2px;
}


/* ==========================================================================
   4. PREFERINȚE DE COMUNICARE
   ========================================================================== */

.ps-preferinte {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-20);
}

.ps-preferinte__card {
  padding: var(--ps-space-20) var(--ps-space-25) var(--ps-space-25);
  border: var(--ps-border-width) solid var(--ps-border-soft);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-xs);
}
@media (max-width: 575.98px) {
  .ps-preferinte__card { padding: var(--ps-space-15) var(--ps-space-15) var(--ps-space-20); }
}

.ps-preferinte__grup {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-10);
  margin: 0;
  padding: 0;
  border: 0;
}

/* legenda nu intră în gap-ul fieldset-ului: distanța față de bife vine din padding și din prima bifă */
.ps-preferinte__titlu {
  inline-size: 100%;
  padding: 0 0 var(--ps-space-10);
  border-block-end: var(--ps-border-width) solid var(--ps-border-soft);
  font: var(--ps-type-label);
  color: var(--ps-text);
}

.ps-preferinte__grup > .ps-bifa:first-of-type { margin-block-start: var(--ps-space-15); }

.ps-preferinte__nota {
  margin: 0;
  font: var(--ps-type-body);
  font-weight: var(--ps-fw-semibold);
  color: var(--ps-text);
}

.ps-bifa {
  display: flex;
  align-items: flex-start;
  gap: var(--ps-space-10);
  font: var(--ps-type-body);
  color: var(--ps-text);
  cursor: pointer;
}

.ps-bifa > input { margin-top: 2px; flex: none; }


/* ==========================================================================
   5. CÂMPURI CONDIȚIONATE
   --------------------------------------------------------------------------
   Ascunderea se face prin atributul `hidden`, nu printr-o clasă: fără JS
   câmpul rămâne vizibil și formularul continuă să funcționeze.
   ========================================================================== */

.ps-camp-conditionat[hidden] { display: none; }


/* ==========================================================================
   6. CÂMPUL-CAPCANĂ (anti-spam)
   --------------------------------------------------------------------------
   NU `display:none` și NU `type="hidden"`: multe roboți completează exact
   câmpurile ascunse astfel, dar sar peste cele scoase din flux vizual.
   Rămâne inaccesibil tastaturii (tabindex="-1") și cititoarelor (aria-hidden).
   ========================================================================== */

.ps-capcana {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   ALTERNATIVE ȘI ALEGERI (Date-Firma, Cod-Fiscal)
   --------------------------------------------------------------------------
   „Nu sunteți o companie? Click aici” sub formular și cele două butoane din
   avertismentul „există deja un cont pe acest cod fiscal”.
   ========================================================================== */

.ps-inregistrare__alternativa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-10);
  margin: 0;
  font: var(--ps-type-body);
  color: var(--ps-text-ui);
}

/* cod fiscal folosit deja: întrebarea, cele două variante și nota, una sub alta */
.ps-inregistrare__cont-existent {
  display: grid;
  gap: var(--ps-space-10);
}
.ps-inregistrare__cont-existent > p { margin: 0; }

.ps-inregistrare__alegeri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-space-10);
}
.ps-inregistrare__alegeri > .ps-btn { flex: 1 1 auto; }