@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — BUTOANE
   --------------------------------------------------------------------------
   Referință: DESIGN-SYSTEM.md §10.1–§10.4, §11.1–§11.2
              spec-design-sheet.md §3.1–§3.4, spec-lista-anunturi.md §3.4,
              spec-login.md §3.4, spec-marketplace.md §2.5

   API: `.ps-btn` expune un set de custom properties pe care variantele le
   suprascriu. Nu se rescriu proprietățile CSS finale în variante — se schimbă
   doar tokenii locali. Toate butoanele sunt pastile cu text normal (14px/600);
   variantele schimbă culorile, mărimea și, rar, forma:

     <button class="ps-btn ps-btn--primar ps-btn--sm">…</button>
     <a class="ps-btn ps-btn--outline-albastru" href="…">…</a>

   MARCAJE
     [FIGMA]   valoare desenată în machete
     [PROPUS]  stare / valoare inexistentă în design (DESIGN-SYSTEM.md §12 pct. 10)
   ========================================================================== */


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

.ps-btn {
  /* --- tokeni locali (suprascriși de variante) --- */
  --ps-btn-h: var(--ps-control-h);              /* 44px  [FIGMA] */
  --ps-btn-min-w: auto;
  --ps-btn-px: var(--ps-space-20);
  --ps-btn-py: var(--ps-space-10);
  --ps-btn-gap: var(--ps-space-10);
  --ps-btn-radius: var(--ps-radius-full);
  --ps-btn-font: var(--ps-fw-semibold) var(--ps-fs-14)/var(--ps-lh-tight) var(--ps-font-sans);
  --ps-btn-bg: transparent;
  --ps-btn-fg: var(--ps-text-ui);
  --ps-btn-bd: transparent;
  --ps-btn-shadow: none;
  --ps-btn-focus: var(--ps-focus-color);
  --ps-btn-accent: var(--ps-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-btn-gap);
  min-height: var(--ps-btn-h);
  min-width: var(--ps-btn-min-w);
  padding: var(--ps-btn-py) var(--ps-btn-px);
  border: var(--ps-border-width) solid var(--ps-btn-bd);
  border-radius: var(--ps-btn-radius);
  background: var(--ps-btn-bg);
  box-shadow: var(--ps-btn-shadow);
  color: var(--ps-btn-fg);
  font: var(--ps-btn-font);
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: var(--ps-transition-color),
              box-shadow var(--ps-duration) var(--ps-ease),
              transform var(--ps-duration-fast) var(--ps-ease);
}

/* pe ecrane înguste textul se înfășoară în loc să lățească pagina */
@media (max-width: 575.98px) {
  .ps-btn { max-inline-size: 100%; white-space: normal; }
}

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

/* --- stări comune ------------------------------------------------------ */
.ps-btn:focus-visible {
  --ps-btn-shadow: var(--ps-focus-halo);
  outline: var(--ps-focus-width) solid var(--ps-btn-focus);
  outline-offset: var(--ps-focus-offset);
}

.ps-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }

.ps-btn:disabled,
.ps-btn[aria-disabled="true"] {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
/* linkurile dezactivate rămân focusabile, dar nu mai sunt acționabile */
a.ps-btn[aria-disabled="true"] { pointer-events: none; }

/* încărcare — DESIGN-SYSTEM §10.1: `pointer-events: none; opacity: .75`  [PROPUS] */
.ps-btn.is-loading,
.ps-btn[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  opacity: .75;
  color: transparent;
}
.ps-btn.is-loading::after,
.ps-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ps-icon-16);
  height: var(--ps-icon-16);
  margin: calc(var(--ps-icon-16) / -2) 0 0 calc(var(--ps-icon-16) / -2);
  border: 2px solid var(--ps-btn-fg);
  border-top-color: transparent;
  border-radius: var(--ps-radius-full);
  animation: ps-btn-spin .6s linear infinite;
}

@keyframes ps-btn-spin {
  to { transform: rotate(360deg); }
}

