/* ТрейдКом · баннер согласия на cookie и строка юридических ссылок
 *
 * Оформление задаётся переменными: под каждый сайт свой набор,
 * см. sites.json. Баннер должен читаться как часть сайта,
 * а не как чужая вставка — поэтому шрифт, цвет кнопки и скругление
 * берутся с самого сайта.
 *
 * Селекторы через #tc-cc — чтобы стили сайта не перебивали баннер.
 */

/* Значения по умолчанию — строго на :root, там же, где их задаёт тема
   сайта. Если объявить их на #tc-cc, селектор по id перевесит :root
   и настройки сайта работать не будут: все баннеры станут одинаковыми. */
:root {
  --tc-accent: #1C3A19;
  --tc-accent-hover: #102216;
  --tc-on-accent: #FFFFFF;
  --tc-text: #3A3A39;
  --tc-bg: #FFFFFF;
  --tc-border: #D8E3D0;
  --tc-radius: 10px;
  --tc-btn-radius: 6px;
  --tc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tc-btn-weight: 700;
  --tc-soft: rgba(0, 0, 0, .05);
}

#tc-cc {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147482000;
  width: calc(100% - 40px);
  max-width: 440px;
  box-sizing: border-box;
  padding: 16px 18px;
  background: var(--tc-bg);
  color: var(--tc-text);
  border-radius: var(--tc-radius);
  box-shadow: 0 6px 28px rgba(16, 22, 34, .20), 0 0 0 1px rgba(16, 22, 34, .06);
  font-family: var(--tc-font);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .26s ease, transform .26s ease;
}

#tc-cc[data-shown="1"] { opacity: 1; transform: translateY(0); }

/* На телефоне — лист снизу во всю ширину: так меньше промахов по кнопке */
@media (max-width: 600px) {
  #tc-cc {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 24px rgba(16, 22, 34, .22);
    transform: translateY(100%);
  }
  #tc-cc[data-shown="1"] { transform: translateY(0); }
}

/* Шапка баннера: знак и текст */
#tc-cc .tc-cc__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
}

#tc-cc .tc-cc__mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--tc-accent);
}
#tc-cc .tc-cc__mark svg { display: block; width: 100%; height: 100%; }

#tc-cc .tc-cc__text {
  margin: 0;
  padding: 0;
  color: var(--tc-text);
  font-size: 12.5px;
  line-height: 1.5;
}

#tc-cc .tc-cc__link {
  color: var(--tc-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
#tc-cc .tc-cc__link:hover,
#tc-cc .tc-cc__link:focus-visible { color: var(--tc-accent-hover); text-decoration: none; }

#tc-cc .tc-cc__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0;
}

#tc-cc button {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--tc-btn-radius);
  padding: 9px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--tc-btn-weight);
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

#tc-cc .tc-cc__accept { background: var(--tc-accent); color: var(--tc-on-accent); }
#tc-cc .tc-cc__accept:hover,
#tc-cc .tc-cc__accept:focus-visible { background: var(--tc-accent-hover); }

/* Отказ равнозначен по заметности — требование к оформлению согласия */
#tc-cc .tc-cc__reject {
  background: transparent;
  color: var(--tc-accent);
  border-color: currentColor;
}
#tc-cc .tc-cc__reject:hover,
#tc-cc .tc-cc__reject:focus-visible { background: var(--tc-soft); }

#tc-cc button:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}

/* ---------- строка юридических ссылок в подвале ---------- */

.tc-legal-bar {
  --tc-bar-text: rgba(255, 255, 255, .60);
  --tc-bar-link: rgba(255, 255, 255, .78);
  --tc-bar-link-hover: #FFFFFF;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  padding: 14px 16px 16px;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--tc-bar-text);
}

