/**
 * WedDeb RSVP Widget - Standalone CSS
 * Adapted from WordPress plugin for universal HTML embedding
 */

/* ===== CSS Variables (with fallbacks) ===== */
:root {
    --color-scheme-1--text: #353F53;
    --color-scheme-1--accent: #252C3E;
    --_primitives---colors--light: #f5f7fa;
    --_primitives---colors--brown: #252C3E;
    --_primitives---colors--white: #f5f5f5;
}

/* ===== Basic utility classes ===== */
.weddeb-hidden {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

/* Honeypot field - invisible to humans, visible to bots */
#weddeb-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    z-index: -1000 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ===== Spinner animation ===== */
@keyframes weddeb-spin {
    to {
        transform: rotate(360deg);
    }
}

.weddeb-inline-loader {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: middle;
    border-radius: 50%;
    border: 2px solid var(--color-scheme-1--accent, #252C3E);
    border-top-color: transparent;
    animation: weddeb-spin 0.8s linear infinite;
    box-shadow: none !important;
}

/* ===== Group header and info ===== */
#group-header {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    font-size: 18px !important;
    line-height: 25px !important;
    color: var(--_primitives---colors--brown) !important;
    text-align: center !important;
    padding: 0 !important;
    display: none;
}

#group-info {
    box-sizing: border-box !important;
    margin: 0px 32px 16px !important;
    padding: 0 !important;
    color: var(--color-scheme-1--text, #2c3e50) !important;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    display: none;
}

/* ===== Core RSVP form container ===== */
#weddeb-rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Inputs, select, textarea visual style ===== */
#weddeb-rsvp-form input[type="text"],
#weddeb-rsvp-form select,
#weddeb-rsvp-form textarea {
    box-sizing: border-box;
    width: 100%;
    border-radius: 0;
    background: transparent;
    border: 2px solid #e4e4e7;
    color: var(--color-scheme-1--text, #2c3e50);
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 16px;
    line-height: 25px;
    padding: 20px 14px 0;
}

#weddeb-rsvp-form input::placeholder,
#weddeb-rsvp-form textarea::placeholder {
    color: var(--color-scheme-1--text, #2c3e50);
    opacity: 0.6;
}

#weddeb-rsvp-form input[type="text"],
#weddeb-rsvp-form select {
    height: 66px;
}

#weddeb-rsvp-form textarea {
    min-height: 90px;
    padding-top: 32px;
    padding-bottom: 14px;
    resize: vertical;
    line-height: 15px;
}

/* ===== Floating labels ===== */
#weddeb-rsvp-form label[for],
#weddeb-rsvp-form #guest-count > label,
#weddeb-rsvp-form #rsvp-message-row > label {
    position: absolute;
    top: 10px;
    left: 48px;
    z-index: 3;
    pointer-events: none;
    color: #7b7b81;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    max-width: calc(100% - 52px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Readonly guest name: pull floating label left only when next input is readonly */
#weddeb-rsvp-form #rows-wrap .rsvp-row label[for]:has(+ input[readonly]) {
    left: 45px;
}

/* ===== Container padding for sections ===== */
#weddeb-rsvp-form p,
#weddeb-rsvp-form #attend-choice,
#weddeb-rsvp-form #guest-count,
#weddeb-rsvp-form #rows-wrap .rsvp-row,
#weddeb-rsvp-form #rsvp-message-row {
    position: relative;
    padding: 0 32px;
    margin: 0;
}

/* ===== Radio group: attend choice (Asistiré / No asistiré) ===== */
#weddeb-rsvp-form #attend-choice[hidden],
#weddeb-rsvp-form #attend-choice[aria-hidden="true"],
#weddeb-rsvp-form #attend-choice.hidden,
#weddeb-rsvp-form #attend-choice.is-hidden {
    display: none !important;
}

#weddeb-rsvp-form #attend-choice:not([hidden]):not([aria-hidden="true"]):not(.hidden):not(.is-hidden):not([style*="display:none"]):not([style*="display: none"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* seamless pair seam like segmented control */
}

#weddeb-rsvp-form #attend-choice label {
    display: inline-flex;
    align-items: center;
    color: var(--color-scheme-1--text, #2c3e50);
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

/* Hide native radios and style labels as pills for attend-choice */
#weddeb-rsvp-form #attend-choice label > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 7px 12px;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: var(--color-scheme-1--text);
    background: var(--_primitives---opacity--transparent);
    border: 1.5px solid var(--color-scheme-1--border);
    cursor: pointer;
    user-select: none;
    margin: 0;
    gap: 0;
}

#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]):first-of-type {
    border-right: 0;
}

#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]) + label:has(> input[type="radio"]) {
    margin-left: 0;
}

#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]:checked) {
    background: var(--color-scheme-1--accent);
    color: var(--_primitives---colors--white);
}

