/* Основные стили формы */
#art-show-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

/* Стили для полей ввода */
#art-show-form label {
display: block;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: 600;
    color: #333;
    font-size: 17px;
}

#art-show-form input[type="text"],
#art-show-form input[type="tel"],
#art-show-form input[type="email"],
#art-show-form select,
#art-show-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 0px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    background: #fff;
}

#art-show-form select:focus {
    box-shadow: 0 0 0 3px rgba(206, 161, 218, 0.25);
}
#art-show-form select:focus-visible {
  outline: none;
}

#art-show-form input:focus {
    box-shadow: 0 0 0 3px rgba(206, 161, 218, 0.25);
}
#art-show-form input:focus-visible {
  outline: none;
}

#art-show-form textarea {
    resize: vertical;
    min-height: 65px;
}
#art-show-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(206, 161, 218, 0.25);
}
#art-show-form textarea:focus-visible {
  outline: none;
}

/* Стили для кнопки */
#art-show-form input[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #822799;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 10px;
}

#art-show-form input[type="submit"]:hover {
    background-color: #9344A7;
}
#art-show-form input[type="submit"]:active {
    background-color: #803B91;
}

/* Стили для чекбокса */
#art-show-form input[type="checkbox"] {
    margin-right: 10px;
}

/* Стили для подсказок */
#art-show-form input::placeholder,
#art-show-form textarea::placeholder {
    color: #999;
}

/* Стили для выпадающих списков */
#art-show-form select {
    appearance: none;
    background: #fff url('data:image/svg+xml;utf8,<svg fill="red" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z"/></svg>') no-repeat right 15px center !important;
    /*background-size: 12px;*/
    background-color: #fff;
    cursor: pointer;

}

/* Стили для поля "Выберите день" */
#day {
    background-color: #ffffff; /* Белый фон по умолчанию */
    border: 1px solid #cccccc; /* Серая рамка */
    /*border-radius: 4px; */
    padding: 10px; /* Внутренние отступы */
    font-size: 16px; /* Размер текста */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.3s ease; /* Плавное изменение фона */
}

/* Эффект при наведении */
#day:hover {
    background-color: #FCF7FD; /* Серый фон при наведении */
}

/* Адаптивные стили */
@media (max-width: 600px) {
    #art-show-form {
        padding: 15px;
    }

    #art-show-form input[type="text"],
    #art-show-form input[type="tel"],
    #art-show-form input[type="email"],
    #art-show-form select,
    #art-show-form textarea {
        font-size: 14px;
    }
}

/* Стили для страницы успеха */
.success-page {
    text-align: center;
    padding: 50px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    /*border-radius: 8px;*/
    max-width: 600px;
    margin: 50px auto;
}

.success-page h1 {
    color: #4CAF50;
    font-size: 36px;
    margin-bottom: 20px;
}

.success-page p {
    font-size: 18px;
    color: #333;
}

/* Стили для заблокированных дней */
.disabled-class {
    background-color: #f0f0f0; /* Серый фон */
    color: #ccc; /* Светлый текст */
    cursor: not-allowed; /* Курсор "недоступно" */
}

/* Стили для checkbox */
.consent-checkbox {
    margin: 0px 0 15px;
    display: flex;
    align-items: flex-start; /* Выравнивание по верхнему краю */
}

.custom-checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

/* для элемента label, связанного с .consent-checkbox */
.custom-checkbox + label {
    display: inline-flex;
    align-items: flex-start; /* Выравнивание по верхнему краю */
    user-select: none;
}

/* создание в label псевдоэлемента before со следующими стилями */
.custom-checkbox + label::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #adb5bd;
    border-radius: 4px;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
    vertical-align: top; /* Выравнивание по верхнему краю */
}

/* стили при наведении курсора на checkbox */
.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
    border-color: #be9bc7;
}

/* стили для активного чекбокса (при нажатии на него) */
.custom-checkbox:not(:disabled):active + label::before {
    background-color: #be9bc7;
    border-color: #be9bc7;
}

