@font-face {
  font-family: 'TTHoves';
  src: url('TTHoves-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'TTHoves', sans-serif;
    font-weight: 300;
    background-color: #D7DEE6; 
}
.welcome-logo {
    text-align: center;
    margin-bottom: 30px; /* Отступ снизу до .welcome-content */
}

.logo-img {
    max-width: 320px;
    height: auto;
    display: block;
    margin: 0 auto; 
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #D7DEE6;
    display: flex;
    flex-direction: column;         
    justify-content: center;        
    align-items: center;            
    z-index: 1000;
    padding: 20px;                   
    box-sizing: border-box;
}

.welcome-content {
    background-color: #D7DEE6; 
    font-family: 'TTHoves', sans-serif;
    font-weight: 100%;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
}

.input-group {
    margin-top: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#recordNumber {
    background-color: #D7DEE6; 
    padding: 10px;
    text-align: center;
    font-size: 36px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background-color: #D7DEE6; 
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form-title {
    font-family: 'TTHoves', sans-serif;
    font-weight: bold;
    font-size: 28px;
    line-height: 1.4; 
    text-align: center;
    margin: 0 0 15px 0; 
    color: #333; 
    word-wrap: break-word;
    hyphens: auto; 
}
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.time-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.time-btn {
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.time-btn.disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

button[type="submit"] {
    padding: 12px 24px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button[type="submit"]:hover {
    background-color: #218837;
}
/* Доступные даты в календаре (синий) */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(64%) sepia(38%) saturate(2764%) hue-rotate(194deg) brightness(93%) contrast(103%);
}

/* Альтернатива: подсветка фона поля даты */
#selectedDate {
    border-color: #0F6BFF;
    outline-color: #0F6BFF;
}

/* Выбранная дата (зелёный контур) */
#selectedDate.selected {
    border-color: #A4FD00;
    box-shadow: 0 0 0 2px rgba(164, 253, 0, 0.3);
}

/* Кнопки времени: доступные */
.time-btn {
    background-color: #0F6BFF;
    border: 1px solid #ddd;
    color: #FFFFFF;
    cursor: pointer;
}

/* Кнопки времени: выбранные */
.time-btn.selected {
    background-color: #A4FD00 !important;
    border-color: #A4FD00;
    color: #000;
    font-weight: bold;
}

/* Кнопки времени: занятые */
.time-btn.disabled {
    background-color: #e0e0e0;
    color: #888;
    cursor: not-allowed;
}
.date-picker-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.date-picker-wrapper input {
    width: calc(100% - 30px);
    padding-right: 35px;
    box-sizing: border-box;
}

.calendar-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #0F6BFF;
}
#errorMessage {
    color: red;
    font-size: 24px;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    padding: 8px;
    background-color: #D7DEE6; 
    border: 1px solid #fcc;
    border-radius: 4px;
}
.agreement-group {
        margin-bottom: 15px;
        font-family: 'TTHoves', sans-serif;
        font-size: 14px;
        line-height: 1.6;
    }

    /* Обертка label — делает элементы в ряд */
    .agreement-label {
        display: flex;
        align-items: center;          /* Выравнивает по вертикали */
        gap: 12px;                   /* Отступ между чекбоксом и текстом */
        cursor: pointer;
        padding: 8px 0;
    }

    /* Сам чекбокс — фиксируем размер и вертикальное выравнивание */
    #agreementCheckbox {
        flex-shrink: 0;              /* Не сжимается */
        width: 18px;
        height: 18px;
        margin: 0;
        transform: translateY(-1px);   /* Тонкая корректировка по вертикали */
    }

    /* Текст соглашения — занимает оставшееся место */
    .agreement-text {
        flex: 1;
        color: #333;
    }

    /* Ссылка внутри текста */
    .agreement-link {
        color: #007bff;
        text-decoration: none;
        font-weight: 500;
    }

    .agreement-link:hover {
        text-decoration: underline;
    }

    /* Красный звёздочка-обязательность */
    .form-control-required {
        color: red;
        font-weight: bold;
        margin-left: 6px;
        flex-shrink: 0;
    }

    /* Сообщение об ошибке */
    .form-control-alert-message {
        color: red;
        font-size: 0.9em;
        margin-top: 6px;
        margin-left: 30px; /* Сдвиг под чекбокс */
    }
