/**
 * Zuhur Exchange - Unified Colors
 * Файл для унификации цветов на сайте согласно фирменному стилю
 */

/* История курсов - фон как у футера */
.chart-section {
    background-color: var(--color-primary-dark); /* Цвет фона футера #163172 */
    color: white;
    margin-top: 0; /* Убираем белую пустоту между секциями */
    padding-top: 40px;
}

/* Убираем белую пустоту между секцией CBAR и графиком */
.cbar-live-section {
    margin-bottom: 0 !important;
}

.chart-container {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.chart-container h3,
.chart-container .section-title {
    color: white;
}

/* Делаем текст графика белым */
.chart-section canvas {
    color: white !important;
}

/* Делаем текст графика белым */
.chart-section .chart-wrapper {
    color: white;
}

/* Делаем текст графика белым (для Chart.js) */
.chart-section canvas text,
.chart-section .chartjs-render-monitor text {
    fill: white !important;
    color: white !important;
}

/* Вкладки "другие валюты" - светлый цвет логотипа */
.other-currencies-section {
    background-color: var(--color-primary-light); /* Светлый цвет логотипа #3a7bd5 */
    color: white;
    text-align: center; /* Центрируем заголовок и содержимое */
}

.other-currencies-section .section-title {
    color: white;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

/* Адаптивная сетка для других валют */
.other-currencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Адаптивная сетка */
    gap: var(--spacing-md);
    max-width: 1200px; /* Максимальная ширина */
    margin: 0 auto; /* Центрирование блока */
    padding: 0 var(--spacing-md); /* Отступы по бокам для мобильных устройств */
}

/* Первая вкладка (основные валюты) - светлый цвет логотипа */
.main-currencies-section {
    background-color: var(--color-primary-light); /* Светлый цвет логотипа #3a7bd5 */
    color: white;
}

.main-currencies-section .section-title {
    color: white;
}

/* Стили для карточек валют на светлом фоне */
.main-currencies-section .currency-card,
.other-currencies-section .currency-card {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Унификация цветов для текста на темном фоне */
.chart-section .period-btn {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.chart-section .period-btn:hover,
.chart-section .period-btn.active {
    background-color: white;
    color: var(--color-primary-dark);
}

/* Дополнительные стили для улучшения контраста */
.chart-section .chart-controls label {
    color: rgba(255, 255, 255, 0.9);
}

.chart-section select {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.chart-section select:focus {
    border-color: white;
}

/* Расширяем карту внизу страницы */
.map-container {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-xl);
}

@media (min-width: 992px) {
    .map-container {
        flex-direction: row;
    }
    
    .contact-info {
        flex: 0.8;
    }
    
    #map {
        flex: 3; /* Увеличиваем ширину карты с 2 до 3 */
        height: 450px; /* Увеличиваем высоту карты с 400px до 450px */
    }
}