/* 
 * Стили для групп форм 
 * Отступы между блоками формы
 */
.form-group {
    margin-bottom: 15px; /* Отступ снизу для разделения элементов формы */
}

/* 
 * Базовые стили для элементов управления формой (input, textarea и т.д.)
 */
.form-control {
    display: inline-block; /* Отображение в строку */
    padding: 10px; /* Внутренние отступы */
    border: solid 1px var(--form-control-border); /* Рамка из переменной темы */
    border-radius: 15px; /* Закругленные углы */
    background-color: var(--form-control-bg); /* Фон из переменной темы */
    color: var(--form-control-tx); /* Цвет текста из переменной темы */
    transition: all 0.3s ease; /* Плавный переход для всех свойств */
}

/* Отключаем эффект фокуса у readonly-полей */
.form-control[readonly]:focus {
    border-color: var(--form-control-border);
    box-shadow: none;
    outline: none;
    transition: none;
}

/* 
 * Стили для плейсхолдера в .form-control
 */
.form-control::placeholder {
    color: var(--form-control-placeholder);
    opacity: 1;
}

/* 
 * Контейнер с гибкой разметкой (flex) для выравнивания колонок
 * Убирает отрицательные отступы по бокам
 */
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* 
 * Стили для .form-group внутри .form-row
 * Обеспечивает внутренние отступы и ширину
 */
.form-row .form-group {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 1rem; /* Отступ между группами форм */
}

/* 
 * Стили контейнера формы
 * Фон, отступы, скругления и тень
 */
.form-container {
    width: 100%;
    background-color: var(--bg-secondary);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* 
 * Стили для групп ввода с плавающими метками
 */
.form-input-group {
    position: relative;
    margin-bottom: 25px;
    width: 100%;
    text-align: left;
}

.form-input-group label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    pointer-events: none;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--form-control-border);
    border-radius: 15px;
    font-size: 16px;
    color: var(--form-control-tx);
    background-color: var(--form-control-bg);
    outline: none;
    box-sizing: border-box;
    margin-top: 10px;
    height: 40px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input-group input:focus {
    border-color: var(--btn-primary);
    box-shadow: 0 0 0 3px rgba(77, 107, 254, 0.2);
}

.form-input-group input:focus + label,
.form-input-group input:valid + label {
    top: -1px;
    font-size: 12px;
    color: var(--btn-primary);
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--form-control-border);
  border-radius: 15px;
  background-color: var(--form-control-bg);
  color: var(--form-control-tx);
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s ease;
}

