@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — BADGE-URI / ETICHETE
   --------------------------------------------------------------------------
   Referință: DESIGN-SYSTEM.md §10.19, §2.5, §11.4
              spec-design-sheet.md §3.7 (chip tooltip)
              spec-detaliu-anunt.md §3.7 (chip de secțiune între două linii)

   REGULĂ DE ACCESIBILITATE: culoarea singură nu poartă înțeles. Badge-urile
   de stare conțin întotdeauna text (din .resx); iconițele sunt decorative
   (`aria-hidden="true"`).

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


/* ==========================================================================
   1. BAZA
   ========================================================================== */

.ps-badge {
  --ps-badge-bg: var(--ps-surface-alt);
  --ps-badge-fg: var(--ps-text-ui);
  --ps-badge-bd: transparent;
  --ps-badge-radius: var(--ps-radius-control);
  --ps-badge-px: var(--ps-space-10);
  --ps-badge-py: var(--ps-space-2);
  --ps-badge-font: var(--ps-type-btn-sm);              /* 12px/600  [PROPUS] */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-5);
  max-width: 100%;
  padding: var(--ps-badge-py) var(--ps-badge-px);
  border: var(--ps-border-width) solid var(--ps-badge-bd);
  border-radius: var(--ps-badge-radius);
  background: var(--ps-badge-bg);
  color: var(--ps-badge-fg);
  font: var(--ps-badge-font);
  line-height: var(--ps-lh-tight);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.ps-badge > .ps-icon-glyph,
.ps-badge > .material-symbols-outlined {
  font-size: var(--ps-icon-16);
  flex: none;
}
.ps-badge > svg { width: var(--ps-icon-16); height: var(--ps-icon-16); flex: none; }

/* eticheta se poate strânge când textul e lung */
.ps-badge--truncat {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}


/* ==========================================================================
   2. VARIANTE DE FEEDBACK  [PROPUS] — perechile de culori din DESIGN-SYSTEM §2.5
   ========================================================================== */

.ps-badge--succes  { --ps-badge-bg: var(--ps-success-bg); --ps-badge-fg: var(--ps-success); }
.ps-badge--info    { --ps-badge-bg: var(--ps-info-bg);    --ps-badge-fg: var(--ps-secondary-strong); }
.ps-badge--atentie { --ps-badge-bg: var(--ps-warning-bg); --ps-badge-fg: var(--ps-warning); }
.ps-badge--eroare  { --ps-badge-bg: var(--ps-danger-bg);  --ps-badge-fg: var(--ps-danger); }
.ps-badge--neutru  { --ps-badge-bg: var(--ps-surface-alt); --ps-badge-fg: var(--ps-text-ui);
                     --ps-badge-bd: var(--ps-border); }

/* variantă doar cu contur, pe fundaluri colorate  [PROPUS] */
.ps-badge--outline {
  --ps-badge-bg: transparent;
  --ps-badge-bd: currentColor;
}


/* ==========================================================================
   3. VARIANTE DESENATE ÎN FIGMA
   ========================================================================== */

/* --- chip tooltip „Pagină anunțuri" — 146 × 40  [FIGMA] --------------- */
.ps-badge--chip {
  --ps-badge-bg: var(--ps-primary-soft-hover);         /* var(--ps-c-green-50) */
  --ps-badge-fg: var(--ps-green-ps);                   /* var(--ps-c-green-700) */
  --ps-badge-bd: color-mix(in srgb, var(--ps-green-dark) 20%, transparent);  /* rgb(var(--ps-rgb-green-800) / .2) */
  --ps-badge-px: var(--ps-space-15);
  --ps-badge-py: var(--ps-space-15);
  --ps-badge-font: var(--ps-type-body-medium);         /* 14px/500 */
}

/* --- chip de secțiune — h 40, 13px/500 uppercase  [FIGMA] ------------- */
.ps-badge--sectiune {
  --ps-badge-bg: transparent;
  --ps-badge-fg: var(--ps-text-ui);                    /* #515151 */
  --ps-badge-px: var(--ps-space-20);
  --ps-badge-py: var(--ps-space-10);
  --ps-badge-font: var(--ps-type-btn);                 /* 13px/500 */
  min-height: 40px;
  text-transform: uppercase;                           /* textul rămâne natural în .resx */
}

/* --- „Verificat" — text + verified_user 20px  [FIGMA] ----------------- */
.ps-badge--verificat {
  --ps-badge-bg: transparent;
  --ps-badge-fg: var(--ps-c-green-verified);           /* var(--ps-c-green-verified) */
  --ps-badge-px: 0;
  --ps-badge-py: 0;
  --ps-badge-font: var(--ps-type-body-medium);         /* 14px/500 */
  cursor: default;                                     /* este stare, nu buton */
}
.ps-badge--verificat > .ps-icon-glyph,
.ps-badge--verificat > .material-symbols-outlined { font-size: var(--ps-icon-20); }

