/*
 * SD Forms - структурный CSS фронта.
 * Только сетка, состояния и вспомогательные элементы.
 * Цвета, шрифты, радиусы и отступы инпутов и кнопки - только от темы.
 */

/* ─── Сетка полей ─────────────────────────── */

.sdf-form__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sdf-gap-y, 1rem) var(--sdf-gap-x, 1rem);
}

.sdf-form__group {
    flex: 0 0 100%;
    min-width: 0;
}

.sdf-form__group--w25 {
    flex: 0 0 calc(25% - var(--sdf-gap-x, 1rem) * 3 / 4);
}

.sdf-form__group--w33 {
    flex: 0 0 calc(33.333% - var(--sdf-gap-x, 1rem) * 2 / 3);
}

.sdf-form__group--w50 {
    flex: 0 0 calc(50% - var(--sdf-gap-x, 1rem) / 2);
}

/* ─── CSS-переменные стиля (задаются на .sdf-form) ─── */

.sdf-form__submit {
    margin-top: 0.5rem;
    background-color: var(--sdf-btn-bg, inherit);
    color: var(--sdf-btn-fg, inherit);
    border-radius: var(--sdf-radius-btn, inherit);
}

.sdf-form__input,
.sdf-form__textarea,
.sdf-form__select {
    border-radius: var(--sdf-radius-field, inherit);
}

/* ─── Режим inline (поля + кнопка в одну строку) ─── */

/* Форма становится flex-контейнером, кнопка встаёт рядом с полями */
.sdf-form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sdf-gap-y, 1rem) var(--sdf-gap-x, 1rem);
}

/* display:contents убирает бокс-контейнер полей — группы становятся прямыми flex-детьми формы */
.sdf-form--inline .sdf-form__fields {
    display: contents;
}

.sdf-form--inline .sdf-form__group {
    flex: 1 1 180px;
    min-width: 0;
}

.sdf-form--inline .sdf-form__group--acceptance {
    flex: 0 0 100%;
    order: 2;
}

.sdf-form--inline .sdf-form__submit {
    flex-shrink: 0;
    margin-top: 0;
    order: 1;
}

/* ─── Label и ошибка ─────────────────────── */

.sdf-form__label {
    display: block;
    margin-bottom: 0.25rem;
}

.sdf-form__required {
    opacity: 0.6;
}

.sdf-form__error {
    display: block;
    min-height: 1.25em;
    margin-bottom: 0.25rem;
    font-size: 0.875em;
    line-height: 1.25;
}

.sdf-form__error:empty {
    visibility: hidden;
}

/* ─── Инпуты занимают всю ширину группы ─── */

.sdf-form__input,
.sdf-form__textarea,
.sdf-form__select,
.sdf-form__file {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.sdf-form__textarea {
    resize: vertical;
    min-height: 6rem;
}

/* ─── Чекбоксы и acceptance ─────────────── */

.sdf-form__checkbox-group {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sdf-form__checkbox-label,
.sdf-form__acceptance-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.sdf-form__checkbox,
.sdf-form__acceptance {
    flex-shrink: 0;
    margin-top: 0.15em;
}

.sdf-form__acceptance-text {
    flex: 1;
}

.sdf-form__acceptance-label a {
    color: var(--accent-ink, #7A6346);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.sdf-form__acceptance-label a:hover {
    color: var(--accent, #B89B7B);
}

/* ─── Honeypot ───────────────────────────── */

/* Скрыт визуально, но не display:none - чтобы боты его видели */
.sdf-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ─── SmartCaptcha виджет ───────────────── */

.sdf-form__captcha {
    margin-top: 0.5rem;
}

/* ─── Состояния формы ────────────────────── */

.sdf-form--loading .sdf-form__submit {
    opacity: 0.7;
    pointer-events: none;
}

/* ─── Блок статуса (успех / ошибка) ─────── */

.sdf-form__status {
    margin-top: 1rem;
}

.sdf-form__status:empty {
    display: none;
}

/* ─── Адаптив ────────────────────────────── */

@media (max-width: 575px) {
    .sdf-form__group--w25,
    .sdf-form__group--w33,
    .sdf-form__group--w50 {
        flex: 0 0 100%;
    }

    .sdf-form--inline .sdf-form__group {
        flex: 0 0 100%;
    }

    .sdf-form--inline .sdf-form__group--acceptance {
        flex-basis: 100%;
    }
}