@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — FORMULARE
   --------------------------------------------------------------------------
   Referință: DESIGN-SYSTEM.md §10.5–§10.9, §10.21, §11.1–§11.3
              spec-login.md §3.5–§3.8, spec-home.md §3 (bara de căutare),
              spec-design-sheet.md §3.5–§3.6

   Anatomia unui câmp:

     <div class="ps-field">
       <label class="ps-field__label" for="email">…</label>
       <input class="ps-input" id="email" type="email"
              aria-describedby="email-hint email-err" aria-invalid="false">
       <p class="ps-field__hint" id="email-hint">…</p>
       <p class="ps-field__error" id="email-err">…</p>   <!-- role="alert" -->
     </div>

   Etichetele lipsesc din machete (designul folosește doar placeholder). Pentru
   accesibilitate se adaugă întotdeauna un <label>; dacă nu trebuie să se vadă,
   primește clasa `.ps-sr-only` din design-tokens.css.

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


/* ==========================================================================
   1. STRUCTURĂ — câmp, etichetă, hint, eroare
   ========================================================================== */

.ps-field {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
  min-width: 0;
  width: 100%;
}
.ps-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--ps-space-10);
}

/* Zone condiționate: ascunderea se face prin atributul `hidden`, pus DE SERVER la randare și
   comutat apoi de JavaScript (js/pages/inregistrare.js, js/pages/formular-anunt.js). Regula
   este necesară pentru că `display:flex` de mai sus este mai specific decât
   `[hidden] { display: none }` din foaia de stil a browserului — fără ea, un câmp marcat
   `hidden` ar rămâne vizibil. */
.ps-field[hidden],
.ps-form-row[hidden],
.ps-fieldset[hidden],
.ps-camp-conditionat[hidden] { display: none; }

.ps-field__label {
  font: var(--ps-type-label);                  /* 14px/600  [FIGMA] */
  letter-spacing: -.005em;
  color: var(--ps-text);
}
.ps-field__label--optional { font-weight: var(--ps-fw-medium); color: var(--ps-text-ui); }

/* marcaj de câmp obligatoriu — textul rămâne în .resx, semnul vine din CSS */
.ps-field__label[data-required]::after,
.ps-field--required > .ps-field__label::after {
  content: " *";
  color: var(--ps-danger);
}

.ps-field__hint {
  margin: 0;
  font: var(--ps-type-caption);                /* 12px/400 */
  color: var(--ps-text-faint-aa);
}

/* eroare per câmp — 12px, marja de 6px din DESIGN-SYSTEM §10.21  [PROPUS]
   `.ps-field__eroare` e clasa pe care o pune js/components/forms.js (și paginile de autentificare) */
.ps-field__error,
.ps-field__eroare {
  margin: var(--ps-space-6) 0 0;
  display: flex;
  align-items: flex-start;
  gap: var(--ps-space-5);
  font: var(--ps-type-caption);
  color: var(--ps-danger-field);
}
.ps-field__error:empty,
.ps-field__eroare:empty { display: none; }
.ps-field__error > .ps-icon-glyph,
.ps-field__error > .material-symbols-outlined { font-size: var(--ps-icon-16); flex: none; }

/* Eroarea stă sub etichetă, deasupra căsuței de completat, oricine ar pune-o: serverul
   (asp-validation-for), forms.js sau validare.js. Ordinea vizuală, nu cea din marcaj. */
.ps-field:not(.ps-field--inline) > * { order: 2; }
.ps-field:not(.ps-field--inline) > :is(label, legend, .ps-field__label) { order: 0; }
.ps-field:not(.ps-field--inline) > :is(.ps-field__error, .ps-field__eroare, .field-validation-error) {
  order: 1;
  margin: 0;
}

/* clasele generate de jQuery Validation Unobtrusive */
.field-validation-error {
  display: block;
  margin-top: var(--ps-space-6);
  font: var(--ps-type-caption);
  color: var(--ps-danger-field);
}
.field-validation-valid { display: none; }

