/* =========================================================
   SOBE SPAIN — GLOBAL CUSTOM CSS · sobeinvest.es
   Вставка: Настройки сайта → Вставка кода → «Редактировать CSS»

   Отобрано из глобального CSS sobeinvest.com. Перенесено только то,
   что относится к блокам, реально используемым на .es.

   ЧТО НЕ ПЕРЕНЕСЕНО и почему:
   · .t-store (23 правила) — каталога товаров на .es нет
   · .t706 (12) — корзины нет
   · .t786 (9)  — попапа товара нет
   · .t228, .tmenu-mobile (9) — нативное меню Tilda не используется,
     у нас свой хедер на T123 (.sbhd)
   · .t981 (7)  — нативный футер не используется, у нас свой (.sft)
   · .t182 (4)  — нативная обложка не используется, у нас свой hero
   · .t944, .t814, .t050, .t778 — этих блоков на сайте нет
   Итого убрано ~70 правил: они безвредны, но это мёртвый вес
   в каждом запросе и путаница при отладке.

   ЧТО ИЗМЕНЕНО:
   · Цвета скроллбара приведены к палитре SOBE: были #5d683f/#283322
     (не из фирменной палитры), стали форест #1B2D1F и бронза #A07C61.
   ========================================================= */


/* =========================================================
   ПОПАПЫ
   ========================================================= */

/* Размытие фона у открытых попапов */
.t-popup.t-popup_show {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* Скругление контейнеров попапов */
.t390 .t-popup__container,
.t750 .t-popup__container,
.t702__wrapper,
.t-popup__container {
    border-radius: 30px !important;
}

/* Скругление кнопки закрытия */
.t-popup__close {
    border-radius: 10px !important;
}

/* Внешний отступ статического попапа */
.t-popup__container.t-popup__container-static {
    margin: 30px auto;
}


/* =========================================================
   АНИМАЦИИ
   ========================================================= */

/* Скорость появления блоков */
.t-animate {
    transition-duration: 1s !important;
}

/* Скорость hover-анимации кнопок */
.t-btn:not(.t-animate_no-hover) {
    transition-duration: 0.2s !important;
}


/* =========================================================
   ФОРМЫ
   ========================================================= */

/*
   Скрывает общий блок ошибок Tilda.
   Подсветка отдельных неправильных полей при этом сохраняется.
*/
.t-form__errorbox-middle {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Межбуквенный интервал у нативных кнопок Tilda.
   Наши кнопки в T123 задают letter-spacing сами — это для форм. */
.t-btn,
.t-submit {
    letter-spacing: 2px;
}


/* =========================================================
   SCROLLBAR — палитра SOBE
   ========================================================= */

@media screen and (min-width: 1200px) {

    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: #1B2D1F transparent;
    }

    /* Chrome, Edge, Safari */
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #1B2D1F;
        background-clip: content-box;
        border: 2px solid transparent;
        border-radius: 10px;
    }

    *::-webkit-scrollbar-thumb:hover {
        background-color: #A07C61;
    }
}

@media screen and (max-width: 980px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #1B2D1F transparent !important;
    }
}


/* =========================================================
   МОБИЛЬНЫЕ — ДО 640 PX
   ========================================================= */

@media screen and (max-width: 640px) {

    /* Кнопки форм */
    .t-btn,
    .t-submit {
        letter-spacing: 1px;
    }

    /* Политика в форме обратного звонка */
    .t702 .t-text_xs {
        font-size: 16px;
    }

    /* Заголовок формы обратного звонка */
    .t702 .t702__title {
        margin-bottom: 15px;
    }
}


/* =========================================================
   ACCESSIBILITY — ОТКЛЮЧЕНИЕ АНИМАЦИЙ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .t-animate,
    .t-btn,
    .t-submit {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   SAFARI НА IPHONE — ОТКЛЮЧЕНИЕ АВТОДОРИСОВКИ

   Safari на iOS сам находит в тексте телефоны, адреса, даты
   и email и превращает их в синие ссылки со своим стилем.
   Он же перерисовывает поля форм, подсвечивает тапы серым
   и увеличивает шрифт при повороте экрана.
   Ниже — отключение всего этого.

   ⚠ Часть работы делает мета-тег, а не CSS. В общем HEAD
     сайта должно стоять:
     
     Сейчас там только telephone=no — дополнить.
   ========================================================= */

/* --- 1. Автоопределённые сущности: телефоны, адреса, даты ---
   Safari оборачивает их в собственные теги и красит в синий.
   Возвращаем наследование цвета и убираем подчёркивание. */
a[x-apple-data-detectors],
span[x-apple-data-detectors],
.x-apple-data-detectors,
a[href^="tel"],
a[href^="mailto"] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    pointer-events: auto;
}

/* Ссылки, которые Safari создаёт внутри наших блоков —
   не должны выбиваться из типографики */
#allrecords a[x-apple-data-detectors] {
    color: inherit !important;
    border-bottom: none !important;
}

/* --- 2. Инфляция шрифта при повороте экрана ---
   Safari сам увеличивает текст при смене ориентации. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* --- 3. Серая подсветка при касании --- */
* {
    -webkit-tap-highlight-color: transparent;
}

/* --- 4. Собственная отрисовка полей форм ---
   Safari рисует полям скруглённые углы, внутреннюю тень
   и градиент, игнорируя заданные стили. */
input,
textarea,
select,
button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* Поля Tilda — сохраняем заданное скругление после сброса */
.t-input,
.t-submit,
.t-inputtextarea {
    -webkit-appearance: none;
    appearance: none;
}

/* Крестик очистки в полях поиска */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
    -webkit-appearance: none;
    appearance: none;
}

/* --- 5. Жёлтая заливка автозаполнения ---
   Safari и Chrome красят автозаполненные поля в жёлтый.
   Перебиваем через тень: свойство background они игнорируют. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FBF9F3 inset !important;
    box-shadow: 0 0 0 1000px #FBF9F3 inset !important;
    -webkit-text-fill-color: #1B2D1F !important;
    caret-color: #1B2D1F;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- 6. Зум при фокусе на поле ---
   Safari увеличивает страницу, если шрифт поля меньше 16px.
   Единственная надёжная защита — не опускаться ниже 16px. */
@media screen and (max-width: 980px) {
    input,
    textarea,
    select,
    .t-input,
    .t-inputtextarea {
        font-size: 16px !important;
    }
}

/* --- 7. Выделение текста и меню копирования ---
   Оставляем выделение в контенте, убираем на служебных элементах. */
button,
.t-btn,
.t-submit,
.sbhd,
.sft {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* --- 8. Инерционная прокрутка и «резиновый» край ---
   Форест за пределами страницы виден при оттягивании. */
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
}

/* --- 9. Вырез и скруглённые углы экрана --- */
@supports (padding: max(0px)) {
    .sft,
    .sbhd__bar {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }
}


/* =========================================================
   ГОРИЗОНТАЛЬНЫЙ ВЫЕЗД — СТРАХОВКА

   Если какой-либо блок окажется шире экрана, страница начнёт
   прокручиваться вбок, а из-под неё покажется форест-фон html.
   На мобильном это выглядит как тёмная полоса справа и сдвиг
   всего контента. Правило ниже не даёт этому случиться.
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}