/* =============================================================================
   Скин шагов заявки v2 «Signature» — шаг 1 «Направление» (§5.1 спеки v2)
   + сайдбар этого шага + мобильный (§8).

   Загружается ПОСЛЕ gw-premium-flow-base.css и опирается на его токены v2
   (--gwpf-bg, --gwpf-s1, --gwpf-card, золото, линии, тексты, сериф, радиусы,
   кнопка). Своих переменных файл не заводит: одна палитра на весь скин.

   ОГРАНИЧЕНИЯ (§2 спеки v1, действуют целиком). DOM вендора не двигаем:
   единственная перестановка — CSS `order` у прямых детей `#exch_html` (условия
   обмена уезжают ПОД форму). Узлы остаются на своих местах, вендорный AJAX
   перерисовывает `#exch_html` целиком, и наши правила переживают перерисовку,
   потому что висят на id/классах, а не на позиции.

   ГЕРОЙ ЭКРАНА — вендорный `.xchange_div`: на шаге 1 это и есть «одна карточка
   на экран» (§4.4). Оформляем её здесь, а не в base.css, потому что base не знает,
   какой из вендорных контейнеров на конкретном шаге играет героя; этот файл
   грузится позже и при равной специфичности выигрывает.

   ВНУТРИ ГЕРОЯ НЕТ ВЛОЖЕННЫХ РАМОК (§4.4). Всё, что тема рисует внутри
   (border-bottom у колонок, у .xchange_pers_div, зеленоватый border-top у
   .checkboxes-wrapper), снимается; группы разделяет воздух и одно «правило с
   ромбом» перед персональными данными.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   §5.1. Порядок блоков шага: форма → условия обмена → SEO-описание.
   Без этого 7 пунктов условий занимают весь первый экран, а форма уходит за сгиб.
   -------------------------------------------------------------------------- */
body.gw-pf #exch_html {
    display: flex;
    flex-direction: column;
}

/* Дефолт для ВСЕХ детей — «после известных блоков». Тема дорисовывает в #exch_html
   свои узлы уже после загрузки (полоса резервов `.reserves-exchange` из
   includes/api.php), и с order:0 такой узел молча выпрыгивал бы на самый верх
   страницы. Явный дефолт держит дописанное там же, где оно и было — в конце. */
body.gw-pf #exch_html > * {
    order: 5;
}

body.gw-pf #exch_html > .xchange_div {
    order: 1;
}

/* Условия обмена — под формой. Селектор покрывает оба варианта: голый вендорный
   блок и он же, обёрнутый скриптом скина в аккордеон. */
body.gw-pf #exch_html > .notice_message,
body.gw-pf #exch_html > .gwpf-acc {
    order: 2;
}

body.gw-pf #exch_html > .warning_message {
    order: 3;
}

/* Скрытые служебные узлы (input.js_direction_id, script) остаются с order:0 —
   у них нет собственного бокса, на раскладку они не влияют. */

/* -----------------------------------------------------------------------------
   §4.2. Заголовочная зона шага
   -------------------------------------------------------------------------- */
/* Тема прячет h1 на странице направления СКРИПТОМ (js/site.js:244 — `$('.main-title').hide()`),
   то есть инлайновым `display:none`. Это ровно тот случай, ради которого спека
   разрешает !important: перебить инлайн иначе нечем, а заголовок шагу нужен —
   без него у экрана нет точки входа и скрипту скина некуда повесить eyebrow,
   акцент на валюте получения и строку курса. */
body.gw-pf .main-wrapper > .main-title {
    display: block !important;
}

/* Строка «Курс: 1 USDT = 0.9765 USD · Резерв: …» (узел рисует скрипт скина).
   На шаге 1 она стоит под заголовком, а не справа как `.gwpf-meta` на заявке:
   справа у направления ничего нет, а курс — первое, что ищет глазами клиент. */
body.gw-pf .main-wrapper .gwpf-rate-line {
    margin: 16px 0 0;
    font-family: var(--gwpf-sans);
    font-size: 13px;
    line-height: 18px;
    letter-spacing: .02em;
    color: var(--gwpf-text-2);
    font-variant-numeric: tabular-nums;
}

/* Курс уже вынесен в строку под заголовком, второй раз в колонке «Отдаёте» он не
   нужен. Если строки нет (скрипт не отработал или узла курса на странице не
   оказалось), исходная строка остаётся видимой — :has() гарантирует, что цифра
   не пропадёт совсем. */
body.gw-pf .main-wrapper:has(.gwpf-rate-line) .xchange_info_line:has(.js_course_html) {
    display: none;
}

body.gw-pf .inner-content .gwpf-stepper {
    margin-top: 30px;
}

/* -----------------------------------------------------------------------------
   §4.4 + §5.1. Карточка-герой: форма обмена целиком
   -------------------------------------------------------------------------- */
