/* ==========================================================================
   WIDGET DE RSVP DE WEDDEB — vestido para "estilo editorial"
   ==========================================================================
   El widget (https://panel.weddeb.com/js/rsvp-widget.js) NO trae ni una linea
   de CSS: monta el formulario y deja que lo vista el sitio. Esta hoja es esa
   ropa. La otra que hay en el repo, css/rsvp-widget.css, viste el MISMO widget
   para la plantilla clasica (index-2.html): son alternativas, nunca se cargan
   las dos a la vez.

   Que hace el widget por su cuenta y esta hoja NO debe pelear:
     · La VISIBILIDAD. El widget escribe display en el propio elemento
       (rows-wrap a grid, guest-count/message/submit a block, attend-choice a
       flex) segun el paso en el que va. Un estilo en linea gana a esta hoja
       siempre, asi que aqui no se declara display en esos cinco nodos: solo en
       #status, que el widget deja vacio y sin tocar.
     · Las clases de estado: .weddeb-error en el nodo que falla y .success /
       .weddeb-error en #status.

   El formulario vive dentro de .tarjeta, la ficha de papel que se apoya sobre
   el sobre. La tarjeta ya pone su propio padding y un gap de 13px entre hijos,
   asi que aqui los margenes van a cero y no se repite el respiro.

   Paleta, la misma del diseno y escrita a pelo igual que en la hoja principal:
     #42251a  tinta cafe        #f6f1e4  papel de la tarjeta
     #f0e9d8  papel de pagina   rgba(66,37,26,.32)  filete
   ========================================================================== */

/* ==========================================================================
   1 · CONTENEDOR
   ========================================================================== */
#rsvp-container,
#weddeb-rsvp-form-wrap { width: 100%; }

#weddeb-rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  color: #42251a;
  font-family: 'Courier Prime', ui-monospace, monospace;
}

/* El widget usa <p> como fila. Traen el margen del navegador, que aqui sobra:
   el hueco entre filas lo pone el gap de arriba. */
#weddeb-rsvp-form p { margin: 0; padding: 0; }

/* Mientras el widget habla con el panel se marca aria-busy. */
#weddeb-rsvp-form[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ==========================================================================
   2 · NOMBRE DEL GRUPO
   ==========================================================================
   El widget crea este <h2> y este <p> al vuelo y los mete ANTES del <form>,
   o sea como hermanos suyos y no dentro. Por eso se estilan por su id y no
   colgando de #weddeb-rsvp-form.
   ========================================================================== */
#group-header {
  margin: 0 0 2px;
  font-family: 'Cormorant', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .04em;
  text-align: center;
  color: #42251a;
}

#group-info {
  margin: 0 0 4px;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: #42251a;
  opacity: .7;
}

/* ==========================================================================
   3 · ETIQUETAS
   ==========================================================================
   La hoja de la plantilla clasica las flota DENTRO del campo, en absoluto. Aqui
   van encima y en pequeno, que es como estan escritos todos los rotulos de esta
   invitacion ("Sábado", "01 — Ellos", "Paleta sugerida"): la misma voz.
   ========================================================================== */
#weddeb-rsvp-form label[for],
#weddeb-rsvp-form #guest-count > label,
#weddeb-rsvp-form #rsvp-message-row > label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #42251a;
  opacity: .68;
}

/* ==========================================================================
   4 · CAMPOS
   ==========================================================================
   Contorno y no relleno: sobre el papel de la tarjeta un campo blanco se veria
   como un parche. El codigo se centra y se espacia porque son cinco caracteres
   sueltos, no una palabra.
   ========================================================================== */
#weddeb-rsvp-form input[type="text"],
#weddeb-rsvp-form select,
#weddeb-rsvp-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1.5px solid #42251a;
  border-radius: 100px;
  color: #42251a;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 16px;   /* por debajo de 16px, iOS hace zoom al enfocar el campo */
  line-height: 1.4;
}

#weddeb-rsvp-form #rsvp-code {
  text-align: center;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding-right: 34px;   /* hueco para el spinner que se pone encima */
}

#weddeb-rsvp-form textarea {
  border-radius: 14px;
  min-height: 86px;
  resize: vertical;
}

