/* Layout skeleton — URDM
 *
 * Новый flex/grid layout, который со временем заменит table-based
 * 3col_leftNav.css. На этом этапе (этап 1) — только базовые классы
 * и grid-заготовка под future refactor. Существующие страницы
 * продолжают работать через table-layout (он подключается в template.html).
 *
 * Полная миграция — этап 4 плана SEASONAL_REDESIGN.
 */

/* === Reset ===
 * Браузерный body { margin: 8px } не сброшен — на МП съедает 16px ширины,
 * шапка/hero/футер не на весь viewport. Сбрасываем глобально.
 *
 * box-sizing: border-box — чтобы padding/border входили в width, а не
 * добавлялись сверху. Без этого кнопки width:100% с padding вызывают
 * горизонтальный скролл на МП.
 */
html, body {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Защита от горизонтального скролла на мобильных (<=450px).
 * На очень узких (<300px) экранах скролл допустим — для редких случаев
 * типа старых мини-телефонов или split-screen. На типичных iPhone/Android
 * (320-450px) сайт гарантированно влезает в viewport.
 *
 * overflow-x: clip вместо hidden — hidden создаёт scroll-container,
 * который ломает position: sticky у потомков (season-switcher переставал
 * прилипать). clip только прячет выходящий за viewport контент, не
 * затрагивая sticky-поведение. */
@media (min-width: 300px) and (max-width: 450px) {
  html, body {
    overflow-x: clip;
    max-width: 100vw;
  }
}

/* === Контейнер ===
 * Используется в новых компонентах. Старый #contentContainer сохраняется.
 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  box-sizing: border-box;
}

.container--narrow {
  max-width: 768px;
}

.container--wide {
  max-width: 1440px;
}

/* === Mobile-first responsive grid ===
 * .grid использует CSS Grid с авто-fit колонками.
 * На mobile (по умолчанию) — 1 колонка, на md+ — 2-3.
 */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === Flex-утилиты === */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm {
  gap: 8px;
}

.gap-md {
  gap: 16px;
}

.gap-lg {
  gap: 24px;
}

/* === Сезонный hero (заготовка для этапа 5) ===
 * Не активируется автоматически — используется в новых шаблонах.
 */
.seasonal-hero {
  position: relative;
  min-height: var(--hero-min-height);
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  color: #fff;
  padding: 40px 0;
}

.seasonal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 0;
}

.seasonal-hero > * {
  position: relative;
  z-index: 1;
}

/* === Site header (этап 3) ===
 * Новый navbar: бренд слева, auth-действия справа, mobile hamburger.
 * Цвета берутся из design tokens (var(--color-*)), наследуются от
 * сезонных тем (summer.css и т.д.) автоматически.
 *
 * Под navbar — сезонный переключатель [ЗИМОЙ] [ЛЕТОМ].
 */
.site-header {
  position: relative;
  z-index: 100;
  /* Ограничиваем header по ширине контента — как #siteInfo,
     чтобы синяя полоса navbar и season-switcher не растягивались
     на весь viewport на широких экранах. */
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Site-header больше не sticky — эту роль взял на себя .season-switcher.
   Brand + navbar прокручиваются вверх, шапка 2 (season-switcher) остаётся.
   Это даёт больше vertical space для контента при скролле. */

.site-header__brand {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* #shapka — верхняя плашка с (зимой) таймером до Нового года.
 * Раньше стилизовалась в 3col_leftNav.css (теперь отключен). */
.site-header__brand #shapka {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 6px var(--container-padding);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.site-header__brand #shapka a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.site-header__brand #shapka a:hover {
  color: var(--color-primary);
}

.site-header__brand #days {
  display: inline;
  margin-left: 12px;
  font-weight: 600;
  color: var(--color-accent);
}

.urdm-navbar {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-primary-dark);
}

.urdm-navbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-height);
}

.urdm-navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  line-height: 1.1;
  /* Прижимает profile-toggle и actions к правому краю — burger и brand
     остаются слева единым блоком. */
  margin-right: auto;
}

.urdm-navbar-brand:hover {
  color: rgba(255, 255, 255, 0.9);
}

.urdm-navbar-brand-icon {
  font-size: 1.6rem;
  color: var(--color-accent);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.urdm-navbar-brand-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.urdm-navbar-brand-name small {
  display: block;
  font-size: 0.85em;
  font-weight: 400;
  opacity: 0.85;
  font-style: italic;
}

.urdm-navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.urdm-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base), color var(--transition-base);
}