body.gw-pf .inner-content .xchange_div {
    position: relative;
    margin: 0 0 22px;
    padding: 46px 52px 40px;
    background: var(--gwpf-card);
    border: 1px solid var(--gwpf-line-gold);
    border-radius: var(--gwpf-r);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 40px 80px -50px rgba(0, 0, 0, .9);
    /* ГЕРОЙ ШАГА 1 — ЕДИНСТВЕННЫЙ БЕЗ `overflow: hidden` (§4.4 просит его ради
       водяного знака). Здесь внутри карточки живут выпадающие списки: вендорный
       `.select_js_ul` (до 447 px) и список городов `gw-loc` — оба absolute
       ВНУТРИ карточки, и отсечение по её краю обрезало бы выбор валюты и города,
       то есть главное действие экрана. Водяной знак вместо этого прижат к
       границам карточки правилом ниже. */
    overflow: visible;
}

/* Повтор с id в селекторе — страховка от base.css: там герой других шагов
   объявлен с `overflow: hidden` (§4.4), и если правило придёт с более сильным
   селектором, шаг 1 потеряет выпадающие списки. Один id перебьёт что угодно
   разумное, а !important не нужен. */
body.gw-pf #exch_html > .xchange_div {
    overflow: visible;
}

/* Водяной знак (узел вставляет скрипт скина): без отсечения по карточке держим
   его целиком внутри её бокса — вылезти за скруглённый угол он не может. */
body.gw-pf .inner-content .xchange_div > .gwpf-wm {
    right: 0;
    top: 0;
    width: 520px;
    max-width: 70%;
}

/* Золотая линия по верху 12%..88% (§4.4) — «плывёт» (§3). Кадры `gwpf-sheen`
   объявлены ОДИН раз, в base.css: он подключается всегда и раньше. Копия жила
   здесь и молча перекрывала базовую (одноимённые @keyframes не сливаются, а
   заменяют друг друга) — правка кадров в base.css применилась бы на шагах 2–4
   и НЕ применилась на шаге 1, без единой ошибки в консоли. */
body.gw-pf .inner-content .xchange_div::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    opacity: .7;
    background: linear-gradient(90deg, transparent, var(--gwpf-gold-2), transparent);
    background-size: 200% 100%;
    animation: gwpf-sheen 7s ease-in-out infinite;
}

