/* Всё, что неудобно выражать утилитами Tailwind. */

/* Лента курса */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 3rem; padding-right: 3rem; animation: marquee 30s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Цифры: табличные, чтобы суммы и таймеры не «прыгали» */
.num { font-variant-numeric: tabular-nums; font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif; }

/* Заголовок секции с цветной чертой слева */
.sec-title { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: #111827; }
.sec-title::before { content: ''; width: 3px; height: .95em; border-radius: 2px; background: linear-gradient(#0f8a4d, #16a35c); flex-shrink: 0; }
.sec-title-lg { display: flex; align-items: center; gap: .6rem; }
.sec-title-lg::before { content: ''; width: 4px; height: 1em; border-radius: 2px; background: linear-gradient(#0f8a4d, #16a35c); flex-shrink: 0; }

/* QR-заглушка: используется, только если JS-библиотека QR не загрузилась */
.qr-mock { background: repeating-conic-gradient(#111827 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
/* Растровый QR (fallback <img>) масштабируется без смазывания */
#qr-box img { image-rendering: pixelated; }

/* QR-карточка: чёрный код по белому, щедрая тихая зона, тап = увеличение */
.qr-card { width: 15rem; height: 15rem; margin-left: auto; margin-right: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: .75rem; display: flex; align-items: center; justify-content: center; cursor: zoom-in; box-shadow: 0 6px 20px rgba(17, 24, 39, .08); }
.qr-card:focus-visible { outline: 2px solid #0f8a4d; outline-offset: 2px; }

/* Полноэкранный QR по тапу */
#qr-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
#qr-overlay-box { background: #fff; border-radius: 1.25rem; padding: 1.25rem; width: min(22rem, 88vw); }
#qr-overlay-box svg, #qr-overlay-box img { width: 100%; height: auto; display: block; }

/* Степпер мастера: текущий — залитый кружок, пройденный — галочка */
.step-dot { width: 2rem; height: 2rem; border-radius: 9999px; border: 2px solid #e5e7eb; background: #fff; color: #6b7280; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .875rem; flex-shrink: 0; }
.step-dot.is-active { border-color: #0f8a4d; background: #0f8a4d; color: #fff; }
.step-dot.is-done { border-color: #0f8a4d; color: #0f8a4d; font-size: 0; }
.step-dot.is-done::after { content: '✓'; font-size: .85rem; line-height: 1; }
.step-line { height: 2px; background: #e5e7eb; flex: 1; }
.step-line.is-done { background: #0f8a4d; }

/* Чипы быстрой суммы */
.qchip { border: 1px solid #e5e7eb; background: #fff; border-radius: .6rem; padding: .45rem 0; font-size: .85rem; font-weight: 600; color: #334155; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.qchip:hover { border-color: #0f8a4d; color: #0f8a4d; }
.qchip.is-active { border-color: #0f8a4d; color: #0f8a4d; background: #e6f5ed; }

/* Строки способов получения: бренд-иконка слева, радио-галочка справа */
.pay-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .9rem; border: 1.5px solid #e5e7eb; border-radius: .9rem; background: #fff; text-align: left; transition: border-color .15s ease, background-color .15s ease; }
.pay-row:hover { border-color: #7fc9a4; }
.pay-row.is-active { border-color: #0f8a4d; background: #e6f5ed; }
.pay-row__icon { width: 2.25rem; height: 2.25rem; border-radius: .6rem; flex-shrink: 0; }
.pay-row__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pay-row__name { font-weight: 600; font-size: .95rem; color: #111827; }
.pay-row__sub { font-size: .72rem; color: #6b7280; }
.pay-row__radio { width: 1.15rem; height: 1.15rem; border-radius: 9999px; border: 2px solid #cbd5e1; flex-shrink: 0; transition: all .15s ease; }
.pay-row.is-active .pay-row__radio { border-color: transparent; background: #0f8a4d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / .7rem no-repeat; }

/* Основная кнопка: зелёный градиент */
.btn-primary { background: linear-gradient(90deg, #0f8a4d, #16a35c); color: #fff; font-weight: 600; border-radius: .8rem; box-shadow: 0 6px 16px rgba(15, 138, 77, .28); transition: filter .15s ease, transform .1s ease; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }

/* Таймер-пилюля на шаге перевода; последние 3 минуты — красная */
.timer-pill { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #ffd591; background: #fff7e6; color: #d46b08; border-radius: 9999px; padding: .3rem .8rem; font-size: .85rem; font-weight: 600; }
.timer-pill.is-low { background: #fff1f0; border-color: #ffa39e; color: #dc2626; animation: pulse 1s infinite; }

/* Адрес кошелька + кнопка копирования чипом */
.addr-box { display: flex; gap: .5rem; align-items: stretch; }
.copy-chip { border: 1px solid #0f8a4d; color: #0f8a4d; border-radius: .6rem; padding: 0 .8rem; font-size: .8rem; font-weight: 600; white-space: nowrap; background: #fff; transition: background-color .15s ease; }
.copy-chip:hover { background: #e6f5ed; }

/* Строка доверия под основной кнопкой */
.trust-line { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .72rem; color: #6b7280; }
.trust-line svg { width: .9rem; height: .9rem; color: #0f8a4d; flex-shrink: 0; }

/* Карточки выбора способа отправки USDT */
.send-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left; padding: .9rem 1rem; border-radius: 1rem; border: 2px solid transparent; box-shadow: 0 4px 14px rgba(17, 24, 39, .07); transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.send-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(17, 24, 39, .1); }
.send-card--manual { background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%); }
.send-card--auto { background: linear-gradient(135deg, #f5f3ff 0%, #fdf2f8 100%); }
.send-card--manual.is-active { border-color: #0f8a4d; box-shadow: 0 8px 24px rgba(15, 138, 77, .2); }
.send-card--auto.is-active { border-color: #7c3aed; box-shadow: 0 8px 24px rgba(124, 58, 237, .22); }
.send-card__icon { width: 2.25rem; height: 2.25rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: .15rem; }
.send-card__icon--manual { background: linear-gradient(135deg, #0f8a4d, #06b6d4); }
.send-card__icon--auto { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.send-card__title { font-weight: 600; font-size: .95rem; color: #111827; }
.send-card__desc { font-size: .75rem; line-height: 1.35; color: #475569; }
/* Галочка выбранной карточки */
.send-card::after { content: ''; position: absolute; top: .6rem; right: .6rem; width: 1.1rem; height: 1.1rem; border-radius: 9999px; border: 2px solid rgba(100, 116, 139, .35); background: #fff; transition: all .15s ease; }
.send-card.is-active::after { border-color: transparent; background: #0f8a4d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / .7rem no-repeat; }
.send-card--auto.is-active::after { background-color: #7c3aed; }

/* Статусы ордера */
.status-dot { width: .75rem; height: .75rem; border-radius: 9999px; background: #e5e7eb; flex-shrink: 0; }
.status-row.is-active .status-dot { background: #0f8a4d; box-shadow: 0 0 0 4px #e6f5ed; animation: pulse 1s infinite; }
.status-row.is-done .status-dot { background: #0f8a4d; }
.status-row.is-done { color: #0f8a4d; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px #e6f5ed; } }

/* Появление панели шага */
.fade-in { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* FAQ на <details> */
details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track, .fade-in, .status-row.is-active .status-dot, .timer-pill.is-low { animation: none; }
  .send-card, .send-card:hover { transform: none; transition: none; }
}

/* Атрибут hidden должен побеждать утилиты display */
[hidden] { display: none !important; }

/* Аудит: базовые состояния и доступность */
html { scroll-behavior: smooth; }
h1, h2, h3 { text-wrap: balance; }
a, button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease; }
:focus-visible { outline: 2px solid #0f8a4d; outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 50; background: #0f8a4d; color: #fff; padding: .5rem .75rem; border-radius: .5rem; font-weight: 600; }
.skip-link:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } a, button { transition: none; } }

/* ---- Закреплённая нижняя панель действий (мобильный) --------------------
   Учитывает home indicator на iPhone:
   странице нужен viewport-fit=cover, панели — env(safe-area-inset-bottom). */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; gap: .6rem; align-items: center;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-top: 1px solid #e5e7eb;
  padding: .6rem .9rem;
  padding-bottom: calc(.6rem + constant(safe-area-inset-bottom));
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(17, 24, 39, .06);
}
.action-bar__ghost {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: .1rem; padding: .2rem .7rem; color: #6b7280; font-size: .68rem; font-weight: 500;
}
.action-bar__ghost svg { width: 1.15rem; height: 1.15rem; }
.action-bar__cta { flex: 1; text-align: center; padding: .8rem 1rem; font-size: .95rem; }

/* Чтобы панель не накрывала подвал */
@media (max-width: 767px) {
  body.has-action-bar { padding-bottom: 5.5rem; }
}
/* custom.css грузится после tailwind.css, поэтому .action-bar{display:flex}
   перебивал бы утилиту md:hidden при равной специфичности. Прячем здесь. */
@media (min-width: 768px) {
  .action-bar { display: none; }
}

/* ---- Поиск заказа (Track order) -------------------------------------------- */
.lookup-empty { color: #6b7280; font-size: .85rem; }
.lookup-card { border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; padding: 1rem 1.1rem; }
.lookup-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .875rem; }
.lookup-row dt { color: #6b7280; flex-shrink: 0; }
.lookup-row dd { text-align: right; min-width: 0; word-break: break-all; }
.lookup-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 9999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 600; }
.lookup-badge--waiting { background: #fff7e6; color: #d46b08; }
.lookup-badge--paid { background: #e7f8f0; color: #00875a; }
.lookup-badge--expired { background: #f1f5f9; color: #6b7280; }

/* ---- Промо PEPE ---------------------------------------------------------
   Единственное место на сайте, где допущена «яркость»: остальной интерфейс
   намеренно спокойный, поэтому акцент работает за счёт контраста. */
.promo {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0b3d1f 0%, #12693a 45%, #3d9e2c 100%);
  border-radius: 1.5rem; color: #fff;
}
/* Мягкое свечение, чтобы блок не выглядел плоской заливкой */
.promo::before {
  content: ''; position: absolute; right: -12%; top: -45%;
  width: 26rem; height: 26rem; border-radius: 9999px;
  background: radial-gradient(circle, rgba(126,217,87,.55) 0%, rgba(126,217,87,0) 68%);
  pointer-events: none;
}
.promo__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  border-radius: 9999px; padding: .3rem .8rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* У самого логотипа зелёный круг, и на зелёном градиенте он тонет.
   Светлое кольцо отрывает знак от фона. */
.promo__coin {
  width: 5rem; height: 5rem; flex-shrink: 0;
  border-radius: 9999px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.92),
              0 0 0 7px rgba(255,255,255,.22),
              0 10px 22px rgba(0,0,0,.4);
  animation: promo-bob 3.2s ease-in-out infinite;
}
@keyframes promo-bob { 50% { transform: translateY(-6px) rotate(-4deg); } }

.promo__tiers { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) { .promo__tiers { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.promo__tier {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: .9rem; padding: .7rem .8rem;
}
.promo__tier dt { font-size: .7rem; opacity: .75; }
.promo__tier dd { font-size: .95rem; font-weight: 700; margin-top: .15rem; }
.promo__note { font-size: .7rem; opacity: .72; line-height: 1.5; }

/* Компактная плашка бонуса внутри мастера сделки */
.promo-strip {
  display: flex; align-items: center; gap: .7rem;
  background: linear-gradient(135deg, #eaf9e2, #d6f2c9);
  border: 1px solid #a8dd8d; border-radius: .9rem;
  padding: .6rem .8rem;
}
.promo-strip img { width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 9999px; }
.promo-strip__body { min-width: 0; flex: 1; }
.promo-strip__title { font-size: .75rem; color: #2f7a22; font-weight: 600; }
.promo-strip__amount { font-size: 1rem; font-weight: 700; color: #14310c; }
.promo-strip__val { font-size: .7rem; color: #4a6b3d; }
.promo-strip.is-locked { background: #f3f4f6; border-color: #e5e7eb; }
.promo-strip.is-locked .promo-strip__title { color: #6b7280; }
.promo-strip.is-locked .promo-strip__amount { color: #6b7280; font-size: .85rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .promo__coin { animation: none; } }

/* ---- AML-сканер кошелька ------------------------------------------------ */
.aml-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1.25rem; padding: 1.5rem; }
.aml-form { display: flex; flex-direction: column; gap: .6rem; }
@media (min-width: 640px) { .aml-form { flex-direction: row; } }
.aml-input {
  flex: 1; min-width: 0; background: #f7f8fa; border: 1px solid #e5e7eb;
  border-radius: .8rem; padding: .8rem 1rem; outline: none;
  font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.aml-input:focus { border-color: #0f8a4d; }
.aml-input.is-bad { border-color: #dc2626; }
.aml-connect {
  border: 1px solid #0f8a4d; color: #0f8a4d; background: #fff; font-weight: 600;
  border-radius: .8rem; padding: .8rem 1.1rem; white-space: nowrap;
}
.aml-connect:hover { background: #e6f5ed; }

/* Модалка результата */
.modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .6); backdrop-filter: blur(2px); }
.modal__box {
  position: relative; background: #fff; border-radius: 1.25rem; width: min(30rem, 100%);
  max-height: 88vh; overflow-y: auto; padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(17, 24, 39, .3);
  animation: modal-in .18s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal__close {
  position: absolute; top: .75rem; right: .75rem; width: 2rem; height: 2rem;
  border-radius: 9999px; color: #6b7280; display: flex; align-items: center; justify-content: center;
}
.modal__close:hover { background: #f3f4f6; color: #111827; }

/* Вердикт */
.aml-verdict { display: flex; align-items: center; gap: .75rem; border-radius: 1rem; padding: .9rem 1rem; }
.aml-verdict__icon { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 1.1rem; }
.aml-verdict--low     { background: #e6f5ed; color: #0a6c3c; }
.aml-verdict--low     .aml-verdict__icon { background: #0f8a4d; color: #fff; }
.aml-verdict--medium  { background: #fff7e6; color: #92400e; }
.aml-verdict--medium  .aml-verdict__icon { background: #d97706; color: #fff; }
.aml-verdict--high    { background: #fef2f2; color: #991b1b; }
.aml-verdict--high    .aml-verdict__icon { background: #dc2626; color: #fff; }
.aml-verdict--bad     { background: #fef2f2; color: #991b1b; }
.aml-verdict--bad     .aml-verdict__icon { background: #dc2626; color: #fff; }
/* Скоринг не подключён — намеренно нейтральный серый, не зелёный */
.aml-verdict--unknown { background: #f3f4f6; color: #374151; }
.aml-verdict--unknown .aml-verdict__icon { background: #9ca3af; color: #fff; }

.aml-addr { font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif; word-break: break-all; font-size: .8rem; color: #6b7280; }
.aml-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .875rem; border-top: 1px solid #e5e7eb; }
.aml-row dt { color: #6b7280; }
.aml-note { font-size: .75rem; color: #6b7280; line-height: 1.55; }
.aml-spinner { width: 1.1rem; height: 1.1rem; border: 2px solid #d1d5db; border-top-color: #0f8a4d; border-radius: 9999px; animation: aml-spin .7s linear infinite; display: inline-block; vertical-align: -2px; }
@keyframes aml-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .modal__box, .aml-spinner { animation: none; } }

/* Кнопка коннекта в состоянии ожидания: окно показывает сам виджет,
   поэтому индикация живёт здесь, а не в нашей модалке. */
.btn-primary.is-busy { opacity: .7; cursor: progress; filter: none; }
.btn-primary:disabled { pointer-events: none; }

/* Пункт меню «Check address»: это инструмент, а не раздел, поэтому
   выделен пилюлей — заметен, но не спорит с основным CTA. */
.nav-tool {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid #a8dd8d; background: #e6f5ed; color: #0a6c3c;
  border-radius: 9999px; padding: .35rem .8rem;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.nav-tool:hover { background: #d6f2c9; border-color: #7fc9a4; }
.nav-tool svg { flex-shrink: 0; }