@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — PAGINI DE AUTENTIFICARE
   --------------------------------------------------------------------------
   Referință: docs/design/spec-login.md (frame Figma 708:6226)
              DESIGN-SYSTEM.md §10.5–§10.9 (câmpuri), §10.21 (alerte)

   Se încarcă DUPĂ design-tokens.css, layout.css și componentele
   buttons/forms/alert/dialog/cookie — vezi Views/Shared/_LayoutAuth.cshtml.

   Aici stau DOAR regulile specifice paginii. Câmpurile (.ps-field, .ps-input),
   butoanele (.ps-btn), casetele de bifat (.ps-checkbox) și sumarul de validare
   vin din componentele comune; nu se redefinesc.

   Fundalul paginii și centrarea pe ambele axe vin din layout.css:
   `.ps-page--auth` și `.ps-page__centru`.

   MARCAJE
     [FIGMA]   valoare desenată în machetă
     [PROPUS]  stare / valoare inexistentă în design
   ========================================================================== */


/* ==========================================================================
   1. MARCA PLATFORMEI — spec §3.2
   --------------------------------------------------------------------------
   Sus în card (_MarcaAuth), ca în Contul-meu/Conectare.aspx.
   ========================================================================== */

.ps-auth__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  margin: 0 auto var(--ps-space-20);
  border-radius: var(--ps-radius-card);
  transition: var(--ps-transition-color);
}
.ps-auth__marca:hover { opacity: .85; }          /* [PROPUS] */

.ps-auth__logo {
  inline-size: 80px;
  block-size: 80px;
  filter: drop-shadow(0 10px 18px rgb(var(--ps-rgb-green-500) / .25));
}

/* pe cardurile cu pictogramă (confirmări, erori) sigla stă mică în colțul din stânga sus,
   ca să nu se adune deasupra pictogramei */
.ps-auth__card:has(.ps-auth__pictograma) { position: relative; }
.ps-auth__card:has(.ps-auth__pictograma) > .ps-auth__marca {
  position: absolute;
  inset-block-start: var(--ps-space-15);
  inset-inline-start: var(--ps-space-15);
  margin: 0;
}
.ps-auth__card:has(.ps-auth__pictograma) > .ps-auth__marca .ps-auth__logo {
  inline-size: 40px;
  block-size: 40px;
}


/* ==========================================================================
   2. CARDUL CENTRAL — spec §3.3
   --------------------------------------------------------------------------
   Card din sticlă pe fundalul cald. Fără înălțime fixă: mesajele de validare
   cresc natural cardul (spec §6.3). Sigla stă în card, deci sus ajunge
   același padding ca jos.
   ========================================================================== */

.ps-auth__card {
  width: var(--ps-auth-card-w, 400px);           /* [FIGMA] */
  max-width: 100%;
  padding: var(--ps-space-25) var(--ps-space-40);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--ps-radius-panel);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--ps-shadow-card-soft);
}

/* paginile informative (acces interzis, cont blocat) nu au 8 rânduri de formular,
   deci nu au nevoie de padding-ul de sus calculat pentru stiva de login */
.ps-auth__card--notificare {
  padding: var(--ps-space-40);
  text-align: center;
}

/* stiva verticală a cardului — gap 25px  [FIGMA] */
.ps-auth__stiva {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ps-space-25);
  width: 100%;
  min-width: 0;
}


/* ==========================================================================
   3. CONȚINUTUL CARDULUI
   ========================================================================== */

/* titlul „Bine ai revenit" — 20px/500, înălțime de control  [FIGMA] */
.ps-auth__titlu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ps-control-h);
  margin: 0;
  font: var(--ps-type-h3);
  color: var(--ps-text);
  text-align: center;
}

/* rândul „ține-mă minte" | „am uitat parola" — spec §3.6 */
.ps-auth__optiuni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-10);
  min-height: var(--ps-space-37);                /* 37px  [FIGMA] */
}

/* separatorul „SAU" — fără linie în design  [FIGMA] */
.ps-auth__separator {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ps-space-37);
  margin: 0;
  padding: var(--ps-space-10) var(--ps-space-20);
  font: var(--ps-type-body);
  color: var(--ps-icon-ui-aa);                   /* variantă AA a lui #949494  §11.3 */
}

/* blocul de furnizori externi: stivă proprie, ca formularele să nu se lipească */
.ps-auth__externe {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-15);
}

/* subsolul „Nu ai cont ? / Creează cont"  [FIGMA] */
.ps-auth__subsol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-30);
  min-height: var(--ps-space-30);
  margin: 0;
  padding-inline: var(--ps-space-20);
}

.ps-auth__text-secundar {
  font: var(--ps-type-body);
  color: var(--ps-icon-ui-aa);
}