/* стили для чекбокса, находящегося в фокусе */
.custom-checkbox:focus + label::before {
    box-shadow: 0 0 0 3px rgba(206, 161, 218, 0.25);
}

/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-checkbox:focus:not(:checked) + label::before {
    border-color: #be9bc7;
}

/* стили для чекбокса, находящегося в состоянии checked */
.custom-checkbox:checked + label::before {
    border-color: #a351b8;
    background-color: #a351b8;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* стили для чекбокса, находящегося в состоянии disabled */
.custom-checkbox:disabled + label::before {
    background-color: #e9ecef;
}

.consent-checkbox label {
    font-size: 15px !important;
    color: #333;
    cursor: pointer;
    line-height: 24px;
}

.consent-checkbox a {
    color: #a351b8;
    text-decoration: underline;
}

.consent-checkbox a:hover {
    color: #8C419F;
    text-decoration: underline;
}

/* Стили для ошибок */
#art-show-form input.invalid,
#art-show-form select.invalid,
#art-show-form textarea.invalid {
    /*background: #fff8f8;*/ /* Красный фон */
    border-color: #f17474; /* Красная рамка */
}

/* Стили для валидных полей */
#art-show-form input.valid,
#art-show-form select.valid,
#art-show-form textarea.valid {
    /*background: #ede7f636;*/
    border-color: #9e9e9e;
}

/* Стили для подсказок */
.default-input__error-text {
display: none;
    color: #d25b5b;
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    top: 110%;
    left: 0;
    z-index: 1;
    line-height: 0px;
}

/* Показываем сообщение об ошибке, если поле невалидно */
#art-show-form input.invalid + .default-input__error-text,
#art-show-form select.invalid + .default-input__error-text,
#art-show-form textarea.invalid + .default-input__error-text {
    display: block;
}

/* Стили для сообщения об ошибке чекбокса */
.consent-checkbox + .default-input__error-text {
    display: none;
    color: #d25b5b;
    font-size: 12px;
    margin: -7px 0px 0px 3px;
}

/* Показываем сообщение об ошибке для чекбокса, если он невалиден */
.consent-checkbox.invalid + .default-input__error-text {
    display: block;
}

/* Обертка для поля формы */
.form-field {
    position: relative; /* Для позиционирования подсказок */
    margin-bottom: 15px; /* Отступ между полями */
}
.mrgbtmzero {
    margin-bottom: 5px; /* Отступ между полями */
}

/* Анимация красной стрелки для галочки Согласия */
#movearr {
    -webkit-animation: mover 0.5s infinite  alternate;
    animation: mover 0.5s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(2px); }
}

/* Для кнопки Сотояние загрузки данных - анимация */
.loading {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
    background-size: 40px 40px;
    animation: progress-bar-stripes 1s linear infinite;
    -webkit-animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
/* Cтили для сообщения об успешной отправке формы */
#success-message {
max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 3px dashed #58ad72;
    /*border-radius: 8px; */
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
    text-align: center;
    background: linear-gradient(to bottom right, #caef9f 40%, #adebc6 100%);
    /*border-radius: 16px; */
    perspective: 40px;
    display: block !important;
  visibility: visible !important;
}

#success-message h2 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    padding-top: 5px;
    color: #33333e;
    padding-bottom: 5px;
    text-transform: uppercase;
}

#success-message p {
    color: #333;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
}
#success-message a {
    color: #333; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
    font-weight: bold; /* Жирный текст */
}

#success-message a:hover {
    text-decoration: underline; /* Подчёркивание при наведении */
}
/* Стили для контейнера с изображениями */
.image-container {
    display: flex; /* Используем flexbox для расположения изображений */
    justify-content: center; /* Центрируем изображения по горизонтали */
    gap: 8px; /* Расстояние между изображениями */
    margin: 0px 0 20px; /* Отступ сверху и снизу */
}

.image-container img {
    width: 20px; /* Ширина изображения */
    height: 20px; /* Высота изображения */
    opacity: 0.75;
}

.required-fields-note {
font-size: 13px;
    margin-bottom: 15px;
    display: inline-block;
    border-bottom: 1px solid #e0e0e0;
}

