/* Подключаем шрифт Inter для лучшего вида */
/* Вы можете заменить этот @import на свой кастомный шрифт */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Переменные для легкой кастомизации */
:root {
    --gp-primary-blue: #00BFFF; /* Голубой с лого (HEX: #00BFFF) */
    --gp-secondary-gray: #7A7A7A; /* Серый с лого (HEX: #7A7A7A) */
    --gp-light-gray: #e6e6e6; /* Цвет фона элементов */

    /* Шрифты (легко заменяемые) */
    --gp-font-family: 'Inter', sans-serif; /* Замените на ваш кастомный шрифт */
    --gp-spacing: 15px; /* Единый отступ для всех секций (15px) */
    --bar-base-height: 160px; /* Максимальная высота визуальной части столбца */
    --label-spacing: 10px; /* Отступ между подписями и столбиком */
    --total-label-height: 20px; /* Приблизительная высота одной строки подписи */
    --bar-width: 60px; /* Ширина одного столбца */
    --bar-gap: 10px; /* Отступ между столбцами */
}

/*body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
    background-color: #f8f8f8;
    font-family: var(--gp-font-family);
    overflow-x: hidden; 
}*/

/* Скрываем элемент по умолчанию, будет показан JavaScript-ом на мобильных устройствах */
.graph-animation-wrapper {
    display: none; /* Скрываем по умолчанию */
    border-radius: 12px; /* Скругленные углы контейнера */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Легкая тень */
    background-color: #ffffff;
    padding: var(--gp-spacing); /* Общий паддинг контейнера */
    box-sizing: border-box;
}