/* fieldset / legend --------------------------------------------------- */
.ps-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-15);
  min-width: 0;
}
.ps-fieldset--incadrat {
  padding: var(--ps-space-20);
  border: var(--ps-border-width) solid var(--ps-border);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
}
/* legenda stă în casetă, ca un titlu, nu pe chenar (float o scoate din locul ei nativ) */
.ps-fieldset--incadrat > .ps-legend {
  float: left;
  width: 100%;
  padding: 0;
}
.ps-legend {
  padding: 0 0 var(--ps-space-10);
  font: var(--ps-type-label);
  color: var(--ps-text);
}
.ps-legend--sectiune {
  font: var(--ps-type-h3);
  color: var(--ps-text);
}

/* fișierele alese, înainte de trimitere (js/components/fisiere.js) */
.ps-fisiere {
  display: grid;
  gap: var(--ps-space-10);
  margin-block-start: var(--ps-space-10);
}
.ps-fisiere[hidden] { display: none; }
.ps-fisiere__lista {
  display: grid;
  gap: var(--ps-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-fisiere__item {
  display: flex;
  align-items: center;
  gap: var(--ps-space-10);
  padding: var(--ps-space-6) var(--ps-space-10) var(--ps-space-6) var(--ps-space-6);
  border: var(--ps-border-width) solid var(--ps-border-soft);
  border-radius: var(--ps-radius-panel);
  background: var(--ps-surface);
}
.ps-fisiere__miniatura,
.ps-fisiere__iconita {
  flex: none;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--ps-radius-control);
  background: var(--ps-bg-warm);
}
.ps-fisiere__miniatura { object-fit: cover; }
.ps-fisiere__iconita {
  display: grid;
  place-items: center;
  color: var(--ps-icon-nav);
  font-size: 28px;
}
.ps-fisiere__text {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.ps-fisiere__nume {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ps-text);
  font: var(--ps-fw-medium) var(--ps-fs-14)/1.3 var(--ps-font-sans);
}
.ps-fisiere__detalii {
  color: var(--ps-text-muted);
  font-size: var(--ps-fs-12);
}
.ps-fisiere__deschide { color: var(--ps-green-link); }
.ps-fisiere__elimina {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--ps-radius-full);
  background: transparent;
  color: var(--ps-text-ui);
  cursor: pointer;
}
.ps-fisiere__elimina:hover {
  background: var(--ps-c-ink-06);
  color: var(--ps-danger);
}
.ps-fisiere__elimina:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-green-dark);
  outline-offset: var(--ps-focus-offset);
}
.ps-fisiere__adauga { justify-self: start; }
/* câmpul nativ, ascuns vizual cât timp „Adaugă încă un fișier” îi ține locul; .ps-sr-only nu
   ajunge, .ps-input îi impune lățimea întreagă */
.ps-fisiere__camp-ascuns {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0 !important;
  opacity: 0;
}

/* stivă de formular — gap 25px ca în cardul de login  [FIGMA] */
.ps-form {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-25);
  width: 100%;
  min-width: 0;
}
.ps-form--tight { gap: var(--ps-space-15); }

/* rând de formular: mai multe câmpuri pe orizontală, aliniate după etichetă, ca o eroare sau un
   indiciu de sub un câmp să nu-l urce (nici pe vecini) */
.ps-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ps-space-20);
}
.ps-form-row > .ps-field { flex: 1 1 220px; }

.ps-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-space-20);
}

@media (max-width: 575.98px) {
  .ps-form-row { flex-direction: column; align-items: stretch; gap: var(--ps-space-15); }
  /* pe coloană, baza de 220px de mai sus ar deveni înălțime */
  .ps-form-row > .ps-field { flex: none; }
}


/* ==========================================================================
   2. CONTROALE TEXT — input / textarea / select
   --------------------------------------------------------------------------
   Fundal alb, chenar cald, umbră fină; h 44, text 14/500.
   ========================================================================== */

