/**
 * RSVP — анкета гостя. Форма Contact Form 7 в стеклянной карточке.
 *
 * Значения из макета Figma (desktop 1440 / mobile 402).
 * Разметку формы генерирует CF7 — стилизуются её классы (.wpcf7-*).
 * Override-only относительно base.css.
 *
 * @package Wedding
 */

.rsvp {
    position: relative;
    margin-top: calc(108 / var(--vw-base) * 100vw);
}

/* --- Нижнее фоновое фото страницы (узлы 316:251 / 59:94) --- */

/*
 * Задаётся через top/bottom, а не height: секция растёт вместе с текстами, и фон должен
 * тянуться за ней — иначе он обрывается белой полосой, не доходя до карточки countdown.
 * В макете фон начинается на 205 выше секции и кончается на 225 ниже неё; этого хватает,
 * чтобы заехать под карточку дресскода сверху и под карточку отсчёта снизу (зазор 108).
 */
.rsvp__bg {
    position: absolute;
    top: calc(-205 / var(--vw-base) * 100vw);
    bottom: calc(-225 / var(--vw-base) * 100vw);
    left: 0;
    z-index: -1;
    width: 100%;
}

.rsvp__bg-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.rsvp__bg-img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

/*
 * Ширина по содержимому: блик рисуется градиентом по ширине блока, и у растянутого
 * на всю секцию заголовка он пробегает по буквам слишком быстро.
 */
.rsvp__title {
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    font-size: var(--fs-40);
    line-height: var(--lh-125);
    text-align: center;
}

.rsvp__text {
    width: calc(800 / var(--vw-base) * 100vw);
    margin-top: var(--space-10);
    margin-right: auto;
    margin-left: auto;
    font-size: var(--fs-16);
    line-height: var(--lh-150);
    text-align: center;
}

.rsvp__text p:last-child {
    margin-bottom: 0;
}

/* --- Стеклянная карточка формы (узел 316:294) --- */
.rsvp__card {
    width: calc(885 / var(--vw-base) * 100vw);
    margin-top: calc(21 / var(--vw-base) * 100vw);
    margin-right: auto;
    margin-left: auto;
    padding: calc(56 / var(--vw-base) * 100vw) calc(64 / var(--vw-base) * 100vw) calc(55 / var(--vw-base) * 100vw) calc(124 / var(--vw-base) * 100vw);
    border-radius: var(--radius-40);
    background: rgba(255, 255, 255, 0.49);
    backdrop-filter: blur(calc(2.55 / var(--vw-base) * 100vw));
}

/* --- Форма: две колонки --- */
.rsvp .wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.rsvp .hidden-fields-container {
    display: none;
}

/* В макете левая колонка начинается ниже правой (2743 против 2672). */
.rsvp__col.-left {
    margin-top: calc(71 / var(--vw-base) * 100vw);
}

.rsvp__col.-right {
    width: calc(338 / var(--vw-base) * 100vw);
}

/* --- Левая колонка: присутствие --- */
.rsvp__label {
    margin-bottom: 0;
    font-size: var(--fs-20);
    line-height: var(--lh-125);
}

.rsvp .wpcf7-radio {
    display: flex;
    flex-direction: column;
    margin-top: calc(33.75 / var(--vw-base) * 100vw);
}

.rsvp .wpcf7-list-item + .wpcf7-list-item {
    margin-top: calc(32.5 / var(--vw-base) * 100vw);
}

.rsvp .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: calc(17 / var(--vw-base) * 100vw);
    cursor: pointer;
}

.rsvp .wpcf7-list-item-label {
    font-size: var(--fs-18);
    line-height: var(--lh-125);
}

/* Нативный радио перерисован: круг 18 с обводкой, отметка — точка 12. */
.rsvp input[type="radio"] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: calc(18 / var(--vw-base) * 100vw);
    height: calc(18 / var(--vw-base) * 100vw);
    margin: 0;
    border: 1px solid var(--color-text-muted);
    border-radius: 50%;
    background: var(--color-bg);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.rsvp input[type="radio"]::before {
    width: calc(12 / var(--vw-base) * 100vw);
    height: calc(12 / var(--vw-base) * 100vw);
    border-radius: 50%;
    content: "";
    background: transparent;
    transition: background-color var(--transition-base);
}

.rsvp input[type="radio"]:checked::before {
    background: var(--color-text);
}