body.gw-pf .inner-content .xchange_div_ins {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* -----------------------------------------------------------------------------
   §5.1. Две колонки «Отдаёте / Получаете» — БЕЗ вертикального hairline.
   Вместо линии по центру — круглая кнопка-ромб `.gwpf-swap` (её рисует скрипт
   скина и только если на странице есть вендорный `#js_reload_table`; нет узла —
   правила ниже просто ни на что не попадают).
   -------------------------------------------------------------------------- */
body.gw-pf .inner-content .xchange_div_cols {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 64px;
    margin: 0;
    padding: 0;
    border-bottom: 0;   /* тема рисует здесь разделитель — внутри героя рамок нет */
}

body.gw-pf .inner-content .xchange_div_col_give,
body.gw-pf .inner-content .xchange_div_col_get {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Заголовки колонок — подписью (§4.5), а не h2: «Отдаёте/Получаете» это подпись
   к полю, а не раздел страницы. */
body.gw-pf .inner-content .xchange_data_title,
body.gw-pf .inner-content .xchange_pers_title {
    margin: 0 0 16px;
}

/* 12.5/600/text-2 — та же шкала подписей, что в base.css (правка 14.09.2026). */
body.gw-pf .inner-content .xchange_data_title span,
body.gw-pf .inner-content .xchange_pers_title span {
    display: block;
    font-family: var(--gwpf-sans);
    font-size: 12.5px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gwpf-text-2);
}

/* Строка подписи держит и табы-фильтры (узел .gwpf-cats ставит скрипт). */
body.gw-pf .inner-content .xchange_data_title_ins {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 26px;
}

/* Табы Coin / Bank / Cash (.gwpf-cats) — в base.css: они же на главной. */

/* Колонка внутри — вертикальный стек. Вендор верстает её float'ами
   (.xchange_data_left/.xchange_data_right + .clear), флекс их выпрямляет. */
body.gw-pf .inner-content .xchange_data_ins {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.gw-pf .inner-content .xchange_data_ins > .xchange_data_left,
body.gw-pf .inner-content .xchange_data_ins > .xchange_data_right {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    order: 4;
}

body.gw-pf .inner-content .xchange_data_ins > .clear {
    display: none;
}

/* Порядок внутри колонки: селект валюты → сумма → min/max → «с комиссией». */
body.gw-pf .inner-content .xchange_data_ins > :has(.xchange_select) {
    order: 1;
    margin-bottom: 20px;
}

body.gw-pf .inner-content .xchange_data_ins > :has(.js_sum1, .js_sum2) {
    order: 2;
}

body.gw-pf .inner-content .xchange_data_ins > :has(.span_give_max, .span_get_max) {
    order: 3;
    margin-top: 10px;
}

body.gw-pf .inner-content .xchange_data_ins > .js_viv_com1,
body.gw-pf .inner-content .xchange_data_ins > .js_viv_com2 {
    order: 5;
}

body.gw-pf .inner-content .xchange_data_ins > .js_viv_com1:has(.xchange_sumandcom),
body.gw-pf .inner-content .xchange_data_ins > .js_viv_com2:has(.xchange_sumandcom) {
    order: 4;
    margin-top: 18px;
}

/* min/max — тихая строка справа, цифры табличные: две строки друг под другом
   обязаны стоять разряд в разряд, иначе «от/до» читается как разные величины. */
body.gw-pf .inner-content .span_give_max,
body.gw-pf .inner-content .span_get_max {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin: 0;
    text-align: right;
    /* 12.5 / text-2 — правка 14.09.2026: на солнце 12 px серым не читалось;
       min/max — единственное, что говорит клиенту, почему форма не примет сумму. */
    font-size: 12.5px;
    line-height: 17px;
    color: var(--gwpf-text-2);
    font-variant-numeric: tabular-nums;
}

/* §4.11. Суммы в полях — крупным серифом: это главные цифры экрана. */
body.gw-pf .inner-content .xchange_div .xchange_sum_input input:is(.js_sum1, .js_sum2, .js_sum1c, .js_sum2c) {
    height: 54px;
    min-height: 54px;
    padding: 0 18px;
    background: var(--gwpf-field-bg);
    border: 1px solid var(--gwpf-field-line);
    border-radius: 12px;
    font-family: var(--gwpf-serif);
    font-size: 34px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--gwpf-gold-3);
    /* lining-nums обязателен ИМЕННО ЗДЕСЬ, а не только в base.css: это правило
       длиннее и перебивало его, возвращая полю умолчательные цифры Cormorant.
       Они строчные (минускульные), и набранная клиентом «1» читается как «I» —
       в поле, где человек проверяет СВОЮ сумму, это недопустимо. В цифре-героине
       (§4.6) начертание остаётся умолчательным: так утверждён эталон. */
    font-variant-numeric: lining-nums tabular-nums;
}

body.gw-pf .inner-content .xchange_div .xchange_sum_input input:is(.js_sum1, .js_sum2, .js_sum1c, .js_sum2c):focus {
    border-color: var(--gwpf-line-gold);
    box-shadow: 0 0 0 3px rgba(214, 165, 90, .16);
}

/* «С комиссией» — та же цифра, но не героиня: кегль ниже. */
body.gw-pf .inner-content .xchange_div .xchange_sum_input input:is(.js_sum1c, .js_sum2c) {
    font-size: 26px;
    color: var(--gwpf-text);
}

body.gw-pf .inner-content .xchange_div .xchange_sum_line {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    height: auto;
}

body.gw-pf .inner-content .xchange_div .xchange_sum_label {
    margin: 0 0 8px;
    font-family: var(--gwpf-sans);
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gwpf-text-3);
}

body.gw-pf .inner-content .xchange_div .xchange_sum_input,
body.gw-pf .inner-content .xchange_div .xchange_sum_input input {
    width: 100%;
}

/* Кнопка «поменять местами» — ромб в круге ровно по центру между колонками,
   на высоте поля суммы: она относится к суммам, а не к заголовкам колонок.
   189px — центр строки с суммой: над ней в колонке стоит ровно два блока
   (подпись 15+16 и селект 54+20) плюс подпись суммы 15+8, дальше поле 54.
   Всё остальное (min/max, «с комиссией», строка курса) лежит НИЖЕ по order,
   поэтому смещения не даёт. */
body.gw-pf .inner-content .gwpf-swap {
    position: absolute;
    left: 50%;
    top: 189px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--gwpf-line-gold);
    background: var(--gwpf-s2);
    color: var(--gwpf-gold-2);
    cursor: pointer;
    z-index: 2;
    transition: border-color .22s cubic-bezier(.2, .7, .2, 1),
                color .22s cubic-bezier(.2, .7, .2, 1),
                transform .35s cubic-bezier(.2, .7, .2, 1);
}

/* Иконка — угол из двух рамок, без SVG-файла. На десктопе колонки стоят рядом,
   поэтому угол смотрит вправо; на мобильном они друг под другом — вниз (§8). */
body.gw-pf .inner-content .gwpf-swap .gwpf-swap-ico {
    width: 9px;
    height: 9px;
    margin-left: -3px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
}

body.gw-pf .inner-content .gwpf-swap:focus-visible {
    outline: none;
    border-color: var(--gwpf-gold-dim);
    box-shadow: 0 0 0 3px rgba(214, 165, 90, .16);
}

body.gw-pf .inner-content .gwpf-swap:hover {
    border-color: var(--gwpf-gold-dim);
    color: var(--gwpf-gold-3);
    transform: translateX(-50%) rotate(180deg);
}