#weddeb-rsvp-form input::placeholder,
#weddeb-rsvp-form textarea::placeholder {
  color: #42251a;
  opacity: .45;
  letter-spacing: normal;
  text-transform: none;
}

#weddeb-rsvp-form input:focus-visible,
#weddeb-rsvp-form select:focus-visible,
#weddeb-rsvp-form textarea:focus-visible {
  outline: 2px solid #42251a;
  outline-offset: 3px;
}

/* La flecha nativa del <select> no se puede pintar, asi que se quita y se
   dibuja una con background: si no, en Windows sale un widget gris que no
   pertenece a esta invitacion. */
#weddeb-rsvp-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #42251a 50%),
                    linear-gradient(135deg, #42251a 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ==========================================================================
   5 · FILAS DE INVITADOS
   ==========================================================================
   El widget monta cada fila asi, en este orden y sin contenedores intermedios:

       <div class="rsvp-row">
         <label for="guest-name-display-1">Invitado 1</label>
         <input readonly value="Nombre del invitado">
         <label><input type="radio"> Sí asistiré</label>
         <label><input type="radio"> No asistiré</label>
       </div>

   En una tarjeta de 380px no caben nombre y dos pastillas en una linea, asi que
   la rejilla los apila: rotulo y nombre ocupan el ancho entero y las dos
   pastillas se reparten la fila de abajo a partes iguales.
   ========================================================================== */
#weddeb-rsvp-form #rows-wrap { gap: 16px; }

#weddeb-rsvp-form .rsvp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 14px 0 0;
  border-top: 1px solid rgba(66, 37, 26, .22);
}

/* La primera fila no lleva filete: iria pegado al campo del codigo y leeria
   como si lo subrayara. */
#weddeb-rsvp-form .rsvp-row:first-child { border-top: 0; padding-top: 0; }

#weddeb-rsvp-form .rsvp-row > label[for],
#weddeb-rsvp-form .rsvp-row > input[readonly] { grid-column: 1 / -1; }

#weddeb-rsvp-form .rsvp-row > label[for] { margin-bottom: 0; }

/* El nombre no se rellena: se lee. Sin borde, sin fondo y en la serif, para que
   no parezca un campo de escritura que en realidad esta bloqueado.
   text-overflow no llega a actuar casi nunca —el widget ya corta a 40
   caracteres— pero cubre los nombres largos en pantallas estrechas. */
#weddeb-rsvp-form .rsvp-row > input[readonly] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: 'Cormorant', Georgia, serif;
  font-size: 20px;
  letter-spacing: .02em;
  cursor: default;
  caret-color: transparent;
  text-overflow: ellipsis;
  /* iOS pinta de gris los campos de solo lectura por su cuenta. */
  -webkit-text-fill-color: #42251a;
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
}

#weddeb-rsvp-form .rsvp-row > input[readonly]:focus,
#weddeb-rsvp-form .rsvp-row > input[readonly]:focus-visible {
  outline: none;
  border: 0;
}

/* ==========================================================================
   6 · PASTILLAS DE SI / NO
   ==========================================================================
   Vale para las filas de invitados y para #attend-choice, que el widget monta
   con la misma forma (label envolviendo un radio).
   ========================================================================== */
#weddeb-rsvp-form #attend-choice { gap: 8px; }

#weddeb-rsvp-form .rsvp-row label:has(> input[type="radio"]),
#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 10px;
  margin: 0;
  border: 1.5px solid rgba(66, 37, 26, .45);
  border-radius: 100px;
  background: transparent;
  color: #42251a;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* El radio de verdad se esconde sin sacarlo del arbol: sigue recibiendo el foco
   del teclado y sigue siendo lo que anuncia el lector de pantalla. display:none
   lo dejaria fuera de las dos cosas. */
#weddeb-rsvp-form .rsvp-row label > input[type="radio"],
#weddeb-rsvp-form #attend-choice label > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Marcada: se rellena de tinta. Es la unica pieza maciza del formulario junto
   al boton de enviar, asi que se ve de un vistazo que hay elegido. */