.required-fields-note svg {
    margin-right: 5px;
    opacity: 0.7;
}

.required-fields-note span {
    vertical-align: middle;
}

/* Стили для контейнера радио-кнопок */
.time-radio-container,
.tickets-radio-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 5px;
    justify-content: flex-start;
}
/* Адаптивные стили */
@media (max-width: 600px) {
.time-radio-container,
.tickets-radio-container {
    gap: 8px;
}
}

/* Стили для опций радио-кнопок */
.radio-option {
    position: relative;
}

.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-option label {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px !important;
}

.radio-option input[type="radio"]:checked + label {
   background-color: #f0e6f5cc;
    border-color: #bb9ac1;
    color: #75437e !important;
    text-align: center;
    font-size: 16px !important;
    box-shadow: 0 0 0 3px rgb(206 161 218 / 25%);
}

.radio-option:hover label {
    background-color: #FBF7FC;
}

/* Специальные стили для временных слотов */
.time-option label {
    min-width: 78px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* Standard */
  -webkit-touch-callout: none; /* iOS Safari */
  pointer-events: auto;      /* Не мешаем кликам */
}

@media (max-width: 768px) {
   .time-option label {
    min-width: auto;
}
.radio-option label {
    padding: 13px 10px;
    font-size: 15px !important;
}
.radio-option input[type="radio"]:checked + label {
    font-size: 15px !important;
}
}

/* Специальные стили для билетов */
.ticket-option label {
    padding: 10px 15px 10px 15px;
    -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* Standard */
  -webkit-touch-callout: none; /* iOS Safari */
  pointer-events: auto;      /* Не мешаем кликам */
}
@media (max-width: 768px) {
 .ticket-option label {
    padding: 10px 15px 10px 15px;
}
}

.ticket-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.ticket-icon-1 {
    background-image: url('../images/ticket-1.svg');
}

.ticket-icon-2 {
    background-image: url('../images/ticket-2.svg');
}

.ticket-icon-3 {
    background-image: url('../images/ticket-3.svg');
}

.ticket-icon-4 {
    background-image: url('../images/ticket-4.svg');
}

.ticket-text {
    font-size: 15px;
    font-weight: 500;
    vertical-align: middle;
    padding: 10px;
}

/* Стили для сообщений о загрузке и ошибках */
.radio-loading,
.radio-error {
    padding: 0px;
    color: #666;
    font-size: 14px;
}

.radio-error {
    color: #d25b5b;
}

/* Стиль для отображения локации */
.location-display {
    border-radius: 4px;
    font-size: 16px;
    margin-top: 5px;
}

/* === Стили для формы с шагами === */

#art-show-form-slider {
  position: relative;
  overflow: hidden;
  transition: height 0.1s ease-in-out;
}

.form-step {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  backface-visibility: hidden;
}

.form-step.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

.step-content {
  padding: 15px;
}

/* === Индикатор шагов === */

.step-indicator {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 10px; /* Увеличим отступ снизу */
}

.step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ccc;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.step-dot.active {
  background-color: #ee3942;
}

/* Эффект при наведении на неактивную точку */
.step-dot:not(.active):hover {
  background-color: #aaa;
}

/* === Кнопки шагов === */

.step-buttons {
  display: flex;
  justify-content: space-between; /* Раздвигаем кнопки по краям */
  align-items: center;
  gap: 10px; /* Опционально: минимальный отступ для мобильных */
  /*margin-top: 20px;*/
}

/* Адаптивные стили */
@media (max-width: 600px) {
  .step-buttons {
  gap: 0px; /* Опционально: минимальный отступ для мобильных */
}
}

.step-button {
  /*display: inline-block;
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background-color: #822799;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;*/
    flex: 1;
    box-sizing: border-box;
    padding: 12px !important;
    background-color: #ee3942 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    font-family: "Open Sans", sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 10px !important;
    font-weight: 700 !important;
}

.step-button.next {
  width: 100%;
}

