/* Стили для модального окна с информацией об автомобиле */
.car-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.car-modal.active {
    display: flex;
    opacity: 1;
}

/* Стили для чекбоксов дополнительных опций */
.option-checkbox input[type="checkbox"]:checked + span {
    background: #59c571 !important;
    border-color: #59c571 !important;
}

.option-checkbox input[type="checkbox"]:checked + span::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: white;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
    display: block !important;
}

.option-checkbox span {
    transition: all 0.2s ease;
}

.option-checkbox span:hover {
    border-color: #59c571 !important;
    box-shadow: 0 0 0 2px rgba(89, 197, 112, 0.1) !important;
}

/* Основной контейнер модального окна */
.car-modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 1000px;
    height: 90%;
    max-height: 800px;
    margin: auto;
    display: grid; /* Меняем на grid layout */
    grid-template-rows: auto 1fr auto; /* Шапка, контент, футер */
    grid-template-areas: 
        "header"
        "body"
        "footer";
    overflow: hidden;
    position: relative;
}

/* Заголовок модального окна */
.car-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(89, 197, 112, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    z-index: 10;
    grid-area: header;
}

.car-modal-tabs {
    display: flex;
    gap: 20px;
}

.car-tab-btn {
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 8px 4px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.car-tab-btn.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

.car-tab-btn:hover {
    color: var(--primary-color);
}

.close-car-modal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary-ultra-light);
    color: var(--primary-color);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-car-modal:hover {
    background: var(--primary-color);
    color: white;
    transform: rotate(90deg);
}

/* Обновляем стили для контролов в шапке */
.modal-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.share-car-modal,
.close-car-modal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary-ultra-light);
    color: var(--primary-color);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.share-car-modal:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

.close-car-modal:hover {
    background: var(--primary-color);
    color: white;
    transform: rotate(90deg);
}

/* Тело модального окна */
.car-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    position: relative;
    grid-area: body;
    height: 100%; /* Важно для правильного скролла */
}

/* Вкладки контента */
.car-tab-content {
    display: none;
    height: auto;
    padding-bottom: 0; /* Убираем отступ снизу */
}

.car-tab-content.active {
    display: block;
}

/* Галерея фото автомобиля - десктопная версия */
.car-modal-gallery {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    background: #f8f9fa;
    height: 350px; /* Уменьшаем высоту для десктопной версии */
}

.main-image {
    flex: 0 0 auto; /* Изменяем с flex: 1 на flex: 0 0 auto, чтобы избежать растягивания */
    width: calc(100% - 150px); /* Фиксированная ширина вместо max-width */
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    order: 1;
    touch-action: pan-x; /* Разрешаем только горизонтальный свайп */
    user-select: none; /* Запрещаем выделение */
}

/* Индикатор полноэкранного режима */
.main-image::after {
    content: '\f065'; /* Иконка expand из Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.main-image:hover::after {
    opacity: 1;
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.85);
}

/* Скрываем индикатор на сенсорных устройствах и мобильных */
@media (hover: none), (max-width: 768px) {
    .main-image::after {
        display: none !important;
    }
    
    .main-image:hover::after {
        display: none !important;
    }
    
    .main-image img:hover {
        transform: none;
        filter: none;
    }
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Меняем с cover на contain, чтобы избежать растягивания */
    object-position: center;
    display: block;
    background-color: #f0f0f0; /* Добавляем фон для неполных изображений */
    pointer-events: auto; /* Включаем события указателя для открытия полноэкранной галереи */
    user-select: none; /* Запрещаем выделение */
    -webkit-user-drag: none; /* Запрещаем перетаскивание изображений */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.main-image img:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 10; /* Увеличиваем z-index, чтобы стрелки были поверх видео */
    pointer-events: none; /* Делаем весь контейнер "прозрачным" для кликов */
}

.gallery-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    transition: all 0.2s ease;
    z-index: 10; /* Увеличиваем z-index для кнопок */
    pointer-events: auto; /* Включаем события только для кнопок */
}

.gallery-nav button:hover {
    background: white;
    transform: scale(1.05);
}

.thumbnails {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px; /* Используем единый gap для одинакового расстояния и по горизонтали, и по вертикали */
    padding: 10px;
    width: 150px;
    height: 100%;
    background: #f8f9fa;
    overflow-y: auto;
    order: 2;
    align-content: start; /* Выравниваем содержимое по верхнему краю */
}

.thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* Квадратные превью */
    border: 2px solid transparent; /* Исправляем 'солид' на 'solid' */
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0; /* Убираем любые внутренние отступы */
    overflow: hidden; /* Обрезаем содержимое по границам контейнера */
    display: flex; /* Используем flex для центрирования изображения */
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Выравнивание по горизонтали */
    line-height: 0; /* Убираем любые лишние интервалы */
}

.thumbnail.active {
    border-color: var(--primary-color); /* Зеленая обводка через CSS-переменную */
    border-width: 3px; /* Делаем обводку немного толще для лучшей видимости */
    transform: scale(1.05); /* Легкое увеличение активного превью */
    box-sizing: border-box; /* Гарантируем, что border входит в размер элемента */
}

.thumbnail:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Чтобы гарантировать отсутствие пробелов под изображением */
    flex-shrink: 0; /* Предотвращаем сжатие изображения */
}

/* Детали автомобиля */
.car-modal-details {
    padding: 24px;
}

.car-modal-details h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.8rem;
    margin: 0 0 8px;
    color: var(--text-color);
}

.car-category {
    display: flex;
    align-items: center;
    gap: 10px; /* Увеличиваем отступ между иконкой и текстом */
    font-size: 1rem;
    font-weight: 500;
    color: #666;
    padding: 4px 20px; /* Увеличиваем внутренние отступы */
    background: var(--primary-ultra-light);
    border-radius: 30px;
}

