/* CSS Variables - Brand Colors and 10-Step Greyscale - Cache Bust v75 */
:root {
  /* Brand Colors */
  --coral: #071524;
  --coral-dark: #050e17;
  --teal: #FEA028;
  --gold: #FFC536;
  
  /* 10-Step Greyscale */
  --gray-50: #FDF9FD;
  --gray-100: #F5EFF5;
  --gray-200: #E4DBE6;
  --gray-300: #CDC7D1;
  --gray-400: #B4B3BD;
  --gray-500: #626F80;
  --gray-600: #4D5969;
  --gray-700: #354150;
  --gray-800: #202B36;
  --gray-900: #071524;
}

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

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--gray-50);
}

/* Headlines with Vollkorn font - excludes restaurant components */
h1, h2, h3, h5, h6,
.hero-title,
.section-title,
.city-name,
.page-title,
.feature-title,
.why-bangbang-title {
  font-family: 'Vollkorn', serif;
  letter-spacing: 0.01em;
  line-height: 110%;
}

/* Restaurant name specifically gets Vollkorn */
.pair-card .restaurant-details .restaurant-name {
  font-family: 'Vollkorn', serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header - Transparent overlay style */
.main-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  padding: 1.5rem 0;
}

/* Header Container */
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

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

/* Logo Styling */
.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.brand-logo {
  height: 2.5rem;
  width: auto;
  transition: opacity 0.2s ease;
}

.brand-logo:hover {
  opacity: 0.9;
}

/* Navigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  color: var(--gray-50);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--gold);
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--gold);
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Sign In Button */
.signin-button {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gray-50);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.signin-button:hover {
  background: var(--gray-50);
  color: var(--gray-800);
  border-color: var(--gray-50);
}

/* Mobile Menu Button */
.mobile-menu-button {
  display: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--gray-50);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

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

/* Hero Section with Culinary Background */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), 
              url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1920&h=1080&fit=crop&crop=center') center/cover;
  color: var(--gray-50);
  padding: 12rem 1rem 4rem;
  text-align: center;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  max-width: 64rem;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  margin-bottom: 1rem;
}

.gold {
  color: var(--gold);
}

.hero-subtitle {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Airbnb-Style Multi-Section Search Form */
.airbnb-search-form {
  max-width: 58rem;
  margin: 0 auto;
}

.search-sections-container {
  display: flex;
  background: var(--gray-50);
  border-radius: 4rem;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--gray-200);
  position: relative;
}

.search-section {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--gray-200);
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Set max width for cuisine and star sections on larger screens */
@media (min-width: 1024px) {
  .search-section.cuisine-section,
  .search-section.stars-section {
    flex: none;
    width: 200px;
    max-width: 200px;
    padding: 0.75rem 1rem;
  }
  
  /* Give the location section more space */
  .search-section.location-section {
    flex: 2;
    min-width: 320px;
  }
}

.search-section[data-section="location"] {
  cursor: text;
}

.search-section[data-section="location"]:hover {
  background-color: transparent;
}

.search-section:last-child {
  border-right: none;
}

.search-section:hover {
  background-color: var(--gray-100);
}

.search-section.active {
  background-color: var(--gray-50);
  box-shadow: inset 0 0 0 2px var(--gray-800);
  border-radius: 4rem;
  z-index: 1;
}

.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  text-align: left;
}

.section-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--gray-600);
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.section-input::placeholder {
  color: var(--gray-400);
}

.section-input:focus {
  color: var(--gray-800);
}

/* Dropdown Styles */
.dropdown-container {
  position: relative;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

.dropdown-text {
  color: var(--gray-600);
  font-size: 0.875rem;
}

.dropdown-text.has-selection {
  color: var(--gray-800);
  font-weight: 500;
}

.dropdown-icon {
  width: 1rem;
  height: 1rem;
  color: var(--gray-500);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.dropdown-trigger.active .dropdown-icon {
  transform: rotate(180deg);
  color: var(--gray-800);
}

/* Homepage dropdowns (wider with offset) */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -1rem;
  right: -1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 50;
  opacity: 0;
  transform: translateY(-0.5rem);
  visibility: hidden;
  transition: all 0.2s ease;
}

/* Search page dropdowns (aligned with no offset) */
.filter-bar .search-section .dropdown-menu {
  left: 0;
  right: 0;
}

.dropdown-menu.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.dropdown-content {
  padding: 0;
}

/* Unified dropdown header styles for both homepage and search page */
.dropdown-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
}

