/* ==========================================================================
   BookingsMed — Profil de clinica
   Necesita bm-tokens.css incarcat inainte.
   ========================================================================== */

.bm-cl { padding: var(--bm-sp-8) 0 var(--bm-sp-12); background: #F4F8FC; font-family: var(--bm-font-sans); }

.bm-cl__wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--bm-sp-5);
}

/* --------------------------------------------------------------------------
   Antet: galerie + informatii
   -------------------------------------------------------------------------- */

/* Galeria si informatiile sunt in acelasi card alb. Cardul e pe grila, iar
   coloanele sunt cele doua zone din interiorul lui. */
.bm-cl__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bm-sp-6);
  align-items: start;
  margin-bottom: var(--bm-sp-8);
  padding: var(--bm-sp-6);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-lg);
  box-shadow: var(--bm-shadow-sm);
}

.bm-cl__head > * { min-width: 0; }

/* --- Galerie ---------------------------------------------------------------- */

.bm-gal__main {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--bm-r-lg);
  background: var(--bm-surface);
  box-shadow: var(--bm-shadow-sm);
}

.bm-gal__main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bm-gal__price {
  position: absolute;
  left: var(--bm-sp-4);
  top: var(--bm-sp-4);
  padding: var(--bm-sp-2) var(--bm-sp-4);
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal-500);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: #fff;
}

.bm-gal__thumbs {
  display: flex;
  gap: var(--bm-sp-2);
  margin-top: var(--bm-sp-3);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: var(--bm-sp-1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bm-gal__thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }

.bm-gal__thumb {
  flex: 0 0 84px;
  height: 62px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--bm-r-sm);
  background: var(--bm-surface);
  cursor: pointer;
  transition: border-color var(--bm-dur) var(--bm-ease);
}

.bm-gal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-gal__thumb:hover { border-color: var(--bm-teal-300); }
.bm-gal__thumb.is-on { border-color: var(--bm-teal-500); }
.bm-gal__thumb:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); }

/* --- Informatii -------------------------------------------------------------- */

/* Informatiile nu mai au card propriu: sunt deja in cardul comun. */

/* Banda de cifre e deja pe fundal alb, in interiorul cardului: ii lasam doar
   linia de sus si de jos, ca sa nu iasa card in card. */
.bm-cl__info .bm-cl__stats {
  background: #F7FAFD;
  border-color: var(--bm-line-soft);
}

.bm-cl__name {
  display: flex;
  align-items: center;
  gap: var(--bm-sp-2);
  margin: 0 0 var(--bm-sp-3);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bm-navy-700);
}

.bm-cl__check { flex: 0 0 auto; width: 20px; height: 20px; color: var(--bm-teal-500); }

.bm-cl__desc { margin: 0 0 var(--bm-sp-3); font-size: var(--bm-text-base); line-height: 1.6; color: var(--bm-ink-500); }

/* Taiata la sase randuri, cu estompare la baza. */
.bm-cl__desc[data-clamped="true"] {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bm-cl__more {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-sp-1);
  margin: 0 0 var(--bm-sp-4);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: var(--bm-teal-600);
  cursor: pointer;
}

.bm-cl__more:hover { color: var(--bm-teal-700); text-decoration: underline; }
.bm-cl__more:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); border-radius: var(--bm-r-sm); }
.bm-cl__more svg { transition: transform var(--bm-dur) var(--bm-ease); }
.bm-cl__more.is-open svg { transform: rotate(180deg); }

/* `display` din clasa invinge atributul `hidden`, care are doar
   specificitatea foii implicite a browserului. */
.bm-cl__more[hidden] { display: none !important; }

.bm-cl__where {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-sp-2);
  margin: 0 0 var(--bm-sp-5);
  font-size: var(--bm-text-sm);
  color: var(--bm-ink-500);
}

.bm-cl__where svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

.bm-cl__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--bm-sp-4);
  padding: var(--bm-sp-5) var(--bm-sp-4);
  margin-bottom: var(--bm-sp-5);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-md);
  text-align: center;
}

.bm-cl__stat { min-width: 0; }
.bm-cl__stat svg { width: 22px; height: 22px; color: var(--bm-teal-500); }
.bm-cl__stat-v { display: block; margin-top: var(--bm-sp-2); font-size: var(--bm-text-md); font-weight: 700; color: var(--bm-navy-700); }
.bm-cl__stat-k { display: block; margin-top: 2px; font-size: var(--bm-text-xs); color: var(--bm-ink-500); }