#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]:focus-visible) {
    outline: 2px solid #9aa9c0;
    outline-offset: 2px;
}

/* ===== Rows of guest names ===== */
#weddeb-rsvp-form #rows-wrap[hidden],
#weddeb-rsvp-form #rows-wrap[aria-hidden="true"],
#weddeb-rsvp-form #rows-wrap.hidden,
#weddeb-rsvp-form #rows-wrap.is-hidden {
    display: none !important;
}

#weddeb-rsvp-form #rows-wrap:not([hidden]):not([aria-hidden="true"]):not(.hidden):not(.is-hidden):not([style*="display:none"]):not([style*="display: none"]) {
    display: grid;
    gap: 14px;
}

/* Named rows layout: name on left, radios on right */
#weddeb-rsvp-form #rows-wrap .rsvp-row {
    display: flex;
    align-items: center;
    gap: 0;
}

#weddeb-rsvp-form #rows-wrap .rsvp-row .rsvp-name {
    color: var(--color-scheme-1--text, #2c3e50);
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    margin-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#weddeb-rsvp-form #rows-wrap .rsvp-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7b7b81;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

/* Push radios to the right; space between options */
#weddeb-rsvp-form #rows-wrap .rsvp-row label:first-of-type {
    margin-left: auto;
}

#weddeb-rsvp-form #rows-wrap .rsvp-row label + label {
    margin-left: 20px;
}

/* Segmented control appearance for radio options inside each row */
#weddeb-rsvp-form #rows-wrap .rsvp-row label > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* Base chip styles for the two labels that contain radios */
#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 7px 12px;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: var(--color-scheme-1--text, #2c3e50);
    background: #fff;
    border: 1.5px solid var(--_primitives---colors--light, #f5f7fa);
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* Tighten pair seam and round outer corners */
#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]):first-of-type {
    border-right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]) + label:has(> input[type="radio"]) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Checked and focus states using :has */
#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]:checked) {
    background: var(--_primitives---colors--light, #f5f7fa);
    color: var(--_primitives---colors--brown, #252C3E);
}

#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]:focus-visible) {
    outline: 2px solid #9aa9c0;
    outline-offset: 2px;
}

/* Push the radio pair to the right of the name (desktop) */
#weddeb-rsvp-form #rows-wrap .rsvp-row label[for] + input[readonly] + label:has(> input[type="radio"]) {
    margin-left: auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-right: 0;
}

/* Remove legacy gaps between the two option labels in segmented mode */
#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]) + label:has(> input[type="radio"]) {
    margin-left: 0;
}

/* ===== Select min width ===== */
#weddeb-rsvp-form select {
    min-width: 239px;
}

/* ===== Submit button ===== */
#weddeb-rsvp-form button[type="submit"],
#weddeb-rsvp-form #rsvp-submit {
    background-color: var(--_primitives---colors--white);
    color: var(--color-scheme-1--text);
    border: 1.5px solid var(--color-scheme-1--border);
    padding: 12px 45px;
    font-family: var(--_typography---font-styles--buttons);
    font-size: 18px;
    line-height: 24px;
    box-shadow: none;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: all .4s;
}

@media (hover: hover) {
    #weddeb-rsvp-form button[type="submit"]:hover,
    #weddeb-rsvp-form #rsvp-submit:hover {
        background: var(--color-scheme-1--accent);
        color: var(--_primitives---colors--white);
    }
}

/* ===== Disabled/read-only states ===== */
#weddeb-rsvp-form input:disabled,
#weddeb-rsvp-form select:disabled,
#weddeb-rsvp-form textarea:disabled {
    background-color: #f5f5f5;
    color: #888;
    cursor: not-allowed;
    opacity: 1;
    border-color: #ddd;
}

#weddeb-rsvp-form [data-readonly="true"] {
    pointer-events: none;
    background-color: #f5f5f5;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Rows-wrap: remove borders when inputs are disabled (guest name fields) */
#weddeb-rsvp-form #rows-wrap input[type="text"][disabled],
#weddeb-rsvp-form #rows-wrap input[type="text"][readonly],
#weddeb-rsvp-form #rows-wrap input[type="text"][aria-disabled="true"],
#weddeb-rsvp-form #rows-wrap input[type="text"].disabled,
#weddeb-rsvp-form #rows-wrap input[type="text"].is-disabled {
    border: none;
    border-width: 0;
    box-shadow: none;
    cursor: default;
    caret-color: transparent;
    background-color: #fff;
    -webkit-tap-highlight-color: transparent;
}