.clear-all-btn,
.dropdown-header .clear-all {
  background: none;
  border: none;
  color: var(--coral);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.clear-all-btn:hover,
.dropdown-header .clear-all:hover {
  color: var(--coral-dark);
}

.dropdown-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 60vh; /* Use viewport height for homepage dropdowns */
  overflow-y: auto;
}

.dropdown-option {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dropdown-option:hover {
  background-color: var(--gray-100);
}

.option-checkbox {
  margin-right: 0.75rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--coral);
}

.option-text {
  font-size: 0.875rem;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Dropdown text truncation for long selections */
.dropdown-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Search Button */
.search-button-section {
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.airbnb-search-button {
  background: var(--coral);
  color: var(--gray-50);
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.airbnb-search-button:hover {
  background: var(--coral-dark);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.airbnb-search-button:active {
  transform: scale(0.95);
}

.search-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Loading spinner positioning */
.airbnb-search-button .loading-spinner {
  margin: 0 auto;
}

/* Responsive Design */
/* Mobile Responsive */
@media (max-width: 1024px) {
  .main-nav {
    display: none;
  }
  
  .mobile-menu-button {
    display: block;
  }
  
  .search-sections-container {
    flex-direction: column;
    border-radius: 1rem;
  }
  
  .search-section {
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
  }
  
  .search-section:last-child {
    border-bottom: none;
  }
  
  .search-button-section {
    padding: 1rem;
  }
  
  .airbnb-search-button {
    width: 100%;
    height: 3rem;
    border-radius: 0.75rem;
  }
}

/* Loading Spinner */
.loading-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--gray-50);
  animation: spin 1s ease-in-out infinite;
  margin: 0 auto;
  display: block;
}

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

@media (min-width: 1024px) {
  .search-container {
    flex-direction: row;
  }
}

.search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 122, 133, 0.1);
}

.search-button {
  background: var(--coral);
  color: var(--gray-50);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.search-button:hover {
  background: var(--coral-dark);
}

.search-button:active {
  transform: translateY(1px);
}

.search-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Cities Section */
.cities-section {
  padding: 4rem 1rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h3 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.25rem;
  color: var(--gray-600);
}

.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.city-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--gray-50);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  max-width: 360px;
}

.city-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.city-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.city-info {
  padding: 1rem 1.25rem 1.25rem;
  text-align: left;
}

.city-name {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--gray-900);
}

.city-stats {
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Footer */
.footer {
  background: var(--gray-800);
  color: var(--gray-100);
  text-align: center;
  padding: 2rem 1rem;
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse-animation {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Logo Header */
.logo-header {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 1rem 0;
}

.logo-container {
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1024px) {
  .logo-container {
    justify-content: center;
  }
  
  .main-nav {
    display: none;
  }
}

.logo-container .brand-logo {
  height: 2.5rem;
}

/* Filter Bar */
.filter-bar {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 40;
}

.filter-bar-container {
  margin: 0 auto;
  padding: 0.25rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 4rem;
  display: flex;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}



/* Filter Bar */
.filter-bar {
  background: white;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0;
}

.filter-bar-container {
  width: 100%;
  margin: 0;
  padding: 0;
  background: white;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
}

/* Filter Bar Search Sections - Override homepage styles */
.filter-bar-container .search-section {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--gray-200);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Make the "Where" field expand to fill available width */
.filter-bar-container .search-section:first-child {
  flex: 2;
  min-width: 0;
}

/* Set max width for other filter sections on larger screens */
@media (min-width: 1024px) {
  .filter-bar-container .search-section:not(:first-child) {
    flex: none;
    width: 200px;
    max-width: 200px;
  }
}

.filter-bar-container .search-section:hover {
  background-color: var(--gray-100);
}

.filter-bar-container .search-section:last-child {
  border-right: none;
}

/* Make entire section clickable */
.search-section .multi-select-wrapper,
.search-section .single-select-wrapper {
  cursor: pointer;
  width: 100%;
  position: relative;
  z-index: 1;
}

.search-section-content {
  padding: 0.5rem 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.5rem;
  position: relative;
}

.search-section-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--gray-800);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.25rem;
  position: relative;
  z-index: 10;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.search-input-icon {
  color: var(--gray-500);
  flex-shrink: 0;
}

.search-section-input {
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--gray-800);
  outline: none;
  width: 100%;
  padding: 0;
  flex: 1;
}

.search-section-input::placeholder {
  color: var(--gray-500);
  font-size: 0.875rem;
}

.search-section-value {
  font-size: 0.875rem;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-section-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-600);
  font-size: 0.625rem;
  transition: transform 0.2s;
}

