/* Free Space — общие стили сайта (поверх Bootstrap 5).
   Порядок разделов: цвета бренда, шапка, главная страница, кнопки, карточки,
   подвал, переключатель языка, таблицы данных, страница маршрута,
   доступность, служебные плашки. */

/* Цвета бренда. --brand-blue-rgb — тот же синий в виде «R, G, B» для rgba()
   (тени, подсветки, полупрозрачные фоны). При смене --brand-blue менять
   оба значения. */
:root {
    --brand-blue: #2F64E6;
    --brand-blue-rgb: 47, 100, 230;
    --brand-dark-blue: #0000A0;
    --brand-hover-blue: #0000CD;
}

/* ===== ШАПКА САЙТА ===== */
.bg-brand {
    background-color: var(--brand-blue);
    border-bottom: 4px solid var(--brand-dark-blue);
}

.bg-brand .navbar-brand {
    font-family: 'Montserrat Variable', 'Montserrat', sans-serif;
    font-size: 28px;
    color: #ffffff;
    font-weight: bold;
}

.bg-brand .nav-link {
    color: #ffffff;
    font-weight: 600;
    padding-left: 1rem;
    padding-right: 1rem;
}

.bg-brand .nav-link:hover,
.bg-brand .nav-link.active {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* Украинские подписи меню длиннее русских («Питання та відповіді»). На ширине
   планшета (768–991 px) отступы и шрифт ссылок уменьшены, чтобы пункты не
   переносились на вторую строку. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .bg-brand .nav-link {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.95rem;
    }
}

/* ===== ГЛАВНЫЙ БЛОК (hero) =====
   Верхний блок главной страницы (home.html). На страницах-списках и на
   route_detail.html класс используется без утилиты py-5: она задаёт отступы
   с !important и перебила бы padding, указанный ниже. */
.hero-section {
    background: linear-gradient(180deg, #eef3ff 0%, #ffffff 100%);
    padding: 80px 0 60px;
}

/* Текст фирменного синего цвета. */
.text-brand {
    color: var(--brand-blue);
}

.hero-image-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(var(--brand-blue-rgb), 0.25);
}

/* Тонкая светлая внутренняя рамка поверх изображения. */
.hero-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* ===== КНОПКИ =====
   .btn-brand — основное действие (заливка).
   .btn-outline-brand — второстепенное действие (контур, заливается при
   наведении). */
.btn-brand {
    background-color: var(--brand-blue);
    color: #fff;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(var(--brand-blue-rgb), 0.35);
}

.btn-brand:hover {
    background-color: var(--brand-hover-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(var(--brand-blue-rgb), 0.45);
}

.btn-outline-brand {
    background-color: transparent;
    color: var(--brand-blue);
    font-weight: 600;
    border: 2px solid var(--brand-blue);
    transition: all 0.3s ease;
}

.btn-outline-brand:hover {
    background-color: var(--brand-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--brand-blue-rgb), 0.35);
}

/* ===== КАРТОЧКИ КАТЕГОРИЙ (главная) =====
   Наведение (подъём, синяя рамка, тень) — общий стиль крупных карточек сайта;
   тот же стиль у .route-card на странице маршрута. */
.feature-card {
    border: 1px solid #eef0f4;
    border-radius: 18px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

.feature-card:hover {
    border-color: var(--brand-blue);
    box-shadow: 0 15px 35px rgba(var(--brand-blue-rgb), 0.18);
    transform: translateY(-6px);
}

.feature-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--brand-blue-rgb), 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon-wrap {
    background-color: var(--brand-blue);
}

.feature-icon {
    font-size: 1.8rem;
    color: var(--brand-blue);
    transition: color 0.3s ease;
}

.feature-card:hover .feature-icon {
    color: #ffffff;
}

.feature-card .card-title {
    font-family: 'Montserrat Variable', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #212529;
    margin: 0;
}

/* ===== БЛОК ДОВЕРИЯ =====
   Светлая полоса с короткими пунктами о подходе сайта (главная, «О нас»,
   «Поддержка»). */
.trust-section {
    background-color: #f8faff;
    border-top: 1px solid #eef0f4;
}

.trust-icon {
    font-size: 2.2rem;
    color: var(--brand-blue);
}

