/* Masons — СВЕТЛАЯ ТЕМА. Активна на html[data-theme="light"].
   Значения сняты пипеткой из ОФИЦИАЛЬНЫХ Figma-рендеров файла Z2vVG3MxH5kquhayLqmOlk:
   figma-home.png / fig-home-top.png / fig-home-adv.png / figma-home-banner.png / figma-foundation.png.
   Подключается ПОСЛЕ app.css. Тёмная тема = дефолт движка (без атрибута). */

html[data-theme="light"] {
  --primary: #C96442;                     /* терракота-акцент: кнопки/ссылки/цифры (Figma) */
  --primary-32: rgba(246, 181, 96, 0.32); /* золото сохраняем для .button--light (secondary) */
  --primary-48: rgba(246, 181, 96, 0.48);
  --main-text: #141413;                   /* тёмный текст (Figma) */
  --dark-bg: #FFFFFF;                      /* КАРТОЧКИ/хедер-пилюля/попапы = БЕЛЫЕ (Figma) */
  --dark-bg-80: rgba(255, 255, 255, 0.85);
  --color-gray-1f: #F4ECDF;               /* лунки/поля/дропдауны = кремовые внутри белых карточек */
  --color-gray-29: #FBF6EE;               /* приподнятая поверхность / hover */
  --color-gray-3e: #EADFCE;               /* бордеры карточек — тёплый беж */
  --color-gray-5e: #B9A98F;               /* активный бордер поля */
  --color-gray-7f: #7F7F7F;               /* серый текст */
  --semantic-green: #34C759;
  --shadow-color-accent: #C96442;
}

/* ============================================================================
   ФОН СТРАНИЦЫ — тёплый градиент кремовый→peach (Figma bg #F4ECDF → #F4DDCC),
   не сплошной цвет. body = базовый крем; .page = радиальный тёплый градиент.
   ============================================================================ */
/* Фон = брендовый ассет home-bg/body-bg (та же геометрия орнамента-глаза + сетка + тёплое
   свечение, что в Figma), перекрашенный дуотоном в цвета Figma (крем #F4ECDF + peach).
   Структура 1:1 с движком: .page = body-bg, .page--home перекрывает на home-bg. */
/* Фон вешаем на .wrapper (полная высота страницы). Иначе <main class="page page--home">
   кончается сразу после блока партнёров (h≈2568), а .subscribe/.faq/.footer — его СЁСТРЫ
   ниже → под ними виден плоский body = «слом фона». В тёмной теме не видно (body тёмный).
   :has() выбирает арт по типу страницы: home → home-bg, внутренние → body-bg. */