.urdm-nav-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.urdm-nav-link i {
  font-size: 1rem;
}

.urdm-nav-logout {
  padding: 8px 12px;
}

.urdm-nav-login {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.urdm-nav-login:hover {
  background: var(--color-accent-soft, var(--color-accent));
  color: #fff;
}

/* Hamburger toggles — скрыты на desktop, видны на mobile.
 * .urdm-menu-toggle — burger для открытия основного меню (drawer).
 * .urdm-navbar-toggle — profile-dropdown (auth-ссылки).
 */
.urdm-navbar-toggle,
.urdm-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.1rem;
  align-items: center;
  justify-content: center;
}

.urdm-navbar-toggle:hover,
.urdm-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* === Шапка 2 (season-switcher) — [Семьям] [Школам] [Зимой] [Летом] ===
 * Вынесен из .site-header в отдельный элемент, чтобы position: sticky
 * работал на всей странице, а не только в пределах site-header.
 * Sticky на всех разрешениях (ПК + МП) — всегда виден сверху при скролле.
 * z-index 100: выше контента, ниже sidebar drawer (1000) и backdrop (999).
 */
.season-switcher {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-primary-dark);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 6px var(--container-padding);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.season-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base), color var(--transition-base);
}

.season-switcher__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.season-switcher__btn.is-active {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.season-switcher__btn i {
  font-size: 0.85rem;
}

/* === Mobile: <768px ===
 * Hamburger раскрывает actions вертикально
 */
@media (max-width: 767px) {
  .urdm-navbar-toggle,
  .urdm-menu-toggle {
    display: inline-flex;
  }

  .urdm-navbar-actions {
    /* display: none надёжно убирает элемент и его содержимое из layout,
       чтобы не вызывать scrollWidth на МП. Раньше max-height: 0 + overflow: hidden
       оставлял children в потоке, и широкая кнопка «Войти» растягивала шапку. */
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-primary-dark);
    padding: 8px;
    gap: 4px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.2));
  }

  .urdm-navbar-actions.is-open {
    display: flex;
  }

  .urdm-nav-link {
    width: 100%;
    padding: 12px 14px;
  }

  .urdm-navbar-brand-name {
    font-size: 0.95rem;
  }
}

/* === Вспомогательные классы === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Layout grid (этап 4) ===
 * Замена table-based layout на CSS Grid.
 * Mobile-first: одна колонка по умолчанию, 2 на tablet, 3 на desktop.
 */
.layout-grid {
  display: grid;
  gap: 24px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--container-padding);
  grid-template-columns: 1fr;
}

.layout-main {
  min-width: 0; /* предотвращает grid blowout от длинного контента */
}

.layout-aside {
  min-width: 0;
}

/* Tablet (768+): content + aside, sidebar сверху */
@media (min-width: 768px) {
  .layout-grid {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
  .layout-sidebar {
    grid-column: 1 / -1;
  }
  .layout-main {
    grid-column: 1;
  }
  .layout-aside {
    grid-column: 2;
  }
}

/* Desktop (1024+): 3 колонки */
@media (min-width: 1024px) {
  .layout-grid {
    grid-template-columns: 240px minmax(0, 1fr) 240px;
    gap: 32px;
  }
  .layout-sidebar {
    grid-column: 1;
    grid-row: 1;
  }
  .layout-main {
    grid-column: 2;
    grid-row: 1;
  }
  .layout-aside {
    grid-column: 3;
    grid-row: 1;
  }
}

/* === Sidebar (#navBar) ===
 * Стили для боковой навигации. На mobile — drawer (по умолчанию скрыт,
 * открывается по .is-open).
 */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: background var(--transition-base);
}

.sidebar-toggle:hover {
  background: var(--color-primary-dark);
}

.sidebar-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px; /* отступ от .sidebar-toggle на mobile */
}

/* Tablet+: .sidebar-toggle скрыт, отступ сверху не нужен —
   контент sidebar выравнивается с верхом main и aside. */
@media (min-width: 768px) {
  .sidebar-content {
    margin-top: 0;
  }
}

.sidebar-content h3 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  font-size: 1.05rem;
  margin: 16px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-content h3:first-child {
  margin-top: 0;
}

.sidebar-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.sidebar-content li {
  margin: 0;
}