.step-button:hover {
  background-color: #df5d5e !important;
}

.step-button.back {
  background-color: #e0e0e0 !important;
  color: #333 !important;
  /*border: 1px solid #ccc !important;*/
}

.step-button.back:hover {
  background-color: #E8E8E8 !important;
}

/* === Кнопка "Назад" === */
.step-button.back {
  flex: 0 0 29%; /* Фиксируем ширину */
}

/* === Кнопка "Забронировать" === */
.step-button.next {
  flex: 0 0 69%; /* Фиксируем ширину */
}

/* Стили для модального окна успеха */
.success-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: modalFadeIn 0.3s ease;
}

.success-modal-content {
    background: white;
    padding: 15px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin: 20px 0; /* Отступы для скролла */
    max-height: 90vh; /* Максимальная высота */
    overflow-y: auto; /* Внутренний скролл при необходимости */

}

@media (max-width: 600px) {
    .success-modal-content {
     padding: 5px;
    }
}

.success-modal-close {
    position: absolute;
    top: -7px;
    right: 0px;
    background: none;
    border: none;
    font-size: 46px;
    line-height: 46px;
    cursor: pointer;
    color: #333;
    transition: color 0.2s;
}

.success-modal-close:hover {
    color: #262626 !important;
    background-color: transparent !important;
    border-radius: 12px;
    right: 0px;
    top: -7px;
}

@media (max-width: 600px) {
    .success-modal-close {
    top: 5px;
    right: 0px;
    font-size: 36px;
    line-height: 12px;
    }
    .success-modal-close:hover {
    color: #262626 !important;
    background-color: transparent !important;
    border-radius: 12px;
    right: 0px;
    top: 5px;
}
}

.success-modal-icon {
    margin-bottom: 15px;
}

.success-modal-title {
    color: #333;
    margin: 0px 0px 15px 0px;
    font-size: 26px;
    font-weight: 700;
    line-height: 33px;
    font-family: 'Open Sans';
}

.success-modal-body {
    text-align: left;
    color: #333;
    line-height: 1.5;
    font-size: 16px;
}
@media (max-width: 600px) {
   .success-modal-body {
    font-size: 15x;
}
}

.success-modal-highlight {
    padding: 0px 0px 0px 0px;
    margin: 15px 0;
}

.success-modal-list {
    margin-top: 5px;
    padding-left: 20px;
}

.success-modal-list a {
    color: #822799;
    text-decoration: none;
}

.success-modal-list a:hover {
    text-decoration: underline;
}

.success-modal-button {
    flex: 1;
    box-sizing: border-box;
    padding: 12px !important;
    background-color: #822799 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    font-family: "Open Sans", sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-top: 0px !important;
    width: 100%;
}

.success-modal-button:hover {
    background: #9344a7 !important;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Контейнер поля даты */
.date-field {
    position: relative;
}

.date-input-wrapper {
    position: relative;
}

/* Стили для индикатора */
.date-picker-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Чтобы клики проходили сквозь к полю */
    transition: transform 0.2s;
    width: 24px; /* Явно задаем размер */
    height: 24px;
    min-width: 24px; /* Запрещаем сжатие */
}

/* Интерактивные эффекты */
#day {
    padding-right: 40px; /* Оставляем место для иконки */
    cursor: pointer; /* Меняем курсор */
    background-color: #fff; /* Для контраста с иконкой */
}

#day:hover {
    background-color: #f9f9f9;
}

/* Анимация при наведении */
#day:hover ~ .date-picker-indicator {
    transform: translateY(-50%) scale(1.1);
}

/* Стили для блока розыгрыша призов */
.prize-draw-block {
    margin: 20px 0;
    padding: 15px;
    background: #f9f5fc;
    border-radius: 8px;
    border: 1px dashed #a351b8;
}

.prize-draw-block h3 {
    color: #822799;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.prize-code {
    font-family: monospace;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    background: white;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    border: 2px solid #822799;
    color: #333;
}

