/* Курсы валют и сравнение банковских продуктов.
   Таблица-ведомость: плотная, читается сверху вниз, лучшая ставка — первая. */

.cmp {
    --cmp-ink: #1f2a26;
    --cmp-muted: #6b7280;
    --cmp-line: #e4efe9;
    --cmp-accent: #24bb8c;
    --cmp-accent-dark: #1c9c74;
    --cmp-surface: #ffffff;
    --cmp-radius: 14px;
    --cmp-shadow: 0 10px 34px rgba(31, 42, 38, .08);
}

/* Тёмная тема: страница строится на собственных токенах, и без их
   переопределения карточки разделов и пустое состояние оставались
   белыми при светлом тексте из общих правил — 1.17:1 и 2:1. */
html[data-theme="dark"] .cmp {
    --cmp-ink: var(--ink, #e8efea);
    --cmp-muted: var(--muted, #8a948d);
    --cmp-line: var(--line, #1f2d26);
    --cmp-surface: var(--surface, #0f1a15);
    --cmp-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}

/* ── Курсы валют ─────────────────────────────────────────────────────────── */

.rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0 0 .75rem;
}

.rate-card {
    background: var(--cmp-surface);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-radius);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* Валюты, требуемые ТЗ, выделены: их ищут в первую очередь */
.rate-card.is-featured { border-left: 4px solid var(--cmp-accent); }
.rate-card__code { font-size: .78rem; letter-spacing: .08em; color: var(--cmp-muted); text-transform: uppercase; }
.rate-card__value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--cmp-ink); }
.rate-card__name { font-size: .82rem; color: var(--cmp-muted); }
.rates-meta { color: var(--cmp-muted); font-size: .85rem; }

/* ── Разделы сравнения ───────────────────────────────────────────────────── */

.cmp-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cmp-section {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    background: var(--cmp-surface);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-radius);
    padding: 1.35rem 1.4rem;
    text-decoration: none;
    color: var(--cmp-ink);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cmp-section:hover,
.cmp-section:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--cmp-shadow);
    border-color: var(--cmp-accent);
    color: var(--cmp-accent-dark);
}

.cmp-section__title { font-weight: 700; font-size: 1.05rem; }
.cmp-section__hint { font-size: .85rem; color: var(--cmp-muted); }

/* ── Фильтры ─────────────────────────────────────────────────────────────── */

.cmp-filters {
    background: var(--cmp-surface);
    border: 1px solid var(--cmp-line);
    border-radius: var(--cmp-radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.cmp-filters label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cmp-muted); margin-bottom: .25rem; display: block; }
.cmp-filters select { width: 100%; border: 1px solid var(--cmp-line); border-radius: 10px; padding: .55rem .7rem; background: #fff; color: var(--cmp-ink); }
.cmp-filters select:focus-visible { outline: 3px solid var(--cmp-accent); outline-offset: 1px; }

/* ── Ведомость ───────────────────────────────────────────────────────────── */

.cmp-table-wrap { overflow-x: auto; background: var(--cmp-surface); border: 1px solid var(--cmp-line); border-radius: var(--cmp-radius); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp-table th, .cmp-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--cmp-line); }
.cmp-table thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cmp-muted); font-weight: 600; background: #f7fbf9; }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:hover { background: #f7fbf9; }
.cmp-bank { font-weight: 600; color: var(--cmp-ink); }

/* Лучшее предложение — первая строка выдачи */
.cmp-table tbody tr:first-child .cmp-bank::after {
    content: attr(data-best);
    display: inline-block;
    margin-left: .5rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cmp-accent-dark);
    background: #eafaf3;
    border-radius: 999px;
    padding: .1rem .5rem;
    vertical-align: middle;
}

.cmp-rate { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-rate strong { font-size: 1.02rem; }

.cmp-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--cmp-accent);
    background: transparent;
    color: var(--cmp-accent-dark);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-sm);
    font-weight: 600;
    padding: var(--btn-pad-sm);
    min-height: var(--btn-h-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.cmp-btn:hover { background: var(--cmp-accent); color: #fff; }
.cmp-btn:focus-visible { outline: 3px solid var(--cmp-accent-dark); outline-offset: 2px; }
.cmp-btn[disabled] { opacity: .5; cursor: default; }
.cmp-btn--solid { background: var(--cmp-accent); color: #fff; }
.cmp-btn--solid:hover { background: var(--cmp-accent-dark); color: #fff; }

/* ── Таблица сравнения выбранных банков ──────────────────────────────────── */

.cmp-basket {
    background: linear-gradient(120deg, #0f5132 0%, #24bb8c 100%);
    color: #fff;
    border-radius: var(--cmp-radius);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
}

.cmp-basket h2 { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 0 0 .75rem; }
.cmp-basket__chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: .3rem .5rem .3rem .85rem;
    font-size: .88rem;
}

.cmp-chip button {
    border: 0;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 1;
    font-size: .85rem;
    cursor: pointer;
}

.cmp-chip button:hover { background: rgba(255, 255, 255, .4); }
.cmp-chip button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cmp-basket .cmp-table-wrap { margin-top: 1rem; }

/* Ведомость внутри корзины стоит на белой подложке: без явного цвета она
   наследует белый текст заголовка и остаётся нечитаемой. */
.cmp-basket .cmp-table,
.cmp-basket .cmp-table td { color: var(--cmp-ink); }
.cmp-basket .cmp-table thead th { color: var(--cmp-muted); }
.cmp-basket__hint { font-size: .84rem; color: rgba(255, 255, 255, .85); margin: .6rem 0 0; }

.cmp-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--cmp-line);
    border-radius: var(--cmp-radius);
    background: var(--cmp-surface);
    color: var(--cmp-muted);
}

.cmp-empty h3 { color: var(--cmp-ink); font-size: 1.1rem; margin-bottom: .4rem; }