/* CSS переменные для светлой темы (по умолчанию) */
:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F4F5FA;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-button-light: rgba(18, 98, 255, 0.1);
    --bg-hover: #FAFAFA;

    --text-primary: #12141D;
    --text-secondary: rgba(18, 20, 29, 0.7);
    --text-tertiary: #3F3F46;
    --text-muted: rgba(63, 63, 70, 0.6);
    --text-placeholder: rgba(18, 20, 29, 0.5);
    --text-light: #8C8D91;
    --text-lighter: #A0A1A5;

    --border-color: #E8E8E8;
    --border-input: #E8E8E8;

    --accent-blue: #1262ff;
    --accent-blue-hover: rgba(18, 98, 255, 0.7);
    --accent-blue-light: #EAEFFF;

    --shadow-sm: 0px 4px 80px rgba(0, 0, 0, 0.06);
    --shadow-md: 0px 4px 16px rgba(18, 98, 255, 0.4);
}

/* CSS переменные для темной темы */
body.dark-theme {
    --bg-primary: #0a0d1c;
    --bg-secondary: #1A1F26;
    --bg-card: #0a0d1c;
    --bg-input: #1e2436;
    --bg-button-light: rgba(18, 98, 255, 0.15);
    --bg-hover: #1e2436;

    --text-primary: #FFFFFF;
    --text-secondary: #E5E7EB;
    --text-tertiary: #D1D5DB;
    --text-muted: #9CA3AF;
    --text-placeholder: #6B7280;
    --text-light: #9CA3AF;
    --text-lighter: #6B7280;

    --border-color: #374151;
    --border-input: #374151;

    --accent-blue: #1262ff;
    --accent-blue-hover: rgba(18, 98, 255, 0.8);
    --accent-blue-light: rgba(18, 98, 255, 0.2);

    --shadow-sm: 0px 4px 80px rgba(0, 0, 0, 0.3);
    --shadow-md: 0px 4px 16px rgba(18, 98, 255, 0.5);
}

/* Применение переменных к основным элементам */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wrapper {
    background-color: var(--bg-primary);
}

/* Фоны */
.header {
    background-color: var(--bg-card);
}

