/* ==========================================================================
   chrome-late.css — поздний слой общего оформления (доработки 113, 114, 116; 12.10.2026).
   Подключается в inc/chrome.php (nd_chrome_late_assets, приоритет 24) ПОСЛЕ chrome.css и
   страничных стилей (prodpage, news, tariffs…): правила этапа 3 адаптива перебивают их по
   порядку загрузки, в таком виде они приняты на черновиках. Новое общее оформление пишите
   в chrome.css; сюда — только то, что обязано идти после страничных стилей.
   Токены --c-* объявлены в chrome.css.
   ========================================================================== */

/* ---------- доработка 114: меню «Продукты СБИС» с клавиатуры и на iPad, отклик кнопок, галочка «Спасибо» ---------- */
/* ===== Подменю шапки на ПК и iPad: клавиатура и касание =====
   Условие то же, что mq в chrome.js (не телефонная шапка), записано через «или». */
@media (min-width: 768px) and (min-height: 501px), (min-width: 1280px) {
  /* закрытое подменю не получает фокус: opacity: 0 фокус не снимает, visibility: hidden — снимает */
  .nd-chrome .accent-nav__item > .sub-menu {
    visibility: hidden;
    transition: opacity 0.25s, visibility 0s linear 0.25s;
  }
  .nd-chrome .accent-nav__item.is-open > .sub-menu,
  .nd-chrome .accent-nav__item > .sub-menu:focus-within {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }
  /* Esc закрывает и подменю, открытое наведением (WCAG 1.4.13); класс снимает mouseover вне пункта */
  .nd-chrome .accent-nav__item.nd-sub-off > .sub-menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  /* кнопка-стрелка: на месте иконки пункта (left считает ux1.js: на 768–1023 содержимое пункта по центру), мышью не ловится (клик по пункту ведёт на страницу),
     клавиатурой и читалкой работает; кольцо видно только при :focus-visible */
  .nd-chrome .accent-nav__item > .nd-mm-toggle {
    display: block;
    position: absolute;
    top: 50%;
    left: var(--nd-tg-l, calc(100% - 22px));
    width: 24px;
    height: 24px;
    margin: -12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    pointer-events: none;
  }
  .nd-chrome .accent-nav__item > .nd-mm-toggle:focus-visible,
  .nd-chrome .accent-nav__item .sub-menu__link:focus-visible {
    outline: 2px solid var(--c-accent-ink);
    outline-offset: 2px;
  }
  .nd-chrome .accent-nav__link:focus-visible {
    outline: 2px solid var(--c-accent-ink);
    outline-offset: 2px;
    color: var(--c-accent-ink);
  }
}
/* наведение мышью — как у темы, но с visibility; только там, где есть hover */
@media (hover: hover) and (min-width: 768px) and (min-height: 501px), (hover: hover) and (min-width: 1280px) {
  .nd-chrome .accent-nav__item:not(.nd-sub-off):hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }
}
/* фокус не прячется под фиксированной шапкой: отступ считает chrome.js (--header-height на body) */
.nd-chrome :focus {
  scroll-margin-top: var(--header-height, 125px);
}
@media (prefers-reduced-motion: reduce) {
  .nd-chrome .accent-nav__item > .sub-menu { transition: none; }
}

/* Список регионов в шапке (тот же дефект: закрытый список имеет opacity: 0 и берёт фокус).
   Открывает класс .show, его ставит load.js по клику и по Enter на кнопке. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 1280px) {
  .nd-chrome .custom-location:not(.show) .custom-location__container { visibility: hidden; }
}

/* ===== Отклик на нажатие кнопок (все страницы) ===== */
.nd-chrome .nd-btn { transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; }
.nd-chrome .nd-btn:active { transform: scale(0.98); }

