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

/* ===== CSS Variables (with fallbacks) =====
   Estos valores estaban escritos a pelo y, como esta hoja carga DESPUES del CSS
   del template y tiene la misma especificidad, ganaban siempre: el texto de toda
   la pagina se quedaba en el verde de aqui pasara lo que pasara con la paleta.
   No era un fallback, era una sobrescritura.
   Ahora si son fallbacks: leen los tokens de la paleta y solo usan el valor
   escrito si esos tokens no existen, que es el caso de usar este widget suelto
   fuera del sitio, que es para lo que estaban pensados. */
:root {
    --color-scheme-1--text: var(--fyr-tinta, #4c5040);
    --color-scheme-1--accent: var(--fyr-acento, var(--fyr-tinta, #4c5040));
    --_primitives---colors--light: var(--fyr-superficie, #eaded0);
    /* El valor de origen (#8b7355) era un marron medio, o sea un color de TEXTO.
       Mapearlo al filete de la paleta lo convertia en un tinte clarisimo alli donde
       se usa para escribir; va al acento, que es el que si aguanta. */
    --_primitives---colors--brown: var(--fyr-acento, var(--fyr-tinta, #4c5040));
    --_primitives---colors--white: #ffffff;
}

/* ===== 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, #8b7355);
    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: 12px;
    /* Blanco y no transparente: el bloque del formulario puede tener color, y un
       campo transparente encima de el no se distingue de la tarjeta. El borde no
       basta para salvarlo —va en #e4e4e7 y sobre un bloque tintado se separa 1.04,
       o sea nada—, asi que el campo se quedaba sin fondo Y sin borde: nada indicaba
       que ahi se escribe. Sobre un bloque blanco esto no cambia nada.
       Ojo: el nombre del invitado NO entra aqui. Es readonly, y mas abajo se le
       devuelve el fondo transparente a proposito, para que no parezca rellenable. */
    background: var(--_primitives---colors--white);
    /* El borde es lo unico que dibuja el campo cuando el bloque tambien es blanco,
       y en #e4e4e7 se separaba 1.27 del blanco: casi nada, y ademas era un gris
       que no pertenecia a la paleta. Sale del token de bordes, el mismo que ya usan
       los botones "Ver mapa" de toda la invitacion: SAND en la version 1 (2.1) y
       celeste en la 2 (2.48). */
    border: 2px solid var(--color-scheme-1--border, #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) {
    /* Marcado sin relleno: el estado se senala con el borde en acento, doblado con
       una sombra interior —doblar el border-width moveria la maquetacion, porque
       las dos pastillas comparten costura— y con el peso de la letra, que da una
       segunda senal que no depende del color.
       La etiqueta NO pasa al acento y se queda en la tinta a proposito: sobre el
       bloque de la version 2 el acento da 3.95:1, por debajo del minimo para este
       cuerpo, mientras que la tinta da 11.7:1. El color lo pone el borde, que al
       ser una linea y no texto no tiene que cumplir ese minimo. */
    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 var(--color-scheme-1--accent, #4c5040);
    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);
    /* Transparente, como las pastillas de #attend-choice. Iba en #fff fijo, asi que
       las dos parejas del formulario no coincidian: sobre un bloque de color, estas
       salian blancas y las de arriba dejaban ver la tarjeta. */
    background: transparent;
    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: 999px;
    border-bottom-left-radius: 999px;
}

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

/* Mismo recurso que el control de arriba (#attend-choice), para que las dos
   parejas de pastillas del formulario se comporten igual.
   Lo que habia antes fallaba dos veces: la etiqueta iba en el color de los filetes
   sobre un relleno palido —1.7:1, o sea que no se leia cual habias elegido— y ese
   relleno podia coincidir con el del bloque de debajo y desaparecer del todo. */
#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]:checked) {
    /* Marcado sin relleno: el estado se senala con el borde en acento, doblado con
       una sombra interior —doblar el border-width moveria la maquetacion, porque
       las dos pastillas comparten costura— y con el peso de la letra, que da una
       segunda senal que no depende del color.
       La etiqueta NO pasa al acento y se queda en la tinta a proposito: sobre el
       bloque de la version 2 el acento da 3.95:1, por debajo del minimo para este
       cuerpo, mientras que la tinta da 11.7:1. El color lo pone el borde, que al
       ser una linea y no texto no tiene que cumplir ese minimo. */
    background: var(--color-scheme-1--accent);
    color: var(--_primitives---colors--white);
}

#weddeb-rsvp-form #rows-wrap .rsvp-row label:has(> input[type="radio"]:focus-visible) {
    outline: 2px solid var(--color-scheme-1--accent, #4c5040);
    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: 999px;
    border-bottom-left-radius: 999px;
    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 ===== */
/* Relleno de acento desde el principio: es la accion principal del formulario y la
   unica de toda la invitacion que envia algo. Con el resto de piezas en contorno
   —campos, pastillas sin marcar— es lo unico macizo de la seccion, que es
   exactamente lo que se quiere de un boton de enviar.
   Blanco sobre acento da 7.1:1 en la version 1 y 5.2:1 en la 2. */
#weddeb-rsvp-form button[type="submit"],
#weddeb-rsvp-form #rsvp-submit {
    background-color: var(--color-scheme-1--accent);
    color: var(--_primitives---colors--white);
    border: 1.5px solid var(--color-scheme-1--accent);
    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;
}

/* El hover NO invierte: oscurece. Un boton principal que se vacia al pasar por
   encima parece que se desactiva, y este es lo unico de la invitacion que envia
   algo. Se hunde un 15%, que es lo que se espera de un boton macizo, y de paso el
   blanco de la etiqueta gana contraste en vez de perderlo: 7.1 -> 8.7 en la
   version 1 y 5.2 -> 6.7 en la 2. */
#weddeb-rsvp-form button[type="submit"]:hover,
#weddeb-rsvp-form #rsvp-submit:hover {
    background: color-mix(in srgb, var(--color-scheme-1--accent) 85%, black);
    border-color: color-mix(in srgb, var(--color-scheme-1--accent) 85%, black);
    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;
    /* Transparente, como el resto de campos del formulario. Estaba en #fff fijo, y
       eso solo pasa desapercibido si el bloque del RSVP tambien es blanco: sobre un
       bloque de color sale como una barra blanca, y en movil hay una regla que
       ademas lo lleva al ancho completo, asi que cruzaba la tarjeta de lado a lado.
       Sigue siendo un valor explicito, que es lo que hacia falta contra el gris que
       iOS pinta por su cuenta en los campos de solo lectura. */
    background-color: transparent;
    -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: transparent;
        -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;
        /* Transparente, igual que fuera de este bloque. Iba en #fff fijo y eso
           hacia que iOS pintara la pastilla de blanco mientras el resto de
           navegadores la dejaba ver el fondo de la tarjeta. */
        background-color: transparent;
    }

    /* Mismo marcado sin relleno que fuera de este bloque. Estaba duplicado con
       relleno de acento, asi que en Safari de iOS el cambio no se veia. */
    #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);
        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: transparent;
        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, #8b7355);
    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;
}

/* ===== 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;
}

/* Marcado + error: se queda el borde rojo y se va el relleno, como el resto del
   formulario. El texto vuelve a la tinta: iba en blanco porque debajo habia un
   relleno oscuro, y sin el se quedaba blanco sobre la tarjeta. */
#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: transparent !important;
    color: var(--color-scheme-1--text) !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;
}

.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;
}