.header_background_white {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

/* Прозрачный фон хедера на десктопе */
@media (min-width: 1024px) {
    .header,
    .header_background_white {
        background-color: transparent;
        box-shadow: none;
    }
}

.panel {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-theme .panel,
body.dark-theme .exchange__panel {
    background-color: #161928;
}

body.dark-theme .exchange__panel {
    border: none;
}

/* Темная тема для мобильного меню */
body.dark-theme .header__menu {
    background-color: var(--bg-card);
}

body.dark-theme .header__burger-line {
    background-color: var(--accent-blue);
}

.reviews {
    background-color: var(--bg-secondary);
}

body.dark-theme .reviews {
    background-color: var(--bg-primary);
}

.reviews__block {
    background-color: var(--bg-card);
}

.attention {
    background-color: var(--bg-secondary);
}

.footer {
    background-color: var(--bg-card);
}

/* Текст */
.title {
    color: var(--text-primary);
}

.nav__text {
    color: var(--text-tertiary);
}

.nav__link {
    color: var(--text-primary);
}

.nav__lang-link {
    color: var(--text-lighter);
}

.nav__lang-link_active {
    color: var(--text-primary);
}

.panel__text {
    color: var(--text-primary);
}

.panel__text_small {
    color: var(--text-tertiary);
}

.panel__subtitle {
    color: var(--text-primary);
}

.panel__link {
    color: var(--text-lighter);
}

.panel__link_active {
    color: var(--text-primary);
}

.panel__link-rules {
    color: var(--text-tertiary);
}

.exchange__subtitle {
    color: var(--text-primary);
}

.advantages__block-title {
    color: var(--text-primary);
}

.advantages__block-subtitle {
    color: var(--text-primary);
}

.reviews__block-username {
    color: var(--text-primary);
}

.reviews__block-date {
    color: var(--text-primary);
}

.reviews__block-text {
    color: var(--text-primary);
}

.attention__subtitle {
    color: var(--text-primary);
}

.verification__text {
    color: var(--text-primary);
}

.verification__info {
    color: var(--text-tertiary);
}

.rules__text {
    color: var(--text-primary);
}

.partners__text {
    color: var(--text-primary);
}

.application__title {
    color: var(--text-primary);
}

.application__subtitle {
    color: var(--text-primary);
}

.application__payment-title {
    color: var(--text-primary);
}

.application__payment-text {
    color: var(--text-muted);
}

.application__panel-block-title {
    color: var(--text-tertiary);
}

.application__panel-block-subtitle {
    color: var(--text-primary);
}

.application__date-title {
    color: var(--text-tertiary);
}

.application__date-subtitle {
    color: var(--text-primary);
}

.application__timer-title {
    color: var(--text-primary);
}

.application__timer-time {
    color: var(--text-primary);
}

.error__subtitle {
    color: var(--text-primary);
}

.account__th,
.partners__th {
    color: var(--text-primary);
}

.account__td,
.partners__td {
    color: var(--text-primary);
}

.account__td_color_black,
.partners__td_color_black {
    color: var(--text-primary);
}

.account__td_color_gray,
.partners__td_color_gray {
    color: var(--text-primary);
}

.partners__user {
    color: var(--text-primary);
}

/* Поля ввода */
.input {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.input::placeholder {
    color: var(--text-placeholder);
}

.input__text {
    color: var(--text-primary);
}

.input__btn {
    color: var(--accent-blue);
}

/* Селекты */
.select__header {
    background-color: var(--bg-input);
    border-color: var(--border-input);
    box-shadow: var(--shadow-sm);
}

.select__current {
    color: var(--text-primary);
}

.select__text {
    color: var(--accent-blue);
}

.select__body {
    background-color: var(--bg-input);
    border-color: var(--border-input);
}

.select__item {
    color: var(--text-primary);
    background-color: var(--bg-input);
}

.select__item:hover {
    background-color: var(--bg-hover);
}

/* Кнопки */
.btn_background_light_blue {
    color: var(--accent-blue);
    background-color: var(--bg-button-light);
}

.btn_background_light_blue:hover {
    color: var(--accent-blue);
}

.btn_border_gray {
    color: var(--text-light);
    border-color: var(--border-color);
    background-color: var(--bg-card);
}

.btn_border_gray:hover {
    color: var(--text-light);
}

.panel__btn {
    color: var(--text-lighter);
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.panel__btn:hover {
    color: var(--text-lighter);
}

.panel__btn_active {
    color: #FFFFFF;
    border-color: var(--accent-blue);
    background-color: var(--accent-blue);
}

.panel__btn_active:hover {
    color: #FFFFFF;
}

.swap-currencies-btn {
    background-color: var(--accent-blue-light);
}

.swap-currencies-btn:hover {
    background-color: var(--accent-blue-light);
}

/* Панели и блоки */
.application__panel-block,
.application__date,
.rules__panel-block,
.partners__panel-block {
    background-color: var(--bg-secondary);
}

.partners__discount-title,
.partners__discount-text,
.application__block-title,
.application__text {
    color: var(--text-tertiary);
}

.application__block-subtitle {
    color: var(--text-primary);
}

.application__block {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.advantages__block-img,
.application__date-img {
    background-color: var(--accent-blue-light);
}

/* Границы */
.panel__line,
.rules__panel-line div {
    background-color: var(--border-color);
}

body.dark-theme .panel__line,
body.dark-theme .rules__panel-line div {
    background-color: var(--accent-blue);
}

.partners__tr,
.account__tr {
    border-color: var(--border-color);
}

/* Preloader */
.preloader {
    background-color: var(--bg-card);
}

/* Переключатель темы - круглая кнопка */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 20px;
    font-size: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative;
    outline: none;
}

.theme-toggle-btn:focus {
    outline: none;
}

.theme-toggle-btn:hover {
    background-color: rgba(18, 98, 255, 0.1);
    transform: scale(1.1);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

/* Иконки темы */
.theme-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-icon--sun {
    opacity: 1;
    color: var(--text-primary);
}

.theme-icon--moon {
    opacity: 0;
    color: #FFFFFF;
}

body.dark-theme .theme-icon--sun {
    opacity: 0;
}

body.dark-theme .theme-icon--moon {
    opacity: 1;
}

/* Темная тема для компактного селектора валют */
body.dark-theme .input-currency-selector {
    background: #1e2436 !important;
    border: none;
    color: var(--text-primary);
    box-shadow: none !important;
    background-image: none !important;
}

body.dark-theme .input-currency-selector:hover {
    background: #1e2436 !important;
    border: none;
    box-shadow: none !important;
    background-image: none !important;
}

body.dark-theme .input-currency-selector:focus,
body.dark-theme .input-currency-selector:active {
    background: #1e2436 !important;
    border: none;
    box-shadow: none !important;
    background-image: none !important;
}

body.dark-theme .input-currency-selector__code {
    color: var(--text-primary);
}

body.dark-theme .input-currency-selector__arrow {
    color: var(--text-muted);
}

body.dark-theme .input-currency-selector:hover .input-currency-selector__arrow {
    color: var(--accent-blue);
}

/* Темная тема для модального окна выбора валюты */
body.dark-theme .currency-modal {
    background: rgba(0, 0, 0, 0);
}

body.dark-theme .currency-modal--active {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-theme .currency-modal__content {
    background: var(--bg-card);
}

body.dark-theme .currency-modal__close {
    color: var(--text-light);
}

body.dark-theme .currency-modal__close:hover {
    color: var(--accent-blue);
}

body.dark-theme .currency-modal__title {
    color: var(--text-primary);
}

body.dark-theme .currency-filter {
    background: var(--bg-secondary);
    color: var(--text-light);
}

body.dark-theme .currency-filter:hover {
    background: var(--accent-blue-light);
    color: var(--accent-blue);
}

body.dark-theme .currency-filter--active {
    background: var(--accent-blue);
    color: #FFFFFF;
}

body.dark-theme .currency-search {
    background: var(--bg-secondary);
}

body.dark-theme .currency-search:hover {
    background: var(--bg-hover);
}

body.dark-theme .currency-search.active {
    background: var(--bg-input);
    border-color: var(--accent-blue);
}

body.dark-theme .currency-search__icon {
    color: var(--text-light);
}

body.dark-theme .currency-search.active .currency-search__icon {
    color: var(--accent-blue);
}

body.dark-theme .currency-search__input {
    color: var(--text-primary);
}

body.dark-theme .currency-search__input::placeholder {
    color: var(--text-light);
}

body.dark-theme .currency-section__title {
    color: var(--text-light);
}

body.dark-theme .currency-card {
    background: var(--bg-input);
    border-color: var(--border-color);
}

body.dark-theme .currency-card:hover {
    border-color: var(--accent-blue);
}

body.dark-theme .currency-card.selected {
    border-color: var(--accent-blue);
    background: #171d2f;
}

body.dark-theme .currency-card.selected .currency-card__check {
    display: none;
}

body.dark-theme .currency-card__name {
    color: var(--text-primary);
}

body.dark-theme .currency-selector__button {
    background: var(--bg-input);
    border-color: var(--border-color);
}

body.dark-theme .currency-selector__name {
    color: var(--text-primary);
}

body.dark-theme .currency-selector__change {
    color: var(--accent-blue);
}

/* Темная тема для layout обмена */
body.dark-theme .input__label {
    color: var(--text-muted);
}

body.dark-theme .input__error {
    color: #EF4444;
}

body.dark-theme .exchange-field .input {
    color: var(--text-primary);
    background: #1e2436 !important;
    border: none;
    box-shadow: none !important;
    background-image: none !important;
}

body.dark-theme .exchange-field .input:hover,
body.dark-theme .exchange-field .input:focus {
    background: #1e2436 !important;
    border: none;
    box-shadow: none !important;
    background-image: none !important;
}

body.dark-theme .swap-currencies-btn {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

body.dark-theme .swap-currencies-btn:hover {
    background: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
}

body.dark-theme .swap-icon {
    color: #FFFFFF;
}

/* Промежуток между полями обмена */
body.dark-theme .panel__bottom-wrapper {
    gap: 1px;
}

body.dark-theme .swap-wrapper {
    margin: 5px 0;
}

/* Темная тема для footer */
body.dark-theme .btn_border_blue {
    color: var(--accent-blue);
    background: transparent;
    border-color: var(--accent-blue);
}

body.dark-theme .btn_border_blue:hover {
    color: var(--accent-blue);
    background: var(--accent-blue-light);
}

body.dark-theme .btn_background_blue {
    color: #FFFFFF;
    background: var(--accent-blue);
}

body.dark-theme .btn_background_blue:hover {
    color: #FFFFFF;
    background: var(--accent-blue-hover);
}

/* Двухколоночный layout для десктопа */
@media (min-width: 1024px) {
    .exchange__container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 200px;
    }

    .exchange__content {
        flex: 0 0 auto;
        max-width: 450px;
        margin-left: 0;
    }

    .exchange__title {
        text-align: left;
        margin: 0;
        width: 100%;
    }

    .exchange__subtitle {
        text-align: left;
        margin: 18px 0 0 0;
        width: 100%;
    }

    .exchange {
        position: relative;
    }

    .exchange::before {
        content: '';
        position: absolute;
        bottom: -400px;
        right: -10px;
        width: 1200px;
        height: 1200px;
        background: url('../img/shapes/dots.png') no-repeat;
        background-size: contain;
        z-index: 0;
        pointer-events: none;
        opacity: 0.85;
    }

    .exchange__container {
        position: relative;
        z-index: 1;
    }

    .exchange__panel {
        flex: 0 0 auto;
        width: 520px;
        margin: 0;
        position: relative;
    }

    .exchange__panel .panel__title {
        display: none;
    }

    /* Увеличиваем размеры полей обмена в десктопе */
    .exchange-field .input {
        min-height: 110px;
        padding: 45px 160px 25px 30px;
        font-size: 32px;
        font-weight: 600;
    }

    /* Стандартный размер для поля адреса */
    #input__get {
        min-height: 56px !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
    }

    .exchange-field .input__label {
        font-size: 16px;
        top: 18px;
        left: 20px;
    }

    #input__get + .input__label {
        font-size: 12px !important;
        top: 12px !important;
    }

    /* Стандартный размер для поля номера карты */
    #input__card_number {
        min-height: 56px !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
    }

    .input-currency-selector {
        padding: 12px 20px;
        gap: 14px;
    }

    .input-currency-selector__img {
        width: 28px;
        height: 28px;
    }

    .input-currency-selector__code {
        font-size: 18px;
    }
}

/* Таймер обновления курса */
.exchange-rate-timer {
    display: block;
}

.exchange-rate-timer__wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exchange-rate-timer__circle {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.timer-ring {
    transform: rotate(-90deg);
}

.timer-ring__circle-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 2;
}

.timer-ring__circle {
    fill: none;
    stroke: var(--accent-blue);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

body.dark-theme .timer-ring__circle-bg {
    stroke: #374151;
}

.exchange-rate-timer__time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.exchange-rate-timer__text {
    font-size: 14px;
    color: var(--text-tertiary);
    flex: 1;
}

/* Скрываем заголовок панели на всех экранах */
.exchange__panel .panel__title,
.exchange__panel-title {
    display: none !important;
}

/* Убираем отступ после скрытого заголовка */
.exchange__panel .panel__bottom {
    padding-top: 15px;
}

.panel__bottom-wrapper {
    margin-top: 0;
}

/* Мобильная версия - убираем обводку полей и эффекты */
@media (max-width: 768px) {
    body.dark-theme .exchange-field .input {
        background: #1e2436 !important;
        border: none !important;
        box-shadow: none !important;
        background-image: none !important;
    }

    body.dark-theme .exchange-field .input:hover,
    body.dark-theme .exchange-field .input:focus {
        background: #1e2436 !important;
        border: none !important;
        box-shadow: none !important;
        background-image: none !important;
    }

    body.dark-theme .input-currency-selector {
        background: #1e2436 !important;
        box-shadow: none !important;
        background-image: none !important;
    }
}

@media (max-width: 480px) {
    body.dark-theme .exchange-field .input {
        background: #1e2436 !important;
        border: none !important;
        box-shadow: none !important;
        background-image: none !important;
    }

    body.dark-theme .input-currency-selector {
        background: #1e2436 !important;
        box-shadow: none !important;
        background-image: none !important;
    }
}