/* iOS Safari only: prevent gray flicker on readonly guest name input */
@supports (-webkit-touch-callout: none) {
    #weddeb-rsvp-form #rows-wrap input[type="text"][readonly],
    #weddeb-rsvp-form #rows-wrap input[type="text"][readonly]:focus,
    #weddeb-rsvp-form #rows-wrap input[type="text"][readonly]:active,
    #weddeb-rsvp-form #rows-wrap input[type="text"][readonly]:hover {
        background-color: #fff;
        -webkit-tap-highlight-color: transparent;
    }

    /* iOS Safari: neutralize tap highlight / gray flash on pill radio labels */
    #weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]),
    #weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]) {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        background-color: #fff;
    }

    #weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]:checked),
    #weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]:checked) {
        background-color: var(--color-scheme-1--accent, #252C3E);
        color: #fff;
    }

    #weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]:not(:checked)):active,
    #weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]:not(:checked)):active {
        background-color: #fff;
        color: var(--color-scheme-1--text, #2c3e50);
    }

    #weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]):active,
    #weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]):active {
        box-shadow: none;
    }
}

/* Suppress black border/outline on readonly input when focused/clicked */
#weddeb-rsvp-form #rows-wrap input[type="text"][readonly]:focus,
#weddeb-rsvp-form #rows-wrap input[type="text"][readonly]:active,
#weddeb-rsvp-form #rows-wrap input[type="text"][readonly]:focus-visible,
#weddeb-rsvp-form #rows-wrap input[type="text"][disabled]:focus,
#weddeb-rsvp-form #rows-wrap input[type="text"][disabled]:focus-visible {
    outline: none;
    outline-offset: 0;
    border: none;
    box-shadow: none;
}

/* ===== Inline loaders ===== */
#weddeb-rsvp-form .weddeb-inline-loader {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: middle;
    border-radius: 50%;
    border: 2px solid var(--color-scheme-1--accent, #252C3E);
    border-top-color: transparent;
    animation: weddeb-spin 0.8s linear infinite;
    box-shadow: none;
}

/* Code loader positioning */
#weddeb-rsvp-form :is(div, p, section, fieldset, label):has(#code-loader) {
    position: relative;
}

#weddeb-rsvp-form #code-loader {
    position: absolute;
    top: 25px;
    right: 45px;
    z-index: 4;
}

/* Make room so text doesn't run under the spinner */
#weddeb-rsvp-form input#rsvp-code,
#weddeb-rsvp-form input#code,
#weddeb-rsvp-form input[name="code"] {
    padding-right: 44px;
    background: #fff;
}

/* ===== Status messages ===== */
#weddeb-rsvp-form #status {
    text-align: center;
    box-sizing: border-box;
    display: block;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 500;
    width: 100%;
    margin-top: 8px;
    padding: 0 32px;
    color: var(--color-scheme-1--text, #2c3e50);
}

#weddeb-rsvp-form #status:focus,
#weddeb-rsvp-form #status:focus-visible {
    outline: none;
    box-shadow: none;
}

#weddeb-rsvp-form #status.success {
    color: #0f766e; /* teal-700 */
}

/* Status visibility controls */
#weddeb-rsvp-form #status:empty,
#weddeb-rsvp-form #status[hidden],
#weddeb-rsvp-form #status[aria-hidden="true"],
#weddeb-rsvp-form #status.hidden,
#weddeb-rsvp-form #status.is-hidden,
#weddeb-rsvp-form #status[style*="display:none"],
#weddeb-rsvp-form #status[style*="display: none"] {
    display: none !important;
}

#weddeb-rsvp-form #status:not(:empty):not([hidden]):not([aria-hidden="true"]):not(.hidden):not(.is-hidden):not([style*="display:none"]):not([style*="display: none"]) {
    display: block !important;
}

/* ===== Honeypot ===== */
#weddeb-rsvp-form #weddeb-hp {
    position: absolute;
    left: -9999px;
}

/* ===== Submit row alignment ===== */
#weddeb-rsvp-form p:last-of-type {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid var(--color-scheme-1--border-light);
    margin-top: 8px;
}

/* Submit loader visibility */
#weddeb-rsvp-form #submit-loader[hidden],
#weddeb-rsvp-form #submit-loader[aria-hidden="true"],
#weddeb-rsvp-form #submit-loader.hidden,
#weddeb-rsvp-form #submit-loader.is-hidden,
#weddeb-rsvp-form #submit-loader[style*="display:none"],
#weddeb-rsvp-form #submit-loader[style*="display: none"] {
    display: none !important;
}

#weddeb-rsvp-form #submit-loader:not([hidden]):not([aria-hidden="true"]):not(.hidden):not(.is-hidden):not([style*="display:none"]):not([style*="display: none"]) {
    display: inline-block !important;
}

/* ===== Busy state ===== */
#weddeb-rsvp-form[aria-busy="true"] {
    opacity: 0.7;
    pointer-events: none;
}

/* ===== Error states ===== */
.weddeb-error {
    border-color: #dc2626 !important; /* red-600 */
}

