@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — ZONA DE CĂUTARE
   --------------------------------------------------------------------------
   Referință: spec-lista-anunturi.md §1.1, §2.1–§2.2, §3.1  (Figma 3584:70233)
              spec-home.md §2.3                             (Figma 3297:7815)
              DESIGN-SYSTEM.md §10.5–§10.6, §10.17

   Structura (randată de Views/Shared/Components/ZonaCautare/Default.cshtml):

     .ps-zona-cautare                panou verde cu colțuri mari
       .ps-zona-cautare__panou       cardul alb, 870px (820px pe Home)
         .ps-tabs                    taburile de categorie (tabs.css)
         .ps-zona-cautare__formular  formular GET
           .ps-input-group           câmpul de text + iconiță (forms.css)
           .ps-zona-cautare__rand    select + select + buton

   Controalele propriu-zise sunt deja stilizate în forms.css / buttons.css /
   tabs.css. Fișierul acesta adaugă doar banda, cardul și geometria rândurilor.

   MARCAJE
     [FIGMA]   valoare desenată în machete
     [PROPUS]  valoare inexistentă în design (breakpoint-uri, stări)
   ========================================================================== */


/* ==========================================================================
   1. BANDA
   ========================================================================== */

/* lățimea vine din container, nu din taburi: într-un părinte flex centrat, rândul de
   taburi (nowrap) ar lăți altfel zona cât toate taburile la un loc */
.ps-zona-cautare {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-inline-size: 0;
  padding: var(--ps-space-30) var(--ps-space-40);        /* [FIGMA] 30/40 */
  background: var(--ps-panou-verde);
  border-radius: var(--ps-radius-panel);
}

/* Pe pagina de start și în banda verde a listelor zona nu are fundal propriu:
   cardul stă direct pe verdele din spate. */
.ps-zona-cautare--home,
.ps-banda--verde .ps-zona-cautare {
  background: none;
  border-radius: 0;
}
.ps-zona-cautare--home { padding: 0; }

/* Varianta compactă (bara de căutare reafișată deasupra rezultatelor). */
.ps-zona-cautare--compact {
  padding: var(--ps-space-15) var(--ps-gutter);
}


/* ==========================================================================
   2. PANOUL
   ========================================================================== */

.ps-zona-cautare__panou {
  width: min(var(--ps-content-870), 100%);               /* [FIGMA] 870 */
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-15);                               /* [FIGMA] */
  padding: var(--ps-space-20) var(--ps-space-30);        /* [FIGMA] 20/32 ≈ 20/30 */
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: 0 1px 2px rgb(var(--ps-rgb-umbra) / .06), 0 30px 60px -30px rgb(var(--ps-rgb-umbra) / .6);
}

.ps-zona-cautare--home .ps-zona-cautare__panou {
  width: min(var(--ps-content-820), 100%);               /* [FIGMA] 820 pe Home */
}


/* ==========================================================================
   3. TABURILE DE CATEGORIE
   --------------------------------------------------------------------------
   Sunt linkuri (`<a class="ps-tab">`), nu butoane: fiecare categorie are URL
   propriu, deci starea activă vine din `aria-current="page"`, nu dintr-o clasă.
   ========================================================================== */

/* toate tipurile de anunț rămân la vedere, fără derulare: butoane egale, cu iconița deasupra
   etichetei, la fel pe prima pagină și pe listele de anunțuri */
.ps-zona-cautare .ps-zona-cautare__taburi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
  align-items: stretch;
  gap: 8px;
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.ps-zona-cautare .ps-zona-cautare__tab {
  --ps-tab-radius: var(--ps-radius-card);
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 8px;
  border: 1px solid var(--ps-border);
  font: var(--ps-fw-semibold) 12.5px/1.25 var(--ps-font-sans);
  text-decoration: none;
  white-space: normal;
}
.ps-zona-cautare .ps-zona-cautare__tab[aria-current="page"] { border-color: transparent; }

/* pe telefon: „Toate anunțurile” pe tot rândul, categoriile în 2 × 2 */
@media (max-width: 575.98px) {
  .ps-zona-cautare .ps-zona-cautare__taburi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-zona-cautare .ps-zona-cautare__tab { min-height: 58px; }
  .ps-zona-cautare .ps-zona-cautare__tab:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 8px;
    min-height: 44px;
  }
}


/* ==========================================================================
   4. FORMULARUL
   ========================================================================== */

.ps-zona-cautare__formular {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-15);                               /* [FIGMA] */
  margin: 0;
}

.ps-zona-cautare__rand {
  display: flex;
  align-items: center;
  gap: var(--ps-space-10);                               /* [FIGMA] */
}

/* selectul de județ ocupă spațiul rămas între specializare și buton  [FIGMA] */
.ps-zona-cautare__judet {
  flex: 1 1 0;
  min-width: 0;
}

/* aceeași înălțime și rotunjire ca a câmpurilor de lângă el */
.ps-zona-cautare__buton {
  --ps-btn-h: var(--ps-control-h-sm);
  --ps-btn-radius: var(--ps-radius-control);
  flex: none;
  min-width: 200px;                                      /* [FIGMA] */
}


/* ==========================================================================
   5. ECRANE MICI  [PROPUS]
   --------------------------------------------------------------------------
   Machetele conțin doar breakpoint-ul desktop 1920. Regulile de mai jos sunt
   cele din spec-lista-anunturi §1.4.
   ========================================================================== */

@media (max-width: 899.98px) {
  .ps-zona-cautare {
    padding: var(--ps-space-20) var(--ps-gutter);
  }
  /* în banda verde zona stă deja într-un container: fără a doua margine, ca pe Home */
  .ps-banda--verde .ps-zona-cautare { padding-inline: 0; }

  .ps-zona-cautare__panou {
    padding: var(--ps-space-15);
  }

  .ps-zona-cautare__rand {
    flex-wrap: wrap;
  }
  .ps-zona-cautare__rand > .ps-select,
  .ps-zona-cautare__judet {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .ps-zona-cautare__buton {
    width: 100%;
    min-width: 0;
  }
}