.rsvp input[type="radio"]:hover,
.rsvp input[type="radio"]:focus-visible {
    border-color: var(--color-accent);
}

/* --- Правая колонка: поля и кнопка --- */
.rsvp .wpcf7-form-control-wrap {
    display: block;
}

.rsvp .wpcf7-text,
.rsvp .wpcf7-textarea {
    display: block;
    width: 100%;
    padding: 0 calc(15.2 / var(--vw-base) * 100vw);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-20);
    font-size: var(--fs-16);
    line-height: var(--lh-125);
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color var(--transition-base);
}

.rsvp .wpcf7-text {
    height: calc(55 / var(--vw-base) * 100vw);
}

.rsvp .wpcf7-textarea {
    height: calc(175 / var(--vw-base) * 100vw);
    padding-top: calc(17 / var(--vw-base) * 100vw);
    padding-bottom: calc(17 / var(--vw-base) * 100vw);
    resize: vertical;
}

.rsvp .wpcf7-form-control-wrap[data-name="rsvp-message"] {
    margin-top: calc(16 / var(--vw-base) * 100vw);
}

.rsvp .wpcf7-text::placeholder,
.rsvp .wpcf7-textarea::placeholder {
    color: var(--color-placeholder);
    opacity: 1;
}

.rsvp .wpcf7-text:hover,
.rsvp .wpcf7-textarea:hover,
.rsvp .wpcf7-text:focus-visible,
.rsvp .wpcf7-textarea:focus-visible {
    border-color: var(--color-accent);
    outline: none;
}

/* Кнопка тёмная: hover — фон акцентный, текст остаётся светлым (rules-interactive §4). */
.rsvp__submit {
    display: block;
    width: 100%;
    height: calc(55 / var(--vw-base) * 100vw);
    margin-top: calc(30 / var(--vw-base) * 100vw);
    padding: 0;
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-200);
    font-size: var(--fs-16);
    line-height: var(--lh-125);
    text-align: center;
    color: var(--color-field-border);
    background: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.rsvp__submit:hover,
.rsvp__submit:focus-visible {
    color: var(--color-bg);
    background: var(--color-accent);
}

/* --- Служебные блоки CF7 (в макете не нарисованы) --- */
.rsvp .wpcf7-spinner {
	position: absolute;
    margin: 0 auto;
}

.rsvp .wpcf7-response-output {
    width: 100%;
    margin: var(--space-20) 0 0;
    padding: var(--space-10) var(--space-20);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-20);
    font-size: var(--fs-16);
    line-height: var(--lh-125);
    text-align: center;
    background: var(--color-bg);
}

.rsvp .wpcf7-not-valid-tip {
    margin-top: var(--space-5);
    font-size: var(--fs-14);
    line-height: var(--lh-125);
    color: var(--color-text-muted);
}

/* --- Мобильная версия: карточки нет, одна колонка --- */
@media (max-width: 767px) {
    .rsvp {
        margin-top: calc(65 / var(--vw-base) * 100vw);
    }

    .rsvp__bg {
        top: calc(-309 / var(--vw-base) * 100vw);
        bottom: calc(-354 / var(--vw-base) * 100vw);
    }

    .rsvp__title {
        font-size: var(--fs-32);
    }

    .rsvp__text {
        width: calc(338 / var(--vw-base) * 100vw);
        font-size: var(--fs-14);
    }

    /* В мобильном макете формы нет карточки — только колонка полей шириной 338. */
    .rsvp__card {
        width: calc(338 / var(--vw-base) * 100vw);
        margin-top: calc(22.5 / var(--vw-base) * 100vw);
        padding: 0;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
    }

    .rsvp .wpcf7-form {
        flex-direction: column;
    }

    .rsvp__col.-left {
        margin-top: 0;
    }

    .rsvp__col.-right {
        width: 100%;
        /* 34 — зазор от радио до убранной подписи «Предпочтения по алкоголю» (решение пользователя). */
        margin-top: calc(34 / var(--vw-base) * 100vw);
    }

    .rsvp__label {
        font-size: var(--fs-14);
    }

    .rsvp .wpcf7-radio {
        margin-top: calc(24.5 / var(--vw-base) * 100vw);
    }

    .rsvp .wpcf7-list-item + .wpcf7-list-item {
        margin-top: calc(26 / var(--vw-base) * 100vw);
    }

    .rsvp .wpcf7-list-item-label {
        font-size: var(--fs-14);
    }
}