.search-section.open .search-section-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* Multi-Select and Single-Select Wrappers */
.multi-select-wrapper,
.single-select-wrapper {
  width: 100%;
  position: relative;
}

.multi-select-display,
.single-select-display {
  width: 100%;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.multi-select-display .selected-value,
.single-select-display .selected-value {
  font-size: 0.875rem;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  margin-top: 0.125rem;
  padding-right: 1.25rem; /* Space for dropdown arrow */
}

.multi-select-display .selected-value.has-selection,
.single-select-display .selected-value.has-selection {
  color: var(--gray-800);
  font-weight: 500;
}

.multi-select-display .dropdown-arrow,
.single-select-display .dropdown-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-600);
  font-size: 0.625rem;
  transition: transform 0.2s;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.multi-select-display.open .dropdown-arrow,
.single-select-display.open .dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* Dropdown Styles */
.multi-select-dropdown,
.single-select-dropdown {
  position: fixed;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 60;
  display: none;
  max-height: 80vh; /* Use viewport height for max constraint */
  overflow-y: auto;
  min-width: 200px;
}

.multi-select-dropdown.open,
.single-select-dropdown.open {
  display: block;
  position: absolute;
  left: -1rem;
  right: -1rem;
  z-index: 70;
}



.dropdown-options {
  padding: 0;
}

.dropdown-option {
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  transition: background-color 0.15s ease;
  min-height: 2.5rem;
}

.dropdown-option:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}





.dropdown-option input[type="checkbox"] {
  margin: 0;
  accent-color: var(--coral);
}

.dropdown-option.selected {
  background: var(--coral);
  color: var(--gray-50);
  font-weight: 500;
}



/* Responsive display utilities */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
}

/* Mobile Search Bar */
.mobile-search-container {
  padding: 1rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.mobile-search-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.mobile-search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  font-size: 1rem;
  background: var(--gray-50);
}

.mobile-search-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(7, 21, 36, 0.1);
}



.mobile-filter-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--coral);
  color: var(--gray-50);
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mobile-filter-button:hover {
  background: var(--coral-dark);
}

/* Mobile Filter Bottom Sheet */
.mobile-filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-filter-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-filter-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--gray-50);
  border-radius: 1rem 1rem 0 0;
  z-index: 110;
  max-height: 80vh;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.mobile-filter-sheet.active {
  transform: translateY(0);
}

.mobile-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.mobile-filter-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.mobile-filter-close {
  background: none;
  border: none;
  color: var(--gray-600);
  cursor: pointer;
  padding: 0.25rem;
}

.mobile-filter-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.mobile-filter-group {
  margin-bottom: 2rem;
}

.mobile-filter-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.mobile-filter-label span {
  font-weight: 600;
  color: var(--gray-800);
}