#weddeb-rsvp-form input.weddeb-error:not([type="radio"]):not([type="checkbox"]),
#weddeb-rsvp-form select.weddeb-error,
#weddeb-rsvp-form textarea.weddeb-error {
    border: 2px solid #dc2626 !important;
}

/* Pill radio labels in error state */
#weddeb-rsvp-form #attend-choice label.weddeb-error:has(> input[type="radio"]),
#weddeb-rsvp-form #rows-wrap .rsvp-row label.weddeb-error:has(> input[type="radio"]) {
    border: 1.5px solid #dc2626 !important;
}

/* Maintain paired seam behavior for first/second when in error */
#weddeb-rsvp-form #attend-choice label.weddeb-error:has(> input[type="radio"]):first-of-type,
#weddeb-rsvp-form #rows-wrap .rsvp-row label.weddeb-error:has(> input[type="radio"]):first-of-type {
    border-right: 0 !important;
}

#weddeb-rsvp-form #attend-choice label.weddeb-error:has(> input[type="radio"]) + label.weddeb-error:has(> input[type="radio"]),
#weddeb-rsvp-form #rows-wrap .rsvp-row label.weddeb-error:has(> input[type="radio"]) + label.weddeb-error:has(> input[type="radio"]) {
    border-left: 1.5px solid #dc2626 !important;
}

/* If only the second pill is error */
#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]) + label.weddeb-error:has(> input[type="radio"]),
#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]) + label.weddeb-error:has(> input[type="radio"]) {
    border-left: 1.5px solid #dc2626 !important;
}

/* Checked + error: keep accent background but red border */
#weddeb-rsvp-form #attend-choice label.weddeb-error:has(> input[type="radio"]:checked),
#weddeb-rsvp-form #rows-wrap .rsvp-row label.weddeb-error:has(> input[type="radio"]:checked) {
    border: 1.5px solid #dc2626 !important;
    background: var(--color-scheme-1--accent, #252C3E) !important;
    color: #fff !important;
}

/* Readonly guest name inputs normally have no border; restore one if flagged */
#weddeb-rsvp-form #rows-wrap input[type="text"][readonly].weddeb-error {
    border: 2px solid #dc2626 !important;
}

/* Status element error color */
#weddeb-rsvp-form #status.weddeb-error {
    border: none !important;
    border-color: transparent !important;
    color: #dc2626 !important;
}

/* ===== Mobile responsive styles ===== */
@media (max-width: 768px) {
    #group-header {
        font-size: 18px;
        line-height: 25px;
    }

    #group-info {
        margin: 0px 16px 0px;
        font-size: 14px;
        line-height: 19px;
    }

    #weddeb-rsvp-form :is(div, p, section, fieldset, label):has(#code-loader) {
        margin-top: 10px;
    }

    #weddeb-rsvp-form label[for],
    #weddeb-rsvp-form #guest-count > label,
    #weddeb-rsvp-form #rsvp-message-row > label {
        left: 30px;
    }

    #weddeb-rsvp-form #rows-wrap .rsvp-row label[for]:has(+ input[readonly]) {
        left: 30px;
    }

    #weddeb-rsvp-form p,
    #weddeb-rsvp-form #attend-choice,
    #weddeb-rsvp-form #guest-count,
    #weddeb-rsvp-form #rows-wrap .rsvp-row,
    #weddeb-rsvp-form #rsvp-message-row {
        padding: 0 16px;
    }

    /* Keep chips readable on mobile */
    #weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]),
    #weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]) {
        min-width: 96px;
        padding: 6px 10px;
    }

    /* Align pill radio buttons with guest name text in mobile RSVP rows */
    #weddeb-rsvp-form #rows-wrap .rsvp-row input[readonly] + label:has(> input[type="radio"]) {
        margin-left: 32px;
    }

    /* When stacking, give a small gap between the two chips */
    #weddeb-rsvp-form #rows-wrap .rsvp-row {
        /* gap: 6px; */
    }

    /* Adjust status side padding on mobile */
    #weddeb-rsvp-form #status {
        padding: 0 16px;
    }

    /* Position of the code loader on mobile */
    #weddeb-rsvp-form #code-loader {
        top: 26px;
        right: 30px;
    }

    /* Mobile layout for rows: wrap and make the readonly name full width */
    #weddeb-rsvp-form #rows-wrap .rsvp-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    #weddeb-rsvp-form #rows-wrap .rsvp-row input[readonly] {
        flex: 0 0 100%;
    }

    #weddeb-rsvp-form #rows-wrap .rsvp-row label:first-of-type {
        margin-left: 0;
    }

    #weddeb-rsvp-form #rows-wrap .rsvp-row label[for] + input[readonly] + label:has(> input[type="radio"]) {
        margin-left: 12px;
    }

    #weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]) + label:has(> input[type="radio"]) {
        margin-left: 0;
    }
}

