/* ============================================================
   TISAM редизайн — базовые стили нового оформления.
   Всё, что относится к новому дизайну, скоупится под .dc-site,
   чтобы не задевать bootstrap-компоненты (модалки и т.п.).
   ============================================================ */

body {
    background: #E7ECEC;
}

.dc-site {
    font-family: "Roboto", system-ui, sans-serif;
    color: #231F20;
    -webkit-font-smoothing: antialiased;
}

.dc-site *,
.dc-site *::before,
.dc-site *::after {
    box-sizing: border-box;
}

/* Цвет ссылок по умолчанию. Кнопки исключены: у старых (.btn-mint, .btn-wt-*),
   bootstrap-овских (.btn) и новых (.dc-btn-*) цвет текста задан своими правилами
   со специфичностью (0,1,0) — без этого исключения `.dc-site a` (0,1,1) перебивал
   их и текст кнопок становился оранжевым.

   Исключения завёрнуты в :where(), чтобы они не поднимали специфичность правила:
   оно остаётся (0,1,1) и его перебивает любой компонентный класс вида
   `.dc-site .dc-xxx` (0,2,0) — .dc-cta-lg / .dc-cta-block / .dc-cta-hero,
   .dc-crumb-a, .dc-t16-med-link и т.п. со своим цветом текста. */
.dc-site a:not(:where(.btn, [class*="btn-"])) {
    color: #F88600;
}

/* контент нового дизайна тянется на всю ширину; секции сами центрируют
   свою внутреннюю часть через max-width: 1170px */
.dc-site {
    overflow: hidden;
}

/* сгенерированный mesh-фон (декоративная сетка) — блочный контейнер под SVG */
.dc-mesh > svg {
    display: block;
}

/* поля формы заявки */
.dc-site .dc-input {
    width: 100%;
    height: 50px;
    border-radius: 4px;
    border: 1px solid #AAA;
    background: #fff;
    padding: 0 16px;
    font-size: 16px;
    font-family: Roboto;
    color: #231F20;
    transition: border-color .18s, box-shadow .18s;
}

.dc-site .dc-input:focus {
    border-color: #F88600;
    box-shadow: 0 0 0 3px rgba(248, 134, 0, .15);
    outline: none;
}

/* ---- Кнопки нового дизайна (повторяющиеся стили из макетов) ---- */
.dc-site .dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    transition: background .18s, color .18s, border-color .18s;
}

.dc-site .dc-btn-lg { height: 57px; padding: 0 34px; font-size: 18px; }
.dc-site .dc-btn-sm { height: 42px; padding: 0 20px; font-size: 15px; }

/* оранжевая (основная) */
.dc-site .dc-btn-orange {
    background: #F88600;
    box-shadow: 0 0 6px rgba(248, 134, 0, .4);
    color: #fff;
}
.dc-site .dc-btn-orange:hover { background: #D87600; color: #fff; }

/* оранжевый контур (на светлом/тёмном) */
.dc-site .dc-btn-outline {
    background: transparent;
    border: 1.5px solid #F88600;
    color: #F88600;
}
.dc-site .dc-btn-outline:hover { background: #F88600; color: #fff; }

/* светлая полупрозрачная (на бирюзовом фоне) */
.dc-site .dc-btn-ghost {
    background: rgba(255, 255, 255, .08);
    border: 2px solid rgba(255, 255, 255, .55);
    color: #fff;
}
.dc-site .dc-btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---- Табы карточки продукта ---- */
.dc-site .dc-tabbar {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #E5EEEC;
}

.dc-site .dc-tabbar button {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 26px;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #8AA6A2;
    margin-bottom: -2px;
    transition: color .16s;
}
.dc-site .dc-tabbar button.dc-tab-active { color: #231F20; border-bottom-color: #F88600; }

/* ---- Карусель скриншотов (решения) ---- */
.dc-site .dc-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

/* ---- Галерея карточки продукта ---- */
.dc-site .dc-gallery-dots button[data-go] {
    width: 10px;
    height: 10px;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
    padding: 0;
    background: #C3DAD5;
    transition: all .2s;
}
.dc-site .dc-gallery-dots button[data-go].dc-go-active { width: 26px; background: #005E64; }
.dc-site .dc-gallery-thumbs button[data-go] { border: 2px solid #D8E7E4; transition: border-color .18s; }
.dc-site .dc-gallery-thumbs button[data-go].dc-go-active { border-color: #4ACF9F; }

/* Галерея без снимков (слот под будущие фото): класс вешает dc-site.js.
   Рамку и фон даёт сама заглушка, у сцены их убираем, чтобы не двоились. */
.dc-site .dc-gallery-empty .dc-stage { border: 0; background: transparent; }

/* ---- Скриншот, открывающийся в лайтбоксе (класс вешает dc-site.js) ---- */
.dc-site .dc-zoomable { cursor: zoom-in; transition: transform .2s; }
.dc-site .dc-zoomable:hover { transform: scale(1.01); }