.mobile-clear-btn {
  background: none;
  border: none;
  color: var(--coral);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.mobile-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mobile-filter-option {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 1.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-filter-option input[type="checkbox"] {
  margin-right: 0.5rem;
}

.mobile-filter-option.selected {
  background: var(--coral);
  color: var(--gray-50);
  border-color: var(--coral);
}

.mobile-filter-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  font-size: 1rem;
  background: var(--gray-50);
}

.mobile-filter-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.mobile-apply-btn {
  width: 100%;
  padding: 0.875rem;
  background: var(--coral);
  color: var(--gray-50);
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mobile-apply-btn:hover {
  background: var(--coral-dark);
}

/* Main Content Layout */
.main-content {
  height: calc(100vh - 160px);
  overflow: hidden;
  position: relative;
}

.content-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.map-panel {
  flex: 1;
  position: relative;
  padding-bottom: 0; /* Remove padding - cards overlay directly */
}

/* Cards overlay at bottom - directly on map */
.cards-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: auto;
  max-height: 60vh; /* Use viewport-relative height instead of fixed */
  pointer-events: none; /* Allow map interaction behind overlay */
}

.cards-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  height: 100%;
  /* Enable momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* Pointer events and touch-action managed dynamically by JavaScript */
}

.cards-scroll-container::-webkit-scrollbar {
  display: none;
}

.cards-horizontal {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  min-height: 200px;
  align-items: flex-end;
  width: max-content; /* Allow container to expand beyond viewport */
  pointer-events: auto; /* Re-enable interaction for card content area */
}

/* Update existing pair-card for horizontal layout */
.cards-horizontal .pair-card {
  width: 320px; /* Fixed width instead of min-width */
  flex-shrink: 0;
  height: fit-content;
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  margin-bottom: 0; /* Override existing margin */
}

.cards-horizontal .pair-card:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

.cards-horizontal .pair-card.selected {
  border-color: var(--coral);
  box-shadow: 0 6px 25px rgba(7, 21, 36, 0.3);
  background: white; /* Ensure solid background, no transparency */
}

.map-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}

#map {
  height: 100%;
  width: 100%;
}

/* Restaurant Label Styles */
.restaurant-label-marker {
  background: none;
  border: none;
  pointer-events: none;
  transition: transform 0.1s ease;
}

.restaurant-label-marker.hover-priority {
  z-index: 1000 !important;
  transform: scale(1.2);
}

/* Scale label content when hovering */
.restaurant-label {
  transition: transform 0.1s ease;
}

.restaurant-label-marker.hover-priority .restaurant-label {
  transform: scale(1.2);
}

.restaurant-label {
  background: transparent;
  color: var(--gray-800);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  min-width: fit-content;
  transition: transform 0.1s ease;
  text-shadow: 
    -1px -1px 0 rgba(255, 255, 255, 0.8),
    1px -1px 0 rgba(255, 255, 255, 0.8),
    -1px 1px 0 rgba(255, 255, 255, 0.8),
    1px 1px 0 rgba(255, 255, 255, 0.8);
}

/* Card transition animations */
.pair-card {
  animation: slideInRight 0.4s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Restaurant card image transitions */
.restaurant-card {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.1s ease-in-out;
}

.restaurant-card.loading {
  opacity: 0.7;
}

.restaurant-card.loaded {
  opacity: 1;
}

/* Pairs Panel Styles */
.pairs-header {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--gray-300);
  background: var(--gray-50);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pairs-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
  line-height: 1.2;
}

.restaurant-count {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  line-height: 1.2;
}

.loading-indicator {
  font-size: 0.875rem;
  color: var(--gray-600);
  display: none;
}

.loading-indicator.active {
  display: block;
}

.pairs-list {
  padding: 0;
}

/* Restaurant Pair Card - New Design */
.pair-card {
  background: var(--gray-50);
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.pair-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.pair-card.selected {
  background: rgba(7, 21, 36, 0.03);
  border: 2px solid var(--coral);
}

.pair-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.walking-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4285F4;
  font-weight: 500;
}

.walk-icon {
  width: 16px;
  height: 16px;
  color: #4285F4;
}

.walk-text {
  color: #4285F4;
}