/* pictograma paginilor informative */
.ps-auth__pictograma {
  font-family: var(--ps-font-icons);
  font-size: 48px;
  line-height: 1;
  align-self: center;
  color: var(--ps-icon-ui-aa);
}
.ps-auth__pictograma--atentie { color: var(--ps-danger); }


/* ==========================================================================
   4. LINKUL VERDE — spec §3.8
   ========================================================================== */

.ps-auth__link {
  font: var(--ps-type-body-medium);              /* 14px/500  [FIGMA] */
  color: var(--ps-green-dark);                   /* var(--ps-c-green-800)   [FIGMA] */
  text-decoration: none;
  transition: var(--ps-transition-color);
}
.ps-auth__link:hover  { color: var(--ps-green-link); text-decoration: underline; }  /* [PROPUS] */
.ps-auth__link:active { color: var(--ps-c-green-1000); }                            /* [PROPUS] */
.ps-auth__link:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-focus-color);
  outline-offset: var(--ps-focus-offset);
  border-radius: var(--ps-radius-3);
}
/* același link ca buton de trimitere („Creează cont” poartă adresa tastată) */
button.ps-auth__link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}


/* ==========================================================================
   5. BUTOANE
   --------------------------------------------------------------------------
   Butonul principal reia varianta comună `.ps-btn--primar` la înălțimea de
   control a formularului.  [FIGMA]
   ========================================================================== */

.ps-auth__buton {
  --ps-btn-h: var(--ps-control-h);               /* 44px      [FIGMA] */
}

/* buton de furnizor extern: contur, fără fundal, text la 14px/500  [FIGMA] */
.ps-auth__buton-extern {
  --ps-btn-font: var(--ps-type-body-medium);
  --ps-btn-h: var(--ps-control-h);
  --ps-btn-gap: var(--ps-space-20);
  --ps-btn-bg: transparent;
  --ps-btn-bd: var(--ps-c-facebook);             /* #087AFF  [FIGMA] */
  --ps-btn-fg: var(--ps-c-facebook);
  --ps-btn-focus: var(--ps-c-facebook);
  width: 100%;
}
.ps-auth__buton-extern:hover {                                          /* [PROPUS] */
  --ps-btn-bg: color-mix(in srgb, var(--ps-c-facebook) 6%, transparent);
}
.ps-auth__buton-extern:active {                                         /* [PROPUS] */
  --ps-btn-bg: color-mix(in srgb, var(--ps-c-facebook) 12%, transparent);
}


/* ==========================================================================
   6. CÂMPUL DE PAROLĂ — butonul-ochi
   --------------------------------------------------------------------------
   Componenta `password-toggle` (js/components/forms.js) comută doar
   `aria-pressed`; schimbarea iconului se face aici, ca starea vizuală să
   rămână legată de starea ARIA, nu de o clasă pusă din JS.
   ========================================================================== */

/* eticheta câmpului este `.ps-sr-only`, deci nu ocupă spațiu: acțiunea rămâne
   aliniată cu inputul, nu coboară sub el (regula din forms.css §3) */
.ps-field--with-action:has(> .ps-field__label.ps-sr-only) > .ps-field__action {
  top: 0;
  bottom: auto;
}

.ps-auth__ochi .ps-auth__ochi-ascunde { display: none; }
.ps-auth__ochi[aria-pressed="true"] .ps-auth__ochi-arata { display: none; }
.ps-auth__ochi[aria-pressed="true"] .ps-auth__ochi-ascunde { display: inline-block; }


/* ==========================================================================
   7. RESPONSIVE — spec §1.4  [PROPUS]
   ========================================================================== */

@media (max-width: 479.98px) {
  .ps-auth__card { padding: var(--ps-space-25); }
  .ps-auth__card--notificare { padding: var(--ps-space-25); }
  .ps-page--auth .ps-page__centru { gap: var(--ps-space-30); }
}

@media (max-width: 359.98px) {
  .ps-auth__optiuni { flex-wrap: wrap; row-gap: var(--ps-space-10); }
  .ps-auth__optiuni > .ps-auth__link { margin-left: auto; }
  .ps-auth__subsol { gap: var(--ps-space-13); }
}


/* ==========================================================================
   „NU MAI ȘTIU CE DATE DE CONTACT AM FOLOSIT”
   --------------------------------------------------------------------------
   Partial-ul Views/ContNou/_DateContactUitate.cshtml, pe conectare și pe
   resetarea parolei: un <details> cu alegerea firmă / persoană fizică.
   ========================================================================== */

.ps-auth__identificare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-space-10);
  text-align: center;
}

.ps-auth__identificare > summary {
  cursor: pointer;
  list-style: none;
}

.ps-auth__identificare > summary::-webkit-details-marker { display: none; }

.ps-auth__identificare > p { margin: var(--ps-space-10) 0 0; }

.ps-auth__identificare-optiuni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ps-space-10);
  margin-top: var(--ps-space-10);
}