/* ==========================================================================
   glonass13.ru — собственные стили сайта
   --------------------------------------------------------------------------
   Базовая вёрстка использует стили из /assets/css/*.css — они достались
   вместе с исходной вёрсткой и отвечают за весь дизайн. Этот файл
   добавляет и правит то, что нужно нашему статическому сайту:
   блок заказа в подвале, ссылки «поделиться», вкладки товара,
   уведомление о cookie и страницу /order.

   ВАЖНО: этот файл копируется в site/assets/css/site.css скриптом
   tools/package_assets.py. Правьте src/css/site.css, а не копию.
   ========================================================================== */

/* --------------------------------------------------------------- заказ в подвале */
.footer-order-cta {
  font-size: 0.8rem;
  line-height: 1.5;
}

.footer-order-cta__title {
  font-weight: 700;
  margin-bottom: 0.35em;
}

.footer-order-cta__phones a {
  white-space: nowrap;
  font-weight: 700;
}

.footer-order-cta__link {
  display: inline-block;
  margin-top: 0.6em;
  font-weight: 700;
  text-decoration: underline;
}

/* ------------------------------------------------------------------ поделиться */
.share-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.8em;
  font-size: 0.75rem;
}

.share-links__label {
  opacity: 0.7;
}

.share-links a {
  display: inline-block;
  padding: 0.25em 0.7em;
  border: 1px solid currentColor;
  border-radius: 3px;
  text-decoration: none;
}

.share-links a:hover {
  opacity: 0.7;
}

/* ------------------------------------------------------- кнопка заказа в товаре */
.new-product-params-btns__anchor {
  display: block;
}

a.button_for_product,
a.order-button {
  display: inline-block;
  text-decoration: none;
}

/* ------------------------------------------------------------- вкладки товара */
/*
 * В исходной вёрстке вкладки переключались скриптом конструктора, который
 * показывал нужную панель. Без него показываем все панели: заголовки-вкладки
 * остаются, содержимое не пропадает.
 */
.new-product-tabs {
  display: flex;
  flex-wrap: wrap;
}

