/*
 * CGEM RSVP form styling.
 *
 * The form uses the event collection brand prefix added by
 * class-cgem-rsvp-form.php:
 *   CAF = CineArts Festival
 *   PBF = Pride BBQ Festival
 *   FGF = Friendsgiving Feast
 *   HHH = HO HO HOlidays
 *
 * The surrounding Elementor container, event heading, collection labels,
 * and decorative artwork remain outside CGEM and are not styled here.
 */

/* -------------------------------------------------------------------------- */
/* Collection theme variables                                                  */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-form {
  --cgem-form-bg: #18253F;
  --cgem-form-accent: #D8A447;
  --cgem-form-text: #FFFFFF;
  --cgem-form-muted: #D9DEE8;
  --cgem-form-input-bg: #FFFFFF;
  --cgem-form-input-text: #333333;
  --cgem-form-focus: #D8A447;
  --cgem-form-danger: #C95F32;
  --cgem-form-validation-copy: #D9DEE8;
  --cgem-form-mobile-section-title: var(--cgem-form-accent);
  --cgem-form-mobile-section-description: #557197;
  --cgem-form-radius: 14px;
}

/* CineArts Festival */
.cgem-rsvp-form--caf {
  --cgem-form-bg: #18253F;
  --cgem-form-accent: #D8A447;
  --cgem-form-text: #FFFFFF;
  --cgem-form-muted: #D9DEE8;
  --cgem-form-focus: #D8A447;
  --cgem-form-danger: #D8A447;
  --cgem-form-validation-copy: #D9DEE8;
}

/* Pride BBQ Festival */
.cgem-rsvp-form--pbf {
  --cgem-form-bg: #34213F;
  --cgem-form-accent: #F2B705;
  --cgem-form-text: #FFFFFF;
  --cgem-form-muted: #F0EAF3;
  --cgem-form-focus: #F2B705;
  --cgem-form-danger: #E40303;
  --cgem-form-validation-copy: #A86CC1;
  --cgem-form-mobile-section-title: #34213F;
  --cgem-form-mobile-section-description: #A86CC1;
}

/* Friendsgiving Feast */
.cgem-rsvp-form--fgf {
  --cgem-form-bg: #4A3728;
  --cgem-form-accent: #E97A3C;
  --cgem-form-text: #FFFFFF;
  --cgem-form-muted: #F6E9DD;
  --cgem-form-focus: #E97A3C;
  --cgem-form-danger: #B5482D;
  --cgem-form-validation-copy: #6F8F57;
  --cgem-form-mobile-section-title: #B5482D;
  --cgem-form-mobile-section-description: #6F8F57;
}

/* HO HO HOlidays */
.cgem-rsvp-form--hhh {
  --cgem-form-bg: #6F1D1B;
  --cgem-form-accent: #C9A24A;
  --cgem-form-text: #FFFFFF;
  --cgem-form-muted: #F7F3EA;
  --cgem-form-focus: #C9A24A;
  --cgem-form-danger: #6F1D1B;
  --cgem-form-validation-copy: #6F1D1B;
  --cgem-form-mobile-section-title: #2E6B4D;
  --cgem-form-mobile-section-description: #6F1D1B;
}

/* -------------------------------------------------------------------------- */
/* Update RSVP heading                                                        */
/* -------------------------------------------------------------------------- */