/* -----------------------------------------------------------------------------
   §5.1 + §4.4. «Персональные данные»
   Группа отделена «правилом с ромбом»: рамок внутри героя нет, а воздуха одного
   мало — форма распадается на две несвязанные анкеты.
   Цвет ромба в data-URI записан литералом (#d6a55a при .55 — это --gwpf-gold-dim):
   var() внутри data-URI не работает, подстановки там нет.
   -------------------------------------------------------------------------- */
body.gw-pf .inner-content .xchange_div .xchange_pers {
    margin: 0;
    padding: 0;
    border: 0;
}

body.gw-pf .inner-content .xchange_div .xchange_pers:has(.xchange_pers_line)::before {
    content: '';
    display: block;
    height: 8px;
    margin: 40px 0 34px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect x='1.2' y='1.2' width='5.6' height='5.6' transform='rotate(45 4 4)' fill='%23d6a55a' fill-opacity='.55'/></svg>"),
        linear-gradient(90deg, transparent, var(--gwpf-line-gold) 50%, transparent);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 8px 8px, 100% 1px;
}

/* Тема вешает СВОЙ разделитель ещё и на внутреннюю обёртку — получалось две линии
   подряд и 40 px пустоты между ними. Цепочку повторяем целиком: у темы тут
   четырёхклассовый селектор. */
body.gw-pf .xchange_div .xchange_pers .xchange_pers_ins .xchange_pers_div {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

/* Поля персданных — в две колонки: их обычно 2–4, одна длинная лента выглядит
   как анкета, а не как форма обмена.
   Тема держит эту сетку колонкой пятиклассовым селектором, поэтому повторяем её
   цепочку целиком — иначе grid молча проигрывает flex-column. */
body.gw-pf .xchange_div .xchange_pers .xchange_pers_ins .xchange_pers_div .xchange_pers_div_ins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
}

body.gw-pf .inner-content .xchange_pers_div_ins > .clear {
    display: none;
}

/* Тема раздаёт строкам margin-bottom через :not(:nth-last-child(2)) — в сетке
   зазор держит gap, поэтому обнуляем (специфичность у нас на элемент выше). */
body.gw-pf .inner-content .xchange_pers_line {
    margin: 0;
    min-width: 0;
}

body.gw-pf .inner-content .xchange_pers_line_ins {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.gw-pf .inner-content .xchange_pers_label,
body.gw-pf .inner-content .xchange_pers_input {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

body.gw-pf .inner-content .xchange_div .xchange_pers_label .xchange_label {
    font-family: var(--gwpf-sans);
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gwpf-text-3);
}

body.gw-pf .inner-content .xchange_pers_input > input,
body.gw-pf .inner-content .xchange_pers_input > select {
    width: 100%;
}

/* Поле города (gw-loc) занимает всю ширину — внутри у него табы и пилюли. */
body.gw-pf .inner-content .xchange_pers_line:has(.gw-loc) {
    grid-column: 1 / -1;
}

/* Сам пикер оставляем как есть, перекрашиваем только контуры и пилюли. */
body.gw-pf .inner-content .gw-loc-sbox,
body.gw-pf .inner-content .gw-loc-trig,
body.gw-pf .inner-content .gw-loc-cc {
    background: var(--gwpf-field-bg);
    border-color: var(--gwpf-field-line);
    border-radius: 12px;
}

body.gw-pf .inner-content .gw-loc-tabs {
    border-color: var(--gwpf-line);
}

body.gw-pf .inner-content .gw-loc-tab.gw-loc-active {
    background: rgba(214, 165, 90, .12);
    color: var(--gwpf-text);
}

body.gw-pf .inner-content .gw-loc-sdd,
body.gw-pf .inner-content .gw-loc-cdd {
    background: var(--gwpf-s2);
    border-color: var(--gwpf-line);
    border-radius: 12px;
    box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}

/* -----------------------------------------------------------------------------
   §5.1. Блок согласия: капча → чекбоксы → primary на всю ширину.
   Порядок задаёт вендор (.xchange_submit_div{order:20}) — не трогаем.
   -------------------------------------------------------------------------- */
body.gw-pf .inner-content .xchange_div .captcha_div {
    order: 1;
    margin: 34px 0 20px;
}

/* На части направлений тема оборачивает капчу и чекбоксы в .checkboxes-wrapper
   со своим зеленоватым разделителем (rgba(38,187,125,.16)) и отступом справа
   в 75 px — зелёного в палитре скина нет, а рамок внутри героя мы не держим. */
body.gw-pf .inner-content .xchange_div .checkboxes-wrapper {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    padding-right: 0;
}

body.gw-pf .inner-content .captcha_body {
    margin-bottom: 0;
}

body.gw-pf .inner-content .captcha_title {
    margin-bottom: 10px;
    font-family: var(--gwpf-sans);
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gwpf-text-3);
}