/* ===== УЗКИЕ ЭКРАНЫ: ГЛАВНЫЙ БЛОК ===== */
@media (max-width: 768px) {
    .hero-section {
        padding: 50px 0 40px;
    }
}

/* ===== ПОДВАЛ =====
   Тёмно-синий фон, колонки со ссылками, нижняя полоса с юридическими ссылками. */
.footer-brand {
    background-color: var(--brand-dark-blue);
    color: #ffffff;
    margin-top: auto;
}

.footer-logo {
    font-family: 'Montserrat Variable', 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 12px;
}

.footer-heading {
    font-family: 'Montserrat Variable', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a,
.footer-links li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.footer-links a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

/* Круглые значки соцсетей в подвале. Сейчас на сайте не используются:
   соцсети будут добавлены после запуска (код блока — в ARCHITECTURE.md,
   раздел про подвал). */
.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-socials a:hover {
    background-color: var(--brand-blue);
    transform: translateY(-3px);
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.15);
    margin: 30px 0 20px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    margin-left: 20px;
}

.footer-legal a:hover {
    color: #ffffff;
}

/* На узких экранах юридические ссылки идут столбцом: у первой нет левого отступа. */
@media (max-width: 768px) {
    .footer-legal a:first-child {
        margin-left: 0;
    }
}


/* ===== ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА =====
   Выпадающее меню выбора языка в шапке. Пункты — обычные ссылки на ту же
   страницу в другом языке (/ru/…, /uk/…). */
.lang-switcher .nav-link {
    font-weight: 600;
    font-size: 14px;
}

/* Флаг языка: небольшое скругление и светлая рамка, чтобы он был виден на синем фоне. */
.lang-switcher .fi {
    border-radius: 3px;
    width: 1.2em;
    height: 1.2em;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.lang-dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 8px;
    min-width: 180px;
}

.lang-dropdown-menu .dropdown-item {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.lang-dropdown-menu .dropdown-item:hover {
    background-color: rgba(var(--brand-blue-rgb), 0.08);
}

/* Текущий язык. */
.lang-dropdown-menu .dropdown-item.active {
    background-color: rgba(var(--brand-blue-rgb), 0.12);
    color: var(--brand-blue);
    font-weight: 600;
}

/* ===== ЕДИНАЯ ТАБЛИЦА (/banks/ukraine/ и /services/<категория>/) =====
   Класс .bank-limits-table общий для таблицы банков и таблиц всех четырёх
   категорий сервисов: разметка и стили одни и те же. */

/* Цветной квадрат с инициалами — запасной вариант, когда у банка или сервиса
   нет иконки сайта (favicon). */
.bank-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat Variable', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff;
}

/* Уменьшенный вариант (32 px) для ячейки «Банк» / «Сервис» в таблице;
   применяется вместе с .bank-logo или .bank-favicon. */
.bank-logo-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.bank-limits-table thead th {
    background-color: rgba(var(--brand-blue-rgb), 0.06);
    color: var(--brand-dark-blue);
    border-bottom: 2px solid rgba(var(--brand-blue-rgb), 0.2);
    font-weight: 600;
    font-size: 0.9rem;
}

.bank-limits-table td,
.bank-limits-table th {
    border-color: #d5dae1;
    border-bottom-width: 1.5px;
    padding: 1rem 0.85rem;
    color: #212529;
}

/* Текущая страница в пагинации; !important перебивает стили Bootstrap. */
.pagination-active {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #ffffff !important;
}

/* Списки фактов (лимиты, тарифы, способы пополнения, верификация); разметку
   выводит шаблон partials/fact_list.html. Галочка слева, пунктирный
   разделитель между пунктами, без цветных плашек. */
.method-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.method-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #212529;
}

.method-list li:last-child {
    margin-bottom: 0;
}

/* "\f633" — значок галочки из набора Bootstrap Icons. */
.method-list li::before {
    content: "\f633";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-dark-blue);
    font-size: 0.95rem;
    font-weight: 700;
}

/* Пунктирная линия между пунктами (после каждого, кроме последнего). */
.method-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    border-bottom: 1px dashed #c9ced6;
}

