/* Оболочка: раскладка страницы, шапка, подвал, мобильное меню, переключатель языка, города, тост. */

.layout {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--page-gap) var(--gutter) var(--gutter);
}
.layout__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
}
@media (max-width: 759px) {
  .layout { gap: var(--space-2); padding: var(--gutter-mobile) var(--gutter-mobile) 0; }
  .layout__main { gap: var(--space-2); }
}

/* ---------- Шапка ---------- */
.app-header {
  display: flex;
  align-items: stretch;
  gap: var(--page-gap);
  height: var(--header-height);
}
.app-header__bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 var(--gutter);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.app-header__burger {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 0 11px;
  border-radius: var(--radius-lg);
}
.app-header__burger i { display: block; height: 2px; border-radius: 1px; background: var(--text-primary); }
.app-header__burger:hover { background: var(--surface-secondary); }
.app-header__burger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-header__logo { display: flex; flex: none; }
.app-header__nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 28px;
  white-space: nowrap;
}
.app-header__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font: 400 15px/1.2 var(--font-primary);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease);
}
.app-header__link:hover { color: var(--text-primary); }
.app-header__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.app-header__link[aria-current='page'] { color: var(--text-primary); font-weight: 500; }
.app-header__dd { position: relative; display: flex; align-items: center; align-self: stretch; }
.app-header__dd:hover .app-header__dd-menu,
.app-header__dd:focus-within .app-header__dd-menu { opacity: 1; visibility: visible; transform: none; }
.app-header__dd-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -18px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 14px 36px rgba(6, 8, 18, 0.16), 0 0 0 1px var(--border-subtle);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 150ms;
}
/* Мостик над меню: курсор идёт от пункта вниз и не теряет наведение в зазоре 12px. */
.app-header__dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.app-header__dd-item {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  font: 400 15px/1.2 var(--font-primary);
  color: var(--text-primary);
}
.app-header__dd-item:hover { background: var(--surface-secondary); color: var(--brand-primary-pressed); }
.app-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  min-width: 0;
  font: 400 13px/1.2 var(--font-primary);
  white-space: nowrap;
}
.app-header__phone { display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.app-header__phone:hover { color: var(--brand-primary-pressed); }
.app-header__sep { width: 1px; height: 24px; background: var(--border-subtle); }
.app-header__icon {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}
.app-header__icon:hover { background: var(--surface-secondary); }
.app-header__icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-header__icon + .app-header__icon { margin-left: -16px; }
.app-header__badge {
  position: absolute;
  top: 4px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 500;
}
.app-header__user { display: none; }
.app-header .app-header__account { flex: none; height: 100%; max-width: 220px; }
.app-header__account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ширина, на которой навигация уходит в бургер, — из дизайна (1200). */
@media (max-width: 1200px) {
  .app-header__burger { display: flex; }
  .app-header__nav { display: none; }
  .app-header .app-header__wide { display: none; }
}
@media (max-width: 759px) {
  .app-header__bar { gap: var(--space-3); padding: 0 var(--space-3); }
  .app-header__logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .app-header__tools { flex: none; gap: 2px; }
  .app-header .app-header__lang { display: none; }
  .app-header__icon + .app-header__icon { margin-left: 0; }
  .app-header__user { display: flex; }
  .app-header .app-header__account { display: none; }
}

/* ---------- Логотип ---------- */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo--center { justify-content: center; }
.brand-logo__mark { display: block; height: var(--brand-logo-height, 22px); width: auto; }

/* ---------- Переключатель языка ---------- */
.lang {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-secondary);
}
.lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 40px;
  padding: 0 var(--space-2);
  border-radius: 7px;
  font: 600 13px/1 var(--font-primary);
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lang__item:hover { color: var(--text-primary); }
.lang__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lang__item[aria-current='true'] { background: var(--color-white); color: var(--text-primary); box-shadow: 0 1px 2px rgba(6, 8, 18, 0.12); }
.lang--dark { background: rgba(255, 255, 255, 0.1); }
.lang--dark .lang__item { color: rgba(255, 255, 255, 0.6); }
.lang--dark .lang__item:hover { color: var(--color-white); }
.lang--dark .lang__item[aria-current='true'] { background: var(--color-white); color: var(--color-ink); }

