/*
 * fin45-custom.css v1.4
 * В sites_func.php ПОСЛЕ theme-style:
 *   wp_enqueue_style('fin45-custom', PN_TEMPLATEURL . "/fin45-custom.css", array('theme-style'), '1.4');
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* =====================================================
   ШРИФТЫ
   ===================================================== */
:root {
    --font: 'Inter', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;
}
body { font-family: 'Inter', sans-serif !important; }
h1, h2, h3, h4,
.h2-title, .h4-title,
.hometext-wrapper__title,
.icon-card__title,
.section__title h2 {
    font-family: 'Space Grotesk', sans-serif !important;
    letter-spacing: -0.02em;
}

/* =====================================================
   ФОН — перебиваем html.dark { background:#232323 }
   ===================================================== */
.dark {
    --Bg: linear-gradient(135deg, #1E0030 0%, #0A1128 50%, #003540 100%);
    --Page-Fill: #090d1a;
    --Footer: #08060f;
    --Header-0: rgba(10, 8, 25, 0.55);
    --Header-1: rgba(10, 8, 25, 0.55);
    --Header-2: rgba(10, 8, 25, 0.85);

    /* Серый фон секций — заменяем на glass */
    --Big-Block-Fill: rgba(255, 255, 255, 0.05);
    --Order-Big-Block-Fill: rgba(255, 255, 255, 0.05);
    --Small-Block-Fill: rgba(255, 255, 255, 0.04);
}
html.dark {
    background: linear-gradient(135deg, #1E0030 0%, #0A1128 50%, #003540 100%) !important;
}
html.dark body {
    background:
        url('../images/Bg.jpg') no-repeat top center / 0px,
        linear-gradient(135deg, #1E0030 0%, #0A1128 50%, #003540 100%) !important;
    background-attachment: fixed !important;
}

/* =====================================================
   АКЦЕНТНЫЙ ЦВЕТ
   ===================================================== */
.dark {
    --Colors-Fills-Primary: #00b8c8;
    --Colors-Fills-Dropmenu-Burgermenu: #00b8c8;
    --Colors-Fills-Table-Header: rgba(0,240,255,0.07);
    --Colors-Fills-Table-Item: rgba(0,240,255,0.025);
    --Colors-Texts-Form-Link: #00D4E8;
    --Colors-Texts-Link: #00D4E8;
    --Colors-Texts-Link-Hover: #00F0FF;
    --Colors-Texts-Link-Click: #008fa0;
    --Colors-Texts-Secondary-Button-Text: #00D4E8;
    --Form-Button: #00D4E8;
    --Form-Button-Hover: #00F0FF;
    --Form-Button-Click: #009aaa;
    --Primary-Button: #00D4E8;
    --Primary-Button-Hover: #00F0FF;
    --Primary-Button-Click: #009aaa;
    --Colors-States-Currency-Item-Hover: rgba(0,240,255,0.15);
    --Colors-States-Currency-Item-Selected: rgba(0,240,255,0.08);
    --Colors-States-Droplist-Item-Hover: rgba(0,240,255,0.15);
    --Colors-States-Droplist-Item-Selected: rgba(0,240,255,0.08);
    --Colors-Strokes-Secondary-Button-Stroke: #00D4E8;
    --Colors-Strokes-Dropdown-Menu-Strokes: rgba(0,240,255,0.25);
    --Colors-Strokes-Big-Block-Stroke: rgba(255,255,255,0.08);
    --Colors-Strokes-Small-Block-Stroke: rgba(255,255,255,0.07);
}

/* =====================================================
   ШАПКА — glass
   ===================================================== */
.dark .user-bar {
    background: rgba(10, 8, 25, 0.6) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(0,240,255,0.06) !important;
}
.dark .navigation {
    background: rgba(10, 8, 25, 0.45) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(0,240,255,0.12) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2) !important;
}
.dark .navigation.sticky.active,
.dark .user-bar.sticky.active {
    background: rgba(10, 8, 25, 0.92) !important;
}

/* =====================================================
   HERO
   ===================================================== */
.fin45-hero {
    text-align: center;
    padding: 6rem 2rem 4rem;
    position: relative;
    z-index: 2;
}
.fin45-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3.2rem, 6vw, 7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 2rem;
}
.fin45-hero-title span {
    background: linear-gradient(90deg, #00F0FF, #00D4E8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fin45-hero-sub {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    color: rgba(255,255,255,0.5);
    max-width: 55rem;
    margin: 0 auto;
    line-height: 1.7;
}

/* =====================================================
   БЛОК ОБМЕНА
   ===================================================== */
.dark .main-form .xchange_table_wrap {
    max-width: 860px !important;
    margin: 0 auto !important;
}
.dark .main-form {
    padding-top: 2rem !important;
    padding-bottom: 5rem !important;
}

/* Glass для всех вариантов таблицы обмена */
.dark .xchange_type_list_ins,
.dark .xchange_type_table.tbl4 .xtt_left_col_table_ins,
.dark .xchange_type_table.tbl4 .xtt_right_col_table_ins,
.dark .xchange_type_table.tbl5 .xtt_left_col_table_ins,
.dark .xchange_type_table.tbl5 .xtt_right_col_table_ins,
.dark .homechange .xchange_div {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    box-shadow:
        0 0 0 1px rgba(0,240,255,0.04),
        0 24px 64px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    padding: 2.4rem !important;
}

/* Glow вокруг блока обмена */
.dark .xchange_table_wrap { position: relative; z-index: 2; }
.dark .xchange_table_wrap::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg,
        rgba(0,240,255,0.1) 0%,
        rgba(100,50,200,0.05) 50%,
        rgba(0,240,255,0.1) 100%);
    border-radius: 28px;
    filter: blur(16px);
    opacity: 0.7;
    z-index: -1;
    pointer-events: none;
}