/* la `prefers-reduced-motion` regula globală din design-tokens.css oprește
   animația; inelul rămâne vizibil ca indicator static */
@media (prefers-reduced-motion: reduce) {
  .ps-btn.is-loading::after,
  .ps-btn[aria-busy="true"]::after { border-top-color: var(--ps-btn-fg); opacity: .5; }
}


/* ==========================================================================
   2. MĂRIMI
   --------------------------------------------------------------------------
   DESIGN-SYSTEM §10.1. Atenție: în machete varianta „mare" are text mai mare
   dar înălțime mai mică decât cea implicită (36–40px față de 44px) — este o
   inconsecvență a designului, păstrată aici pentru fidelitate.
   ========================================================================== */

/* 100 × 33 — „Aplică" din cardul de anunț  [FIGMA] */
.ps-btn--sm {
  --ps-btn-h: 33px;
  --ps-btn-min-w: 100px;
  --ps-btn-px: var(--ps-space-30);
  --ps-btn-font: var(--ps-fw-semibold) var(--ps-fs-13)/var(--ps-lh-tight) var(--ps-font-sans);
}

/* implicit: h 44 — „Intră în cont", „Aplică" detaliu anunț */
.ps-btn--md { --ps-btn-h: var(--ps-control-h); }

/* 200 × 40 („CAUTĂ") / 130 × 36 („Adaugă" Marketplace)  [FIGMA] */
.ps-btn--lg {
  --ps-btn-h: var(--ps-control-h-sm);
  --ps-btn-px: 26px;
  --ps-btn-font: var(--ps-fw-semibold) 15.5px/var(--ps-lh-tight) var(--ps-font-sans);
}
/* 130 × 36 — butonul „Adaugă" din cardul de produs  [FIGMA] */
.ps-btn--compact {
  --ps-btn-h: 36px;
  --ps-btn-min-w: 130px;
}
/* 200 × 50 — pill-urile mari („Toate anunțurile")  [FIGMA] */
.ps-btn--inalt {
  --ps-btn-h: 50px;
  --ps-btn-min-w: 200px;
}

/* --- formă ------------------------------------------------------------- */
.ps-btn--drept { --ps-btn-radius: var(--ps-radius-btn); }
.ps-btn--bloc  { display: flex; width: 100%; --ps-btn-min-w: 0; }


/* ==========================================================================
   3. BUTON PRIMAR — fundal plin
   ========================================================================== */

/* butoanele pline (primar, „CAUTĂ”, promo): reflex sus și umbră; la hover se ridică */
.ps-btn--primar,
.ps-btn--cauta,
.ps-btn--promo {
  --ps-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgb(var(--ps-rgb-umbra) / .12);
}
.ps-btn--primar:hover,
.ps-btn--cauta:hover,
.ps-btn--promo:hover {
  --ps-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--ps-shadow-cta-hover);
}
.ps-btn--primar:not(:disabled):hover,
.ps-btn--cauta:not(:disabled):hover,
.ps-btn--promo:not(:disabled):hover { transform: translateY(-1px); }

.ps-btn--primar {
  --ps-btn-bg: var(--ps-primary);              /* var(--ps-c-green-500)  [FIGMA] */
  --ps-btn-fg: var(--ps-primary-contrast);
  --ps-btn-bd: transparent;
  --ps-btn-focus: var(--ps-green-dark);
}
.ps-btn--primar:hover { --ps-btn-bg: var(--ps-primary-hover); }   /* var(--ps-c-green-450)  [FIGMA] „CTA Bttn HOVER" */
.ps-btn--primar:active { --ps-btn-bg: var(--ps-primary-active); } /* [PROPUS] */
.ps-btn--primar:disabled,
.ps-btn--primar[aria-disabled="true"] {
  --ps-btn-bg: var(--ps-primary-disabled);     /* [PROPUS] var(--ps-c-green-100) */
  --ps-btn-fg: var(--ps-primary-contrast);
}