/* ===== Успех отправки: круг и значок «выскакивают»; действует, когда main-ui.js ставит .show ===== */
@keyframes nd-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: none; }
}
.modal__container[data-thx].show .modal__icons { animation: nd-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.modal__container[data-thx].show .modal__icons img { animation: nd-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.12s both; }

@media (prefers-reduced-motion: reduce) {
  .modal__container[data-thx].show .modal__icons,
  .modal__container[data-thx].show .modal__icons img { animation: none; }
  .nd-chrome .nd-btn:active { transform: none; }
}

/* ---------- доработка 116: адаптив, этап 3 — выезд и Fold 280, цена каталога, касания 24/44 px, текст 12 px, крошки, таблица тарифов. Правила с body.nd-chrome: вес выше страничных ---------- */
/* 1. Выезд и Galaxy Fold 280 ------------------------------------------------ */
body.nd-chrome { min-width: 280px; }
body.nd-chrome .nd-kbc__title a { overflow-wrap: anywhere; }
@media (max-width: 299px) {
  body.nd-chrome .nd-brand { flex: 1 1 0; min-width: 0; max-width: 140px; }
  body.nd-chrome .header__logo.nd-logo { min-width: 0; max-width: 100%; }
  body.nd-chrome .header__logo.nd-logo img { width: 100%; height: auto; }
}

/* 2. Цена в каталоге без многоточия ---------------------------------------- */
body.nd-chrome .rse-content__item .rse-card__price { margin-right: 0; flex-shrink: 0; overflow: visible; text-overflow: clip; }

/* 3. Зоны касания >= 24 px -------------------------------------------------- */
@media (pointer: coarse), (max-width: 1024px) {
  /* точки каруселей: зона 32x32, видимая точка 8 px (как carousel-controls.css на главной) */
  body.nd-chrome .nd-carousel__dots { align-items: center; gap: 0; }
  body.nd-chrome .nd-carousel__dot, body.nd-chrome .nd-carousel__dot.is-active { position: relative; display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 0; border-radius: 50%; padding: 0; background: transparent; font-size: 0; line-height: 0; }
  body.nd-chrome .nd-carousel__dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--nd-line-2, #d3ccc3); transition: width .15s, border-radius .15s, background-color .15s; }
  body.nd-chrome .nd-carousel__dot.is-active::before { width: 20px; border-radius: 4px; background: var(--nd-accent, #f3712b); }
  /* ссылки в списках и подписях: вертикальное поле в самом элементе */
  body.nd-chrome .nd-faq__more a { display: inline-block; padding-block: 4px; }
  body.nd-chrome :is(.nd-office__row a, .nd-office__map, .nd-tmsadd__link, .nd-sechead__link, .nd-prodgrid__link, .nd-lead__more, .nd-prod__more, .nd-card__link, .nd-payphones a, .nd-tarlink a, .nd-pn__item) { padding-block: 5px; }
  body.nd-chrome :is(.nd-office__map, .nd-tmsadd__link, .nd-sechead__link, .nd-prodgrid__link, .nd-lead__more, .nd-prod__more, .nd-card__link, .nd-tarlink a) { display: inline-block; }
  body.nd-chrome .nd-office__msg a { padding-block: 5px; }
  body.nd-chrome a.nd-tag { display: inline-flex; align-items: center; min-height: 24px; }
  body.nd-chrome .breadcrumb__item a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
  body.nd-chrome :is(.nd-faq summary, .nd-tmsfaq summary) { min-height: 24px; }
  body.nd-chrome .nd-payfield label, body.nd-chrome .nd-kb-search__label { display: inline-block; min-height: 24px; }
  /* подсказки тарифов: padding у inline-кнопки расширяет зону, строка не двигается */
  body.nd-chrome .itnw-tariffs .nd-tip { padding-block: 4px; }
  body.nd-chrome .itnw-tariffs .nd-tarlinks__item { min-height: 24px; }
  /* подвал */
  body.nd-chrome .nd-fcontact__phone { display: inline-block; padding-block: 1px; }
  body.nd-chrome .footer-bottom__item { padding-block: 6px; }
}

/* точки каруселей на самых узких экранах: зона 24 px, как в carousel-controls.css */
@media (max-width: 359.9px) {
  body.nd-chrome .nd-carousel__nav { gap: 4px; }
  body.nd-chrome .itnw-tariffs .package-heading > span { white-space: normal; }
  body.nd-chrome .nd-carousel__dot, body.nd-chrome .nd-carousel__dot.is-active { flex-basis: 24px; width: 24px; height: 24px; }
}

/* 4. Текст >= 12 px (кроме плашки «Сертифицированный партнёр» в шапке и таймера акции) */
body.nd-chrome :is(.nd-price span, .nd-row__when i, .nd-row__time, .nd-tag, .nd-src, .nd-eff, .nd-mark, .nd-tt__grp th, .nd-tt__corner, .nd-tt__flag, .nd-card small, .nd-quote cite, .nd-quote__src, .nd-faqnav a span, .nd-eot__lab, .nd-tldr__title, .nd-chip span, .nd-pn__label, .nd-pn__date, .nd-payphones span, .nd-pack__lab, .nd-pack__flag, .nd-eot__flag, .nd-hr-sign thead th, .working-mode__info) { font-size: .75rem; }
body.nd-chrome .nd-card small a { font-size: inherit; }
@media (max-width: 1024px) {
  body.nd-chrome .itnw-tariffs :is(.heading-note, .catalog-terms, .catalog-note, .row-price > span, .price-row p, .accounting-price p, .region, .user-packages span, .row-title > span, .package-heading > span, .unit-note, .request-details, .filters label, #client-label) { font-size: .75rem; }
  body.nd-chrome .itnw-tariffs :is(table, .accounting-matrix) { font-size: .75rem; }
}

/* 5. 44 px на тач-экранах: подвал, мобильное меню, логотип шапки телефона --- */
@media (pointer: coarse), (max-width: 1024px) {
  body.nd-chrome .footer .footer-menu__link { min-height: 44px; display: flex; align-items: center; }
  body.nd-chrome .footer .footer__logo { box-sizing: content-box; padding-block: 8px; }
  body.nd-chrome .footer .nd-fcontact__phone { display: inline-block; padding-block: 11px; }
  body.nd-chrome .footer .footer-bottom .footer-bottom__item { padding-block: 15px; }
  /* chrome.css:1020 и :984 (min-height 40 и 36) — при выкладке менять в самих строках */
  body.nd-chrome .mobile-menu > .header__top-info .top-nav__item .nav-link { min-height: 44px; }
  body.nd-chrome .mobile-menu > .mobile-menu__contacts .nd-msg-bottom .nav-link-big { min-height: 44px; }
}
@media (max-width: 767.9px) {
  body.nd-chrome .header .header__logo.nd-logo { box-sizing: content-box; padding-block: 7px; }
}

/* 6. Верхняя полоса шапки: цели до 24 px без изменения высоты полосы.
      Поле в 5 px компенсируется отрицательным внешним отступом: раскладка прежняя, зона касания больше.
      Только 913-1279: на 768-912 полоса переносится на две строки, и увеличенные зоны соседних
      строк налезают друг на друга (check108: «наездов в шапке» 145 ширин), поэтому там правило не включено. */
@media (min-width: 913px) and (max-width: 1279px) {
  body.nd-chrome .header__top :is(.nav-link, button.nav-link):not(.custom-location__btn) { padding-block: 5px; margin-block: -5px; box-sizing: content-box; min-width: 24px; }
  body.nd-chrome .header__top .nd-msg__link { padding-inline: 2.5px; margin-inline: -2.5px; }
}

/* 7. Хлебные крошки на телефоне: последняя (заголовок статьи) скрыта вместе со стрелкой перед ней.
      Стрелка рисуется ::after у предпоследнего li (main.css), поэтому гасим её там. */
@media (max-width: 767.9px) {
  body.nd-chrome .breadcrumb__list .breadcrumb__item:last-child:not(:first-child) { display: none; }
  body.nd-chrome .breadcrumb__list .breadcrumb__item:nth-last-child(2) { margin-right: 0; }
  body.nd-chrome .breadcrumb__list .breadcrumb__item:nth-last-child(2)::after { display: none; }
}

/* 8. Таблица тарифов на телефоне: подпись над таблицей и тень справа, пока есть что листать.
      Обёртка — flex в одну строку: [::before с подписью, ширина 0] [таблица] [::after с тенью, ширина 0].
      Подпись стоит в верхнем поле обёртки (padding-top), sticky left:0 — не уезжает при прокрутке.
      Тень, вариант 1 (везде): background-attachment local/scroll. Её перекрывает заливка выделенной
      колонки (col.is-best), поэтому в строках с заливкой тень не видна.
      Вариант 2 (где есть animation-timeline, Chrome 115+, Safari 26): sticky ::after поверх таблицы,
      гаснет к концу прокрутки; фоновая тень тогда не нужна. */
@media (max-width: 767.9px) {
  /* старая подсказка под таблицей («Таблица листается вбок…») на телефоне не нужна: новая стоит над таблицей */
  body.nd-chrome .nd-prodpage .nd-tt__hint { display: none; }
  body.nd-chrome .nd-prodpage .nd-tt-wrap {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 26px;
    background-color: #fff;
    background-image:
      linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, rgba(20, 24, 31, .28), rgba(20, 24, 31, 0));
    background-repeat: no-repeat;
    background-position: 100% 0, 100% 0;
    background-size: 44px 100%, 16px 100%;
    background-attachment: local, scroll;
  }
  body.nd-chrome .nd-prodpage .nd-tt-wrap::before {
    content: "Листайте таблицу вправо \2192";
    flex: 0 0 0;
    width: 0;
    margin-top: -26px;
    padding-top: 8px;
    align-self: flex-start;
    position: sticky;
    left: 0;
    z-index: 2;
    white-space: nowrap;
    text-indent: 14px;
    font-size: .75rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--nd-ink-3, #6b7280);
  }
  body.nd-chrome .nd-prodpage .nd-tt-wrap > .nd-tt { flex: 0 0 auto; }
  body.nd-chrome .nd-prodpage .nd-tt-wrap::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    margin-left: -14px;
    align-self: stretch;
    position: sticky;
    right: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
  }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 767.9px) {
    body.nd-chrome .nd-prodpage .nd-tt-wrap { background-image: none; }
    body.nd-chrome .nd-prodpage .nd-tt-wrap::after {
      background-image: linear-gradient(to left, rgba(20, 24, 31, .28), rgba(20, 24, 31, 0));
      animation: nd-tt-shadow linear both;
      animation-timeline: scroll(nearest inline);
    }
  }
  @keyframes nd-tt-shadow { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---------- доработка 113: «Типовые случаи и цена», строка выбора тарифа ЭО, «Что будет после заявки» ---------- */
/* ---------- типовые случаи и цена ---------- */
.nd-chrome .nd-sc {
  margin: 0 0 28px;
  padding: 18px 22px 16px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background-color: var(--c-surface);
}
.nd-chrome .nd-sc__title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--c-ink);
}
.nd-chrome .nd-sc__list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}
.nd-chrome .nd-sc__list > li {
  position: relative;
  margin: 0;
  padding: 5px 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-ink-2);
}
.nd-chrome .nd-sc__list > li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0.95em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--c-accent);
}
.nd-chrome .nd-sc__price {
  font-weight: 600;
  color: var(--c-ink);
}
.nd-chrome .nd-sc__tar { color: var(--c-ink); }
/* цена и тариф второй строкой: без тире между частями пункта */
.nd-chrome .nd-sc__meta { display: block; }
.nd-chrome .nd-sc .nd-sc__note {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-ink-2);
}

