.currency-page {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;

    color: #172033;
}

.currency-page *,
.currency-page *::before,
.currency-page *::after {
    box-sizing: border-box;
}


/* =========================
 * Навигация страницы
 * ========================= */

.currency-page-nav {
    display: flex;
    align-items: stretch;

    width: 100%;

    padding: 0 2%;

    background: #fff;

    border-bottom: 1px solid #e7eaf0;
}

.currency-page-nav-item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 4%;

    padding: 15px 0;

    color: #596577;

    font-size: 14px;
    font-weight: 400;

    text-decoration: none;
    white-space: nowrap;

    transition: color 0.2s ease;
}

.currency-page-nav-item:hover {
    color: #ff1654;
}

.currency-page-nav-item.active {
    color: #ff1654;
    font-weight: 600;
}

.currency-page-nav-item.active::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: #ff1654;
}


/* =========================
 * Основной контейнер
 * ========================= */

.currency-converter {
    width: 100%;

    margin-top: 1%;
    margin-bottom: 2%;
}

.currency-converter-box,
.currency-popular {
    width: 100%;

    background: #fff;

    border: 1px solid #e4e8ee;
    border-radius: 8px;

    box-shadow: 0 4px 18px rgba(24, 39, 57, 0.04);
}

.currency-converter-box {
    padding: 1.5% 2%;
}


/* =========================
 * Верх конвертера
 * ========================= */

.currency-converter-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    width: 100%;

    gap: 2%;
}

.currency-converter-side {
    flex: 0 1 32%;

    min-width: 0;
}

.currency-converter-label {
    margin: 0 0 8px 1%;

    color: #273244;

    font-size: 13px;
    font-weight: 400;
}


/* =========================
 * Поле суммы
 * ========================= */

.currency-converter-input-wrap {
    display: flex;
    align-items: stretch;

    width: 100%;

    overflow: hidden;

    background: #fff;

    border: 1px solid #dfe4eb;
    border-radius: 7px;
}

.currency-converter-input-wrap:focus-within {
    border-color: #cbd3de;
}


/* =========================
 * Левая часть поля:
 * флаг + input
 * ========================= */

.currency-converter-amount {
    flex: 1 1 75%;

    display: flex;
    align-items: stretch;

    min-width: 0;
}

.currency-field-flag {
    flex: 0 0 10%;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    background: #f1f3f6;

    color: #536174;

    font-size: 9px;
    font-weight: 700;
}

.currency-converter-input {
    flex: 1 1 auto;

    min-width: 0;

    padding: 10px 3%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #172033;

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;

    line-height: 1.3;
}

.currency-converter-input::-webkit-outer-spin-button,
.currency-converter-input::-webkit-inner-spin-button {
    margin: 0;

    -webkit-appearance: none;
}

.currency-converter-input[type="number"] {
    -moz-appearance: textfield;
}


/* =========================
 * Кнопка RUB / USD
 * ========================= */

.currency-converter-select {
    flex: 0 0 25%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    padding: 0 4%;

    border: 0;
    border-left: 1px solid #e1e5eb;

    outline: 0;

    background: #fff;

    color: #182238;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition: background 0.2s ease;
}

.currency-converter-select:hover {
    background: #fafbfc;
}

.currency-converter-select-code {
    overflow: hidden;

    font-size: 14px;
    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.currency-converter-select-arrow {
    flex: 0 0 auto;

    margin-left: 8%;

    color: #8490a1;

    font-size: 14px;
    line-height: 1;
}


/* =========================
 * Swap
 * ========================= */

.currency-converter-swap-wrap {
    flex: 0 0 4%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.currency-converter-swap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 65%;
    max-width: 44px;

    aspect-ratio: 1 / 1;

    padding: 0;

    border: 1px solid #e1e6ed;
    border-radius: 50%;

    outline: 0;

    background: #fff;

    color: #102038;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 2px 7px rgba(20, 35, 55, 0.04);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.currency-converter-swap:hover {
    border-color: #ccd4df;

    box-shadow: 0 4px 12px rgba(20, 35, 55, 0.08);

    transform: translateY(-1px);
}


/* =========================
 * Текущий курс
 * ========================= */

.currency-converter-rate {
    width: 100%;

    margin-top: 1%;

    padding-left: 1%;

    color: #718097;

    font-size: 12px;
}


/* =========================
 * Toolbar графика
 * ========================= */

.currency-chart-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    width: 100%;

    margin-top: 2%;

    border-bottom: 1px solid #e8ebef;
}


/* =========================
 * Периоды
 * ========================= */