/* Полный экран */
.tg-full-screen {
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.date-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.date-btn {
    padding: 10px 15px;
    border: 2px solid #007bff;
    background: #f8f9fa;
    color: #007bff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.date-btn:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.date-btn.selected {
    background: #A4FD00 !important;
    color: black !important;
    font-weight: bold;
    border-color: #A4FD00 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.date-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #dee2e6;
    border-color: #adb5bd;
}
/* Группа для чекбоксов — соответствует стилю других form-group */
.checkbox-group {
    margin-bottom: 15px;
    font-family: 'TTHoves', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

/* Обертка label для чекбокса — выравнивание в ряд */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
    transition: background-color 0.2s ease;
}

.checkbox-label:hover {
    background-color: rgba(164, 253, 0, 0.05);
}

/* Сам чекбокс — стилизация под общий дизайн */
.custom-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    transform: translateY(-1px);
    border: 2px solid #0F6BFF;
    border-radius: 4px;
    background-color: white;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Стили для отмеченного состояния */
.custom-checkbox:checked {
    background-color: #A4FD00;
    border-color: #A4FD00;
}

/* Галочка для отмеченного чекбокса */
.custom-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Текст подписи к чекбоксу */
.checkbox-text {
    flex: 1;
    color: #333;
    font-size: 14px;
}

/* Обязательный чекбокс — красная звёздочка */
.checkbox-required::after {
    content: '*';
    color: red;
    font-weight: bold;
    margin-left: 6px;
    flex-shrink: 0;
}

/* Сообщение об ошибке для обязательных чекбоксов */
.checkbox-error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 6px;
    margin-left: 30px; /* Сдвиг под чекбокс */
    display: none; /* По умолчанию скрыто */
}

/* Отображение ошибки при неверной валидации */
.checkbox-group.has-error .checkbox-error-message {
    display: block;
}

/* Отключённое состояние (если нужно) */
.custom-checkbox:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Фокус для доступности */
.custom-checkbox:focus {
    box-shadow: 0 0 0 3px rgba(15, 107, 255, 0.3);
    border-color: #0F6BFF;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .checkbox-label {
        gap: 10px;
        padding: 6px 0;
    }
    
    .custom-checkbox {
        width: 16px;
        height: 16px;
    }
    
    .checkbox-text {
        font-size: 13px;
    }
}
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.dot {
  /* Стили заданы в JS */
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-12px);
    }
    60% {
        transform: translateY(-6px);
    }
}


/* Дополнительные стили для лучшей видимости */
.spinner-dots {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5);
}
/* Подключаем шрифт Druk, если он еще не подключен в head */
@font-face {
    font-family: 'Druk';
    src: url('path/to/druk-font.woff2') format('woff2'); /* Укажи путь к своему файлу */
    font-weight: 700;
    font-style: normal;
}

/* Контейнер для всего блока заголовка */
#formTitleContainer {
    text-align: left; /* Или center, если нужно по центру */
    line-height: 1.4;
}

    /* ЗАГОЛОВОК: Прописные, крупный */
    .event-title-main {
        font-family: 'Druk', Arial, sans-serif; /* Если Druk нет, будет Arial */
        text-transform: uppercase;             /* Делает все буквы заглавными */
        font-size: 28px !important;           /* !important гарантирует размер */
        font-weight: 700;
        color: #333;
        margin: 0 0 15px 0;
        line-height: 1.2;
    }

    /* ДЕТАЛИ: Обычный текст */
    .event-details {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px !important;          /* На 10px меньше заголовка */
        color: #444;
        line-height: 1.5;
    }

    /* АДРЕС/ВРЕМЯ: Мелкий текст */
    .event-address {
        font-size: 16px !important;         /* Еще мельче */
        color: #666;
        display: block;                     /* Каждый адрес с новой строки */
    }
    
    /* Убираем лишние <br>, которые мы добавляем в JS, чтобы не было двойных отступов */
    .event-address + br { display: none; }