/**
 * Базовые стили форм (inputs, selects, textarea)
 * Файл: /wp-content/themes/smc/assets/css/forms.css
 * Версия файла: 1.0.0
 * Author: NUVREN
 *
 * Назначение:
 * - Единый вид всех полей форм на сайте;
 * - Стили для .smc-input, .smc-select, .smc-textarea;
 * - Состояния: normal, focus, disabled, error;
 * - Checkbox / radio и вспомогательные сообщения.
 */

/* ============================================================
   1. БАЗОВЫЕ ПОЛЯ: INPUT / SELECT / TEXTAREA
   ============================================================ */

.smc-input,
.smc-select,
.smc-textarea {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;

    border-radius: var(--smc-radius-md);
    border: 1px solid var(--smc-color-border);

    background-color: #ffffff;
    color: var(--smc-color-text);

    font-size: 0.95rem;
    line-height: 1.4;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease;
}

/* Textarea */
.smc-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Состояние hover */
.smc-input:hover,
.smc-select:hover,
.smc-textarea:hover {
    border-color: rgba(148, 163, 184, 0.9);
}

/* Состояние focus */
.smc-input:focus,
.smc-select:focus,
.smc-textarea:focus {
    outline: none;
    border-color: var(--smc-color-primary);
    box-shadow: 0 0 0 1px rgba(54, 184, 253, 0.35);
}

/* Disabled / readonly */
.smc-input:disabled,
.smc-select:disabled,
.smc-textarea:disabled,
.smc-input[readonly],
.smc-select[readonly],
.smc-textarea[readonly] {
    background-color: #f8fafc;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Placeholder */
.smc-input::placeholder,
.smc-select::placeholder,
.smc-textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* ============================================================
   2. СТИЛИ ОШИБОК И ВАЛИДАЦИИ
   ============================================================ */

/* Обёртка поля с ошибкой (добавляется классом к .smc-form-row) */
.smc-form-row--error .smc-input,
.smc-form-row--error .smc-select,
.smc-form-row--error .smc-textarea {
    border-color: #f97373;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.4);
}

.smc-form-row--error .smc-form-label {
    color: #b91c1c;
}

/* Текст ошибки под полем */
.smc-field-error {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: #b91c1c;
}

/* Текст-подсказка под полем */
.smc-field-hint {
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--smc-color-text-muted);
}

/* Общий статус формы (успех / ошибка) */
.smc-form-status {
    font-size: 0.9rem;
}

.smc-form-status--success {
    color: #166534;
}

.smc-form-status--error {
    color: #b91c1c;
}

/* ============================================================
   3. CHECKBOX / RADIO
   ============================================================ */

.smc-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.92rem;
}

.smc-check-row input[type="checkbox"],
.smc-check-row input[type="radio"] {
    margin-top: 0.2rem;
}

.smc-check-label {
    cursor: pointer;
}

/* Маленькая подсказка под групповыми чекбоксами */
.smc-check-note {
    font-size: 0.82rem;
    color: var(--smc-color-text-muted);
    margin-top: 0.25rem;
}

/* ============================================================
   4. INLINE-ПОЛЯ В ОДНОЙ СТРОКЕ
   ============================================================ */

.smc-form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
}

/* ============================================================
   5. КНОПКИ ОТПРАВКИ ВНУТРИ ФОРМЫ
   ============================================================ */

.smc-form-actions {
    margin-top: 1.2rem;
}

/* При необходимости растягиваем кнопку на 100% */
.smc-form-actions .smc-btn-full {
    width: 100%;
}

/* ============================================================
   6. MOBILE ТОНКАЯ ДОРАБОТКА
   ============================================================ */

@media (max-width: 480px) {
    .smc-input,
    .smc-select,
    .smc-textarea {
        font-size: 0.94rem;
        padding: 0.55rem 0.7rem;
    }

    .smc-form-inline {
        align-items: flex-start;
    }
}