body {
    background-image: var(--page-background-image);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--page-background-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Фикс для Safari */
    min-height: 100vh;
    -webkit-background-size: cover;
}

h1 {
    color: #000;
    letter-spacing: .6px;
    font: 24px / 33px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 0;
    word-break: break-word;
    text-align: center;
}


@media (max-width: 767px) {
    h1 {
        font-size: 18px;
        line-height: 22px;
    }
}

/* На мобильных устройствах .col занимает 100% */
@media (max-width: 767px) {

    .card-body .row,
    form .row {
        flex-direction: column;
    }

    .card-body .row>.col,
    form .row>.col {
        width: 100%;
        flex: none;
    }
}

p {
    color: #000;
    font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    word-break: break-word;
    font-weight: 400;
    opacity: 0.8;
    line-height: 17px;
}

/* Formzilla styles - B24-like form fields */

.form-field {
    position: relative;
    margin-bottom: 0rem;
}

.form-field .form-control,
.form-field .form-select {
    border: 1px solid #c6cdd4;
    border-radius: 4px;
    padding: 20px 15px 8px 15px;
    font-size: 15px;
    line-height: 1.5;
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.form-field .form-control:focus,
.form-field .form-select:focus {
    outline: none;
    border-color: #2fc6f6;
    box-shadow: 0 0 0 2px rgba(47, 198, 246, 0.2);
}

.form-field .form-label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #535c69;
    pointer-events: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0;
    transition: all 0.18s linear;
    background-color: transparent;
    padding: 0;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}

.form-field .form-label .text-danger {
    color: #ff5752;
    margin-left: 2px;
}

/* Input focus state - move label up inside field */
.form-field .form-control:focus+.form-label,
.form-field .form-control:not(:placeholder-shown)+.form-label,
.form-field .form-select:focus+.form-label,
.form-field .form-select.is-filled+.form-label {
    top: 8px;
    left: 15px;
    transform: translateY(0);
    font-size: 13px;
    font-weight: 400;
    opacity: 0.9;
    color: #535c69;
}

/* Required asterisk */
.form-field .form-label .required,
.form-field .form-label .text-danger {
    color: #ff5752 !important;
}

.form-field select option.placeholder-option {
    display: none;
}


/* ============================================ */
/* EventDay и Tracklist - переопределение Bootstrap валидации */
/* ============================================ */
.tracklist {
    margin-left: 24px;
}

.field-eventday .form-check-label{
    font-weight: bold;
}

/* Стили для чекбоксов eventday, tracklist, agreement и checkbox */
.field-eventday .form-check-input,
.field-tracklist .form-check-input,
.field-agreement .form-check-input,
.field-checkbox .form-check-input {
    border: 1px solid #c6cdd4;
    border-radius: 4px;
}

.field-eventday .form-check-input:focus,
.field-tracklist .form-check-input:focus,
.field-agreement .form-check-input:focus,
.field-checkbox .form-check-input:focus {
    outline: none;
    border-color: #2fc6f6 !important;
    box-shadow: 0 0 0 2px rgba(47, 198, 246, 0.2) !important;
}

.field-eventday .form-check-input:checked,
.field-tracklist .form-check-input:checked,
.field-agreement .form-check-input:checked,
.field-checkbox .form-check-input:checked {
    background-color: #2fc6f6;
    border-color: #2fc6f6;
}

/* Когда чекбокс eventday или tracklist невалиден, показываем красный цвет */
.form-check-input[data-eventday-target="input"].is-invalid,
.form-check-input[data-tracklist-target="checkbox"].is-invalid {
    border-color: #dc3545 !important;
}

/* Стили для длинных label в agreement и checkbox */
.field-agreement .form-check-label,
.field-checkbox .form-check-label {
    font-size: 13px;
    line-height: 1.3;
}

/* ============================================ */
/* Адаптивная раскладка БЕЗ изменения шаблонов */
/* ============================================ */

/* Фикс центрирования формы - не трогаем .container и .row.justify-content-center */
.container>.row.justify-content-center {
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 0;
}

