/* ==========================================================================
   ФГД — общие стили сайта (Настройки сайта → Ещё → CSS)
   --------------------------------------------------------------------------
   Содержание:
   0. Переменные (фирменные градиенты)
   1. Скроллбар
   2. Списки с градиентными маркерами (.uc-gradient-list) и списки в Zero-блоках
   3. Заголовки H2 с градиентной подложкой (.uc-h2)
   4. Контурный текст (.kontur, .kontur-grey, .kontur-head)
   5. Кнопки с эффектом при наведении (.shadow, .btn-shadow)
   6. Формы: кнопка отправки, загрузка файлов, раскладка полей
   7. Галерея: модальное окно и табы (.uc-tabs-gradient)
   8. Блок «Ключевые возможности» (.vozmozhnosti)
   9. Прочие правки блоков (слайдер, заголовок галереи, соцсети в подвале)
   10. Шапка — только то, что не входит в блок T123

   ВАЖНО: стили выпадающего меню шапки (.t456__list_item, .t-menu__link-item,
   .t966…, .t3112…) живут ТОЛЬКО в блоке T123 в шапке. Здесь их не дублируем.
   ========================================================================== */


/* ---------- 0. Переменные ---------- */
:root {
    /* основной фирменный: золото → оранжевый → бордо */
    --fgd-grad-brand: rgba(182, 124, 49, 1) 0%, rgba(203, 100, 37, 1) 49%, rgba(126, 16, 45, 1) 100%;
    /* акцент для текста и подчёркиваний кнопок: бордо → оранжевый */
    --fgd-grad-accent: #7e102d, #f5a623;
    /* акцент меню и табов: красный → оранжевый */
    --fgd-grad-menu: #e53935, #f5a623;
}


/* ---------- 1. Скроллбар ---------- */
/* Chrome, Edge, Safari */
html::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
html::-webkit-scrollbar-track {
    background: #24272a;
}
html::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #7e102d 0%, #cb6425 50%, #b67c31 100%) padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}
html::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(to right, #7e102d 0%, #cb6425 50%, #b67c31 100%) padding-box;
}
/* Firefox — стандартные свойства */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-color: #cb6425 #24272a;
        scrollbar-width: thin;
    }
}


/* ---------- 2. Списки ---------- */
/* 2.1 Списки с градиентными кружками-маркерами: класс uc-gradient-list на блоке */
.uc-gradient-list ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.uc-gradient-list ul > li {
    list-style: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 0 0 15px !important;
    line-height: 1.3;
}
.uc-gradient-list ul > li::before {
    content: "" !important;               /* перебивает тире из п. 2.2 */
    position: absolute;
    left: 0;
    top: 0.375em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: linear-gradient(135deg, #B67C31 0%, #CB6425 49%, #7E102D 100%);
    /* маска оставляет только кольцо толщиной ~2px */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    pointer-events: none;
}

/* 2.2 Все списки внутри Zero-блоков: маркер «- » вместо точки */
.tn-atom li {
    list-style: none;
}
.tn-atom li:before {
    content: "- ";
}

/* 2.3 Ссылки внутри Zero-блоков: белые с подчёркиванием при наведении */
.tn-atom a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}


/* ---------- 3. Заголовки H2 с градиентной подложкой: класс uc-h2 на блоке ---------- */
.uc-h2 h2 {
    position: relative;
    z-index: 1;
    display: inline;
    text-shadow: 2px -1px 0px #fff;
}
.uc-h2 h2:after {                         /* градиентная «полоса» под текстом */
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: -10px;
    z-index: -1;
    width: 100%;
    height: 0.7em;
    padding-right: 90px;                  /* насколько полоса выступает вправо */
    border-radius: 30px;
    background-image: linear-gradient(0.25turn, var(--fgd-grad-brand));
}
@media (max-width: 900px) {
    .uc-h2 h2:after {
        padding-right: 25px;
    }
}
@media (max-width: 480px) {
    .uc-h2 h2 {
        width: 100%;
    }
}


/* ---------- 4. Контурный текст ---------- */
.kontur-grey {                            /* серый контур, прозрачная заливка */
    -webkit-text-stroke: 1px #313131;
    color: transparent;
}
.kontur {                                 /* красный контур */
    -webkit-text-stroke: 1px #a3382a;
    color: transparent;
}
.kontur-head {                            /* светлый контур с полупрозрачной заливкой */
    -webkit-text-stroke: 1px #dddddd;
    color: #ffffff36;
}


