/* CSS Variables & Design System */
:root {
  /* Core Colors */
  --main-color: #4f46e5;      /* Indigo - Primary brand color */
  --main-color-dark: #4338ca;  /* Darker indigo - Hover states */
  --accent-color: #fec241;    /* Amber - Secondary brand color */
  --text-color: #333333;      /* Dark gray - Main text */
  --text-light: #6b7280;      /* Medium gray - Secondary text */
  --bg-color: #f9fafb;        /* Light gray - Background */
  --bg-light: #ffffff;        /* White - Card/component background */
  --border-color: #e5e7eb;    /* Light gray - Borders */
  --error-color: #ef4444;     /* Red - Error states */
  --success-color: #10b981;   /* Green - Success states */
  --danger-color: #dc2626;    /* Red - Danger/delete buttons */
  
  /* Category Colors */
  --appetizer-color: #FFCAA3;  /* Peach */
  --entree-color: #88DFFF;     /* Light blue */
  --side-dish-color: #FFEB99;  /* Light yellow */
  --dessert-color: #FFBAD6;    /* Pink */
  --drink-color: #A5F8E7;      /* Mint */
  --other-color: #CCCCCC;      /* Light gray */
  
  /* Dietary Colors */
  --vegetarian-color: #C1EAB3;    /* Light green */
  --vegan-color: #DEFF99;         /* Yellow-green */
  --gluten-free-color: #FFD6A5;   /* Light orange */
  --dairy-free-color: #E6C8FF;    /* Light purple */
  --nut-free-color: #A5D6FF;      /* Light blue */
  
  /* Spacing (Mobile-first) */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-xxl: 3rem;     /* 48px */
  
  /* Typography (Mobile-first) */
  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Quicksand', sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px - Base size */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-xxl: 1.5rem;    /* 24px */
  
  /* Shapes */
  --border-radius-sm: 0.25rem;   /* 4px */
  --border-radius-md: 0.375rem;  /* 6px */
  --border-radius-lg: 0.5rem;    /* 8px */
  --border-radius-xl: 1rem;      /* 16px */
  --border-radius-full: 9999px;  /* Fully rounded (circles) */
  
  /* Layout (Mobile-first) */
  --header-height: 64px;       /* Smaller on mobile */
  --footer-height: 50px;       /* Footer height */
  --content-padding: 1rem;     /* Padding for content areas */
  --container-max-width: 100%; /* Full width on mobile */
  --card-spacing: 0.75rem;     /* Tighter spacing on mobile */
  --button-height: 48px;       /* Touch-friendly button height */
  --icon-size: 24px;           /* Touch-friendly icon size */
  --fab-size: 56px;            /* Floating action button size */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-speed: 0.3s;
}

/* Tablet Adjustments */
@media (min-width: 768px) {
  :root {
    --header-height: 72px;
    --content-padding: 1.5rem;
    --container-max-width: 90%;
    --card-spacing: 1rem;
    --font-size-xxl: 1.75rem;
  }
}

/* Desktop Adjustments */
@media (min-width: 1024px) {
  :root {
    --header-height: 80px;
    --content-padding: 2rem;
    --container-max-width: 1200px;
    --card-spacing: 1.25rem;
    --font-size-xxl: 2rem;
  }
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--font-size-md);
  color: var(--text-color);
  line-height: 1.5;
  background-color: var(--bg-color);
  background-image: url('../assets/background-image.png');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

a {
  color: var(--main-color);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover {
  color: var(--accent-color);
}

/* Layout Classes */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.content-area {
  flex: 1 0 auto; /* flex-grow: 1, flex-shrink: 0, flex-basis: auto */
  padding-top: var(--header-height);
  padding-bottom: var(--space-md);
  width: 100%;
  box-sizing: border-box;
}

/* The app container should take the full height */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Use viewport height instead of % */
}
/* Header Styles */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--main-color);
  color: white;
  z-index: 100;
  display: flex;
  align-items: center;
}

.app-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max-width);
  width: 100%;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: calc(var(--header-height) - 24px);
  max-width: 140px;
}

.nav-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  margin-right: 0; /* Ensure no extra margin pushes it right */
  padding-right: var(--space-sm); /* or try var(--space-md) for more spacing */
}

.btn-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-lg);
}

.user-avatar {
  width: calc(var(--header-height) - 24px);
  height: calc(var(--header-height) - 24px);
  border-radius: var(--border-radius-full);
  object-fit: cover;
  margin: 0; /* Remove any margin that might affect positioning */
  margin-right: 0.25rem; /* A little spacing if needed */
}

/* Footer Styles */
.app-footer {
  height: var(--footer-height);
  background-color: var(--accent-color);
  color: var(--text-color);
  display: flex;
  align-items: center;
  text-align: center;
  font-size: var(--font-size-sm);
  width: 100%;
  z-index: 90;
  flex-shrink: 0; /* Prevent the footer from shrinking */
}

/* Login View Styles - ENHANCED */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  padding: var(--space-xl) var(--content-padding);
}

.login-logo {
  max-width: 240px;
  margin-bottom: var(--space-xl);
  animation: fadeIn 1s ease-in-out;
}

.tagline {
  font-family: var(--heading-font);
  font-size: var(--font-size-lg);
  font-weight: 500;
  margin-bottom: var(--space-lg);
  color: var(--text-color);
  line-height: 1.4;
  max-width: 300px;
  animation: fadeIn 1.2s ease-in-out;
}

.app-description {
  margin: var(--space-lg) 0;
  color: var(--text-color);
  font-size: var(--font-size-md);
  line-height: 1.5;
  max-width: 300px;
  animation: fadeIn 1.4s ease-in-out;
}

.forgot-password-link {
  display: block;
  text-align: right;
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
  color: var(--main-color);
}

.forgot-password-message {
  margin-bottom: var(--space-md);
}

/* For tablet and up */
@media (min-width: 768px) {
  .tagline {
    font-size: var(--font-size-xl);
    max-width: 400px;
  }
  
  .app-description {
    font-size: var(--font-size-lg);
    max-width: 400px;
  }
}

/* Advertising Callout Box */
.advertising-callout {
  margin-top: var(--space-xl);
  animation: fadeIn 1.6s ease-in-out;
  display: flex;
  justify-content: center;
}

.advertising-link {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  background: white;
  color: var(--main-color);
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: 2px solid rgba(91, 109, 205, 0.2);
  white-space: nowrap;
}

.advertising-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border-color: #fec241; /* Yellow border */
  color: var(--main-color); /* Keep purple text! */
}

/* For mobile */
@media (max-width: 767px) {
  .advertising-link {
    font-size: 0.85rem;
    padding: 0.75rem 1.5rem;
  }
}

/* Login Page Specific Styles */
.login-page .app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

.login-page .content-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--footer-height));
}

/* For all other pages, not fixed position but still at the bottom */
body:not(.login-page) .app-footer {
  position: relative;
}

/* Sign In Modal Styles */
.sign-in-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sign-in-tabs {
  display: flex;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-color);
}