/* Collection-aware CGEM-generated Update RSVP heading/subheading. */
.cgem-rsvp-update .cgem-rsvp-update-title {
  margin: 0 0 6px;
  color: #D8A447;
  font-family: "Limelight", sans-serif;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cgem-rsvp-update > p {
  margin: 0 0 16px;
  color: #557197;
  font-size: 16px;
  line-height: 1.45;
}

.cgem-pbf-rsvp-update .cgem-rsvp-update-title {
  color: #5B2C83;
  font-family: "BM Kirang Haerang", sans-serif;
}

.cgem-pbf-rsvp-update > p {
  color: #A86CC1;
}

.cgem-fgf-rsvp-update .cgem-rsvp-update-title {
  color: #B5482D;
  font-family: "Knewave", sans-serif;
}

.cgem-fgf-rsvp-update > p {
  color: #6F8F57;
}

.cgem-hhh-rsvp-update .cgem-rsvp-update-title {
  color: #6F1D1B;
  font-family: "Mountains of Christmas", cursive;
}

.cgem-hhh-rsvp-update > p {
  color: #2E6B4D;
}

/* Invalid/expired Update My RSVP link — CAF presentation. */
.cgem-caf-rsvp-update-unavailable .cgem-rsvp-update-title {
  margin: 0 0 6px;
  color: #FFFFFF;
  font-family: "Limelight", sans-serif;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cgem-caf-rsvp-update-unavailable > p {
  margin: 0;
  color: #557197;
  font-size: 16px;
  line-height: 1.45;
}

/* Future event collections can override the unavailable-state typography
 * through their event-specific hooks without changing the markup. */
.cgem-pbf-rsvp-update-unavailable .cgem-rsvp-update-title { }
.cgem-fgf-rsvp-update-unavailable .cgem-rsvp-update-title { }
.cgem-hhh-rsvp-update-unavailable .cgem-rsvp-update-title { }

/* -------------------------------------------------------------------------- */
/* Form layout                                                                 */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.cgem-rsvp-form,
.cgem-rsvp-form * {
  box-sizing: border-box;
}

/* Desktop/tablet use two independent content columns plus a full-width
 * action row. Keeping the primary fields in their own wrapper lets the
 * optional comments textarea stay in the left column while the guest list
 * can grow independently on the right. The submit action then sits after
 * BOTH columns, so it is never lost above a +3/+4 guest list. */
.cgem-rsvp-form .cgem-rsvp-primary-column {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  align-self: start;
}

.cgem-rsvp-form .cgem-attendees {
  grid-column: 2 !important;
  grid-row: 1;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.cgem-rsvp-form .cgem-rsvp-comments-field {
  width: 100%;
  margin-top: 4px;
}

.cgem-rsvp-form .cgem-rsvp-submit-row {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  margin: 6px 0 0;
}

/* The heading is already supplied by the surrounding Elementor layout. */
.cgem-rsvp-form .cgem-attendees > h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile-only section headings. The desktop/tablet headings are supplied by
 * the surrounding Elementor layout and remain unchanged. */
.cgem-rsvp-mobile-section-title,
.cgem-rsvp-mobile-section-description {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* Field spacing and labels                                                    */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-form .cgem-rsvp-field,
.cgem-rsvp-form .cgem-rsvp-fieldset {
  margin: 0 0 10px;
}

.cgem-rsvp-form label,
.cgem-rsvp-form legend {
  display: block;
  margin: 0 0 5px;
  color: var(--cgem-form-text);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 400;
}

/* Required markers follow the normal field-label color by default. Actual
 * validation errors retain the separate CGEM error/danger treatment. */
.cgem-rsvp-form label span[aria-hidden="true"],
.cgem-rsvp-form legend span[aria-hidden="true"] {
  color: inherit;
}

/* CAF remains unchanged on its dark surface. */
.cgem-rsvp-form--caf label,
.cgem-rsvp-form--caf legend {
  color: #FFFFFF;
}

/* PBF / FGF / HHH use a stronger label hierarchy on their light RSVP surfaces.
 * Only field labels and legends are bold; radio/checkbox choice labels remain
 * normal weight. */
.cgem-rsvp-form--pbf .cgem-rsvp-field > label,
.cgem-rsvp-form--pbf .cgem-dynamic-field > label,
.cgem-rsvp-form--pbf .cgem-rsvp-fieldset > legend {
  color: #34213F;
  font-weight: 700;
}

.cgem-rsvp-form--fgf .cgem-rsvp-field > label,
.cgem-rsvp-form--fgf .cgem-dynamic-field > label,
.cgem-rsvp-form--fgf .cgem-rsvp-fieldset > legend {
  color: #4A3728;
  font-weight: 700;
}

.cgem-rsvp-form--hhh .cgem-rsvp-field > label,
.cgem-rsvp-form--hhh .cgem-dynamic-field > label,
.cgem-rsvp-form--hhh .cgem-rsvp-fieldset > legend {
  color: #6F1D1B;
  font-weight: 700;
}

/* Required asterisks use one shared functional color across the three
 * permanent-event RSVP forms for consistent visibility. CAF is excluded. */
.cgem-rsvp-form--pbf .cgem-rsvp-field > label > span[aria-hidden="true"],
.cgem-rsvp-form--pbf .cgem-dynamic-field > label > span[aria-hidden="true"],
.cgem-rsvp-form--pbf .cgem-rsvp-fieldset > legend > span[aria-hidden="true"],
.cgem-rsvp-form--fgf .cgem-rsvp-field > label > span[aria-hidden="true"],
.cgem-rsvp-form--fgf .cgem-dynamic-field > label > span[aria-hidden="true"],
.cgem-rsvp-form--fgf .cgem-rsvp-fieldset > legend > span[aria-hidden="true"],
.cgem-rsvp-form--hhh .cgem-rsvp-field > label > span[aria-hidden="true"],
.cgem-rsvp-form--hhh .cgem-dynamic-field > label > span[aria-hidden="true"],
.cgem-rsvp-form--hhh .cgem-rsvp-fieldset > legend > span[aria-hidden="true"] {
  color: #B5482D;
}

.cgem-rsvp-form .cgem-optional {
  color: var(--cgem-form-muted);
  font-size: .9em;
  font-weight: 400;
}

/* Guest number remains a distinct second brand color while the field name
 * follows the bold primary label treatment above. */
.cgem-rsvp-form .cgem-guest-number {
  font-weight: 700 !important;
}

.cgem-rsvp-form--caf .cgem-guest-number { color: #D8A447; }
.cgem-rsvp-form--pbf .cgem-guest-number { color: #A86CC1; }
.cgem-rsvp-form--fgf .cgem-guest-number { color: #6F8F57; }
.cgem-rsvp-form--hhh .cgem-guest-number { color: #2E6B4D; }

/* Optional markers match the main field-label color but intentionally stay
 * normal weight. */
.cgem-rsvp-form--pbf .cgem-optional { color: #34213F; }
.cgem-rsvp-form--fgf .cgem-optional { color: #4A3728; }
.cgem-rsvp-form--hhh .cgem-optional { color: #6F1D1B; }

/* -------------------------------------------------------------------------- */
/* Text inputs, select, and textarea                                           */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-form input[type="text"],
.cgem-rsvp-form input[type="email"],
.cgem-rsvp-form select,
.cgem-rsvp-form textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 14px;
  min-height: 44px;
  border: 1px solid var(--cgem-form-accent);
  border-radius: var(--cgem-form-radius);
  background: var(--cgem-form-input-bg);
  color: var(--cgem-form-input-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Standardize control borders across text, email, select, and textarea.
 * Higher specificity prevents Elementor/theme select rules from diverging. */
.cgem-rsvp-form.cgem-rsvp-form--caf input[type="text"],
.cgem-rsvp-form.cgem-rsvp-form--caf input[type="email"],
.cgem-rsvp-form.cgem-rsvp-form--caf select,
.cgem-rsvp-form.cgem-rsvp-form--caf textarea { border-color: var(--e-global-color-f9d2424) !important; }

.cgem-rsvp-form.cgem-rsvp-form--pbf input[type="text"],
.cgem-rsvp-form.cgem-rsvp-form--pbf input[type="email"],
.cgem-rsvp-form.cgem-rsvp-form--pbf select,
.cgem-rsvp-form.cgem-rsvp-form--pbf textarea { border-color: var(--e-global-color-f36f95d) !important; }

.cgem-rsvp-form.cgem-rsvp-form--fgf input[type="text"],
.cgem-rsvp-form.cgem-rsvp-form--fgf input[type="email"],
.cgem-rsvp-form.cgem-rsvp-form--fgf select,
.cgem-rsvp-form.cgem-rsvp-form--fgf textarea { border-color: var(--e-global-color-f350775) !important; }

.cgem-rsvp-form.cgem-rsvp-form--hhh input[type="text"],
.cgem-rsvp-form.cgem-rsvp-form--hhh input[type="email"],
.cgem-rsvp-form.cgem-rsvp-form--hhh select,
.cgem-rsvp-form.cgem-rsvp-form--hhh textarea { border-color: var(--e-global-color-ffe9da3) !important; }

.cgem-rsvp-form textarea {
  min-height: 96px;
  padding-top: 10px;
  padding-bottom: 10px;
  resize: vertical;
}

.cgem-rsvp-form input::placeholder,
.cgem-rsvp-form textarea::placeholder,
.cgem-rsvp-form input::-webkit-input-placeholder,
.cgem-rsvp-form textarea::-webkit-input-placeholder,
.cgem-rsvp-form input::-moz-placeholder,
.cgem-rsvp-form textarea::-moz-placeholder,
.cgem-rsvp-form input:-ms-input-placeholder,
.cgem-rsvp-form textarea:-ms-input-placeholder {
  color: #777777 !important;
  -webkit-text-fill-color: #777777 !important;
  opacity: 1 !important;
}

/* Keep placeholder text visible even when Elementor, Hello Elementor,
 * Safari/WebKit, or other inherited form rules try to alter it. */
.cgem-rsvp-form input[placeholder]:placeholder-shown,
.cgem-rsvp-form textarea[placeholder]:placeholder-shown {
  -webkit-text-fill-color: var(--cgem-form-input-text);
}

.cgem-rsvp-form input[placeholder]:placeholder-shown::placeholder,
.cgem-rsvp-form textarea[placeholder]:placeholder-shown::placeholder {
  color: #777777 !important;
  -webkit-text-fill-color: #777777 !important;
  opacity: 1 !important;
}
.cgem-rsvp-form input[type="text"]:focus,
.cgem-rsvp-form input[type="email"]:focus,
.cgem-rsvp-form select:focus,
.cgem-rsvp-form textarea:focus {
  border-color: var(--cgem-form-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cgem-form-focus) 25%, transparent);
}

.cgem-rsvp-form select {
  appearance: none;
  padding-right: 48px;
  background-image: linear-gradient(45deg, transparent 50%, #444 50%), linear-gradient(135deg, #444 50%, transparent 50%);
  background-position: calc(100% - 21px) 25px, calc(100% - 15px) 25px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------- */
/* RSVP response radio buttons                                                 */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-form .cgem-rsvp-fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

.cgem-rsvp-form .cgem-rsvp-fieldset legend {
  padding: 0;
}

.cgem-rsvp-form .cgem-rsvp-fieldset label,
.cgem-rsvp-form .cgem-dynamic-field > label:has(input[type="radio"]),
.cgem-rsvp-form .cgem-dynamic-field > label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0 18px 0 0;
  cursor: pointer;
}

/* Radio/checkbox values are answers, not field labels. Keep them regular
 * weight and readable on each light event surface. CAF intentionally keeps
 * its existing dark-surface value treatment. */
.cgem-rsvp-form--pbf .cgem-rsvp-fieldset label,
.cgem-rsvp-form--pbf .cgem-dynamic-field > label:has(input[type="radio"]),
.cgem-rsvp-form--pbf .cgem-dynamic-field > label:has(input[type="checkbox"]) {
  color: #34213F;
  font-weight: 400;
}

.cgem-rsvp-form--fgf .cgem-rsvp-fieldset label,
.cgem-rsvp-form--fgf .cgem-dynamic-field > label:has(input[type="radio"]),
.cgem-rsvp-form--fgf .cgem-dynamic-field > label:has(input[type="checkbox"]) {
  color: #4A3728;
  font-weight: 400;
}

.cgem-rsvp-form--hhh .cgem-rsvp-fieldset label,
.cgem-rsvp-form--hhh .cgem-dynamic-field > label:has(input[type="radio"]),
.cgem-rsvp-form--hhh .cgem-dynamic-field > label:has(input[type="checkbox"]) {
  color: #6F1D1B;
  font-weight: 400;
}

.cgem-rsvp-form input[type="radio"],
.cgem-rsvp-form input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0 7px 0 0;
  accent-color: var(--cgem-form-accent);
}

/* -------------------------------------------------------------------------- */
/* Guest fields                                                                */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-form .cgem-attendees > [data-cgem-guest-list] {
  width: 100%;
}

.cgem-rsvp-form .cgem-attendee {
  width: 100%;
  margin: 0 0 10px;
}

.cgem-rsvp-form .cgem-attendee-template[data-cgem-guest-template] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Dynamic fields                                                              */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-form .cgem-dynamic-field {
  margin: 0 0 10px;
}

.cgem-rsvp-form .cgem-dynamic-field > label {
  display: block;
}

.cgem-rsvp-form .cgem-dynamic-field > label:not(:has(input)) {
  margin-bottom: 5px;
}

/* -------------------------------------------------------------------------- */
/* Submit button — finalized collection Primary CTA color states               */
/*                                                                            */
/* Geometry and typography intentionally remain owned by Elementor Global     */
/* Settings / the site-wide button system. CGEM controls only layout width,   */
/* collection colors, borders, interaction states, and focus visibility.      */
/*                                                                            */
/* Surface mapping:                                                          */
/*   CAF = Dark Surface Primary CTA                                           */
/*   PBF / FGF / HHH = Light Surface Primary CTA                             */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* CAF — Dark Surface / Primary CTA */
.cgem-rsvp-form--caf button[type="submit"] {
  background-color: #D8A447;
  border-color: #D8A447;
  color: #011022;
}

.cgem-rsvp-form--caf button[type="submit"]:hover {
  background-color: #557197;
  border-color: #557197;
  color: #FFFFFF;
}

.cgem-rsvp-form--caf button[type="submit"]:active {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #011022;
}

/* PBF — Light Surface / Primary CTA */
.cgem-rsvp-form--pbf button[type="submit"] {
  background-color: #5B2C83;
  border-color: #5B2C83;
  color: #FFFFFF;
}

.cgem-rsvp-form--pbf button[type="submit"]:hover {
  background-color: #A86CC1;
  border-color: #A86CC1;
  color: #FFFFFF;
}

.cgem-rsvp-form--pbf button[type="submit"]:active {
  background-color: #F2B705;
  border-color: #F2B705;
  color: #34213F;
}

/* FGF — Light Surface / Primary CTA */
.cgem-rsvp-form--fgf button[type="submit"] {
  background-color: #4A3728;
  border-color: #4A3728;
  color: #FFFFFF;
}

.cgem-rsvp-form--fgf button[type="submit"]:hover {
  background-color: #B5482D;
  border-color: #B5482D;
  color: #FFFFFF;
}

.cgem-rsvp-form--fgf button[type="submit"]:active {
  background-color: #6F8F57;
  border-color: #6F8F57;
  color: #FFFFFF;
}

/* HHH — Light Surface / Primary CTA */
.cgem-rsvp-form--hhh button[type="submit"] {
  background-color: #6F1D1B;
  border-color: #6F1D1B;
  color: #FFFFFF;
}

.cgem-rsvp-form--hhh button[type="submit"]:hover {
  background-color: #2E6B4D;
  border-color: #2E6B4D;
  color: #FFFFFF;
}

.cgem-rsvp-form--hhh button[type="submit"]:active {
  background-color: #C9A24A;
  border-color: #C9A24A;
  color: #333333;
}

.cgem-rsvp-form button[type="submit"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.cgem-rsvp-form button[type="submit"]:disabled {
  opacity: .7;
  cursor: wait;
}

.cgem-rsvp-processing {
  margin-left: .5rem;
  color: var(--cgem-form-muted);
  font-size: .9em;
  opacity: .75;
}

/* -------------------------------------------------------------------------- */
/* Form validation/result messaging                                            */
/* -------------------------------------------------------------------------- */

.cgem-rsvp-result {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 18px;
  border: 1px solid var(--cgem-form-danger);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cgem-form-danger) 10%, transparent);
  box-sizing: border-box;
}

.cgem-rsvp-result h3 {
  margin: 0 0 4px;
  color: var(--cgem-form-danger);
  font-family: "Lato", sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}

.cgem-rsvp-result p {
  margin: 0;
  color: var(--cgem-form-validation-copy);
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
}

/* A server-side validation notice is a direct child of the two-column form.
 * When present, reserve the first grid row for the notice, keep the notice
 * aligned to the left-column width, move both content columns down together,
 * and keep the submit action below the longer column. */
.cgem-rsvp-form:has(> .cgem-rsvp-result) > .cgem-rsvp-result {
  grid-column: 1;
  grid-row: 1;
}

.cgem-rsvp-form:has(> .cgem-rsvp-result) > .cgem-rsvp-primary-column,
.cgem-rsvp-form:has(> .cgem-rsvp-result) > .cgem-attendees {
  grid-row: 2;
}

.cgem-rsvp-form:has(> .cgem-rsvp-result) > .cgem-rsvp-submit-row {
  grid-row: 3;
}

/* -------------------------------------------------------------------------- */
/* CGEM state/result behavior — preserve existing functionality               */
/* -------------------------------------------------------------------------- */

#RSVP-Messaging,
#RSVP-Results,
#RSVP-Pre-Opening,
#RSVP-At-Capacity,
#RSVP-Post-Opening,
#RSVP-Yes-New,
#RSVP-Yes-Updated,
#RSVP-No-New {
  display: none !important;
}

body.cgem-rsvp-state-not_yet_open #RSVP-Messaging,
body.cgem-rsvp-state-full #RSVP-Messaging,
body.cgem-rsvp-state-closed #RSVP-Messaging {
  display: flex !important;
}

body.cgem-rsvp-state-not_yet_open #RSVP-Pre-Opening,
body.cgem-rsvp-state-full #RSVP-At-Capacity,
body.cgem-rsvp-state-closed #RSVP-Post-Opening {
  display: flex !important;
}

/* Existing valid RSVP updates remain accessible when event capacity is full. */
body.cgem-rsvp-state-full:has(.cgem-rsvp-update) #RSVP-Messaging,
body.cgem-rsvp-state-full:has(.cgem-rsvp-update) #RSVP-At-Capacity {
  display: none !important;
}

body.cgem-rsvp-result-yes-new #RSVP-Results,
body.cgem-rsvp-result-yes-updated #RSVP-Results,
body.cgem-rsvp-result-no-new #RSVP-Results {
  display: flex !important;
}

body.cgem-rsvp-result-yes-new #RSVP-Yes-New,
body.cgem-rsvp-result-yes-updated #RSVP-Yes-Updated,
body.cgem-rsvp-result-no-new #RSVP-No-New {
  display: flex !important;
}

body[class*="cgem-rsvp-result-"] #RSVP-Messaging,
body[class*="cgem-rsvp-result-"] #RSVP-Form {
  display: none !important;
}

.cgem-rsvp-row-inactive,
.cgem-rsvp-inactive {
  display: none !important;
}

/* Guest Potluck populated and empty-category output. */
.cgem-potluck-list,
.cgem-potluck-entry,
.cgem-potluck-empty {
  width: 100%;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* ---------------------------------------------------------------------- */
  /* Mobile-only layout                                                     */
  /*                                                                      */
  /* Mobile is deliberately a normal block flow rather than the desktop   */
  /* two-column grid. This keeps Elementor/theme sizing from constraining  */
  /* labels and dynamically-created guest fields.                         */
  /* ---------------------------------------------------------------------- */

  .cgem-rsvp-form {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .cgem-rsvp-form > *,
  .cgem-rsvp-form .cgem-rsvp-primary-column,
  .cgem-rsvp-form .cgem-rsvp-field,
  .cgem-rsvp-form .cgem-rsvp-fieldset,
  .cgem-rsvp-form .cgem-attendees,
  .cgem-rsvp-form > p:last-child,
  .cgem-rsvp-form .cgem-rsvp-submit-row,
  .cgem-rsvp-form .cgem-rsvp-result,
  .cgem-rsvp-form .cgem-rsvp-mobile-section-title,
  .cgem-rsvp-form .cgem-rsvp-mobile-guest-heading,
  .cgem-rsvp-form .cgem-rsvp-mobile-section-description,
  .cgem-rsvp-form [data-cgem-guest-list],
  .cgem-rsvp-form .cgem-attendee {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  /* On mobile there is no left/right column. Expose the primary-column
   * children to the one-column flow, then keep the catch-all comments field
   * after Guest Information and immediately before the final submit action. */
  .cgem-rsvp-form .cgem-rsvp-primary-column {
    display: contents !important;
  }

  .cgem-rsvp-form .cgem-attendees {
    order: 1;
  }

  .cgem-rsvp-form .cgem-rsvp-comments-field {
    order: 2;
  }

  .cgem-rsvp-form .cgem-rsvp-submit-row {
    order: 3;
  }

  .cgem-rsvp-mobile-section-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--cgem-form-mobile-section-title) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .cgem-rsvp-mobile-my-info {
    margin-bottom: 12px !important;
  }

  .cgem-rsvp-mobile-guest-heading {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    clear: both !important;
    float: none !important;
  }

  .cgem-rsvp-mobile-guest-heading .cgem-rsvp-mobile-section-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 2px !important;
  }

  .cgem-rsvp-mobile-section-description {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cgem-form-mobile-section-description) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .cgem-rsvp-result {
    display: block !important;
    width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 0 14px !important;
  }

  .cgem-rsvp-form .cgem-rsvp-field,
  .cgem-rsvp-form .cgem-rsvp-fieldset {
    display: block !important;
    width: 100% !important;
    grid-column: auto !important;
    float: none !important;
    clear: both !important;
  }

  /* Conditional visibility remains authoritative on mobile.
   * Responsive block layout must never override CGEM's hidden state. */
  .cgem-rsvp-form [hidden] {
    display: none !important;
  }

  /* Built-in response visibility uses inline display:none rather than the
   * hidden attribute. Keep that authoritative over mobile block layout. */
  .cgem-rsvp-form [data-cgem-show-for="yes"][style*="display: none"] {
    display: none !important;
  }

  .cgem-rsvp-form label,
  .cgem-rsvp-form legend,
  .cgem-rsvp-form .cgem-attendee h4,
  .cgem-rsvp-form .cgem-dynamic-field > label {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .cgem-rsvp-form .cgem-rsvp-fieldset label,
  .cgem-rsvp-form .cgem-dynamic-field > label:has(input[type="radio"]),
  .cgem-rsvp-form .cgem-dynamic-field > label:has(input[type="checkbox"]) {
    width: auto !important;
  }

  .cgem-rsvp-form .cgem-attendees {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
    clear: both !important;
    float: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  .cgem-rsvp-form .cgem-attendees[hidden] {
    display: none !important;
  }

  .cgem-rsvp-form [data-cgem-guest-list] {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
  }

  .cgem-rsvp-form .cgem-attendee {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  .cgem-rsvp-form .cgem-attendee .cgem-rsvp-field,
  .cgem-rsvp-form .cgem-attendee .cgem-dynamic-field {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
  }

  .cgem-rsvp-form .cgem-attendee .cgem-rsvp-field label,
  .cgem-rsvp-form .cgem-attendee .cgem-dynamic-field > label {
    display: block !important;
    width: 100% !important;
  }

  .cgem-rsvp-form .cgem-rsvp-field input[type="text"],
  .cgem-rsvp-form .cgem-rsvp-field input[type="email"],
  .cgem-rsvp-form .cgem-rsvp-field select,
  .cgem-rsvp-form .cgem-rsvp-field textarea,
  .cgem-rsvp-form .cgem-attendee input[type="text"],
  .cgem-rsvp-form .cgem-attendee input[type="email"],
  .cgem-rsvp-form .cgem-attendee select,
  .cgem-rsvp-form .cgem-attendee textarea {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 46px;
  }

  .cgem-rsvp-form > p:last-child {
    display: block !important;
    width: 100% !important;
    grid-column: auto !important;
    margin: 6px 0 0 !important;
  }
}

/* v1.10.53 corrective: newsletter consent and submission message only. */
.cgem-rsvp-form .cgem-rsvp-primary-column .cgem-rsvp-mailchimp-consent { margin: 12px 0 4px; font-family: inherit; }
.cgem-rsvp-form .cgem-rsvp-mailchimp-consent label { display: block; font-family: inherit; }
.cgem-rsvp-form .cgem-rsvp-mailchimp-helper { font-size: .9em; font-weight: 400; }
.cgem-rsvp-form--caf .cgem-rsvp-mailchimp-consent label { color: #FFFFFF; font-weight: 400; }
.cgem-rsvp-form--caf .cgem-rsvp-mailchimp-helper { color: #557197; }
.cgem-rsvp-form--pbf .cgem-rsvp-mailchimp-consent label { color: #34213F; font-weight: 700; }
.cgem-rsvp-form--pbf .cgem-rsvp-mailchimp-helper { color: #A86CC1; }
.cgem-rsvp-form--fgf .cgem-rsvp-mailchimp-consent label { color: #4A3728; font-weight: 700; }
.cgem-rsvp-form--fgf .cgem-rsvp-mailchimp-helper { color: #6F8F57; }
.cgem-rsvp-form--hhh .cgem-rsvp-mailchimp-consent label { color: #6F1D1B; font-weight: 700; }
.cgem-rsvp-form--hhh .cgem-rsvp-mailchimp-helper { color: #2E6B4D; }
.cgem-rsvp-form--caf .cgem-rsvp-processing { color: #557197; opacity: 1; }
.cgem-rsvp-form--pbf .cgem-rsvp-processing { color: #A86CC1; opacity: 1; }
.cgem-rsvp-form--fgf .cgem-rsvp-processing { color: #6F8F57; opacity: 1; }
.cgem-rsvp-form--hhh .cgem-rsvp-processing { color: #2E6B4D; opacity: 1; }
.cgem-rsvp-result ul { margin: 8px 0 0; padding-left: 22px; color: var(--cgem-form-validation-copy); }
.cgem-rsvp-form .cgem-rsvp-field-missing { outline: 2px solid var(--cgem-form-danger); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 767px) {
  .cgem-rsvp-form .cgem-rsvp-mailchimp-consent { order: 3; }
  .cgem-rsvp-form .cgem-rsvp-submit-row { order: 4; }
}