/* ---------- 5. Кнопки ---------- */
/* 5.1 .shadow — кнопка «Оставить заявку» на главной: текст становится градиентным */
.shadow {
    transition: 1s;
}
.shadow:hover {
    background-image: linear-gradient(0.75turn, rgba(182, 124, 49, 1) 0%, rgba(203, 100, 37, 1) 75%, rgba(126, 16, 45, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: none;
}
.shadow:hover .tn-atom {
    color: transparent !important;
    text-decoration: underline;
    transition: 1s;
}
.shadow .tn-atom a:hover {               /* не даём п. 2.3 сделать текст белым */
    color: transparent !important;
}

/* 5.2 .btn-shadow — кнопки в Zero-блоках: объёмная тень, градиентный текст, подчёркивание */
.btn-shadow,
.btn-shadow-form .t-submit {
    transition: 0.2s;
}
.btn-shadow:hover {
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
    box-shadow: 6px -8px 16px rgb(45 45 45 / 50%), 8px 8px 16px rgb(0 0 0 / 50%),
                inset -4px -4px 8px rgb(87 87 87 / 51%), inset 4px 6px 8px rgb(11 11 11 / 65%);
}
.btn-shadow:hover span {
    background: linear-gradient(90deg, var(--fgd-grad-accent)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
.btn-shadow .tn-atom__button-text {
    position: relative;
}
.btn-shadow .tn-atom__button-text:after {  /* подчёркивание: ширина 0 → 100% */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--fgd-grad-accent));
    transition: 0.2s;
}
.btn-shadow:hover .tn-atom__button-text:after {
    width: 100%;
}


/* ---------- 6. Формы ---------- */
/* 6.1 Кнопка «Отправить» во всех формах и кнопка загрузки файла */
.t-submit,
.t-upwidget-container__button {
    position: relative;                   /* для подчёркивания ::after */
    transition: 0.2s;
}
.custom-form .t-submit {
    width: 100% !important;
    font-weight: 500;
}
.t-submit::after,
.t-upwidget-container__button::after {    /* подчёркивание внутри кнопки, под текстом */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--fgd-grad-accent));
    transition: width 0.2s ease-in-out;
}
.t-submit:hover,
.t-upwidget-container__button:hover {
    box-shadow: 6px -8px 16px rgb(118 118 118 / 90%), 8px 8px 16px rgb(46 44 44 / 50%),
                inset -4px -4px 8px rgb(72 72 72 / 51%), inset 4px 6px 8px rgb(6 6 6 / 65%) !important;
    background: linear-gradient(90deg, var(--fgd-grad-accent));   /* градиентный текст */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
.t-submit:hover::after,
.t-upwidget-container__button:hover::after {
    width: 130px;                         /* длина подчёркивания при наведении, в px */
}

/* 6.2 Виджет загрузки файлов */
.t-upwidget {
    display: flex;
    justify-content: center;
    background: #262626;
    border-radius: 25px;
}
.t-upwidget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
}
.t-upwidget-container__button {
    width: 100%;
    padding: 2px 8px;
}
.t-upwidget-container__button.t-text {
    text-transform: uppercase;
    font-weight: 500;
}

/* 6.3 Раскладка полей формы заявки в 2 колонки.
   ВНИМАНИЕ: действует на ВСЕ формы сайта. Расстановка привязана к названиям полей. */
.t-form__inputsbox {
    display: grid !important;
    grid-template: 1fr / 1fr 1fr;
    gap: 0 15px;
}
.t-form__inputsbox .t-input-group {
    margin-bottom: 10px !important;
}
/* левая колонка */
.t-input-group[data-field-name="Название организации"]       { grid-column: 1; grid-row: 1; }
.t-input-group[data-field-name="ИНН организации"]            { grid-column: 1; grid-row: 2; }
.t-input-group.t-input-group_ph[data-field-name="Телефон"]   { grid-column: 1; grid-row: 3; }
.t-input-group[data-field-name="E-mail"]                     { grid-column: 1; grid-row: 4; }
.t-input-group[data-field-name="Политика конфиденциальности"] { grid-column: 1; grid-row: 5; }
.tn-form__submit                                             { grid-column: 1; grid-row: 6; }
/* правая колонка */
.t-input-group[data-field-name="Имя"]                        { grid-column: 2; grid-row: 1; }
.t-input-group[data-field-name="Техническое задание"]        { grid-column: 2; grid-row: 2 / 6; }
.t-input-group[data-field-name="Файлы"]                      { grid-column: 2; }
.t-input-group[data-field-name="Техническое задание"] textarea,
.t-input-group[data-field-name="Техническое задание"] .t-input-block {
    height: 100% !important;              /* поле ТЗ растягивается на высоту левой колонки */
}