#weddeb-rsvp-form .rsvp-row label:has(> input[type="radio"]:checked),
#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]:checked) {
  background: #42251a;
  border-color: #42251a;
  color: #f6f1e4;
}

#weddeb-rsvp-form .rsvp-row label:has(> input[type="radio"]:focus-visible),
#weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]:focus-visible) {
  outline: 2px solid #42251a;
  outline-offset: 3px;
}

@media (hover: hover) {
  #weddeb-rsvp-form .rsvp-row label:has(> input[type="radio"]:not(:checked)):hover,
  #weddeb-rsvp-form #attend-choice label:has(> input[type="radio"]:not(:checked)):hover {
    border-color: #42251a;
  }
}

/* Sin :has() (Firefox anterior al 121, Safari anterior al 15.4) las dos reglas
   de arriba no llegan a aplicarse NUNCA, ni siquiera la forma de pastilla: el
   navegador tira el bloque entero. Sin esto quedarian dos radios sueltos con su
   texto al lado, que se entienden y se pueden pulsar, pero desentonan. Esto les
   devuelve al menos la caja y la voz tipografica. */
@supports not selector(:has(*)) {
  #weddeb-rsvp-form .rsvp-row label,
  #weddeb-rsvp-form #attend-choice label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 0;
    padding: 8px 10px;
    border: 1.5px solid rgba(66, 37, 26, .45);
    border-radius: 100px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  #weddeb-rsvp-form .rsvp-row > label[for] {
    display: block;
    border: 0;
    padding: 0;
    letter-spacing: .18em;
  }
  #weddeb-rsvp-form .rsvp-row label > input[type="radio"] {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    clip-path: none;
    accent-color: #42251a;
  }
}

/* ==========================================================================
   7 · BOTON DE ENVIAR
   ==========================================================================
   Mismo aspecto que .btn-solido del resto de la invitacion, escrito aparte
   porque el boton lo crea el widget y no lleva esa clase.
   ========================================================================== */
/* Mismo motivo que en .btn-solido de la hoja principal: sin line-height propio
   el boton hereda el 1.65 del cuerpo de texto y se hincha 8px de aire muerto.
   El padding va a 16 para quedarse sobre los 44px tactiles: 13.5 + 32 = 45.5. */
#weddeb-rsvp-form #rsvp-submit {
  width: 100%;
  padding: 16px;
  margin: 4px 0 0;
  border: none;
  border-radius: 100px;
  background: #42251a;
  color: #f0e9d8;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
}

/* Oscurece, no se vacia: un boton principal que pierde el relleno al pasar por
   encima parece que se ha desactivado, y este es lo unico de la invitacion que
   envia algo de verdad. Es el mismo hover que .btn-solido. */
#weddeb-rsvp-form #rsvp-submit:hover { background: #2e1a12; color: #f0e9d8; }
#weddeb-rsvp-form #rsvp-submit:active { transform: scale(.98); }
#weddeb-rsvp-form #rsvp-submit:focus-visible { outline: 2px solid #42251a; outline-offset: 3px; }
#weddeb-rsvp-form #rsvp-submit[disabled] { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  #weddeb-rsvp-form #rsvp-submit { transition: none; }
  #weddeb-rsvp-form #rsvp-submit:active { transform: none; }
}

/* ==========================================================================
   8 · GIRADORES DE ESPERA
   ==========================================================================
   Dos: uno al validar el codigo (va encima del campo, a la derecha) y otro al
   enviar (junto al boton). El widget los ensena y los esconde por su cuenta.
   ========================================================================== */
@keyframes weddeb-gira { to { transform: rotate(360deg); } }

#weddeb-rsvp-form .weddeb-inline-loader {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(66, 37, 26, .35);
  border-top-color: #42251a;
  border-radius: 50%;
  animation: weddeb-gira .8s linear infinite;
}

/* El <p> del codigo es el ancla; el spinner se pone sobre el campo. */
#weddeb-rsvp-form p:has(> #rsvp-code) { position: relative; }
#weddeb-rsvp-form #code-loader { position: absolute; right: 16px; bottom: 15px; }

#weddeb-rsvp-form #submit-loader { display: block; margin: 10px auto 0; }