/* Медиа-запрос для активации на мобильных устройствах */
/* Здесь определите, что вы считаете "мобильным устройством". */
/* Например, до 768px ширины (часто используется как breakpoint для планшетов/мобильных). */
@media (max-width: 768px) {
    .graph-animation-wrapper {
        display: flex; /* Показываем только на мобильных */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 90%; /* Адаптивная ширина */
        max-width: 350px; /* Ограничение для крупных экранов */
        margin: 20px auto; /* Центрирование и отступы */
        font-family: var(--gp-font-family);
        text-align: center;
    }

    /* --- Заголовок графика --- */
    .graph-title {
        font-size: clamp(1.2em, 5vw, 1.5em); /* Адаптивный размер шрифта, увеличен */
        font-weight: bold;
        color: var(--gp-primary-blue); /* Цвет изменен на голубой */
        margin-bottom: var(--gp-spacing); /* Отступ снизу */
        text-align: center;
        width: 100%;
    }

    /* --- Контейнер для гистограммы (видимая область) --- */
    .bar-chart-container {
        width: 100%;
        /* Общая высота: высота метки площади + отступ + высота столбца + отступ + высота метки года */
        height: calc(var(--total-label-height) + var(--label-spacing) + var(--bar-base-height) + var(--label-spacing) + var(--total-label-height));
        overflow: hidden; /* Скрываем выходящие за пределы элементы */
        display: flex;
        justify-content: center;
        align-items: flex-end; /* Выравниваем bar-track по низу контейнера */
        margin-bottom: var(--gp-spacing); /* Отступ от гистограммы до управления */
        position: relative;
    }

    /* --- Дорожка для столбцов (больше не смещается, просто содержит 5 столбцов) --- */
    .bar-track {
        display: flex;
        align-items: flex-end; /* Выравниваем bar-column по низу дорожки */
        height: 100%; /* Занимает всю высоту bar-chart-container */
        justify-content: space-around; /* Распределяем 5 столбцов равномерно */
        width: 100%; /* Занимает всю ширину контейнера */
    }

    /* --- Отдельный столбец (контейнер для визуального столбца и меток) --- */
    .bar-column {
        display: flex;
        flex-direction: column; /* Располагаем элементы вертикально */
        justify-content: flex-end; /* Прижимаем содержимое к низу bar-column */
        align-items: center;
        width: var(--bar-width);
        margin: 0 calc(var(--bar-gap) / 2); /* Отступ между столбцами */
        height: 100%; /* Занимает всю высоту bar-track */
        transition: opacity 0.3s ease-out; /* Плавное появление/исчезание столбцов */
    }

    /* --- Метка площади (над столбцом) --- */
    .bar-column .area-label {
        font-size: clamp(0.7em, 2.5vw, 1em); /* Размер текста квадратуры */
        font-weight: bold;
        color: var(--gp-primary-blue);
        white-space: nowrap; /* Чтобы не переносилось */
        margin-bottom: var(--label-spacing); /* Отступ снизу от площади до столбика */
    }

    /* --- Визуальный столбец (голубая часть) --- */
    .bar-visual {
        width: 100%; /* Занимает всю ширину родительского .bar-column */
        background-color: var(--gp-primary-blue);
        border-radius: 5px 5px 0 0; /* Закругленные только верхние углы */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Легкая тень сверху */
        transition: height 0.8s ease-out; /* Анимация высоты */
        /* Высота будет установлена JavaScript-ом */
        margin-bottom: var(--label-spacing); /* Отступ снизу от столбика до года */
    }

    /* --- Метка года (под столбцом) --- */
    .bar-column .year-label {
        font-size: clamp(0.7em, 2.5vw, 1em); /* Размер текста года */
        font-weight: normal;
        color: var(--gp-secondary-gray);
        white-space: nowrap; /* Чтобы не переносилось */
    }

    /* --- Секция управления (Slider + Play/Pause Button) --- */
    .slider-controls-section {
        display: flex;
        justify-content: space-between; /* Распределяем элементы по краям */
        align-items: center;
        width: 100%;
    }

    .animation-slider {
        width: calc(100% - clamp(40px, 12vw, 50px) - 10px); /* Ширина ползунка: 100% - ширина кнопки - отступ */
        -webkit-appearance: none;
        appearance: none;
        height: 8px;
        background: var(--gp-light-gray);
        border-radius: 5px;
        outline: none;
        opacity: 0.7;
        transition: opacity .2s;
        margin-right: 10px; /* Отступ от кнопки */
        flex-grow: 1; /* Позволяет ползунку занимать доступное пространство */
    }

    .animation-slider:hover {
        opacity: 1;
    }

    .animation-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--gp-primary-blue);
        cursor: grab;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .animation-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--gp-primary-blue);
        cursor: grab;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .animation-slider::-webkit-slider-thumb:active,
    .animation-slider::-moz-range-thumb:active {
        cursor: grabbing;
        transform: scale(1.1);
    }

    /* Стили для кнопки Play/Pause */
    #gpPlayPauseBtn {
        background-color: transparent;
        color: var(--gp-primary-blue);
        border: 2px solid var(--gp-primary-blue);
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0, 191, 255, 0.2);
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
        flex-shrink: 0; /* Предотвращаем сжатие */

        /* Размер кнопки Play/Pause */
        width: clamp(40px, 12vw, 50px);
        height: clamp(40px, 12vw, 50px);
        font-size: clamp(1.2em, 4vw, 1.8em); /* Размер иконки */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0; /* Убираем паддинг, чтобы размер контролировался width/height */
    }

    #gpPlayPauseBtn:hover:not(:disabled) {
        background-color: rgba(0, 191, 255, 0.15);
        transform: scale(1.05);
    }

    #gpPlayPauseBtn:active:not(:disabled) {
        transform: scale(0.95);
    }

    #gpPlayPauseBtn:disabled {
        background-color: transparent;
        color: var(--gp-light-gray);
        border-color: var(--gp-light-gray);
        cursor: not-allowed;
        opacity: 0.5;
        box-shadow: none;
    }

    /* Адаптация для альбомной ориентации мобильных устройств */
    @media (orientation: landscape) and (max-width: 768px) {
        .graph-animation-wrapper {
            flex-direction: row;
            justify-content: space-around;
            max-width: 600px;
            padding: var(--gp-spacing);
        }

        .bar-chart-container {
            width: 50%;
            margin-bottom: 0;
            margin-right: var(--gp-spacing);
        }

        .slider-controls-section {
            flex-direction: column; /* Элементы управления сверху-вниз */
            width: auto;
            margin-left: var(--gp-spacing);
        }

        .animation-slider {
            width: 100%; /* Ползунок на всю ширину колонки */
            margin-right: 0;
            margin-bottom: 10px; /* Отступ от кнопки */
        }
    }
}