.sidebar-content a {
  display: block;
  padding: 8px 10px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base), color var(--transition-base);
  border-left: 3px solid transparent;
}

.sidebar-content a:hover {
  background: var(--color-bg);
  color: var(--color-primary);
  border-left-color: var(--color-accent);
}

.sidebar-content a strong {
  color: inherit;
}

.sidebar-content .sidebar-meta {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}

/* === Mobile drawer (<768px) ===
 * Sidebar закрыт по умолчанию. При тапе на «Меню» — выезжает поверх
 * контента слева, ширина 75vw (3/4 экрана по заданию PO), с backdrop
 * для закрытия тапом вне меню. Не сдвигает основной контент.
 */
@media (max-width: 767px) {
  .sidebar-toggle {
    display: inline-flex;
  }
  .sidebar-content {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 75vw;
    max-width: 320px;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height — корректно с мобильной шапкой браузера */
    max-height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 0;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.25));
    /* Плавный въезд справа-налево */
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
  }
  .sidebar-content.is-open {
    display: block;
    transform: translateX(0);
  }
  /* Кнопка закрытия в шапке drawer'а */
  .sidebar-close {
    display: inline-flex;
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
  }
  /* Backdrop — тап вне меню закрывает его */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  .sidebar-backdrop.is-open {
    display: block;
  }
  /* Блокировка прокрутки body когда drawer открыт */
  body.sidebar-drawer-open {
    overflow: hidden;
  }
}

@media (min-width: 768px) {
  /* На tablet+ toggle всегда скрыт, sidebar всегда виден */
  .sidebar-toggle {
    display: none;
  }
  .sidebar-close,
  .sidebar-backdrop {
    display: none !important;
  }
}

/* === order-layout: страницы заказа (формы + result) ===
 * Включается body-классом `order-layout`. Sidebar → drawer на ВСЕХ viewport
 * (на МП уже так через @media выше, здесь добавляем то же для ПК), aside
 * скрыт, main на всю ширину. Остальной сайт не затрагивается. */
.order-layout .layout-grid {
  grid-template-columns: 1fr;
}
/* Перебиваем grid-column из tablet/desktop media queries —
 * без этого main наследует grid-column: 2 (desktop) и попадает в
 * неявную колонку, образуя «0px <main>» вместо одной широкой колонки. */
.order-layout .layout-sidebar,
.order-layout .layout-main,
.order-layout .layout-aside {
  grid-column: 1;
  grid-row: auto;
}
/* .layout-sidebar остаётся в DOM, но его единственный ребёнок (.sidebar-content)
 * становится fixed drawer'ом — поэтому убираем обёртку из grid-потока. */
.order-layout .layout-sidebar {
  display: contents;
}
.order-layout .layout-aside {
  display: none;
}
/* Бургер виден на всех viewport, не только на МП */
.order-layout .urdm-menu-toggle {
  display: inline-flex;
}
/* Drawer-стили sidebar-content — те же, что в @media (max-width: 767px),
 * но применяются и на ПК. Media queries нельзя комбинировать с селекторами
 * тела, поэтому дублируем. */
.order-layout .sidebar-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 75vw;
  max-width: 320px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 0;
  border-radius: 0;
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.25));
  transform: translateX(-100%);
  transition: transform 0.25s ease-out;
}
.order-layout .sidebar-content.is-open {
  display: block;
  transform: translateX(0);
}
.order-layout .sidebar-close {
  display: inline-flex !important;
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.order-layout .sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.order-layout .sidebar-backdrop.is-open {
  display: block !important;
}

/* На МП формы заказа ужимаем отступы. Слоёв несколько (layout-grid padding
 * + #content padding + .content padding из form.css) — суммарно было ~56px
 * с каждой стороны, что на 375px viewport съедало треть ширины. */
@media (max-width: 767px) {
  .order-layout .layout-grid {
    padding: 0;
  }
  /* Убираем карточную обёртку #content на МП — на узком экране она лишняя,
   * реальный контент внутри .content, которому оставляем умеренный padding. */
  .order-layout .layout-main > #content {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  body.order-layout .content {
    padding: 12px;
    margin: 0;
  }
}

/* === Main content (#content, #pagehead) === */
#pagehead {
  margin-bottom: 16px;
}

#pageName {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin: 0;
}

#content {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 767px) {
  #content {
    padding: 16px;
  }
}

