/* /dex — только обвязка вокруг калькулятора.
 *
 * Сам калькулятор — штатный остров `swap` со своими стилями из _astro, теми
 * же, что на главной. Здесь только заголовок, блок правил и подпись; ничего,
 * что касалось бы вида самого виджета, тут быть не должно.
 *
 * Цвета берутся из custom properties Base.css, чтобы смена темы донеслась.
 */

.dex { max-width: 780px; margin: 0 auto; padding: 32px 20px 0; }

.dex-hero { margin-bottom: 24px; }
.dex-eyebrow {
  margin: 0 0 6px;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dex-hero h1 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 40px); line-height: 1.15; }
.dex-lead { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }

/* Правила читаются до выбора оффера — поэтому они над калькулятором и не
 * сворачиваются. */
.dex-rules {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 16px;
  list-style: none;
  border: 1px solid var(--color-warn);
  border-radius: var(--radius-lg);
  background: var(--color-warn-bg);
}
.dex-rules li { display: grid; gap: 2px; }
.dex-rules b { color: var(--color-warn); font-size: 14px; font-weight: 600; }
.dex-rules span { color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.dex-rules-head {
  color: var(--color-warn);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Пометки DEX/CEX на карточках офферов.
 *
 * Бандл их не рисует — поля IsDEX он не знает. Атрибут data-shelf на подпись
 * провайдера ставит накладка в dex.html; сам бейдж — псевдоэлемент, чтобы не
 * вставлять чужие узлы в React-дерево, которое бандл перерисовывает как хочет.
 * Размеры и цвета — те же, что у бейджа «best» рядом. */
.dex [class*="_exchangeLabel_"][data-shelf]::after {
  content: "CEX";
  padding: 2px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-ghost);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dex [class*="_exchangeLabel_"][data-shelf="dex"]::after {
  content: "DEX";
  border-color: transparent;
  background: var(--accent-dim);
  color: var(--accent-mid);
}

/* Обмен через кошелёк стоит в том же списке, но это не оффер: ордера по нему
 * нет, подпись происходит в кошельке. Бейдж говорит об этом до выбора. */
.dex [class*="_exchangeLabel_"][data-shelf="wallet"]::after {
  content: "WALLET";
  border-color: transparent;
  background: color-mix(in srgb, var(--color-warn) 16%, transparent);
  color: var(--color-warn);
}
.dex[lang="ru"] [class*="_exchangeLabel_"][data-shelf="wallet"]::after {
  content: "КОШЕЛЁК";
}

/* Выбран DEX-оффер: адрес возврата ему обязателен, а бандл называет поле
 * необязательным. Подпись у тумблера получает пометку. */
.dex[data-shelf-selected="dex"] [class*="_refundToggle_"]::after {
  content: "· required for DEX";
  color: var(--color-warn);
  font-size: 11px;
}
.dex[data-shelf-selected="dex"][lang="ru"] [class*="_refundToggle_"]::after {
  content: "· обязателен для DEX";
}

/* Выбран такой маршрут — кнопка бандла прячется: она умеет только заводить
 * ордер, которого здесь не существует. На её месте встаёт своя (см. dex.html),
 * последним ребёнком того же виджета, поэтому и выглядит так же. */
.dex[data-shelf-selected="wallet"] [class*="_submitBtn_"] { display: none; }

.oc-bar { display: grid; gap: 6px; margin-top: 4px; }
.oc-action {
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent-text);
  color: var(--bg-base);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.oc-action:disabled { opacity: .6; cursor: default; }
.oc-who { color: var(--text-dim); font-size: 12px; text-align: center; }
.oc-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
  overflow-wrap: anywhere;
}
.oc-note:empty { display: none; }
.oc-note-warn { color: var(--color-warn); }
.oc-note-ok { color: var(--accent-text); }

.dex-foot { max-width: 780px; margin: 8px auto 48px; padding: 0 20px; color: var(--text-dim); font-size: 13px; }
.dex-foot code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  font-size: 12px;
}