.prize-instructions {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

.prize-draw-block a {
    color: #0066cc;
    text-decoration: underline;
}
.prize-draw-block a:hover {
    color: #004A94;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .prize-draw-block {
        padding: 10px;
    }

    .prize-code {
        font-size: 18px;
        padding: 8px;
    }

    .prize-instructions {
        font-size: 13px;
    }
}

/* Стили для недоступных временных слотов */
.radio-option.time-option.unavailable label {
    background-color: #fff;
    border: 1px solid #e57373;
    cursor: pointer;
}

.radio-option.time-option.unavailable label:hover {
    background-color: #fff5f5;
    border-color: #e57373;
}

.radio-option.time-option.unavailable input[type="radio"]:checked + label {
    background-color: #ffebee;
    border-color: #e57373;
    box-shadow: 0 0 0 3px rgba(239, 154, 154, 0.25);
}

/* УБИРАЕМ все дополнительные элементы */
.slot-status {
    display: none;
}

/* УБИРАЕМ иконку поиска */
.radio-option.time-option.unavailable label::after {
    display: none;
}



/* Стили для статуса слота */
.slot-status {
    margin-left: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Анимация для проверяющихся слотов */
.radio-option.time-option[data-checking-alternatives="true"] {
    opacity: 0.7;
}

.radio-option.time-option[data-checking-alternatives="true"] label {
    background-color: #ffebee;
    border-color: #ef9a9a;
}

/* Плавные переходы для всех изменений */
.radio-option.time-option {
    transition: all 0.3s ease;
}

.radio-option.time-option.unavailable {
    opacity: 1; /* Всегда непрозрачны */
}

/* Плавное исчезновение */
.radio-option.time-option {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.radio-option.time-option.fade-out {
    opacity: 0;
    transform: scale(0.8);
}




/* Блокировка скролла при открытом модальном окне */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Стили для модального окна с альтернативами */
.alternative-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: modalFadeIn 0.3s ease;
    overflow-y: auto;
    padding: 20px 0;
}

.alternative-modal-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin: auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

@media (max-width: 600px) {
    .alternative-modal-content {
        padding: 15px;
        max-height: calc(100vh - 20px);
    }
}

.alternative-modal-close {
    position: absolute;
    top: -7px;
    right: 0px;
    background: none;
    border: none;
    font-size: 46px;
    line-height: 46px;
    cursor: pointer;
    color: #333;
    transition: color 0.2s;
    z-index: 1;
}

.alternative-modal-close:hover {
    color: #262626 !important;
    background-color: transparent !important;
    border-radius: 12px;
    right: 0px;
    top: -7px;
}

@media (max-width: 600px) {
    .alternative-modal-close {
        top: 5px;
        right: 0px;
        font-size: 36px;
        line-height: 12px;
    }
    .alternative-modal-close:hover {
        color: #262626 !important;
        background-color: transparent !important;
        border-radius: 12px;
        right: 0px;
        top: 5px;
    }
}

.alternative-modal-header {
    margin-bottom: 20px;
}

.alternative-modal-header h3 {
    color: #ef5350;
    margin: 0px 0px 15px 0px;
    font-size: 26px;
    font-weight: 700;
    line-height: 33px;
    font-family: 'Open Sans';
}

.location-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    font-size: 18px;
}

.location-address {
    color: #666;
    font-size: 16px;
    margin-bottom: 5px;
}

.location-availability {
color: #179f1c;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 16px;
}

@media (max-width: 600px) {
  .alternative-modal-header h3 {
      margin: 0px 0px 5px 0px;
      font-size: 21px;
      font-weight: 700;
      line-height: 27px;
  }
  .alternative-modal-header {
      margin-bottom: 10px;
  }
  .location-name {
    font-size: 16px;
    margin-bottom: 2px;
    }
    .location-address {
    font-size: 14px;
    margin-bottom: 2px;
}

.location-availability {
    margin-bottom: 5px;
    font-size: 14px;
}
}

.alternative-modal-header p {
    color: #333;
    line-height: 1.5;
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}

@media (max-width: 600px) {
    .alternative-modal-header p {
        font-size: 15px;
    }
}

