/* Start:/local/components/project/booking.form_new_no_payment/templates/.default/style.css?17381226911863*/
.booking-form-component {
    /* Базовые стили компонента */
}

.vehicle-container {
    position: relative;
    width: 100%;
    max-width: 412px;
    margin: 0 auto;
}

.seat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.seat-group {
    cursor: pointer;
    transition: all 0.2s ease;
}

.seat-group.driver {
    cursor: default;
}

.seat-group:not(.driver):hover rect {
    fill: #16a34a;
}

.seat-group text {
    pointer-events: none;
    user-select: none;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

.book-button {
    transition: all 0.2s ease;
}

.book-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.price-color {
    color: #0d6efd;
    font-weight: 600;
}

.pricing-info ul {
    margin: 0;
    padding: 0;
}

.pricing-info li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.pricing-info li:last-child {
    margin-bottom: 0;
}

/* Стили для формы */
.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

#bookingForm {
    transition: all 0.3s ease;
}
/* End */


/* Start:/local/components/project/booking.form_new_no_payment/templates/.default/style_v1_updated.css?17476025534763*/
/* Основные стили компонента */
.booking-form-component {
  position: relative;
  margin-top: 30px; /* Уменьшенный отступ от верхнего фиксированного меню */
}

/* Улучшенный селектор рейсов */
.trip-select-wrapper {
  border-left: 4px solid #0d6efd;
}

.trip-select-wrapper select {
  font-size: 1.1rem;
  height: 3.2rem;
}

.trip-select-wrapper select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Контейнер схемы автомобиля */
.vehicle-container {
  position: relative;
  width: 100%;
  max-width: 412px;
  margin: 0 auto;
}

.vehicle-image {
  width: 100%;
  height: auto;
  display: block;
}

.seat-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Стили для информации о ценах */
.pricing-info {
  border-left: 4px solid #198754;
}

.pricing-info .price-color {
  font-weight: 600;
  color: #198754;
}

/* Стили для информации об адресах */
.address-info {
  border-left: 4px solid #0d6efd;
}

.address-text {
  font-size: 0.95rem;
  word-wrap: break-word;
  line-height: 1.4;
  color: #212529;
}

/* Форма бронирования */
.booking-form-container {
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid #dee2e6;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.booking-form-container.show {
  opacity: 1;
  transform: translateY(0);
}

.booking-details {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Улучшенные стили для полей ввода */
.form-control {
  border: 2px solid #dee2e6;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: #0d6efd;
  box-shadow: none;
}

/* Кнопки */
.book-button {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.book-button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#confirmBooking,
#cancelBooking {
  padding: 0.75rem 2rem;
  font-weight: 500;
}

/* Состояния загрузки */
#loadingIndicator .spinner-border {
  width: 2rem;
  height: 2rem;
}

/* Информация о бронировании */
.booking-info {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

.booking-details .text-muted {
  font-size: 0.875rem;
}

.booking-details .fw-bold {
  font-size: 1rem;
  margin-top: 0.25rem;
}

/* Анимации */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.booking-form-container.show {
  animation: slideDown 0.3s ease forwards;
}

/* Адаптивные стили */
@media (max-width: 991.98px) {
  .booking-form-container {
    padding: 1rem;
  }

  .booking-details {
    padding: 1rem;
  }

  .booking-form-component {
    margin-top: 80px; /* Меньший отступ для мобильных устройств */
  }
}

@media (min-width: 1200px) {
  .booking-form-component {
    margin-top: 40px; /* Уменьшенный отступ для широких экранов */
  }
}

/* Анимация пульсации для выделения селекта */
@keyframes pulse-select {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
  }
}

/* Класс для подсветки селекта */
.highlight-select {
  animation: pulse-select 2s infinite;
  border-color: #0d6efd !important;
  border-width: 2px !important;
}

/* Стили для обертки селекта */
.select-wrapper {
  position: relative;
}

/* Стиль для стрелки вниз */
.select-indicator {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #0d6efd;
  animation: bounce 1s infinite;
  pointer-events: none;
  z-index: 2;
  font-size: 1.2rem;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(-40%);
  }
}

/* Стиль для подсказки */
.select-hint {
  color: #0d6efd;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  text-align: center;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.select-hint i {
  animation: pulse-icon 1.5s infinite;
}