.tc-legal-bar a {
  color: var(--tc-bar-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.tc-legal-bar a:hover,
.tc-legal-bar a:focus-visible {
  color: var(--tc-bar-link-hover);
  border-bottom-color: currentColor;
}

.tc-legal-bar i {
  font-style: normal;
  opacity: .35;
  user-select: none;
}

/* На узком экране разделители только мешают — прячем, разводим гэпом */
@media (max-width: 620px) {
  .tc-legal-bar { gap: 8px 14px; padding: 12px 14px 14px; font-size: 11px; }
  .tc-legal-bar i { display: none; }
}

/* Промо-плашка сайта не показывается, пока посетитель не решил
   вопрос с cookie: две всплывашки одновременно читаются как мусор */
html.tc-promo-hold .tc-promo-target { display: none !important; }

/* Значок reCAPTCHA и подпись Google в подвале: по просьбе владельца
   скрыты. Сервис описан в Политике использования cookie. */
.grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; }
.recaptcha-terms { display: none !important; }

/* ============================================================
   Промо-плашка сайта
   ------------------------------------------------------------
   Карточка собирается скриптом из того, что отдаёт модуль сайта:
   картинка, заголовок, подзаголовок и ссылка остаются вашими
   и правятся в админке как раньше. Скрипт только перекладывает
   их в новую структуру и добавляет форму с телефоном.

   Раскладка: картинка сверху во всю ширину, ниже панель с текстом,
   поле телефона, согласие и ряд действий. Появляется слева снизу
   после решения по cookie. Цвета и скругления — токены сайта.
   ============================================================ */

.promo_content,
.promo_popup {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: 20px !important;
  top: auto !important;
  width: 340px !important;
  max-width: calc(100% - 40px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--tc-bg, #FFF) !important;
  color: var(--tc-text, #333) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(16, 22, 34, .26), 0 0 0 1px rgba(16, 22, 34, .05) !important;
  font-family: var(--tc-font, inherit) !important;
  overflow: hidden !important;
  z-index: 2147481000 !important;
  /* Тема центрирует плашку через translateX(-50%). Вместе с нашим left
     это уводило карточку за край экрана — трансформ гасим. */
  transform: none !important;
  transition: opacity .24s ease-out;
}

/* Кнопка повторного вызова не нужна: плашка приходит сама после cookie */
.open_popup_btn { display: none !important; }

/* Родные обёртки модуля не должны мешать раскладке */
.promo_content .container-fluid,
.promo_content .container,
.promo_popup .container-fluid,
.promo_popup .container,
.promo_content .promo_popup_content,
.promo_popup .promo_popup_content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
  background: none !important;
  display: block !important;
}

/* ---- картинка сверху ---- */
.tc-promo__pic {
  position: relative;
  display: block;
  height: 148px;
  background: var(--tc-soft, rgba(0, 0, 0, .05));
}
.tc-promo__pic img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: none !important;
}

/* ---- крестик поверх картинки ---- */
.promo_content .promo_popup_header,
.promo_popup .promo_popup_header {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  z-index: 3 !important;
}
.promo_content .close_promo,
.promo_popup .close_promo {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #1a1a1a !important;
  font-size: 17px !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(16, 22, 34, .16);
  transition: background-color .16s ease;
}
.promo_content .close_promo:hover,
.promo_popup .close_promo:hover { background: #FFF !important; }

/* ---- тело карточки ---- */
.tc-promo__body { padding: 14px 16px 16px; }

/* Тема заливает абзацы и подписи внутри плашки градиентом —
   внутри нашей карточки это мусор, гасим у всего содержимого.
   Кнопки красятся сплошным цветом, поэтому их не задевает. */
.tc-promo__body,
.tc-promo__body * {
  background-image: none !important;
  text-shadow: none !important;
}
.tc-promo__body p,
.tc-promo__body span,
.tc-promo__body label { background-color: transparent !important; }

.promo_content .promo-title,
.promo_popup .promo-title {
  display: block !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: var(--tc-text, #222) !important;
  font-size: 15px !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: none !important;
  background-image: none !important;
}

.tc-promo__sub,
.promo_content .tc-promo__sub p,
.promo_popup .tc-promo__sub p {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--tc-text, #444) !important;
  opacity: .68;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-family: inherit !important;
  background: none !important;
  background-image: none !important;
}

/* ---- форма ---- */
.tc-promo__form { margin: 12px 0 0; }

.tc-promo__field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px;
  background: #FFF;
  color: var(--tc-text, #222);
  border: 1px solid var(--tc-border, #DDD);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tc-promo__field::placeholder { color: var(--tc-text, #888); opacity: .45; }
.tc-promo__field:focus {
  outline: none;
  border-color: var(--tc-accent, #1C3A19);
  box-shadow: 0 0 0 3px var(--tc-soft, rgba(0,0,0,.06));
}

.tc-promo__consent {
  /* Читается как обычный текст с галочкой в начале строки.
     Флекс тут не годится: темы переопределяют свои .ui-checkbox
     и подпись уезжала отдельным блоком далеко от квадратика. */
  display: block !important;
  position: relative;
  margin: 10px 0 0 !important;
  padding: 0 0 0 20px !important;
  font-size: 11px;
  line-height: 1.45;
  color: var(--tc-text, #444);
  opacity: .8;
  cursor: pointer;
}
.tc-promo__consent input[type="checkbox"] {
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  accent-color: var(--tc-accent, #1C3A19);
  cursor: pointer;
}
.tc-promo__consent > span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.tc-promo__consent a { color: var(--tc-accent, #1C3A19); text-decoration: underline; text-underline-offset: 2px; }
.tc-promo__consent.is-error { opacity: 1; color: #C0392B; }
.tc-promo__consent.is-error input[type="checkbox"] { outline: 2px solid #C0392B; outline-offset: 1px; }

/* ---- ряд действий: второстепенное слева, главное справа ---- */
.tc-promo__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 0;
}

.promo_content .pp-button,
.promo_content .pp-yes,
.promo_popup .btn__promo_popup {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  background: none !important;
  color: var(--tc-accent, #1C3A19) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  transition: opacity .16s ease;
}
.promo_content .pp-button::before,
.promo_content .pp-button::after,
.promo_content .pp-yes::before,
.promo_content .pp-yes::after,
.promo_popup .btn__promo_popup::before,
.promo_popup .btn__promo_popup::after {
  content: none !important;
  display: none !important;
}
.promo_content .pp-button:hover,
.promo_content .pp-yes:hover,
.promo_popup .btn__promo_popup:hover,
.promo_content .pp-button:focus-visible,
.promo_popup .btn__promo_popup:focus-visible {
  /* у темы на наведении вылезал закрашенный прямоугольник */
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: .65;
}

.tc-promo__submit {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 20px;
  border: 0;
  border-radius: var(--tc-btn-radius, 8px);
  background: var(--tc-accent, #1C3A19);
  color: var(--tc-on-accent, #FFF);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--tc-btn-weight, 700);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .16s ease, opacity .16s ease;
}
.tc-promo__submit:hover { background: var(--tc-accent-hover, #102216); }
.tc-promo__submit[disabled] { opacity: .6; cursor: default; }

.tc-promo__note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
}
.tc-promo__note.is-ok { color: #1E7B34; }
.tc-promo__note.is-bad { color: #C0392B; }

/* ---- телефон ---- */
@media (max-width: 600px) {
  .promo_content,
  .promo_popup {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .tc-promo__pic { height: 120px; }
  .tc-promo__body { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .tc-promo__field { height: 44px; font-size: 16px; }  /* 16px — иначе iOS зумит */
  .tc-promo__submit { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo_content,
  .promo_popup { transition: none !important; }
}

/* ---- тема сайта ---- */
:root {
  --tc-accent: #27AE60;
  --tc-accent-hover: #229954;
  --tc-on-accent: #FFFFFF;
  --tc-text: #343434;
  --tc-bg: #FFFFFF;
  --tc-border: #E2E2E8;
  --tc-radius: 5px;
  --tc-btn-radius: 5px;
  --tc-font: Roboto, Arial, Helvetica, sans-serif;
  --tc-btn-weight: 500;
  --tc-soft: rgba(39,174,96,.10);
}

/* ---- точечные правки под сайт ---- */

/* Подвал магазина: убираем пустоты. Ничего не переносим и не удаляем —
   только сжимаем отступы, которые давали почти треть высоты. */
footer { padding-bottom: 24px !important; }
footer .subsc { margin-bottom: 24px !important; }
footer .subsc__wrapper { padding: 20px 20px 20px 24px !important; }
footer .row > [class*="col-"]:empty { display: none !important; }
footer .footer-menu__title { margin-bottom: 10px !important; }
@media (min-width: 1200px) {
  footer .subsc__image { max-height: 190px; overflow: hidden; }
  footer .subsc__image img { max-height: 190px; width: auto; }
}