/* Стили для опций локаций */
.alternative-location-option {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.alternative-location-option:hover {
    /*border-color: #822799;
    box-shadow: 0 2px 8px rgba(130, 39, 153, 0.1);*/
    background-color: #f0e6f561;
    border-color: #bb9ac1;
    box-shadow: 0 0 0 3px rgb(206 161 218 / 25%);
}


.select-alternative-btn {
    background: #822799;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    width: 100%;
}

.select-alternative-btn:hover {
    background: #9344a7;
}

.loading-alternatives,
.no-alternatives {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 16px;
}

/* === Модалка предупреждения о дубле === */
.duplicate-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: modalFadeIn 0.3s ease;
    overflow-y: auto;
    padding: 20px 0;
}

.duplicate-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    margin: auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

@media (max-width: 600px) {
    .duplicate-modal-content {
        padding: 25px;
        max-height: calc(100vh - 20px);
    }
}

.duplicate-modal-close {
    position: absolute;
    top: -7px;
    right: 0;
    background: none !important;
    border: none !important;
    font-size: 46px !important;
    line-height: 46px !important;
    cursor: pointer;
    color: #333 !important;
    transition: color 0.2s !important;
    z-index: 1;
}

.duplicate-modal-close:hover {
    color: #262626 !important;
    background-color: transparent !important;
}

@media (max-width: 600px) {
    .duplicate-modal-close {
        top: 5px;
        font-size: 36px;
        line-height: 12px;
    }
}

.duplicate-modal-header {
    margin-bottom: 15px;
}

.duplicate-modal-header h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    font-family: 'Open Sans', sans-serif;
}

.duplicate-modal-header p {
    color: #333;
    line-height: 1.5;
    font-size: 15px;
    margin: 0;
}

@media (max-width: 600px) {
    .duplicate-modal-header h3 {
        font-size: 19px;
        line-height: 24px;
    }
    .duplicate-modal-header p {
        font-size: 14px;
    }
}

.duplicate-modal-body {
    margin-bottom: 15px;
}

.duplicate-item {
    border: 1px solid #e0e0e0;
    border-left: 4px solid #f0ad4e;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: #fffdf7;
}

.duplicate-item-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.duplicate-label {
    color: #666;
    flex: 0 0 auto;
}

.duplicate-value {
    color: #333;
    font-weight: 600;
    text-align: right;
    flex: 1 1 auto;
}

@media (max-width: 600px) {
    .duplicate-item {
        padding: 10px 12px;
    }
    .duplicate-item-row {
        font-size: 13px;
    }
}

.duplicate-modal-footer {
    border-top: 1px solid #e0e0e0;
    padding-top: 15px;
}

.duplicate-question {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    text-align: center;
}

.duplicate-modal-buttons {
    display: flex;
    gap: 10px;
}

.duplicate-btn {
    flex: 1;
    padding: 12px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    font-family: "Open Sans", sans-serif !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border: none !important;
    transition: background-color 0.2s ease;
}

.duplicate-btn-cancel {
    background-color: #e0e0e0 !important;
    color: #333 !important;
}

.duplicate-btn-cancel:hover {
    background-color: #d5d5d5 !important;
}

.duplicate-btn-confirm {
    background-color: #822799 !important;
    color: #fff !important;
}

.duplicate-btn-confirm:hover {
    background-color: #9344a7 !important;
}

@media (max-width: 600px) {
    .duplicate-btn {
        font-size: 14px !important;
        padding: 11px !important;
    }
}

/* === Сводка выбранного на шаге 1 (показывается на шаге 2) === */
.booking-summary {
    background: #f9f5fc;
    border: 1px dashed #c5a0d3;
    border-radius: 8px;
    padding: 12px 10px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}

.booking-summary__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

.booking-summary__row:last-of-type {
    margin-bottom: 0;
}

.booking-summary__icon {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.5;
    width: 20px;
    text-align: center;
}

.booking-summary__value {
    flex: 1 1 auto;
    color: #333;
    font-weight: 600;
    min-width: 0; /* важно для работы text-overflow внутри flex */
}