.currency-converter-periods {
    flex: 1 1 auto;

    display: flex;
    align-items: center;

    gap: 5%;

    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
}

.currency-period {
    position: relative;

    flex: 0 0 auto;

    padding: 0 4px 12px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #536072;

    font-family: inherit;
    font-size: 13px;
    font-weight: 400;

    cursor: pointer;

    white-space: nowrap;

    transition: color 0.2s ease;
}

.currency-period:hover {
    color: #ff1654;
}

.currency-period.active {
    color: #ff1654;
    font-weight: 600;
}

.currency-period.active::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: #ff1654;
}


/* =========================
 * Badge текущего курса
 * ========================= */

.currency-chart-rate {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    padding: 7px 12px;

    border: 1px solid #dfe4eb;
    border-radius: 7px;

    background: #fff;

    color: #5e6b80;

    font-size: 12px;
    font-weight: 400;

    white-space: nowrap;
}

.currency-chart-rate-point {
    flex: 0 0 auto;

    width: 9px;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background: #ff1654;
}

.currency-chart-rate-arrow {
    flex: 0 0 auto;

    color: #8894a5;

    font-size: 13px;
}


/* =========================
 * График
 * ========================= */

.currency-converter-chart {
    position: relative;
    width: 100%;
    aspect-ratio: 6 / 1;
    min-height: 180px;
    margin-top: 1%;
}

.currency-converter-chart canvas {
    display: block;
    width: 100%;
    height: 100%;
}


/* =========================
 * Временная заглушка графика
 * ========================= */

.currency-chart-placeholder {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 16%,
            #eef1f4 16%,
            #eef1f4 16.1%,
            transparent 16.1%,
            transparent 33%,
            #eef1f4 33%,
            #eef1f4 33.1%,
            transparent 33.1%,
            transparent 50%,
            #eef1f4 50%,
            #eef1f4 50.1%,
            transparent 50.1%,
            transparent 67%,
            #eef1f4 67%,
            #eef1f4 67.1%,
            transparent 67.1%,
            transparent 84%,
            #eef1f4 84%,
            #eef1f4 84.1%,
            transparent 84.1%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 25%,
            #eef1f4 25%,
            #eef1f4 25.5%,
            transparent 25.5%,
            transparent 50%,
            #eef1f4 50%,
            #eef1f4 50.5%,
            transparent 50.5%,
            transparent 75%,
            #eef1f4 75%,
            #eef1f4 75.5%,
            transparent 75.5%
        );
}

.currency-chart-placeholder::after {
    content: '';

    position: absolute;

    left: 4%;
    right: 1%;

    bottom: 8%;

    height: 55%;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 22, 84, 0.12),
            rgba(255, 22, 84, 0.02)
        );

    clip-path: polygon(
        0 25%,
        16% 43%,
        33% 48%,
        50% 54%,
        66% 48%,
        83% 30%,
        100% 18%,
        100% 100%,
        0 100%
    );
}

.currency-chart-placeholder-line {
    position: absolute;

    left: 4%;
    right: 1%;

    bottom: 8%;

    height: 55%;
}

.currency-chart-placeholder-line span {
    position: absolute;

    width: 8px;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background: #ff1654;

    transform: translate(-50%, -50%);
}

.currency-chart-placeholder-line span:nth-child(1) {
    left: 0%;
    top: 25%;
}

.currency-chart-placeholder-line span:nth-child(2) {
    left: 16%;
    top: 43%;
}

.currency-chart-placeholder-line span:nth-child(3) {
    left: 33%;
    top: 48%;
}

.currency-chart-placeholder-line span:nth-child(4) {
    left: 50%;
    top: 54%;
}

.currency-chart-placeholder-line span:nth-child(5) {
    left: 66%;
    top: 48%;
}

.currency-chart-placeholder-line span:nth-child(6) {
    left: 83%;
    top: 30%;
}

.currency-chart-placeholder-line span:nth-child(7) {
    left: 100%;
    top: 18%;
}


/* =========================
 * Информация под графиком
 * ========================= */

.currency-converter-info {
    width: 100%;

    margin-top: 1%;

    color: #748196;

    font-size: 11px;
}


/* =========================
 * Популярные валюты
 * ========================= */

.currency-popular {
    margin-top: 1%;

    padding: 1.5% 2%;
}

.currency-popular-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 1%;
}

.currency-popular-header h2 {
    margin: 0;

    color: #172338;

    font-size: 19px;
    font-weight: 700;
}

.currency-popular-all {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 7px 14px;

    border: 1px solid #e1e5eb;
    border-radius: 6px;

    background: #fff;

    color: #273244;

    font-family: inherit;
    font-size: 12px;

    cursor: pointer;
}