.car-category img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.car-category i {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.car-modal-year {
    color: #666;
    margin-bottom: 24px;
}

.car-modal-specs,
.car-modal-features,
.car-modal-description,
.car-modal-extras {  /* Добавляем .car-modal-extras в этот список */
    margin-bottom: 32px;  /* Унифицируем отступ для всех блоков */
}

.car-modal-details h3 {
    font-size: 1.2rem;
    margin: 0 0 16px;
    color: var(--text-color);
}

.specs-grid,
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.spec-item,
.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.spec-item i,
.feature-item i {
    color: var(--primary-color);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.car-modal-description p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Форма бронирования */
.booking-form {
    padding: 24px;
}

.booking-form h2 {
    font-size: 1.8rem;
    margin: 0 0 24px;
    color: var(--text-color);
}

.form-section {
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}

.form-section:last-child {
    border-bottom: none; /* Убираем нижнюю границу для последней секции */
}

.form-section h3 {
    font-size: 1.2rem;
    margin: 0 0 16px;
    color: var(--text-color);
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.9rem;
    color: #666;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(89, 197, 112, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Футер модального окна */
.car-modal-footer {
    grid-area: footer;
    position: relative;
    height: 58px;
    padding: 12px 20px;
    background: white;
    z-index: 100;
    border-top: 1px solid rgba(89, 197, 112, 0.1);
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
    display: flex;
    align-items: center;
}

/* Новый стиль для блока с ценами в футере */
.total-price {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    padding: 10px 18px;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3);
    color: white;
    min-width: 180px;
    gap: 14px;
}

.total-price-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9);
}

.total-price-values {
    display: flex;
    align-items: center;
    gap: 12px;
}

.total-price-main {
    font-size: 20px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.total-price-alt {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
}

.price-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
}

.rental-duration-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    margin-left: 20px;
}

.rental-duration-info i {
    color: var(--primary-color);
    font-size: 16px;
}

.price-note {
    display: none; /* Скрываем старую заметку */
}

/* Адаптивная верстка */
@media (max-width: 992px) {
    .main-image {
        height: 300px;
    }

    .car-modal-gallery {
        flex-direction: column; /* Возвращаемся к вертикальному расположению на планшетах */
        height: auto;
    }
    
    .main-image {
        max-width: 100%;
        height: 350px;
    }
    
    .main-image img {
        object-fit: cover; /* Меняем с contain на cover для планшетов */
    }
    
    .thumbnails {
        width: 100%;
        display: flex; /* Возвращаем flex для мобильной версии */
        flex-direction: row;
        grid-template-columns: none; /* Сбрасываем grid-свойство */
        height: auto;
        padding: 10px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    .thumbnail {
        width: 80px;
        height: 60px;
        flex-shrink: 0;
    }

    /* Скрываем навигационные стрелки на мобильных устройствах и планшетах */
    .car-modal .gallery-nav {
        display: none;
    }
    
    /* Добавляем индикатор свайпа */
    .main-image::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background: rgba(0, 0, 0, .3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 10;
        backdrop-filter: blur(2px);
    }
    
    /* Индикаторы свайпа влево/вправо */
    .main-image.swipe-left::after {
        content: '\f053'; /* стрелка влево */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        opacity: 0.7;
    }
    
    .main-image.swipe-right::after {
        content: '\f054'; /* стрелка вправо */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        opacity: 0.7;
    }

    /* Делаем курсор указывающим на возможность свайпа */
    .main-image {
        cursor: grab;
    }
    
    .main-image:active {
        cursor: grabbing;
    }

    /* Удаляем дублирующееся объявление для оверлея видео, 
       так как теперь оно отображается и в десктопной версии */
    .video-overlay {
        /* Оставляем только уникальные для мобильной версии свойства */
        cursor: grab; /* На мобильных устройствах показываем курсор grab для свайпа */
    }
}

@media (max-width: 768px) {
    .car-modal-content {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .main-image {
        height: 250px;
        width: 100%; /* Явно указываем ширину 100% */
    }
    
    .main-image img {
        object-fit: cover; /* Растягиваем изображение на всю область */
        width: 100%;
        height: 100%;
    }
    
    .car-tab-btn {
        font-size: 1rem;
        padding: 8px 0;
    }
    
    .specs-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-row {
        flex-direction: column;
        gap: 16px;
    }

    .car-modal-footer {
        width: 100%; /* На всю ширину для мобильных */
        border-radius: 0; /* Без скругления на мобильных */
    }

    .car-modal-body {
        padding: 0;
        margin-bottom: 0; /* Убираем margin в мобильной версии */
    }

    .car-modal-gallery {
        height: auto;
    }
    
    .main-image {
        height: 250px;
    }
    
    .thumbnails {
        padding: 10px;
        gap: 8px;
    }
    
    .thumbnail {
        width: 70px;
        height: 50px;
    }

    .modal-controls {
        gap: 8px;
    }
    
    .share-car-modal,
    .close-car-modal {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .booking-actions {
        gap: 8px;
    }
    
    .back-to-info {
        padding: 12px 20px; /* Увеличиваем отступы до значений десктопной версии */
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px; /* Возвращаем отступ как в десктопной версии */
        font-size: 1rem; /* Возвращаем исходный размер шрифта */
    }
    
    .back-to-info span {
        display: inline; /* Показываем текст на мобильных устройствах */
    }

    .extra-item {
        flex-direction: row; /* Меняем обратно на row */
        flex-wrap: wrap; /* Добавляем перенос строк */
        gap: 12px;
        align-items: center; /* Центрируем элементы по вертикали */
    }

    .extra-checkbox {
        flex: 1; /* Растягиваем чекбокс на доступное пространство */
        min-width: 0; /* Позволяем сжиматься */
    }

    .extra-price {
        flex: 0 0 auto; /* Запрещаем цене растягиваться или сжиматься */
        order: 2; /* Располагаем цену после чекбокса */
    }

    .extra-controls {
        flex: 0 0 100%; /* Растягиваем на всю ширину */
        order: 3; /* Располагаем контролы под чекбоксом и ценой */
        margin-top: 8px; /* Добавляем отступ сверху */
        justify-content: flex-start; /* Выравниваем элементы управления по левому краю */
    }

    .total-price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .total-price-main {
        display: flex;
        align-items: baseline;
        gap: 4px;
    }

    .info-footer .total-price > span:first-child,
    .booking-footer .total-price > span:first-child {
        display: inline;
    }

    .total-price strong {
        display: inline;
        margin: 0;
    }

    .total-price .price-note {
        margin-top: 4px;
        background: var(--primary-ultra-light);
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .total-price .price-note::before {
        content: '\f133'; /* Код иконки календаря */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: var(--primary-color);
    }

    /* Добавляем индикатор длительности аренды для мобильной версии */
    .rental-duration-indicator {
        display: flex;
        position: fixed;
        bottom: 80px; /* Располагаем над футером */
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
        border: 1px solid rgba(89, 197, 112, 0.15);
        border-bottom: none;
        border-radius: 20px 20px 0 0;
        padding: 8px 20px;
        font-size: 0.9rem;
        color: var(--text-color);
        font-weight: 500;
        align-items: center;
        gap: 8px;
        box-shadow: 0 -4px 12px rgba(89, 197, 112, 0.1);
        z-index: 99;
        white-space: nowrap;
        min-width: 160px;
        justify-content: center;
    }

    .rental-duration-indicator i {
        color: var(--primary-color);
        font-size: 1rem;
    }

    /* Скрываем note о днях аренды в футере */
    .car-modal-footer .total-price .price-note {
        display: none;
    }

    .total-price {
        flex-direction: row; /* Возвращаем в строку */
        align-items: center;
        gap: 8px;
    }

    .total-price-main {
        margin: 0; /* Убираем margin у основного блока с ценой */
    }
}

/* Футеры для модального окна */
.info-footer,
.booking-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Правая часть футера с днями аренды и кнопкой */
.footer-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rental-duration-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    margin-left: 0; /* Убираем отступ слева */
}

.rental-duration-info i {
    color: var(--primary-color);
    font-size: 16px;
}

.price-note {
    display: none; /* Скрываем старую заметку */
}

/* Стили для блока дополнительных услуг */
.car-modal-extras {
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
}

.extras-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.extra-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: white;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    gap: 12px;
    min-height: 48px;
}

/* Основная структура: чекбокс слева, правая часть справа */
.extra-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Правая часть элемента - фиксированная ширина для выравнивания */
.extra-price, 
.extra-price-info, 
.period-select {
    flex-shrink: 0;
    min-width: 140px; /* Фиксированная минимальная ширина для выравнивания */
    text-align: left; /* Изменяем на left, чтобы текст начинался с левого края правой области */
}

.extra-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.extra-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.extra-checkbox input[type="checkbox"] {
    display: none;
}

.extra-checkbox .checkbox-content {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    flex: 0 0 22px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
    margin: 0;
    padding: 0;
}

.extra-checkbox .checkbox-content:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-ultra-light);
}

