/* =============================================================
   ФОРМА ПОИСКА ГРУЗОВ
   Контейнер формы, поля ввода, кастомные селекты, автокомплит
   складов, кнопки и подсказки/сообщения об ошибках.
   ============================================================= */

/* --- Контейнер формы поиска --- */
.search-form {
    background-color: #292a2d;
    border: 1px solid #3c4043;
    border-radius: 8px;
    padding: 24px;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    margin-bottom: 24px;
}

/* --- Смысловая категория полей внутри формы --- */
.form-category {
    margin-bottom: 24px;
}
.form-category-title {
    font-size: 16px;
    font-weight: 500;
    color: #8ab4f8;
    margin-bottom: 16px;
    border-bottom: 1px solid #3c4043;
    padding-bottom: 6px;
}

/* --- Адаптивная сетка полей --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.form-group {
    display: flex;
    flex-direction: column;
}

/* --- Подписи и поля ввода --- */
label {
    font-size: 13px;
    color: #9aa0a6;
    margin-bottom: 6px;
    font-weight: 500;
}
input, select {
    background-color: #303134;
    border: 1px solid #5f6368;
    border-radius: 4px;
    padding: 8px 12px;
    color: #e8eaed;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    height: 38px;
}
input:focus, select:focus {
    border-color: #8ab4f8;
}

/* --- Кастомный селект: контейнер и искусственная стрелка --- */
.select-wrapper {
    position: relative;
    width: 100%;
}
/* Очищаем стандартный вид списка во всех браузерах */
.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px; /* Оставляем место для стрелочки справа */
    cursor: pointer;
}
/* Создаём искусственную аккуратную стрелочку «вниз» */
.select-wrapper::after {
    content: "▼";
    font-size: 10px;
    color: #9aa0a6;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Клик проходит сквозь стрелочку прямо в список */
}
select option {
    background-color: #303134;
    color: #e8eaed;
}

/* --- Числовое поле: убираем стрелки-спиннеры --- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* --- Кастомный автокомплит складов: поле + выпадающий список снизу --- */
.autocomplete-container {
    position: relative;
    width: 100%;
}
/* Выпадающий список, открывающийся СНИЗУ под полем */
.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background-color: #303134;
    border: 1px solid #5f6368;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    display: none; /* По умолчанию скрыто */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
/* Отдельная строка (пункт) списка подсказок */
.autocomplete-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #e8eaed;
    transition: background-color 0.15s;
    border-bottom: 1px solid #3c4043;
}
.autocomplete-suggestion-item:last-child {
    border-bottom: none;
}
.autocomplete-suggestion-item:hover {
    background-color: #3c4043;
    color: #8ab4f8;
}

/* --- Подсказки и сообщения об ошибках валидации --- */
/* Полупрозрачная памятка под полем */
.opacity-hint {
    font-size: 11px;
    color: #9aa0a6;
    margin-top: 4px;
    display: block;
    opacity: 0.6;
}
/* Текст ошибки валидации */
.error-message {
    font-size: 12px;
    color: #f28b82;
    margin-top: 4px;
    display: none;
}
/* Красная рамка для невалидного поля */
.invalid-field {
    border-color: #f28b82 !important;
}

/* --- Кнопка отправки формы --- */
.submit-btn-container {
    display: flex;
    justify-content: flex-end;
}
.submit-btn {
    background-color: #8ab4f8;
    color: #202124;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    min-width: 200px;
}
.submit-btn:hover {
    background-color: #9ec2ff;
}
/* Заблокированная кнопка (например, при анти-спам блокировке) — серая и неактивная */
.submit-btn:disabled {
    background-color: #5f6368;
    color: #9aa0a6;
    cursor: default;
}
/* Ховер не должен подсвечивать заблокированную кнопку */
.submit-btn:disabled:hover {
    background-color: #5f6368;
}

/* --- Кнопка привязки Ozon TMS (в подвале сайдбара) --- */
.ozon-btn {
    width: 100%;
    height: 40px;
    background-color: #8ab4f8;
    color: #202124;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.ozon-btn:hover {
    background-color: #9ec2ff;
}
.ozon-btn:active {
    transform: scale(0.98); /* Эффект лёгкого нажатия */
}