/* Поля ввода */
.dark .xtl_input_wrap input {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease !important;
}
.dark .xtl_input_wrap input:focus {
    border-color: rgba(0,240,255,0.45) !important;
    box-shadow: 0 0 0 3px rgba(0,240,255,0.1) !important;
    outline: none !important;
}

/* Дропдаун */
.dark .xtl_select_wrap .select_js_title {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 10px !important;
}

/* Иконка валюты */
.dark .iselect_js .select_ico {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Кнопка «Продолжить» — фиксируем ширину */
.dark .xtl_submit {
    background: #00D4E8 !important;
    color: #0A1128 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 0 24px rgba(0,212,232,0.35) !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.dark .xtl_submit:hover {
    background: #00F0FF !important;
    box-shadow: 0 0 40px rgba(0,240,255,0.55) !important;
}

/* Стрелка swap */
.dark a.xtl_change {
    background-color: rgba(0,240,255,0.12) !important;
    border: 1px solid rgba(0,240,255,0.3) !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
}
.dark a.xtl_change:hover {
    background-color: rgba(0,240,255,0.25) !important;
}

/* =====================================================
   GLASS — общий стиль для всех больших секций
   .section_ins — обёртка каждой секции на главной
   Серый фон берётся из --Big-Block-Fill (уже заменён выше)
   Дополнительно добавляем backdrop-filter
   ===================================================== */
.dark .section_ins {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    box-shadow:
        0 0 0 1px rgba(0,240,255,0.03),
        0 16px 48px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* =====================================================
   БЛОК «ДОБРО ПОЖАЛОВАТЬ» — .section.hometext
   НЕ стилизуем .hometext-wrapper и .hometext-wrapper_ins
   чтобы лого не съезжало. Только саму секцию.
   ===================================================== */
.dark .section.hometext .section_ins {
    /* Уже стилизовано через .section_ins выше */
}
/* Лого выравниваем по центру вертикали */
.dark .hometext-wrapper {
    align-items: center !important;
}
.dark .hometext-wrapper__img {
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
}

/* =====================================================
   ОТСТУПЫ СЕКЦИЙ
   ===================================================== */
.dark .section {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/* =====================================================
   КАРТОЧКИ ОТЗЫВОВ — .feedback.feedback-slide
   ===================================================== */
.dark .feedback.feedback-slide {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    overflow: visible !important;
    transition: border-color 0.2s ease !important;
}
.dark .feedback.feedback-slide:hover {
    border-color: rgba(0,240,255,0.2) !important;
}

/* =====================================================
   КАРТОЧКИ ПОСЛЕДНИХ ОБМЕНОВ — .crypto.swiper-slide
   ===================================================== */
.dark .crypto.swiper-slide {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    overflow: visible !important;
    transition: border-color 0.2s ease !important;
}
.dark .crypto.swiper-slide:hover {
    border-color: rgba(0,240,255,0.2) !important;
}
/* Стрелка между монетами — SVG через background-image,
   перекрашиваем в cyan через CSS filter */
.dark .coin_arrow {
    filter: invert(1) sepia(1) saturate(3) hue-rotate(155deg) !important;
    opacity: 0.9 !important;
}
/* Сумма «получаете» */
.dark .crypto__history .coin:last-child .coin__info span:first-child {
    color: #00D4E8 !important;
    font-weight: 700 !important;
}

/* =====================================================
   КАРТОЧКИ НОВОСТЕЙ — .news.swiper-slide.news-slide
   ===================================================== */
.dark .news.swiper-slide.news-slide {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}
.dark .news.swiper-slide.news-slide:hover {
    border-color: rgba(0,240,255,0.2) !important;
}
.dark .news__content .h4-title {
    color: #e8f8ff !important;
    font-family: 'Space Grotesk', sans-serif !important;
}
.dark .news__content .more { color: #00D4E8 !important; }

/* =====================================================
   КАРТОЧКИ ПРЕИМУЩЕСТВ — .icon-card.swiper-slide.advantages-slide
   ===================================================== */
.dark .icon-card.swiper-slide.advantages-slide {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    overflow: visible !important;
    transition: border-color 0.2s ease !important;
}
.dark .icon-card.swiper-slide.advantages-slide:hover {
    border-color: rgba(0,240,255,0.2) !important;
}
.dark .icon-card__icon {
    background: rgba(0,212,232,0.1) !important;
    border: 1px solid rgba(0,212,232,0.2) !important;
    border-radius: 16px !important;
    padding: 1.2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dark .icon-card__title {
    color: #e8f8ff !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

/* =====================================================
   РЕЗЕРВЫ — .reserve-item
   ===================================================== */
.dark .reserve-item {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    overflow: visible !important;
    transition: border-color 0.2s ease !important;
}
.dark .reserve-item:hover { border-color: rgba(0,240,255,0.15) !important; }

/* =====================================================
   ПАРТНЁРЫ — скрываем пустые карточки
   ===================================================== */
.dark .partner_item:not(:has(img)) {
    display: none !important;
}
.dark .partner_item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
    padding: 1.6rem 2.4rem !important;
}
.dark .partner_item img {
    height: 3.6rem !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}
.dark .partner_item:hover { border-color: rgba(255,255,255,0.14) !important; }

/* =====================================================
   ЗАГОЛОВКИ
   ===================================================== */
.dark .h2-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

/* =====================================================
   ФУТЕР
   ===================================================== */
.dark .footer { border-top: 1px solid rgba(0,240,255,0.07) !important; }

/* =====================================================
   СКРОЛЛБАР
   ===================================================== */
html.dark ::-webkit-scrollbar { width: 6px; }
html.dark ::-webkit-scrollbar-track { background: #090d1a; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(0,212,232,0.3); border-radius: 3px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(0,212,232,0.5); }

/* =====================================================
   КНОПКА «ПРОДОЛЖИТЬ» — текст по центру
   Тема задаёт height:8rem без flex, текст прижат к верху
   ===================================================== */
.dark .xtl_submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 5.6rem !important;
    padding: 0 2rem !important;
    line-height: 1 !important;
}

/* =====================================================
   МОБИЛЬНЫЕ ПРАВКИ (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {

    /* Hero — заголовок не обрезается */
    .fin45-hero {
        padding: 4rem 1.6rem 2.4rem !important;
        overflow: hidden;
    }
    .fin45-hero-title {
        font-size: clamp(2.8rem, 8vw, 4.8rem) !important;
        word-break: break-word;
    }

    /* Canvas не перекрывает контент на мобильном */
    #fin45-bg {
        z-index: 0 !important;
    }

    /* Блок обмена — на всю ширину */
    .dark .main-form .xchange_table_wrap {
        max-width: 100% !important;
        padding: 0 1.6rem !important;
    }

    /* Блок «Добро пожаловать» — фикс overflow */
    .dark .hometext-wrapper {
        overflow: hidden !important;
    }
    .dark .hometext-wrapper__img {
        max-width: 40% !important;
        flex-shrink: 0 !important;
    }
    .dark .hometext-wrapper__img img {
        width: 100% !important;
        height: auto !important;
    }

    /* Секции — меньше паддинг */
    .dark .section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* =====================================================
   АНГЛИЙСКАЯ ВЕРСИЯ — hero текст
   JS вставляет русский текст, для EN нужно проверять lang
   Решение: JS сам определит язык (см. fin45-init.js)
   ===================================================== */

/* =====================================================
   Z-INDEX ФИКС — меню не перекрывается hero
   .nav-wrapper должен быть выше .fin45-hero
   ===================================================== */
.dark .nav-wrapper {
    position: relative;
    z-index: 100 !important;
}
.dark .user-bar {
    z-index: 101 !important;
}
.dark .navigation {
    z-index: 100 !important;
}
/* Hero ниже шапки */
.fin45-hero {
    position: relative;
    z-index: 2 !important;
}
/* menu-items-wrapper (мобильное меню) — выше всего */
.dark .menu-items-wrapper {
    z-index: 200 !important;
    position: relative;
}

/* =====================================================
   БЛОК «ДОБРО ПОЖАЛОВАТЬ» — мобильный фикс
   Тема скрывает лого на mobile через display:none,
   но наши правки это перебивают. Восстанавливаем.
   ===================================================== */
@media (max-width: 640px) {
    .dark .hometext-wrapper__img {
        display: none !important;
    }
    .dark .hometext-wrapper {
        flex-direction: column !important;
    }
    .dark .hometext-wrapper__text {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* =====================================================
   БЛОК «ДОБРО ПОЖАЛОВАТЬ» — лого
   Десктоп: возвращаем оригинальное поведение темы
   (align-self: flex-end с отрицательными margins)
   но убираем выход за границы section_ins через overflow
   Мобильный: скрываем лого (как задумано темой)
   ===================================================== */
.dark .section.hometext .section_ins {
    overflow: hidden !important;
}
.dark .hometext-wrapper {
    align-items: flex-end !important;
}
.dark .hometext-wrapper__img {
    align-self: flex-end !important;
    margin: -6rem 0 -6rem !important;
    flex-shrink: 0 !important;
}
@media (max-width: 640px) {
    .dark .hometext-wrapper__img {
        display: none !important;
    }
}