.sign-in-tab {
  padding: var(--space-sm) var(--space-md);
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--heading-font);
  font-weight: 500;
  color: var(--text-light);
  position: relative;
}

.sign-in-tab.active {
  color: var(--main-color);
}

.sign-in-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--main-color);
}

.sign-in-content {
  padding: var(--space-md) 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--space-md) 0;
  color: var(--text-light);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-color);
}

.auth-divider span {
  padding: 0 var(--space-sm);
}

.google-sign-in {
  width: 100%;
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  padding: 0 var(--space-lg);
  border-radius: var(--border-radius-full);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--font-size-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-speed);
  box-shadow: var(--shadow-md);
}

.btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-sm);
  width: 20px;
  height: 20px;
}

.btn:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background-color: var(--main-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--main-color);
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background-color: var(--accent-color);
  color: var(--text-color);
}

.btn-secondary:hover {
  background-color: var(--accent-color);
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
}

/* Google Sign-In button specific hover */
button.btn-secondary.google-sign-in:hover {
  color: #fec241 !important;
  opacity: 1;
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
}

.btn-danger:hover {
  background-color: var(--danger-color);
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
}

/* Floating Action Buttons */

.fab-container {
  position: fixed;
  bottom: 20px;
  right: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 900;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform: translateY(0);
  will-change: transform;
}

.fab-container.fab-hidden {
  transform: translateY(150px);
}

.fab {
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--transition-speed);
  font-size: var(--font-size-lg);
  border: none; /* Remove stroke */
}

.fab:active {
  transform: scale(0.95);
}

.fab-primary {
  background-color: var(--main-color);
  color: white;
}

.fab-secondary {
  background-color: var(--accent-color);
  color: white; /* Changed from text-color to white */
}


.fab-tooltip {
  position: absolute;
  background-color: var(--bg-light);
  color: var(--text-color);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-full);
  right: calc(var(--fab-size) + var(--space-sm));
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed);
  font-family: var(--heading-font); /* Match tagline font */
  font-weight: 500; /* Medium weight like tagline */
  font-size: var(--font-size-md); /* Match tagline size */
}

.fab:hover .fab-tooltip {
  opacity: 1;
}

/* Test Content Styles */
.test-content {
  padding: var(--space-xl) 0;
  text-align: center;
}

.test-content h2 {
  color: var(--success-color);
}

/* Event List Styles - ENHANCED */
.section {
  margin-bottom: var(--space-xl);
  margin-top: var(--space-md);
}

.section-heading {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-xl);
  color: var(--text-color);
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* Consistent md gap for both mobile and desktop */
  position: relative;
}

.event-card {
  background-color: var(--bg-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.past-event {
  opacity: 0.8;
}

.event-banner {
  background-color: var(--main-color);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  position: relative;
  min-height: 70px; /* Minimum height */
  height: auto; /* Allow it to grow based on content */
}

.event-image-container {
  width: 70px; /* Increased from 50px to 60px */
  height: 70px; /* Increased from 50px to 60px */
  border-radius: 50%;
  overflow: hidden;
  margin-right: var(--space-md);
  flex-shrink: 0;
  background-color: transparent; /* Remove white background */
}

.event-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-title {
  color: white;
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  flex-grow: 1;
  line-height: 1.3;
  /* Allow wrapping on narrow screens */
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Desktop: Single line with ellipsis */
@media (min-width: 768px) {
  .event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Mobile: Allow up to 2 lines */
@media (max-width: 767px) {
  .event-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.event-info {
  padding: var(--space-md);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.event-info-item {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-color);
  gap: 4px; /* Add gap between flex children */
}

.event-info-item i {
  width: 20px;
  text-align: center;
  margin-right: var(--space-sm);
  color: var(--main-color);
}

.event-info-item span {
  margin-right: 4px; /* Space after the count number */
}

.event-info-optional {
  margin-top: auto; /* Push it down before the action row */
  padding-top: var(--space-sm);
  /*border-top: 1px solid var(--border-color);*/
}

/* New action row for event details button */
.event-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border-color);
  height: 48px; /* Fixed height */
  margin-top: auto; /* Push to bottom of card */
}

.event-details-label {
  color: var(--text-light);
  font-size: var(--font-size-sm);
  margin-right: var(--space-sm);
  font-family: var(--heading-font);
  font-weight: 500;
}

.event-details-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /*background-color: var(--main-color);*/
  background-color: transparent;
  color: var(--main-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /*transition: background-color var(--transition-speed);*/
}

/*.event-details-button:hover {
  background-color: var(--accent-color);
}*/

/* Overall progress bar for event cards */
.overall-progress {
  position: relative;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  margin-left: calc(-1 * var(--space-md)); /* Extend left */
  margin-right: calc(-1 * var(--space-md)); /* Extend right */
  padding-left: var(--space-md); /* Add padding back */
  padding-right: var(--space-md); /* Add padding back */
  border-top: 1px solid var(--border-color);
  margin-bottom: 0;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
}

.progress-bar {
  height: 8px;
  background-color: var(--border-color);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  background-color: var(--main-color);
  transition: width var(--transition-speed);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--text-light);
}

.empty-state p {
  margin-bottom: var(--space-lg);
}

.empty-state .btn {
  margin-bottom: var(--space-md);
}

/* Event Detail Styles - ENHANCED */
.event-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--space-sm) 0;
}

.back-button, .action-menu {
  background: transparent;
  border: none;
  font-size: var(--font-size-lg);
  color: var(--main-color);
  cursor: pointer;
  padding: var(--space-xs);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--transition-speed);
}

.back-button:hover, .action-menu:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.event-banner.collapsible {
  position: relative;
  border-radius: var(--border-radius-lg);
  padding: var(--space-md);
  height: auto; /* Allow it to grow based on content */
  cursor: pointer;
  margin-bottom: var(--space-md);
  transition: border-radius var(--transition-speed); /* Add transition for smooth change */
}

.collapse-indicator {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  transition: transform var(--transition-speed);
}

.collapse-indicator.expanded {
  transform: translateX(-50%) rotate(180deg);
}

.event-details-panel {
  background-color: var(--bg-light);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  margin-top: -20px;
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: 0;
  transition: all var(--transition-speed);
}

.event-details-panel.expanded {
  max-height: 2000px;
  padding: var(--space-sm);
}

/* When the details panel is expanded, remove the bottom border radius of the banner */
.event-details-panel.expanded + .event-banner.collapsible,
.event-banner.collapsible.expanded {
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.event-details-content {
  padding: var(--space-sm);
}

.past-event-alert {
  background-color: var(--text-light);
  color: white;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
}

.past-event-alert i {
  margin-right: var(--space-sm);
}

.event-description {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

.event-description h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-sm);
}

.host-needs-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

.host-needs-section h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-sm);
}

.category-progress-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.category-progress {
  width: 100%;
}

/* Category specific progress fills */
.appetizer-fill {
  background-color: var(--appetizer-color);
}

.entree-fill {
  background-color: var(--entree-color);
}