/* ===== Fix para imagen del RSVP (plantilla clasico) ===== */
/* Evita que la imagen crezca cuando el formulario se expande */

/* El contenedor de la imagen */
.form-img-container {
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* La imagen misma */
.form-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   TOPE DE LA IMAGEN — SOLO modo wizard multi-step (?ux=steps).
   Scopeado con `body.rsvp-ux-steps` (clase que el JS añade solo en modo steps)
   para NO afectar las otras variantes ni las invitaciones clásicas (no romper nada).
   En cualquier otro modo, la imagen se comporta EXACTAMENTE como antes.

   >>> El tope se ajusta con `max-height` aquí abajo. <<<
   ─────────────────────────────────────────────────────────────────────────── */
/* La imagen se ancla al TOPE de la columna y crece hacia abajo hasta el max-height
   (el espacio en blanco queda abajo, no centrado). Por defecto la columna centra
   (justify-content: center); aquí la anclamos arriba. */
body.rsvp-ux-steps .asistencia__container:first-of-type {
    justify-content: flex-start !important;
}

body.rsvp-ux-steps .form-img-container {
    height: 100% !important;       /* crece con el alto del formulario */
    min-height: 0 !important;      /* anula el min-height:100% de Webflow (si no, ignora el tope) */
    max-height: 730px !important;  /* ...hasta este tope; ya no crece más */
}

body.rsvp-ux-steps .form-img {
    min-height: 0 !important;      /* anula el min-height:115% inline (fix parallax) → cover exacto */
}

.asistencia__container:first-of-type {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: stretch;
}

/* El contenedor del formulario puede crecer libremente */
.asistencia__container.form {
    flex-grow: 1 !important;
    align-self: stretch !important;
}


/* ===== Civil section visibility ===== */
/* By default, civil section is hidden */
.civil-section {
    display: none !important;
}

/* Show civil section when body has show-civil class */
body.show-civil .civil-section {
    display: flex !important;
}

/* Alternative: show-civil on any parent container */
.show-civil .civil-section {
    display: flex !important;
}

/* ========================================================================
   MOCKUP MULTI-EVENTO — confirmación por persona y por evento + dietary
   (estilos de la maqueta; usan el acento del sitio --color-scheme-1--accent)
   ======================================================================== */

#weddeb-rsvp-form #rsvp-events-wrap {
    display: grid;
    gap: 18px;
}

#weddeb-rsvp-form .rsvp-event-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 0;
    border-top: 1px solid var(--color-scheme-1--border-light, #e4e4e7);
}

#weddeb-rsvp-form .rsvp-event-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 32px; /* alinea con el resto del formulario */
}

#weddeb-rsvp-form .rsvp-event-title {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-scheme-1--accent, #252C3E);
}

#weddeb-rsvp-form .rsvp-event-meta {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #6b7280;
}

#weddeb-rsvp-form .rsvp-pin {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    vertical-align: -2px;
    margin: 0 3px 0 1px;
    color: inherit;
}

#weddeb-rsvp-form .rsvp-place {
    /* el lugar queda con el mismo estilo del meta; el icono va justo antes */
}

#weddeb-rsvp-form .rsvp-optional {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
}

#weddeb-rsvp-form .rsvp-event-rows {
    display: grid;
    gap: 8px;
    padding: 0 32px; /* alinea con el resto del formulario */
}

/* Fila: nombre a la izquierda, pills Asistirá/No asistirá a la derecha */
#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row {
    display: flex;
    align-items: center;
    gap: 0;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row .rsvp-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-scheme-1--text, #2c3e50);
    padding: 8px 12px 8px 2px;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row label > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 6px 12px;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    color: var(--color-scheme-1--text, #2c3e50);
    background: #fff;
    border: 1.5px solid var(--color-scheme-1--accent, #252C3E);
    cursor: pointer;
    user-select: none;
    margin: 0;
    flex-shrink: 0;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row label:has(> input[type="radio"]):first-of-type {
    border-right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: auto;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row label:has(> input[type="radio"]):last-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row label:has(> input[type="radio"]:checked) {
    background: var(--color-scheme-1--accent, #252C3E);
    color: #fff;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row label:has(> input[type="radio"]):hover:not(:has(input:checked)) {
    background: #f9fafb;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-row label.weddeb-error:has(> input[type="radio"]) {
    border-color: #dc2626 !important;
}

/* Restricciones alimentarias: etiqueta arriba, input abajo */
#weddeb-rsvp-form #rsvp-dietary-wrap .rsvp-dietary-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    padding: 0 32px; /* alinea con el resto del formulario */
}

#weddeb-rsvp-form #rsvp-dietary-wrap .rsvp-dietary-row .rsvp-row-name {
    padding: 0 2px;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#weddeb-rsvp-form #rsvp-dietary-wrap .rsvp-dietary-row input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #weddeb-rsvp-form .rsvp-event-header,
    #weddeb-rsvp-form .rsvp-event-rows,
    #weddeb-rsvp-form #rsvp-dietary-wrap .rsvp-dietary-row {
        padding: 0 16px; /* igual que el resto del formulario en móvil */
    }
}

@media (max-width: 400px) {
    #weddeb-rsvp-form #rsvp-events-wrap .rsvp-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #weddeb-rsvp-form #rsvp-events-wrap .rsvp-row .rsvp-row-name {
        flex: 0 0 100%;
        margin-bottom: 4px;
        padding: 0;
    }
    #weddeb-rsvp-form #rsvp-events-wrap .rsvp-row label:has(> input[type="radio"]):first-of-type {
        margin-left: 0;
    }
}

