@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — AUTOCOMPLETE (combobox cu listbox)
   --------------------------------------------------------------------------
   Referință: DESIGN-SYSTEM.md §10.6 (select), §11.1 (stările vin din ARIA),
              spec-lista-anunturi.md §2.2, spec-home.md §2.3

   Componenta nu apare în machete: Figma conține doar selecturi native. Toate
   valorile de aici sunt derivate din tokenii existenți, ca lista de sugestii
   să arate ca un panou de dropdown al aplicației (aceeași umbră, același
   radius, aceeași suprafață) — sunt marcate [PROPUS].

   MARCAJ (generat de js/components/autocomplete.js, NU de Razor):

     <div class="ps-input-group ps-autocomplete" data-ps-component="autocomplete" …>
       <input role="combobox" aria-expanded="…" aria-activedescendant="…">
       <div class="ps-autocomplete__lista ps-lista-optiuni" role="listbox">
         <div class="ps-autocomplete__grup" role="group" aria-label="Localități">
           <div class="ps-autocomplete__grup-titlu" aria-hidden="true">Localități</div>
           <div class="ps-autocomplete__optiune" role="option" aria-selected="true">…</div>
         </div>
       </div>
       <div class="ps-sr-only" role="status" aria-live="polite"></div>
     </div>

   STĂRILE SE AGAȚĂ DE ARIA, nu de clase (§11.1): opțiunea activă este
   `[aria-selected="true"]`; clasa `.is-activa` există doar ca ancoră pentru
   `scrollIntoView` și pentru browserele fără suport bun pe selectorul ARIA.

   FĂRĂ JAVASCRIPT nimic din acest fișier nu se aplică: marcajul randat de
   Razor conține doar `.ps-input-group` / `.ps-select`, deja stilizate în
   forms.css. Regula `.ps-autocomplete__sursa` este singura excepție — ascunde
   selectul original DOAR după ce JS-ul l-a marcat cu `aria-hidden`.
   ========================================================================== */


/* ==========================================================================
   1. RĂDĂCINA
   ========================================================================== */

.ps-autocomplete {
  position: relative;
}

/* inputul generat peste un <select> moștenește clasele selectului, deci nu are
   nevoie de reguli proprii; doar chevronul de select nu i se aplică */
.ps-autocomplete__input {
  background-image: none;
  cursor: text;
}

/* Selectul-sursă rămâne în formular (valoarea trimisă este a lui), dar iese din
   ordinea de tabulare și din arborele de accesibilitate. Se ascunde numai când
   JS l-a marcat: fără JS trebuie să rămână perfect vizibil și utilizabil. */
.ps-autocomplete__sursa[aria-hidden="true"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   2. LISTA DE SUGESTII
   --------------------------------------------------------------------------
   Panoul (înălțime, derulare, chenar, umbră) vine din `.ps-lista-optiuni`
   (forms.css §4.1); aici doar așezarea sub câmp.
   ========================================================================== */

.ps-autocomplete__lista {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--ps-space-5));
  z-index: var(--ps-z-dropdown);
}

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


/* ==========================================================================
   3. GRUPURI
   ========================================================================== */

.ps-autocomplete__grup + .ps-autocomplete__grup {
  margin-top: var(--ps-space-5);
  border-top: var(--ps-border-width) solid var(--ps-border-soft);
  padding-top: var(--ps-space-5);
}

.ps-autocomplete__grup-titlu {
  padding: var(--ps-space-5) var(--ps-space-10);
  font: var(--ps-type-micro);
  color: var(--ps-text-faint-aa);
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ==========================================================================
   4. OPȚIUNI
   ========================================================================== */

.ps-autocomplete__optiune {
  display: flex;
  align-items: center;
  gap: var(--ps-space-10);
  min-block-size: var(--ps-optiune-h);
  padding: 0 var(--ps-space-10);
  border-radius: 8px;
  font: var(--ps-type-body-medium);
  color: var(--ps-text);
  cursor: pointer;
}

.ps-autocomplete__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-autocomplete__detaliu {
  margin-inline-start: auto;
  flex: none;
  font: var(--ps-type-caption);
  color: var(--ps-text-faint-aa);
}

/* porțiunea care se potrivește cu textul tastat */
.ps-autocomplete__marcaj {
  background: none;
  color: inherit;
  font-weight: var(--ps-fw-semibold);
}

/* Starea activă vine din ARIA — cursorul virtual al cititorului de ecran și
   evidențierea vizuală trebuie să fie mereu același lucru (§11.1). */
.ps-autocomplete__optiune:hover,
.ps-autocomplete__optiune[aria-selected="true"] {
  background: var(--ps-green-surface);
  color: var(--ps-green-dark);
}

.ps-autocomplete__optiune[aria-selected="true"] .ps-autocomplete__detaliu {
  color: var(--ps-green-dark);
}


/* ==========================================================================
   5. MESAJE (fără sugestii / eroare)
   ========================================================================== */

.ps-autocomplete__mesaj {
  padding: var(--ps-space-10);
  font: var(--ps-type-body);
  color: var(--ps-text-faint-aa);
}


/* ==========================================================================
   6. ACCESIBILITATE ȘI PREFERINȚE
   ========================================================================== */

@media (prefers-contrast: more) {
  .ps-autocomplete__optiune[aria-selected="true"] {
    outline: 2px solid var(--ps-primary);
    outline-offset: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-autocomplete__lista { scroll-behavior: auto; }
}