.side-dish-fill {
  background-color: var(--side-dish-color);
}

.dessert-fill {
  background-color: var(--dessert-color);
}

.drink-fill {
  background-color: var(--drink-color);
}

.other-fill {
  background-color: var(--other-color);
}

/* Ad Container */
.ad-container {
  margin: var(--space-md) auto;
  display: flex;
  justify-content: center;
  max-width: 425px;
  width: 100%;
  min-height: 100px;
  position: relative;
  overflow: hidden;
}

.ad-link {
  display: block;
  width: 100%;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.ad-image {
  width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  border-radius: var(--border-radius-md);
}

/* Hide all ADVERTISEMENT text outside the ad container */
.ad-label:not(.ad-container *) {
  display: none;
}

/* Filter Section - ENHANCED */
.filter-section {
  margin-bottom: var(--space-md);
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-sm);
}

.filter-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  font-size: var(--font-size-md);
}

.filter-header h3 i {
  margin-right: var(--space-xs);
  color: var(--main-color);
}

.filter-toggle {
  background: transparent;
  border: none;
  color: var(--main-color);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.filter-toggle i {
  margin-left: var(--space-xs);
  transition: transform var(--transition-speed);
}

.filter-toggle.expanded i {
  transform: rotate(180deg);
}

.filter-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-speed);
}

.filter-content.expanded {
  max-height: 300px;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* First, let's reset the filter option styles completely */
.filter-option {
  background-color: #e1e2e3 !important; /* Light gray background */
  color: var(--text-color) !important; /* Black text */
  border: none;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Important: Override any inherited colors or backgrounds from badge styles */
.filter-option.appetizer,
.filter-option.entree,
.filter-option.side-dish,
.filter-option.dessert,
.filter-option.drink,
.filter-option.other,
.filter-option.vegetarian,
.filter-option.vegan,
.filter-option.gluten-free,
.filter-option.dairy-free,
.filter-option.nut-free {
  background-color: #e1e2e3 !important; /* Force override */
  color: var(--text-color) !important;
}

/* Create semi-transparent versions for hover states */
.filter-option.all:hover:not(.active) {
  background-color: var(--main-color) !important; 
  opacity: 0.5;
}

.filter-option.appetizer:hover:not(.active) {
  background-color: var(--appetizer-color) !important;
  opacity: 0.7;
}

.filter-option.entree:hover:not(.active) {
  background-color: var(--entree-color) !important;
  opacity: 0.7;
}

.filter-option.side-dish:hover:not(.active) {
  background-color: var(--side-dish-color) !important;
  opacity: 0.7;
}

.filter-option.dessert:hover:not(.active) {
  background-color: var(--dessert-color) !important;
  opacity: 0.7;
}

.filter-option.drink:hover:not(.active) {
  background-color: var(--drink-color) !important;
  opacity: 0.7;
}

.filter-option.other:hover:not(.active) {
  background-color: var(--other-color) !important;
  opacity: 0.7;
}

.filter-option.vegetarian:hover:not(.active) {
  background-color: var(--vegetarian-color) !important;
  opacity: 0.7;
}

.filter-option.vegan:hover:not(.active) {
  background-color: var(--vegan-color) !important;
  opacity: 0.7;
}

.filter-option.gluten-free:hover:not(.active) {
  background-color: var(--gluten-free-color) !important;
  opacity: 0.7;
}

.filter-option.dairy-free:hover:not(.active) {
  background-color: var(--dairy-free-color) !important;
  opacity: 0.7;
}

.filter-option.nut-free:hover:not(.active) {
  background-color: var(--nut-free-color) !important;
  opacity: 0.7;
}

/* Reset opacity for active states */
.filter-option.active {
  opacity: 1 !important;
}

/* Active states override everything */
.filter-option.all.active {
  background-color: var(--main-color) !important;
  color: white !important;
}

.filter-option.appetizer.active {
  background-color: var(--appetizer-color) !important;
  color: var(--text-color) !important;
}

.filter-option.entree.active {
  background-color: var(--entree-color) !important;
  color: var(--text-color) !important;
}

.filter-option.side-dish.active {
  background-color: var(--side-dish-color) !important;
  color: var(--text-color) !important;
}

.filter-option.dessert.active {
  background-color: var(--dessert-color) !important;
  color: var(--text-color) !important;
}

.filter-option.drink.active {
  background-color: var(--drink-color) !important;
  color: var(--text-color) !important;
}

.filter-option.other.active {
  background-color: var(--other-color) !important;
  color: var(--text-color) !important;
}

.filter-option.vegetarian.active {
  background-color: var(--vegetarian-color) !important;
  color: var(--text-color) !important;
}

.filter-option.vegan.active {
  background-color: var(--vegan-color) !important;
  color: var(--text-color) !important;
}

.filter-option.gluten-free.active {
  background-color: var(--gluten-free-color) !important;
  color: var(--text-color) !important;
}

.filter-option.dairy-free.active {
  background-color: var(--dairy-free-color) !important;
  color: var(--text-color) !important;
}

.filter-option.nut-free.active {
  background-color: var(--nut-free-color) !important;
  color: var(--text-color) !important;
}

/* Special handling for the "all" option */
.filter-option.all {
  background-color: #e1e2e3;
  color: var(--text-color);
}

.filter-option.all.active {
  background-color: var(--main-color) !important;
  color: white !important;
  opacity: 1;
}

/* RSVP Section */
.rsvp-section {
  margin-bottom: var(--space-xl);
}

.rsvp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.rsvp-section-actions {
  display: flex;
  gap: var(--space-sm);
}

.rsvp-section h3 {
  margin-bottom: var(--space-md);
}

.rsvp-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;  /* Half of space-md for tighter spacing */
}

/* Form Styles - ENHANCED */
.form {
  width: 100%;
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-row {
  display: flex;
  gap: var(--space-md);
}

.form-col {
  flex: 1;
}

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-family: var(--body-font);
  font-size: var(--font-size-md);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.number-input {
  text-align: center;
  -moz-appearance: textfield;
}

.number-input::-webkit-outer-spin-button,
.number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-checkbox {
  display: flex;
  align-items: center;
}

.form-checkbox input {
  margin-right: var(--space-sm);
  width: 20px;
  height: 20px;
}

.form-note {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  margin-top: var(--space-xs);
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  width: 100%;
}

/* Banner Preview and Options */
.banner-preview {
  width: 100%;
  background-color: var(--main-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  margin-bottom: var(--space-md);
  position: relative;
  min-height: 70px;
}

.banner-preview .event-image-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: var(--space-md);
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-preview .event-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-preview h3 {
  color: white;
  margin: 0;
  flex-grow: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* Ensure consistent spacing for all elements in banner option buttons */
.banner-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: var(--bg-color) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  position: relative;
  height: 100px;
}

.banner-option-btn:hover {
  box-shadow: var(--shadow-md);
}

/* Create a fixed container for both icon and swatch to ensure consistency */
.banner-option-btn i,
.banner-option-btn .color-swatch {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon specific styling */
.banner-option-btn i {
  font-size: 32px;
  color: var(--main-color);
}

/* Color swatch specific styling */
.color-swatch {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
}

/* Swatch specific styling - keep size and position but add border */
.banner-option-btn .color-swatch {
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
}

/* Text styling */
.banner-option-btn span {
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: center;
  display: block;
  width: 100%;
  color: var(--text-color) !important;
  padding-top: var(--space-md);
}

/* Hidden file input */
.hidden-file-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.remove-image-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--error-color);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-sm);
  z-index: 1;
  border-color: white;
}

/* Pickr nano theme override */
.pickr.nano .pcr-button {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-md);
}