.bm-cl__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bm-sp-4); }

.bm-cl__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-sp-2);
  padding: var(--bm-sp-3) var(--bm-sp-5);
  border: 0;
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal-500);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-base);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bm-dur) var(--bm-ease);
}

.bm-cl__btn:hover { background: var(--bm-teal-600); color: #fff; text-decoration: none; }
.bm-cl__btn:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); }
.bm-cl__btn svg { width: 16px; height: 16px; }

.bm-cl__btn--ghost {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  color: var(--bm-ink-700);
}

.bm-cl__btn--ghost:hover {
  background: var(--bm-teal-50);
  border-color: var(--bm-teal-300);
  color: var(--bm-teal-700);
}

.bm-cl__share { display: flex; align-items: center; gap: var(--bm-sp-2); font-size: var(--bm-text-sm); color: var(--bm-ink-500); }

.bm-cl__share a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bm-r-sm);
  background: var(--bm-teal-500);
  color: #fff;
  text-decoration: none;
}

.bm-cl__share a:hover { opacity: .85; color: #fff; }
.bm-cl__share svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Sectiuni
   Fiecare zona a paginii sta in propriul card alb.
   -------------------------------------------------------------------------- */

.bm-sec {
  padding: var(--bm-sp-6);
  margin-bottom: var(--bm-sp-5);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-lg);
  box-shadow: var(--bm-shadow-sm);
}

/* Pentru file, care isi au propriul chenar interior. */
.bm-sec--flush { padding: 0; overflow: hidden; }
.bm-sec--flush .bm-tabs { border: 0; border-radius: 0; margin: 0; }

/* --- Argumente de incredere --------------------------------------------------
   Patru carduri separate, nu unul unificat. Marja de jos vine de la `.bm-sec`,
   deci o anulam si o punem pe container. */

.bm-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--bm-sp-4);
  margin-bottom: var(--bm-sp-5);
}

/* Carduri mai joase, cu fundal pastel. Fiecare are nuanta lui, luata din
   paleta existenta — nu culori noi, ca sa ramana in ton cu restul. */
.bm-trust__item {
  display: flex;
  gap: var(--bm-sp-3);
  align-items: center;
  min-width: 0;
  margin-bottom: 0;
  padding: var(--bm-sp-4);
  border: 0;
  box-shadow: none;
}

.bm-trust__item:nth-child(1) { background: #E8F6F8; }
.bm-trust__item:nth-child(2) { background: #EAF3FB; }
.bm-trust__item:nth-child(3) { background: #EDF1F9; }
.bm-trust__item:nth-child(4) { background: #E9F5F1; }

.bm-trust__item .bm-trust__icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .8);
}

.bm-trust__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bm-r-sm);
  background: var(--bm-teal-50);
  color: var(--bm-teal-500);
}

.bm-trust__t { display: block; font-size: var(--bm-text-sm); font-weight: 600; line-height: 1.3; color: var(--bm-navy-700); }
/* Descrierea taiata la doua randuri, ca toate cardurile sa aiba aceeasi
   inaltime indiferent cat de lung e textul. */
.bm-trust__n {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  /* Doua randuri intotdeauna, chiar daca textul incape pe unul: altfel
     cardurile ies de inaltimi diferite cand sunt asezate in coloana. */
  min-height: calc(1.45em * 2);
  font-size: var(--bm-text-xs);
  line-height: 1.45;
  color: var(--bm-ink-700);
}

/* --- Lista de servicii -------------------------------------------------------- */

.bm-srv { margin: 0; padding: 0; list-style: none; }

/* Randuri alternate: alb, apoi o nuanta foarte deschisa, si tot asa.
   Peste ele, o linie subtire de separare. */
.bm-srv__row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  gap: var(--bm-sp-4);
  align-items: center;
  padding: var(--bm-sp-4);
  border-radius: var(--bm-r-sm);
  border-bottom: 1px solid var(--bm-line-soft);
  transition: background-color var(--bm-dur) var(--bm-ease),
              box-shadow var(--bm-dur) var(--bm-ease);
}

/* Ultimul rand nu are linie: cardul se termina oricum acolo. */
.bm-srv__row:last-child { border-bottom: 0; }

.bm-srv__row:nth-child(even) { background: #F4F8FC; }

.bm-srv__row:hover {
  background: var(--bm-teal-50);
  box-shadow: inset 3px 0 0 var(--bm-teal-500);
}

.bm-srv__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: var(--bm-r-sm);
  background: var(--bm-teal-50);
  color: var(--bm-teal-500);
}