@keyframes pulse-icon {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Стиль для выделения плейсхолдера в селекте */
select option:first-child {
  font-weight: bold;
  color: #6c757d;
}

/* End */


/* Start:/local/components/project/booking.form_new_no_payment/templates/.default/mobile.css?17437736326565*/
/* Мобильные стили */
@media (max-width: 767px) {
    /* Отступ от фиксированного меню */
    .booking-form-component {
        margin-top: 70px !important; /* Отступ для мобильных устройств */
    }
    
    /* Увеличенный интерфейс выбора рейса */
    .trip-select-wrapper {
        padding: 1.5rem !important;
        margin-bottom: 2rem !important;
    }

    .trip-select-wrapper h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .trip-select-wrapper select {
        font-size: 1.2rem !important;
        height: 4rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* Увеличенный контейнер схемы автомобиля */
    .vehicle-layout-wrapper {
        padding: 1rem !important;
        margin: -1rem !important;
        /* Растягиваем на всю ширину мобильного экрана */
        width: calc(100% + 2rem) !important;
        border-radius: 0 !important;
    }

    .vehicle-container {
        max-width: none !important;
        width: 100% !important;
    }

    /* Улучшения для мест в мобильной версии */
    .seat-group:not(.driver) {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent; /* Убирает стандартное выделение при тапе */
    }
    
    /* Увеличенные места с лучшей интерактивностью */
    .seat-group rect {
        transform: scale(1.2);
        transform-origin: center;
        transition: fill 0.3s ease; /* Добавляем плавную анимацию при изменении цвета */
    }

    .seat-group text {
        font-size: 18px !important;
        transform: scale(1.2);
        transform-origin: center;
        pointer-events: none; /* Текст не должен блокировать события */
    }
    
    /* Активное состояние для тач-устройств */
    .seat-group:active rect {
        opacity: 0.8;
    }

    /* Информация о выбранных местах и стоимости */
    .pricing-info {
        padding: 1.5rem !important;
        margin: 1.5rem 0 !important;
    }

    .pricing-info h4 {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
    }

    .pricing-info li {
        font-size: 1.2rem !important;
        padding: 0.75rem 0 !important;
    }

    .price-color {
        font-size: 1.4rem !important;
    }

    /* Стили для блока с адресами на мобильных устройствах */
    .address-info {
        padding: 1.5rem !important;
        margin: 1.5rem 0 !important;
    }

    .address-info h4 {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
    }

    .address-text {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }

    .text-muted {
        font-size: 1rem !important;
    }

    .selected-seats-info {
        padding: 1.5rem !important;
    }

    .selected-seats-info h3 {
        font-size: 1.3rem !important;
    }

    #selectedSeats {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
    }

    #totalPrice {
        font-size: 1.6rem !important;
    }

    /* Кнопка бронирования */
    .book-button {
        font-size: 1.3rem !important;
        padding: 1rem !important;
        height: 4rem !important;
    }

    /* Форма бронирования */
    #bookingFormContainer {
        padding: 0 !important;
        margin: 1.5rem -1rem !important;
    }

    #bookingForm {
        padding: 1.5rem !important;
        border-radius: 0 !important;
    }

    .booking-info h3 {
        font-size: 1.4rem !important;
        margin-bottom: 1.5rem !important;
    }

    .booking-details {
        padding: 1.5rem !important;
    }

    .booking-details .text-muted {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .booking-details .fw-bold {
        font-size: 1.3rem !important;
    }

    /* Поля формы */
    .form-label {
        font-size: 1.2rem !important;
        margin-bottom: 0.75rem !important;
    }

    .form-control {
        font-size: 1.2rem !important;
        height: 3.5rem !important;
        padding: 1rem !important;
    }

    .invalid-feedback {
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
    }

    /* Кнопки формы */
    #confirmBooking,
    #cancelBooking {
        font-size: 1.2rem !important;
        padding: 1rem 2rem !important;
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }

    /* Отступы между элементами */
    .gap-4 {
        gap: 2rem !important;
    }

    .mb-4 {
        margin-bottom: 2rem !important;
    }

    /* Улучшенное отображение сетки на мобильных */
    .row {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }

    .col-lg-7,
    .col-lg-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Индикатор загрузки */
    #loadingIndicator .spinner-border {
        width: 3rem !important;
        height: 3rem !important;
        border-width: 0.35rem !important;
    }
}

/* Стили для планшетов */
@media (min-width: 768px) and (max-width: 991px) {
    /* Умеренно увеличенные элементы для планшетов */
    .trip-select-wrapper select {
        font-size: 1.1rem !important;
        height: 3.5rem !important;
    }

    .seat-group rect {
        transform: scale(1.1);
        transform-origin: center;
    }

    .seat-group text {
        font-size: 16px !important;
    }

    .book-button {
        font-size: 1.2rem !important;
        padding: 0.875rem !important;
    }

    .form-control {
        font-size: 1.1rem !important;
        height: 3.2rem !important;
    }
}

/* Стили для случаев когда устройство перевернуто горизонтально */
@media (max-width: 767px) and (orientation: landscape) {
    .vehicle-container {
        max-width: 70% !important;
        margin: 0 auto !important;
    }

    #bookingFormContainer .col-lg-8 {
        max-width: 90% !important;
        margin: 0 auto !important;
    }
}
/* End */
/* /local/components/project/booking.form_new_no_payment/templates/.default/style.css?17381226911863 */
/* /local/components/project/booking.form_new_no_payment/templates/.default/style_v1_updated.css?17476025534763 */
/* /local/components/project/booking.form_new_no_payment/templates/.default/mobile.css?17437736326565 */