/* === Flatpage-контент (TinyMCE) — сброс жёстких inline width/height ===
 * Старые страницы редактировались через TinyMCE, там инлайн
 * style="width:...px;height:...px" на img/table/iframe — на узких
 * viewport вылезает за пределы колонки. !important обязателен только
 * там, где инлайн-стиль задаёт то же свойство (height, а не max-width).
 */
.flatpage-content img {
  max-width: 100%;
  height: auto !important;
}

.flatpage-content table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

.flatpage-content td,
.flatpage-content th {
  width: auto !important;
}

.flatpage-content iframe,
.flatpage-content embed,
.flatpage-content object {
  max-width: 100%;
}

/* === Flatpage-контент — замена legacy layout-таблиц (text+фото рядом,
 * партнёры+лого и т.п.) на responsive flex-вёрстку, см.
 * clean_flatpage_tables management-команду. */
.flatpage-layout-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin: 12px 0;
}

.flatpage-layout-col {
  flex: 1 1 260px;
  min-width: 0;
}

.flatpage-float-box {
  float: right;
  margin: 0 0 12px 16px;
}

@media (max-width: 767px) {
  .flatpage-float-box {
    float: none;
    width: auto !important;
    margin: 0 0 12px;
  }
}

/* === Aside (#headlines) === */
#headlines {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
}

/* === Footer (#siteInfo) — базовая стилизация ===
 * Существующий footer получает отступы и выравнивание.
 */
#siteInfo {
  max-width: var(--container-max);
  margin: 40px auto 0;
  padding: 24px var(--container-padding);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

/* === User dashboard в правой колонке (user_panel.html) ===
 * Только состояние — бонусы и последняя заявка. Auth-навигация живёт в шапке.
 * На МП блок скрыт (#profile { display: none }) — там auth в profile-dropdown.
 */
.user-dashboard {
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
}

.user-dashboard__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 8px;
  color: var(--color-text);
}

.user-dashboard__greeting {
  margin: 0 0 12px;
  line-height: 1.4;
}

.user-dashboard__name {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.user-dashboard__name:hover {
  text-decoration: underline;
}

.user-dashboard__row {
  margin: 6px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}

.user-dashboard__row i {
  color: var(--color-accent);
  align-self: center;
}

/* МП: dashboard скрыт, auth-зона в шапке через profile-dropdown.
   МП: messenger_buttons скрыт в правой колонке.
   Footer #sticky_bar → fixed bottom bar, всегда виден внизу экрана. */
@media (max-width: 767px) {
  #profile {
    display: none;
  }
  #headlines #sticky_bar {
    display: none;
  }
  /* Footer: messenger-кнопки переносятся в sticky-bottom bar.
     Position fixed — всегда виден внизу экрана, не уезжает при скролле.
     z-index 998: ниже sidebar drawer (1000) и его backdrop (999),
     но выше обычного контента. Cookie-notification (9999) перекрывает
     при первом показе — это OK, после accept он скрывается. */
  #siteInfo #sticky_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--color-surface);
    padding: 8px var(--container-padding);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  }
  #siteInfo .sticky_bar__inner {
    flex-direction: row;
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    gap: 8px;
  }
  /* Кнопки делят ширину 50/50 вместо фиксированных 250px —
     чтобы «Max» и «VK» помещались в ряд на любом МП (320-450px).
     !important — перебиваем form.css `body .btn_share_small { ... !important }`.
     white-space: nowrap — «Написать в Макс» (16 символов кириллицей)
     не должен разрываться на 2 строки. */
  #siteInfo .btn_share_small {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden;
  }
  #siteInfo .btn_share_small > a {
    white-space: nowrap;
    padding-left: 0;
  }
  /* Иконка Max-логотипа — компактнее на узких кнопках */
  #siteInfo .btn_share_small.max > a::before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
  /* Иконка VK выровнена с Max-кнопкой по размеру */
  #siteInfo .btn_share_small .fa-2xl {
    font-size: 1.25em;
    vertical-align: -0.125em;
    margin-right: 6px;
  }
  /* Компенсируем sticky-bottom bar, чтобы он не перекрывал контент */
  body {
    padding-bottom: 64px;
  }
  /* Footer-контакты на МП — мельче, чем инлайн font-size: 150%.
     !important — перебиваем inline-стиль на div. */
  .site-info__contacts {
    font-size: 100% !important;
    line-height: 130% !important;
  }
  /* Уменьшаем отступы #siteInfo на МП — компактнее, без больших пустот. */
  #siteInfo {
    margin-top: 16px !important;
    padding: 12px var(--container-padding) !important;
  }
}

