/* Стили для заголовка формы */
.form-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 0; /* Убираем нижний отступ */
    display: block !important; /* Гарантируем, что это блочный элемент */
    text-align: left !important; /* Выравнивание по левому краю */
}

.form-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 5px; /* Небольшой отступ сверху от заголовка */
    margin-bottom: 20px;
    display: block !important; /* Гарантируем, что это блочный элемент */
    text-align: left !important; /* Выравнивание по левому краю */
}

/* Стили для сообщений */
.form-message-container {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
}

.form-success-message {
    background-color: #28a745;
    color: #ffffff;
    border: 1px solid #218838;
    padding: 35px;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 36px;
    line-height: 1.5;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.form-success-message .secondary-message {
    display: block;
    margin-top: 15px;
    font-size: 18px;
    font-weight: 400;
    color: #ffffaa;
    text-shadow: none;
}

.form-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
}

/* Стили для кнопок */
.callback-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2c3e50 !important; /* Темно-синий, как у капчи */
    color: white !important;
    text-align: center;
    text-decoration: none;
    border-radius: 8px !important; /* Более закругленные и принудительно */
    border: none !important; /* Убираем бордер */
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Стиль для неактивной кнопки */
.callback-link:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    box-shadow: none;
    transform: none;
}

.callback-link:not(:disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    filter: brightness(1.1);
}

.callback-link:not(:disabled):active {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

/* Эффект пульсации при нажатии */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.callback-link:not(:disabled):focus {
    outline: none;
    animation: pulse 0.5s ease-in-out;
}

/* Добавляем эффект волны при нажатии на кнопку отправки */
.callback-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.callback-link:not(:disabled):active::after {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0) translate(-50%, -50%);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20) translate(-50%, -50%);
        opacity: 0;
    }
}

/* Стили для полей формы */
.form-control {
    border-radius: 8px !important; /* Более закругленные и принудительно */
    border: 1px solid #7b68ee !important; /* Темная тонкая рамка, как у капчи и принудительно */
    padding: 10px 15px;
    font-size: 16px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%; /* Гарантируем 100% ширину внутри контейнера */
    -webkit-appearance: none; /* Убираем стандартные стили для select в WebKit */
    -moz-appearance: none;    /* Убираем стандартные стили для select в Firefox */
    appearance: none;         /* Убираем стандартные стили для select */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px; /* Дополнительный отступ справа для стрелки */
    box-sizing: border-box;
}

/* Стили для плейсхолдеров (подсказок) */
.form-control::placeholder {
    color: #999999 !important; /* Более заметный серый цвет */
    opacity: 1; /* Для Firefox */
}
.form-control:-ms-input-placeholder { /* Для Internet Explorer */
    color: #999999 !important;
}
.form-control::-ms-input-placeholder { /* Для Edge */
    color: #999999 !important;
}

.form-control:focus {
    border-color: #4285f4 !important; /* Принудительно */
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25) !important; /* Принудительно */
}

/* Стили для контейнера формы */
.container {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #e0f2f7; /* Голубой фон */
    border-radius: 8px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Стиль для неактивной кнопки */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #cccccc !important;
    border-color: #cccccc !important;
}

/* Стили для выравнивания в колонки */
.form-row-three-columns {
    display: flex;
    gap: 15px;
    margin-bottom: 0.8rem; /* Увеличил отступ между строками полей */
    width: 100%; /* Убедимся, что строка занимает всю доступную ширину */
    box-sizing: border-box;
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку при нехватке места */
}

.form-row-three-columns > .about_input-cntr {
    flex: 1 1 calc(33.333% - 10px); /* Три колонки, учитывая gap */
    max-width: calc(33.333% - 10px); /* Ограничиваем максимальную ширину */
    box-sizing: border-box;
}

.form-row-two-columns {
    display: flex;
    gap: 15px;
    margin-bottom: 1rem;
}

.form-row-two-columns > div {
    flex: 1;
}

.form-row-two-columns.align-items-center {
    align-items: center;
}

/* Корректировка отступа для поля "Сообщение или вопрос" */
.mb-3.about_textarea-cntr {
    margin-top: 0 !important; /* Убираем верхний отступ для максимального приближения */
    margin-bottom: 0.8rem !important; /* Сохраняем отступ снизу, как у других полей */
}

/* Стили для кнопки "ОТПРАВИТЬ ЗАПРОС" */
#zakaz-submit-button {
    padding: 15px 35px !important; /* Увеличил отступы еще больше */
    min-width: 250px; /* Увеличил минимальную ширину */
    font-size: 18px !important; /* Увеличил размер шрифта */
}

/* Стили для контейнера кнопок и капчи внизу формы */
.form-bottom-row {
    display: flex;
    justify-content: space-between; /* Распределяет элементы по краям */
    align-items: flex-start; /* Выравнивает элементы по верху */
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
    gap: 15px; /* Отступ между элементами */
}

.form-action-row {
    display: flex;
    flex-direction: column; /* Элементы внутри будут располагаться в колонку */
    gap: 10px; /* Отступ между кнопкой выбора файла и кнопкой отправки */
    flex-grow: 1; /* Позволяет занимать доступное пространство */
    max-width: 50%; /* Ограничиваем максимальную ширину для корректного размещения с капчей */
}

.about_fb-recaptcha-cntr {
    flex-grow: 1; /* Позволяет капче занимать доступное пространство */
    max-width: 45%; /* Ограничиваем максимальную ширину для корректного размещения с кнопками */
}