.pcr-app.nano {
  box-shadow: var(--shadow-lg);
}

/* Category Needs in Form */
.category-needs {
  background-color: var(--bg-color);
  padding: var(--space-md);
  border-radius: var(--border-radius-lg);
}

.category-needs .form-row {
  margin-bottom: var(--space-sm);
}

.category-needs .form-row:last-child {
  margin-bottom: 0;
}

.category-needs .badge {
  display: block;
  text-align: center;
  margin-bottom: var(--space-xs);
}

/* Badge & Tag Classes */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  margin-right: var(--space-xs);
  margin-bottom: var(--space-xs);
  color: var(--text-color);
}

.appetizer {
  background-color: var(--appetizer-color);
}

.entree {
  background-color: var(--entree-color);
}

.side-dish {
  background-color: var(--side-dish-color);
}

.dessert {
  background-color: var(--dessert-color);
}

.drink {
  background-color: var(--drink-color);
}

.other {
  background-color: var(--other-color);
}

.vegetarian {
  background-color: var(--vegetarian-color);
}

.vegan {
  background-color: var(--vegan-color);
}

.gluten-free {
  background-color: var(--gluten-free-color);
}

.dairy-free {
  background-color: var(--dairy-free-color);
}

.nut-free {
  background-color: var(--nut-free-color);
}

/* User Profile - ENHANCED */
.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md) 0;
}

/* Profile Image Edit Button */
.user-avatar-large {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: visible; /* Changed from hidden to visible to allow button to appear outside */
  margin-bottom: var(--space-md);
  z-index: 1; /* Add a base z-index */
}

.user-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* Add border-radius to the image since container no longer clips */
}

.edit-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--main-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.user-name {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.user-email {
  color: var(--text-light);
  margin-bottom: var(--space-md);
}

.profile-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  margin: var(--space-md) 0;
}

.profile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.support-email {
  color: var(--text-light);
  font-size: var(--font-size-sm);
  margin-top: var(--space-md);
}

.sign-in-message {
  margin-bottom: var(--space-md);
  color: var(--text-light);
}

/* Modal Styles - FIXED FOR SCROLLING */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end; /* Changed from center to flex-end to anchor to bottom */
  justify-content: center;
  animation: fadeIn var(--transition-speed);
}

.modal {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-content {
  background-color: var(--bg-light);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90vh; /* Increased from original value to allow more content to be visible */
  animation: slideUp var(--transition-speed);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.modal-header {
  padding: var(--space-md) var(--space-lg);
  background-color: var(--main-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: var(--header-height);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--heading-font);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

.modal-close {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: white;
  font-size: var(--font-size-lg);
  cursor: pointer;
}

.modal-body {
  padding: var(--space-lg);
  overflow-y: auto; /* Enable vertical scrolling by default */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  flex: 1;
  max-height: calc(90vh - var(--header-height)); /* Ensure there's room to scroll */
}

/* Only specific modal bodies should have overflow: visible */
#imageCropModal .modal-body {
  overflow-y: visible; /* Special case for image cropping */
}

.bottom-sheet .modal-content,
.action-sheet .modal-content {
  width: 100%;
  max-height: 80vh; /* Allow for taller content */
  animation: slideUp var(--transition-speed);
}

.bottom-sheet .modal-body,
.action-sheet .modal-body {
  max-height: calc(80vh - var(--header-height)); /* Maximum scrollable height */
  overflow-y: auto; /* Enable vertical scrolling */
}

.action-sheet .modal-body {
  padding: 0;
}

.action-option {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color var(--transition-speed);
}

.action-option:hover {
  background-color: var(--bg-color);
}

.action-option i {
  margin-right: var(--space-md);
  color: var(--main-color);
  width: 24px;
  text-align: center;
}

.action-cancel {
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  color: var(--error-color);
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space-sm);
}

.confirmation-modal .modal-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
}

.confirmation-message {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-lg);
}

.confirmation-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Tablet and Desktop Adjustments */
@media (min-width: 768px) {
  .modal-overlay {
    align-items: center; /* Center modals on tablet and up */
  }
  
  .modal {
    width: auto;
    height: auto;
  }
  
  .modal-content {
    width: 500px;
    max-width: 90vw;
    height: auto;
    max-height: 90vh;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
  }
  
  .bottom-sheet .modal-content,
  .action-sheet .modal-content {
    position: static;
    width: 500px;
    max-width: 90vw;
    border-radius: var(--border-radius-lg);
  }
  
  .confirmation-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* Policy Content */
.policy-content {
  padding: var(--space-md) 0;
}

.policy-content h3 {
  margin-bottom: var(--space-md);
}

.policy-content h4 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.policy-content p {
  margin-bottom: var(--space-md);
}

.policy-content ul {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

/* Share Options */
.share-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background-color: var(--bg-color);
  border: none;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: background-color var(--transition-speed);
}

.share-option:hover {
  background-color: var(--border-color);
}

.share-option i {
  font-size: 24px;
  margin-bottom: var(--space-sm);
  color: var(--main-color);
}

.share-option span {
  font-size: var(--font-size-sm);
}

/* Loading State */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) 0;
  color: var(--text-light);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-color);
  border-radius: 50%;
  border-top-color: var(--main-color);
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-md);
}

/* Tablet and Desktop Adjustments */
@media (min-width: 768px) {
  .login-logo {
    max-width: 280px;
  }
  
  .sponsor-logo {
    max-width: 238px; /* 85% of 280px */
  }
  
  .tagline {
    font-size: var(--font-size-xl);
    max-width: 400px;
  }
  
  .app-description {
    font-size: var(--font-size-lg);
    max-width: 400px;
  }
  
  .event-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Keep the same gap value as the mobile view */
  }
  
  .banner-options {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-actions {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  
  .form-actions .btn {
    flex: 0 0 auto;
  }

  /* Delete button should stay on the left */
  .form-actions .delete-btn {
    margin-right: auto;
  }
  
  /* Cancel and Save buttons should stay together on right */
  .form-actions .cancel-btn,
  .form-actions .save-btn {
    margin-left: var(--space-sm);
  }
  
  .share-options {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .confirmation-actions {
    flex-direction: row;
    justify-content: center;
  }
  
  .modal {
    width: auto;
    height: auto;
  }
  
  .modal-content {
    width: auto;
    min-width: 500px;
    max-width: 90vw;
    border-radius: var(--border-radius-lg);
  }
  
  .bottom-sheet .modal-content,
  .action-sheet .modal-content {
    position: static;
    border-radius: var(--border-radius-lg);
  }
}

@media (min-width: 1024px) {
  .event-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md); /* Keep same gap */
  }

  .banner-options {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* Image Cropping Styles */
.image-crop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-md);
}