/* ПК: messenger_buttons — только в правой колонке, из footer убираем.
   В колонке кнопки вертикально и по её ширине (240px). */
@media (min-width: 768px) {
  #siteInfo #sticky_bar {
    display: none;
  }
  #headlines .sticky_bar__inner {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  #headlines .btn_share_small {
    width: 100%;
    margin: 0;
    height: auto;
    min-height: 36px;
    font-size: 14px;
    padding: 6px 10px;
  }
  #headlines .btn_share_small .fa-2xl {
    font-size: 1.25em;
    vertical-align: -0.125em;
    margin-right: 6px;
  }
  /* Max-логотип в правой колонке — меньше, чтобы текст помещался */
  #headlines .btn_share_small.max > a::before {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
}

/* order-layout на ПК: показываем sticky-bottom bar с Max+VK как на МП.
   На остальных ПК-страницах messenger-кнопки в правой колонке (aside),
   но в order-layout aside скрыт — поэтому кнопки переносим в footer-sticky. */
@media (min-width: 768px) {
  body.order-layout #siteInfo #sticky_bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--color-surface);
    padding: 10px var(--container-padding);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  }
  body.order-layout #siteInfo .sticky_bar__inner {
    flex-direction: row;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    gap: 12px;
  }
  /* Кнопки 50/50 ширины. !important — перебиваем form.css `body .btn_share_small`.
     На ПК шрифт крупнее (15px), padding больше — tap-target friendly. */
  body.order-layout #siteInfo .btn_share_small {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    font-size: 15px !important;
    padding: 10px 8px !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden;
  }
  body.order-layout #siteInfo .btn_share_small > a {
    white-space: nowrap;
    padding-left: 0;
  }
  body.order-layout #siteInfo .btn_share_small.max > a::before {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
  body.order-layout #siteInfo .btn_share_small .fa-2xl {
    font-size: 1.4em;
    vertical-align: -0.125em;
    margin-right: 8px;
  }
  /* Компенсируем sticky-bottom bar, чтобы не перекрывал контент */
  body.order-layout {
    padding-bottom: 72px;
  }
}

table[width="100%"] {
  max-width: 100%;
}

/* === Auth pages (login/logout/password) ===
 * Стилизация через design tokens с повышенной специфичностью (body .class),
 * чтобы перебивать хардкоды из main.css. Работает во всех сезонных темах.
 */
body .login-card {
  max-width: 440px;
  margin: 40px auto;
  padding: 36px 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

body .login-card-header {
  text-align: center;
  margin-bottom: 24px;
}

body .login-card-header h1 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  margin: 12px 0 0;
  font-size: 1.75rem;
}

body .login-card-icon {
  font-size: 2.2rem;
  color: var(--color-accent);
}

body .login-card-lead {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  font-size: 1rem;
}

body .login-card-footer {
  text-align: center;
  margin-top: 14px;
}

body .login-card-footer a,
body .login-card a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

body .login-card-footer a:hover,
body .login-card a:hover {
  color: var(--color-accent);
}

body .login-alert {
  background: var(--color-danger);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  text-align: center;
  font-size: 0.95rem;
}

body .login-field {
  margin-bottom: 16px;
}

body .login-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--color-text);
  font-size: 0.95rem;
}

body .login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

body .login-input-wrap > i {
  position: absolute;
  left: 14px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

body .login-input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

body .login-input-wrap input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 107, 71, 0.12);
}

body .login-submit,
body button.login-submit,
body input[type="submit"].login-submit {
  width: 100%;
  padding: 14px;
  background: var(--color-accent);
  color: #FFFDF7;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
  margin-top: 8px;
}

body .login-submit:hover,
body button.login-submit:hover,
body input[type="submit"].login-submit:hover {
  background: var(--color-accent-soft, var(--color-accent));
  transform: translateY(-1px);
}

/* Social auth section (login page) */
body .social-auth-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

body .social-auth-divider {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

body .social-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

body .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

body .social-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

body .social-btn-phone {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

body .social-btn-phone:hover {
  background: var(--color-primary-dark);
}

body .social-btn-vk {
  background: #0077FF;
  color: #fff;
  border-color: #0077FF;
}