html[data-theme="light"] body {
  background-color: #F4ECDF;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
html[data-theme="light"] body:has(.page--home) {
  background-image: url("../../assets/img/light/home-bg-light.webp?v=9");
}
html[data-theme="light"] body:has(.page):not(:has(.page--home)) {
  background-image: url("../../assets/img/light/body-bg-light.webp?v=9");
  /* fixed: body-bg почти квадратный → с cover/scroll покрывал только первый экран (шов
     «пополам» на длинных страницах). fixed = ornament фиксированный бэкдроп, покрывает всю длину. */
  background-attachment: fixed;
}
/* разделители вопросов FAQ: #EADFCE слишком бледный на креме → более видимый тёплый */
html[data-theme="light"] .spollers__item { border-top-color: #D6C3A2 !important; }


html[data-theme="light"] .page,
html[data-theme="light"] .page--home,
html[data-theme="light"] .page--nobg { background-image: none !important; }
html[data-theme="light"] .features::before,
html[data-theme="light"] .partners::before { background-image: none !important; }
html[data-theme="light"] .footer,
html[data-theme="light"] .user-menu__wrapper { background-image: none !important; }
/* страница логина/авторизации: движковый login-bg (тёмный глаз+сетка+луч) → светлый медный */
html[data-theme="light"] .authorization {
  background-image: url("../../assets/img/light/login-bg-light.webp?v=1") !important;
}

/* ============================================================================
   КАРТОЧКИ — в Figma БЕЛЫЕ с тёплым бордером и мягкой тенью.
   .hero__head/.advantages__item/.subscribe__body в движке = var(--dark-bg) → уже #fff.
   .review-card в движке = var(--color-gray-1f) → форсим белый.
   ============================================================================ */
html[data-theme="light"] .review-card { background-color: #FFFFFF !important; }
html[data-theme="light"] .hero__head,
html[data-theme="light"] .advantages__item,
html[data-theme="light"] .review-card {
  border-color: #EADFCE;
  box-shadow: 0 4px 20px rgba(90, 50, 20, 0.05);
}

/* герой-карточка: белая + медные монеты справа (Figma). content:url для drag-фикса. */
html[data-theme="light"] .hero__head {
  background-color: #FFFFFF !important;
  background-image: url("../../assets/img/light/hero-coins.png?v=4") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: contain !important;
}

/* ---- primary-кнопка: терракота + белый текст (Figma). secondary/red не трогаем ---- */
html[data-theme="light"] .button:not(.button--light):not(.button--red) {
  background: #C96442;
  color: #fff;
}
html[data-theme="light"] .button:not(.button--light):not(.button--red):hover { background: #AB4F30; }
/* лёгкое терракотовое свечение основных кнопок на ховере — по принципу золотого свечения
   в тёмной теме (dark: box-shadow 0 0 16px #f4a844). Мягче (alpha) под светлый фон. */
html[data-theme="light"] .button:not(.button--light):not(.button--red):hover {
  box-shadow: 0 0 18px 0 rgba(201, 100, 66, 0.5);
}
html[data-theme="light"] .button--light:hover,
html[data-theme="light"] .button--red:hover { box-shadow: none; }

/* переключатель switch: заливка терракота, бегунок белый (Figma) */
html[data-theme="light"] .switch__input:checked ~ .switch__check { background: #C96442; }
html[data-theme="light"] .switch__check::before { background-color: #fff; }

/* таблицы кабинета (заявки/рефералы/реквизиты) — движок даёт тёмный rgba(15,15,15,.8) →
   раньше делал cream-translucent, сливалось с кремовым фоном (казалось «прозрачным»).
   Делаем БЕЛУЮ карточку с тенью — как стат-карточки кабинета. */
html[data-theme="light"] .exchange-table,
html[data-theme="light"] .details-table {
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(90, 50, 20, 0.05);
}

/* fade-градиент карусели отзывов → на крем */
html[data-theme="light"] .reviews__slider::before {
  background: linear-gradient(180deg, rgba(244, 236, 223, 0) 0%, #F4ECDF 100%);
}
html[data-theme="light"] body::after { background-color: rgba(214, 200, 177, 0.2); }

/* статус-пилюли: в Figma текст ТЁМНЫЙ на семантик-тинте */
html[data-theme="light"] .status,
html[data-theme="light"] .status--yellow,
html[data-theme="light"] .status--red,
html[data-theme="light"] .status--green { color: #141413; }
/* пилюля статуса в таблице обменов рвалась по буквам («ОТМЕНЕН/А») → одна строка, полная */
html[data-theme="light"] .status {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* белые SVG-иконки движка (спойлер active / accordion chevron) → тёмный штрих */
html[data-theme="light"] .spollers__title.--spoller-active::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2V14M2 8L14 8' stroke='%23141413' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
html[data-theme="light"] .accordion-block__title::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 5.50012L7.99994 10.5001L12.9999 5.50012' stroke='%23141413' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

/* уведомления exchange (.mn-notice) → тёмный текст */
html[data-theme="light"] .mn-notice { color: #141413 !important; }
html[data-theme="light"] .mn-notice a { color: #C96442 !important; }
html[data-theme="light"] .mn-notice__icon circle,
html[data-theme="light"] .mn-notice__icon path { stroke: #7F7F7F !important; }

/* ============================================================================
   ШРИФТЫ — Figma Foundation: везде Finlandica; заголовки = Medium (500).
   Bold/700 в дизайне НЕТ. Cormorant (uikit2, тёмный бренд) в светлой ОТКЛЮЧЁН.
   ============================================================================ */
html[data-theme="light"] .title--h1,
html[data-theme="light"] .title--h2,
html[data-theme="light"] .hero__head-title,
html[data-theme="light"] .advantages__item-title,
html[data-theme="light"] .authorization__subtitle,
html[data-theme="light"] .text-section__content h1,
html[data-theme="light"] .text-section__content h2,
html[data-theme="light"] .text-section__content h3,
html[data-theme="light"] .text-section__content h4,
html[data-theme="light"] .text-section__content h5,
html[data-theme="light"] .text-section__content h6,
html[data-theme="light"] .info-page__content h1,
html[data-theme="light"] .info-page__content h2,
html[data-theme="light"] .info-page__content h3,
html[data-theme="light"] .info-page__content h4,
html[data-theme="light"] .info-page__content h5,
html[data-theme="light"] .info-page__content h6 {
  font-family: 'Finlandica', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* ============================================================================
   TG-БАННЕР (.subscribe__body) — в Figma ТЁМНЫЙ (#191614) + тёплое свечение
   (#682A15) за медной монетой справа. Не белый.
   ============================================================================ */
/* Баннер тёмный. Движковый ассет subscribe/bg.webp содержит крупный глаз-пирамиду, которого
   в Figma-баннере НЕТ (эталон — Image #15: чистый тёмный фон + бледная сетка + тёплый
   диагональный луч + свечение у монеты). Пересобираю фон из цветов, снятых пипеткой с Figma:
   база #181211, пик луча #543224, свечение #472416. */
html[data-theme="light"] .subscribe__body {
  background-color: #171211 !important;
  background-image:
    radial-gradient(66% 125% at 74% 50%, rgba(154, 86, 50, 0.58) 0%, rgba(98, 50, 30, 0.36) 40%, rgba(23, 18, 17, 0) 72%),
    linear-gradient(66deg, rgba(23, 18, 17, 0) 24%, rgba(98, 56, 38, 0.46) 56%, rgba(60, 32, 20, 0.16) 72%, rgba(23, 18, 17, 0) 86%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.020) 0 1px, transparent 1px 62px) !important;
  background-size: 100% 100%, 100% 100%, 62px 62px, 62px 62px !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}
/* монета в Figma крупнее (движок max-width 225px) — только десктоп (на мобиле наедет на текст) */
@media (min-width: 768px) {
  html[data-theme="light"] .subscribe__img { max-width: 300px !important; }
}
/* заголовок баннера белый (на тёмном); @handle остаётся терракотовым из app.css */
html[data-theme="light"] .subscribe__body .subscribe__title,
html[data-theme="light"] .subscribe__body .title,
html[data-theme="light"] .subscribe__body h1,
html[data-theme="light"] .subscribe__body h2,
html[data-theme="light"] .subscribe__body h3 { color: #fff; }
/* заголовок баннера: в Figma НЕ жирный (Regular) и в ОДНУ строку (Image #18) */
html[data-theme="light"] .subscribe__title {
  font-family: 'Finlandica', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
@media (min-width: 768px) {
  html[data-theme="light"] .subscribe__title { white-space: nowrap !important; }
}
html[data-theme="light"] .subscribe__img img { content: url("../../assets/img/light/coin-copper.png?v=8") !important; }

/* ============================================================================
   ФУТЕР — в Figma ТЁМНЫЙ (#191614). Через scoped-переменные флипаем текст в светлый,
   не трогая --primary (терракота-ссылки остаются). Лого/trustpilot — оригинальные (светлые).
   ============================================================================ */
html[data-theme="light"] .footer {
  --main-text: #F6F6F6;
  --color-gray-7f: #9A938C;
  --color-gray-3e: rgba(255, 255, 255, 0.08);
  --dark-bg: #191614;
  --dark-bg-80: rgba(25, 22, 20, 0.85);
  color: var(--main-text);   /* базовый текст футера светлый (напр. .footer__value «Рабочие часы» наследовал тёмный от body) */
  background-color: #191614 !important;
  background-image: none !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================================
   ГРАФИКА (медь) — content:url (браузер тащит новую при drag; opacity-трюк показывал золото).
   ============================================================================ */
/* advantages 3D-иконки золотые → медные */
html[data-theme="light"] .advantages__item:nth-child(1) .advantages__item-img img { content: url("../../assets/img/light/adv-shield.png?v=4") !important; }
html[data-theme="light"] .advantages__item:nth-child(2) .advantages__item-img img { content: url("../../assets/img/light/adv-star.png?v=4") !important; }
html[data-theme="light"] .advantages__item:nth-child(3) .advantages__item-img img { content: url("../../assets/img/light/adv-headphones.png?v=4") !important; }
/* убрать золотой drop-shadow движка (свечение под тёмную тему) — на белой карточке даёт peachy квадрат-ореол */
html[data-theme="light"] .advantages__item-img img { filter: none !important; }

/* ЛОГО: хедер-пилюля белая → тёмное лого. Футер тёмный → оставляем ОРИГИНАЛ (светлое). */
html[data-theme="light"] .header__logo img { content: url("../../assets/img/light/logo-light.svg?v=4") !important; }

/* TRUSTPILOT: перекрашиваем ТОЛЬКО блок отзыва «$5» на contacts (светлый фон) → зелёный+тёмный.
   Партнёрский trustpilot (.partners__item — серый как остальные лого) и футерный
   (.footer__review-item — зелёный+белый на тёмном) оставляем ОРИГИНАЛ, не трогаем. */
html[data-theme="light"] .contacts__reviews-item img { content: url("../../assets/img/light/trustpilot-light.svg?v=4") !important; }

/* мобильный хедер (в head.php захардкожен #0f0f0f) → белая пилюля */
@media (max-width: 767px) {
  html[data-theme="light"] .header { background-color: transparent !important; }
  /* тумблер темы в ХЕДЕРЕ на мобиле — как остальные иконки (account/burger): peach-круг, без бордера */
  html[data-theme="light"] .header .header__theme-toggle {
    background: var(--primary-32) !important;
    border: none !important;
  }
  /* тумблер темы в ФУТЕРЕ — под язык ровно (колонкой, не сбоку) */
  html[data-theme="light"] .footer__lang-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ============================================================================
   ГЛОБАЛЬНЫЕ ФИКСЫ — ОБЕ ТЕМЫ. Файл грузится всегда после app.css; правила БЕЗ
   селектора html[data-theme] применяются и к тёмной, и к светлой теме.
   ============================================================================ */

/* Telegram в меню был приподнят над FAQ/Контакты (20px SVG ломал вертикаль строки) →
   inline-flex + align-center = иконка и текст ровно на уровне соседних пунктов */
.menu__list .menu__link.link-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  top: 3px;   /* был приподнят на 3px над соседями (замер) → опускаем ровно на уровень */
}
.menu__list .menu__link.link-accent svg { flex-shrink: 0; }

/* Telegram (хедер + футер): убрать подчёркивание на ховере, слово → жёлтым (var --primary);
   иконка синяя (свой SVG-градиент, не currentColor) при ховере не меняется.
   Таргет по inline color:#34ace1 = только telegram-ссылки, не email. */
.link-accent[style*="34ace1"]::after { display: none !important; }
.link-accent[style*="34ace1"]:hover { color: var(--primary) !important; }

/* Breadcrumbs: убрать ховер-подсветку (ссылки href="#" никуда не ведут, ховер в терракоту путал) */
.breadcrumbs a.breadcrumbs__link { cursor: default; }
.breadcrumbs a.breadcrumbs__link:hover { color: var(--color-gray-5e); }

/* Доп.опции обмена были кривые (flex-wrap центрированный) → ровная 2-колоночная сетка, компактно */
.more-options__body { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; align-items: start; }
.more-options__body .payment-detail__item { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 767px) { .more-options__body { grid-template-columns: 1fr; } }

/* Блоки логина/реги/сброса — компактнее: gap 32px делал блок высоким (реги залезала на хедер) */
.authorization__form { gap: 18px; padding: 28px; }

/* Тёмная тема: фон на BODY (как в светлой), а не на .page/.page--home. Движковый .page--home
   кончается после партнёров (~2568px) → ниже плоский чёрный = СТЫК на фоне. На body фон
   непрерывный на всю высоту. Внутренние — fixed (не двигаются при скролле), главная — scroll. */
html[data-theme="dark"] body:has(.page--home) {
  background-color: #0f0f0f;
  background-image: url("../../assets/img/home-bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
html[data-theme="dark"] body:has(.page):not(:has(.page--home)) {
  background-color: #0f0f0f;
  background-image: url("../../assets/img/body-bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
html[data-theme="dark"] .page,
html[data-theme="dark"] .page--home { background-image: none !important; }

/* Текстовые ссылки-партнёры на /contact (блок .partner-list, Image #49) — подчёркивание при
   ховере. (Раньше по ошибке вешал на .partners__item = ЛОГОТИПЫ главной — убрано.) */
.partner-list .contacts__item a:hover { text-decoration: underline; }

/* Логотипы партнёров (главная, белые монохром-SVG, база filter:brightness(0.5)) — акцент на
   ховер. Светлая: чуть темнее (серый→тёмный). Тёмная: ярче (к белому). Плавно. */
.partners__item { transition: filter 0.25s; }
html[data-theme="light"] .partners__item:hover { filter: brightness(0.3); }
html[data-theme="dark"] .partners__item:hover { filter: brightness(1); }

/* Плейсхолдер «Введите сумму» наследовал 32px от инпута (огромный, вылезал) → мельче */
.form-exchange__field-input::placeholder { font-size: 18px; }

/* Чекбокс согласия: движковый .checkbox__text = display:inline-flex → его дети (текст + ссылки
   .link-accent) становятся flex-элементами и встают кривыми колонками (особенно на мобиле).
   Фикс (scoped на форму обмена): .checkbox__text = блок, квадрат-чекбокс absolute слева, текст
   и ссылки текут обычным инлайном и переносятся строкой. */
.form-exchange__inner .checkbox { display: block; max-width: 100%; }
.form-exchange__inner .checkbox__text { display: block; position: relative; padding-left: 30px; gap: 0; }
.form-exchange__inner .checkbox__text::before { position: absolute; left: 0; top: 2px; margin-top: 0; align-self: auto; }
.form-exchange__inner .checkbox__text .link-accent { display: inline; max-width: none; }
.form-exchange__inner .checkbox__text .link-accent::after { display: none; }
.form-exchange__inner .checkbox__text .link-accent:hover { text-decoration: underline; }

/* Заголовок страницы заявки/обмена (order + exchange) — компактный (на order был во весь
   экран, дефолтный h1). Как на exchange (там правило инлайн в exchange.php; здесь — для order
   и единообразия). Обе темы. */
.exchange-block__title.title--h1 { font-size: 34px; line-height: 1.2; }
.page .exchange-block { padding-top: 24px; }
@media (max-width: 767px) {
  .exchange-block__title.title--h1 { font-size: 22px; }
  .page .exchange-block { padding-top: 16px; }
}

/* Нотисы заявки (реквизиты выдаёт оператор / крипто-плашка): вторичный текст был #d4d4d4
   (светло-серый под тёмную тему) → на кремовом фоне светлой темы невидим. Читаемый серый. */
html[data-theme="light"] .mn-notice__txt,
html[data-theme="light"] .mn-cnotice__txt { color: #5E5E5E; }
html[data-theme="light"] .mn-notice__txt a,
html[data-theme="light"] .mn-cnotice__txt a { color: #C96442; }

/* Калькулятор: строки «Вы отдаёте»/«Вы получаете» были разной высоты — лимит
   «Макс. сумма: …» переносился в 2 строки, «Мин: …» в 1 → резервируем 2 строки под
   лимит, обе строки одинаковой высоты */
.hero .form-exchange__field-course { min-height: 48px; }

/* Селектор валюты: (1) текст был отцентрирован (наследовал text-align:center) → влево,
   как в дизайне Masons (иконка слева + название рядом);
   (2) шеврон-стрелка справа = визуально понятно, что это дропдаун (currentColor → под обе темы) */
.filters-dropdown__header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.filters-dropdown__box,
.filters-dropdown__details,
.filters-dropdown__code,
.filters-dropdown__label { text-align: left; }
.filters-dropdown__header::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5.5L8 10.5L13 5.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5.5L8 10.5L13 5.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
/* на exchange селектор валют disabled (валюта фиксирована, не кликается) → стрелка не нужна */
.filters-dropdown__header:disabled::after { display: none !important; }

/* ============================================================================
   ДРОПДАУН-ПАНЕЛЬ выбора валюты — СВЕТЛАЯ ТЕМА. Панель на кремовом --color-gray-1f
   сливалась с кремовым фоном страницы → белая панель + тёплый бордер + тень (как Sona),
   заметнее поле поиска и кнопка закрытия.
   ============================================================================ */
html[data-theme="light"] .filters-dropdown__body {
  background-color: #FFFFFF !important;
  border: 1px solid #D6C3A2 !important;
  box-shadow: 0 12px 32px rgba(90, 50, 20, 0.14) !important;
}
html[data-theme="light"] .filters-dropdown__item { background-color: #FFFFFF !important; }
html[data-theme="light"] .filters-dropdown__item.ocf-selected,
html[data-theme="light"] .filters-dropdown__item:hover { background-color: #F4ECDF !important; }
html[data-theme="light"] .filters-dropdown__search {
  background-color: #FFFFFF !important;
  border: 1px solid #C9B48E !important;
}
html[data-theme="light"] .filters-dropdown__search:focus,
html[data-theme="light"] .filters-dropdown__input-wrap.is-focused .filters-dropdown__search { border-color: #C96442 !important; }
html[data-theme="light"] .filters-dropdown__close { border-color: #C9B48E !important; color: #141413 !important; }