/* „Ai aplicat" — confirmare persistentă  [PROPUS] DESIGN-SYSTEM §10.1 */
.ps-btn--primar.is-aplicat {
  --ps-btn-bg: var(--ps-primary-soft);
  --ps-btn-fg: var(--ps-primary);
  --ps-btn-bd: var(--ps-primary);
  pointer-events: none;
}

/* --- „CAUTĂ": verde închis cu bordură  [FIGMA] --- */
.ps-btn--cauta {
  --ps-btn-bg: var(--ps-green-ps);             /* var(--ps-c-green-700) */
  --ps-btn-fg: var(--ps-primary-contrast);
  --ps-btn-bd: var(--ps-green-dark);           /* var(--ps-c-green-800) */
  --ps-btn-focus: var(--ps-green-dark);
}

/* --- „Aplică" de pe cardul promovat  [FIGMA] --- */
.ps-btn--promo {
  --ps-btn-bg: var(--ps-green-promo);          /* var(--ps-c-green-550) */
  --ps-btn-fg: var(--ps-primary-contrast);
  --ps-btn-focus: var(--ps-green-dark);
}
.ps-btn--promo:hover  { --ps-btn-bg: var(--ps-green-link); }   /* var(--ps-c-green-600)  [FIGMA] */
.ps-btn--promo:active { --ps-btn-bg: var(--ps-green-ps); }

/* --- „Creează cont gratuit"  [FIGMA] --- */
.ps-btn--info {
  --ps-btn-bg: var(--ps-secondary);            /* #00B5EE */
  --ps-btn-fg: var(--ps-secondary-contrast);
  --ps-btn-focus: var(--ps-secondary-strong);
}
.ps-btn--info:hover  { --ps-btn-bg: var(--ps-secondary-strong); --ps-btn-shadow: var(--ps-shadow-cta-hover); }
.ps-btn--info:active { --ps-btn-shadow: none; }

/* --- acțiune distructivă  [PROPUS] --- */
.ps-btn--pericol {
  --ps-btn-bg: var(--ps-danger);
  --ps-btn-fg: var(--ps-primary-contrast);
  --ps-btn-focus: var(--ps-danger);
}
.ps-btn--pericol:hover  { --ps-btn-shadow: var(--ps-shadow-cta-hover); }
.ps-btn--pericol:active { --ps-btn-shadow: none; }

/* --- CTA cu gradient „Click aici" — 220 × 44/46  [FIGMA] --- */
.ps-btn--gradient {
  --ps-btn-min-w: 220px;
  --ps-btn-fg: var(--ps-primary-contrast);
  --ps-btn-bd: transparent;
  --ps-btn-focus: var(--ps-secondary-strong);
  background: var(--ps-gradient-cta);
}
.ps-btn--gradient:hover  { --ps-btn-shadow: var(--ps-shadow-cta-hover); }
.ps-btn--gradient:active { --ps-btn-shadow: none; }
.ps-btn--gradient:disabled,
.ps-btn--gradient[aria-disabled="true"] { background: var(--ps-border); }

/* --- pastila „Devino Partener" — 200 × 60, Inter 14/500  [FIGMA] --- */
.ps-btn--partener {
  --ps-btn-h: 60px;
  --ps-btn-min-w: 200px;
  --ps-btn-bg: var(--ps-teal-soft);            /* #A4F5F5 */
  --ps-btn-fg: var(--ps-teal-ink);             /* #006787 */
  --ps-btn-shadow: var(--ps-shadow-pill);
  --ps-btn-focus: var(--ps-teal-ink);
  font-family: var(--ps-font-alt);
  font-size: var(--ps-fs-14);
  font-weight: var(--ps-fw-medium);
  line-height: var(--ps-lh-tight);
}
.ps-btn--partener:hover  { filter: brightness(.96); }   /* [PROPUS] */