.crop-container {
  width: 100%;
  max-width: 400px;
  height: 300px;
  margin: 0 auto;
}

.crop-controls {
  width: 100%;
  max-width: 400px;
  margin-top: var(--space-md);
}

.crop-rotation {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.crop-btn {
  flex: 1;
  margin: 0 var(--space-xs);
}

.crop-zoom {
  display: flex;
  flex-direction: column;
}

.crop-zoom label {
  margin-bottom: var(--space-xs);
  font-weight: 500;
}

.crop-zoom input[type="range"] {
  width: 100%;
  margin: 0;
}

.crop-actions {
  margin-top: var(--space-md);
}

/* Croppie overrides */
.croppie-container {
  width: 100%;
  height: 100%;
}

.croppie-container .cr-boundary {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background-color: #f5f5f5;
}

.croppie-container .cr-viewport {
  border: 2px solid var(--main-color);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.5);
}

.croppie-container .cr-slider-wrap {
  display: none !important; /* Hide the default Croppie slider */
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(50px); opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Utility Classes */
.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

/* Pickr styles overrides */
.pickr {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.pickr .pcr-button {
  width: 30px;
  height: 30px;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-sm);
}

.action-buttons-row {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-md) 0;
  width: 100%;
}

.action-buttons-row .btn {
  flex: 1;
}

/* New outlined button style */
.btn-outline {
  background-color: transparent;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  box-shadow: none;
}

.btn-outline:hover {
  background-color: var(--border-color);
}

/* Remove buttons in form */
.dish-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.remove-btn {
  background: transparent;
  border: none;
  color: var(--error-color);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10;
}

.remove-btn:hover {
  color: #c62828;
  transform: scale(1.1);
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

/* RSVP Card Redesign */
.rsvp-card {
  background-color: var(--bg-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-md);
  transition: box-shadow var(--transition-speed);
}

.rsvp-card:hover {
  box-shadow: var(--shadow-lg);
}

.rsvp-header {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

.user-photo-container {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: var(--space-md);
  flex-shrink: 0;
}

.user-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 600;
  font-size: var(--font-size-md);
  margin-bottom: var(--space-xs);
}

.guest-badge {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  display: flex;
  align-items: center;
}

.guest-badge i {
  margin-right: var(--space-xs);
}

.rsvp-actions {
  display: flex;
  gap: var(--space-xs);
}

.rsvp-actions button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--main-color);
  cursor: pointer;
  transition: all var(--transition-speed);
  font-size: 1.1rem;
}

.rsvp-actions button:hover {
  transform: scale(1.05);
  background-color: rgba(79, 70, 229, 0.1); /* Semi-transparent main color */
}

.rsvp-action-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--main-color);
  cursor: pointer;
  transition: all var(--transition-speed);
  font-size: 1.1rem;
}

.rsvp-action-btn:hover {
  transform: scale(1.05);
  background-color: rgba(79, 70, 229, 0.1); /* Semi-transparent main color */
}

/* Expandable content */
.rsvp-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-speed);
}

.rsvp-content.expanded {
  max-height: 2000px; /* Large enough to accommodate content */
  transition: max-height var(--transition-speed);
}

.dishes-section {
  padding: var(--space-md);
}

.dish-item {
  margin-bottom: var(--space-md);
  display: flex;
  align-items: flex-start;
}

.dish-item:last-child {
  margin-bottom: 0;
}

/* Numbered icon */
.number-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--main-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-right: var(--space-sm);
  flex-shrink: 0;
}

.dish-info {
  flex: 1;
}

.dish-name {
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.recipe-container {
  margin-top: var(--space-sm);
  width: 100%; /* Full width of container */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Left align */
  text-align: left;
  padding-top: var(--space-xs);
  border-top: 0px solid var(--border-color);
}

.recipe-heading, .notes-heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.recipe-content {
  width: 100%;
  min-height: 60px;
  padding: var(--space-sm);
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-family: var(--body-font);
  font-size: var(--font-size-sm);
  resize: vertical;
  text-align: left;
  align-self: flex-start;
}

.notes-container {
  padding: var(--space-md);
  border-top: 1px solid var(--border-color);
}

.notes-content {
  padding: var(--space-sm);
  background-color: var(--bg-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

/* Past event notification */
.past-event-alert {
  background-color: #fff3cd; /* Light yellow */
  color: #856404; /* Amber text */
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  border-left: 4px solid #ffc107; /* Amber border */
}

.past-event-alert i {
  margin-right: var(--space-sm);
  color: #ffc107; /* Amber icon */
}

/* Disabled FAB */
.fab-disabled {
  background-color: #cccccc;
  color: #888888;
  cursor: not-allowed;
}

.fab-disabled:active {
  transform: none;
}

/* Export Data Styles */
.export-data-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.export-textarea {
  width: 100%;
  min-height: 300px;
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-family: monospace;
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  resize: vertical;
}

.export-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}

/* File Upload Styles - Drag & Drop */
.file-drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--bg-light);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.file-drop-zone:hover {
  border-color: var(--main-color);
  background-color: rgba(91, 109, 205, 0.05);
}

.file-drop-zone.drag-over {
  border-color: var(--main-color);
  background-color: rgba(91, 109, 205, 0.1);
  border-width: 3px;
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.drop-icon {
  font-size: 3rem;
  color: var(--main-color);
  margin-bottom: var(--space-sm);
}

.drop-text {
  font-size: 1rem;
  color: var(--text-color);
  margin: 0;
}

.drop-text strong {
  color: var(--main-color);
  font-weight: 600;
}

.drop-subtext {
  font-size: 0.85rem;
  color: var(--text-light);
  margin: 0;
}

.drop-subtext kbd {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.8rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md);
  background-color: white;
  border-radius: var(--border-radius);
}

.file-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
}

.file-icon {
  font-size: 1.5rem;
  color: var(--main-color);
  flex-shrink: 0;
}

.file-name {
  font-size: 0.95rem;
  color: var(--text-color);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-remove-file {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #dc3545;
  color: white;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.btn-remove-file:hover {
  background-color: #c82333;
  transform: scale(1.1);
}

.btn-remove-file i {
  font-size: 1rem;
}

/* Supplemental File Preview */
.supplemental-file-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.file-preview-container {
  width: 100%;
  max-height: 400px;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.file-preview-image {
  max-width: 100%;
  max-height: 350px;
  object-fit: contain;
}

.file-preview-pdf {
  width: 100%;
  height: 350px;
  border: none;
}

.file-icon {
  font-size: 4rem;
  color: var(--text-light);
  margin-bottom: var(--space-md);
}

.file-name {
  font-weight: 500;
  text-align: center;
}

.file-description {
  text-align: center;
  color: var(--text-light);
}

.file-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}
/* Participants Modal Styles */
.participants-container {
  max-height: 500px;
  overflow-y: auto;
}

.participants-description {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--bg-light);
  border-radius: var(--border-radius);
}

.participants-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.participant-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: box-shadow 0.2s;
}