@media (prefers-reduced-motion: reduce) {
  #weddeb-rsvp-form .weddeb-inline-loader { animation-duration: 2.4s; }
}

/* ==========================================================================
   9 · AVISOS Y ERRORES
   ==========================================================================
   #status es lo unico cuya visibilidad NO toca el widget: lo deja vacio hasta
   que tiene algo que decir, asi que se esconde desde aqui con :empty. Si se
   ocultara con [hidden] o con una clase, se quedaria un hueco en blanco entre
   el boton y el borde de la tarjeta durante todo el rato.
   ========================================================================== */
#weddeb-rsvp-form #status {
  margin: 2px 0 0;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: #42251a;
}

#weddeb-rsvp-form #status:empty { display: none; }
#weddeb-rsvp-form #status:focus,
#weddeb-rsvp-form #status:focus-visible { outline: none; }

/* El rojo es el unico color de fuera de la paleta en toda la invitacion. Esta
   ahi porque un error tiene que leerse como error y el cafe no lo dice; es un
   rojo oscuro (#8f2d1e) y no el rojo de sistema, para que siga perteneciendo a
   esta pagina. Sobre el papel de la tarjeta da 6.2:1. */
#weddeb-rsvp-form #status.weddeb-error { color: #8f2d1e; }

/* El acierto no cambia de color: se marca con la palomita que ya manda el
   widget en el texto. Un verde aqui seria el segundo color de fuera de la
   paleta y no hace falta. */
#weddeb-rsvp-form #status.success { color: #42251a; }

#weddeb-rsvp-form input.weddeb-error,
#weddeb-rsvp-form select.weddeb-error,
#weddeb-rsvp-form textarea.weddeb-error { border-color: #8f2d1e; }

#weddeb-rsvp-form .rsvp-row label.weddeb-error:has(> input[type="radio"]),
#weddeb-rsvp-form #attend-choice label.weddeb-error:has(> input[type="radio"]) {
  border-color: #8f2d1e;
}

/* La trampa para bots. El widget ya la esconde con estilo en linea; esto es el
   cinturon por si algun dia deja de hacerlo, porque un campo visible aqui
   arruinaria el formulario. */
#weddeb-rsvp-form #weddeb-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   10 · ASISTENTE DE VARIOS EVENTOS
   ==========================================================================
   Cuando el evento trae multi_event_enabled, el widget deja de pintar la lista
   plana y monta un asistente por pasos: una tarjeta por invitado con un si/no
   por cada evento (misa, civil, recepcion...) y un paso final de revision.
   Lo activa el panel, no esta pagina, asi que esto puede no llegar a verse
   nunca en una boda de un solo evento; va vestido igualmente para que el dia
   que se encienda no aparezca en crudo.

   Las pastillas de dentro son las mismas .rsvp-row de mas arriba y ya estan
   resueltas; aqui va solo lo que el asistente anade.
   ========================================================================== */
#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-bar {
  height: 2px;
  background: rgba(66, 37, 26, .2);
  overflow: hidden;
}

#weddeb-rsvp-form .rsvp-step-progress-fill {
  height: 100%;
  background: #42251a;
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

/* ---- tarjeta de cada invitado ---- */
#weddeb-rsvp-form .rsvp-person-card,
#weddeb-rsvp-form .rsvp-review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(66, 37, 26, .22);
}

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

#weddeb-rsvp-form .rsvp-card-num {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
}

#weddeb-rsvp-form .rsvp-card-nav { display: flex; gap: 6px; }

#weddeb-rsvp-form .rsvp-card-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid rgba(66, 37, 26, .45);
  border-radius: 50%;
  background: transparent;
  color: #42251a;
  cursor: pointer;
}

#weddeb-rsvp-form .rsvp-card-nav-btn[disabled] { opacity: .35; cursor: default; }

#weddeb-rsvp-form .rsvp-card-name {
  font-family: 'Cormorant', Georgia, serif;
  font-size: 22px;
  line-height: 1.2;
}

#weddeb-rsvp-form .rsvp-step-instr,
#weddeb-rsvp-form .rsvp-optional {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .65;
}

/* ---- atajos "todos si" / "todos no" ---- */
#weddeb-rsvp-form .rsvp-card-shortcut { display: flex; gap: 8px; }