.bm-srv__ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-srv__txt { min-width: 0; }

.bm-srv__name {
  display: block;
  font-size: var(--bm-text-base);
  font-weight: 600;
  color: var(--bm-navy-700);
  text-decoration: none;
}

.bm-srv__name:hover { color: var(--bm-teal-600); }

.bm-srv__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: var(--bm-text-sm);
  line-height: 1.5;
  color: var(--bm-ink-500);
}

.bm-srv__dur { display: block; margin-top: 2px; font-size: var(--bm-text-xs); color: var(--bm-ink-400); }

.bm-srv__pret { text-align: right; white-space: nowrap; }
.bm-srv__pret small { display: block; font-size: var(--bm-text-xs); color: var(--bm-ink-400); }
.bm-srv__pret b { font-size: var(--bm-text-md); font-weight: 700; color: var(--bm-teal-600); }

/* Tine locul sumei cand pretul lipseste. Nu e teal, ca sa nu fie citit
   drept pret: e doar starea in care se afla pretul. */
.bm-srv__cerere {
  display: block;
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: var(--bm-ink-500);
}

.bm-srv__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-sp-2);
  padding: var(--bm-sp-2) var(--bm-sp-4);
  /* De cand butonul deschide o fereastra, e un <button>, nu un <a>: fara
     resetarile astea primeste bordura si fontul implicite ale browserului,
     plus regulile pentru `button` din main.css. */
  border: 0 !important;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  cursor: pointer;
  font-family: var(--bm-font-sans);
  line-height: 1.4;
  border-radius: var(--bm-r-sm);
  background: var(--bm-teal-500);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--bm-dur) var(--bm-ease);
}

.bm-srv__btn:focus { outline: 0; }
.bm-srv__btn:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring) !important; }

.bm-srv__btn:hover { background: var(--bm-teal-600); color: #fff; text-decoration: none; }

/* Titlul celui de-al doilea grup, cu spatiu deasupra. */
.bm-cl__chead--sus { margin-top: var(--bm-sp-8); }

/* --- Despre + harta ------------------------------------------------------------ */

.bm-cl__harta { overflow: hidden; border-radius: var(--bm-r-md); }
.bm-cl__harta iframe { display: block; width: 100% !important; height: 320px !important; border: 0 !important; }
.bm-cl__adr { margin: var(--bm-sp-3) 0; font-size: var(--bm-text-sm); color: var(--bm-ink-500); }

/* Awards stins, cand clinica nu are distinctii. */
.bm-cl__stat--gol { opacity: .45; }
.bm-cl__stat--gol svg { color: var(--bm-ink-400); }
.bm-cl__stat--gol .bm-cl__stat-v { color: var(--bm-ink-500); }

/* --------------------------------------------------------------------------
   Continut + bara laterala
   -------------------------------------------------------------------------- */

/* Fara bara de reclame: o singura coloana, pe toata latimea. */
.bm-cl__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-sp-6);
  align-items: start;
}

.bm-cl__body > * { min-width: 0; }

.bm-cl__h2 {
  position: relative;
  margin: 0 0 var(--bm-sp-4);
  padding-bottom: var(--bm-sp-2);
  font-size: var(--bm-text-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bm-navy-700);
}

.bm-cl__h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal-500);
}

/* --- File (tabs) --------------------------------------------------------------- */

.bm-tabs {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-md);
  overflow: hidden;
  margin-bottom: var(--bm-sp-8);
}

.bm-tabs__nav {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--bm-line-soft);
  scrollbar-width: none;
}

.bm-tabs__nav::-webkit-scrollbar { display: none; }

.bm-tabs__btn {
  flex: 0 0 auto;
  padding: var(--bm-sp-4) var(--bm-sp-5);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: 500;
  color: var(--bm-ink-500);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--bm-dur) var(--bm-ease), border-color var(--bm-dur) var(--bm-ease);
}

.bm-tabs__btn:hover { color: var(--bm-teal-600); }
.bm-tabs__btn[aria-selected="true"] { color: var(--bm-navy-700); font-weight: 600; border-bottom-color: var(--bm-teal-500); }
.bm-tabs__btn:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); }

.bm-tabs__panel { padding: var(--bm-sp-6); }
.bm-tabs__panel[hidden] { display: none; }