.participant-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.participant-avatar {
  flex-shrink: 0;
}

.participant-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

.participant-info {
  flex-grow: 1;
  min-width: 0;
}

.participant-name {
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.host-badge {
  display: inline-block;
  background: var(--main-color);
  color: white;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.participant-email {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-joined {
  font-size: 0.75rem;
  color: var(--text-light);
}

.participant-rsvp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-participants {
  text-align: center;
  color: var(--text-light);
  padding: var(--space-xl);
  font-style: italic;
}

/* Kick User Button */
.participant-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.btn-kick-user {
  background-color: #dc3545;
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}

.btn-kick-user:hover {
  background-color: #c82333;
  transform: scale(1.1);
}

.btn-kick-user i {
  margin: 0;
}

/* Google Sign-In Button Hover - Highest Specificity */
#googleSignInBtn:hover,
#googleSignUpBtn:hover {
  color: #fec241 !important;
}

/* Dedicated Google Sign-In Button Class */
.google-auth-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  padding: 0 var(--space-lg);
  border-radius: var(--border-radius-full);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--font-size-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-speed);
  box-shadow: var(--shadow-md);
  background-color: var(--accent-color);
  color: var(--text-color);
}

.google-auth-button:hover {
  background-color: var(--accent-color);
  color: #fec241 !important;
  box-shadow: var(--shadow-lg);
}

.google-auth-button:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-sm);
}

.google-auth-button i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-sm);
  width: 20px;
  height: 20px;
}

/* Participants Modal Header Row */
.participants-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--bg-light);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-sm);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.header-user {
  justify-self: start;
}

.header-rsvp {
  justify-self: center;
  width: 60px;
  text-align: center;
}

.header-remove {
  justify-self: center;
  width: 60px;
  text-align: center;
}

/* Sign-In Page Main Button */
#signInButton {
  background-color: var(--main-color);
  color: white !important;
}

#signInButton:hover {
  background-color: var(--main-color);
  color: #fec241 !important;
  opacity: 1;
}

/* Google Sign-In/Up Buttons - Consistent Styling */
#googleSignInBtn,
#googleSignUpBtn {
  background-color: #fec241 !important; /* Yellow background */
  color: var(--main-color) !important; /* Purple text */
}

#googleSignInBtn:hover,
#googleSignUpBtn:hover {
  background-color: var(--main-color) !important; /* Purple background */
  color: #fec241 !important; /* Yellow text */
}

/* Submit Buttons Yellow Hover */
button[type="submit"]:hover {
  color: #fec241 !important;
}

/* Screen Reader Only (Accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Offline Banner */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
  color: white;
  padding: 0.75rem 1rem;
  text-align: center;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.offline-banner.fade-out {
  animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.offline-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.offline-banner-content i {
  font-size: 1.2rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Adjust body when banner is shown */
body.offline {
  padding-top: 3rem;
}

/* Offline mode - disable interactions */
body.offline .btn:not(.offline-allowed) {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===================================
   NOTIFICATION PROFILE SETTINGS
   =================================== */

.profile-settings {
  margin: 1.5rem 0;
}

.profile-setting {
  margin-bottom: 1rem;
}

.setting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.setting-info {
  flex: 1;
}

.setting-icon-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.setting-icon-label i {
  color: var(--primary-color);
  font-size: 1.2rem;
}

.setting-label {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.setting-description {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}

/* Toggle Switch - Enhanced Visibility */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 28px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* ON STATE - Bright Purple */
.toggle-input:checked + .toggle-slider {
  background-color: #5b6dcd;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 8px rgba(91, 109, 205, 0.4);
}

.toggle-input:checked + .toggle-slider:before {
  transform: translateX(24px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Focus State */
.toggle-input:focus + .toggle-slider {
  box-shadow: 0 0 0 4px rgba(91, 109, 205, 0.25);
}

/* Hover State */
.toggle-slider:hover {
  opacity: 0.9;
}

/* Disabled state */
.toggle-input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Notification Prompt Modal */
.notification-prompt {
  text-align: center;
  padding: 1rem;
}

.prompt-message {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #333;
}

.prompt-benefits {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: left;
}

.prompt-benefits li {
  padding: 0.75rem;
  margin-bottom: 0.25rem;
  background: #f0f7ff;
  border-left: 3px solid var(--primary-color);
  border-radius: 4px;
}

.prompt-benefits i {
  color: var(--primary-color);
  margin-right: 0.5rem;
}

.prompt-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Ensure confirmation modals appear above edit event modal */
.confirmation-modal {
  z-index: 10001 !important;
}

.confirmation-modal .modal-backdrop {
  z-index: 10000 !important;
}

/* FAB scroll hide animation */
/* Export Event Data Modal - Stack buttons on mobile */
@media (max-width: 480px) {
  .export-modal .modal-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .export-modal .modal-actions button {
    width: 100%;
  }
}

/* Join Preview Modal Styling */
.join-preview {
  text-align: center;
  padding: 1rem;
}

.event-preview-image {
  margin-bottom: 1.5rem;
}

.event-preview-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.event-preview-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 1rem 0;
}

.event-preview-details {
  text-align: left;
  margin: 2rem auto;
  max-width: 400px;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.detail-row i {
  width: 24px;
  text-align: center;
  color: var(--primary-color);
  font-size: 1.2rem;
}

.detail-row span {
  flex: 1;
  color: var(--text-color);
}

.event-preview-description {
  text-align: left;
  margin: 2rem auto;
  padding: 1.25rem;
  background: var(--bg-light);
  border-radius: 8px;
  max-width: 500px;
  border-left: 4px solid var(--primary-color);
}

.event-preview-description p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-secondary);
}

.join-preview-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 8px;
}

.join-preview-modal .modal-content {
  max-width: 600px;
}

@media (max-width: 768px) {
  .event-preview-title {
    font-size: 1.5rem;
  }
  
  .detail-row {
    font-size: 1rem;
  }
  
  .event-preview-image img {
    max-width: 100%;
  }
}

/* Fix Push Notifications text wrapping on mobile */
.push-notification-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: 8px;
  margin: 1rem 0;
}

.push-notification-toggle .notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.push-notification-toggle .notification-icon-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.push-notification-toggle .notification-icon-title i {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--primary-color);
}

.push-notification-toggle .notification-icon-title span {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.push-notification-toggle .notification-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-left: 2.25rem;
}

.push-notification-toggle .toggle-switch {
  flex-shrink: 0;
}

/* Fix Advertise page mobile viewport scaling */
@media (max-width: 768px) {
  .advertise-container {
    padding: 1rem;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .advertise-hero {
    padding: 2rem 1rem;
  }
  
  .advertise-hero h1 {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  
  .advertise-hero p {
    font-size: 1rem;
  }
  
  .advertise-content {
    padding: 1rem;
  }
  
  .advertise-section {
    margin: 2rem 0;
  }
  
  .advertise-section h2 {
    font-size: 1.5rem;
  }
  
  .advertise-features {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .back-to-niblio-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
  }
}

/* Version number in footer */
.version-number {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-left: 0.5rem;
}

/* Advertise page - aggressive mobile fixes for 360px width */
@media (max-width: 480px) {
  .advertise-container {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  .advertise-hero {
    padding: 1.5rem 1rem;
    box-sizing: border-box;
  }
  
  .advertise-hero h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    word-wrap: break-word;
  }
  
  .advertise-hero p {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  .back-to-niblio-btn {
    font-size: 0.85rem;
    padding: 0.6rem 1.25rem;
    white-space: nowrap;
  }
  
  .advertise-content {
    padding: 0.75rem;
    box-sizing: border-box;
  }
  
  .advertise-section {
    margin: 1.5rem 0;
    padding: 0;
  }
  
  .advertise-section h2 {
    font-size: 1.35rem;
    word-wrap: break-word;
  }
  
  .advertise-section p,
  .advertise-section li {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .advertise-features {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .feature-card {
    padding: 1rem;
  }
  
  .feature-card h3 {
    font-size: 1.1rem;
  }
  
  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .pricing-card {
    padding: 1.25rem;
  }
  
  .cta-section {
    padding: 1.5rem 1rem;
  }
  
  .cta-button {
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    word-wrap: break-word;
  }
}

/* User profile push notifications - mobile fixes */
.notification-setting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: 8px;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.notification-header i {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--primary-color);
}

.setting-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-color);
}

.setting-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
  text-align: left;
}

.toggle-switch {
  flex-shrink: 0;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

@media (max-width: 480px) {
  .notification-setting {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .notification-header {
    margin-bottom: 0.25rem;
  }
  
  .setting-description {
    font-size: 0.8rem;
  }
  
  .toggle-switch {
    align-self: flex-end;
  }
}

/* Join Preview Banner (like event card) */
.event-preview-banner {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  margin-top: -0.5rem;
  box-sizing: border-box;
}

.event-preview-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.event-preview-image-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.event-preview-image-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-preview-banner-title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
  .event-preview-banner {
    padding: 1.5rem 1rem;
  }
  
  .event-preview-image-circle {
    width: 80px;
    height: 80px;
  }
  
  .event-preview-banner-title {
    font-size: 1.5rem;
  }
}

/* Join Event button pill shape */
#joinEventButton {
  border-radius: 50px;
}

#cancelJoinButton {
  border-radius: 50px;
}

/* RSVP Modal Button Icons - Mobile Responsive */
.btn-text-desktop {
  display: inline;
}

.btn-text-mobile-hide {
  display: inline;
}

@media (max-width: 480px) {
  .btn-text-desktop {
    display: none;  /* Hide "Add Item/Dish" and "Add Notes" text on mobile */
  }
  
  .btn-text-mobile-hide {
    display: none;  /* Hide space between icons on mobile */
  }
}

/* Push Notifications Section - Centered & Better Button */
.profile-setting .setting-info {
  text-align: center;
  width: 100%;
}

.profile-setting .setting-icon-label {
  justify-content: center;
}

.profile-setting .setting-description {
  margin-bottom: 1rem; /* Add space below description text */
}

#showNotificationHelp {
  display: inline-block;
  padding: 0.5rem 1.5rem !important;
  margin-top: 0.5rem;  /* Add space above button */
  margin-bottom: 0.25rem;  /* Reduce space below button */
  border-radius: 20px;
  background-color: var(--main-color);
  color: white;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

#showNotificationHelp:hover {
  background-color: rgba(109, 89, 255, 0.85);  /* Subtle darken (85% opacity) */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);  /* Subtle shadow */
}