/* Медиа-запросы для адаптивности */
@media (max-width: 992px) { /* Для двухколоночного режима на средних экранах */
    .form-row-three-columns > .about_input-cntr {
        flex: 1 1 calc(50% - 7.5px) !important; /* По два элемента в ряд, одинакового размера */
        max-width: calc(50% - 7.5px) !important; /* Ограничиваем максимальную ширину */
    }
    /* Удаляем специальное правило для nth-child(3) */
    /* .form-row-three-columns > .about_input-cntr:nth-child(3) { */
    /*     flex: 1 1 100% !important; */
    /*     max-width: 100% !important; */
    /* } */
    .form-bottom-row {
        flex-direction: column; /* На маленьких экранах элементы будут в колонку */
        align-items: center; /* Центрируем по горизонтали */
    }
    .form-action-row,
    .about_fb-recaptcha-cntr {
        max-width: 100%; /* Занимают всю ширину */
        width: 100%;
    }
}

@media (max-width: 768px) { /* Для двухколоночного режима на маленьких экранах */
    .form-row-three-columns,
    .form-row-two-columns { /* Применяем к обоим типам рядов для согласованности */
        flex-direction: row; /* Теперь элементы будут в ряд */
        flex-wrap: wrap;     /* Позволяем перенос элементов */
        gap: 15px;           /* Отступ между элементами */
        margin-bottom: 0 !important;    /* Убираем нижний отступ у контейнера ряда */
    }
    .form-row-three-columns > .about_input-cntr,
    .form-row-two-columns > div { /* Применяем к дочерним элементам обоих типов рядов */
        width: calc(50% - 7.5px) !important;  /* Два элемента в ряд */
        max-width: calc(50% - 7.5px) !important;
        margin-bottom: 0.8rem; /* Отступ между полями в колонке */
    }
    /* Удаляем специальное правило для nth-child(3) */
    /* .form-row-three-columns > .about_input-cntr:nth-child(3) { */
    /*     width: 100% !important; */
    /*     max-width: 100% !important; */
    /*     margin-bottom: 0.8rem; */
    /* } */
    /* Убираем нижний отступ у последнего элемента в ряду, чтобы уменьшить пробел */
    .form-row-three-columns > .about_input-cntr:last-child,
    .form-row-two-columns > div:last-child {
        margin-bottom: 0 !important;
    }
    /* Сдвигаем поле "Сообщение или вопрос" максимально вверх */
    .mb-3.about_textarea-cntr {
        margin-top: 0 !important; /* Гарантируем отсутствие верхнего отступа */
        margin-bottom: 0.8rem !important; /* Сохраняем отступ снизу, как у других полей */
    }
}

/* Стили для кнопки "ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ К МАКЕТАМ" */
.technical-requirements-box {
    display: flex !important; /* Убедимся, что flexbox работает */
    align-items: center !important;
    border: 1px solid #E74C3C !important;
    border-radius: 8px !important;
    padding: 10px 15px !important; /* Уменьшаем padding */
    text-decoration: none !important;
    color: #333 !important;
    background-color: #FEEEEE !important;
    min-width: 250px !important;
    box-sizing: border-box !important;
    position: relative !important;
    text-align: left !important;
    justify-content: center !important; /* Центрируем содержимое */
    flex-wrap: wrap !important; /* Позволяем перенос содержимого */
}

.technical-requirements-box strong {
    display: block !important; /* Убедимся, что текст переносится */
    text-align: center !important; /* Центрируем текст */
}

.technical-requirements-box::before {
    content: '';
    display: block !important; /* Используем block для отдельной строки */
    width: 24px !important;
    height: 24px !important;
    background-image: url("/assets/components/img/marks/znakSvg.svg") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    z-index: 1 !important;
    margin-bottom: 5px !important; /* Отступ под иконкой */
}

/* Стили для блока "Технические требования К макетам" */
#zakaz-form .technical-requirements-box {
    display: flex; /* Keep flex for vertical alignment of text and pseudo-element */
    align-items: center; /* Center items vertically */
    border: 1px solid #E74C3C; /* Красная рамка */
    border-radius: 8px;
    padding: 10px 55px 10px 48px; /* Adjusted padding to match footer appearance with icon */
    text-decoration: none;
    color: #333;
    background-color: #FEEEEE; /* Очень светло-красный фон */
    min-width: 250px;
    box-sizing: border-box;
    position: relative; /* Needed for ::before positioning */
    text-align: left; /* Align text to the left */
    justify-content: flex-start; /* Align content to the start */
}

#zakaz-form .technical-requirements-box::before {
    content: '';
    display: inline-block; /* Or 'block' depending on positioning, inline-block is better for text flow */
    position: absolute;
    left: 18px; /* Position the icon inside the padding */
    top: 50%;
    transform: translateY(-50%);
    width: 24px; /* Icon width */
    height: 24px; /* Icon height */
    background-image: url("/assets/components/img/marks/znakSvg.svg");
    background-repeat: no-repeat;
    background-size: contain; /* Scale to fit */
    background-position: center;
    z-index: 1; /* Ensure icon is above text if needed */
}

/* Remove old styles for .technical-requirements-icon and .technical-requirements-text */
/* These were for the <img> and <p> tags that have been removed from HTML */

@media (max-width: 768px) {
    #zakaz-form .technical-requirements-box {
        flex-direction: row; /* On mobile, icon and text stay in row */
        justify-content: flex-start; /* Align to start on mobile as well */
        align-items: center;
        padding: 10px 20px 10px 48px; /* Adjust padding for mobile if needed */
        text-align: left;
    }
    #zakaz-form .technical-requirements-box::before {
        left: 18px; /* Keep icon position consistent */
    }
    /* Removed old .technical-requirements-icon mobile styles */
}