.new-product-tabs__btn {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.new-product-tabs__content,
.new-product-tab {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------- галерея товара */
/*
 * В исходных стилях показывается только первое фото:
 *   .new-product-gallery__slide-item …preview { display: none }
 *   :first-of-type …preview                    { display: block }
 * Переключал их скрипт конструктора (AngularJS), которого на статике
 * нет. Теперь переключение делает src/js/site.js: он вешает класс
 * is-active на нужный слайд. Это правило идёт после исходного и
 * перебивает :first-of-type, поэтому активный слайд показывается
 * всегда — независимо от того, какой он по счёту.
 */
/*
 * Первое фото показывается ещё и по :first-of-type из исходных стилей.
 * Если выбрано другое, первое надо убрать — иначе в кадре оказываются
 * сразу две картинки, и галерея делится пополам. Правило ниже
 * перебивает и :first-of-type, и наш is-active.
 */
/*
 * Правило ниже живёт внутри .new-product-gallery--js — класса, который
 * ставит скрипт. Пока скрипт не сработал, действует исходное
 * :first-of-type и видно первое фото. Если бы правило было безусловным,
 * то без JS галерея осталась бы пустой — а она должна читаться и без
 * скриптов (у нас их отключать нельзя).
 */
.new-product-gallery--js .new-product-gallery__slide-item:first-of-type:not(.is-active)
  .new-product-gallery__preview {
  display: none;
}

.new-product-gallery__slide-item.is-active .new-product-gallery__preview {
  display: block;
}

/* --------------------------------------------------------- уведомление о cookie */
.client-cookies-notice {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10000;
  max-width: 22rem;
  padding: 0.75rem;
  background: #fff;
  color: #222;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  font-size: 0.75rem;
  line-height: 1.4;
}

.client-cookies-notice__design {
  display: block;
}

.client-cookies-notice__button {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5em;
  border: 0;
  border-radius: 3px;
  background: #3772ff;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Классы AngularJS остались в разметке как наследие выгрузки.
   Движка на статике нет, поэтому прячем всё, что он размечал:
   иначе, например, слайдер на главной не показывается. */
.ng-cloak,
[class~="ng-cloak"] {
  display: block !important;
}

/* -------------------------------------------------------- липкая шапка и меню */
.site-header.is-stuck {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.92);
}

.combo-box__content_open {
  display: block !important;
}

/* ------------------------------------------------- блок заказа на карточке товара */
/*
 * На широком экране кнопка «Оформить заказ» и кнопки «Поделиться»
 * стоят в одной строке — так задумано конструктором. На телефоне
 * обе строки попадали в одну ячейку сетки и наезжали друг на друга:
 * кнопка заказа перекрывала «Поделиться: ВК Telegram WhatsApp»
 * и делала их ненажимаемыми.
 *
 * Ставим блоку обычную вертикальную раскладку: кнопка заказа
 * сверху, «Поделиться» под ней. На десктопе ничего не меняется.
 */
@media (max-width: 47.9375em) {
  /*
   * На широком экране блок заказа обычный, в потоке. На телефоне
   * конструктор делал его position:absolute и вешал поверх текста —
   * так задумана была «плавающая» панель заказа, которую двигал
   * скрипт конструктора. Скрипта нет, панель осталась висеть поверх
   * страницы и закрывала кнопки «Поделиться» под собой.
   *
   * Возвращаем блок в поток: кнопка «Оформить заказ» становится
   * обычной строкой над «Поделиться», ничего не перекрывается.
   */
  .new-product-params-btns__anchor {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }

  .new-product-params-btns {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }

  .new-product-params-btns--controls {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------- фон слайдера */
/*
 * В исходной вёрстке фону слайдера стоит z-index:-101 — он должен был
 * лежать под контентом, но над общим фоном страницы. На боевом сайте
 * это работало, потому что скрипт конструктора вешал transform на
 * обёртки слайдера, а transform создаёт новый контекст наложения.
 * Скрипта на статике нет, и -101 уводил картинку за .site-background,
 * то есть за светлую заливку страницы — фотография пропадала.
 *
 * Ставим z-index:0: фон слайдера остаётся под текстом
 * (.slider-item__content имеет z-index:10), но больше не уходит
 * за фон страницы. Значение одинаковое на всех ширинах.
 */
.slider-item__background {
  z-index: 0;
}

/* --------------------------------------------------- заголовок-баннер страницы */

/*
 * Шапка на главной наезжает на первый экран — это нужно слайдеру, поэтому
 * там она остаётся position:absolute. На внутренних страницах поверх шапки
 * выводится заголовок страницы (светлая полоса с белым текстом),
 * и раньше он уезжал под неё: отступ сверху проставлял скрипт
 * конструктора. На статике шапка становится обычным блоком —
 * заголовок сам встаёт под неё, и значения в CSS не нужно хардкодить.
 */
body:not(.site_main-page) .site-header {
  position: relative !important;
  top: auto !important;
}

/* Полоса с заголовком страницы светлая, поэтому текст в ней тёмный.
   Раньше стоял белый — на телефоне заголовок не читался совсем. */
.widget__header {
  background-color: #dbeef3;
  color: #123a45;
}

.widget__header a {
  color: #123a45;
}

/* ------------------------------------------------------------ страница /order */
.order-lead {
  margin-bottom: 1.75em;
}

.order-lead p {
  margin-bottom: 0.8em;
}

.order-lead__btn,
a.order-lead__btn {
  display: inline-block;
  padding: 0.75em 1.8em;
  border-radius: 3px;
  background: #3772ff;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

a.order-lead__btn:hover {
  background: #2a5cdb;
  color: #fff;
}

.order-h {
  margin: 1.6em 0 0.7em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 1.15rem;
}

.order-phones {
  margin-bottom: 1em;
}

.order-contact {
  text-align: center;
}

.order-contact__title {
  margin-bottom: 0.2em;
  font-size: 0.85rem;
  opacity: 0.75;
}

.order-contact__phone {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.order-contact__note {
  margin-top: 0.35em;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.8;
}

.order-block-row {
  margin-bottom: 0.5em;
}

.order-block {
  margin-bottom: 1em;
  font-style: normal;
}

.order-block__title {
  margin-bottom: 0.25em;
  font-size: 0.85rem;
  opacity: 0.75;
}

.order-address {
  line-height: 1.7;
}

.order-steps {
  margin-left: 1.3em;
}

.order-steps li {
  margin-bottom: 0.7em;
}

.order-catalog li {
  margin-bottom: 0.4em;
}

.order-requisites {
  width: 100%;
  margin-bottom: 1em;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.order-requisites th,
.order-requisites td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  text-align: left;
  vertical-align: top;
}

.order-requisites th {
  width: 36%;
  font-weight: 700;
}

.order-small {
  font-size: 0.8rem;
  opacity: 0.75;
}

/* ------------------------------------------------------------------ доступность */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #3772ff;
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}