/* Родительский контейнер .row должен быть flex-контейнером (только для row внутри формы) */
.card-body .row,
form .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* По умолчанию .col занимает равномерную ширину */
.card-body .row>.col,
form .row>.col {
    flex: 1;
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row .col button[type="submit"] {
    width: 100%;
    background-color: var(--btn-submit-bg-color);
    border-color: var(--btn-submit-bg-color);
    color: var(--btn-submit-text-color);
}

.row .col .alert.alert-danger {
    color: var(--alert-text-color);
    background-color: var(--alert-bg-color);
    border-color: var(--alert-bg-color);
}


/* ============================================ */

/* ============================================ */
/* EventDay и Tracklist - переопределение Bootstrap валидации */
/* ============================================ */

/* Когда чекбокс eventday или tracklist невалиден, показываем красный цвет */
.form-check-input[data-eventday-target="input"].is-invalid,
.form-check-input[data-tracklist-target="checkbox"].is-invalid {
    border-color: #ff5752 !important;
}

/* Отмена зелёной подсветки для невалидных чекбоксов даже в форме с .was-validated */
.was-validated .form-check-input[data-eventday-target="input"].is-invalid:valid,
.was-validated .form-check-input[data-tracklist-target="checkbox"].is-invalid:valid {
    border-color: #ff5752 !important;
    background-color: #fff !important;
}

/* Если чекбокс отмечен и невалиден, показываем красный фон */
.was-validated .form-check-input[data-eventday-target="input"].is-invalid:checked,
.was-validated .form-check-input[data-tracklist-target="checkbox"].is-invalid:checked {
    background-color: #ff5752 !important;
    border-color: #ff5752 !important;
}

/* Убираем зелёную подсветку для чекбоксов eventday/tracklist когда они не отмечены в валидной форме */
.was-validated .form-check-input[data-eventday-target="input"]:not(.is-invalid):not(:checked),
.was-validated .form-check-input[data-tracklist-target="checkbox"]:not(.is-invalid):not(:checked) {
    border-color: #ced4da !important;
    background-color: #fff !important;
}

/* Убираем зелёную подсветку focus для eventday/tracklist */
.was-validated .form-check-input[data-eventday-target="input"]:not(.is-invalid):focus,
.was-validated .form-check-input[data-tracklist-target="checkbox"]:not(.is-invalid):focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Стили для label (подписей) чекбоксов eventday/tracklist */

/* Красный цвет для label невалидных чекбоксов */
.was-validated .form-check-input[data-eventday-target="input"].is-invalid~.form-check-label,
.was-validated .form-check-input[data-tracklist-target="checkbox"].is-invalid~.form-check-label {
    color: #ff5752 !important;
}

/* Зелёный цвет для label валидных чекбоксов */
.was-validated .form-check-input[data-eventday-target="input"].is-valid~.form-check-label,
.was-validated .form-check-input[data-tracklist-target="checkbox"].is-valid~.form-check-label {
    color: #198754 !important;
}

/* Убираем зелёный цвет для label валидных чекбоксов eventday/tracklist */
.was-validated .form-check-input[data-eventday-target="input"]:not(.is-invalid):not(.is-valid)~.form-check-label,
.was-validated .form-check-input[data-tracklist-target="checkbox"]:not(.is-invalid):not(.is-valid)~.form-check-label {
    color: inherit !important;
}

/* Зелёная рамка для валидных чекбоксов */
.was-validated .form-check-input[data-eventday-target="input"].is-valid,
.was-validated .form-check-input[data-tracklist-target="checkbox"].is-valid {
    border-color: #198754 !important;
}

/* Зелёный фон для отмеченных валидных чекбоксов */
.was-validated .form-check-input[data-eventday-target="input"].is-valid:checked,
.was-validated .form-check-input[data-tracklist-target="checkbox"].is-valid:checked {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

/* ============================================ */

/* ============================================ */
/* Taglist / Multi-select with tags styles */
/* ============================================ */

.taglist-wrapper {
    position: relative;
    width: 100%;
}

.taglist-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-end;
    min-height: 52px;
    padding: 26px 15px 6px 15px !important;
    cursor: text;
}

.taglist-tags.focused {
    border-color: #2fc6f6 !important;
    box-shadow: 0 0 0 2px rgba(47, 198, 246, 0.2) !important;
}

.taglist-tags .taglist-search {
    flex: 1;
    min-width: 120px;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--btn-submit-bg-color);
    color: var(--btn-submit-text-color);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.3;
}

.tag-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.tag-close:hover {
    opacity: 1;
}

.taglist-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #c6cdd4;
    border-radius: 4px;
    margin-top: 4px;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.taglist-option {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s;
}

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

.taglist-option:hover {
    background-color: #f8f9fa;
}

/* Label animation for taglist */
.form-field .taglist-wrapper .form-label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #535c69;
    pointer-events: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0;
    transition: all 0.18s linear;
    background-color: transparent;
    padding: 0;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
}

.form-field .taglist-tags.is-filled ~ .form-label,
.form-field .taglist-tags.focused ~ .form-label {
    top: 8px;
    left: 15px;
    transform: translateY(0);
    font-size: 13px;
    font-weight: 400;
    opacity: 0.9;
    color: #535c69;
    background-color: #fff;
    padding: 0 2px;
}