/* Стили для автозаполненных полей */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--form-control-tx, #e0e0e0) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--form-control-bg, #2d2d2d) inset !important;
	box-shadow: 0 0 0px 1000px var(--form-control-bg, #2d2d2d) inset !important;
	background-color: var(--form-control-bg, #2d2d2d) !important;
	background-image: none !important;
	border-color: var(--form-control-border, #555) !important;
	color: var(--form-control-tx, #e0e0e0) !important;
	transition: background-color 5000s ease-in-out 0s;
}


/* 
 * Логотип формы — центрирован, с отступом снизу
 */
.form-logo {
    width: 100px;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}

/* 
 * Стили для капчи
 */
.form-captcha-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
    display: none; /* По умолчанию скрыто */
}

.form-captcha-input {
    width: calc(50% - 10px); /* Половина ширины с отступом */
    margin-right: 10px;
    border: 1px solid var(--form-control-border);
    border-radius: 15px;
    padding: 10px;
    background-color: var(--form-control-bg);
    color: var(--form-control-tx);
}

.form-captcha-image {
    height: 40px;
    width: auto;
    margin-top: 7px; /* Сдвиг изображения капчи вниз */
}

/* 
 * Стили для input с классами h1-h6 — размеры текста, соответствующие заголовкам
 */

input.h0 {
    font-size: 3.5em; 
    font-weight: bold;
}
 
input.h1 {
    font-size: 2.5em; /* Примерный размер для h1 */
    font-weight: bold;
}
input.h2 {
    font-size: 2em; /* Примерный размер для h2 */
    font-weight: bold;
}
input.h3 {
    font-size: 1.75em; /* Примерный размер для h3 */
    font-weight: bold;
}
input.h4 {
    font-size: 1.5em; /* Примерный размер для h4 */
    font-weight: normal;
}
input.h5 {
    font-size: 1.25em; /* Примерный размер для h5 */
    font-weight: normal;
}
input.h6 {
    font-size: 1em; /* Примерный размер для h6 */
    font-weight: normal;
}

input.h7 {
    font-size: 0.875em; 
    font-weight: normal;
}

input.h8 {
    font-size: 0.75em;
    font-weight: normal;
}

input.h9 {
    font-size: 0.625em; 
    font-weight: normal;
}

/* 
 * Стили для колонок внутри .form-row
 * Изначально — общие стили для всех .col-* классов
 * Эти стили применяются к любым элементам (не только div), имеющим класс col-*
 */
.form-row .col,
.form-row .col-1,
.form-row .col-2,
.form-row .col-3,
.form-row .col-4,
.form-row .col-5,
.form-row .col-6,
.form-row .col-7,
.form-row .col-8,
.form-row .col-9,
.form-row .col-10,
.form-row .col-11,
.form-row .col-12,
.form-row .col-auto,
.form-row .col-sm-1,
.form-row .col-sm-2,
.form-row .col-sm-3,
.form-row .col-sm-4,
.form-row .col-sm-5,
.form-row .col-sm-6,
.form-row .col-sm-7,
.form-row .col-sm-8,
.form-row .col-sm-9,
.form-row .col-sm-10,
.form-row .col-sm-11,
.form-row .col-sm-12,
.form-row .col-sm-auto,
.form-row .col-md-1,
.form-row .col-md-2,
.form-row .col-md-3,
.form-row .col-md-4,
.form-row .col-md-5,
.form-row .col-md-6,
.form-row .col-md-7,
.form-row .col-md-8,
.form-row .col-md-9,
.form-row .col-md-10,
.form-row .col-md-11,
.form-row .col-md-12,
.form-row .col-md-auto,
.form-row .col-lg-1,
.form-row .col-lg-2,
.form-row .col-lg-3,
.form-row .col-lg-4,
.form-row .col-lg-5,
.form-row .col-lg-6,
.form-row .col-lg-7,
.form-row .col-lg-8,
.form-row .col-lg-9,
.form-row .col-lg-10,
.form-row .col-lg-11,
.form-row .col-lg-12,
.form-row .col-lg-auto,
.form-row .col-xl-1,
.form-row .col-xl-2,
.form-row .col-xl-3,
.form-row .col-xl-4,
.form-row .col-xl-5,
.form-row .col-xl-6,
.form-row .col-xl-7,
.form-row .col-xl-8,
.form-row .col-xl-9,
.form-row .col-xl-10,
.form-row .col-xl-11,
.form-row .col-xl-12,
.form-row .col-xl-auto {	/* Выбираем все элементы с классом 'col-xl-auto', находящиеся внутри элементов с классом 'form-row' */
    position: relative; 	/* Устанавливаем позиционирование элемента как относительное, чтобы можно было позиционировать дочерние элементы (например, абсолютные) относительно этого блока */
    width: 100%;			/* Задаём ширину элемента в 100% от ширины родительского контейнера */
    min-height: 1px;		/* Устанавливаем минимальную высоту блока — 1 пиксель, чтобы элемент не схлопывался, если внутри нет контента */
    padding-right: 15px;	/* Отступ справа — 15 пикселей, чтобы создать пространство между колонками */
    padding-left: 15px;		/* Отступ слева — 15 пикселей, аналогично справа, для симметричного отступа */
}

/* 
 * ===================================================
 * ДОПОЛНЕНИЕ: РАСШИРЕНИЕ .col-* НА ЛЮБЫЕ ЭЛЕМЕНТЫ
 * 
 * Чтобы классы вроде col-4 на  label  или  input  работали,
 * делаем их flex-элементами, даже если это не div
 * 
 * Применяем flex-свойства ко ВСЕМ элементам внутри .form-row, имеющим класс col-*
 * Это позволяет использовать col-* на label, input и других элементах без обёртки
 * ===================================================
 */

/* Применяем базовые стили колонки к любым элементам с префиксом col- внутри .form-row */
.form-row > [class*="col-"] {
    /* Гарантируем, что элемент ведёт себя как колонка */
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    /* Позиционирование и отступы */
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    /* Делаем элемент блочным и гибким */
    display: flex;
    align-items: center; /* Вертикальное центрирование содержимого */
    box-sizing: border-box;
}

/* Явное задание ширины для всех col-* внутри .form-row, независимо от тега */
.form-row > .col-1  { flex: 0 0 8.33333%; max-width: 8.33333%; }
.form-row > .col-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
.form-row > .col-3  { flex: 0 0 25%; max-width: 25%; }
.form-row > .col-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
.form-row > .col-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
.form-row > .col-6  { flex: 0 0 50%; max-width: 50%; }
.form-row > .col-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
.form-row > .col-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
.form-row > .col-9  { flex: 0 0 75%; max-width: 75%; }
.form-row > .col-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
.form-row > .col-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
.form-row > .col-12 { flex: 0 0 100%; max-width: 100%; }

/* 
 * Адаптивные колонки: применяем те же правила, но с медиа-запросами
 * Теперь они работают на любых элементах с классом col-sm-*, col-md-* и т.д.
 */

@media (min-width: 576px) {
    .form-row > .col-sm-1  { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .form-row > .col-sm-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .form-row > .col-sm-3  { flex: 0 0 25%; max-width: 25%; }
    .form-row > .col-sm-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .form-row > .col-sm-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .form-row > .col-sm-6  { flex: 0 0 50%; max-width: 50%; }
    .form-row > .col-sm-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .form-row > .col-sm-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .form-row > .col-sm-9  { flex: 0 0 75%; max-width: 75%; }
    .form-row > .col-sm-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .form-row > .col-sm-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .form-row > .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
    .form-row > .col-md-1  { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .form-row > .col-md-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .form-row > .col-md-3  { flex: 0 0 25%; max-width: 25%; }
    .form-row > .col-md-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .form-row > .col-md-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .form-row > .col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .form-row > .col-md-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .form-row > .col-md-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .form-row > .col-md-9  { flex: 0 0 75%; max-width: 75%; }
    .form-row > .col-md-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .form-row > .col-md-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .form-row > .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    .form-row > .col-lg-1  { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .form-row > .col-lg-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .form-row > .col-lg-3  { flex: 0 0 25%; max-width: 25%; }
    .form-row > .col-lg-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .form-row > .col-lg-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .form-row > .col-lg-6  { flex: 0 0 50%; max-width: 50%; }
    .form-row > .col-lg-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .form-row > .col-lg-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .form-row > .col-lg-9  { flex: 0 0 75%; max-width: 75%; }
    .form-row > .col-lg-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .form-row > .col-lg-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .form-row > .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
    .form-row > .col-xl-1  { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .form-row > .col-xl-2  { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .form-row > .col-xl-3  { flex: 0 0 25%; max-width: 25%; }
    .form-row > .col-xl-4  { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .form-row > .col-xl-5  { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .form-row > .col-xl-6  { flex: 0 0 50%; max-width: 50%; }
    .form-row > .col-xl-7  { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .form-row > .col-xl-8  { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .form-row > .col-xl-9  { flex: 0 0 75%; max-width: 75%; }
    .form-row > .col-xl-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .form-row > .col-xl-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .form-row > .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}



/* 
 * Дополнительно: если используется col-auto — оставим как есть (неявно из исходных стилей)
 * Можно расширить при необходимости
 */