/* =========================
 * Карточки
 * ========================= */

.currency-popular-list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    width: 100%;

    gap: 1%;
}

.currency-card {
    flex: 1 1 15%;

    min-width: 0;

    margin-bottom: 1%;

    padding: 1%;

    border: 1px solid #e1e6ed;
    border-radius: 7px;

    background: #fff;
}

.currency-card-top {
    display: flex;
    align-items: flex-start;

    width: 100%;

    gap: 5%;
}

.currency-card-flag {
    flex: 0 0 16%;

    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 1.4 / 1;

    border-radius: 4px;

    background: #f1f3f6;

    color: #526174;

    font-size: 9px;
    font-weight: 700;
}

.currency-card-title {
    flex: 1 1 auto;

    min-width: 0;
}

.currency-card-name {
    overflow: hidden;

    color: #273244;

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.currency-card-code {
    margin-top: 3%;

    color: #7c8899;

    font-size: 11px;
}

.currency-card-rate {
    margin-top: 8%;

    color: #172338;

    font-size: 22px;
    font-weight: 700;
}


/* =========================
 * Popup
 * ========================= */

.currency-select-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2%;

    background: rgba(15, 25, 40, 0.4);
}

.currency-select-popup-content {
    display: flex;
    flex-direction: column;

    width: 42%;
    max-width: 620px;
    height: 82vh;

    overflow: hidden;

    background: #fff;
    border-radius: 10px;

    box-shadow: 0 20px 60px rgba(15, 25, 40, 0.18);
}


/* header */

/* =========================
header popup (исправленный)
========================= */
.currency-select-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 92%;
    padding: 20px 24px; /* Фиксированные отступы вместо % */
    border-bottom: 1px solid #e7ebf0;
    gap: 16px; /* Гарантированный зазор между текстом и кнопкой */
}


.currency-select-popup-header strong {
    color: #273244;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap; /* Запрещаем перенос текста, чтобы он не ломал верстку */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Позволяет тексту сжиматься с троеточием, если экран очень узкий */
}

/* Кнопка закрытия - теперь это полноценная кнопка */
.currency-select-popup-close {
    flex: 0 0 40px; /* Жесткая ширина 40px, никогда не сожмется */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    outline: 0;
    background: #f1f3f6; /* Легкий фон для видимости зоны клика */
    color: #69768a;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin-left: auto; /* Прижимаем к правому краю, если flex-gap не сработает */
}

/* поиск */

.currency-select-popup-search {
    width: auto;
    padding: 4px 4px 4px 4px;
}

.currency-select-popup-search input {
    width: 100%;

    height: 35px;

    border: 1px solid #dfe4eb;
    border-radius: 7px;

    outline: 0;

    background: #fff;

    color: #273244;

    font-family: inherit;
    font-size: 14px;
}

.currency-select-popup-search input:focus {
    border-color: #aeb7c5;
}


/* список */

.currency-select-popup-list {
    flex: 1 1 auto;

    width: 100%;

    overflow-x: hidden;
    overflow-y: auto;
}


/* строка валюты */

.currency-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 2.2% 2%;

    border: 0;
    border-bottom: 1px solid #eef1f4;

    background: #fff;

    color: #273244;

    text-align: left;

    cursor: pointer;

    transition: background 0.15s ease;
}

.currency-select-item:hover,
.currency-select-item.active {
    background: #f7f8fa;
}


/* левая часть */

.currency-select-item-left {
    flex: 1 1 auto;

    display: flex;
    align-items: center;

    min-width: 0;

    gap: 3%;
}


/* флаг-заглушка именно внутри popup */

.currency-select-item .currency-card-flag {
    flex: 0 0 9%;

    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 1.4 / 1;

    border: 0;
    border-radius: 5px;

    background: #f0f2f5;

    color: #516078;

    font-size: 9px;
    font-weight: 700;
}


/* название */

