/* ==========================================================================
   1. GLOBAL & RESET STYLES
   ========================================================================== */

*,
*:before,
*:after {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input,
input:before,
input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
   2. LAYOUT & CONTAINERS
   ========================================================================== */

.rsvp-lookup-section,
.rsvp-response-section,
#wrsvp-response,
#wrsvp-lookup-message,
#wrsvp-result,
#wrsvp-form,
#rsvp-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 1 !important;
  text-align: center !important;
}

.rsvp-lookup-section,
#wrsvp-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

div#wrsvp-response {
  padding: 0 20px;
}

/* Force word wrap on all text elements */
.rsvp-lookup-section *,
.rsvp-response-section *,
#wrsvp-response * {
  max-width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   3. INPUTS & BUTTONS
   ========================================================================== */

.rsvp-lookup-section input[type="text"],
.rsvp-response-section input[type="text"],
#wrsvp-form input,
#rsvp-form input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px 16px;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
  display: block !important;
  color: #555555 !important;
  border-color: #e0e0e0 !important;
}

.rsvp-lookup-section button,
.rsvp-response-section button {
  padding: 12px 28px;
  cursor: pointer;
  color: #ffffff !important;
  background-color: #c78665 !important;
  border: none;
  margin-top: 15px !important;
  margin-bottom: 30px !important; /* Added space after submit button */
}

.rsvp-lookup-section form br {
  display: none !important;
}

/* ==========================================================================
   4. RSVP FORM SECTIONS & RADIO BUTTONS
   ========================================================================== */

.rsvp-status-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important; /* Reduced space between title and choices */
  margin-top: 20px !important;
}

.rsvp-status-section p {
  margin-bottom: 4px !important; /* Tightens space above radio choices */
}

#wrsvp-response .rsvp-status-section label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 2px 0 !important; /* Reduced vertical space between radio buttons */
  color: #4a4a4a !important;
}

#wrsvp-response .rsvp-status-section input[type="radio"] {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
}

.rsvp-song-section {
  margin-top: 20px !important;
}

.guestName {
  line-height: 1.2;
}

/* ==========================================================================
   5. TYPOGRAPHY & COLORS
   ========================================================================== */

#wrsvp-response {
  font-family: "Playfair Display", Georgia, serif !important;
}

#wrsvp-response input,
#wrsvp-response button {
  font-family: "Montserrat", Helvetica, sans-serif !important;
}

#wrsvp-response,
#wrsvp-response p,
#wrsvp-response label,
#wrsvp-result,
#wrsvp-result p {
  color: #4a4a4a !important; /* Soft Charcoal */
}

#wrsvp-response h3,
#wrsvp-response b,
#wrsvp-response strong,
#wrsvp-result h3,
#wrsvp-result b {
  color: #2d241e !important; /* Warm Espresso Accent */
}

/* ==========================================================================
   6. MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
  .rsvp-lookup-section,
  .rsvp-response-section,
  #wrsvp-response,
  #wrsvp-result {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}