/* Textul vine din administrare, cu marcaj propriu. Ii dam doar ritmul. */
.bm-prose { font-size: var(--bm-text-base); line-height: 1.7; color: var(--bm-ink-500); }
.bm-prose p { margin: 0 0 var(--bm-sp-3); }
.bm-prose p:last-child { margin-bottom: 0; }
.bm-prose img { max-width: 100%; height: auto; border-radius: var(--bm-r-sm); }
.bm-prose h1, .bm-prose h2, .bm-prose h3 { margin: var(--bm-sp-5) 0 var(--bm-sp-2); font-size: var(--bm-text-md); font-weight: 600; color: var(--bm-navy-700); }
.bm-prose ul, .bm-prose ol { margin: 0 0 var(--bm-sp-3); padding-left: var(--bm-sp-5); }
.bm-prose li { margin-bottom: var(--bm-sp-1); }
.bm-prose table { width: 100%; border-collapse: collapse; }

/* Textul din fila About are lungimi foarte diferite: unele clinici pun doua
   randuri, altele un articol intreg. Il taiem la o inaltime fixa si il
   estompam la baza, ca sa se vada ca urmeaza text. */
.bm-prose--taiat[data-clamped="true"] {
  position: relative;
  max-height: 340px;
  overflow: hidden;
}

.bm-prose--taiat[data-clamped="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 92%);
}

.bm-more {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-sp-2);
  margin-top: var(--bm-sp-4);
  padding: var(--bm-sp-2) var(--bm-sp-4);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-pill);
  background: var(--bm-surface);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: var(--bm-teal-600);
  cursor: pointer;
  transition: border-color var(--bm-dur) var(--bm-ease), background-color var(--bm-dur) var(--bm-ease);
}

.bm-more:hover { border-color: var(--bm-teal-300); background: var(--bm-teal-50); }
.bm-more:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); }
.bm-more svg { transition: transform var(--bm-dur) var(--bm-ease); }
.bm-more.is-open svg { transform: rotate(180deg); }

/* `display` din clasa invinge atributul `hidden`. */
.bm-more[hidden] { display: none !important; }
.bm-prose td, .bm-prose th { padding: var(--bm-sp-2); border-bottom: 1px solid var(--bm-line-soft); }

/* --- Liste de servicii / patologii ---------------------------------------------- */

.bm-slist { display: grid; gap: var(--bm-sp-3); margin: 0; padding: 0; list-style: none; }

.bm-slist li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bm-sp-4);
  padding: var(--bm-sp-3) var(--bm-sp-4);
  background: #F7FAFD;
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-sm);
  font-size: var(--bm-text-sm);
  color: var(--bm-ink-700);
}

.bm-slist b { flex: 0 0 auto; font-weight: 600; color: var(--bm-teal-600); white-space: nowrap; }

/* Tratamentele atarna de specialitatea de deasupra lor. Retragerea si linia
   din stanga arata legatura fara sa fie nevoie de o lista imbricata — care
   ar fi stricat spatierea uniforma a grilei. */
.bm-slist__sub {
  margin-left: var(--bm-sp-5);
  border-left: 2px solid var(--bm-teal-300) !important;
  background: var(--bm-surface) !important;
  color: var(--bm-ink-500) !important;
}

@media (max-width: 575.98px) {
  .bm-slist__sub { margin-left: var(--bm-sp-3); }
}

/* --- Bara laterala ---------------------------------------------------------------- */

/* Reclamele vin gata randate din model, cu marcajul vechi: file Bootstrap,
   caruseluri owl si imagini fara limita de latime. Le tinem in coloana —
   altfel se revarsa peste continut si peste marginea paginii. */
.bm-cl__side {
  display: grid;
  gap: var(--bm-sp-4);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bm-cl__side > * { min-width: 0; max-width: 100%; overflow: hidden; }

.bm-cl__side img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--bm-r-md);
  display: block;
}