/* ---------- Города ---------- */
.city-menu { position: relative; }
.city-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  list-style: none;
  cursor: pointer;
  font: 400 13px/1.2 var(--font-primary);
  color: var(--text-primary);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.city-menu__toggle::-webkit-details-marker { display: none; }
.city-menu__toggle:hover { color: var(--brand-primary-pressed); }
.city-menu__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.city-menu__chevron { color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease); }
.city-menu[open] .city-menu__chevron { transform: rotate(180deg); }
.city-menu--dark .city-menu__toggle { font-size: 14px; color: rgba(255, 255, 255, 0.65); }
.city-menu--dark .city-menu__toggle:hover { color: var(--color-white); }
.city-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: -12px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--text-primary);
  box-shadow: 0 14px 36px rgba(6, 8, 18, 0.16), 0 0 0 1px var(--border-subtle);
}
.city-menu--dark .city-menu__panel { top: auto; bottom: calc(100% + 6px); left: 0; }
.city-menu__item {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  font: 400 15px/1.2 var(--font-primary);
  color: var(--text-primary);
}
.city-menu__item:hover { background: var(--surface-secondary); color: var(--brand-primary-pressed); }
.city-menu__item--all { margin-top: var(--space-1); color: var(--brand-primary-pressed); }

/* ---------- Подвал ---------- */
.app-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
  padding: 28px 32px;
  border-radius: var(--radius-box);
  background: var(--surface-dark);
  color: var(--color-white);
  overflow: hidden;
}
.app-footer::before {
  content: '';
  position: absolute;
  left: 32px;
  right: 32px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--brand-primary);
}
.app-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.app-footer__brand { display: flex; flex-direction: column; gap: var(--space-2); }
.app-footer__logo { display: flex; }
.app-footer__tagline { font-size: 15px; color: rgba(255, 255, 255, 0.6); }
.app-footer__call {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  transition: background var(--dur-fast) var(--ease);
}
.app-footer__call:hover { background: rgba(255, 255, 255, 0.1); }
.app-footer__call:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-footer__call-text { display: flex; flex-direction: column; gap: 2px; }
.app-footer__call-text small { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.app-footer__call-text b { font-size: 20px; font-weight: 500; }
.app-footer__call-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-primary);
}
.app-footer__contacts { display: flex; flex-wrap: wrap; gap: var(--space-2) 28px; font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.app-footer__text { max-width: 520px; }
.app-footer__link { color: var(--color-white); transition: color var(--dur-fast) var(--ease); }
.app-footer__link:hover { color: var(--brand-primary); }
.app-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}
.app-footer__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.app-footer__nav a { color: rgba(255, 255, 255, 0.6); transition: color var(--dur-fast) var(--ease); }
.app-footer__nav a:hover { color: var(--color-white); }
@media (max-width: 759px) {
  .app-footer { margin: 28px calc(-1 * var(--gutter-mobile)) 0; padding: var(--space-5) var(--space-4); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
  .app-footer::before { left: var(--space-4); right: var(--space-4); }
  .app-footer__call { width: 100%; justify-content: space-between; }
  .app-footer__contacts { flex-direction: column; gap: 10px; }
  .app-footer__bottom { flex-direction: column; }
  .app-footer__nav { flex-direction: column; gap: var(--space-2); }
}

/* ---------- Мобильное меню ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-white);
  outline: none;
  animation: mobile-menu-in 180ms var(--ease);
}
@keyframes mobile-menu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mobile-menu__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--color-white);
}
.mobile-menu__logo { display: flex; }
.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--text-primary);
}
.mobile-menu__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mobile-menu__nav { padding: var(--space-4) var(--space-4) 0; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-top: var(--space-1);
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font: 400 16px/22px var(--font-primary);
  color: var(--text-primary);
}
.mobile-menu__link svg { margin-left: auto; color: var(--text-tertiary); }
.mobile-menu__link:active { background: var(--color-accent-v2); }
.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  padding: 18px;
  border-radius: var(--radius-xl);
  background: var(--surface-dark);
  color: var(--color-white);
}
.mobile-menu__phone { font-size: 22px; font-weight: 600; color: var(--color-white); }
.mobile-menu__lang { align-self: flex-start; margin-top: var(--space-3); }

/* ---------- Аккордеон ---------- */
.accordion { display: flex; flex-direction: column; }
.accordion--card { gap: var(--space-2); }
.acc-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  color: var(--text-primary);
}
.acc-item__head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.acc-item__title { flex: 1; }
.acc-item__chevron { color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease); }
.acc-item--open .acc-item__chevron { transform: rotate(180deg); }
/* Вопросы и ответы */
.acc-item--line { border-top: 1px solid var(--border-subtle); }
.acc-item--line:first-child { border-top: 0; }
.acc-item--line .acc-item__head { justify-content: space-between; min-height: 64px; font: 400 17px/22px var(--font-primary); }
.acc-item--line.acc-item--open .acc-item__head { font-weight: 500; }
.acc-item--line .acc-item__body { max-width: 720px; padding-bottom: 20px; font: 400 15px/24px var(--font-primary); color: var(--text-secondary); }
/* Группы меню */
.acc-item--card { border-radius: var(--radius-xl); background: var(--surface-secondary); overflow: hidden; }
.acc-item--card .acc-item__head { gap: var(--space-3); min-height: 60px; padding: 0 var(--space-4); font: 600 17px/22px var(--font-primary); }
.acc-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-white);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.acc-item--card.acc-item--open .acc-item__icon { background: var(--brand-primary); color: var(--color-white); }
.acc-item--card .acc-item__body { display: flex; flex-direction: column; padding: 0 var(--space-2) var(--space-2); }

