/* RSVP Screen and Thank You Styles */

/* RSVP Closed Styles */

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f0f4f8;
  text-align: center;
  padding: 2rem;
  color: #333;
}

.rsvp-banner {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.status-header {
  font-size: 1.6rem;
  color: #c0392b;
  margin-bottom: 1rem;
}

.event-info-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin: 1rem auto;
  max-width: 500px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: left;
}

.event-info-card p {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

.reason-message {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: #555;
}

.return-link {
  display: inline-block;
  margin-top: 2rem;
  background-color: #3498db;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

.return-link:hover {
  background-color: #2980b9;
}



/* Thank You Styles */

.thank-you-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #f6fff8;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  text-align: center;
}

.thank-you-header {
  font-size: 2rem;
  font-weight: 700;
  color: #198754;
  margin-bottom: 1rem;
}

.thank-you-message,
.thank-you-footer,
.thank-you-notes {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1rem;
}

.thank-you-divider {
  margin: 2rem 0 1rem;
  border: none;
  border-top: 1px solid #888;
}

.btn-outline-success {
  margin-top: 1.5rem;
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-outline-success:hover {
  background-color: #28a745;
  color: #fff;
  transform: translateY(-1px);
}

.subtle-reminder {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.update-header {
  margin-top: 2rem;
  font-size: 1.5rem;
  color: #0d6efd;
}

.update-form {
  text-align: left;
  margin-top: 1rem;
}

/* RSVP Status Badge */
.rsvp-status-line {
  text-align: center;
  margin: 2rem 0;
}

.rsvp-status-badge {
  display: inline-block;
  font-size: 2.25rem;
  font-weight: 700;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: badgePop 0.4s ease-out;
  color: #fff;
}

.rsvp-status-badge.attending {
  background-color: #28a745;
}

.rsvp-status-badge.not_attending {
  background-color: #dc3545;
}

.rsvp-status-badge.maybe {
  background-color: #ffc107;
  color: #212529;
}

@keyframes badgePop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}




/* RSVP Summary Block */


.rsvp-status {
  background-color: #f6fff8;
  border-left: 4px solid #198754;
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 1.1rem;
  font-weight: 500;
  color: #155724;
}

.rsvp-yes {
  color: #198754;
}

.rsvp-no {
  color: #dc3545;
}

.rsvp-unknown {
  color: #6c757d;
}



.section-title {
  font-size: 1.25rem;         /* Smaller than main header */
  font-weight: 500;           /* Medium weight */
  color: #198754;             /* Still on-brand green */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #d4edda;
  padding-bottom: 0.25rem;
  text-transform: none;       /* Remove uppercase */
  letter-spacing: normal;
}




.rsvp-summary {
  background-color: #f0fdf4;
  border: 1px solid #cce5cc;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.rsvp-summary p {
  margin: 0.5rem 0;
  font-weight: 500;
}

/* Event Info Block */
.event-info {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.event-info p {
  margin: 0.5rem 0;
}





/* Banner */
.rsvp-banner {
  text-align: center;
  font-size: 2rem;
  margin: 2rem 0 1rem;
  color: #2c3e50;
}

/* Deadline notice */
.cutoff-passed {
  background-color: #ffe0e0;
  border: 1px solid #ffb3b3;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  color: #b00020;
}

/* Event info block */
.event-info,
.golfer-info {
  background-color: #f4f4f4;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.5;
}

.event-info p,
.golfer-info p {
  margin: 0.5rem 0;
}

/* RSVP status */
.rsvp-status {
  font-weight: bold;
  margin-bottom: 1rem;
  color: #2e7d32;
}

/* Form layout */
form {
  background-color: #fff;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

form div {
  margin-bottom: 1rem;
}

form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

form select,
form textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.notes-box {
  resize: vertical;
  min-height: 80px;
}

/* Submit button */
button[type="submit"] {
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button[type="submit"]:hover {
  background-color: #1565c0;
}

/* RSVP deadline */
.rsvp-deadline {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  margin-top: 2rem;
}

/* ===========================================
 * Mobile-specific overrides for public RSVP
 * ===========================================
 * Additive tweaks for very small viewports to reduce padding,
 * let cards go full width, and keep headings/CTAs readable.
 */
@media (max-width: 576px) {
  /* Softer body padding on small screens */
  body {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Let primary containers/cards use the full width */
  .event-info-card,
  .thank-you-container,
  .event-info,
  .golfer-info,
  form {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  /* Headings and banners: scale down slightly and tighten line-height */
  h1,
  h2,
  .rsvp-banner {
    font-size: 1.6rem;
    line-height: 1.25;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .cutoff-passed,
  .status-header,
  .alert {
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.75rem 0.85rem;
  }

  /* Form spacing and controls */
  form div {
    margin-bottom: 0.75rem;
  }

  form label {
    margin-bottom: 0.35rem;
  }

  form select,
  form textarea,
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"] {
    width: 100%;
  }

  /* Primary CTA and action buttons: full-width, easy to tap */
  button[type="submit"],
  .return-link {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    font-size: 1rem;
  }

  /* Tighten general spacing so content fits without horizontal scroll */
  .thank-you-container,
  .event-info-card {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Mobile polish: RSVP form layout */
@media (max-width: 575.98px) {
  /* Main RSVP container/card spacing on phones */
  .rsvp-card,
  .rsvp-layout-main,
  .event-info-card {
    padding: 1rem 0.75rem;
    margin-bottom: 1rem;
  }

  /* Title on the RSVP page */
  #rsvp-cta-title {
    font-size: 1.35rem;
    line-height: 1.25;
    text-align: left;
    margin-bottom: 0.75rem;
  }

  /* Capacity / waitlist / alert banners */
  .capacity-banner,
  .waitlist-banner,
  .rsvp-banner,
  .alert {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* Form spacing and label readability */
  .rsvp-form .form-group,
  .rsvp-form .form-floating {
    margin-bottom: 0.75rem;
  }

  .rsvp-form .form-label {
    font-size: 0.95rem;
  }

  .rsvp-form input[type="text"],
  .rsvp-form input[type="email"],
  .rsvp-form select,
  .rsvp-form textarea {
    width: 100%;
  }

  /* Primary CTA: full-width, comfortable tap target */
  .rsvp-form .btn-primary,
  .rsvp-submit-btn {
    width: 100%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
  }

  /* Tighten footer / minor text spacing on mobile */
  .rsvp-deadline,
  .rsvp-footer-note {
    font-size: 0.9rem;
    line-height: 1.35;
    margin-top: 1.25rem;
  }
}