/* Containerele Bootstrap din interior au latimi si margini proprii. */
.bm-cl__side .container,
.bm-cl__side .row,
.bm-cl__side [class^="col-"],
.bm-cl__side [class*=" col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.bm-cl__side .widget { margin: 0; }

/* --- Reclamele, ca slider vertical -------------------------------------------
   Vin grupate cate patru intr-un carusel owl care nu se initializeaza, deci
   apareau toate una sub alta si lasau coloana din stanga goala pe jumatate.
   `display: contents` dizolva gruparea, ca fiecare reclama sa devina un slide
   de sine statator. */
.bm-cl__ads { position: relative; }

.bm-cl__ads .item { display: contents; }

.bm-cl__ads__track {
  display: flex;
  flex-direction: column;
  gap: var(--bm-sp-4);
  /* Inaltimea o calculeaza scriptul, din inaltimea reala a doua reclame.
     Valoarea de aici e doar plasa de siguranta daca JS nu ruleaza. */
  max-height: 820px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bm-cl__ads__track::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Doua reclame vizibile, fiecare la aceeasi inaltime. `contain` pastreaza
   bannerul intreg — au proportii diferite si `cover` le-ar taia. */
/* Proportie de afis, ca bannerele portret sa umple spatiul. `contain` le
   pastreaza intregi — au text pe ele, iar `cover` ar taia din el. */
.bm-cl__ads .product-item {
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-md);
  overflow: hidden;
}

.bm-cl__ads .product-item .carousel-thumb,
.bm-cl__ads .product-item a { display: block; height: 100%; }

.bm-cl__ads .product-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

.bm-cl__ads__nav {
  display: flex;
  justify-content: center;
  gap: var(--bm-sp-2);
  margin-top: var(--bm-sp-3);
}
.bm-cl__side .section-padding { padding: 0 !important; }

/* Filele widget-ului de reclame: patru iconuri mici deasupra bannerelor.
   Nu spun nimic vizitatorului, asa ca le scoatem. Bannerele raman. */
.bm-cl__side .nav-tabs { display: none; }

/* --------------------------------------------------------------------------
   Carusele (doctori, clinici sugerate)
   -------------------------------------------------------------------------- */

.bm-cl__carousel { margin-bottom: var(--bm-sp-8); }

.bm-cl__chead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-sp-4);
}

.bm-cl__cnav { display: flex; gap: var(--bm-sp-2); flex: 0 0 auto; }

.bm-cl__cbtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--bm-line);
  border-radius: 50%;
  background: var(--bm-surface);
  color: var(--bm-teal-600);
  cursor: pointer;
  transition: border-color var(--bm-dur) var(--bm-ease), opacity var(--bm-dur) var(--bm-ease);
}

.bm-cl__cbtn:hover { border-color: var(--bm-teal-300); background: var(--bm-teal-50); }
.bm-cl__cbtn[disabled] { opacity: .35; cursor: default; }
.bm-cl__cbtn:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); }
.bm-cl__cbtn svg { width: 16px; height: 16px; }

/* --- Clinicile sugerate ------------------------------------------------------
   Patru pe rand, nu trei: sunt doar sugestii, nu continutul principal al
   paginii, si nu au de ce sa domine. Cardul mai ingust face si cadrul mai
   scund. `contain` pastreaza siglele intregi — multe clinici au sigla, nu
   fotografie, iar `cover` le-ar mari ca sa umple cadrul. */
.bm-cl__carousel--clinici .bm-card2__img {
  aspect-ratio: 16 / 10;
  background: var(--bm-surface);
  border-bottom: 1px solid var(--bm-line-soft);
}

.bm-cl__carousel--clinici .bm-card2__img img {
  object-fit: contain;
  object-position: center;
  padding: var(--bm-sp-3);
}

/* Texte mai mici, pe masura cardului */

.bm-cl__track {
  display: flex;
  gap: var(--bm-sp-4);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* Toate cardurile la inaltimea celui mai inalt. */
  align-items: stretch;
  padding: 4px 4px var(--bm-sp-3);
  margin: -4px -4px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bm-cl__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Patru carduri vizibile. Dupa scoaterea reclamelor, coloana ocupa toata
   latimea, deci incap patru fara sa fie inghesuite. */
.bm-cl__track > * { flex: 0 0 calc((100% - 3 * var(--bm-sp-4)) / 4); scroll-snap-align: start; }

.bm-card2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-md);
  text-decoration: none;
  transition: box-shadow var(--bm-dur) var(--bm-ease), transform var(--bm-dur) var(--bm-ease);
}

.bm-card2:hover { box-shadow: var(--bm-shadow-md); transform: translateY(-2px); text-decoration: none; }
/* `display: block` e obligatoriu: elementul e un <span>, iar `aspect-ratio`
   nu se aplica pe elemente inline. Fara el fiecare poza isi pastra inaltimea
   proprie si cardurile ieseau de marimi diferite. */
