@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — BLOCURI DE PAGINĂ (tema globală)
   --------------------------------------------------------------------------
   Tiparele care se repetă în paginile portate: antetul de pagină, panoul cu
   antet, lista de detalii, starea goală, pagina de confirmare, pașii unui
   flux, grila de carduri media și bara de unelte de deasupra listelor.

     .ps-antet-pagina   _AntetPagina.cshtml (AntetPaginaVm)
     .ps-confirmare     _Confirmare.cshtml  (ConfirmareVm)
     .ps-gol            _StareGoala.cshtml  (StareGoalaVm)
   ========================================================================== */


/* ==========================================================================
   1. ANTET DE PAGINĂ
   ========================================================================== */

.ps-antet-pagina {
  position: relative;
  isolation: isolate;
  padding-block: clamp(28px, 3vw, 56px) clamp(24px, 2.4vw, 40px);
  background: var(--ps-bg);
  border-block-end: 1px solid var(--ps-border-soft);
  overflow: hidden;
}

/* varianta plină: panou verde care plutește pe fundal (pagini de prezentare, oferte) */
.ps-antet-pagina--verde {
  inline-size: auto;
  margin: 12px var(--ps-gutter-panou) 0;
  border-block-end: 0;
  border-radius: var(--ps-radius-panel);
  background: var(--ps-panou-verde);
  color: var(--ps-text-inverse);
}
.ps-antet-pagina--verde :focus-visible { outline-color: var(--ps-c-white); }
/* butonul principal verde s-ar pierde pe aurora: devine alb cu text închis */
.ps-antet-pagina--verde .ps-btn--primar {
  --ps-btn-bg: var(--ps-c-white);
  --ps-btn-fg: var(--ps-c-green-ink);
  background-image: none;
}
.ps-antet-pagina--verde .ps-btn--primar:hover { --ps-btn-bg: var(--ps-green-selection); box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--ps-green-on-dark) 60%, transparent); }

.ps-antet-pagina__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 32px;
}

.ps-antet-pagina__text { display: grid; gap: 10px; min-width: 0; }

/* pictograma și eticheta („eyebrow”) pe același rând */
.ps-antet-pagina__eticheta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ps-antet-pagina__eticheta > .ps-eyebrow { margin: 0; }

.ps-antet-pagina__pictograma {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--ps-radius-control);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-card);
  color: var(--ps-green-action);
  font-size: 22px;
}
.ps-antet-pagina--verde .ps-antet-pagina__pictograma {
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  color: var(--ps-c-white);
}

.ps-antet-pagina__titlu {
  margin: 0;
  font: var(--ps-type-h1);
  letter-spacing: var(--ps-ls-title);
  color: inherit;
}
.ps-antet-pagina--mare .ps-antet-pagina__titlu { font: var(--ps-type-hero); }

.ps-antet-pagina__subtitlu {
  max-inline-size: 70ch;
  margin: 0;
  font: var(--ps-type-lead);
  color: var(--ps-text-ui);
}
.ps-antet-pagina--verde .ps-antet-pagina__subtitlu { color: rgba(255, 255, 255, .88); }
.ps-antet-pagina--verde .ps-eyebrow { color: var(--ps-green-on-dark); }

.ps-antet-pagina__actiuni { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 767.98px) {
  .ps-antet-pagina__inner { grid-template-columns: 1fr; align-items: start; }
}

/* --- breadcrumb -------------------------------------------------------- */
.ps-firimituri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font: var(--ps-fw-medium) 13px/1.3 var(--ps-font-sans);
  color: var(--ps-text-faint-aa);
}
.ps-firimituri li { display: inline-flex; align-items: center; gap: 4px; }
.ps-firimituri li + li::before {
  content: "chevron_right";
  font-family: var(--ps-font-icons);
  font-size: 16px;
  line-height: 1;
  opacity: .6;
}
.ps-firimituri a { color: inherit; text-decoration: none; border-radius: 6px; }
.ps-firimituri a:hover { color: var(--ps-green-action); }
.ps-firimituri [aria-current="page"] { color: var(--ps-text); }
.ps-antet-pagina--verde .ps-firimituri,
.ps-antet-pagina--verde .ps-firimituri [aria-current="page"] { color: rgba(255, 255, 255, .9); }
.ps-antet-pagina--verde .ps-firimituri a:hover { color: var(--ps-c-white); }


/* ==========================================================================
   2. CORPUL PAGINII
   ========================================================================== */

.ps-corp-pagina {
  padding-block: clamp(24px, 3vw, 48px) clamp(40px, 5vw, 80px);
}
.ps-corp-pagina > * + * { margin-block-start: 24px; }

