.servicii-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.section.asp-section-electronic, .asp-content-wrap.section{padding-block:var(--spacing-32);}

/* ============================================================
   Левая колонка
   ============================================================ */
.servicii-sidebar {
  width: 100%;
}

.servicii-sidebar__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-20) 0 var(--spacing-16);
  background: var(--white);
  border: 1px solid #d9d9d9;
  border-radius: var(--border-radius-16);
}

/* ── Pill-фильтр persoane ── */
.servicii-sidebar__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  padding: 0 var(--spacing-20);
  justify-content: space-between;
}

.servicii-sidebar__pill {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px var(--spacing-12);
  border-radius: 999px;
  border: 1.5px solid #99bced;
  background: var(--white);
  color: #0058d2;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.servicii-sidebar__pill:hover {
  background: var(--blue-sky-100);
  color: #0058d2;
}

.servicii-sidebar__pill.is-active {
  background: #00357e;
  border-color: #00357e;
  color: var(--white);
}

/* ── Навигация: группы → категории ── */
.servicii-sidebar__nav {
  display: flex;
  flex-direction: column;
}

.servicii-sidebar__group + .servicii-sidebar__group {
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-12);
}

.servicii-sidebar__group + .servicii-sidebar__group .servicii-sidebar__group-title {
  border-top: 1px solid #d9d9d9;
  padding-top: var(--spacing-20);
}

.servicii-sidebar__group-title {
  margin: 0 0 var(--spacing-8);
  padding: 0 var(--spacing-24);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #757575;
}

.servicii-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.servicii-sidebar__link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-height: 48px;
  padding: var(--spacing-12) var(--spacing-16) var(--spacing-12) var(--spacing-24);
  border-left: 3px solid transparent;
  background: var(--white);
  color: #383838;
  text-decoration: none;
  transition: background 0.15s ease;
}

.servicii-sidebar__link:hover {
  background: var(--gray-100);
}

.servicii-sidebar__icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: #121212;
}

.servicii-sidebar__icon svg {
  width: 20px;
  height: 20px;
}

.servicii-sidebar__label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #383838;
}

.servicii-sidebar__link.is-active {
  background: var(--blue-sky-100);
  border-left-color: #0058d2;
}

.servicii-sidebar__link.is-active .servicii-sidebar__label,
.servicii-sidebar__link.is-active .servicii-sidebar__icon {
  color: #0058d2;
  font-weight: 500;
}

/* ============================================================
   Правая часть: заголовок, Ghid, фильтры
   ============================================================ */
.servicii-content__head {
  display: block;
}

.servicii-content__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  color: #0058d2;
}

/* ── Toolbar: фильтры слева + Ghid справа (Figma) ── */
.servicii-content__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex-wrap: wrap;
}

/* ── Ghidul cetățeanului ── */
.servicii-ghid {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-shrink: 0;
}

.servicii-ghid__label {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #383838;
}

.servicii-ghid__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #0058d2;
}

.servicii-ghid__btn--pdf {
  color: #d92d20;
}

/* ── Строка фильтров Toate / La ghișeu / La distanță ── */
.servicii-content__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.servicii-content__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px var(--spacing-16);
  border-radius: 999px;
  border: 1.5px solid #99bced;
  background: var(--white);
  color: #0058d2;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.servicii-content__filter:hover {
  background: var(--blue-sky-100);
  color: #0058d2;
}

.servicii-content__filter.is-active {
  background: #00357e;
  border-color: #00357e;
  color: var(--white);
}

/* ============================================================
   Аккордеон услуг
   ============================================================ */
.servicii-accordion {
  border-top: 1px solid #d9d9d9;
}

/* Одна секция (у категории нет подкатегорий) — заголовок секции дублировал
   бы h1 страницы, поэтому его нет: просто список услуг с отступом сверху
   вместо места, которое раньше занимала кнопка-аккордеон. */
.servicii-accordion__body--static {
  padding-top: var(--spacing-32);
}

@media (max-width: 767px) {
  .servicii-accordion__body--static {
    padding-top: var(--spacing-24);
  }
}

/* ============================================================
   Список услуг (карточка)
   ============================================================ */
.servicii-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
}

.servicii-list__card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-24);
  border-radius: var(--border-radius-16);
  text-decoration: none;
  transition: background 0.15s ease;
}