/* Бейджи «ДА» / «НЕТ» для поля accepts_uah_directly (принимает ли сервис
   гривну напрямую) — единственные цветные плашки на сайте. Причина «НЕТ» не
   хранится и не выводится. */
.uah-badge.uah-no-styled {
    background: linear-gradient(135deg, #D63A3E 0%, #D9383A 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 0.45em 0.85em;
    border-radius: 50rem; /* полностью скруглённые края (форма «таблетка») */
    box-shadow: 0 2px 6px rgba(217, 56, 58, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-transform: uppercase;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.uah-badge.uah-no-styled:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(217, 56, 58, 0.35);
}

.uah-badge.uah-yes-styled {
    background: linear-gradient(135deg, #1F8553 0%, #15803D 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 0.45em 0.85em;
    border-radius: 50rem;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-transform: uppercase;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Наведение для «ДА» повторяет наведение для «НЕТ». */
.uah-badge.uah-yes-styled:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(21, 128, 61, 0.32);
}

/* Подсветка строки таблицы при наведении. */
.bank-limits-table tbody tr {
    transition: background-color 0.2s ease;
}

.bank-limits-table tbody tr:hover {
    background-color: rgba(var(--brand-blue-rgb), 0.03) !important;
}

/* Иконка сайта банка или сервиса (favicon) в ячейке таблицы. */
.bank-favicon {
    border-radius: 8px;
    object-fit: contain;
    background-color: #ffffff;
    border: 1px solid #eef0f4;
    flex-shrink: 0;
}

/* Кнопка действия в последнем столбце таблицы (например, «Открыть счёт»):
   прямоугольная с небольшим скруглением, без иконки и без подписи под
   кнопкой, фирменный синий. */
.btn-nerd-cta {
    background-color: var(--brand-blue);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0.55em 1.1em;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(var(--brand-blue-rgb), 0.25);
    transition: all 0.2s ease;
}

.btn-nerd-cta:hover {
    background-color: var(--brand-hover-blue);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(var(--brand-blue-rgb), 0.35);
}

/* Подпункты (второй уровень) внутри .method-list. Поддерживается один
   уровень вложенности: вместо галочки серая точка, без пунктирного
   разделителя между подпунктами. */
.method-list .method-sublist {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    list-style: none;
    margin: 0.5rem 0 0 -22px;
    padding: 0;
}

.method-list .method-sublist li {
    position: relative;
    margin-bottom: 0;              /* сбрасываем отступ 10px из .method-list li: расстояние задаёт gap */
    padding-left: 22px;
    font-size: 0.85em;
    color: #495057;
}

.method-list .method-sublist li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.7em;                    /* середина первой строки при line-height: 1.4 */
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #9aa4b2;
}

.method-list .method-sublist li:not(:last-child)::after {
    display: none;                 /* без пунктирной линии родительского пункта между подпунктами */
}

/* ===== СТРАНИЦА МАРШРУТА (route_detail.html) =====
   Страница пары «банк → сервис». */

/* Окна «со стороны банка» и «со стороны сервиса». Наведение такое же, как у
   .feature-card на главной. !important перебивает рамку и тень из классов
   Bootstrap, заданных в разметке. */
.route-card {
    border: 1px solid #eef0f4 !important;
    transition: all 0.3s ease;
}

.route-card:hover {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 15px 35px rgba(var(--brand-blue-rgb), 0.18) !important;
    transform: translateY(-4px);
}

/* Справочная плашка, например «эта пара не проверялась индивидуально». Это
   пояснение, а не ошибка, поэтому вместо Bootstrap alert-info — мягкий фон
   фирменного синего с акцентной полосой слева. */
.route-disclaimer {
    background-color: rgba(var(--brand-blue-rgb), 0.06);
    border: 1px solid rgba(var(--brand-blue-rgb), 0.18);
    border-left: 4px solid var(--brand-blue);
    border-radius: 12px;
    color: #212529;
    padding: 0.9rem 1.1rem;
}

/* Строка-заголовок группы в таблице сервисов (биржи CEX / DEX, кошельки
   кастодиальные / некастодиальные). */
.subcategory-header {
    background-color: #f8f9fb;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-blue);
    padding: 0.6rem 1.25rem;
    border-top: 2px solid #e9ecef;
}

/* ===== ОСОБЕННОСТЬ МАРШРУТА (Route.note) =====
   Окно с особенностью маршрута. Светло-голубая заливка и круглая иконка
   отличают его от белых окон банка и сервиса. */
.route-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: #eaf1ff;
    border: 1px solid #bfd2ff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(var(--brand-blue-rgb), 0.12);
}

.route-feature__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.route-feature__body {
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #14203d;
}

/* Нижний отступ последнего элемента внутри окна убран, чтобы не было лишней пустоты. */
.route-feature__body > :last-child,
.route-feature__body ul:last-child {
    margin-bottom: 0;
}

/* Подпись «Особенность маршрута» над текстом, мелким капсом. */
.route-feature__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-dark-blue);
    margin: 0 0 4px;
}