body.gw-pf .inner-content .xchange_checkdata_div {
    order: 2;
    padding: 0;
    margin-bottom: 12px;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--gwpf-text-2);
}

/* §4.11. Чекбокс — золотой ромб при выборе. Правило узкое (только согласие на
   шаге 1): вендорные чекбоксы в других местах остаются вендорными.
   Метка НЕ флексбокс намеренно: внутри неё текст вперемешку со ссылками
   («…согласен с <a>условиями обмена</a> и с правилами <a>AML</a>»), и во флексе
   каждый кусок стал бы отдельным элементом — строка рассыпалась на колонки.
   Поэтому обычный текстовый поток, а квадрат вынесен абсолютом. */
body.gw-pf .inner-content .xchange_checkdata_div label {
    display: block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

body.gw-pf .inner-content .xchange_checkdata_div input[type='checkbox'] {
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--gwpf-field-bg);
    border: 1px solid var(--gwpf-field-line);
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .22s cubic-bezier(.2, .7, .2, 1);
}

body.gw-pf .inner-content .xchange_checkdata_div input[type='checkbox']:checked {
    border-color: var(--gwpf-line-gold);
}

body.gw-pf .inner-content .xchange_checkdata_div input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: var(--gwpf-gold);
    transform: rotate(45deg);
}

body.gw-pf .inner-content .xchange_checkdata_div input[type='checkbox']:focus-visible {
    box-shadow: 0 0 0 3px rgba(214, 165, 90, .16);
}

body.gw-pf .inner-content .xchange_checkdata_div a {
    color: var(--gwpf-gold-2);
}

/* Primary «Обменять» — на всю ширину карточки: это единственное действие экрана. */
body.gw-pf .inner-content .xchange_div .xchange_submit {
    width: 100%;
}

@media (min-width: 769px) {
    body.gw-pf .inner-content .xchange_div .xchange_submit_div {
        padding-top: 18px;
    }
}

body.gw-pf .inner-content .xchange_div .ajax_post_bids_res:empty {
    padding: 0;
}

/* -----------------------------------------------------------------------------
   §5.1. Условия обмена — аккордеон под формой. Заголовок в стиле eyebrow,
   под ним при раскрытии то же «правило с ромбом», что и в герое.
   Узлы .gwpf-acc-* создаёт скрипт скина; без него блок остаётся вендорным.
   -------------------------------------------------------------------------- */
body.gw-pf .inner-content .gwpf-acc,
body.gw-pf .inner-content #exch_html > .notice_message {
    margin: 0 0 22px;
    padding: 4px 28px 6px;
    background: var(--gwpf-s1);
    border: 1px solid var(--gwpf-line);
    border-radius: 20px;
    box-shadow: none;
}

body.gw-pf .inner-content .gwpf-acc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

body.gw-pf .inner-content .gwpf-acc-title {
    font-family: var(--gwpf-sans);
    font-size: 11px;
    line-height: 15px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gwpf-gold-dim);
}

/* Шеврон — две рамки вместо иконки: у скина нет своего спрайта, а PNG темы
   оранжевые. */
body.gw-pf .gwpf-acc-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--gwpf-gold-dim);
    border-bottom: 1px solid var(--gwpf-gold-dim);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}

body.gw-pf .gwpf-acc.is-open > .notice_message_ins > .gwpf-acc-head .gwpf-acc-chevron,
body.gw-pf .aside .login_widget.is-open .gwpf-acc-chevron {
    transform: translateY(2px) rotate(-135deg);
}

/* Правило с ромбом под заголовком — только у раскрытого блока: у свёрнутого оно
   выглядело бы как вторая, пустая строка. */
body.gw-pf .inner-content .gwpf-acc.is-open .gwpf-acc-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 8px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect x='1.2' y='1.2' width='5.6' height='5.6' transform='rotate(45 4 4)' fill='%23d6a55a' fill-opacity='.55'/></svg>"),
        linear-gradient(90deg, transparent, var(--gwpf-line-gold) 50%, transparent);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 8px 8px, 100% 1px;
}

body.gw-pf .inner-content .gwpf-acc .gwpf-acc-head {
    position: relative;
}

body.gw-pf .inner-content .gwpf-acc .gwpf-acc-body {
    display: none;
    padding: 16px 0 20px;
}

body.gw-pf .inner-content .gwpf-acc.is-open .gwpf-acc-body {
    display: block;
}

/* Первый абзац операторского текста ушёл в заголовок кнопки — в теле он был бы
   вторым таким же. Текст остаётся в DOM: подменять операторские тексты нельзя. */
body.gw-pf .inner-content .gwpf-acc .gwpf-acc-lead {
    display: none;
}

body.gw-pf .inner-content .gwpf-acc .text,
body.gw-pf .inner-content .notice_message .text {
    font-family: var(--gwpf-sans);
    font-size: 13.5px;
    line-height: 21px;
    color: var(--gwpf-text-2);
}