.extra-checkbox input[type="checkbox"]:checked + .checkbox-content {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.extra-checkbox .checkbox-content i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    opacity: 0;
    margin: 0;
    padding: 0;
    line-height: 1;
    width: auto;
    height: auto;
    display: block;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.extra-checkbox input[type="checkbox"]:checked + .checkbox-content i {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.extra-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.extra-label i {
    color: var(--primary-color);
}

.extra-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto; /* Отодвигаем элементы управления вправо */
    margin-right: 16px; /* Отступ от цены */
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.quantity-control input {
    width: 45px;
    height: 32px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
}

.quantity-btn {
    width: 32px; /* Делаем одинаковую ширину и высоту для круглой формы */
    height: 32px;
    border: none;
    border-radius: 50%; /* Делаем кнопки круглыми */
    background: var(--primary-ultra-light);
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex; /* Используем inline-flex для лучшего центрирования */
    align-items: center;
    justify-content: center;
    padding: 0; /* Убираем padding */
    line-height: 1; /* Устанавливаем line-height в 1 для точного центрирования */
}

.quantity-btn i {
    font-size: 12px; /* Уменьшаем размер иконок */
}

.quantity-btn:hover:not(:disabled) {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1); /* Меняем анимацию на scale вместо translateY */
}

.quantity-btn:active:not(:disabled) {
    transform: scale(1);
}

.quantity-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f0f0f0;
    color: #999;
}

.extra-price {
    font-weight: 600;
    color: var(--primary-color);
    min-width: 80px;
    text-align: right;
    flex: 0 0 auto; /* Цена не растягивается и не сжимается */
    white-space: nowrap; /* Предотвращаем перенос цены */
}

/* Исправляем стили для чекбоксов в дополнительных опциях */
.extra-item .extra-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.extra-item .checkbox-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background-color: transparent;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* КАСТОМНЫЕ ЧЕКБОКСЫ ДЛЯ ВСЕХ ВЕРСИЙ - ОБНОВЛЕННЫЕ */
/* Убираем все старые стили для .extra-item и оставляем только для новых .option */

/* Активное состояние чекбокса - УДАЛЕНО, заменено на новые стили выше */

/* Исправляем стили для кнопок управления количеством */
.quantity-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-ultra-light);
    color: var(--primary-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.quantity-btn:disabled {
    background: #f0f0f0;
    color: #ccc;
    cursor: not-allowed;
}

.quantity-control input {
    width: 40px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px;
    font-size: 14px;
}

/* Эффект при наведении */
.extra-item .checkbox-content:hover {
    border-color: var(--primary-color);
}

/* Добавляем общие стили для price-note */
.total-price .price-note {
    background: var(--primary-ultra-light);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.total-price .price-note::before {
    content: '\f133'; /* Код иконки календаря */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .car-modal-extras {
        padding: 16px;
    }

    .extra-item {
        flex-direction: row; /* Меняем обратно на row */
        flex-wrap: wrap; /* Добавляем перенос строк */
        gap: 12px;
        align-items: center; /* Центрируем элементы по вертикали */
    }

    .extra-checkbox {
        flex: 1; /* Растягиваем чекбокс на доступное пространство */
        min-width: 0; /* Позволяем сжиматься */
    }

    .extra-price {
        flex: 0 0 auto; /* Запрещаем цене растягиваться или сжиматься */
        order: 2; /* Располагаем цену после чекбокса */
    }

    .extra-controls {
        flex: 0 0 100%; /* Растягиваем на всю ширину */
        order: 3; /* Располагаем контролы под чекбоксом и ценой */
        margin-top: 8px; /* Добавляем отступ сверху */
        justify-content: flex-start; /* Выравниваем элементы управления по левому краю */
        margin: 8px 0 0 0; /* Отступ только сверху */
    }

    .extra-controls {
        width: 100%;
        justify-content: space-between;
    }

    .extra-checkbox .checkbox-content {
        width: 22px; /* Явно указываем те же размеры для мобильной версии */
        height: 22px;
        min-width: 22px;
        max-width: 22px;
    }
}

/* Стили для блока с мессенджерами */
.messenger-hints {
    margin-top: 16px;
}

.messenger-hints p {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 12px 0;
}

.messenger-checkboxes {
    display: flex;
    gap: 16px;
}

.messenger-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.messenger-checkbox input {
    display: none;
}

.messenger-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--primary-ultra-light);
    color: var(--primary-color);
    font-weight: 500;
    transition: all 0.2s ease;
}