.ps-input,
.ps-textarea,
.ps-select {
  --ps-ctl-h: var(--ps-control-h);             /* 44px  [FIGMA] */
  --ps-ctl-bg: var(--ps-surface);
  --ps-ctl-bd: var(--ps-border-input);
  --ps-ctl-fg: var(--ps-text);
  --ps-ctl-radius: var(--ps-radius-control);
  --ps-ctl-px: var(--ps-space-20);
  --ps-ctl-py: var(--ps-space-10);
  --ps-ctl-font: var(--ps-fw-medium) var(--ps-fs-14)/1.35 var(--ps-font-sans);
  --ps-ctl-halo: rgb(var(--ps-rgb-green-500) / .16);
  --ps-ctl-halo-err: color-mix(in srgb, var(--ps-danger-field) 12%, transparent); /* [PROPUS] */

  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--ps-ctl-h);
  padding: var(--ps-ctl-py) var(--ps-ctl-px);
  border: var(--ps-border-width) solid var(--ps-ctl-bd);
  border-radius: var(--ps-ctl-radius);
  background: var(--ps-ctl-bg);
  box-shadow: var(--ps-shadow-xs);
  color: var(--ps-ctl-fg);
  font: var(--ps-ctl-font);
  transition: var(--ps-transition-color),
              box-shadow var(--ps-duration) var(--ps-ease);
}

.ps-textarea {
  --ps-ctl-h: 120px;                           /* [PROPUS] designul nu conține textarea */
  line-height: var(--ps-lh-body);
  resize: vertical;
}
/* textarea crește singură cu textul, unde e suportat */
@supports (field-sizing: content) {
  .ps-textarea { field-sizing: content; min-block-size: 7lh; max-block-size: 24lh; }
}

/* placeholder — #949494 pe #FAFAFA e sub AA (≈2.8:1) → varianta AA  §11.3 */
.ps-input::placeholder,
.ps-textarea::placeholder {
  color: var(--ps-icon-ui-aa);
  font-weight: var(--ps-fw-semibold);          /* placeholderul din Figma e SemiBold  [FIGMA] */
  opacity: 1;
}

/* --- stări  [PROPUS], designul nu le conține ------------------------- */
.ps-input:hover,
.ps-textarea:hover,
.ps-select:hover { --ps-ctl-bd: var(--ps-border-input-hover); }

.ps-input:focus,
.ps-input:focus-visible,
.ps-textarea:focus,
.ps-textarea:focus-visible,
.ps-select:focus,
.ps-select:focus-visible {
  --ps-ctl-bd: var(--ps-primary);
  --ps-ctl-bg: var(--ps-surface);
  outline: none;
  box-shadow: 0 0 0 4px var(--ps-ctl-halo);
}

.ps-input:disabled,
.ps-textarea:disabled,
.ps-select:disabled,
.ps-input[readonly],
.ps-textarea[readonly] {
  --ps-ctl-bg: var(--ps-c-grey-200);           /* #EEEEEE */
  --ps-ctl-bd: var(--ps-c-grey-300);           /* #DEDEDE */
  --ps-ctl-fg: var(--ps-icon-ui-aa);
  cursor: not-allowed;
}
.ps-input[readonly],
.ps-textarea[readonly] { cursor: text; }

/* invalid — starea vine din `aria-invalid`, nu dintr-o clasă  §11.1 */
.ps-input[aria-invalid="true"],
.ps-textarea[aria-invalid="true"],
.ps-select[aria-invalid="true"],
.ps-input.input-validation-error,
.ps-textarea.input-validation-error,
.ps-select.input-validation-error {
  --ps-ctl-bd: var(--ps-danger-field);         /* #D93025  [PROPUS] */
}
.ps-input[aria-invalid="true"]:focus,
.ps-textarea[aria-invalid="true"]:focus,
.ps-select[aria-invalid="true"]:focus,
.ps-input.input-validation-error:focus,
.ps-textarea.input-validation-error:focus,
.ps-select.input-validation-error:focus {
  box-shadow: 0 0 0 3px var(--ps-ctl-halo-err);
}