.bm-card2__img {
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  background: var(--bm-sky-50);
  overflow: hidden;
}

/* `cover` umple cadrul: pozele doctorilor au proportii foarte diferite —
   unele portret, altele patrate — si altfel ar ramane benzi albe. */
.bm-card2__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.bm-card2__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--bm-sp-3); }
.bm-card2__name { display: block; font-size: var(--bm-text-sm); font-weight: 600; line-height: 1.3; color: var(--bm-navy-700); }
.bm-card2__note { display: block; margin-top: 2px; font-size: var(--bm-text-xs); color: var(--bm-ink-500); }

.bm-card2__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--bm-sp-2);
  font-size: var(--bm-text-xs);
  font-weight: 600;
  color: var(--bm-ink-700);
}

.bm-card2__stars svg { width: 12px; height: 12px; color: #F5A623; }

.bm-card2__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-sp-1);
  /* `auto` impinge butonul la baza cardului. Fara el, un doctor fara pret are
     un rand mai putin si butonul lui urca mai sus decat al celorlalti. */
  margin-top: auto;
  padding-top: var(--bm-sp-3);
  padding: var(--bm-sp-2) var(--bm-sp-4);
  border: 1px solid var(--bm-teal-300);
  border-radius: var(--bm-r-pill);
  font-size: var(--bm-text-xs);
  font-weight: 600;
  color: var(--bm-teal-600);
}

.bm-card2:hover .bm-card2__cta { background: var(--bm-teal-500); border-color: var(--bm-teal-500); color: #fff; }
.bm-card2__cta svg { width: 13px; height: 13px; }

/* --- Carduri de serviciu ------------------------------------------------------
   Ca celelalte carduri, plus pastila de pret peste poza. */
.bm-serv .bm-card2__img { position: relative; }

.bm-serv__price {
  position: absolute;
  left: var(--bm-sp-3);
  top: var(--bm-sp-3);
  padding: var(--bm-sp-1) var(--bm-sp-3);
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal-500);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: #fff;
}

.bm-serv__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--bm-sp-2);
  font-size: var(--bm-text-xs);
  line-height: 1.5;
  color: var(--bm-ink-500);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .bm-cl__track > * { flex-basis: calc((100% - 2 * var(--bm-sp-4)) / 3); }
}

@media (max-width: 900px) {
  .bm-cl__head { grid-template-columns: minmax(0, 1fr); }
  .bm-srv__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: var(--bm-sp-3); }
  .bm-srv__pret { grid-column: 1 / -1; text-align: left; }
  .bm-srv__btn { grid-column: 1 / -1; justify-content: center; }
  .bm-cl__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .bm-cl { padding: var(--bm-sp-6) 0 var(--bm-sp-8); }
  .bm-cl__head { padding: var(--bm-sp-4); }
  .bm-cl__wrap { padding: 0 var(--bm-sp-4); }
  .bm-cl__name { font-size: 1.3rem; }
  .bm-cl__track > * { flex-basis: calc((100% - var(--bm-sp-4)) / 2); }
  .bm-tabs__panel { padding: var(--bm-sp-4); }
  .bm-cl__btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Ferestrele modale

   Toate cele opt modale ale paginii au clasa `.modal.login`, deci un singur
   set de reguli le acopera. Marcajul lor e cel vechi, pastrat intact ca sa
   continue sa functioneze contact_me.js, jqBootstrapValidation si Bootstrap.
   Stilizam doar aspectul.

   Nu atingem `display`, `opacity` sau `transform`: pe acelea le comanda
   Bootstrap ca sa deschida si sa inchida fereastra.
   ========================================================================== */

.modal.login .modal-content {
  border: 0;
  border-radius: var(--bm-r-lg);
  box-shadow: var(--bm-shadow-lg);
  font-family: var(--bm-font-sans);
  overflow: hidden;
}

.modal.login .modal-header {
  align-items: center;
  padding: var(--bm-sp-5) var(--bm-sp-6);
  border-bottom: 1px solid var(--bm-line-soft) !important;
}

.modal.login .modal-title {
  font-size: var(--bm-text-lg);
  font-weight: 600;
  color: var(--bm-navy-700);
}

/* Butonul de inchidere: patratul cu × devine un cerc discret. */
.modal.login .close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bm-line-soft);
  opacity: 1;
  font-size: 20px;
  line-height: 1;
  color: var(--bm-ink-500);
  text-shadow: none;
  transition: background-color var(--bm-dur) var(--bm-ease), color var(--bm-dur) var(--bm-ease);
}