.messenger-content i {
    font-size: 1.2rem;
}

/* Стили для Telegram */
.messenger-checkbox input[value="telegram"] + .messenger-content {
    color: #0088cc;
    background: rgba(0, 136, 204, 0.1);
}

.messenger-checkbox input[value="telegram"]:checked + .messenger-content {
    background: #0088cc;
    color: white;
}

/* Стили для WhatsApp */
.messenger-checkbox input[value="whatsapp"] + .messenger-content {
    color: #25D366;
    background: rgba(37, 211, 102, 0.1);
}

.messenger-checkbox input[value="whatsapp"]:checked + .messenger-content {
    background: #25D366;
    color: white;
}

/* Общие эффекты при наведении */
.messenger-checkbox:hover .messenger-content {
    transform: translateY(-2px);
}

.messenger-checkbox input:checked + .messenger-content {
    transform: scale(1.05);
}

/* Адаптивная верстка */
@media (max-width: 576px) {
    .messenger-checkboxes {
        flex-direction: column;
        gap: 8px;
    }
    
    .messenger-checkbox {
        width: 100%;
    }
    
    .messenger-content {
        width: 100%;
        justify-content: center;
    }
}

/* Добавляем стили для поля комментария */
.comment-field {
    margin-top: 16px;
}

.comment-field textarea {
    min-height: 80px;
    resize: vertical;
}

/* Стили для блока деталей аренды */
.rental-details {
    background: var(--primary-ultra-light);
    border-radius: 12px;
    padding: 24px;
}

.rental-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.timeline-point {
    flex: 1;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.point-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(89, 197, 112, 0.15);
    color: var(--primary-color);
    flex-shrink: 0;
}

.point-icon i {
    font-size: 1.2rem;
}

.point-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.point-label {
    font-size: 0.9rem;
    color: #666;
}

.point-date {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.point-location {
    color: var(--primary-color);
    font-weight: 500;
}

.timeline-duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    gap: 8px;
    min-width: 100px;
}

.duration-line {
    width: 100%;
    height: 2px;
    background: var(--primary-color);
    position: relative;
}

.duration-line::before,
.duration-line::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.duration-line::before {
    left: 0;
}

.duration-line::after {
    right: 0;
}