/*.servicii-list__card:hover {
  background: var(--gray-100);
}*/

.servicii-list__card:hover{
    background-color: var(--gray-130);
    /*box-shadow: var(--drop-shadow-200);*/
	/*border: 1px solid #d9d9d9;*/
}

.servicii-list__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-width: 0;
}

.servicii-list__row {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.servicii-list__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-desktop-heading-xs-size);
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text-primary);
}

.servicii-list__denumire {
  color: #929292!important;
}

.servicii-list__summary {
  margin-top: 0;
  color: var(--color-text-secondary) !important;
}

/* ── Бейджи ── */
/* В одной строке с title — справа (title растёт); при переносе — слева.
   max-width: 100% + shrink — теги сами переносятся, если не влезают. */
.servicii-list__badges {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  max-width: 100%;
}

/* Servicii electronice: карточка-div + «Solicită» новой строкой. */
.servicii-list__card--electronice {
  color: inherit;
}

.servicii-list__card--electronice .servicii-list__title a {
  color: inherit;
}

.servicii-list__action {
  display: block;
  margin-top: var(--spacing-4);
}

/* ── Пустое состояние ── */
.servicii-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-40) var(--spacing-16);
  text-align: center;
}

.servicii-empty__icon {
  color: #757575;
}

.servicii-empty__text {
  margin: 0;
  color: #757575;
  font-size: 16px;
}

/* ── AJAX-загрузка ── */
.servicii-content.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ============================================================
   Мобильная навигация (по умолчанию скрыта, показывается < 992px)
   ============================================================ */
.servicii-mobile-nav {
  display: none;
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 991px) {
  .servicii-content__title {
    font-size: 24px;
    line-height: 32px;
  }

  /* Toolbar: кнопки на всю ширину, Ghid — отдельная строка по центру. */
  .servicii-content__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-12);
  }

  .servicii-content__filters {
    width: 100%;
    justify-content: space-between;
    gap: var(--spacing-8);
  }


  .servicii-content__filter {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  .servicii-ghid {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--border-radius-full);
    background: var(--blue-sky-100);
  }
  
  .servicii-accordion__button {
    font-size: 18px;
    line-height: 26px;
  }

  /* Левый сайдбар прячем — навигация уходит наверх контента. */
  .page--servicii .asp-sidebar--first {
    display: none;
  }

  .servicii-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-16);
  }

  .servicii-mobile-nav .servicii-sidebar__pills {
    padding: 0;
    justify-content: space-between;
    gap: var(--spacing-8);
  }

  .servicii-mobile-nav .servicii-sidebar__pill {
    flex: 1 1 auto;
  }

  .servicii-mobile-nav__label {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #383838;
  }

  .servicii-mobile-nav__select {
    position: relative;
  }

  .servicii-mobile-nav__toggle {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    min-height: 48px;
    padding: var(--spacing-12) var(--spacing-16);
    background: var(--white);
    border: 1px solid #d9d9d9;
    border-radius: var(--border-radius-8);
    cursor: pointer;
    text-align: left;
  }

  .servicii-mobile-nav__current {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-12);
    min-width: 0;
  }

  .servicii-mobile-nav__current .servicii-sidebar__icon {
    color: #0058d2;
  }

  .servicii-mobile-nav__current-label {
    overflow: hidden;
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #121212;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .servicii-mobile-nav__chevron {
    flex-shrink: 0;
    display: inline-flex;
    color: #383838;
    transition: transform 0.15s ease;
  }

  .servicii-mobile-nav__toggle[aria-expanded="true"] .servicii-mobile-nav__chevron {
    transform: rotate(180deg);
  }

  .servicii-mobile-nav__panel {
    margin-top: var(--spacing-8);
    background: var(--white);
    border: 1px solid #d9d9d9;
    border-radius: var(--border-radius-8);
    overflow: hidden;
  }

  .servicii-mobile-nav__panel[hidden] {
    display: none;
  }

  .servicii-mobile-nav__panel .servicii-sidebar__nav {
    padding: var(--spacing-8) 0;
  }

  .servicii-mobile-nav__panel .servicii-sidebar__group-title {
    padding: var(--spacing-8) var(--spacing-16) 0;
  }

  .servicii-mobile-nav__panel .servicii-sidebar__link {
    padding-left: var(--spacing-16);
  }
 
}