.compatibility-score {
  background: rgba(34, 197, 94, 0.1);
  color: #22C55E;
  padding: 0.375rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.restaurants-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.restaurant-card {
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background-color: var(--gray-200);
}

.restaurant-card.no-image {
  background-image: none !important;
  background-color: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.restaurant-card.no-image::before {
  content: "👨‍🍳";
  font-size: 2rem;
  color: var(--gray-500);
}

/* Removed red overlay - only keeping bottom gradient */

.restaurant-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  z-index: 1;
}

.restaurant-content {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 2;
}

.restaurant-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.restaurant-info {
  min-width: 0;
}

/* Override global h4/p styles with higher specificity */
.pair-card .restaurant-details h4.restaurant-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0;
  line-height: 1.3;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Remove truncation for restaurant names when card is selected */
.pair-card.selected .restaurant-details h4.restaurant-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.pair-card .restaurant-details p.restaurant-cuisine {
  color: var(--gray-600);
  font-size: 0.75rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Keep cuisine text truncated even when selected - no override needed */

.restaurant-stars {
  display: flex;
  gap: 2px;
  align-items: center;
}

.restaurant-card .restaurant-price {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* White gold stars for red gradient cards */
.restaurant-stars[data-stars="1"]::before {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg width="87" height="83" viewBox="0 0 87 83" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48.501 3.26651L58.692 23.9145L81.477 27.227V27.2231C83.684 27.5434 85.5161 29.0903 86.2075 31.2114C86.895 33.3325 86.3207 35.6606 84.7231 37.2192L68.2351 53.2892L72.1257 75.9802H72.1296C72.5046 78.1794 71.6022 80.4021 69.7976 81.7107C67.9929 83.0232 65.6023 83.1951 63.6257 82.1599L43.2467 71.4449L22.8677 82.1599C20.8911 83.1951 18.5005 83.0232 16.6958 81.7107C14.8911 80.4021 13.9888 78.1795 14.3638 75.9802L18.2544 53.2892L1.77038 37.2192C0.172677 35.6606 -0.401523 33.3325 0.285977 31.2114C0.977387 29.0903 2.80938 27.5434 5.01648 27.2231L27.8015 23.9106L37.9925 3.2656C38.9808 1.2656 41.0159 0 43.2464 0C45.4769 0 47.512 1.2656 48.5003 3.2656L48.501 3.26651Z" fill="%23FFC536"/></svg>');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
}

.restaurant-stars[data-stars="2"]::before {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg width="87" height="83" viewBox="0 0 87 83" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48.501 3.26651L58.692 23.9145L81.477 27.227V27.2231C83.684 27.5434 85.5161 29.0903 86.2075 31.2114C86.895 33.3325 86.3207 35.6606 84.7231 37.2192L68.2351 53.2892L72.1257 75.9802H72.1296C72.5046 78.1794 71.6022 80.4021 69.7976 81.7107C67.9929 83.0232 65.6023 83.1951 63.6257 82.1599L43.2467 71.4449L22.8677 82.1599C20.8911 83.1951 18.5005 83.0232 16.6958 81.7107C14.8911 80.4021 13.9888 78.1795 14.3638 75.9802L18.2544 53.2892L1.77038 37.2192C0.172677 35.6606 -0.401523 33.3325 0.285977 31.2114C0.977387 29.0903 2.80938 27.5434 5.01648 27.2231L27.8015 23.9106L37.9925 3.2656C38.9808 1.2656 41.0159 0 43.2464 0C45.4769 0 47.512 1.2656 48.5003 3.2656L48.501 3.26651Z" fill="%23FFC536"/></svg>'), url('data:image/svg+xml;utf8,<svg width="87" height="83" viewBox="0 0 87 83" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48.501 3.26651L58.692 23.9145L81.477 27.227V27.2231C83.684 27.5434 85.5161 29.0903 86.2075 31.2114C86.895 33.3325 86.3207 35.6606 84.7231 37.2192L68.2351 53.2892L72.1257 75.9802H72.1296C72.5046 78.1794 71.6022 80.4021 69.7976 81.7107C67.9929 83.0232 65.6023 83.1951 63.6257 82.1599L43.2467 71.4449L22.8677 82.1599C20.8911 83.1951 18.5005 83.0232 16.6958 81.7107C14.8911 80.4021 13.9888 78.1795 14.3638 75.9802L18.2544 53.2892L1.77038 37.2192C0.172677 35.6606 -0.401523 33.3325 0.285977 31.2114C0.977387 29.0903 2.80938 27.5434 5.01648 27.2231L27.8015 23.9106L37.9925 3.2656C38.9808 1.2656 41.0159 0 43.2464 0C45.4769 0 47.512 1.2656 48.5003 3.2656L48.501 3.26651Z" fill="%23FFC536"/></svg>');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 0 0, 18px 0;
  width: 34px;
  height: 16px;
}

.restaurant-stars[data-stars="3"]::before {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg width="87" height="83" viewBox="0 0 87 83" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48.501 3.26651L58.692 23.9145L81.477 27.227V27.2231C83.684 27.5434 85.5161 29.0903 86.2075 31.2114C86.895 33.3325 86.3207 35.6606 84.7231 37.2192L68.2351 53.2892L72.1257 75.9802H72.1296C72.5046 78.1794 71.6022 80.4021 69.7976 81.7107C67.9929 83.0232 65.6023 83.1951 63.6257 82.1599L43.2467 71.4449L22.8677 82.1599C20.8911 83.1951 18.5005 83.0232 16.6958 81.7107C14.8911 80.4021 13.9888 78.1795 14.3638 75.9802L18.2544 53.2892L1.77038 37.2192C0.172677 35.6606 -0.401523 33.3325 0.285977 31.2114C0.977387 29.0903 2.80938 27.5434 5.01648 27.2231L27.8015 23.9106L37.9925 3.2656C38.9808 1.2656 41.0159 0 43.2464 0C45.4769 0 47.512 1.2656 48.5003 3.2656L48.501 3.26651Z" fill="%23FFC536"/></svg>'), url('data:image/svg+xml;utf8,<svg width="87" height="83" viewBox="0 0 87 83" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48.501 3.26651L58.692 23.9145L81.477 27.227V27.2231C83.684 27.5434 85.5161 29.0903 86.2075 31.2114C86.895 33.3325 86.3207 35.6606 84.7231 37.2192L68.2351 53.2892L72.1257 75.9802H72.1296C72.5046 78.1794 71.6022 80.4021 69.7976 81.7107C67.9929 83.0232 65.6023 83.1951 63.6257 82.1599L43.2467 71.4449L22.8677 82.1599C20.8911 83.1951 18.5005 83.0232 16.6958 81.7107C14.8911 80.4021 13.9888 78.1795 14.3638 75.9802L18.2544 53.2892L1.77038 37.2192C0.172677 35.6606 -0.401523 33.3325 0.285977 31.2114C0.977387 29.0903 2.80938 27.5434 5.01648 27.2231L27.8015 23.9106L37.9925 3.2656C38.9808 1.2656 41.0159 0 43.2464 0C45.4769 0 47.512 1.2656 48.5003 3.2656L48.501 3.26651Z" fill="%23FFC536"/></svg>'), url('data:image/svg+xml;utf8,<svg width="87" height="83" viewBox="0 0 87 83" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48.501 3.26651L58.692 23.9145L81.477 27.227V27.2231C83.684 27.5434 85.5161 29.0903 86.2075 31.2114C86.895 33.3325 86.3207 35.6606 84.7231 37.2192L68.2351 53.2892L72.1257 75.9802H72.1296C72.5046 78.1794 71.6022 80.4021 69.7976 81.7107C67.9929 83.0232 65.6023 83.1951 63.6257 82.1599L43.2467 71.4449L22.8677 82.1599C20.8911 83.1951 18.5005 83.0232 16.6958 81.7107C14.8911 80.4021 13.9888 78.1795 14.3638 75.9802L18.2544 53.2892L1.77038 37.2192C0.172677 35.6606 -0.401523 33.3325 0.285977 31.2114C0.977387 29.0903 2.80938 27.5434 5.01648 27.2231L27.8015 23.9106L37.9925 3.2656C38.9808 1.2656 41.0159 0 43.2464 0C45.4769 0 47.512 1.2656 48.5003 3.2656L48.501 3.26651Z" fill="%23FFC536"/></svg>');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 0 0, 18px 0, 36px 0;
  width: 52px;
  height: 16px;
}

/* Map Markers */
.michelin-marker {
  width: 30px;
  height: 30px;
  background: var(--coral);
  border: 2px solid var(--coral);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.michelin-marker--selected {
  background: var(--coral-dark);
  border-color: var(--coral-dark);
  border-width: 3px;
}

.michelin-marker::before {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg width="87" height="83" viewBox="0 0 87 83" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48.501 3.26651L58.692 23.9145L81.477 27.227V27.2231C83.684 27.5434 85.5161 29.0903 86.2075 31.2114C86.895 33.3325 86.3207 35.6606 84.7231 37.2192L68.2351 53.2892L72.1257 75.9802H72.1296C72.5046 78.1794 71.6022 80.4021 69.7976 81.7107C67.9929 83.0232 65.6023 83.1951 63.6257 82.1599L43.2467 71.4449L22.8677 82.1599C20.8911 83.1951 18.5005 83.0232 16.6958 81.7107C14.8911 80.4021 13.9888 78.1795 14.3638 75.9802L18.2544 53.2892L1.77038 37.2192C0.172677 35.6606 -0.401523 33.3325 0.285977 31.2114C0.977387 29.0903 2.80938 27.5434 5.01648 27.2231L27.8015 23.9106L37.9925 3.2656C38.9808 1.2656 41.0159 0 43.2464 0C45.4769 0 47.512 1.2656 48.5003 3.2656L48.501 3.26651Z" fill="%23FEA028"/></svg>');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center;
  width: 16px;
  height: 16px;
}

/* Removed duplicate restaurant-price rule - handled by more specific .restaurant-card .restaurant-price above */

/* Pairing Reason */
.pairing-reason {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--gray-100);
  border-radius: 0.375rem;
  color: var(--gray-600);
}

/* Removed pairing-reason-title as title is no longer used */

.pairing-reason p {
  font-size: 0.75rem;
  color: var(--gray-600);
  line-height: 1.3;
  margin: 0;
  /* Truncate to 2 lines by default */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Show full pairing reason text when card is selected */
.pair-card.selected .pairing-reason p {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  text-overflow: unset;
}

/* Empty State */
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--gray-600);
}

.empty-state h4 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--gray-800);
}