body.gw-pf .inner-content .gwpf-acc .text p {
    margin: 0 0 16px;
}

body.gw-pf .inner-content .gwpf-acc .text p:last-child {
    margin-bottom: 0;
}

body.gw-pf .inner-content .gwpf-acc .text a,
body.gw-pf .inner-content .warning_message .text a {
    color: var(--gwpf-gold-2);
}

body.gw-pf .inner-content .notice_message_ins,
body.gw-pf .inner-content .warning_message_ins {
    text-align: left;   /* тема центрует .warning_message_ins — в тихом блоке это выглядит как объявление */
}

/* -----------------------------------------------------------------------------
   Резервы — тот же аккордеон, что условия обмена, свёрнут по умолчанию
   (правка владельца 14.09.2026). Узлы .gwpf-acc-* создаёт applyReserves()
   скрипта; без него блок остаётся вендорной полосой в конце формы.
   Тема даёт .section_content_wrapper свой фон #141414 и скругление —
   внутри карточки это была бы «коробка в коробке», снимаем.
   -------------------------------------------------------------------------- */
body.gw-pf #exch_html > .gwpf-reserves {
    margin: 0 0 22px;
    padding: 4px 28px 6px;
    background: var(--gwpf-s1);
    border: 1px solid var(--gwpf-line);
    border-radius: 20px;
}

body.gw-pf .gwpf-reserves > .gwpf-acc-head {
    position: relative;
}

/* Сводка справа от заголовка: «118 валют» — чтобы «Резервы» в свёрнутом
   виде не читались как «резервов четыре». */
body.gw-pf .gwpf-reserves .gwpf-acc-sum {
    margin-left: 14px;
    font-family: var(--gwpf-sans);
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--gwpf-text-3);
    font-variant-numeric: tabular-nums;
}

body.gw-pf .gwpf-reserves.is-open > .gwpf-acc-head .gwpf-acc-chevron {
    transform: translateY(2px) rotate(-135deg);
}

/* Вложенные подложки темы (#141414 у обёртки, свои у .reserve-item и .coin)
   внутри карточки — «коробка в коробке в коробке»; снимаем. `#exch_html` в
   селекторе обязателен: правило темы тоже начинается с id и иначе выигрывает. */
body.gw-pf #exch_html .gwpf-reserves > .section_content_wrapper.gwpf-acc-body {
    padding: 16px 0 20px;
    background: transparent;
    border-radius: 0;
}

body.gw-pf #exch_html .gwpf-reserves .grid {
    gap: 6px 18px;
}

body.gw-pf #exch_html .gwpf-reserves .reserve-item {
    padding: 8px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gwpf-line);
}

/* Раскрытый блок показывает 8 валют (тема — 4), «Показать все» — остальные. */
body.gw-pf .gwpf-reserves .reserve-item.hidden.gwpf-show,
body.gw-pf .gwpf-reserves.is-all .reserve-item.hidden {
    display: block;
}

body.gw-pf .gwpf-reserves.is-all .gwpf-reserves-all {
    display: none;
}

body.gw-pf .gwpf-reserves .gwpf-reserves-all {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--gwpf-sans);
    font-size: 12.5px;
    color: var(--gwpf-gold-2);
    text-decoration: none;
    border-bottom: 1px solid var(--gwpf-line-gold);
}

body.gw-pf #exch_html .gwpf-reserves .reserve-item .coin {
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body.gw-pf #exch_html .gwpf-reserves .coin__logo {
    width: 30px;
    height: 30px;
    min-width: 30px;
}

/* Цифры не режем многоточием (у темы у .coin__info max-height и overflow):
   резерв — это число, обрезанное число хуже отсутствующего. */
body.gw-pf #exch_html .gwpf-reserves .coin__info {
    max-height: none;
    overflow: visible;
}

body.gw-pf #exch_html .gwpf-reserves .reserve-item .coin__info .coin__amount {
    font-family: var(--gwpf-serif);
    font-size: 17px;
    line-height: 1.15;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--gwpf-gold-3);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

body.gw-pf #exch_html .gwpf-reserves .coin__info span.coin__name {
    font-family: var(--gwpf-sans);
    font-size: 12px;
    color: var(--gwpf-text-2);
}

/* -----------------------------------------------------------------------------
   §5.1. SEO-описание «Обмен X на Y» — самый тихий блок страницы: ни карточки,
   ни рамки, просто текст в подвале шага.
   -------------------------------------------------------------------------- */
body.gw-pf .inner-content #exch_html > .warning_message {
    margin: 12px 0 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

body.gw-pf .inner-content .warning_message .warning_message_title {
    margin: 0 0 14px;
}

body.gw-pf .inner-content .warning_message .warning_message_title span {
    font-family: var(--gwpf-serif);
    font-size: 26px;
    line-height: 32px;
    font-weight: 400;
    color: var(--gwpf-text);
}