/* ========================================================================
   VARIANTE UX "cards" (?ux=cards): eventos arriba una vez + card por persona
   ======================================================================== */

#weddeb-rsvp-form #rsvp-events-wrap.ux-cards {
    padding: 0 32px;
    gap: 16px;
}

/* --- Bloque "Los eventos" (info, una sola vez) --- */
#weddeb-rsvp-form .rsvp-events-info {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border: 1px solid var(--color-scheme-1--border-light, #e3e8ef);
    border-radius: 0;
    background: var(--_primitives---colors--white, #f5f5f5);
}

#weddeb-rsvp-form .rsvp-event-info-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-scheme-1--border-light, #e4e4e7);
}

#weddeb-rsvp-form .rsvp-event-info-line:first-child { padding-top: 0; }
#weddeb-rsvp-form .rsvp-event-info-line:last-child { padding-bottom: 0; border-bottom: 0; }

#weddeb-rsvp-form .rsvp-event-info-name {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-scheme-1--accent, #252C3E);
    min-width: 92px;
}

#weddeb-rsvp-form .rsvp-event-info-meta {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
}

/* --- Subtítulo --- */
#weddeb-rsvp-form .rsvp-cards-subtitle {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7280;
    margin-top: 2px;
    padding: 0 2px;
}

/* --- Card por persona --- */
#weddeb-rsvp-form .rsvp-person-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-scheme-1--border-light, #e3e8ef);
    border-radius: 0;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(37, 44, 62, 0.05);
}

/* Barra superior de la card: número (izq) + flechas (der) — DISEÑO B a evaluar */
#weddeb-rsvp-form .rsvp-card-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#weddeb-rsvp-form .rsvp-card-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

#weddeb-rsvp-form .rsvp-card-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #ffffff;
    border: 1.5px solid var(--color-scheme-1--border-light, #e3e8ef);
    border-radius: 0;
    color: var(--color-scheme-1--accent, #252C3E);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.18s ease;
}

#weddeb-rsvp-form .rsvp-card-nav-btn:hover {
    border-color: var(--color-scheme-1--accent, #252C3E);
    background: #f9fafb;
}

@media (hover: hover) {
    #weddeb-rsvp-form .rsvp-card-nav-next:hover {
        transform: translateX(2px);
    }
    #weddeb-rsvp-form .rsvp-card-nav-back:hover {
        transform: translateX(-2px);
    }
}

/* Número de pregunta dentro de la card, en un badge circular */
#weddeb-rsvp-form .rsvp-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-scheme-1--accent, #252C3E);
    color: #ffffff;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#weddeb-rsvp-form .rsvp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#weddeb-rsvp-form .rsvp-card-name {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-scheme-1--text, #2c3e50);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#weddeb-rsvp-form .rsvp-card-status {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

#weddeb-rsvp-form .rsvp-card-status.is-pending { color: #92400e; background: #fef3c7; }
#weddeb-rsvp-form .rsvp-card-status.is-complete { color: #065f46; background: #d1fae5; }

/* --- Atajo: Asiste a todo / No asiste a nada --- */
#weddeb-rsvp-form .rsvp-card-shortcut {
    display: flex;
    gap: 8px;
}

#weddeb-rsvp-form .rsvp-shortcut-btn {
    flex: 1;
    padding: 8px 10px;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-scheme-1--text, #2c3e50);
    background: #fff;
    border: 1.5px solid var(--color-scheme-1--accent, #252C3E);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s;
}

#weddeb-rsvp-form .rsvp-shortcut-btn:hover { background: #f9fafb; }

#weddeb-rsvp-form .rsvp-shortcut-btn.is-active {
    background: var(--color-scheme-1--accent, #252C3E);
    color: #fff;
}

/* --- Toggles por evento dentro de la card --- */
#weddeb-rsvp-form .rsvp-card-events {
    display: grid;
    gap: 8px;
}