/* На узких экранах (до 576 px) отступы и шрифт окна меньше. */
@media (max-width: 575.98px) {
    .route-feature {
        padding: 16px;
        gap: 12px;
    }

    .route-feature__body {
        font-size: 0.875rem;
    }
}


/* ===== ДОСТУПНОСТЬ ===== */

/* Видимая обводка при навигации с клавиатуры (Tab): тёмно-синяя на светлом
   фоне, белая на синей шапке и тёмном подвале. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid var(--brand-dark-blue);
    outline-offset: 3px;
    border-radius: 6px;
}

.bg-brand a:focus-visible,
.bg-brand button:focus-visible,
.footer-brand a:focus-visible {
    outline-color: #ffffff;
}

/* В выпадающем меню языков фон светлый, поэтому обводка снова тёмно-синяя
   (иначе правило .bg-brand выше сделало бы её белой на белом). */
.bg-brand .lang-dropdown-menu a:focus-visible {
    outline-color: var(--brand-dark-blue);
}

/* Ссылка «Перейти к содержимому» — первый элемент <body>. Скрыта, пока не
   получит фокус с клавиатуры; тогда появляется поверх шапки и не сдвигает
   страницу. */
body > .visually-hidden-focusable:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background-color: #ffffff;
    color: var(--brand-dark-blue);
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Карточка внутри ссылки при фокусе с клавиатуры получает рамку и тень,
   как при наведении мыши. */
a:focus-visible .feature-card {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), 0.45);
}

/* Серый текст на светло-голубых фонах и в подвале темнее стандартного
   Bootstrap — для достаточного контраста. */
.hero-section .text-muted,
.trust-section .text-muted {
    color: #5c636a !important;
}

.footer-brand .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Если в системе включено «уменьшить движение», анимации отключаются, а
   карточки и кнопки не поднимаются при наведении. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .btn-brand:hover,
    .btn-outline-brand:hover,
    .btn-nerd-cta:hover,
    .feature-card:hover,
    .route-card:hover,
    .footer-socials a:hover,
    .uah-badge:hover {
        transform: none !important;
    }
}


/* ===== ДАТА И ИСТОЧНИК ПРОВЕРКИ (partials/check_stamp.html) =====
   Метка у каждой записи: .check-chip--fresh — проверено недавно,
   --stale — проверено давно (порог задаёт DATA_STALE_AFTER_DAYS в
   settings.py, по умолчанию 90 дней), --unknown — даты проверки нет. */
.check-stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #c9ced6;
    font-size: 0.8rem;
    color: #495057;
}

/* Компактный вариант (в ячейках таблиц): без верхней линии. */
.check-stamp--compact {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
}

.check-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 50rem;
    font-weight: 600;
    white-space: nowrap;
}

.check-chip--fresh   { background-color: #e6f5ec; color: #116b36; }
.check-chip--stale   { background-color: #fff4dc; color: #7a5200; }
.check-chip--unknown { background-color: #eef0f3; color: #495057; }

.check-source { color: var(--brand-blue); text-decoration: none; }
.check-source:hover { text-decoration: underline; }

.check-hint { flex-basis: 100%; margin: 0; color: #7a5200; }


/* ===== «ДАННЫЕ УТОЧНЯЮТСЯ» (partials/pending.html) =====
   Единый вид пустых значений во всех таблицах и карточках. */
.data-pending {
    color: #5c636a;
    font-size: 0.875rem;
    font-style: italic;
}