/* elimină decorațiile native inutile */
.ps-input[type="search"]::-webkit-search-decoration,
.ps-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.ps-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ps-input[type="number"]::-webkit-outer-spin-button,
.ps-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- variantă „bară de căutare": h 40  [FIGMA] --- */
.ps-input--cautare {
  --ps-ctl-h: var(--ps-control-h-sm);          /* 40px */
  --ps-ctl-px: var(--ps-space-10);
  --ps-ctl-py: 0;
}
.ps-input--cautare::placeholder {
  color: var(--ps-text-disabled-aa);           /* rgba(81,81,81,.75) — variantă AA  §11.3 */
  font-weight: var(--ps-fw-medium);
}
/* pe Home căutarea are radius 8px  [FIGMA] */
.ps-input--rotunjit { --ps-ctl-radius: var(--ps-radius-8); }


/* ==========================================================================
   3. GRUPURI DE CONTROALE
   --------------------------------------------------------------------------
   Iconiță în stânga + input + acțiune în dreapta, într-un singur chenar.
   ========================================================================== */

.ps-input-group {
  --ps-ctl-h: var(--ps-control-h-sm);
  --ps-ctl-bd: var(--ps-border-input);
  --ps-ctl-bg: transparent;
  --ps-ctl-radius: var(--ps-radius-control);

  display: flex;
  align-items: center;
  gap: var(--ps-space-15);                     /* gap icon↔text  [FIGMA] */
  width: 100%;
  min-width: 0;
  min-height: var(--ps-ctl-h);
  padding-inline: var(--ps-space-10);
  border: var(--ps-border-width) solid var(--ps-ctl-bd);
  border-radius: var(--ps-ctl-radius);
  background: var(--ps-ctl-bg);
  transition: var(--ps-transition-color), box-shadow var(--ps-duration) var(--ps-ease);
}
.ps-input-group--rotunjit { --ps-ctl-radius: var(--ps-radius-8); }

/* inputul din interior nu are chenar propriu */
.ps-input-group > .ps-input,
.ps-input-group > input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: var(--ps-type-body-medium);
  color: var(--ps-text);
}
.ps-input-group > .ps-input:focus,
.ps-input-group > input:focus { outline: none; box-shadow: none; }

.ps-input-group__icon {
  flex: none;
  font-size: var(--ps-icon-24);
  color: var(--ps-icon-ui-aa);
}

.ps-input-group:focus-within {
  --ps-ctl-bd: var(--ps-primary);              /* [PROPUS] */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ps-primary) 15%, transparent);
}
.ps-input-group:hover { --ps-ctl-bd: var(--ps-line); }   /* [PROPUS] */

/* --- câmp cu acțiune suprapusă (ochiul de la parolă)  [FIGMA] --- */
.ps-field--with-action { position: relative; }
.ps-field--with-action > .ps-input { padding-right: 56px; }   /* [FIGMA] */
.ps-field__action {
  position: absolute;
  top: 0;
  right: var(--ps-space-20);
  height: var(--ps-control-h);
  display: grid;
  place-items: center;
  width: var(--ps-icon-24);
  color: var(--ps-icon-ui-aa);
  background: none;
  border: 0;
  cursor: pointer;
  transition: var(--ps-transition-color);
}
.ps-field__action > .ps-icon-glyph,
.ps-field__action > .material-symbols-outlined,
.ps-field__action > svg { font-size: var(--ps-icon-24); width: var(--ps-icon-24); height: var(--ps-icon-24); }
.ps-field__action:hover { color: var(--ps-green-action); }
.ps-field__action:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-primary);
  outline-offset: var(--ps-focus-offset);
  border-radius: var(--ps-radius-3);
}
/* când eticheta este vizibilă, acțiunea coboară sub ea */
.ps-field--with-action:has(> .ps-field__label) > .ps-field__action {
  top: auto;
  bottom: 0;
}