.modal.login .close:hover { background: var(--bm-danger-bg); color: var(--bm-danger); opacity: 1; }
.modal.login .close:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); }

.modal.login .modal-body { padding: var(--bm-sp-6); }
.modal.login .form-group { margin-bottom: var(--bm-sp-4); }

.modal.login .form-control {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  padding: var(--bm-sp-3) !important;
  background: var(--bm-surface) !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: var(--bm-r-sm) !important;
  box-shadow: none !important;
  font-family: var(--bm-font-sans) !important;
  font-size: var(--bm-text-base) !important;
  line-height: 1.5 !important;
  color: var(--bm-ink-900) !important;
  transition: border-color var(--bm-dur) var(--bm-ease), box-shadow var(--bm-dur) var(--bm-ease);
}

.modal.login .form-control::placeholder { color: var(--bm-ink-400); }

.modal.login .form-control:focus {
  outline: 0;
  border-color: var(--bm-teal-500) !important;
  box-shadow: var(--bm-focus-ring) !important;
}

.modal.login textarea.form-control { min-height: 130px; resize: vertical; }

/* Campul de fisier: butonul nativ al browserului arata diferit in fiecare
   browser si nu se poate stiliza. Il ascundem si folosim eticheta ca buton. */
/* Bootstrap pozitioneaza eticheta absolut, in interiorul unui container de
   inaltime fixa. Fara `static` si `height: auto`, eticheta se suprapune peste
   bifa de acord de dedesubt. */
.modal.login .custom-file {
  display: block;
  position: static !important;
  width: 100%;
  height: auto !important;
  margin-bottom: var(--bm-sp-4);
}
.modal.login .custom-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.modal.login .custom-file-label {
  position: static !important;
  height: auto !important;
  display: flex;
  align-items: center;
  gap: var(--bm-sp-2);
  padding: var(--bm-sp-3);
  border: 1px dashed var(--bm-line);
  border-radius: var(--bm-r-sm);
  background: #F7FAFD;
  font-size: var(--bm-text-sm);
  color: var(--bm-ink-500);
  cursor: pointer;
  transition: border-color var(--bm-dur) var(--bm-ease), background-color var(--bm-dur) var(--bm-ease);
}

/* Bootstrap adauga un buton „Browse" prin ::after; eticheta noastra il inlocuieste. */
.modal.login .custom-file-label::after { display: none !important; }
.modal.login .custom-file-label:hover { border-color: var(--bm-teal-300); background: var(--bm-teal-50); }
.modal.login .custom-file-input:focus-visible + .custom-file-label { box-shadow: var(--bm-focus-ring); }

/* Bifa de acord */
/* Randul cu bifa de acord */
.modal.login .form-check,
.modal.login label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: var(--bm-sp-2);
  margin-bottom: var(--bm-sp-4);
  font-size: var(--bm-text-sm);
  line-height: 1.5;
  color: var(--bm-ink-700);
}

.modal.login input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 2px var(--bm-sp-2) 0 0;
  border: 1.5px solid var(--bm-line);
  border-radius: 4px;
  background-color: var(--bm-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  vertical-align: top;
  cursor: pointer;
}

.modal.login input[type="checkbox"]:checked {
  background-color: var(--bm-teal-500);
  border-color: var(--bm-teal-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}

.modal.login input[type="checkbox"]:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); }

.modal.login .btn-primary {
  width: 100%;
  padding: var(--bm-sp-3) var(--bm-sp-6) !important;
  border: 0 !important;
  border-radius: var(--bm-r-pill) !important;
  background: var(--bm-teal-500) !important;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-md) !important;
  font-weight: 600 !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background-color var(--bm-dur) var(--bm-ease);
}

.modal.login .btn-primary:hover { background: var(--bm-teal-600) !important; }
.modal.login .btn-primary:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring) !important; }

.modal.login .help-block.with-errors {
  margin: var(--bm-sp-1) 0 0;
  font-size: var(--bm-text-xs);
  color: var(--bm-danger) !important;
}

/* Mesajele de confirmare si eroare puse de contact_me.js */
.modal.login [id^="contactSent"] {
  margin-top: var(--bm-sp-4);
  padding: var(--bm-sp-3);
  border-radius: var(--bm-r-sm);
  font-size: var(--bm-text-sm);
  text-align: center;
  background: var(--bm-success-bg);
  color: var(--bm-success);
}