#showNotificationHelp i {
  margin-right: 0.5rem;
}

@media (max-width: 480px) {
  #showNotificationHelp {
    padding: 0.4rem 1rem !important;
    font-size: 0.85rem;
  }
}

/* RSVP Action Buttons - Prevent Text Wrapping */
.action-buttons-row .btn {
  white-space: nowrap;  /* Prevent text from wrapping */
  min-width: fit-content;  /* Allow button to expand to fit text */
}

.action-buttons-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;  /* Allow buttons to wrap to next line if needed */
}

@media (max-width: 480px) {
  .action-buttons-row {
    justify-content: center;  /* Center buttons on mobile */
  }
}

/* ========================================
   v0.57 IMPROVEMENTS
   ======================================== */

/* RSVP DROPDOWN MENU (3 DOTS) */
.rsvp-menu-container {
  position: relative;
  display: inline-block;
}

.rsvp-menu-btn {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.rsvp-menu-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.rsvp-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  z-index: 10000;
  margin-top: 0.25rem;
}

.rsvp-menu-dropdown.show {
  display: block;
}

.rsvp-menu-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
  transition: background-color 0.2s;
}

.rsvp-menu-item:hover {
  background-color: var(--hover-bg);
}

.rsvp-menu-item:first-child {
  border-radius: 8px 8px 0 0;
}

.rsvp-menu-item:last-child {
  border-radius: 0 0 8px 8px;
}

.rsvp-menu-item i {
  width: 16px;
  text-align: center;
}

.rsvp-menu-item-danger {
  color: #dc3545;
}

.rsvp-menu-item-danger:hover {
  background-color: #fee;
}

/* Ensure parent containers don't clip the dropdown */
.rsvp-card,
.rsvp-section,
.rsvp-list {
  overflow: visible !important;
}

/* RSVP CARD ROUNDED CORNERS (FIX) */
.rsvp-card {
  border-radius: 8px;
  overflow: visible;
}


/* COMBINED FILTERS WITH PROPER SPACING */
.filter-subsection {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.filter-subsection:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.filter-subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.filter-subsection-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}

.filter-clear-btn {
  background: none;
  border: none;
  color: var(--main-color);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.filter-clear-btn:hover {
  background-color: rgba(109, 89, 255, 0.1);
}

.main-filter-header {
  background-color: var(--card-bg);
}

/* Reduce ad container margin */
.ad-container {
  margin: var(--space-sm) auto;
}


/* JOIN PREVIEW ICONS - PURPLE COLOR */
.join-preview .detail-row i,
.event-preview-details .detail-row i {
  color: var(--main-color);
}


/* USER PROFILE - PROPER FIXES */
/* Remove profile-settings margin to tighten space */
.profile-settings {
  margin: 0 !important;
}

/* Reduce profile-email spacing and ensure full width divider */
.profile-email {
  margin: 0 0 1rem 0 !important;
  padding: 0 0 1rem 0 !important;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
}

/* Center setting-description text */
.setting-description {
  text-align: center !important;
  margin: 0 auto 1rem auto;
  max-width: 90%;
}

/* Ensure dividers are full width */
.user-profile .profile-divider {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix Sign Out button on mobile */
@media (max-width: 768px) {
  .user-profile #signOutButton {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
}


/* ADVERTISE PAGE - COMPREHENSIVE RESPONSIVE FIX */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    padding: 0 1rem;
    width: 100%;
  }
  
  .tier-card,
  .pricing-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box;
  }
  
  .advertise-container {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }
}