body.gw-pf .inner-content .warning_message .text {
    font-family: var(--gwpf-sans);
    font-size: 13.5px;
    line-height: 21px;
    color: var(--gwpf-text-3);
}

body.gw-pf .inner-content .warning_message .text ol {
    margin: 12px 0 0;
    padding-left: 20px;
}

body.gw-pf .inner-content .warning_message .text ol li {
    margin-bottom: 8px;
}

body.gw-pf .inner-content .warning_message .text ol li::marker {
    color: var(--gwpf-gold-dim);
}

/* -----------------------------------------------------------------------------
   §8. Мобильный (<= 768)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Табы валют на узком экране не помещаются в строку подписи («НАЛИЧ…»
       резалось справа) — уходят на свою строку под подписью, во всю ширину. */
    body.gw-pf .inner-content .xchange_data_title_ins {
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    /* Табы типов точек выдачи переносятся во второй ряд, а не режутся справа
       («Доставка до го…» без сигнала, что справа есть ещё). */
    body.gw-pf .gw-loc .gw-loc-tabs {
        flex-wrap: wrap;
    }

    body.gw-pf .gw-loc .gw-loc-tab {
        flex: 1 1 auto;
    }

    body.gw-pf .main-wrapper > .main-title {
        font-size: 30px;
        line-height: 1.1;
    }

    body.gw-pf .main-wrapper .gwpf-rate-line {
        margin-top: 12px;
        font-size: 12.5px;
    }

    body.gw-pf .inner-content .xchange_div {
        padding: 28px 22px 26px;
        border-radius: 20px;
    }

    /* Колонки Отдаёте/Получаете — друг под другом; вертикального разделителя нет
       и на десктопе, поэтому переключать нечего: только воздух. */
    body.gw-pf .inner-content .xchange_div_cols {
        flex-direction: column;
        gap: 28px;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* На узком экране тема добавляет разделитель ещё и внутри каждой колонки. */
    body.gw-pf .inner-content .xchange_div .xchange_data_div {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* Кнопка обмена местами уезжает на стык колонок. */
    body.gw-pf .inner-content .gwpf-swap {
        top: auto;
        bottom: calc(50% - 20px);
        width: 36px;
        height: 36px;
    }

    body.gw-pf .inner-content .gwpf-swap .gwpf-swap-ico {
        margin: -3px 0 0;
        transform: rotate(45deg);
    }

    body.gw-pf .inner-content .xchange_div .xchange_sum_input input:is(.js_sum1, .js_sum2, .js_sum1c, .js_sum2c) {
        height: 52px;
        min-height: 52px;
        font-size: 28px;
        line-height: 34px;
    }

    body.gw-pf .inner-content .xchange_div .xchange_sum_input input:is(.js_sum1c, .js_sum2c) {
        font-size: 22px;
    }

    body.gw-pf .inner-content .xchange_div .xchange_pers:has(.xchange_pers_line)::before {
        margin: 30px 0 26px;
    }

    /* Персданные — в одну колонку. Цепочку повторяем целиком: десктопное правило
       выше само сделано под пятиклассовый селектор темы, коротким его не перебить. */
    body.gw-pf .xchange_div .xchange_pers .xchange_pers_ins .xchange_pers_div .xchange_pers_div_ins {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    body.gw-pf .inner-content .xchange_div .captcha_div {
        margin: 26px 0 18px;
    }

    body.gw-pf .inner-content .gwpf-acc,
    body.gw-pf .inner-content #exch_html > .notice_message {
        padding: 2px 18px 4px;
        border-radius: 16px;
    }

    /* Липкая панель с primary (§8): фон и hairline держит base.css, здесь только
       отступы родного контейнера кнопки. */
    body.gw-pf .inner-content .xchange_div .xchange_submit_div.gwpf-sticky {
        padding: 12px 0 10px;
    }

    /* Сайдбар после контента. */
    body.gw-pf .main-wrapper .inner.grid.premium-3-1 {
        display: flex;
        flex-direction: column;
    }

    body.gw-pf .main-wrapper .inner-content {
        order: 1;
    }

    body.gw-pf .main-wrapper .aside {
        order: 2;
        margin-top: 24px;
    }

}

/* §3. Движение выключается вместе со всей атмосферой. */
@media (prefers-reduced-motion: reduce) {
    body.gw-pf .inner-content .xchange_div::before {
        animation: none;
    }

    body.gw-pf .inner-content .gwpf-swap,
    body.gw-pf .gwpf-acc-chevron,
    body.gw-pf .inner-content .xchange_checkdata_div input[type='checkbox'] {
        transition: none;
    }
}

/* -----------------------------------------------------------------------------
   §4.11 (хвост). Пикер городов `gw-loc-*` и плашка загрузки допов держат
   оранжевый темы (#d79858) в СВОИХ файлах: активный пункт списка стран,
   код страны, подсветка выбранной строки. Обход вычисленных стилей (§9.2 v2)
   находил ровно эти восемь узлов — единственное, что оставалось от палитры v1
   на шаге 1. Перекрашиваем в золото v2; геометрию пикера не трогаем.
   -------------------------------------------------------------------------- */
body.gw-pf .gw-loc-cdd-item.active,
body.gw-pf .gw-loc-item.active {
    background: rgba(214, 165, 90, .10);
}

body.gw-pf .gw-loc-cdd-item.active,
body.gw-pf .gw-loc-cdd-item.active .gw-loc-cn,
body.gw-pf .gw-loc-item.active .gw-loc-cn,
body.gw-pf .gw-loc-flag {
    color: var(--gwpf-gold);
}

/* Правило `.gw-loc-cdd-item.active .gw-loc-cc` в gw-location-picker.css — это
   (0,3,0), длиннее любого разумного нашего селектора. Перекрашиваем в ОДНОЙ
   точке — переопределением собственных токенов пикера: так же, как base.css
   гасит оранжевый темы её же переменными. */
/* Типы точек выдачи различаются ЦВЕТОМ — правка владельца 14.09.2026
   («тут разные цвета бы, на старой были разные и выглядело лучше»). Цвета
   приходят ИЗ БАЗЫ (`tags[].color`: #2dd4a0, #60a5fa, #f59e0b) и печатаются
   скриптом пикера инлайном (gw-location-picker.js:198 и :255) — их и
   показываем. Цвет ТОЛЬКО на точке-маркере и на маркере пилюли, текст
   нейтральный: на солнце цвет не различим, и слово рядом обязано остаться.
   Насыщенность гасим фильтром, чтобы три посторонних цвета не спорили с
   золотом карточки; сам цвет из базы не трогаем. */
body.gw-pf .gw-loc .gw-loc-tab-dot {
    filter: saturate(.7) brightness(.92);
    box-shadow: 0 0 8px -1px currentColor;
}

body.gw-pf .gw-loc .gw-loc-tab:not(.active) .gw-loc-tab-dot {
    opacity: .75;
}

body.gw-pf .gw-loc .gw-loc-tag-badge {
    /* Контраст держим на уровне остального текста карточки: приглушив пилюлю
       до --gwpf-text-3 без заливки, виджет пропадал с экрана целиком. */
    color: var(--gwpf-text-2) !important;
    background: rgba(214, 165, 90, .06) !important;
    border: 1px solid var(--gwpf-line-gold);
    padding: 2px 8px;
}

/* Маркер пилюли — цвет типа из базы (`--c` ставит скрипт пикера). */
body.gw-pf .gw-loc .gw-loc-tag-badge::before {
    background: var(--c, var(--gwpf-gold-dim));
    filter: saturate(.7) brightness(.92);
}

body.gw-pf .gw-loc,
body.gw-pf .gw-loc-cdd,
body.gw-pf .gw-loc-sbox {
    --gw-loc-primary: var(--gwpf-gold);
    --gw-loc-pdim: rgba(214, 165, 90, .12);
    --gw-loc-sel: rgba(214, 165, 90, .10);
    /* Текстовые ступени — из палитры скина, иначе виджет читается серым пятном
       на тёплом чёрном. */
    --gw-loc-text: var(--gwpf-text);
    --gw-loc-t2: var(--gwpf-text-2);
    --gw-loc-t3: var(--gwpf-text-3);
    --gw-loc-div: var(--gwpf-line);
    --gw-loc-div2: var(--gwpf-line-gold);
}

/* Стрелка выпадающего списка валют — та же история, что у иконки капчи:
   картинка темы `arrow_drop_down=Variant1.svg` с зашитым #D79858 ВНУТРИ файла,
   и стоит она в самом дорогом месте экрана — у обоих селектов валют в герое.
   Гасим картинку, форму рисуем маской из того же файла: цвет приходит из токена. */
body.gw-pf .inner-content .select_js_title .select_js_abs,
body.gw-pf .inner-content .select_js_search .select_js_search_ins::after {
    background-image: none;
    background-color: var(--gwpf-gold-dim);
    -webkit-mask: url(../images/icons/arrow_drop_down=Variant1.svg) no-repeat center / 24px 24px;
    mask: url(../images/icons/arrow_drop_down=Variant1.svg) no-repeat center / 24px 24px;
}

/* Шторка аякса калькулятора. Вендор показывает её на КАЖДОМ пересчёте суммы и
   смене валюты, поэтому в покое она `display:none` и скриншотами не ловится —
   а вычисленный фон у неё был `rgba(241,170,77,.16)`, то есть оранжевое золото
   v1 на всю карточку-героя (866×2191, z-index 20). Правило-близнец её сестры
   на странице заявки (`.exchange_status_abs`, bid.css) существовало, этого — нет. */
body.gw-pf .inner-content .exch_ajax_wrap_abs {
    background: rgba(214, 165, 90, .10);
}

body.gw-pf .gw-extra-options__loading {
    background: rgba(214, 165, 90, .12);
}