/* creative_layout.css */

/* Основной контейнер */
.lr_creative_layout_container {
    display: flex;
    flex-wrap: wrap; /* На случай, если колонки не помещаются */
    gap: 2rem; /* Расстояние между колонками */
    max-width: 1200px; /* Ограничение ширины */
    margin: 2rem auto; /* Центрирование на странице */
    padding: 0 1rem; /* Отступы по краям */
    align-items: flex-start; /* Выравнивание по верхнему краю */
}

/* Левая колонка - Форма */
.lr_creative_layout_form_column {
    flex: 1 1 500px; /* Растягивается, базовая ширина 500px, может сжиматься */
    min-width: 300px; /* Минимальная ширина */
    /* Можно добавить тень или рамку для выделения */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    /* border: 1px solid #eee; */
    /* padding: 1.5rem; */
    /* border-radius: var(--theme-button-border-radius); */
    background-color: var(--background-color-content); /* Используйте переменные из вашего шаблона */
}

/* Правая колонка - Информация */
.lr_creative_layout_info_column {
    flex: 1 1 400px; /* Растягивается, базовая ширина 400px, может сжиматься */
    min-width: 300px; /* Минимальная ширина */
    padding: 1.5rem;
    /* background-color: #f9f9f9; */ /* Отличный фон */
    /* border-radius: var(--theme-button-border-radius); */
    color: var(--white_text_black); /* Используйте переменные из вашего шаблона */
}

.lr_creative_layout_info_column h2,
.lr_creative_layout_info_column h3 {
    color: var(--theme-base-color); /* Цвет заголовков из вашей темы */
    margin-top: 0;
}

.lr_creative_layout_info_column ul {
    list-style: none;
    padding: 0;
}

.lr_creative_layout_info_column li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start; /* Выравнивание по верхнему краю */
}

.lr_creative_layout_info_column li i {
    color: var(--theme-base-color); /* Цвет иконки */
    margin-right: 0.5rem;
    /* width: 1.2em; */ /* Фиксированная ширина для иконки, если нужно выравнивание текста */
    /* text-align: center; */
    flex-shrink: 0; /* Иконка не сжимается */
}

.lr_info_image_placeholder {
    margin-top: 1.5rem;
    text-align: center; /* Центрирование изображения */
}

/* Адаптивность */
@media (max-width: 768px) {
    .lr_creative_layout_container {
        flex-direction: column; /* Колонки становятся строками на мобильных */
        gap: 1rem;
    }
    .lr_creative_layout_form_column,
    .lr_creative_layout_info_column {
        flex: 1 1 auto; /* Занимают всю ширину */
        min-width: auto;
    }
}

/* --- ВАШИ СУЩЕСТВУЮЩИЕ СТИЛИ --- */
/* Убедитесь, что ваши базовые стили из template.php (или custom.css) также применяются */
/* Если вы убрали подключение custom.css в template.php, добавьте его содержимое сюда или подключите отдельно */

.lr_field_block input[type=text],
.lr_field_block input[type=password],
.lr_field_block input[type=email],
.lr_field_block input[type=tel],
.lr_field_block input[type=date],
.lr_field_block input[type="checkbox"],
.lr_field_block input[type="radio"] {
    color: var(--input_color) !important;
    box-shadow: none;
    border: 1px solid var(--input_border_color) !important;
    height: 44px !important;
    padding: 6px 16px !important;
    background: var(--input_bg_color) !important;
    font-size: 0.9rem;
    border-radius: var(--theme-button-border-radius) !important;
}

.lr_field_block input[type=text]:hover,
.lr_field_block input[type=password]:hover,
.lr_field_block input[type=email]:hover,
.lr_field_block input[type=tel]:hover,
.lr_field_block input[type=date]:hover,
.lr_field_block input[type="checkbox"]:hover,
.lr_field_block input[type="radio"]:hover {
    border: 1px solid var(--input_border_color-hover) !important;
    background: var(--input_bg_color-hover) !important;
}

.lr_field_block input[type=text]:focus,
.lr_field_block input[type=password]:focus,
.lr_field_block input[type=email]:focus,
.lr_field_block input[type=tel]:focus,
.lr_field_block input[type=date]:focus,
.lr_field_block input[type="checkbox"]:focus,
.lr_field_block input[type="radio"]:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .015) inset;
    border-color: #999999;
    background-color: var(--input_bg_color-focus) !important;
}

.lr_field_block label {
    color: var(--white_text_black) !important;
    margin-bottom: 4px !important;
    font-size: calc(1rem - 2px) !important;
    line-height: calc(1em + 6px) !important;
}

.lr_user_text {
    color: var(--white_text_black) !important;
    font-size: calc(1rem - 2px) !important;
    line-height: calc(1em + 6px) !important;
}

section.page-top {
    display: none;
}

.lr_registration_title {
    font-family: var(--theme-font-title-family), Arial, sans-serif !important;
    font-weight: var(--theme-font-title-weight) !important;
    font-size: clamp(1rem + 10px, 3vw, 1rem + 20px) !important;
    line-height: calc(1em + 8px) !important;
    margin-bottom: 1rem; /* Добавлен отступ */
}

#lr_form {
    margin-top: 0; /* Убран верхний отступ, теперь он на контейнере */
    /* padding: 1.5rem; */ /* Добавьте padding внутрь формы, если нужно */
}

.lr_button_register,
.lr_button_register:hover {
    color: var(--button_color_text) !important;
    background-color: var(--theme-base-color) !important;
    border-color: var(--theme-base-color) !important;
    font-size: var(--button-font-size) !important;
    border: 1px solid var(--theme-base-color) !important;
    border-radius: var(--theme-button-border-radius) !important;
    width: 100%;
    padding: 8px 5px;
    font-weight: 500;
}

.lr_checkbox:checked+label .lr_view_checkbox::before {
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    top: 7px;
    animation: checkbox-check 125ms 250ms cubic-bezier(.4, 0, .23, 1) forwards;
}

.lr_checkbox+label .lr_view_checkbox,
.lr_checkbox+label .lr_view_checkbox:hover {
    border-color: var(--theme-base-color) !important;
    background-color: var(--theme-base-color) !important;
    border: 1px solid var(--input_border_color) !important;
    width: 20px;
    height: 20px;
}
/* --- КОНЕЦ ВАШИХ СУЩЕСТВУЮЩИХ СТИЛЕЙ --- */