/**
 * WebDproc — единый вид полей на публичном сайте и auth (layouts.app / base).
 *
 * Разметка:
 *   <form class="wd-form"> … </form>
 *   <div class="wd-form__group">
 *     <label class="wd-form__label" for="id">…</label>   <!-- опционально -->
 *     <input class="wd-form__control" id="id" …>
 *     <small class="wd-form__hint">…</small>             <!-- опционально -->
 *     @error … <span class="wd-form__error" role="alert">…</span>
 *   </div>
 *   <div class="wd-form__alert">…</div>   <!-- сводка ошибок -->
 *   <div class="wd-form__actions">… кнопки wd-btn …</div>
 */

.wd-form {
    margin: 0;
}

.wd-form__group {
    margin-bottom: 1rem;
}

.wd-form__group:last-child {
    margin-bottom: 0;
}

.wd-form--compact .wd-form__group {
    margin-bottom: 0.75rem;
}

.wd-form__label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--wd-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wd-color-text);
}

.wd-form__control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--wd-form-control-py) var(--wd-form-control-px);
    font-family: var(--wd-font-sans);
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid var(--wd-color-border, #dee2e6);
    border-radius: var(--wd-form-radius);
    background-color: var(--wd-form-bg, #fff);
    color: var(--wd-color-text, #212529);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.wd-form__control:focus {
    outline: none;
    border-color: var(--wd-color-primary);
    box-shadow: 0 0 0 0.2rem var(--wd-color-focus);
}

.wd-form__control::placeholder {
    color: var(--wd-color-text-muted);
}

.wd-form__control:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

textarea.wd-form__control {
    min-height: 120px;
    resize: vertical;
}

select.wd-form__control {
    cursor: pointer;
}

.wd-form__hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--wd-color-text-muted);
}

.wd-form__error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wd-btn-danger-bg);
}

.wd-form__alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border-radius: var(--wd-form-radius);
    border: 1px solid rgba(220, 53, 69, 0.35);
    background: rgba(220, 53, 69, 0.08);
    color: var(--wd-btn-danger-bg);
}

.wd-form__alert ul {
    margin: 0;
    padding-left: 1.25rem;
}

.wd-form__actions {
    margin-top: 1rem;
}

.wd-form__actions:first-child {
    margin-top: 0;
}

.wd-form__control.is-invalid {
    border-color: var(--wd-btn-danger-bg);
}

.wd-form .invalid-feedback {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--wd-btn-danger-bg);
}

/* Поле пароля с иконкой глаза (custom.css — .password-with-eye) */
.wd-form .password-with-eye .wd-form__control {
    padding-right: 2.75rem;
}

/* Мобильные: зоны касания ~44px, 16px у полей — меньше авто-зума в iOS при фокусе */
@media (max-width: 767.98px) {
    .wd-form__label {
        font-size: 0.9375rem;
        margin-bottom: 0.4rem;
    }

    form.wd-form .wd-form__control:not(textarea) {
        font-size: 16px;
        min-height: 44px;
        padding-top: max(var(--wd-form-control-py), 0.65rem);
        padding-bottom: max(var(--wd-form-control-py), 0.65rem);
    }

    form.wd-form textarea.wd-form__control {
        font-size: 16px;
        min-height: 128px;
    }

    form.wd-form select.wd-form__control {
        min-height: 44px;
    }

    .wd-form__group {
        margin-bottom: 1.125rem;
    }
}