/* ==========================================================================
   4. BUTON SECUNDAR (OUTLINE) — DESIGN-SYSTEM §10.2
   --------------------------------------------------------------------------
   Fundalul de hover se calculează din accent, ca să nu introducă valori noi:
   8–12% la hover, 16–20% la active.
   ========================================================================== */

.ps-btn--outline {
  --ps-btn-accent: var(--ps-green-ps);         /* text var(--ps-c-green-700)  [FIGMA] */
  --ps-btn-bg: transparent;
  --ps-btn-fg: var(--ps-btn-accent);
  --ps-btn-bd: var(--ps-green-stroke);         /* var(--ps-c-green-100)  [FIGMA] */
  --ps-btn-focus: var(--ps-btn-accent);
}
.ps-btn--outline:hover {
  --ps-btn-bg: color-mix(in srgb, var(--ps-btn-accent) 10%, transparent);   /* [PROPUS] */
  --ps-btn-bd: var(--ps-btn-accent);
  --ps-btn-shadow: var(--ps-shadow-xs);
}
.ps-btn--outline:active {
  --ps-btn-bg: color-mix(in srgb, var(--ps-btn-accent) 18%, transparent);   /* [PROPUS] */
}
.ps-btn--outline:disabled,
.ps-btn--outline[aria-disabled="true"] {
  --ps-btn-bg: transparent;
  --ps-btn-bd: var(--ps-border);
  --ps-btn-fg: var(--ps-text-breadcrumb);
}

/* varianta cu bordură plină de la început (fără fundal verde deschis) */
.ps-btn--outline-verde {
  --ps-btn-accent: var(--ps-green-ps);
  --ps-btn-bg: transparent;
  --ps-btn-fg: var(--ps-btn-accent);
  --ps-btn-bd: var(--ps-btn-accent);
  --ps-btn-focus: var(--ps-btn-accent);
}
.ps-btn--outline-verde:hover {
  --ps-btn-bg: color-mix(in srgb, var(--ps-btn-accent) 10%, transparent);
  --ps-btn-shadow: var(--ps-shadow-xs);
}
.ps-btn--outline-verde:active {
  --ps-btn-bg: color-mix(in srgb, var(--ps-btn-accent) 18%, transparent);
}
.ps-btn--outline-verde:disabled,
.ps-btn--outline-verde[aria-disabled="true"] {
  --ps-btn-bg: transparent;
  --ps-btn-bd: var(--ps-border);
  --ps-btn-fg: var(--ps-text-breadcrumb);
}

/* „Trimite mesaj" — h 40  [FIGMA] */
.ps-btn--outline-albastru {
  --ps-btn-accent: var(--ps-secondary);        /* #00B5EE */
  --ps-btn-bd: var(--ps-btn-accent);
  --ps-btn-fg: var(--ps-btn-accent);
  --ps-btn-h: var(--ps-control-h-sm);
  --ps-btn-focus: var(--ps-btn-accent);
}

/* „Vezi profil" — pill teal 110 × 33, Inter 12/700  [FIGMA] */
.ps-btn--outline-teal {
  --ps-btn-accent: var(--ps-teal-ink);         /* #006787 */
  --ps-btn-bd: var(--ps-btn-accent);
  --ps-btn-fg: var(--ps-btn-accent);
  --ps-btn-h: 33px;
  --ps-btn-min-w: 110px;
  --ps-btn-px: var(--ps-space-30);
  --ps-btn-focus: var(--ps-btn-accent);
  font-family: var(--ps-font-alt);
  font-size: var(--ps-fs-12);
  font-weight: var(--ps-fw-bold);
  line-height: var(--ps-lh-tight);
}
/* singura variantă care se inversează complet la hover  [PROPUS] */
.ps-btn--outline-teal:hover,
.ps-btn--outline-teal:active {
  --ps-btn-bg: var(--ps-btn-accent);
  --ps-btn-fg: var(--ps-text-inverse);
}