.ps-coloane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 24px;
  align-items: start;
}
.ps-coloane--stanga { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
.ps-coloane__lipit { position: sticky; inset-block-start: calc(var(--ps-navbar-h) + 20px); }
@media (max-width: 991.98px) {
  .ps-coloane,
  .ps-coloane--stanga { grid-template-columns: minmax(0, 1fr); }
  .ps-coloane__lipit { position: static; }
}

.ps-ingust { max-inline-size: 760px; margin-inline: auto; }
.ps-ingust--sm { max-inline-size: 560px; }


/* ==========================================================================
   3. PANOU (card de secțiune cu antet)
   ========================================================================== */

.ps-panou {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--ps-border-soft);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-card);
}
.ps-panou--plat { box-shadow: none; }
.ps-panou--tint { background: var(--ps-surface-tint); border-color: rgb(var(--ps-rgb-green-500) / .12); box-shadow: none; }
.ps-panou--atentie { background: #FFF8EC; border-color: rgba(238, 150, 18, .28); box-shadow: none; }
.ps-panou--pericol { background: #FFF5F5; border-color: rgba(214, 9, 9, .2); box-shadow: none; }

.ps-panou__antet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.ps-panou__titlu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: var(--ps-fw-semibold) 18px/1.25 var(--ps-font-sans);
  letter-spacing: var(--ps-ls-tight);
}
.ps-panou__titlu .ps-icon-glyph {
  display: inline-grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--ps-radius-control);
  background: var(--ps-green-selection);
  color: var(--ps-green-link);
  font-size: 20px;
}
.ps-panou__descriere { margin: 0; color: var(--ps-text-ui); font: var(--ps-type-body); }
.ps-panou__subsol {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--ps-border-soft);
}


/* ==========================================================================
   4. LISTĂ DE DETALII (dl)
   ========================================================================== */

.ps-detalii {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 10px 24px;
  margin: 0;
}
.ps-detalii dt { color: var(--ps-text-faint-aa); font: var(--ps-fw-medium) 13px/1.4 var(--ps-font-sans); }
.ps-detalii dd { margin: 0; color: var(--ps-text); font: var(--ps-fw-medium) 14px/1.4 var(--ps-font-sans); overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .ps-detalii { grid-template-columns: 1fr; gap: 2px; }
  .ps-detalii dd + dt { margin-block-start: 10px; }
}


/* ==========================================================================
   5. STARE GOALĂ
   ========================================================================== */

.ps-gol {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(32px, 5vw, 64px) 20px;
  border: 1px dashed var(--ps-border-input);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  text-align: center;
}
.ps-gol__pictograma {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--ps-radius-card);
  background: var(--ps-bg);
  box-shadow: inset 0 0 0 1px rgb(var(--ps-rgb-green-500) / .14);
  color: var(--ps-green-action);
  font-size: 32px;
}
.ps-gol__titlu { margin: 0; font: var(--ps-fw-semibold) 18px/1.3 var(--ps-font-sans); }
.ps-gol__mesaj { max-inline-size: 48ch; margin: 0; color: var(--ps-text-ui); font: var(--ps-type-body); }


/* ==========================================================================
   6. PAGINĂ DE CONFIRMARE (cerere trimisă, comandă plasată, cont șters…)
   ========================================================================== */

.ps-confirmare {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-inline-size: 620px;
  margin: clamp(32px, 6vw, 80px) auto;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--ps-border-soft);
  border-radius: var(--ps-radius-panel);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-card-soft);
  text-align: center;
}
.ps-confirmare__pictograma {
  --ps-conf-culoare: var(--ps-green-action);
  display: grid;
  place-items: center;
  inline-size: 76px;
  block-size: 76px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ps-conf-culoare) 12%, white);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--ps-conf-culoare) 6%, white);
  color: var(--ps-conf-culoare);
  font-size: 40px;
}
.ps-confirmare--info .ps-confirmare__pictograma    { --ps-conf-culoare: #0093C4; }
.ps-confirmare--atentie .ps-confirmare__pictograma { --ps-conf-culoare: var(--ps-orange); }
.ps-confirmare--eroare .ps-confirmare__pictograma  { --ps-conf-culoare: var(--ps-red); }

@media (prefers-reduced-motion: no-preference) {
  .ps-confirmare__pictograma { animation: ps-confirmare-pop .6s var(--ps-ease-spring) both; }
}
@keyframes ps-confirmare-pop { from { transform: scale(.4); opacity: 0; } }

.ps-confirmare__titlu { margin: 0; font: var(--ps-type-h1); letter-spacing: var(--ps-ls-title); }
.ps-confirmare__mesaj { margin: 0; color: var(--ps-text-ui); font: var(--ps-type-lead); }
.ps-confirmare__detalii { inline-size: 100%; text-align: start; }
.ps-confirmare__actiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 8px; }


/* ==========================================================================
   7. PAȘI (fluxuri în mai mulți pași)
   ========================================================================== */