/* Pills más angostas para Sí/No (reusan el estilo de #rsvp-events-wrap .rsvp-row) */
#weddeb-rsvp-form #rsvp-events-wrap .rsvp-card-event-row label:has(> input[type="radio"]) {
    min-width: 54px;
}

/* --- Restricción alimentaria dentro de la card --- */
#weddeb-rsvp-form .rsvp-card-dietary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--color-scheme-1--border-light, #e4e4e7);
}

#weddeb-rsvp-form .rsvp-card-dietary .rsvp-event-header {
    padding: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}

#weddeb-rsvp-form .rsvp-card-dietary-title {
    font-size: 13px;
}

#weddeb-rsvp-form .rsvp-card-dietary input[type="text"] {
    height: 44px;
    padding: 10px 14px;
}

@media (max-width: 768px) {
    #weddeb-rsvp-form #rsvp-events-wrap.ux-cards {
        padding: 0 16px;
    }
}
/* ========================================================================
   VARIANTE UX "steps": wizard multistep (?ux=steps)
   ======================================================================== */

#weddeb-rsvp-form .rsvp-wizard {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- Barra de progreso --- */
#weddeb-rsvp-form .rsvp-step-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


#weddeb-rsvp-form .rsvp-step-progress-label {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7280;
}

#weddeb-rsvp-form .rsvp-step-progress-bar {
    height: 5px;
    background: #e3e8ef;
    overflow: hidden;
}

#weddeb-rsvp-form .rsvp-step-progress-fill {
    height: 100%;
    background: var(--color-scheme-1--accent, #252C3E);
    transition: width 0.2s ease;
}


/* --- Instrucción del paso --- */
#weddeb-rsvp-form .rsvp-step-instr {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 13px;
    color: #6b7280;
    margin-top: -2px;
}

/* --- Filas de evento con info (nombre + fecha + lugar) + toggle --- */
#weddeb-rsvp-form .rsvp-step-events {
    display: grid;
    gap: 10px;
}

#weddeb-rsvp-form #rsvp-events-wrap .rsvp-step-event-row {
    align-items: center;
}

#weddeb-rsvp-form .rsvp-step-event-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    padding-right: 10px;
}

#weddeb-rsvp-form .rsvp-step-event-name {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-scheme-1--text, #2c3e50);
}

#weddeb-rsvp-form .rsvp-step-event-meta {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 11px;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
}

/* --- Navegación (Atrás / Siguiente / Confirmar) --- */
#weddeb-rsvp-form .rsvp-step-nav {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

#weddeb-rsvp-form .rsvp-step-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 13px 18px;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s;
}

/* Flecha de navegación: se desliza sutilmente en hover (toque moderno) */
#weddeb-rsvp-form .rsvp-nav-arrow {
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

@media (hover: hover) {
    #weddeb-rsvp-form .rsvp-step-next:hover .rsvp-nav-arrow {
        transform: translateX(3px);
    }
    #weddeb-rsvp-form .rsvp-step-back:hover:not(:disabled) .rsvp-nav-arrow {
        transform: translateX(-3px);
    }
}

#weddeb-rsvp-form .rsvp-step-back {
    flex: 0 0 auto;
    width: 52px;
    padding-left: 0;
    padding-right: 0;
    background: #ffffff;
    color: var(--color-scheme-1--text, #2c3e50);
    border: 1.5px solid var(--color-scheme-1--accent, #252C3E);
}

#weddeb-rsvp-form .rsvp-step-back:hover:not(:disabled) {
    background: #f9fafb;
}

#weddeb-rsvp-form .rsvp-step-back:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#weddeb-rsvp-form .rsvp-step-next,
#weddeb-rsvp-form .rsvp-step-confirm {
    flex: 1;
    background: var(--color-scheme-1--accent, #252C3E);
    color: #fff;
    border: 1.5px solid var(--color-scheme-1--accent, #252C3E);
}

#weddeb-rsvp-form .rsvp-step-next:hover,
#weddeb-rsvp-form .rsvp-step-confirm:hover {
    opacity: 0.9;
}

/* Desktop: los botones no abarcan todo el ancho — se agrupan a la derecha,
   con ancho según contenido. En móvil (base) siguen a ancho completo. */
@media (min-width: 992px) {
    #weddeb-rsvp-form .rsvp-step-nav {
        justify-content: flex-end;
    }
    #weddeb-rsvp-form .rsvp-step-next,
    #weddeb-rsvp-form .rsvp-step-confirm {
        flex: 0 0 auto;
        min-width: 150px;
        padding-left: 28px;
        padding-right: 28px;
    }
}

/* --- Error inline del paso --- */
#weddeb-rsvp-form .rsvp-step-error {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 13px;
    color: #991b1b;
    background: #fee2e2;
    padding: 10px 14px;
}