/* ---------- Хлебные крошки ---------- */
.crumbs { padding: var(--space-1) 6px 0; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 14px/20px var(--font-primary); color: var(--text-tertiary); }
.crumbs__item { display: inline-flex; align-items: center; gap: 6px; }
.crumbs__link { color: var(--text-secondary); transition: color var(--dur-fast) var(--ease); }
.crumbs__link:hover { color: var(--brand-primary-pressed); }
.crumbs__current { color: var(--text-primary); }

/* ---------- Тост ---------- */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  z-index: 2000;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 759px) { .toast-region { bottom: calc(104px + env(safe-area-inset-bottom)); } }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-white);
  font: var(--font-ui-text);
  box-shadow: 0 8px 24px rgba(6, 8, 18, 0.3);
  pointer-events: auto;
  animation: toast-in var(--dur-base) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Модальное окно и шторка ---------- */
dialog.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-box);
  background: var(--color-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  display: none;
}
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal--wide { width: min(1040px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(6, 8, 18, 0.6); }
.modal__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 20px var(--space-5) 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal__title { flex: 1; font: 700 22px/26px var(--font-primary); letter-spacing: var(--tracking-tight); }
.modal__reset { display: none; font: var(--font-ui); color: var(--text-secondary); }
.modal__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--text-primary);
}
.modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--border-subtle); }
@media (max-width: 759px) {
  dialog.modal--full {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .modal__head { padding: 14px var(--space-4); }
  .modal__title { font-size: 19px; line-height: 24px; }
  .modal__reset { display: block; }
  .modal__body { padding: var(--space-4); }
  .modal__foot { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .modal__foot-reset { display: none; }
  .modal__foot .btn { flex: 1; }
}
.mobile-menu__link.router-link-exact-active { color: var(--brand-primary-pressed); }
@keyframes mobile-menu-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}