/* ochiul de la parolă: iconul urmează aria-pressed, pus de componenta password-toggle */
.ps-field__action .ps-field__ochi-ascunde { display: none; }
.ps-field__action[aria-pressed="true"] .ps-field__ochi-arata { display: none; }
.ps-field__action[aria-pressed="true"] .ps-field__ochi-ascunde { display: inline-block; }

/* telefon cu prefix de țară (componenta telefon-prefix): prefixul și numărul într-un singur câmp */
.ps-telefon { display: flex; min-width: 0; }
.ps-telefon > .ps-telefon__prefix[hidden] { display: none; }
.ps-telefon > .ps-telefon__prefix {
  --ps-ctl-fg: var(--ps-text);
  flex: none;
  inline-size: auto;
  margin-inline-end: calc(var(--ps-border-width) * -1);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.ps-telefon > input { flex: 1 1 auto; min-width: 0; }
.ps-telefon > .ps-telefon__prefix:not([hidden]) + input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.ps-telefon > :focus { position: relative; z-index: 1; }


/* ==========================================================================
   4. SELECT — DESIGN-SYSTEM §10.6
   --------------------------------------------------------------------------
   `<select>` nativ cu `appearance: none` + chevron ca background-image
   (SVG data-URI, monocrom). Chevronul cu `drop-shadow` din Figma nu se poate
   reproduce 1:1 pe un select nativ — se acceptă abaterea în schimbul
   accesibilității de tastatură (DESIGN-SYSTEM §10.6).
   ========================================================================== */

.ps-select {
  --ps-ctl-h: var(--ps-control-h-sm);          /* 40px  [FIGMA] */
  --ps-ctl-fg: var(--ps-text-faint-aa);        /* variantă AA a rgba(81,81,81,.7)  §11.3 */
  --ps-ctl-px: var(--ps-space-20);
  --ps-ctl-py: var(--ps-space-5);
  --ps-select-chevron: var(--ps-icon-nav);

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: calc(var(--ps-space-10) + var(--ps-icon-30));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23515151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ps-space-10) center;
  background-size: var(--ps-icon-20) var(--ps-icon-20);
  cursor: pointer;
}

/* lățimile din machete  [FIGMA] */
.ps-select--profesie   { width: 200px; min-width: 200px; }
.ps-select--localitate { width: 340px; max-width: 100%; }
.ps-select--fluid      { width: 100%; flex: 1 1 auto; }

/* select cu valoare selectată — fundal var(--ps-c-green-30), border + text verde  [FIGMA] */
.ps-select--selectat,
.ps-select.has-value {
  --ps-ctl-bg: var(--ps-primary-soft);         /* var(--ps-c-green-30) */
  --ps-ctl-bd: var(--ps-primary);              /* var(--ps-c-green-500) */
  --ps-ctl-fg: var(--ps-green-ps);             /* var(--ps-c-green-700) */
}
.ps-select--selectat:hover,
.ps-select.has-value:hover {
  --ps-ctl-bg: var(--ps-primary-soft-hover);   /* [PROPUS] var(--ps-c-green-50) */
}

/* select fără valoare — text estompat, fundal alb  [FIGMA] */
.ps-select.is-empty {
  --ps-ctl-bg: var(--ps-surface);
  --ps-ctl-bd: var(--ps-border-input);
  --ps-ctl-fg: var(--ps-text-disabled-aa);
}

/* deschis — atributul e pus de JS pentru listbox-uri custom  [FIGMA] */
.ps-select[aria-expanded="true"] { --ps-ctl-bd: var(--ps-green-ps); }

.ps-select:disabled { opacity: .5; cursor: not-allowed; }

/* multiplu / listă vizibilă */
.ps-select[multiple],
.ps-select[size]:not([size="1"]) {
  padding-right: var(--ps-ctl-px);
  background-image: none;
  min-height: auto;
}
.ps-select option { color: var(--ps-text); background: var(--ps-surface); }


