/* =================== Стили для RainViewer =================== */

/* Стиль для контейнера ползунка */
#timeSliderContainer {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 10px 15px;
    position: absolute;
    bottom: 60px; 
    left: 50%; 
    transform: translateX(-50%);
    background: rgba(255,255,255,0.8);
    padding: 15px 20px;
    border-radius: 4px; 
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 5px;
    width: 400px; /* Увеличили ширину для размещения меток */
    box-sizing: border-box; /* Включаем паддинги в ширину */
    justify-content: space-between; /* Равномерное распределение */
}

/* Обёртка для ползунка и метки времени */
.slider-wrapper {
    position: relative; /* Для абсолютного позиционирования метки */
    width: 300px; /* Совпадает с шириной ползунка */
}

/* Стиль для метки времени */
#timeLabel {
    position: absolute;
    top: -15px; /* Расстояние над ползунком */
    left: 50%;
    transform: translateX(-50%);
    color: #000000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    transition: left 0.1s ease-out; /* Плавное перемещение */
}

/* Стиль для ползунка */
#timeSlider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #00BFFF; /* Голубой цвет фона ползунка */
    outline: none;
    border-radius: 3px;
    background-image: linear-gradient(to right, #00BFFF 0%, #00BFFF 100%);
    position: relative;
}

#timeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #00BFFF; /* Голубой цвет кнопки */
    border: 2px solid #ebefff; /* Светло-голубая граница */
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
}

#timeSlider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #00BFFF; /* Голубой цвет кнопки */
    border: 2px solid #ebefff; /* Светло-голубая граница */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
}

/* Стиль для контейнера нижних меток */
.labels-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Стиль для меток */
#leftLabel, #rightLabel {
    font-size: 12px;
    color: #000;
    white-space: nowrap; /* Предотвращает перенос текста */
    position: absolute;
    bottom: 0px; /* Расстояние под временной шкалой */
}

#leftLabel {
    left: 100px; /* Расположение слева */
    transform: translateX(0);
}

#rightLabel {
    right: 50px; /* Расположение справа */
    transform: translateX(0);
}

/* Стиль для кнопки Play/Pause */
#playPauseButton {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #00BFFF;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.2s;
}

#playPauseButton:hover {
    transform: scale(1.2);
}

#playPauseButton:focus {
    outline: none;
}

/* Стиль для метки "now" */
#nowLabel {
    position: absolute;
    top: 25px; /* Расстояние под ползунком */
    left: 60%; /* Фиксированное положение по горизонтали */
    transform: translateX(-50%);
    font-size: 12px;
    color: #000;
    white-space: nowrap;
    pointer-events: none; /* Чтобы не мешать взаимодействию с ползунком */
    transition: none; /* Отключаем плавное перемещение */
}

/* Сечи (Ticks) */
.tick {
    display: none;
}

#tickLeft {
    left: 125px; /* Соответствует leftLabel */
    transform: translateX(0);
}

#tickNow {
    left: calc(75px + 300px * 60%); /* Соответствует позиции nowLabel */
    transform: translateX(-50%);
}

#tickRight {
    right: 5px;
    transform: translateX(50%);
}

/* Медиа-запрос для мобильных устройств - стили для timeSliderContainer */
@media (max-width: 768px) {
    #timeSliderContainer {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        padding: 10px 15px !important;
    }
    
    /* Основные настройки без изменения текущей структуры */
    .slider-wrapper {
        width: calc(100% - 90px) !important; /* Оставляем место для кнопок и меток */
    }
}