/* Map Styles - Clean CartoDB Positron */
.leaflet-container {
  font-family: 'Poppins', sans-serif;
  background: var(--gray-50);
}

/* Clean map controls */
.leaflet-control-zoom {
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.leaflet-control-zoom a {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-weight: 600;
  width: 30px;
  height: 30px;
  line-height: 28px;
  border-radius: 4px;
  margin: 1px;
  transition: all 0.2s ease;
}

.leaflet-control-zoom a:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

/* Attribution styling */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid var(--gray-200);
  backdrop-filter: blur(4px);
}

.leaflet-popup-content-wrapper {
  border-radius: 0.5rem;
}

.leaflet-popup-content {
  margin: 0.75rem;
  line-height: 1.4;
}

.popup-restaurant {
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.25rem;
}

.popup-details {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* Custom Leaflet Controls */
.leaflet-control-container .leaflet-routing-container-hide {
  display: none;
}

/* Custom Markers */
.custom-michelin-marker {
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.custom-michelin-marker:hover {
  transform: scale(1.2);
  z-index: 1000 !important;
}

/* Marker hover animation for both regular and selected markers */
.michelin-marker,
.custom-michelin-marker-selected {
  transition: transform 0.1s ease;
  cursor: pointer;
}

.michelin-marker:hover,
.custom-michelin-marker-selected:hover {
  transform: scale(1.2);
  z-index: 1000 !important;
}

/* Loading Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  border-top-color: var(--coral);
  animation: spin 1s ease-in-out infinite;
  margin-right: 0.5rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .hero {
    padding: 10rem 1rem 4rem;
    min-height: 65vh;
  }
  
  .cities-section {
    padding: 2rem 1rem;
  }
}

/* Small mobile devices - single column for city cards */
@media (max-width: 480px) {
  .cities-grid {
    grid-template-columns: 1fr;
  }
}

  /* City page responsive */
  .content-layout {
    flex-direction: column;
  }
  
  .pairs-panel {
    width: 100%;
    height: 50%;
  }
  
  .map-panel {
    height: 50%;
  }
  
  .filter-controls {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .header-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .city-info {
    text-align: left;
  }
}



/* Why BangBang Section Styles */
.why-bangbang-section {
    padding: 5rem 0;
    background: var(--gray-50);
    scroll-margin-top: 4rem;
}

.why-bangbang-container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 1rem;
}

.why-bangbang-header {
    text-align: center;
    margin-bottom: 4rem;
}

.why-bangbang-title {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.title-accent {
    color: var(--coral);
}

.why-bangbang-subtitle {
    font-size: 1.25rem;
    color: var(--gray-600);
    max-width: 768px;
    margin: 0 auto;
    line-height: 1.6;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    text-align: center;
    padding: 1.5rem;
}

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.feature-icon-coral {
    background: var(--gold);
}

.feature-icon-teal {
    background: var(--gold);
}

.feature-icon-gold {
    background: var(--gold);
}

.feature-icon i {
    color: var(--gray-50);
    font-size: 2rem;
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.75rem;
}

.feature-description {
    color: var(--gray-600);
    line-height: 1.6;
}

/* Footer Styles */
.main-footer {
    background: var(--gray-800);
    color: var(--gray-50);
    padding: 3rem 0;
}

.footer-container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 1rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.footer-brand-logo {
    height: 2rem;
    width: auto;
    opacity: 0.9;
}

.footer-description {
    color: var(--gray-300);
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer-column-title {
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-link {
    color: var(--gray-300);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--gray-50);
}

.partner-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.partner-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
}

.partner-icon {
    display: block;
    margin: 0 auto 0.25rem;
    font-size: 1.25rem;
}

.partner-icon-gold {
    color: var(--gold);
}

.partner-icon-coral {
    color: var(--coral);
}

.partner-text {
    font-size: 0.75rem;
    margin: 0;
}

.footer-bottom {
    border-top: 1px solid var(--gray-600);
    padding-top: 2rem;
    text-align: center;
}

.footer-copyright {
    color: var(--gray-300);
    font-size: 0.875rem;
    margin: 0;
}

/* Icon spacing for Lucide icons */
i[data-lucide] {
    display: inline-block;
}

/* Additional responsive styles for new sections */
@media (max-width: 1024px) {
  .main-nav {
    display: none;
  }
  
  .mobile-menu-button {
    display: block;
  }
  
  .why-bangbang-title {
    font-size: 1.875rem;
  }
  
  .why-bangbang-subtitle {
    font-size: 1.125rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .partner-cards {
    flex-direction: row;
    justify-content: center;
  }
}

/* Utility classes to replace JavaScript style injection */
.js-hidden {
  display: none !important;
}

.js-visible {
  display: block !important;
}

.js-invisible {
  visibility: hidden !important;
}

.js-absolute {
  position: absolute !important;
}

.js-temp-div {
  visibility: hidden;
  position: absolute;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
}

.js-no-scroll {
  overflow: hidden !important;
}

/* Dropdown positioning utility */
.js-dropdown-positioned {
  position: fixed;
  z-index: 50;
  left: var(--dropdown-left);
  top: var(--dropdown-top);
  width: var(--dropdown-width);
  max-height: var(--dropdown-max-height, none);
}

.js-dropdown-scrollable {
  overflow-y: auto;
}

/* Card background image classes */
.js-card-bg-image {
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Label visibility classes */
.js-label-visible {
  display: block !important;
}

.js-label-hidden {
  display: none !important;
}