/* --------------------------------------------------------------------------
   4.1  LISTA DE OPȚIUNI — panoul comun al tuturor dropdown-urilor
   --------------------------------------------------------------------------
   `.ps-lista-optiuni` e panoul listelor construite în pagină (sugestiile din
   autocomplete.js). Lista unui `<select class="ps-select">` primește același
   aspect prin `::picker(select)`, unde browserul îl permite (appearance:
   base-select); în rest rămâne lista nativă a sistemului.

   Lista se deschide în jos, arată `--ps-optiuni-vizibile` rânduri și derulează
   restul cu o bară subțire în culoarea platformei. Urcă deasupra câmpului doar
   când dedesubt nu are loc pe ecran.
   -------------------------------------------------------------------------- */

.ps-lista-optiuni {
  max-block-size: calc(var(--ps-optiuni-vizibile) * var(--ps-optiune-h) + 2 * var(--ps-space-5) + 2px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ps-space-5);
  border: var(--ps-border-width) solid var(--ps-border);
  border-radius: var(--ps-radius-control);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-float);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ps-green-action) 45%, transparent) transparent;
}

/* Aceleași valori ca la `.ps-lista-optiuni`: selectorii nu se pot grupa, fiindcă
   `::picker()` ar invalida toată regula în browserele care nu-l cunosc. */
@supports (appearance: base-select) {
  select.ps-select:not([multiple]),
  select.ps-select:not([multiple])::picker(select) { appearance: base-select; }

  /* textul ales stă pe aceeași linie cu chevronul */
  select.ps-select:not([multiple]) { display: flex; align-items: center; }
  select.ps-select::picker-icon { display: none; }   /* chevronul rămâne cel de mai sus */
  select.ps-select:open { --ps-ctl-bd: var(--ps-green-ps); }

  /* lista are exact lățimea câmpului; opțiunile lungi trec pe al doilea rând */
  select.ps-select::picker(select) {
    position-area: block-end span-inline-end;
    position-try-order: normal;
    position-try-fallbacks: flip-block;
    box-sizing: border-box;
    inline-size: anchor-size(inline);
    min-inline-size: 0;
    max-block-size: calc(var(--ps-optiuni-vizibile) * var(--ps-optiune-h) + 2 * var(--ps-space-5) + 2px);
    margin-block: var(--ps-space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--ps-space-5);
    border: var(--ps-border-width) solid var(--ps-border);
    border-radius: var(--ps-radius-control);
    background: var(--ps-surface);
    box-shadow: var(--ps-shadow-float);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ps-green-action) 45%, transparent) transparent;
  }

  select.ps-select option {
    display: flex;
    align-items: center;
    min-block-size: var(--ps-optiune-h);
    padding: var(--ps-space-3) var(--ps-space-10);
    border-radius: 8px;
    font: var(--ps-type-body-medium);
    color: var(--ps-text);
    white-space: normal;
  }
  select.ps-select option::checkmark { display: none; }
  select.ps-select option:hover,
  select.ps-select option:focus-visible {
    outline: none;
    background: var(--ps-green-surface);
    color: var(--ps-green-dark);
  }
  select.ps-select option:checked {
    color: var(--ps-green-dark);
    font-weight: var(--ps-fw-semibold);
  }
}


/* ==========================================================================
   5. CHECKBOX ȘI RADIO — DESIGN-SYSTEM §10.7–§10.8
   --------------------------------------------------------------------------
   Cele două verzuri pentru starea bifată (var(--ps-c-green-700) în design sheet vs var(--ps-c-green-500)
   în filtre) s-au unificat pe var(--ps-c-green-500) — DESIGN-SYSTEM §12 pct. 3.
   ========================================================================== */