.currency-select-item-name {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    color: #343b46;

    font-size: 14px;
    font-weight: 400;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* код справа */

.currency-select-item-code {
    flex: 0 0 12%;

    margin-left: 3%;

    color: #343b46;

    font-size: 14px;
    font-weight: 500;

    text-align: right;
}


/* scrollbar */

.currency-select-popup-list::-webkit-scrollbar {
    width: 6px;
}

.currency-select-popup-list::-webkit-scrollbar-track {
    background: transparent;
}

.currency-select-popup-list::-webkit-scrollbar-thumb {
    background: #d7dde5;

    border-radius: 10px;
}


/* tablet */

@media (max-width: 1000px) {

    .currency-select-popup-content {
        width: 65%;
    }

}



/* mobile */
@media (max-width: 700px) {
    .currency-select-popup {
        padding: 4%;
    }
    .currency-select-popup-content {
        width: 100%;
        max-height: 90vh;
        /* Убираем лишние отступы по бокам, чтобы контенту было больше места */
        border-radius: 12px 12px 0 0; 
    }
    
    /* === ИСПРАВЛЕНИЕ ДЛЯ КРЕСТИКА === */
    .currency-select-popup-header {
        padding: 16px 16px 12px; /* Фиксированные отступы вместо % */
        gap: 12px; /* Гарантированный зазор между текстом и крестиком */
    }

    .currency-select-popup-header strong {
        font-size: 18px;
        line-height: 1.3;
        /* Позволяем тексту переноситься, если он не влезает в одну строку */
        white-space: normal; 
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto; /* Заголовок занимает всё доступное место */
        min-width: 0; /* Важно для работы text-overflow */
    }

    .currency-select-popup-close {
        flex: 0 0 40px; /* Фиксированная ширина кнопки, она никогда не сожмется */
        height: 40px;
        padding: 0;
        font-size: 28px; /* Чуть крупнее для удобного нажатия пальцем */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f1f3f6; /* Легкий фон для лучшей видимости зоны клика */
        transition: background 0.2s;
    }
    
    .currency-select-popup-close:hover {
        background: #e4e8ee;
    }
    /* ========================= */

    .currency-select-popup-search {
        padding: 0 16px 12px;
    }
    .currency-select-item {
        padding: 14px 16px;
    }
    .currency-select-item .currency-card-flag {
        flex-basis: 12%;
    }
    .currency-select-item-code {
        flex-basis: 15%;
    }
}


/* =========================
 * Tablet
 * ========================= */

@media (max-width: 1100px) {

    .currency-page {
        padding: 0 2%;
    }

    .currency-converter-side {
        flex-basis: 44%;
    }

    .currency-converter-swap-wrap {
        flex-basis: 6%;
    }

    .currency-converter-select {
        flex-basis: 22%;
    }

    .currency-converter-amount {
        flex-basis: 78%;
    }

    .currency-card {
        flex-basis: 31%;
    }

}


/* =========================
 * Mobile
 * ========================= */

@media (max-width: 700px) {

    .currency-page-nav {
        overflow-x: auto;
    }

    .currency-page-nav-item {
        margin-right: 7%;
    }


    .currency-converter-box {
        padding: 4%;
    }


    .currency-converter-row {
        flex-direction: column;

        align-items: stretch;

        gap: 14px;
    }


    .currency-converter-side {
        flex: 1 1 100%;

        width: 100%;
    }


    .currency-converter-swap-wrap {
        flex: none;

        width: 100%;
    }


    .currency-converter-swap {
        width: 40px;

        margin: 0 auto;

        transform: rotate(90deg);
    }


    .currency-chart-toolbar {
        flex-direction: column;

        align-items: stretch;
    }


    .currency-converter-periods {
        width: 100%;

        gap: 6%;

        overflow-x: auto;
    }


    .currency-chart-rate {
        align-self: flex-end;

        margin-top: 2%;
    }


    .currency-converter-chart {
        aspect-ratio: 2.5 / 1;

        min-height: 160px;
    }


    .currency-card {
        flex-basis: 48%;

        padding: 3%;
    }

}


/* =========================
 * Small mobile
 * ========================= */

@media (max-width: 460px) {

    .currency-converter-input {
        font-size: 15px;
    }


    .currency-converter-select {
        flex-basis: 25%;

        padding-left: 5%;
        padding-right: 5%;
    }


    .currency-converter-amount {
        flex-basis: 75%;
    }


    .currency-field-flag {
        flex-basis: 15%;
    }


    .currency-period {
        font-size: 12px;
    }


    .currency-card {
        flex-basis: 100%;
    }

}


.currency-chart-empty {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7d889d;
    font-size: 14px;
}

.currency-chart-tooltip {
    position: absolute;
    z-index: 1000;

    display: none;

    min-width: 150px;

    padding: 10px 12px;

    background: #1f2937;
    color: #ffffff;

    border-radius: 6px;

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, 0.18);

    pointer-events: none;

    font-size: 13px;
    line-height: 1.4;

    transform:
        translateY(-100%);
}


.currency-chart-tooltip__date {
    margin-bottom: 4px;

    color: #cbd5e1;

    font-size: 12px;
}


.currency-chart-tooltip__rate {
    font-weight: 600;

    white-space: nowrap;
}