/* „Conectează-te cu Facebook" — full-width h 44, gap 20  [FIGMA] */
.ps-btn--outline-facebook {
  --ps-btn-accent: var(--ps-c-facebook);       /* #087AFF */
  --ps-btn-bd: var(--ps-btn-accent);
  --ps-btn-fg: var(--ps-btn-accent);
  --ps-btn-gap: var(--ps-space-20);
  --ps-btn-focus: var(--ps-btn-accent);
  display: flex;
  width: 100%;
}
.ps-btn--outline-facebook > svg,
.ps-btn--outline-facebook > img { width: var(--ps-icon-24); height: var(--ps-icon-24); }

/* „Mai multe" — glass peste imagine, 200 × 50  [FIGMA] */
.ps-btn--outline-glass {
  --ps-btn-h: 50px;
  --ps-btn-min-w: 200px;
  --ps-btn-bg: var(--ps-overlay-light);
  --ps-btn-fg: var(--ps-green-surface);        /* #EFFFEF */
  --ps-btn-bd: color-mix(in srgb, var(--ps-green-surface) 50%, transparent);
  --ps-btn-focus: var(--ps-c-white);
  --ps-btn-shadow: var(--ps-shadow-card-green); /* umbra verde a butonului „Mai multe"  [FIGMA] */
  font-weight: var(--ps-fw-regular);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.ps-btn--outline-glass:hover {
  --ps-btn-bg: color-mix(in srgb, var(--ps-c-white) 22%, transparent);   /* [PROPUS] */
}


/* ==========================================================================
   5. BUTON TEXT / LINK-BUTON — DESIGN-SYSTEM §10.3
   ========================================================================== */

.ps-btn--text {
  --ps-btn-h: auto;
  --ps-btn-px: 0;
  --ps-btn-py: var(--ps-space-7);
  --ps-btn-bg: transparent;
  --ps-btn-bd: transparent;
  --ps-btn-fg: var(--ps-text-ui);
  --ps-btn-focus: var(--ps-green-link);
}

/* „Adaugă anunț" — verde, pill pregătit pentru halou  [FIGMA] */
.ps-btn--text-verde {
  --ps-btn-fg: var(--ps-green-link);           /* var(--ps-c-green-600) */
  --ps-btn-focus: var(--ps-green-link);
}
.ps-btn--text-verde:hover  { --ps-btn-fg: var(--ps-green-dark); }   /* [PROPUS] */
.ps-btn--text-verde:active { --ps-btn-fg: var(--ps-c-green-1000); } /* [PROPUS] var(--ps-c-green-1000) */
.ps-btn--text-verde:disabled,
.ps-btn--text-verde[aria-disabled="true"] {
  --ps-btn-fg: color-mix(in srgb, var(--ps-green-link) 40%, transparent);   /* [PROPUS] */
}

/* „Contul meu" — gri  [FIGMA] */
.ps-btn--text-gri {
  --ps-btn-fg: var(--ps-text-ui);
  --ps-btn-px: var(--ps-space-10);
  --ps-btn-focus: var(--ps-green-dark);
}
.ps-btn--text-gri:hover  { --ps-btn-fg: var(--ps-text); --ps-btn-bg: var(--ps-c-ink-06); }  /* [PROPUS] */
.ps-btn--text-gri:active { --ps-btn-bg: var(--ps-c-ink-12); }                               /* [PROPUS] */

/* „Filtre" — gri  [FIGMA] */
.ps-btn--text-filtre {
  --ps-btn-fg: var(--ps-text-ui);
  --ps-btn-px: var(--ps-space-10);
}
.ps-btn--text-filtre:hover { --ps-btn-bg: var(--ps-c-ink-06); }   /* [PROPUS] */

/* „Șterge toate filtrele" — text estompat  [FIGMA] */
.ps-btn--text-discret {
  --ps-btn-fg: var(--ps-text-faint-aa);
  --ps-btn-px: var(--ps-space-10);
}
.ps-btn--text-discret:hover { --ps-btn-fg: var(--ps-text); --ps-btn-bg: var(--ps-primary-soft-hover); }  /* [PROPUS] */

/* halou în locul fundalului, ca să nu se deplaseze butonul la hover
   (DESIGN-SYSTEM §10.3 — „Adaugă anunț" are padding-inline: 0)  [PROPUS] */
.ps-btn--halo:hover {
  box-shadow: 0 0 0 var(--ps-space-13) color-mix(in srgb, currentColor 10%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* subliniere la hover pentru linkuri-buton din corpul paginii  [PROPUS] */
.ps-btn--link {
  --ps-btn-h: auto;
  --ps-btn-px: 0;
  --ps-btn-py: 0;
  --ps-btn-bg: transparent;
  --ps-btn-bd: transparent;
  --ps-btn-fg: var(--ps-c-blue-link);
}
.ps-btn--link:hover { text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   6. BUTON-ICONIȚĂ — .ps-icon-btn — DESIGN-SYSTEM §10.4
   --------------------------------------------------------------------------
   24 / 30 / 40 / 50px pătrat, fundal transparent, radius 5–10px.
   Conținutul este DOAR o iconiță → `aria-label` obligatoriu.
   ========================================================================== */

.ps-icon-btn {
  --ps-icon-btn-size: 40px;                    /* [FIGMA] nu există token de 40px */
  --ps-icon-btn-glyph: var(--ps-icon-24);
  --ps-icon-btn-radius: var(--ps-radius-btn);
  --ps-icon-btn-fg: var(--ps-icon-nav);
  --ps-icon-btn-bg: transparent;
  --ps-icon-btn-bd: transparent;
  --ps-icon-btn-focus: var(--ps-primary);

  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--ps-icon-btn-size);
  height: var(--ps-icon-btn-size);
  padding: 0;
  border: var(--ps-border-width) solid var(--ps-icon-btn-bd);
  border-radius: var(--ps-icon-btn-radius);
  background: var(--ps-icon-btn-bg);
  color: var(--ps-icon-btn-fg);
  line-height: 1;
  cursor: pointer;
  transition: var(--ps-transition-color),
              transform var(--ps-duration-fast) var(--ps-ease);
}

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

/* --- mărimi  [FIGMA] --- */
.ps-icon-btn--24 { --ps-icon-btn-size: var(--ps-icon-24); --ps-icon-btn-glyph: var(--ps-icon-24); }
.ps-icon-btn--30 { --ps-icon-btn-size: var(--ps-icon-30); --ps-icon-btn-glyph: var(--ps-icon-30); }
.ps-icon-btn--40 { --ps-icon-btn-size: 40px;              --ps-icon-btn-glyph: var(--ps-icon-24); }
.ps-icon-btn--50 { --ps-icon-btn-size: 50px;              --ps-icon-btn-glyph: var(--ps-icon-30);
                   --ps-icon-btn-radius: var(--ps-radius-btn-lg); }

/* --- stări --- */
.ps-icon-btn:hover  { --ps-icon-btn-fg: var(--ps-green-action); }
.ps-icon-btn:active { transform: scale(.92); }
.ps-icon-btn:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-icon-btn-focus);
  outline-offset: var(--ps-focus-offset);
}
.ps-icon-btn:disabled,
.ps-icon-btn[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}

/* favorite / like / bookmark — starea persistentă vine din ARIA, nu din clasă */
.ps-icon-btn[aria-pressed="true"] { --ps-icon-btn-fg: var(--ps-green-link); }
.ps-icon-btn[aria-pressed="true"] > .ps-icon-glyph,
.ps-icon-btn[aria-pressed="true"] > .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ps-icon-btn--favorit[aria-pressed="true"] { --ps-icon-btn-fg: var(--ps-favorite); }  /* [PROPUS] */
.ps-icon-btn--favorit                      { --ps-icon-btn-focus: var(--ps-favorite); }

/* butonul de închidere — SINGURUL hover desenat explicit în Figma  [FIGMA] */
.ps-icon-btn--close {
  --ps-icon-btn-size: 40px;
  --ps-icon-btn-radius: var(--ps-radius-btn);
  --ps-icon-btn-bd: var(--ps-border);
  --ps-icon-btn-fg: var(--ps-icon-nav);
  --ps-icon-btn-focus: var(--ps-danger);
}
.ps-icon-btn--close:hover {
  --ps-icon-btn-bg: var(--ps-danger);          /* #D60909 */
  --ps-icon-btn-bd: var(--ps-danger);
  --ps-icon-btn-fg: var(--ps-text-inverse);
}
.ps-icon-btn--close--sm { --ps-icon-btn-size: var(--ps-icon-24); --ps-icon-btn-glyph: var(--ps-icon-20); }

/* iconiță pe fundal verde/albastru (bara de pagină, benzi) */
.ps-icon-btn--pe-brand {
  --ps-icon-btn-fg: var(--ps-text-inverse);
  --ps-icon-btn-focus: var(--ps-c-white);
}
.ps-icon-btn--pe-brand:hover { --ps-icon-btn-fg: var(--ps-text-inverse); opacity: .8; }

/* item de rail flotant — 50 × 50  [FIGMA] */
.ps-icon-btn--rail {
  --ps-icon-btn-size: 50px;
  --ps-icon-btn-glyph: var(--ps-icon-30);
  --ps-icon-btn-radius: var(--ps-radius-btn-lg);
}
.ps-icon-btn--rail:hover { --ps-icon-btn-bg: var(--ps-primary-soft-hover); }   /* [PROPUS] var(--ps-c-green-50) */


/* ==========================================================================
   7. BUTON „SUS" — .ps-btn-sus — DESIGN-SYSTEM §10.22
   --------------------------------------------------------------------------
   Cercul din colțul din dreapta jos, ca pe site-ul vechi: apare după primii
   pași de scroll (clasa `.is-visible`, din js/components/buton-sus.js) și
   urcă lin în vârful paginii.
   ========================================================================== */

.ps-btn-sus {
  position: fixed;
  inset-inline-end: clamp(16px, 2vw, 30px);
  inset-block-end: clamp(16px, 2vw, 30px);
  z-index: var(--ps-z-floating);
  display: grid;
  place-items: center;
  inline-size: 50px;
  block-size: 50px;
  border: 0;
  border-radius: var(--ps-radius-full);
  background: var(--ps-green-action);
  color: var(--ps-text-inverse);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--ps-shadow-float);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--ps-space-10)) scale(.9);
  transition: opacity var(--ps-duration-slow) var(--ps-ease),
              transform var(--ps-duration-slow) var(--ps-ease-spring),
              visibility var(--ps-duration-slow) var(--ps-ease),
              background-color var(--ps-duration) var(--ps-ease),
              box-shadow var(--ps-duration) var(--ps-ease);
}
.ps-btn-sus.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ps-btn-sus.is-visible:hover {
  background: var(--ps-primary-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--ps-shadow-cta-hover);
  transform: translateY(-2px);
}
.ps-btn-sus.is-visible:active { transform: scale(.94); }
.ps-btn-sus:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-green-dark);
  outline-offset: var(--ps-focus-offset);
}
.ps-btn-sus > .ps-icon-glyph { font-size: var(--ps-icon-30); }

@media print {
  .ps-btn-sus { display: none; }
}


/* ==========================================================================
   8. GRUPURI DE BUTOANE
   ========================================================================== */

.ps-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-space-20);
}
.ps-btn-group--tight { gap: var(--ps-space-10); }
.ps-btn-group--end   { justify-content: flex-end; }
.ps-btn-group--between { justify-content: space-between; }

/* [PROPUS] sub sm butoanele dintr-un grup devin full-width */
@media (max-width: 575.98px) {
  .ps-btn-group--stiva {
    flex-direction: column;
    align-items: stretch;
  }
  .ps-btn-group--stiva > .ps-btn { width: 100%; --ps-btn-min-w: 0; }
}