.ps-checkbox,
.ps-radio {
  --ps-check-size: var(--ps-icon-16);          /* 16px implicit  [FIGMA] */
  --ps-check-bd: var(--ps-icon-ui);            /* #949494  [FIGMA] */
  --ps-check-bg: transparent;
  --ps-check-on: var(--ps-primary);            /* var(--ps-c-green-500)  [FIGMA] */

  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: var(--ps-check-size);
  height: var(--ps-check-size);
  margin: 0;
  border: var(--ps-border-width) solid var(--ps-check-bd);
  background: var(--ps-check-bg);
  cursor: pointer;
  transition: var(--ps-transition-color);
}

.ps-checkbox { border-radius: var(--ps-radius-3); }
.ps-radio    { border-radius: var(--ps-radius-full); --ps-check-size: var(--ps-icon-20); }

/* mărimi  [FIGMA]: 14px (login), 16px (filtre), 20px (radio) */
.ps-checkbox--sm { --ps-check-size: 14px; }
.ps-checkbox--lg { --ps-check-size: var(--ps-icon-20); }
/* radio desenat ca pătrat 16×16 — grupul „Sortează după"  §10.8  [PROPUS] */
.ps-radio--casuta { --ps-check-size: var(--ps-icon-16); border-radius: var(--ps-radius-3); }

/* bifa: două laturi rotite la −45°, scalate la 0 în stare neutră */
.ps-checkbox::before,
.ps-radio--casuta::before {
  content: "";
  width: 62%;
  height: 34%;
  border-left: 2px solid var(--ps-primary-contrast);
  border-bottom: 2px solid var(--ps-primary-contrast);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform var(--ps-duration-fast) var(--ps-ease);
}
/* punctul radioului rotund */
.ps-radio:not(.ps-radio--casuta)::before {
  content: "";
  width: 40%;
  height: 40%;
  border-radius: var(--ps-radius-full);
  background: var(--ps-primary-contrast);
  transform: scale(0);
  transition: transform var(--ps-duration-fast) var(--ps-ease);
}

.ps-checkbox:checked,
.ps-radio:checked {
  --ps-check-bg: var(--ps-check-on);
  --ps-check-bd: var(--ps-check-on);
}
.ps-checkbox:checked::before,
.ps-radio:checked::before { transform: rotate(-45deg) scale(1); }
.ps-radio:not(.ps-radio--casuta):checked::before { transform: scale(1); }

/* stare indeterminată — linie orizontală  [PROPUS] */
.ps-checkbox:indeterminate {
  --ps-check-bg: var(--ps-check-on);
  --ps-check-bd: var(--ps-check-on);
}
.ps-checkbox:indeterminate::before {
  width: 60%;
  height: 0;
  border-left: 0;
  border-bottom: 2px solid var(--ps-primary-contrast);
  transform: none;
}

.ps-checkbox:hover,
.ps-radio:hover { --ps-check-bd: var(--ps-icon-ui-aa); }   /* [PROPUS] */

.ps-checkbox:focus-visible,
.ps-radio:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-primary);
  outline-offset: var(--ps-focus-offset);
}

.ps-checkbox:disabled,
.ps-radio:disabled {
  --ps-check-bd: var(--ps-c-grey-300);         /* #DEDEDE  [PROPUS] */
  opacity: .5;
  cursor: not-allowed;
}

/* --- rândul „control + etichetă" --------------------------------------- */
.ps-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-10);
  min-width: 0;
  cursor: pointer;
}
.ps-choice--wide { display: flex; width: 100%; justify-content: space-between; }
.ps-choice__label {
  font: var(--ps-type-body);
  color: var(--ps-text-ui);
  min-width: 0;
}
.ps-choice:has(.ps-checkbox:disabled) .ps-choice__label,
.ps-choice:has(.ps-radio:disabled) .ps-choice__label {
  color: var(--ps-text-disabled-aa);
  cursor: not-allowed;
}
/* grup „Credite EMC" — gap 15px  [FIGMA] */
.ps-choice--larg { gap: var(--ps-space-15); }