#weddeb-rsvp-form .rsvp-shortcut-btn {
  flex: 1 1 0;
  padding: 7px 8px;
  border: 1px solid rgba(66, 37, 26, .3);
  border-radius: 100px;
  background: transparent;
  color: #42251a;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (hover: hover) {
  #weddeb-rsvp-form .rsvp-shortcut-btn:hover,
  #weddeb-rsvp-form .rsvp-card-nav-btn:not([disabled]):hover { border-color: #42251a; }
}

/* ---- una linea por evento ---- */
#weddeb-rsvp-form .rsvp-step-events { display: flex; flex-direction: column; gap: 14px; }

#weddeb-rsvp-form .rsvp-step-event-info { grid-column: 1 / -1; }

#weddeb-rsvp-form .rsvp-step-event-name {
  display: block;
  font-family: 'Cormorant', Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
}

#weddeb-rsvp-form .rsvp-step-event-meta,
#weddeb-rsvp-form .rsvp-meta-line {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .08em;
  opacity: .7;
}

#weddeb-rsvp-form .rsvp-meta-sep { opacity: .5; }

/* ---- navegacion entre pasos ---- */
#weddeb-rsvp-form .rsvp-step-nav { display: flex; align-items: center; gap: 8px; }

#weddeb-rsvp-form .rsvp-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 100px;
  border: 1.5px solid #42251a;
  background: transparent;
  color: #42251a;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* "Siguiente" es la accion que se espera en cada paso: va maciza y ocupa el
   resto de la fila. "Atras" se queda de contorno y solo con la flecha. */
#weddeb-rsvp-form .rsvp-step-next,
#weddeb-rsvp-form .rsvp-step-confirm {
  flex: 1 1 auto;
  background: #42251a;
  color: #f0e9d8;
}

#weddeb-rsvp-form .rsvp-step-next:hover,
#weddeb-rsvp-form .rsvp-step-confirm:hover { background: #2e1a12; }

#weddeb-rsvp-form .rsvp-step-back { flex: 0 0 auto; padding: 13px 16px; }
#weddeb-rsvp-form .rsvp-step-btn[disabled] { opacity: .35; cursor: default; }
#weddeb-rsvp-form .rsvp-nav-arrow { display: block; }

#weddeb-rsvp-form .rsvp-step-error {
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: #8f2d1e;
}

/* ---- paso de revision ---- */
#weddeb-rsvp-form .rsvp-review-person {
  padding: 12px 0;
  border-bottom: 1px solid rgba(66, 37, 26, .18);
}

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

#weddeb-rsvp-form .rsvp-review-name {
  font-family: 'Cormorant', Georgia, serif;
  font-size: 19px;
}

#weddeb-rsvp-form .rsvp-review-edit {
  padding: 0;
  border: 0;
  background: transparent;
  color: #42251a;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

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

#weddeb-rsvp-form .rsvp-review-tag {
  padding: 4px 11px;
  border: 1px solid rgba(66, 37, 26, .35);
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* El color no es la unica senal: el widget marca .is-yes / .is-none / .is-pending
   y el texto de la etiqueta ya dice a que evento va cada una. */
#weddeb-rsvp-form .rsvp-review-tag.is-yes { background: #42251a; border-color: #42251a; color: #f6f1e4; }
#weddeb-rsvp-form .rsvp-review-tag.is-none { opacity: .5; text-decoration: line-through; }

#weddeb-rsvp-form .rsvp-review-message,
#weddeb-rsvp-form .rsvp-review-diet { font-size: 12.5px; line-height: 1.6; }

#weddeb-rsvp-form .rsvp-review-message-label,
#weddeb-rsvp-form .rsvp-card-dietary-title {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
}

/* El widget marca .is-leaving en la tarjeta que sale mientras entra la
   siguiente. */
#weddeb-rsvp-form .is-leaving { opacity: 0; transition: opacity .13s ease; }

@media (prefers-reduced-motion: reduce) {
  #weddeb-rsvp-form .rsvp-step-progress-fill,
  #weddeb-rsvp-form .is-leaving { transition: none; }
}