/* Site footer — visual parity target: Figma «Версия 2» footer instance
   (file 9HQ761z3pY2LZDhRHlq5vf, node 1:4563; supersedes INPA-2 master 7737:399).
   Layout grid: brand column (300) / nav column (195) / contacts column (260),
   anchors x=131/830/1530 on the 1920 canvas, expressed as % of the 1659px
   content box so the composition scales down proportionally instead of
   overflowing on viewports 1025–1919px («футер отцентрован» на любой ширине).
   Bottom row: copyright + audience / dev CTA / payment marks. Wordmark banner
   is a decorative SVG with the same bbox as Component 17.
   Token names mirror tokens.css; concrete hex values fall back when
   tokens.css is not loaded. */

.site-footer {
  /* Эталон «Версия 2»: фон футера #141414 (замечание 2026-07-29 — «прям чёрный»),
     а не --vp-color-text-primary (#1a1a1a), который остался цветом текста. */
  background: #141414;
  color: var(--vp-color-text-inverse, #ffffff);
  /* Unified public footer (kanban t_969474d5): Inter first via the sans token
     — the @font-face lives in shared common.css (t_8e6362ec), so every public
     page resolves it. Was --vp-font-family-brand ("Helvetica Neue"), which the
     landing-only index_overrides.css then re-pinned to Inter: same footer,
     two fonts. The token keeps the legacy stack as its own fallback chain. */
  font-family: var(--vp-font-family-sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.1;
  /* The wordmark below is 100vw-wide; on pages with a vertical scrollbar
     100vw exceeds the layout viewport by the scrollbar width — clip the
     overflow so cabinet pages don't grow a horizontal scrollbar. */
  overflow-x: clip;
}

.site-footer__inner {
  /* Figma 1:4563 — column anchors x=131/830/1530 on a 1920-wide canvas
     (inner padding-left=131, inner padding-right=130 → 1659px content box).
     Wordmark sits full-bleed as the next element outside this inner. */
  max-width: 1920px;
  margin: 0 auto;
  padding: 30px 130px 0 131px;
}

.site-footer__top {
  /* Column gaps from the 1920 canvas as % of the 1659px content box:
     nav margin-left 399px → 24.05%, contacts margin-left 505px → 30.44%.
     Percentages keep the anchors exact at 1920 and shrink them with the
     viewport below it — fixed px margins used to clip the contacts column.

     UI-аудит 2026-07-20 (C-8): padding-bottom was 219px, which rendered as
     a dead black void between the nav columns and the copyright row —
     reduced to the same 64px rhythm the ≤1024px breakpoint already used. */
  display: flex;
  align-items: flex-start;
  padding-bottom: 64px;
}

.site-footer__col--brand {
  display: flex;
  flex-direction: column;
  /* Figma 1:4563 Frame 425 gap=10 (logo → legal → права). */
  gap: 10px;
  width: 300px;
  color: var(--vp-color-text-inverse, #fff);
}

.site-footer__col--nav {
  /* Меню по центру — как «Написать разработчику» в нижнем ряду (2026-07-31):
     flex-зона между брендом (300px) и контактами (300px). Был Figma-анкор. */
  flex: 1;
  display: flex;
  justify-content: center;
  /* Figma 1:4563: nav top sits 22px below the brand column top. */
  margin-top: 22px;
}

.site-footer__col--contacts {
  margin-top: 22px;
  /* 300px = ширине brand-колонки, чтобы nav встал точно по центру
     (было 260px + Figma-анкор margin-left 30.44%). */
  width: 300px;
  /* Сдвиг вправо под левый край иконки Visa (2026-07-31): Visa левее колонки
     на 27px (Visa в 273px от правого края контента; замер в Chrome). ponytail: число привязано к текущим иконкам
     оплаты — при смене набора пересчитать. */
  padding-left: 27px;
}

.site-footer__logo {
  display: block;
  width: 250px;
  height: auto;
}

.site-footer__legal,
.site-footer__copyright,
.site-footer__audience {
  margin: 0;
  font-weight: 400;
  line-height: 1.1;
}

/* ® увеличен относительно строки (2026-08-01, t_437b094b / FIX t_3f35d568):
   <sup> даёт подъём, font-size:1.25em делает glyph box измеримо больше,
   чем у bare ® родительской версии (1em), оставаясь соразмерным строке;
   браузерный дефолт (~smaller) гасится тем же явным значением. */
/* Self-sufficiency (t_6b9127ba, ui-audit t_3b03346d F1): line-height,
   vertical-align, position and top must be pinned here, not only font-size.
   Otherwise they fall through to page-dependent CSS — pages with
   style.min.css get Tailwind-preflight `sub,sup{line-height:0;…}`, the 8
   public pages without it get the UA default `vertical-align: super`, which
   inflates the line box (+5.66px footer-height split between page clusters).
   Pinned set: line-height:0 keeps the line box out of the parent's height,
   baseline+relative+top reproduces the raised ® without vertical-align:super. */
.site-footer__copyright sup {
  font-size: 1.25em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -0.5em;
}

/* Age-rating badge «0+» in a ring (436-ФЗ style, t_70c0f2bc, owner remark
   2026-07-31): replaces the © glyph in the audience line. Color inherits
   from the footer line via currentColor. */
.site-footer__age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  margin-right: 0.4em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: middle;
}

.site-footer__col--nav a,
.site-footer__contact-link {
  color: inherit;
  text-decoration: none;
}

.site-footer__col--nav a:hover,
.site-footer__col--nav a:focus,
.site-footer__contact-link:hover,
.site-footer__contact-link:focus {
  text-decoration: underline;
}

.site-footer__col--nav ul,
.site-footer__col--contacts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Figma 1:4563 Frame 405: contact links step is 20px, not the nav's 30. */
.site-footer__col--contacts ul {
  gap: 20px;
}

.site-footer__col--nav a {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  /* «Правила использования» — в одну строку; колонка 195px не клипает. */
  white-space: nowrap;
}

.site-footer__contacts-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 30px;
}

.site-footer__contact-link {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

.site-footer__bottom {
  /* Grid 1fr auto 1fr: боковые треки ВСЕГДА равны, поэтому центральная ячейка
     стоит точно по оси ряда на любой ширине >1024. Flex-строка держала
     симметрию только пока боковые ячейки не сжимались — на 1025–1063px
     min-content у левой (~298px) и правой (~273px) ячеек разный, центр
     уезжал на 2.28px (probe t_a8cbabc9). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  /* Figma 1:4563: 20px от низа нижнего ряда (плашки оплаты, y=598) до верхних
     кромок букв вордмарка (y=618). */
  padding-bottom: 20px;
}

.site-footer__bottom-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-self: start;
  /* Fill the grid track and cap the side cell on wide screens. A fixed width
     overflows the collapsed track at 1025–1150px and overlaps the CTA. */
  width: 100%;
  max-width: 320px;
  min-width: 0;
}

.site-footer__bottom-center {
  display: flex;
  align-items: center;
  /* Центрирование обеспечивают равные боковые треки grid (см. __bottom);
     был Figma-анкор 379px, затем flex:1 (замечание 2026-07-31). */
  justify-self: center;
  justify-content: center;
  gap: 12px;
}

/* t_148d5c18 (замечание 2026-07-31): центрируется сама ссылка
   «Написать разработчику», а не группа «?»+ссылка. Невидимый спейсер
   справа = ширине иконки (20px), gap 12px применяется симметрично —
   justify-content:center ставит текст ссылки точно по центру ряда. */
.site-footer__bottom-center::after {
  content: '';
  width: 20px;
  flex-shrink: 0;
  visibility: hidden;
}

.site-footer__dev-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.site-footer__dev-link:hover,
.site-footer__dev-link:focus {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

.site-footer__dev-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 2px;
}

.site-footer__question {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

/* Use the shared question-icon fragment in the footer so the «?»
   mirrors the header tooltip trigger. The fragment's path fill is
   hardcoded #C1C5D8 in question_icon.html; override to white so the
   glyph stays readable on the dark #141414 canvas. */
.site-footer__bottom-center .shared-question-tooltip-icon {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

.site-footer__bottom-center .shared-question-tooltip-icon path {
  fill: currentColor;
}

/* Base tooltip behaviour, scoped to the footer fragment (UI-аудит 2026-07-25,
   EH-7a): header.css ships the global .tooltip-box rules, but the app shell
   (head.html) does not load header.css, so the «?» hint rendered as visible
   underlined text on app pages. Values mirror header.css exactly — on public
   pages that load both files the cascade yields the same computed styles
   (zero visual delta). The .tooltip-box--footer overrides below keep winning
   because they come later in this file. */
.site-footer .tooltip-icon-wrapper {
  position: relative;
  display: inline-flex;
}

.site-footer .tooltip-box {
  position: absolute;
  z-index: 100;
  width: 288px;
  padding: 8px;
  color: var(--vp-color-text-inverse, #fff);
  background: #000;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 4px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.site-footer .tooltip-box::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #000;
  transform: rotate(45deg);
  top: -4px;
  left: 50%;
  margin-left: -4px;
}

.site-footer .tooltip-icon-wrapper:hover .tooltip-box,
.site-footer .tooltip-icon-wrapper:focus-within .tooltip-box {
  opacity: 1;
  visibility: visible;
}

/* Tooltip popup colours — global tooltip-box is a black balloon on
   light backgrounds; on the dark canvas it would disappear into the
   page, so flip background to a slightly lighter grey and add a
   pointer arrow that matches. Keep the same width/typography so the
   wording reads identically across header + footer. */
.site-footer .tooltip-box--footer {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 288px;
  background: #f5f5f7;
  color: #141414;
  border-radius: 6px;
}

.site-footer .tooltip-box--footer::before {
  background: #f5f5f7;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.site-footer__bottom-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  /* Match the left cell's capped width while allowing the grid track to
     shrink. Keep the payment inset proportional below the 1920px anchor so
     it cannot consume the narrow desktop track. */
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-width: 0;
  padding-right: clamp(0px, calc((100vw - 261px) * 0.040386), 67px);
  gap: 4px;
}

.site-footer__pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 52px;
  overflow: hidden;
  position: relative;
}

.site-footer__pay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.site-footer__wordmark {
  display: block;
  width: 100vw;
  height: auto;
  margin: 0 0 0 calc(50% - 50vw);
  max-width: none;
  /* Decorative (aria-hidden) giant wordmark: it can reach the bottom row's
     click targets (e.g. the dev-link button), so it must never win hit-testing —
     UiTests.developerFeedbackModalWithAttachmentTest caught ElementClickIntercepted. */
  pointer-events: none;
  /* CE-9: keep the wordmark fully visible on mobile viewports where the scaled
     capitals can touch the viewBox edge. The parent .site-footer clips
     horizontal overflow, so this does not reintroduce horizontal scroll. */
  overflow: visible;
}

/* Modifier hooks reused by callers: blog/landing/error shells pass string modifiers. */
.site-footer--blog,
.site-footer--landing,
.site-footer--error {
  /* Reserved for per-page overrides (e.g. layout edge cases for error pages). */
}

@media (max-width: 1024px) {
  .site-footer__inner {
    padding: 40px 32px 0;
  }

  .site-footer__top {
    /* AC t_acf538a1 (review t_6c9d3930 blocker 1): centering has NO mobile
       exception — the stacked columns center as a column, not left-align. */
    flex-direction: column;
    align-items: center;
    padding-bottom: 64px;
  }

  .site-footer__col--brand,
  .site-footer__col--nav,
  .site-footer__col--contacts {
    width: auto;
    margin-left: 0;
    align-items: center;
    text-align: center;
  }

  .site-footer__col--nav {
    justify-content: center;
  }

  .site-footer__col--nav ul,
  .site-footer__col--contacts ul {
    align-items: center;
  }

  .site-footer__col--contacts {
    padding-left: 0;
  }

  .site-footer__col--nav,
  .site-footer__col--contacts {
    margin-top: 32px;
  }

  .site-footer__bottom {
    /* Desktop row — grid (см. базовое правило); в стеке возвращаем flex. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .site-footer__bottom-left {
    align-items: center;
    text-align: center;
  }

  .site-footer__bottom-center {
    margin-left: 0;
  }

  /* Bottom row stacks centered — the link-centering spacer must not offset
     the «?»+link pair. */
  .site-footer__bottom-center::after {
    display: none;
  }

  .site-footer__bottom-right {
    margin-left: 0;
    width: auto;
    padding-right: 0;
  }

  .site-footer__wordmark {
    width: 100%;
    margin-left: 0;
    height: auto;
  }
}

@media (max-width: 640px) {
  .site-footer__inner {
    padding: 32px 16px 0;
  }

  .site-footer__top {
    padding-bottom: 32px;
  }

  .site-footer__col--nav ul,
  .site-footer__col--contacts ul {
    gap: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Feedback modal («Написать разработчику», UI-аудит 2026-07-20 L-17/E-16).
   The modal :: request fragment ships inside the unified footer, so its
   styles must travel with footer.css — public pages (blog, policy, landing…)
   do not load style.min.css where these rules used to live exclusively.
   Values mirror style.css / role_home.css so pages that DO load
   style.min.css render identically (last-loaded equal rules win, no visual
   delta).
   --------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1),
    transform 0.6s cubic-bezier(0.55, 0, 0.1, 1),
    visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  pointer-events: none;
  scrollbar-width: none;
}

.modal::-webkit-scrollbar {
  display: none;
}

.modal.is-active {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal--preload {
  transition: none;
}

.modal__wrapper {
  position: relative;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;
  padding: 60px 40px;
}

@media (max-width: 767px) {
  .modal__wrapper {
    padding: 60px 16px;
  }
}

.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.modal__content {
  position: relative;
  width: 600px;
  padding: 40px;
  background-color: var(--vp-color-text-inverse, #ffffff);
}

@media (max-width: 767px) {
  .modal__content {
    width: 100%;
    padding: 20px;
  }
}

.modal.modal-developer {
  /* common.css (public pages: landing, blog, policy…) ships a legacy 300px
     `.modal` card rule and a `.modal button` rule. Without these resets the
     overlay collapses to a 300px left-hand column and the close button is
     painted blue. Scoped higher specificity (0-2-0) beats common.css. */
  width: auto;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: start;
  background: rgba(121, 121, 121, 0.31);
  transform: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-developer.is-active {
  background: rgba(121, 121, 121, 0.31);
  transform: none;
}

.modal-developer__wrapper {
  justify-content: center;
  align-items: center;
  padding: var(--vp-space-lg, 24px);
}

.modal-developer__overlay {
  background: transparent;
}

.modal-developer__content {
  width: min(384px, calc(100vw - 32px));
  max-width: 384px;
  padding: 0;
  background: transparent;
}

.modal-developer__container {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--vp-color-text-inverse, #fff);
  padding: var(--vp-space-lg, 24px);
  /* 2026-07-31: заголовок формы («Комментарий») поднят ближе к верху (заказчик). */
  padding-top: 16px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.modal .modal-developer__close-btn {
  position: absolute;
  top: var(--vp-space-sm, 12px);
  right: var(--vp-space-sm, 12px);
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.modal-developer__close-btn svg path {
  fill: #6b7280;
}

.modal .modal-developer__close-btn:hover:not(.focus-visible),
.modal .modal-developer__close-btn.focus-visible:focus {
  background: #f3f4f6;
}

.modal-developer__title {
  margin: 0 40px var(--vp-space-md, 16px) 0;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.modal-developer__form {
  max-width: none;
  margin: 0;
}

/* Form-control styling for public pages that do not load style.min.css
   (blog, policy, landing…). Values mirror the canonical .primary-form__*
   rules from style.css exactly, so on app pages (where style.min.css is
   loaded) these higher-specificity copies produce ZERO visual delta —
   same declarations, just scoped to the developer modal. `border:0` /
   `font:inherit` compensate the missing Tailwind preflight reset on
   public pages (preflight already does this on app pages). */
.modal-developer .primary-form__second-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  /* 2026-07-31: «Комментарий» — чёрным (заказчик). */
  color: #000;
}

.modal-developer .primary-form__textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 14px;
  border: 1px solid var(--vp-color-link-primary, #0014a8);
  border-radius: 16px;
  background-color: rgba(0, 20, 168, 0.08);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  text-align: left;
  color: var(--vp-color-text-secondary, #6b6b6b);
  box-sizing: border-box;
}

/* 2026-07-31: плейсхолдер «Опишите ошибку» — серым (заказчик). */
.modal-developer .primary-form__textarea::placeholder {
  color: #9ca3af;
}

/* 2026-07-31 (заказчик): textarea опущена ниже (подпись «Комментарий» на месте);
   между блоком ввода и блоком добавления фото — ровно 14px. */
.modal-developer .primary-form__textarea {
  margin-top: 14px;
}

.modal-developer .primary-form__input-cont {
  margin-bottom: 0;
}

.modal-developer .primary-form__input-block {
  margin-top: 0;
}

/* 2026-07-31 (заказчик): «Добавьте фото к своему обращению» — по центру
   промежутка между textarea и дропзоной (по 14px сверху и снизу). */
.modal-developer .primary-form__input-block .primary-form__span {
  margin: 14px 0;
}

.modal-developer .primary-form__span {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

/* 2026-07-31: кнопка «Отправить» — 200×44, по центру, опущена (40px сверху),
   фирменный #003677 (заказчик). */
.modal-developer .primary-form__btn {
  display: block;
  width: 200px;
  min-width: 200px;
  height: 44px;
  margin-inline: auto;
  margin-top: 40px;
  padding: 6px 20px;
  border: 0;
  border-radius: 32px;
  background-color: #003677;
  color: var(--vp-color-text-inverse, #ffffff);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.modal-developer .primary-form__btn:hover {
  background: #002a5c;
}

/* File-attach dropzone: mirrors style.css (.img-download-area /
   .img-download-area--padding / .modal-developer__img-download-area /
   .add-file-img / .primary-form__download-img) for public pages that do not
   load style.min.css — same zero-visual-delta convention as the
   .primary-form__* copies above. */
.modal-developer .img-download-area {
  display: flex;
  overflow: hidden;
  width: 280px;
  border: 1px solid rgba(0, 20, 168, 0.08);
  border-radius: 8px;
}

.modal-developer .img-download-area--padding {
  padding: 8px 4px;
}

.modal-developer__img-download-area {
  row-gap: 8px;
  column-gap: 8px;
}

.modal-developer .add-file-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: rgba(0, 20, 168, 0.08);
  cursor: pointer;
}

.modal-developer .primary-form__download-img {
  display: none;
}

/* Attachment preview thumbnails: mirrors style.css (.img-block / .img-preview /
   .remove-icon) for public pages without style.min.css. */
.modal-developer .img-block {
  position: relative;
}

.modal-developer .img-preview {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}

.modal-developer .remove-icon {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: var(--vp-color-danger, #ca505a);
  border: 1px solid var(--vp-color-text-inverse, #ffffff);
  border-radius: 50%;
  cursor: pointer;
}