/* 6.4 Телефон: поля в одну колонку, светлый чекбокс согласия */
@media (max-width: 479px) {
    .t-form__inputsbox {
        display: block !important;        /* было flex — block надёжнее отменяет сетку */
    }
    .t-checkbox__labeltext {
        color: #fff;
        font-size: 12px;
    }
    .t-checkbox__indicator {
        border: 2px solid #ffffff;
    }
    .t-upwidget .t-upwidget-container__button {
        max-width: 265px !important;
        line-height: 39px !important;
    }
}


/* ---------- 7. Галерея ---------- */
/* 7.1 Модальное окно с увеличенным фото */
.t-zoomer__bg {
    background: #00000096 !important;
}
.t-zoomer__container {
    background-color: transparent !important;
}
.t-zoomer__comments div {
    color: #fff !important;
}
@media (min-width: 1200px) {
    .t-zoomer__wrapper .t-carousel__zoomer__img {
        max-width: 80%;
    }
}

/* 7.2 Табы галереи (T1281): класс uc-tabs-gradient на блоке */
.uc-tabs-gradient .t1281 .t1281__tab,
.uc-tabs-gradient .t1281 .t1281__tab_active {
    border-bottom: none !important;       /* убираем стандартную линию… */
}
.uc-tabs-gradient .t1281__title,
.uc-tabs-gradient .t1281__tab {
    position: relative;
}
.uc-tabs-gradient .t1281__title:hover {
    background: #313131;
}
.uc-tabs-gradient .t1281__tab:after {     /* …и рисуем свою: серая у обычного таба */
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #777;
    transition: 0.2s;
}
.uc-tabs-gradient .t1281__tab_active:after {   /* градиентная у активного */
    background: linear-gradient(90deg, var(--fgd-grad-menu));
}
.uc-tabs-gradient .t1281 .t1281__tab_active .t1281__title-text {
    background-image: linear-gradient(0.75turn, rgba(182, 124, 49, 1) 0%, rgba(203, 100, 37, 1) 75%, rgba(126, 16, 45, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
#rec1898729451.uc-tabs-gradient .t1281__title {    /* отступы табов в конкретном блоке галереи */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* ---------- 8. «Ключевые возможности»: градиентная рамка при наведении ---------- */
/* Классы: vozmozhnosti — на группе, border-gradient — на элементе с рамкой */
.vozmozhnosti .border-gradient .tn-atom {
    position: relative;
    border: 2px solid transparent !important;   /* резерв места, чтобы блок не дёргался */
}
.vozmozhnosti .border-gradient .tn-atom::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    padding: 2px;                         /* толщина рамки */
    border-radius: inherit;               /* скругление берётся из Тильды */
    background: linear-gradient(0.68turn, rgba(182,124,49,1) 0%, rgba(203,100,37,1) 51%, rgba(126,16,45,1) 100%);
    /* маска вырезает середину — остаётся только рамка */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.vozmozhnosti:hover .border-gradient .tn-atom::before {
    opacity: 1;
}


/* ---------- 9. Прочие правки блоков ---------- */
/* 9.1 Слайдер T1148: стрелка «влево» поверх слайдов */
.t1148__control_left {
    z-index: 1;
}

/* 9.2 Заголовок «Галерея производства» накладывается на следующий блок */
.uc-head-galereya,
a[name="galereya"] + .uc-h2 {
    margin-bottom: -130px;
    pointer-events: none;
}
@media (max-width: 960px) {
    .uc-head-galereya + .t-rec,
    a[name="galereya"] + .uc-h2 + .t-rec {
        padding-top: 135px !important;
    }
}

/* 9.3 Подвал: звёздочка у иконки Instagram (пометка о запрещённой в РФ соцсети) */
li.t-sociallinks__item.t-sociallinks__item_instagram {
    position: relative;
}
li.t-sociallinks__item.t-sociallinks__item_instagram:after {
    content: "*";
    position: absolute;
    top: -3px;
    right: -8px;
    color: #c8372f;
}


/* ---------- 10. Шапка (дополнение к блоку T123) ---------- */
/* Активный пункт меню (текущая страница) — без приглушения */
#rec1609520141 .t-menu__link-item.t-active {
    opacity: 1;
}
#rec1609520141 .t-menu__link-item.t-active:hover {
    color: transparent !important;
}