/* SHARE MODAL - YELLOW ICON HOVER */
.share-option:hover i,
.share-option:active i {
  color: #FFD700 !important;
  transition: color 0.2s ease;
}

.share-option i {
  transition: color 0.2s ease;
}


/* MOBILE BUTTON STACKING - SIMPLE APPROACH */
@media (max-width: 768px) {
  .modal-actions,
  .form-actions,
  .join-preview-actions {
    display: flex;
    flex-direction: column;  /* Stack vertically, maintain DOM order */
  }
  
  .modal-actions button,
  .form-actions button,
  .join-preview-actions button {
    width: 100%;
    margin-bottom: 0.75rem;
  }
  
  .modal-actions button:last-child,
  .form-actions button:last-child,
  .join-preview-actions button:last-child {
    margin-bottom: 0;
  }
}


/* DATE/TIME FIELD ALIGNMENT FIX */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .form-col {
    width: 100%;
  }
}


/* ========================================
   v0.58 IMPROVEMENTS
   ======================================== */

/* PLUS/MINUS NUMBER INPUT GROUPS */
.number-input-group {
  display: flex;
  align-items: center;
  justify-content: center;  /* Center the group */
  gap: 0.5rem;
  max-width: 150px;
  margin: 0 auto;  /* Center in parent */
}

.number-input-group input[type="number"] {
  text-align: center;
  flex: 1;
  min-width: 60px;
  -moz-appearance: textfield; /* Firefox - hide spinners */
}

/* Hide default number input spinners */
.number-input-group input[type="number"]::-webkit-inner-spin-button,
.number-input-group input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-decrement,
.btn-increment {
  background: var(--main-color);
  color: white !important;  /* Force white text */
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.1s;
  padding: 0;
  flex-shrink: 0;  /* Don't shrink */
}

.btn-decrement:hover,
.btn-increment:hover {
  background: var(--main-color-dark);
  color: white !important;
}

.btn-decrement:active,
.btn-increment:active {
  background: var(--main-color);
  color: white !important;
  transform: scale(0.95);
}

.btn-decrement:disabled,
.btn-increment:disabled {
  background: var(--border-color);
  cursor: not-allowed;
  color: var(--text-light) !important;
}


/* RSVP CARD ROUNDED CORNERS - DYNAMIC */
.rsvp-card {
  border-radius: 8px !important;
  overflow: visible;  /* For dropdown menu */
}

/* Header always has rounded top */
.rsvp-header {
  border-radius: 8px 8px 8px 8px;  /* All corners rounded by default */
}

/* When collapsed, header has all corners rounded */
.rsvp-card:not(:has(.rsvp-content.expanded)) .rsvp-header {
  border-radius: 8px 8px 8px 8px;
}

/* When expanded, header only has top corners rounded */
.rsvp-card:has(.rsvp-content.expanded) .rsvp-header {
  border-radius: 8px 8px 0 0;
}

/* Content always has rounded bottom when expanded */
.rsvp-content {
  border-radius: 0;  /* No rounding by default (hidden) */
}

.rsvp-content.expanded {
  border-radius: 0 0 8px 8px;  /* Bottom corners rounded when expanded */
}


/* TOGGLE SWITCH FOR RSVP EXPAND/COLLAPSE */
.rsvp-toggle-container {
  display: flex;
  align-items: center;  /* Vertically center both items */
  gap: 0.5rem;
  justify-content: flex-end;  /* Push to right */
}

.toggle-label {
  font-size: 0.9rem;
  color: var(--text-color);
  font-weight: 500;
  min-width: 65px;
  text-align: right;  /* Right-justify text */
}

.toggle-switch {
  position: relative;
  display: inline-flex;  /* Changed to inline-flex */
  align-items: center;  /* Vertically center */
  width: 48px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;  /* Don't shrink */
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--main-color);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}


/* ========================================
   v0.58.2 FIXES
   ======================================== */

/* NUMBER INPUT GROUPS - FULL WIDTH */
.rsvp-form .number-input-group,
.category-needs .number-input-group {
  max-width: 100%;
  width: 100%;
}


/* RSVP HEADER - VERTICAL CENTERING ON MOBILE */
@media (max-width: 768px) {
  .rsvp-section-header {
    align-items: center !important;
  }
  
  .rsvp-section-header h3 {
    margin: 0;
    align-self: center;
  }
  
  .rsvp-section-actions {
    align-items: center;
    align-self: center;
  }
}


/* ========================================
   v0.58.3 FIXES
   ======================================== */

/* FILTER TOGGLE CHEVRON - NO ROTATION */
.filter-toggle i {
  transition: none !important;
  transform: none !important;
}


/* ACTION SHEET DANGER OPTIONS */
.action-danger {
  color: var(--danger-color) !important;
}

.action-danger i {
  color: var(--danger-color) !important;
}


/* ========================================

/* ========================================
   v0.59 - CONTACT METHOD (UPDATED)
   ======================================== */

.contact-info-container {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 0.5rem;
}

/* Contact method selection - Radio buttons */
.contact-method-selection {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.contact-method-selection .radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.contact-method-selection input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Contact input container */
.contact-input-container {
  margin-bottom: 1rem;
}

.contact-input {
  width: 100%;
  transition: opacity 0.2s;
}

/* Share options */
.contact-share-options {
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

.share-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.checkbox-group {
  display: flex;
  gap: 1.5rem;
}

.radio-group {
  display: flex;
  gap: 1.5rem;
}

.radio-group .radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Contact display in RSVP card */
.contact-section {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1;
}

.contact-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-color);
  white-space: nowrap;
  margin-right: 0.5rem;
  line-height: 1;
}

.contact-items {
  display: flex;
  flex-direction: row;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1;
}

.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
  line-height: 1;
  margin-right: 1rem;
}

.contact-item:last-child {
  margin-right: 0;
}

.contact-item i {
  width: 20px;
  color: var(--main-color);
}

.contact-item a {
  color: var(--main-color);
  text-decoration: none;
  line-height: 1;
  word-break: break-all;
}

.contact-item a:hover {
  text-decoration: underline;
}

  gap: 0.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.contact-item i {
  width: 20px;
  color: var(--main-color);
}

.contact-item a {
  color: var(--main-color);
  text-decoration: none;
  line-height: 1;
  word-break: break-all;
}

.contact-item a:hover {
  text-decoration: underline;
}



/* ========================================
   v0.61.1 - SMART LOCATION LINKS
   ======================================== */

.location-link {
  color: var(--main-color);
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
}

.location-link:hover {
  color: var(--main-color);
  text-decoration: underline;
}