/* --- Paso de revisión --- */
#weddeb-rsvp-form .rsvp-review-card {
    gap: 0;
}

#weddeb-rsvp-form .rsvp-review-card > .rsvp-card-name {
    margin-bottom: 4px;
}

#weddeb-rsvp-form .rsvp-review-person {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid var(--color-scheme-1--border-light, #e3e8ef);
}

#weddeb-rsvp-form .rsvp-review-person-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#weddeb-rsvp-form .rsvp-review-name {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-scheme-1--text, #2c3e50);
}

#weddeb-rsvp-form .rsvp-review-edit {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-scheme-1--accent, #252C3E);
    background: transparent;
    border: 0;
    padding: 4px 6px;
    cursor: pointer;
    text-decoration: underline;
}

#weddeb-rsvp-form .rsvp-review-events {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#weddeb-rsvp-form .rsvp-review-tag {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 8px;
    border: 1px solid var(--color-scheme-1--border-light, #e3e8ef);
}

#weddeb-rsvp-form .rsvp-review-tag.is-yes { color: #166534; background: #ecfdf3; border-color: #c7ebd5; }
#weddeb-rsvp-form .rsvp-review-tag.is-no { color: #991b1b; background: #fef2f2; border-color: #f3cccc; }
#weddeb-rsvp-form .rsvp-review-tag.is-none { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }

#weddeb-rsvp-form .rsvp-review-diet {
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    color: #6b7280;
}

/* --- Mensaje en el paso de revisión --- */
#weddeb-rsvp-form .rsvp-review-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#weddeb-rsvp-form .rsvp-review-message-label {
    position: static;
    font-family: Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    max-width: none;
    pointer-events: auto;
}

#weddeb-rsvp-form .rsvp-review-message textarea {
    min-height: 80px;
    padding: 12px 14px;
    line-height: 1.4;
    background: #fff;
}

/* --- Transición fade in/out entre pasos del wizard --- */
@keyframes rsvp-step-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

#weddeb-rsvp-form .rsvp-wizard {
    animation: rsvp-step-in 0.16s ease-out;
}

#weddeb-rsvp-form .rsvp-wizard.is-leaving {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.13s ease-in, transform 0.13s ease-in;
}

/* --- Paso de nombres (by_number) --- */
#weddeb-rsvp-form .rsvp-names-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#weddeb-rsvp-form .rsvp-names-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#weddeb-rsvp-form .rsvp-names-field select,
#weddeb-rsvp-form .rsvp-names-field input[type="text"] {
    height: 48px;
    padding: 12px 14px;
    background: #ffffff;
}

/* --- Mobile/tablet: en el wizard, apila nombre+fecha arriba y los toggles
   Sí/No abajo (la línea fecha · lugar + pills no caben en columnas angostas) --- */
@media (max-width: 991px) {
    #weddeb-rsvp-form .rsvp-step-event-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #weddeb-rsvp-form .rsvp-step-event-info {
        flex: 0 0 100%;
        padding-right: 0;
        margin-bottom: 8px;
    }
    #weddeb-rsvp-form .rsvp-step-event-row label:has(> input[type="radio"]):first-of-type {
        margin-left: 0;
    }
    #weddeb-rsvp-form .rsvp-step-event-meta {
        flex-wrap: wrap;
    }
    /* Primera pregunta: ocultar "Atrás" en móvil (solo está deshabilitado en el primer paso).
       El botón "Siguiente" (flex:1) ocupa el ancho completo. */
    #weddeb-rsvp-form .rsvp-step-back:disabled {
        display: none;
    }
    /* En móvil/tablet ocultamos las flechas del top-right de la card; la navegación
       queda en los botones de abajo (que en móvil van a ancho completo). */
    #weddeb-rsvp-form .rsvp-card-nav {
        display: none;
    }
}

/* ≤767px: aquí el form se apila full-width. El contenedor exterior del form tenía 24px;
   lo bajamos a un único 20px (incluye el vertical, para que el título RSVP no quede
   pegado a la imagen). La card conserva su padding interno normal (16px).
   Solo en modo steps, para no afectar otras variantes ni invitaciones clásicas. */
@media (max-width: 767px) {
    body.rsvp-ux-steps .asistencia__container.form {
        padding: 20px !important;
    }
    /* Quitar el 16px horizontal que las reglas móviles le ponen a los wrappers internos
       (#weddeb-rsvp-form p del código y #rsvp-events-wrap). Se sumaba al 20px exterior,
       creando el doble padding. La card conserva su propio padding interno (16px). */
    body.rsvp-ux-steps #weddeb-rsvp-form p,
    body.rsvp-ux-steps #weddeb-rsvp-form #rsvp-events-wrap {
        padding-left: 0;
        padding-right: 0;
    }
}