/* listă de opțiuni (filtre, sortare) */
.ps-choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
  min-width: 0;
}
.ps-choice-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ps-space-20);
}


/* ==========================================================================
   6. SWITCH / TOGGLE — DESIGN-SYSTEM §10.9
   --------------------------------------------------------------------------
   Track 36 × 22, radius 60px. Inactiv #DEDEDE, activ var(--ps-c-green-200).
   Knob alb 16px, offset 4px → 18px la `:checked`.  [FIGMA]
   Semantic: <input type="checkbox" role="switch">
   ========================================================================== */

.ps-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 36px;
  height: 22px;
}
.ps-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ps-switch__track {
  position: absolute;
  inset: 0;
  border-radius: var(--ps-radius-60);
  background: var(--ps-c-grey-300);            /* #DEDEDE  [FIGMA] */
  pointer-events: none;
  transition: background-color var(--ps-duration-slow) var(--ps-ease);
}
.ps-switch__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: var(--ps-icon-16);
  height: var(--ps-icon-16);
  border-radius: var(--ps-radius-full);
  background: var(--ps-c-white);
  transform: translateY(-50%);
  transition: left var(--ps-duration-slow) var(--ps-ease);
}

.ps-switch__input:checked + .ps-switch__track {
  background: var(--ps-c-green-200);           /* var(--ps-c-green-200)  [FIGMA] */
}
.ps-switch__input:checked + .ps-switch__track::after { left: 18px; }

.ps-switch__input:focus-visible + .ps-switch__track {
  outline: var(--ps-focus-width) solid var(--ps-green-link);
  outline-offset: var(--ps-focus-offset);
}
.ps-switch__input:disabled + .ps-switch__track { opacity: .5; }
.ps-switch__input:disabled { cursor: not-allowed; }

/* wrapper orizontal — „Notificări prin e-mail"  [FIGMA] */
.ps-switch-field {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-10);
  padding: var(--ps-space-10);
}
.ps-switch-field__label {
  font: var(--ps-type-body-medium);            /* 14px/500  [FIGMA] */
  color: var(--ps-text-ui);
}

/* wrapper vertical — „Publică eveniment"  [FIGMA] */
.ps-switch-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-10);
  padding: var(--ps-space-10);
}
.ps-switch-stack__label {
  font: var(--ps-type-body);
  color: var(--ps-text);
  text-align: center;
}


/* ==========================================================================
   7. SUMAR DE VALIDARE
   --------------------------------------------------------------------------
   `asp-validation-summary` folosește vizualul de alertă de eroare
   (DESIGN-SYSTEM §10.21). Regulile de aici acoperă doar markup-ul generat de
   ASP.NET; stilul complet al alertelor stă în components/alert.css.
   ========================================================================== */

.ps-validation-summary,
.validation-summary-errors {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
  padding: var(--ps-space-15) var(--ps-space-20);
  border-radius: var(--ps-radius-control);
  border-left: 4px solid var(--ps-danger);
  background: var(--ps-danger-bg);
  font: var(--ps-type-body);
  color: var(--ps-text);
}
.ps-validation-summary ul,
.validation-summary-errors ul {
  margin: 0;
  padding-left: var(--ps-space-20);
  list-style: disc;
}
.validation-summary-valid { display: none; }


/* ==========================================================================
   8. RESPONSIVE  [PROPUS]
   ========================================================================== */

@media (max-width: 767.98px) {
  /* selecturile cu lățime fixă din machete devin fluide */
  .ps-select--profesie,
  .ps-select--localitate {
    width: 100%;
    min-width: 0;
  }
  .ps-form { gap: var(--ps-space-20); }
}

@media (max-width: 575.98px) {
  /* pe iOS un font-size sub 16px declanșează zoom automat la focus */
  .ps-input,
  .ps-textarea,
  .ps-select { font-size: var(--ps-fs-16); }
  .ps-form__actions > .ps-btn { width: 100%; }
}