/* ---------- строка выбора тарифа ЭО ---------- */
.nd-chrome .nd-sc__pick {
  margin: 0 0 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-ink-2);
}
.nd-chrome .nd-sc__pick a {
  display: inline-block;
  min-height: 24px;
  line-height: 22px;
  border-bottom: 1px solid currentColor;
  font-weight: 600;
  color: var(--c-accent-ink);
  text-decoration: none;
}
.nd-chrome .nd-sc__pick a::after { content: none; }
.nd-chrome .nd-sc__pick a:hover,
.nd-chrome .nd-sc__pick a:focus-visible { color: var(--c-ink); }

/* вторая строка у «Корпоративного» */
.nd-chrome .nd-eot__note--2 { margin-top: -6px; }

/* ---------- «Что будет после заявки» в подвале ---------- */
.nd-chrome h3.nd-after__title {
  margin: 16px 0 6px;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--c-ink);
}
.nd-chrome .nd-after__list {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
}
.nd-chrome .nd-after__list > li {
  position: relative;
  margin: 0;
  padding: 2px 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-ink-2);
}
.nd-chrome .nd-after__list > li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--c-accent);
}

@media (max-width: 576px) {
  .nd-chrome .nd-sc { padding: 14px 16px 12px; }
  .nd-chrome .nd-sc__title { font-size: 1.0625rem; }
}

/* Доработка 117 (12.10.2026): сообщение при сбое отправки формы — p.nd-form-err, его вставляет main-ui.js (window.ndFormFail) */
.nd-form-err {
  margin: 0 0 16px;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  text-align: left;
  color: #c40b08;
}
.nd-form-err a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.nd-form-err a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}