.duration-days {
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
    background: white;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rental-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

.rental-notice i {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-top: 2px;
}

/* Адаптивная верстка для блока деталей аренды */
@media (max-width: 768px) {
    .rental-timeline {
        flex-direction: column;
        gap: 24px;
    }

    .timeline-duration {
        flex-direction: row;
        padding: 0;
        width: 100%;
    }

    .duration-line {
        flex: 1;
    }

    .duration-days {
        margin-left: 12px;
        white-space: nowrap;
    }
}

/* Стили для блока стоимости и условий */
.invoice-block {
    background: white;
    border-radius: 12px;
    border: 1px solid #eee;
    overflow: hidden;
}

.invoice-section {
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
}

.invoice-section:last-child {
    border-bottom: none;
}

/* Основная стоимость */
.price-details {
    text-align: center;
    background: var(--primary-ultra-light);
    padding: 14px;
}

.flex-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.daily-rate {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.rate-period {
    font-size: 1.1rem;
    color: #666;
    font-weight: 500;
}

.price-caption {
    font-size: 0.85rem;
    color: #666;
    margin-top: 4px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.price-caption .price-equivalent {
    color: #888;
    font-size: 0.8rem;
    font-weight: 400;
}

.total-equivalent {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 4px;
    text-align: center;
}

/* Стили для блока со стоимостью за день */
.daily-rate-info {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.daily-price-badge {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(89, 197, 112, 0.2);
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.daily-price-badge:hover {
    border-color: rgba(89, 197, 112, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.daily-price-badge i {
    color: var(--primary-color);
    font-size: 0.85rem;
}

.daily-price-alt {
    color: #999;
    font-size: 0.75rem;
    margin-left: 4px;
    font-weight: 400;
}

/* Дополнительные платежи */
.additions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.addition-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #444;
    font-size: 0.95rem;
}

.addition-price {
    font-weight: 600;
    color: var(--primary-color);
}

/* Условия */
.conditions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.condition-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.condition-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.condition-title {
    font-size: 0.9rem;
    color: #666;
}

.condition-value {
    font-weight: 600;
    color: var(--text-color);
}

.condition-value.success {
    color: var(--primary-color);
}

.terms-link {
    background: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-color);
    transition: all 0.2s ease;
}

.terms-link i {
    transition: color 0.2s ease; /* Добавляем переход для цвета иконки */
}

.terms-link:hover {
    background: var(--primary-color);
    transform: translateX(2px);
}

.terms-link:hover i {
    color: white; /* Меняем цвет иконки на белый при наведении */
}

/* Итоговая стоимость */
.total {
    background: #f8f9fa;
}

/* Стили для блока межгородского перегона */
.intercity-transfer {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid rgba(89, 197, 112, 0.15);
    border-radius: 12px;
    overflow: hidden;
    margin: 12px 0;
}

/* Стили для блока дополнительных опций */
.additional-options {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid rgba(52, 152, 219, 0.15);
    border-radius: 12px;
    overflow: hidden;
    margin: 12px 0;
}

.options-header {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 12px 16px;
    text-align: center;
    border-radius: 12px 12px 0 0;
}

.options-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.options-title i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.options-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
    font-weight: 400;
}

.options-total-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.options-details {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-item-detailed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid rgba(52, 152, 219, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.option-item-detailed:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.25);
}

.option-info {
    flex: 1;
}

.option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

.option-icon {
    color: #3498db;
    font-size: 0.95rem;
    width: 16px;
    text-align: center;
}

.option-name {
    flex: 1;
}

.option-calculation {
    display: flex;
    align-items: center;
}

.option-formula {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

.option-formula i {
    color: #3498db;
    font-size: 0.7rem;
}

.option-total {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3498db;
    text-align: right;
    padding-left: 12px;
    border-left: 2px solid rgba(52, 152, 219, 0.2);
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.option-total .price-equivalent {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

.route-price .price-equivalent {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
    display: block;
    margin-top: 2px;
}

.intercity-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #45a049 100%);
    color: white;
    padding: 12px 16px;
    text-align: center;
    border-radius: 12px 12px 0 0;
}

.intercity-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.intercity-title i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.intercity-route {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
    font-weight: 400;
}

.intercity-total-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.price-equivalent {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.intercity-details {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.intercity-route-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid rgba(89, 197, 112, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.intercity-route-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(89, 197, 112, 0.15);
    border-color: rgba(89, 197, 112, 0.25);
}

.route-info {
    flex: 1;
}

.route-path {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

.start-marker {
    color: var(--primary-color);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.end-marker {
    color: #ff6b6b;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.route-text {
    flex: 0 0 auto;
}

.route-details {
    display: flex;
    align-items: center;
    gap: 12px;
}

.travel-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

.travel-time i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.route-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: right;
    padding-left: 12px;
    border-left: 2px solid rgba(89, 197, 112, 0.2);
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* Адаптивная верстка для межгородского перегона */
@media (max-width: 768px) {
    .intercity-header {
        padding: 12px 16px;
    }

    .intercity-title {
        font-size: 1rem;
        gap: 8px;
    }

    .intercity-route {
        word-break: break-word;
        hyphens: auto;
        text-align: left;
        line-height: 1.3;
    }

    .intercity-total-price {
        font-size: 1.5rem;
        gap: 8px;
    }

    .price-equivalent {
        font-size: 0.9rem;
    }

    .intercity-details {
        padding: 16px;
        gap: 12px;
    }

    .intercity-route-item {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 12px;
    }

    .route-path {
        justify-content: flex-start;
        text-align: left;
        font-size: 0.95rem;
        flex-wrap: wrap;
        gap: 4px;
    }

    .route-text {
        word-break: break-word;
        hyphens: auto;
        flex: 1;
        min-width: 0; /* Позволить тексту сжиматься */
    }

    .start-marker, .end-marker {
        flex-shrink: 0;
    }

    .route-details {
        justify-content: flex-start;
        margin-left: 20px; /* Выравниваем под текстом маршрута */
    }

    .route-price {
        text-align: center;
        border-left: none;
        border-top: 2px solid rgba(89, 197, 112, 0.2);
        padding-left: 0;
        padding-top: 12px;
        min-width: auto;
        font-size: 1.3rem;
    }

    /* Адаптивные стили для блока стоимости за день */
    .daily-price-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
        gap: 6px;
    }

    .daily-price-badge i {
        font-size: 0.8rem;
    }

    .daily-price-alt {
        font-size: 0.75rem;
        margin-left: 4px;
    }

    /* Адаптивные стили для дополнительных опций */
    .options-header {
        padding: 12px 16px;
    }

    .options-title {
        font-size: 1rem;
        gap: 8px;
    }

    .options-total-price {
        font-size: 1.5rem;
        gap: 8px;
    }

    .options-details {
        padding: 16px;
        gap: 12px;
    }

    .option-item-detailed {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 8px;
    }

    .option-header {
        justify-content: flex-start;
        text-align: left;
        font-size: 0.95rem;
        gap: 8px;
    }

    .option-icon {
        flex-shrink: 0;
    }

    .option-name {
        flex: 1;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.3;
    }

    .option-calculation {
        justify-content: flex-start;
        margin-left: 24px; /* Выравниваем под текстом, учитывая иконку */
    }

    .option-total {
        text-align: center;
        border-left: none;
        border-top: 2px solid rgba(52, 152, 219, 0.2);
        padding-left: 0;
        padding-top: 12px;
        min-width: auto;
        font-size: 1.3rem;
    }
}

/* Итоговая стоимость */

.total-details {
    text-align: center;
}

.total-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.total-amount .amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
}

.total-amount .period {
    font-size: 1rem;
    color: #666;
}

.amount-breakdown {
    font-size: 0.9rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.amount-breakdown .separator {
    color: var(--primary-color);
    font-weight: 600;
}

.amount-breakdown .base,
.amount-breakdown .extras,
.amount-breakdown .intercity {
    white-space: nowrap;
}

.amount-breakdown .intercity {
    color: #2980b9;
    font-weight: 600;
}

/* Адаптивная верстка */
@media (max-width: 768px) {
    .conditions-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Старые общие стили для ценников - заменены новыми */

.price-note {
    font-size: 0.85rem;
    color: #666;
}

/* Стили для кнопок */
.continue-btn,
.submit-booking-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    height: 36px;
    padding: 0px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.continue-btn:hover,
.submit-booking-btn:hover {
    background: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3);
}

/* Стили для десктопной версии */
.desktop-only {
    display: flex;
}

.mobile-rental-info {
    display: none;
}

.continue-text {
    display: inline;
}

/* Стили для booking-actions */
.booking-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-to-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: #f0f0f0;
    color: #666;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-to-info:hover {
    background: #e5e5e5;
    transform: translateY(-2px);
}

.back-to-info i {
    font-size: 0.9em;
}

/* Старые стили мобильной версии футера - заменены новыми */

/* Добавляем индикатор длительности аренды (по умолчанию скрыт для десктопа) */
.rental-duration-indicator {
    display: none; /* По умолчанию скрыт */
    position: fixed;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(89, 197, 112, 0.15);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 5px 20px; /* Уменьшаем вертикальный padding с 8px до 5px */
    font-size: 0.85rem; /* Уменьшаем размер шрифта с 0.9rem до 0.85rem */
    color: var(--text-color);
    font-weight: 500;
    align-items: center;
    gap: 6px; /* Уменьшаем отступ между иконкой и текстом */
    box-shadow: 0 -3px 10px rgba(89, 197, 112, 0.08); /* Делаем более лёгкую тень */
    z-index: 99;
    white-space: nowrap;
    min-width: 140px; /* Немного уменьшаем минимальную ширину */
    justify-content: center;
}

.rental-duration-indicator i {
    color: var(--primary-color);
    font-size: 0.9rem; /* Уменьшаем размер иконки с 1rem до 0.9rem */
}

/* Планшетная версия */
@media (max-width: 992px) and (min-width: 769px) {
    .footer-right {
        gap: 12px;
    }

    .rental-duration-info {
        font-size: 13px;
    }

    .continue-btn,
    .submit-booking-btn {
        padding: 0 20px;
        height: 42px;
    }
}

/* Скрываем индикатор на мобильных устройствах, так как информация теперь в кнопке */
@media (max-width: 768px) {
    .rental-duration-indicator {
        display: none;
    }

    /* Адаптивные стили для нового дизайна футера */
    .car-modal-footer {
        height: auto;
        padding: 12px 16px;
    }

    .info-footer,
    .booking-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .footer-right {
        width: 100%;
        flex-direction: column;
        gap: 0;
    }

    .total-price {
        min-width: auto;
        padding: 10px 16px;
        justify-content: space-between;
    }

    .total-price-label {
        font-size: 12px;
    }

    .total-price-main {
        font-size: 18px;
    }

    .total-price-alt {
        font-size: 14px;
    }

    /* Скрываем десктопную версию информации о днях */
    .desktop-only {
        display: none;
    }

    /* Показываем мобильную версию */
    .mobile-rental-info {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.2);
        padding: 0 12px;
        border-radius: 8px 0 0 8px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.95);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-rental-info i {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9);
    }

    .continue-text {
        margin-left: 110px; /* Отступ от левой части */
    }

    .continue-btn,
    .submit-booking-btn {
        width: 100%;
        height: 44px;
        font-size: 16px;
        justify-content: center;
        position: relative;
        padding-left: 0;
        padding-right: 24px;
    }

    .booking-actions {
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

    .back-to-info {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .submit-booking-btn {
        flex: 1;
    }
}

/* Стили для новых элементов дополнительных опций */
.extra-price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Изменяем на flex-start */
    gap: 4px;
}

.price-note {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
    text-align: left; /* Изменяем на left */
}

.extra-price.free {
    color: var(--primary-color);
    font-weight: 600;
}

/* Стили для селекта периода */
.period-select {
    width: 140px; /* Фиксированная ширина для выравнивания */
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s ease;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="m0 1 2 2 2-2z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.period-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.period-select option {
    padding: 8px;
}

/* Стили для элементов без контролов - простое выравнивание */
.extra-item:not(:has(.extra-controls)):not(:has(.first-row)) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.extra-item:not(:has(.extra-controls)):not(:has(.first-row)) .extra-checkbox {
    flex: 1;
    margin-right: 12px;
}

.extra-item:not(:has(.extra-controls)):not(:has(.first-row)) .extra-price,
.extra-item:not(:has(.extra-controls)):not(:has(.first-row)) .extra-price-info {
    flex-shrink: 0;
    min-width: 140px;
    text-align: left; /* Изменяем на left */
}

/* Для элементов с контролами */
.extra-item:has(.extra-controls),
.extra-item:has(.first-row) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* Первый ряд для элементов с контролами - чекбокс и цена */
.extra-item .first-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.extra-item .first-row .extra-checkbox {
    flex: 1;
    margin-right: 12px;
}

.extra-item .first-row .extra-price-info {
    flex-shrink: 0;
    min-width: 140px;
    text-align: left; /* Изменяем на left */
}

.extra-item .extra-controls {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 0;
}

/* Для элементов только с селектом периода */
.extra-item:has(.period-select):not(:has(.first-row)):not(:has(.extra-controls)) .period-select {
    min-width: 140px;
    text-align: left; /* Селект выравниваем по левому краю внутри своей области */
}



/* Мобильные стили для новых элементов */
@media (max-width: 768px) {
    .extra-price-info {
        align-items: flex-start; /* Изменяем на flex-start для мобильной версии тоже */
        text-align: left; /* Изменяем на left */
    }

    .period-select {
        width: 100%;
        max-width: 100%;
    }

    /* Для мобильной версии убираем фиксированную ширину правой части */
    .extra-price, 
    .extra-price-info, 
    .period-select {
        min-width: auto;
    }

    .extra-item .first-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .extra-item .first-row .extra-checkbox {
        margin-right: 0;
    }

    .extra-item .first-row .extra-price-info {
        align-self: flex-start; /* Изменяем на flex-start */
        min-width: auto;
    }

    .extra-item .extra-controls {
        margin-top: 8px;
        width: 100%;
    }

    .extra-checkbox {
        align-items: flex-start;
    }

    .extra-checkbox .extra-label {
        line-height: 1.4;
    }
}

/* Стили для блока страховок */
.car-modal-insurance {
    background: #f8fffe;
    border: 1px solid #e6f7f5;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.insurance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.car-modal-insurance h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.car-modal-insurance h4::before {
    content: '\f3ed';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.mobile-scroll-hint {
    display: none;
    font-size: 0.8rem;
    color: #7f8c8d;
    font-weight: 500;
}

/* Сетка карточек страхования */
.insurance-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Стили карточек страхования */
.insurance-card {
    position: relative;
    cursor: pointer;
}

.insurance-card input[type="radio"] {
    display: none;
}

.insurance-card label {
    display: block;
    background: white;
    border: 2px solid #e1e8ed;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    position: relative;
}

.insurance-card:hover label {
    border-color: var(--primary-color);
    box-shadow: none;
}

.insurance-card input[type="radio"]:checked + label {
    border-color: var(--primary-color);
    background: #f8fffc;
    box-shadow: none;
}

/* Заголовок карточки */
.card-header {
    position: relative;
    margin-bottom: 20px;
}

.card-price {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
}

.card-type {
    font-size: 0.9rem;
    font-weight: 600;
    color: #7f8c8d;
    letter-spacing: 0.5px;
}

/* Галочка в правом верхнем углу */
.card-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    z-index: 10;
}

.card-check i {
    color: white;
    font-size: 12px;
}

.insurance-card input[type="radio"]:checked + label .card-check {
    opacity: 1;
    transform: scale(1);
}

/* Список функций */
.card-features {
    margin-bottom: 20px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.feature:last-child {
    margin-bottom: 0;
}

.feature i {
    width: 16px;
    flex-shrink: 0;
}

.text-success {
    color: var(--primary-color);
}

.text-muted {
    color: #95a5a6;
}

/* Кнопка выбора */
.select-btn {
    width: 100%;
    padding: 12px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    background: white;
    color: #7f8c8d;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.select-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.insurance-card input[type="radio"]:checked + label .select-btn {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Мобильные стили */
@media (max-width: 768px) {
    .insurance-cards {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .insurance-card {
        flex: 0 0 280px; /* Фиксированная ширина карточки */
        scroll-snap-align: start;
    }
    
    /* Показываем часть следующей карточки */
    .insurance-cards::after {
        content: '';
        flex: 0 0 20px; /* Добавляем немного пространства в конце */
    }
    
    .car-modal-insurance {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .mobile-scroll-hint {
        display: block;
    }
    
    .insurance-card label {
        padding: 16px;
        min-height: 220px; /* Фиксированная высота для единообразия */
    }
    
    .card-price {
        font-size: 1.5rem;
    }
    
    .card-features {
        margin-bottom: 16px;
    }
    
    /* Стилизация скроллбара */
    .insurance-cards::-webkit-scrollbar {
        height: 4px;
    }
    
    .insurance-cards::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }
    
    .insurance-cards::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 2px;
    }
    
    .insurance-cards::-webkit-scrollbar-thumb:hover {
        background: #4aa366;
    }
}

/* Стили для раскрывающегося блока дополнительных услуг */
.car-modal-extras {
    background: white;
    border: 1px solid #e6eaee;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin: 0 -20px; /* Выходим за границы родительского блока */
}

.extras-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    border-radius: 12px 12px 0 0; /* Закругленные углы только сверху */
}

.extras-header:hover {
    background: linear-gradient(135deg, #2980b9, #1f6391);
}

.extras-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.extras-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.extras-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.extras-toggle {
    transition: transform 0.3s ease;
}

.extras-toggle i {
    font-size: 1.2rem;
}

.car-modal-extras.open .extras-toggle {
    transform: rotate(180deg);
}

/* Когда блок закрыт, заголовок имеет закругленные углы со всех сторон */
.car-modal-extras:not(.open) .extras-header {
    border-radius: 12px;
}

.extras-content {
    padding: 20px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 0 0 12px 12px; /* Закругленные углы только снизу */
}

.extras-content.animating {
    overflow: hidden;
}

/* Мобильные стили для новых блоков */
@media (max-width: 768px) {
    .car-modal-insurance {
        padding: 16px;
        margin-bottom: 16px;
    }

    .mobile-scroll-hint {
        display: block;
    }
    
    .insurance-card label {
        padding: 16px;
        min-height: 220px; /* Фиксированная высота для единообразия */
    }
    
    .card-price {
        font-size: 1.5rem;
    }
    
    .card-features {
        margin-bottom: 16px;
    }
    
    /* Стилизация скроллбара */
    .insurance-cards::-webkit-scrollbar {
        height: 4px;
    }
    
    .insurance-cards::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }
    
    .insurance-cards::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 2px;
    }
    
    .insurance-cards::-webkit-scrollbar-thumb:hover {
        background: #4aa366;
    }

    /* Мобильные стили для блока дополнительных опций */
    .car-modal-extras {
        margin: 0 -16px; /* Выходим за границы на мобильном */
        border-radius: 12px; /* Возвращаем скругления */
        border-left: 1px solid #e6eaee;
        border-right: 1px solid #e6eaee;
    }

    .extras-header {
        padding: 12px 16px;
        border-radius: 12px 12px 0 0; /* Возвращаем скругления заголовка */
    }

    .car-modal-extras:not(.open) .extras-header {
        border-radius: 12px; /* Возвращаем скругления для закрытого состояния */
    }

    .extras-content {
        padding: 16px;
        border-radius: 0 0 12px 12px; /* Возвращаем скругления содержимого */
    }

    .extras-header h4 {
        font-size: 1rem;
    }

    .extras-count {
        font-size: 0.8rem;
    }

/* НОВЫЕ ЧИСТЫЕ СТИЛИ ДЛЯ ДОПОЛНИТЕЛЬНЫХ ОПЦИЙ - ОБНОВЛЕНО */

/* Основной блок */
.extras-block {
    margin: 20px 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: white !important;
}

/* Блок в открытом состоянии */
.extras-block.expanded {
    border-radius: 12px !important;
}

/* Заголовок в закрытом состоянии */
.extras-block:not(.expanded) .extras-header {
    border-radius: 12px !important;
}

/* Заголовок в открытом состоянии */
.extras-block.expanded .extras-header {
    border-radius: 12px 12px 0 0 !important;
}

/* Заголовок блока */
.extras-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px; /* По умолчанию все углы закруглены */
}

.extras-header:hover {
    background: linear-gradient(135deg, #2980b9, #1e6b96);
}

/* Стили заголовка для десктопа и мобильного */
.extras-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-grow: 1;
    flex-direction: row; /* По умолчанию в одну строку */
}

.extras-title h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.extras-count {
    font-size: 12px;
    opacity: 0.9;
    white-space: nowrap;
}

/* Десктопная версия - заголовок в одну строку */
@media (min-width: 769px) {
    .extras-title {
        flex-direction: row;
        text-align: left;
        justify-content: center;
    }
    
    .extras-title h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }
    
    .extras-count {
        font-size: 12px;
        opacity: 0.9;
        margin-left: 4px;
    }
    
    .extras-arrow {
        position: relative;
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* Мобильная версия - заголовок в две строки */
@media (max-width: 768px) {
    .extras-title {
        flex-direction: column;
        text-align: center;
    }
    
    .extras-title h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }
    
    .extras-count {
        font-size: 12px;
        opacity: 0.9;
        margin-top: 2px;
    }
    
    .extras-arrow {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Когда блок закрыт - закругляем все углы заголовка */
.extras-block:not(.expanded) .extras-header,
.extras-header:not(.open) {
    border-radius: 12px !important;
}

/* Когда блок открыт - только верхние углы заголовка закруглены */
.extras-block.expanded .extras-header,
.extras-header.open {
    border-radius: 12px 12px 0 0 !important;
}

/* Дополнительная специфичность для десктопной версии */
@media (min-width: 769px) {
    .extras-block:not(.expanded) .extras-header,
    .extras-header:not(.open) {
        border-radius: 12px !important;
    }
    
    .extras-block.expanded .extras-header,
    .extras-header.open {
        border-radius: 12px 12px 0 0 !important;
    }
}

.extras-arrow i {
    transition: transform 0.3s ease;
}

.extras-header.open .extras-arrow i {
    transform: rotate(180deg);
}

/* Контент блока */
.extras-content {
    padding: 0;
}

/* Каждая опция */
.option {
    padding: 16px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: white !important;
}

.option:last-child {
    border-bottom: none !important;
}

/* Основная строка каждой опции - С ПРИОРИТЕТОМ */
.option-main {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

/* Чекбокс - блок 1 (фиксированная ширина, слева) */
.option-checkbox {
    flex-shrink: 0 !important;
    width: 20px !important;
    position: relative !important;
}

.option-checkbox input[type="checkbox"] {
    display: none !important;
}

.option-checkbox label {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #ddd !important;
    border-radius: 4px !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.option-checkbox input[type="checkbox"]:checked + label {
    background: #59c571 !important;
    border-color: #59c571 !important;
}

.option-checkbox input[type="checkbox"]:checked + label::after {
    content: '\f00c' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
}

/* Название опции - блок 2 (растягивается) */
.option-name {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-width: 0 !important; /* Важно для flex */
}

.option-name i {
    color: #666 !important;
    width: 16px !important;
    flex-shrink: 0 !important;
}

/* Цена - блок 3 (фиксированная ширина, справа) */
.option-price {
    flex-shrink: 0 !important;
    font-weight: 600 !important;
    color: #59c571 !important;
    text-align: left !important; /* Desktop - по левому краю */
    width: 120px !important;
    margin-left: auto !important; /* Прижимает к правому краю */
}

.option-price .gel {
    font-size: 12px;
    color: #999;
    font-weight: normal;
}

/* Примечания - блок 4 */
.option-note {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin: 4px 0 8px 36px; /* Под названием */
}

/* Контролы - блок 5 */
.option-controls {
    margin: 8px 0 0 auto;
    width: fit-content;
}

.period-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    min-width: 200px; /* Увеличили ширину */
    appearance: menulist; /* Показывает стрелку */
    cursor: pointer;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Стили кнопок +/- с максимальной специфичностью */
.car-modal .extras-content .option .option-controls .quantity-control .qty-btn,
.car-modal .quantity-control .qty-btn,
.option-controls .quantity-control .qty-btn,
.quantity-control .qty-btn,
.option-controls .qty-btn {
    width: 28px !important;
    height: 28px !important;
    border: 1px solid #ddd !important;
    background: white !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #59c571 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.car-modal .extras-content .option .option-controls .quantity-control .qty-btn:hover,
.car-modal .quantity-control .qty-btn:hover,
.option-controls .quantity-control .qty-btn:hover,
.quantity-control .qty-btn:hover,
.option-controls .qty-btn:hover {
    background: #f8f9fa !important;
    border-color: #59c571 !important;
}

.car-modal .extras-content .option .option-controls .quantity-control .qty-btn:disabled,
.car-modal .quantity-control .qty-btn:disabled,
.option-controls .quantity-control .qty-btn:disabled,
.quantity-control .qty-btn:disabled,
.option-controls .qty-btn:disabled {
    background: #f0f0f0 !important;
    color: #ccc !important;
    cursor: not-allowed !important;
}

.quantity-control input {
    width: 50px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px;
    font-size: 14px;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .extras-block {
        margin: 16px 0;
        border-radius: 12px;
    }
    
    .extras-header {
        padding: 14px 16px;
    }
    
    .option {
        padding: 14px 16px;
    }
    
    .option-main {
        gap: 12px;
    }
    
    .option-price {
        text-align: right; /* Mobile - по правому краю */
        min-width: 80px;
    }
    
    .option-note {
        margin-left: 32px;
    }
    
    .period-select {
        min-width: 150px;
        font-size: 12px;
    }
    
    .quantity-control .qty-btn,
    .option-controls .qty-btn {
        width: 28px !important;
        height: 28px !important;
        border: 1px solid #ddd !important;
        background: white !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        font-size: 14px !important;
        font-weight: bold !important;
        color: #59c571 !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    
    .quantity-control .qty-btn:hover,
    .option-controls .qty-btn:hover {
        background: #f8f9fa !important;
        border-color: #59c571 !important;
    }
    
    .quantity-control .qty-btn:disabled,
    .option-controls .qty-btn:disabled {
        background: #f0f0f0 !important;
        color: #ccc !important;
        cursor: not-allowed !important;
    }
}

/* Десктопная версия */
@media (min-width: 769px) {
    .quantity-control .qty-btn,
    .option-controls .qty-btn {
        width: 28px !important;
        height: 28px !important;
        border: 1px solid #ddd !important;
        background: white !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        font-size: 14px !important;
        font-weight: bold !important;
        color: #59c571 !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    
    .quantity-control .qty-btn:hover,
    .option-controls .qty-btn:hover {
        background: #f8f9fa !important;
        border-color: #59c571 !important;
    }
    
    .quantity-control .qty-btn:disabled,
    .option-controls .qty-btn:disabled {
        background: #f0f0f0 !important;
        color: #ccc !important;
        cursor: not-allowed !important;
    }
}

/* Исправление border-radius для заголовка - ФИНАЛЬНАЯ ВЕРСИЯ */
.extras-header {
    border-radius: 12px !important; /* По умолчанию все углы закруглены */
}

.extras-block.expanded .extras-header,
.extras-header.open {
    border-radius: 12px 12px 0 0 !important; /* Когда открыт - только верхние углы */
}
}