@import url(variables.css);

.calendar {
    width: 90%;
    margin: 0 auto;
}
.movies-container {
    width: 90%;
    margin: 0 auto;
}
/* Контейнер слайдера */
.date-slider-container {
    max-width: 100%;
    width: 500px;
    border-radius: 9px;
}

/* Основная обёртка слайдера */
.date-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    justify-content: space-between;
}

/* Кнопки навигации */
.slider-nav-btn {
    width: 31px;
    height: 63px;
    border-radius: 8px; 
    background: transparent;
    border: 2px solid #585858; 
    color: #585858;
    font-size: 23px;
}

.slider-nav-btn:disabled {
    border-color: #252525;
    color: #252525;
    cursor: not-allowed;
}

/* Область прокрутки с датами */
.slider-track {
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    position: relative;
}

/* Скрываем скроллбар для чистоты (опционально) */
.slider-track::-webkit-scrollbar {
    height: 5px; 
}

.slider-track::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px; 
}

.slider-track::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px; 
}

/* Контейнер с датами - flex контейнер */
.dates-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    min-width: min-content;
}

/* Блок месяца (вертикальный текст) */
.month-block {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 8px;
}

.month-text-vertical {
    font-size: 14px;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-weight: bold;
    padding: 8px 0;
    letter-spacing: 2px;
    cursor: default;
}

/* Ячейка даты */
.date-cell {
    display: flex;
    height: 63px;
    min-width: 27px;
    padding: 0px 8px;
    text-align: center;
    border-radius: 6px;
    font-size: 11px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.date-cell:hover:not(.disabled, .active) {
    transform: translateY(-2px);
}
.date-cell:hover:not(.disabled){
    cursor: pointer;
}

/* Заблокированная ячейка (прошлая дата) */
.date-cell.disabled {
    opacity: 0.5;
    background: #f50000;
}

.date-cell.disabled:hover {
    background: #ff0000;
}

/* Подсветка выбранной недели (при клике на день) */
.date-cell.highlight-week .day-name,
.date-cell.highlight-week .day-number {
    color: var(--index-color);
}

/* Активная ячейка (на которую кликнули) */
.date-cell.active {
    background: var(--elem-bg-color);
    color: white;
    transform: scale(1.04); 
}

.date-cell.active .day-name,
.date-cell.active .day-number {
    color: white;
}

.day-name {
    font-size: 9px;
    color: #6c757d;
    margin-bottom: 2px;
    font-weight: 500;
}

.day-number {
    font-size: 19px;
    font-weight: bold;
    color: #212529;
}

/* Информация о выбранной дате */
.selected-info {
    margin-top: 15px;
    padding: 12px;
    background: #e9ecef;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
}