/* --- „Promovat" ------------------------------------------------------
   În design cardul promovat se distinge DOAR prin umbra portocalie
   (`--ps-shadow-promoted`), fără etichetă vizibilă. Marcajul textual este
   obligatoriu pentru cititoarele de ecran:

     <span class="ps-sr-only">Anunț promovat</span>

   Varianta vizibilă de mai jos este [PROPUS] — de folosit doar dacă
   designerul confirmă că e nevoie de etichetă.
   --------------------------------------------------------------------- */
.ps-badge--promovat {
  --ps-badge-bg: color-mix(in srgb, var(--ps-promoted) 18%, transparent);
  --ps-badge-fg: var(--ps-warning);                    /* #EE9612 — contrast mai bun decât #FF9900 */
  --ps-badge-bd: color-mix(in srgb, var(--ps-promoted) 45%, transparent);
  text-transform: uppercase;
}

/* --- contor numeric (notificări) — 16 × 16, Roboto 10/14  [PROPUS] ---- */
.ps-badge--numeric {
  --ps-badge-bg: var(--ps-green-link);                 /* var(--ps-c-green-600) */
  --ps-badge-fg: var(--ps-text-inverse);
  --ps-badge-radius: var(--ps-radius-full);
  --ps-badge-px: var(--ps-space-3);
  --ps-badge-py: 0;
  --ps-badge-font: var(--ps-type-micro);               /* Roboto 500 / 10px / 14px */
  min-width: var(--ps-icon-16);
  height: var(--ps-icon-16);
}

/* contor ancorat în colțul unui buton-iconiță (clopoțelul din navbar) */
.ps-badge-anchor { position: relative; display: inline-flex; }
.ps-badge-anchor > .ps-badge--numeric {
  position: absolute;
  top: calc(var(--ps-space-2) * -1);
  right: calc(var(--ps-space-2) * -1);
  pointer-events: none;
}


/* ==========================================================================
   4. PILL-URI DE FILTRARE  [PROPUS]
   --------------------------------------------------------------------------
   Filtrele active afișate deasupra rezultatelor, fiecare cu buton de eliminare.
   Construite exclusiv din tokeni existenți.
   ========================================================================== */

.ps-badge--filtru {
  --ps-badge-bg: var(--ps-primary-soft);               /* var(--ps-c-green-30) */
  --ps-badge-fg: var(--ps-green-ps);
  --ps-badge-bd: var(--ps-primary);
  --ps-badge-px: var(--ps-space-10);
  --ps-badge-py: var(--ps-space-5);
  --ps-badge-font: var(--ps-type-body);
  gap: var(--ps-space-5);
}
.ps-badge__inchide {
  display: grid;
  place-items: center;
  width: var(--ps-icon-16);
  height: var(--ps-icon-16);
  padding: 0;
  border: 0;
  border-radius: var(--ps-radius-full);
  background: none;
  color: inherit;
  cursor: pointer;
  transition: var(--ps-transition-color);
}
.ps-badge__inchide > .ps-icon-glyph,
.ps-badge__inchide > .material-symbols-outlined { font-size: var(--ps-icon-16); }
.ps-badge__inchide:hover { background: var(--ps-danger); color: var(--ps-text-inverse); }
.ps-badge__inchide:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-focus-color);
  outline-offset: 1px;
}

.ps-badge-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-space-10);
  min-width: 0;
}


/* ==========================================================================
   5. TITLU DE SECȚIUNE CU CHIP ÎNTRE DOUĂ LINII — .ps-sectiune-titlu
   --------------------------------------------------------------------------
   spec-detaliu-anunt.md §3.7. Static, non-interactiv.  [FIGMA]
   ========================================================================== */

.ps-sectiune-titlu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ps-space-10);
  width: 100%;
  max-width: 600px;                                    /* [FIGMA] fluid pe ecrane mici */
}
.ps-sectiune-titlu::before,
.ps-sectiune-titlu::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--ps-border);
}
.ps-sectiune-titlu__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--ps-space-10) var(--ps-space-20);
  border-radius: var(--ps-radius-control);
  font: var(--ps-type-btn);                            /* 13px/500  [FIGMA] */
  color: var(--ps-text-ui);
  text-transform: uppercase;
  text-align: center;
}
.ps-sectiune-titlu--centrat .ps-sectiune-titlu__chip { align-self: center; }