/* Обрезка длинного адреса через многоточие */
.booking-summary__value--truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.booking-summary__hint {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #d8c2e0;
    color: #333;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .booking-summary {
        padding: 10px 12px;
        font-size: 14px;
        margin-bottom: 15px;
    }
    .booking-summary__hint {
        font-size: 13px;
        margin-top: 6px;
        padding-top: 6px;
    }
}

/* === Кастомный дропдаун локаций === */
#art-show-form .loc-dropdown {
    position: relative;
    user-select: none;
}

/* Триггер — принудительно переопределяем стили темы для button */
#art-show-form .loc-dropdown-trigger {
    display: flex !important;
    align-items: center !important;

    position: relative !important; /* для позиционирования ::after */

    width: 100% !important;
    box-sizing: border-box !important;

    padding: 10px 45px 10px 10px !important; /* справа место под стрелку */
    margin: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #333 !important;
    text-align: left !important;
    text-decoration: none !important;

    cursor: pointer !important;
    transition: box-shadow 0.15s, border-color 0.15s, background 0.15s !important;
}

#art-show-form .loc-dropdown-trigger:hover {
    background: #FCF7FD !important;
    background-color: #FCF7FD !important;
    border-color: #ccc !important;
    color: #333 !important;
}

#art-show-form .loc-dropdown-trigger:focus,
#art-show-form .loc-dropdown-trigger:focus-visible {
    outline: none !important;
    border-color: #bb9ac1 !important;
    box-shadow: 0 0 0 3px rgba(206, 161, 218, 0.25) !important;
}

/* Стрелка — псевдоэлемент, чтобы можно было анимировать поворот */
#art-show-form .loc-dropdown-trigger .arrow {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;

    display: block !important;
    width: 20px !important;
    height: 20px !important;
    box-sizing: content-box !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    background: url("data:image/svg+xml;utf8,<svg fill='red' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z'/></svg>") no-repeat center center !important;
    background-size: 20px 20px !important;

    transform: translateY(-50%) rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform 0.2s ease !important;
    pointer-events: none !important;
}

#art-show-form .loc-dropdown.open .loc-dropdown-trigger .arrow {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Панель */
#art-show-form .loc-dropdown-panel {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    padding: 0px;
    overflow: visible;
}

#art-show-form .loc-dropdown.open .loc-dropdown-panel {
    display: block;
}

/* Опции — тоже button, поэтому тоже перебиваем тему */
#art-show-form .loc-option {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e3e3e3 !important; /* ← разделитель */
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #333 !important;
    text-align: left !important;
    text-decoration: none !important;

    cursor: pointer !important;
    transition: background 0.15s !important;

    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* У последней опции — убрать разделитель */
#art-show-form .loc-option:last-child {
    border-bottom: none !important;
}

/* Hover — только фон, разделитель не трогаем */
#art-show-form .loc-option:hover {
    background: #FBF7FC !important;
    background-color: #FBF7FC !important;
    color: #333 !important;
}

/* Активная — фон + жирный текст (без рамок, чтобы не спорить с разделителями) */
#art-show-form .loc-option.active {
    background: #f0e6f5cc !important;
    background-color: #f0e6f5cc !important;
    color: #333 !important;
}

#art-show-form .loc-option.active .loc-option-line1 {
    font-weight: 700 !important;
}

#art-show-form .loc-option-line1 {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#art-show-form .loc-option-line2 {
    display: block !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #666 !important;
    line-height: 1.35 !important;
    margin-top: 3px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Одиночная локация (не button — стили мягче) */
#art-show-form .location-display .loc-option-line1 {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}
#art-show-form .location-display .loc-option-line2 {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    line-height: 1.35;
    margin-top: 3px;
}

/* Адаптив */
@media (max-width: 600px) {
    #art-show-form .loc-dropdown-trigger {
        font-size: 14px !important;
    }
    #art-show-form .loc-option-line1 {
        font-size: 15px !important;
    }
    #art-show-form .loc-option-line2 {
        font-size: 12px !important;
    }
}