.ps-pasi {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ps-pas;
}
.ps-pasi__pas {
  flex: 1 1 0;
  display: grid;
  gap: 8px;
  min-inline-size: 0;
  color: var(--ps-text-faint-aa);
  font: var(--ps-fw-medium) 12.5px/1.25 var(--ps-font-sans);
  counter-increment: ps-pas;
}
.ps-pasi__pas::before {
  content: "";
  block-size: 4px;
  border-radius: 4px;
  background: var(--ps-border);
}
.ps-pasi__pas[data-stare="facut"]::before,
.ps-pasi__pas[aria-current="step"]::before { background: var(--ps-primary); }
.ps-pasi__pas[aria-current="step"] { color: var(--ps-text); font-weight: var(--ps-fw-semibold); }
.ps-pasi__pas[data-stare="facut"] { color: var(--ps-text-ui); }
@media (max-width: 575.98px) {
  .ps-pasi__pas:not([aria-current="step"]) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}


/* ==========================================================================
   8. GRILĂ DE CARDURI MEDIA (cărți, evenimente, laboratoare, articole)
   ========================================================================== */

.ps-grila-carduri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ps-grila-min, 260px), 100%), 1fr));
  gap: var(--ps-grila-gap, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-grila-carduri--mici { --ps-grila-min: 200px; }
.ps-grila-carduri--mari { --ps-grila-min: 340px; }

.ps-card-media {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  block-size: 100%;
  border: 1px solid var(--ps-border-soft);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--ps-duration-slow) var(--ps-ease),
              transform var(--ps-duration-slow) var(--ps-ease-spring),
              border-color var(--ps-duration) var(--ps-ease);
}
.ps-card-media:hover,
.ps-card-media:focus-within {
  border-color: rgb(var(--ps-rgb-green-500) / .25);
  box-shadow: var(--ps-shadow-hover);
  transform: translateY(-3px);
}
.ps-card-media__imagine {
  position: relative;
  aspect-ratio: var(--ps-card-media-raport, 16 / 10);
  background: var(--ps-surface-muted);
  overflow: hidden;
}
.ps-card-media--carte .ps-card-media__imagine { --ps-card-media-raport: 3 / 4; }
.ps-card-media--patrat .ps-card-media__imagine { --ps-card-media-raport: 1 / 1; }
.ps-card-media__imagine img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .6s var(--ps-ease-out);
}
.ps-card-media--contain .ps-card-media__imagine img { object-fit: contain; padding: 16px; }
.ps-card-media:hover .ps-card-media__imagine img { transform: scale(1.04); }
.ps-card-media__eticheta { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; }
.ps-card-media__corp { display: grid; gap: 8px; flex: 1 1 auto; align-content: start; padding: 16px 18px; }
.ps-card-media__titlu { margin: 0; font: var(--ps-fw-semibold) 16px/1.3 var(--ps-font-sans); letter-spacing: -.01em; }
.ps-card-media__titlu a { color: inherit; text-decoration: none; }
.ps-card-media__titlu a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ps-card-media__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--ps-text-faint-aa);
  font: var(--ps-fw-medium) 12.5px/1.3 var(--ps-font-sans);
}
.ps-card-media__meta .ps-icon-glyph { font-size: 16px; vertical-align: -3px; }
.ps-card-media__text { margin: 0; color: var(--ps-text-ui); font: var(--ps-type-body); }
.ps-card-media__subsol {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 16px;
}
.ps-card-media__pret { font: var(--ps-fw-bold) 17px/1.2 var(--ps-font-sans); color: var(--ps-text); }


/* ==========================================================================
   9. BARĂ DE UNELTE (căutare + filtre + acțiuni deasupra listelor)
   ========================================================================== */

.ps-bara-unelte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--ps-border-soft);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-xs);
}
.ps-bara-unelte__cautare { flex: 1 1 260px; min-inline-size: 0; }
.ps-bara-unelte__spatiu { flex: 1 1 auto; }
.ps-bara-unelte .ps-input,
.ps-bara-unelte .ps-select { min-height: 40px; box-shadow: none; }


/* ==========================================================================
   10. STATISTICI (cifre mari, carduri bento)
   ========================================================================== */

.ps-statistica {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--ps-border-soft);
  border-radius: var(--ps-radius-card);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-xs);
}
.ps-statistica__eticheta { color: var(--ps-text-faint-aa); font: var(--ps-fw-medium) 13px/1.3 var(--ps-font-sans); }
.ps-statistica__valoare {
  font: var(--ps-fw-bold) clamp(24px, 1.2vw + 16px, 34px)/1.05 var(--ps-font-sans);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ps-text);
}
.ps-statistica__nota { color: var(--ps-text-ui); font: var(--ps-type-small); }