.modal.login [id^="contactSentError"] { background: var(--bm-danger-bg); color: var(--bm-danger); }
.modal.login [id^="contactSent"] br { display: none; }

@media (max-width: 575.98px) {
  .modal.login .modal-body { padding: var(--bm-sp-5); }
  .modal.login .modal-header { padding: var(--bm-sp-4) var(--bm-sp-5); }
}

/* ==========================================================================
   Butonul de detalii si fereastra lui
   ========================================================================== */

.bm-srv__act { display: flex; align-items: center; gap: var(--bm-sp-2); }

.bm-srv__det {
  padding: var(--bm-sp-2) var(--bm-sp-4);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-sm);
  background: var(--bm-surface);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: var(--bm-ink-700);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--bm-dur) var(--bm-ease), color var(--bm-dur) var(--bm-ease);
}

.bm-srv__det:hover { border-color: var(--bm-teal-300); color: var(--bm-teal-700); }
.bm-srv__det:focus-visible { outline: 0; box-shadow: var(--bm-focus-ring); }

.bm-servm__poza {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--bm-r-md);
  margin-bottom: var(--bm-sp-4);
}

.bm-servm__meta { display: flex; align-items: baseline; gap: var(--bm-sp-4); margin-bottom: var(--bm-sp-3); }
.bm-servm__pret { font-size: var(--bm-text-lg); font-weight: 700; color: var(--bm-teal-600); }
.bm-servm__durata { font-size: var(--bm-text-sm); color: var(--bm-ink-500); }
.bm-servm__desc { margin: 0 0 var(--bm-sp-5); font-size: var(--bm-text-base); line-height: 1.65; color: var(--bm-ink-500); }

/* ==========================================================================
   Formularul de rezervare (modalbook)

   Isi incarca stilul din `modalbook/css/style.css`, la linia 794 din view —
   adica DUPA aceasta foaie. De-aceea selectorii pornesc de la `.modal.login`
   plus `!important` pe proprietatile vizuale: altfel castiga foaia lui.
   Marcajul si scripturile raman neatinse.
   ========================================================================== */

.modal.login .form-register,
.modal.login .page-content { background: var(--bm-surface) !important; }

.modal.login .form-register .inner { padding: var(--bm-sp-6) !important; }

.modal.login .form-register .form-holder,
.modal.login .form-register .form-holder-2 { margin-bottom: var(--bm-sp-4) !important; }

.modal.login .form-register .special-label,
.modal.login .form-register label {
  font-family: var(--bm-font-sans) !important;
  font-size: var(--bm-text-sm) !important;
  font-weight: 500 !important;
  color: var(--bm-ink-700) !important;
}

.modal.login .form-register input[type="text"],
.modal.login .form-register input[type="email"],
.modal.login .form-register input[type="tel"],
.modal.login .form-register input[type="date"],
.modal.login .form-register select,
.modal.login .form-register textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  padding: var(--bm-sp-3) !important;
  background: var(--bm-surface) !important;
  border: 1px solid var(--bm-line) !important;
  border-radius: var(--bm-r-sm) !important;
  font-family: var(--bm-font-sans) !important;
  font-size: var(--bm-text-base) !important;
  color: var(--bm-ink-900) !important;
  box-shadow: none !important;
}

.modal.login .form-register input:focus,
.modal.login .form-register select:focus,
.modal.login .form-register textarea:focus {
  outline: 0 !important;
  border-color: var(--bm-teal-500) !important;
  box-shadow: var(--bm-focus-ring) !important;
}

/* Pasii de sus */
.modal.login .form-register .steps,
.modal.login .form-register ul.nav { background: var(--bm-surface) !important; }

.modal.login .form-register .btn-common,
.modal.login .form-register button[type="submit"],
.modal.login .form-register .next,
.modal.login .form-register .previous {
  border-radius: var(--bm-r-pill) !important;
  background: var(--bm-teal-500) !important;
  border: 0 !important;
  font-family: var(--bm-font-sans) !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.modal.login .form-register .btn-common:hover,
.modal.login .form-register .next:hover { background: var(--bm-teal-600) !important; }

.modal.login .form-register table { width: 100%; border-collapse: collapse; }
.modal.login .form-register td,
.modal.login .form-register th {
  padding: var(--bm-sp-2) !important;
  border-bottom: 1px solid var(--bm-line-soft) !important;
  font-size: var(--bm-text-sm);
}