/* Custom CSS for 菩提树 Boutique Match - Modern Dating Site Design */

/* Simplified 3-Color Theme - High Contrast & Accessibility */
:root {
  /* PRIMARY: Pink/Rose - Main branding and actions */
  --primary-pink: #ec4899;       /* Primary pink for love/romance */
  --primary-pink-dark: #be185d;  /* Darker pink for contrast */
  --primary-pink-light: #f9a8d4; /* Light pink for backgrounds */
  
  /* SECONDARY: Pink - Links and secondary elements */
  --secondary-blue: #ec4899;     /* Pink for links */
  --secondary-blue-dark: #be185d; /* Darker pink for hover */
  --secondary-blue-light: #f9a8d4; /* Lighter pink for accents */
  
  /* NEUTRAL: Dark Gray - Text and backgrounds */
  --neutral-dark: #111827;      /* Dark gray for primary text */
  --neutral-medium: #374151;     /* Medium gray for secondary text */
  --neutral-light: #6b7280;      /* Light gray for muted text */
  
  /* Background colors - simplified */
  --bg-white: #ffffff;
  --bg-gray-50: #f8fafc;
  --bg-gray-100: #f1f5f9;
  --bg-gradient: linear-gradient(135deg, #fef7f0 0%, #fef2f2 50%, #f0f9ff 100%);
  
  /* Text colors - black for content, white for banners */
  --text-primary: #111827;      /* Dark gray for content text */
  --text-secondary: #374151;    /* Medium gray for secondary text */
  --text-muted: #6b7280;         /* Light gray for muted text */
  
  /* LEGACY VARIABLES - Keep for navigation compatibility */
  --secondary-rose: #f43f5e;     /* Secondary rose */
  --secondary-rose-dark: #e11d48; /* Dark rose */
  --secondary-rose-light: #fda4af; /* Light rose */
  --accent-coral: #ff6b6b;       /* Coral accent */
  --accent-peach: #ff8a80;       /* Peach accent */
  --accent-orange: #fb923c;      /* Orange accent */
  --neutral-slate: #64748b;      /* Light slate for text */
  --neutral-slate-dark: #475569; /* Medium slate */
  --neutral-slate-light: #94a3b8; /* Very light slate */
  --white: #ffffff;              /* White for navigation */
}

/* Global typography and background with modern dating theme */
html, body { 
  color: var(--text-primary); 
  background: var(--bg-gradient) !important; 
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Modern typography - Black for content */
h1, h2, h3, h4, h5, h6 { 
  color: var(--text-primary) !important; /* Black for content readability */
  font-weight: 700;
  line-height: 1.2;
}

p, li, dt, dd, small, span { 
  color: var(--text-secondary) !important; /* Medium gray for good contrast */
  line-height: 1.6;
}

a { 
  color: var(--secondary-blue) !important; /* Pink for excellent contrast */
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 600; /* Slightly bolder for better visibility */
}

a:hover { 
  color: var(--secondary-blue-dark) !important; /* Darker pink on hover */
  text-decoration: underline;
}

/* Brown text specifically for light yellow banner backgrounds */
.bg-yellow-50 h1,
.bg-yellow-50 h2,
.bg-yellow-50 h3,
.bg-yellow-50 h4,
.bg-yellow-50 h5,
.bg-yellow-50 h6,
.bg-yellow-50 p,
.bg-yellow-50 span,
.bg-yellow-50 div,
.bg-yellow-100 h1,
.bg-yellow-100 h2,
.bg-yellow-100 h3,
.bg-yellow-100 h4,
.bg-yellow-100 h5,
.bg-yellow-100 h6,
.bg-yellow-100 p,
.bg-yellow-100 span,
.bg-yellow-100 div,
.bg-amber-50 h1,
.bg-amber-50 h2,
.bg-amber-50 h3,
.bg-amber-50 h4,
.bg-amber-50 h5,
.bg-amber-50 h6,
.bg-amber-50 p,
.bg-amber-50 span:not(.countdown-timer),
.bg-amber-50 div,
header.hero-bodhi.bg-yellow-50 h1,
header.hero-bodhi.bg-yellow-50 h2,
header.hero-bodhi.bg-yellow-50 h3,
header.hero-bodhi.bg-yellow-50 h4,
header.hero-bodhi.bg-yellow-50 h5,
header.hero-bodhi.bg-yellow-50 h6,
header.hero-bodhi.bg-yellow-50 p,
header.hero-bodhi.bg-yellow-50 span,
header.hero-bodhi.bg-yellow-50 div {
  color: #92400e !important; /* Brown for excellent contrast on light yellow */
}

/* White text specifically for dark/pink banner backgrounds */
header.hero-bodhi h1,
header.hero-bodhi h2,
header.hero-bodhi h3,
header.hero-bodhi h4,
header.hero-bodhi h5,
header.hero-bodhi h6,
header.hero-bodhi p,
header.hero-bodhi span,
header.hero-bodhi div,
.bg-gradient-to-r h1,
.bg-gradient-to-r h2,
.bg-gradient-to-r h3,
.bg-gradient-to-r h4,
.bg-gradient-to-r h5,
.bg-gradient-to-r h6,
.bg-gradient-to-r p,
.bg-gradient-to-r span,
.bg-gradient-to-r div,
.bg-pink-500 h1,
.bg-pink-500 h2,
.bg-pink-500 h3,
.bg-pink-500 h4,
.bg-pink-500 h5,
.bg-pink-500 h6,
.bg-pink-500 p,
.bg-pink-500 span,
.bg-pink-500 div,
.bg-pink-600 h1,
.bg-pink-600 h2,
.bg-pink-600 h3,
.bg-pink-600 h4,
.bg-pink-600 h5,
.bg-pink-600 h6,
.bg-pink-600 p,
.bg-pink-600 span,
.bg-pink-600 div,
.bg-gray-800 h1,
.bg-gray-800 h2,
.bg-gray-800 h3,
.bg-gray-800 h4,
.bg-gray-800 h5,
.bg-gray-800 h6,
.bg-gray-800 p,
.bg-gray-800 span,
.bg-gray-800 div,
.bg-gray-900 h1,
.bg-gray-900 h2,
.bg-gray-900 h3,
.bg-gray-900 h4,
.bg-gray-900 h5,
.bg-gray-900 h6,
.bg-gray-900 p,
.bg-gray-900 span,
.bg-gray-900 div {
  color: #ffffff !important;
}
.text-stroke-gold {
  color: #ffffff !important;
  -webkit-text-stroke: 1.1px #d9b200; /* darker gold tone */
  text-shadow:
    0 0 1px rgba(217,178,0,0.85),
    0 0 2px rgba(217,178,0,0.55),
    0 1px 0 rgba(0,0,0,0.2);
}
.text-stroke-gold-sm {
  color: #ffffff !important;
  -webkit-text-stroke: 0.8px #d9b200;
  text-shadow:
    0 0 1px rgba(217,178,0,0.7),
    0 1px 0 rgba(0,0,0,0.15);
}

/* Gold gradient fill for characters */
.text-fill-gold {
  background: linear-gradient(180deg, #fff6bf 0%, #ffd700 45%, #d9b200 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Subtle reddish tone matching logo plate */
.text-stroke-rose {
  color: #ffffff !important;
  -webkit-text-stroke: 0.8px #dba9a9; /* lighter, softer stroke */
  text-shadow:
    0 0 1px rgba(219,169,169,0.55),
    0 1px 0 rgba(0,0,0,0.12);
}
.text-fill-rose {
  background: linear-gradient(180deg, #ffecec 0%, #ffb7ae 45%, #cf7e7e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Subtle light-pink tone matching theme for hero headings */
.text-stroke-ink {
  color: #fdf2f8 !important;
  -webkit-text-stroke: 0.8px #F9A8D4; /* light pink stroke */
  text-shadow:
    0 0 1px rgba(249,168,212,0.45),
    0 1px 0 rgba(0,0,0,0.08);
}
.text-fill-ink {
  background: linear-gradient(180deg, #fbfefc 0%, #d7f2ee 45%, #3aa59d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Simplified button styles - 3-color theme */
.btn-primary { 
  background: var(--primary-pink) !important; 
  color: var(--bg-white) !important; 
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
}

.btn-primary:hover { 
  background: var(--primary-pink-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4) !important;
}

.btn-secondary { 
  border: 2px solid var(--secondary-blue) !important; 
  color: var(--secondary-blue) !important; 
  background: transparent !important;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-secondary:hover { 
  background: var(--secondary-blue) !important; 
  color: var(--bg-white) !important;
  transform: translateY(-1px);
}

.btn-outline { 
  border: 2px solid var(--neutral-medium) !important; 
  color: var(--neutral-medium) !important;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline:hover { 
  border-color: var(--neutral-dark) !important; 
  color: var(--neutral-dark) !important;
  background: rgba(55, 65, 81, 0.05);
}

/* Modern auth buttons - base styles (overridden below with embossed styles) */
/* These base styles are kept for backward compatibility */

/* Menu tabs - dark gray font for accessibility */
.nav-link,
.mobile-nav-link,
.nav-item,
.nav-tab,
.menu-tab,
.tab-link,
.navbar-nav .nav-link,
.navbar-nav .nav-item,
.navbar-nav a,
.navbar a,
.nav a,
.navbar-nav .nav-link,
.navbar-nav .nav-item,
.navbar-nav a,
.navbar a,
.nav a,
.menu a,
.tabs a,
.tab a {
  color: #1f2937 !important;
}

.nav-link:hover,
.mobile-nav-link:hover,
.nav-item:hover,
.nav-tab:hover,
.menu-tab:hover,
.tab-link:hover,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item:hover,
.navbar-nav a:hover,
.navbar a:hover,
.nav a:hover,
.menu a:hover,
.tabs a:hover,
.tab a:hover {
  color: #f9a8d4 !important; /* Light pink hover */
}
.nav-emboss { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.10)) !important; }
.nav-active { background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.14)) !important; }
/* nav-events-featured base styling removed - now using embossed style below */

/* Modern hero and header background */
header.hero-bodhi { 
  background: linear-gradient(135deg, var(--primary-pink) 0%, var(--secondary-rose) 50%, var(--accent-coral) 100%) !important; 
  color: var(--bg-white) !important;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.2);
}

.gradient-overlay { 
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(244, 63, 94, 0.1) 100%) !important; 
}

/* Compact header design */
header.hero-bodhi { 
  padding-top: 0.5rem !important; 
  padding-bottom: 0.5rem !important; 
}

header.hero-bodhi .container > div { 
  min-height: 4rem !important; 
}

@media (min-width: 1024px) {
  header.hero-bodhi .container > div { 
    min-height: 4.5rem !important; 
  }
}
/* Modern logo styling */
.logo-circle { 
  background: radial-gradient(circle at 30% 30%, var(--primary-pink-light), var(--primary-pink)) !important; 
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
}

.logo-leaf, .logo-account { 
  color: var(--bg-white) !important; 
}

/* Modern badges and alerts */
.event-badge-featured { 
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-peach)) !important; 
  color: var(--bg-white) !important; 
  border: none !important;
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.75rem;
}

.event-badge-open, .event-badge-full, .event-badge-closed { 
  color: var(--text-primary) !important; 
  background: rgba(236, 72, 153, 0.1) !important; 
  border: 1px solid rgba(236, 72, 153, 0.3) !important;
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 500;
  font-size: 0.75rem;
}

.alert-success, .alert-error, .alert-warning, .alert-info { 
  background: rgba(236, 72, 153, 0.08) !important; 
  border: 1px solid rgba(236, 72, 153, 0.2) !important; 
  color: var(--text-primary) !important;
  border-radius: 12px;
  padding: 16px;
}

/* Modern form styling */
.form-label { 
  color: var(--text-primary) !important; 
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.form-input { 
  border: 2px solid rgba(236, 72, 153, 0.2) !important;
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.2s ease;
  background: var(--bg-white);
}

.form-input:focus { 
  border-color: var(--primary-pink) !important; 
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1) !important;
  outline: none;
}

/* Modern footer */
footer { 
  box-shadow: 0 -2px 10px rgba(236, 72, 153, 0.1);
}

.service-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--bg-white);
  background: rgba(236, 72, 153, 0.2) !important;
  border: 1px solid rgba(236, 72, 153, 0.3);
  margin: 2px;
  transition: all 0.2s ease;
}

.service-chip:hover {
  background: rgba(236, 72, 153, 0.3) !important;
  transform: translateY(-1px);
}

/* City art backgrounds (subtle, lightweight SVGs) */
.city-card {
  position: relative;
  overflow: hidden;
}
.city-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 160% auto;
  pointer-events: none;
}
.city-bg-vancouver::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cpath d='M0 170 L50 150 L90 160 L130 120 L170 130 L210 110 L250 140 L290 100 L330 130 L370 120 L410 150 L450 140 L490 160 L530 150 L600 170 L600 200 L0 200 Z' fill='%23064d49'/%3E%3C/svg%3E");
}
.city-bg-richmond::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Crect x='40' y='120' width='40' height='50' fill='%23064d49'/%3E%3Crect x='100' y='90' width='50' height='80' fill='%23064d49'/%3E%3Crect x='170' y='110' width='45' height='60' fill='%23064d49'/%3E%3Crect x='230' y='100' width='55' height='70' fill='%23064d49'/%3E%3Crect x='300' y='115' width='35' height='55' fill='%23064d49'/%3E%3Crect x='350' y='95' width='60' height='75' fill='%23064d49'/%3E%3Crect x='420' y='110' width='45' height='60' fill='%23064d49'/%3E%3Crect x='480' y='120' width='40' height='50' fill='%23064d49'/%3E%3C/svg%3E");
}
.city-bg-burnaby::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Ccircle cx='120' cy='150' r='50' fill='%23064d49'/%3E%3Ccircle cx='300' cy='160' r='60' fill='%23064d49'/%3E%3Ccircle cx='480' cy='145' r='45' fill='%23064d49'/%3E%3C/svg%3E");
}
.city-bg-seattle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cpath d='M300 60 L310 65 L305 90 L330 100 L305 110 L310 135 L300 140 L290 135 L295 110 L270 100 L295 90 L290 65 Z' fill='%23064d49'/%3E%3Crect x='260' y='140' width='80' height='10' fill='%23064d49'/%3E%3C/svg%3E");
}

/* Modern content background with pink theme */
.leaf-tint-bg {
  position: relative;
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 247, 240, 0.9) 100%);
  border: 2px solid rgba(236, 72, 153, 0.2);
  box-shadow: 
    0 0 20px rgba(236, 72, 153, 0.15),
    0 0 40px rgba(236, 72, 153, 0.1),
    inset 0 0 20px rgba(236, 72, 153, 0.05);
  border-radius: 16px;
}

.leaf-tint-bg::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, rgba(236, 72, 153, 0.1), rgba(244, 63, 94, 0.1), rgba(255, 107, 107, 0.1));
  border-radius: 18px;
  z-index: -1;
  animation: borderGlow 3s ease-in-out infinite alternate;
}

@keyframes borderGlow {
  0% { 
    box-shadow: 
      0 0 20px rgba(236, 72, 153, 0.2),
      0 0 40px rgba(236, 72, 153, 0.15),
      0 0 60px rgba(236, 72, 153, 0.1);
  }
  100% { 
    box-shadow: 
      0 0 30px rgba(236, 72, 153, 0.3),
      0 0 50px rgba(236, 72, 153, 0.2),
      0 0 70px rgba(236, 72, 153, 0.15);
  }
}

/* Glowing text effect for "关于我们" heading */
.about-title {
  color: rgba(236,72,153,0.95) !important;
  text-shadow: 
    0 0 10px rgba(236,72,153,0.3),
    0 0 20px rgba(236,72,153,0.2),
    0 0 30px rgba(236,72,153,0.1);
  animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
  0% { 
    text-shadow: 
      0 0 10px rgba(236,72,153,0.3),
      0 0 20px rgba(236,72,153,0.2),
      0 0 30px rgba(236,72,153,0.1);
  }
  100% { 
    text-shadow: 
      0 0 15px rgba(236,72,153,0.4),
      0 0 25px rgba(236,72,153,0.3),
      0 0 35px rgba(236,72,153,0.2);
  }
}

/* Additional glow effect for About Us page sections */
.about-section {
  position: relative;
  background: linear-gradient(180deg, rgba(253,242,248,0.95) 0%, rgba(252,231,243,0.9) 100%);
  border: 2px solid rgba(236,72,153,0.2);
  box-shadow: 
    0 0 20px rgba(236,72,153,0.15),
    0 0 40px rgba(236,72,153,0.1),
    inset 0 0 20px rgba(236,72,153,0.05);
  border-radius: 12px;
}
.about-section::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, rgba(236,72,153,0.1), rgba(244,63,94,0.1), rgba(236,72,153,0.1));
  border-radius: 14px;
  z-index: -1;
  animation: borderGlow 3s ease-in-out infinite alternate;
}

/* Toasts */
.toast-success::before, .toast-error::before, .toast-warning::before, .toast-info::before { background: linear-gradient(180deg, var(--ink-700), var(--ink-900)) !important; }
.toast .toast-icon { background: linear-gradient(135deg, var(--gold-700), var(--gold-500)) !important; color: var(--ink-900) !important; }

/* Decorative backgrounds simplified to muted ink tones */
.bodhi-leaf-bg, .page-bodhi-bg, .auth-leaf-bg, .auth-account-bg { background-image: none !important; background: radial-gradient(60% 60% at 30% 0%, rgba(6,77,73,0.15), transparent 60%) !important; }

/* Scrollbar recolor */
::-webkit-scrollbar-thumb { 
    background: var(--neutral-dark) !important; 
}

/* Environment Banner Styles */
.env-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9999;
  animation: envBannerPulse 2s ease-in-out infinite;
}

.env-banner span {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.05em;
}

@keyframes envBannerPulse {
  0%, 100% { 
    opacity: 0.8; 
    transform: scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.02); 
  }
}

/* Simplified Bodhi Leaf Background - Pink Romantic Theme */
.bodhi-leaf-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='leafGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ec4899;stop-opacity:0.15'/%3E%3Cstop offset='50%25' style='stop-color:%23f9a8d4;stop-opacity:0.12'/%3E%3Cstop offset='100%25' style='stop-color:%23ec4899;stop-opacity:0.08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50,5 C35,10 25,20 20,35 C18,45 20,55 25,65 C35,80 45,90 50,95 C55,90 65,80 75,65 C80,55 82,45 80,35 C75,20 65,10 50,5 Z' fill='url(%23leafGradient)' opacity='0.8'/%3E%3Cpath d='M50,5 L50,95' stroke='%23ec4899' stroke-width='0.3' opacity='0.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60vh;
  background-attachment: fixed;
}

/* Page-wide Bodhi leaf background - Large diagonal leaf in romantic pink */
.page-bodhi-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='diagonalLeafGradient' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23f9a8d4;stop-opacity:0.65'/%3E%3Cstop offset='20%25' style='stop-color:%23ec4899;stop-opacity:0.58'/%3E%3Cstop offset='50%25' style='stop-color:%23db2777;stop-opacity:0.55'/%3E%3Cstop offset='80%25' style='stop-color:%23be185d;stop-opacity:0.52'/%3E%3Cstop offset='100%25' style='stop-color:%23f9a8d4;stop-opacity:0.48'/%3E%3C/linearGradient%3E%3ClinearGradient id='leafVeins' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23db2777;stop-opacity:1.0'/%3E%3Cstop offset='100%25' style='stop-color:%23be185d;stop-opacity:0.9'/%3E%3C/linearGradient%3E%3ClinearGradient id='leafOutline' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23db2777;stop-opacity:0.9'/%3E%3Cstop offset='100%25' style='stop-color:%23be185d;stop-opacity:0.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Large Bodhi Leaf spanning diagonally with maximum visibility --%3E%3Cpath d='M15,185 C25,175 35,155 50,135 C65,115 80,95 95,75 C110,55 125,40 140,30 C150,23 160,20 165,23 C170,27 167,35 160,45 C153,55 140,70 125,90 C110,110 95,130 80,150 C65,170 50,185 35,195 C25,200 17,200 15,185 Z' fill='url(%23diagonalLeafGradient)' stroke='url(%23leafOutline)' stroke-width='2' opacity='1'/%3E%3C!-- Secondary leaf layer for depth --%3E%3Cpath d='M20,180 C30,170 40,150 55,130 C70,110 85,90 100,70 C115,50 130,35 145,25 C155,18 165,15 170,18 C175,22 172,30 165,40 C158,50 145,65 130,85 C115,105 100,125 85,145 C70,165 55,180 40,190 C30,195 22,195 20,180 Z' fill='url(%23diagonalLeafGradient)' opacity='0.85'/%3E%3C!-- Third leaf layer for maximum depth --%3E%3Cpath d='M25,175 C35,165 45,145 60,125 C75,105 90,85 105,65 C120,45 135,30 150,20 C160,13 170,10 175,13 C180,17 177,25 170,35 C163,45 150,60 135,80 C120,100 105,120 90,140 C75,160 60,175 45,185 C35,190 27,190 25,175 Z' fill='url(%23diagonalLeafGradient)' opacity='0.7'/%3E%3C!-- Enhanced central vein along diagonal - MORE PROMINENT --%3E%3Cpath d='M20,180 C35,165 60,140 85,115 C110,90 135,65 160,40' stroke='url(%23leafVeins)' stroke-width='4' opacity='1.0' fill='none'/%3E%3C!-- Enhanced side veins creating leaf texture - MORE PROMINENT --%3E%3Cpath d='M30,170 L75,125 M40,160 L85,115 M50,150 L95,105 M60,140 L105,95 M70,130 L115,85 M80,120 L125,75' stroke='url(%23leafVeins)' stroke-width='2.5' opacity='0.9' fill='none'/%3E%3Cpath d='M40,190 L85,145 M50,180 L95,135 M60,170 L105,125 M70,160 L115,115 M80,150 L125,105 M90,140 L135,95' stroke='url(%23leafVeins)' stroke-width='2' opacity='0.8' fill='none'/%3E%3C!-- Additional fine vein network for natural look --%3E%3Cpath d='M25,185 L60,150 M35,175 L70,140 M45,165 L80,130 M55,155 L90,120 M65,145 L100,110' stroke='url(%23leafVeins)' stroke-width='1.5' opacity='0.7' fill='none'/%3E%3Cpath d='M55,190 L90,155 M65,180 L100,145 M75,170 L110,135 M85,160 L120,125' stroke='url(%23leafVeins)' stroke-width='1.2' opacity='0.6' fill='none'/%3E%3C!-- Love symbols at leaf ends with maximum visibility --%3E%3C!-- Lower left tip - couple holding hands --%3E%3Cg transform='translate(17,183) scale(1.5)'%3E%3C!-- Two people silhouettes --%3E%3Cpath d='M-6,-4 C-7,-6 -5,-7 -4,-6 C-3,-7 -1,-6 -2,-4 L-2,-1 C-3,0 -5,0 -6,-4 Z' fill='%23ec4899' opacity='1'/%3E%3Cpath d='M2,-4 C1,-6 3,-7 4,-6 C5,-7 7,-6 6,-4 L6,-1 C5,0 3,0 2,-4 Z' fill='%23ec4899' opacity='1'/%3E%3C!-- Holding hands --%3E%3Cpath d='M-2,-1 L2,-1' stroke='%23ec4899' stroke-width='1.2' opacity='1'/%3E%3C!-- Love glow --%3E%3Ccircle cx='0' cy='-2' r='10' fill='%23ec4899' opacity='0.15'/%3E%3C/g%3E%3C!-- Upper right tip - heart with sparkles --%3E%3Cg transform='translate(163,27) scale(1.3)'%3E%3Cpath d='M0,2 C-3,-1 -5,-1 -5,2 C-5,5 0,9 0,9 C0,9 5,5 5,2 C5,-1 3,-1 0,2 Z' fill='%23ec4899' opacity='1'/%3E%3C!-- Heart glow --%3E%3Ccircle cx='0' cy='4' r='15' fill='%23ec4899' opacity='0.12'/%3E%3C!-- Enhanced sparkles around heart --%3E%3Cpath d='M-12,0 L-8,0 M-10,-2 L-10,2 M12,0 L8,0 M10,-2 L10,2 M-5,-10 L-1,-10 M-3,-12 L-3,-8 M5,-10 L1,-10 M3,-12 L3,-8' stroke='%23ec4899' stroke-width='0.8' opacity='1'/%3E%3C/g%3E%3C!-- Additional enhanced hearts along the leaf --%3E%3Cg transform='translate(65,135) scale(0.7)'%3E%3Cpath d='M0,1 C-2,-1 -3,-1 -3,1 C-3,3 0,6 0,6 C0,6 3,3 3,1 C3,-1 2,-1 0,1 Z' fill='%23ec4899' opacity='1'/%3E%3C/g%3E%3Cg transform='translate(105,95) scale(0.6)'%3E%3Cpath d='M0,1 C-2,-1 -3,-1 -3,1 C-3,3 0,6 0,6 C0,6 3,3 3,1 C3,-1 2,-1 0,1 Z' fill='%23ec4899' opacity='0.9'/%3E%3C/g%3E%3Cg transform='translate(90,115) scale(0.5)'%3E%3Cpath d='M0,1 C-2,-1 -3,-1 -3,1 C-3,3 0,6 0,6 C0,6 3,3 3,1 C3,-1 2,-1 0,1 Z' fill='%23ec4899' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: -15% bottom;
  background-size: 180vw 180vh;
  background-attachment: fixed;
  transform: rotate(-10deg);
  transform-origin: bottom left;
  animation: leafPulse 6s ease-in-out infinite;
}

/* Subtle scroll hint below the fold */
.scroll-hint {
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.scroll-hint::after {
  content: '▾';
  animation: bounceY 1.4s ease-in-out infinite;
}
@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* 草体字 (Cursive/Calligraphy) Font Styling */
.cursive-chinese {
  font-family: 'STKaiti', 'KaiTi', 'SimKai', 'FangSong', serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Crisp Chinese Text Rendering */
.crisp-chinese {
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: always;
  -webkit-text-stroke: 0;
}

/* Ensure Chinese text is always crisp */
.font-chinese {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Beautiful Chinese Poem Subtitle Styling */
.poem-subtitle {
  position: relative;
  padding: 0.5rem 0;
  margin: 1rem 0;
}

.poem-subtitle p:first-child {
  font-family: 'STKaiti', 'KaiTi', 'SimKai', 'FangSong', 'Noto Sans SC', serif;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.8;
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(220, 38, 38, 0.1);
  filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.15));
  transform: perspective(400px) rotateX(2deg);
  transition: all 0.3s ease;
  position: relative;
}

.poem-subtitle p:first-child::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.4), transparent);
}

.poem-subtitle p:first-child::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.4), transparent);
}

.poem-subtitle:hover p:first-child {
  transform: perspective(400px) rotateX(2deg) translateY(-2px);
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 0 12px rgba(220, 38, 38, 0.15);
  filter: drop-shadow(0 3px 6px rgba(220, 38, 38, 0.2));
}

.poem-subtitle p:last-child {
  font-style: italic;
  opacity: 0.85;
  letter-spacing: 0.05em;
  font-weight: 300;
}

/* Mini poem in header logo */
.poem-mini {
  font-family: 'STKaiti', 'KaiTi', 'SimKai', 'FangSong', 'Noto Sans SC', serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transform: perspective(300px) rotateX(1deg);
  transition: all 0.3s ease;
}

.poem-mini:hover {
  opacity: 1 !important;
  transform: perspective(300px) rotateX(1deg) translateY(-1px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Hero calligraphy subtitle - stylish but crisp on light bg */
.calligraphy-subtitle {
  font-family: 'STKaiti', 'KaiTi', 'SimKai', 'FangSong', serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #1f2937; /* gray-800 */
  text-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* Celebration headline for matches */
.match-announce {
  font-family: 'STKaiti', 'KaiTi', 'SimKai', 'FangSong', serif;
  font-size: 1.25rem; /* base */
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(90deg, #f43f5e 0%, #ef4444 40%, #f59e0b 100%);
  border-radius: 9999px;
  padding: .4rem .9rem;
  box-shadow: 0 10px 20px rgba(244,63,94,.25), 0 2px 0 rgba(255,255,255,.5) inset;
  border: 1px solid rgba(255,255,255,.65);
  display: inline-flex; align-items: center; gap: .5rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
@media (min-width: 768px){
  .match-announce{ font-size: 1.5rem; }
}

/* Ballot page vibrant typography */
.ballot-heading{
  font-family: 'STKaiti','KaiTi','SimKai','FangSong', serif;
  font-weight: 800;
  letter-spacing: .04em;
  background: linear-gradient(90deg,#ef4444 0%,#f97316 50%,#f59e0b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ballot-stat{ font-weight: 700; color:#1f2937; }
.ballot-stat strong{ color:#ef4444; }

/* Fireworks overlay */
.fireworks-overlay{ position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.firework{ position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.9); animation: explode 900ms ease-out forwards; }
@keyframes explode{
  0%{ transform: translate(0,0) scale(0.6); opacity: 1; }
  60%{ opacity: 1; }
  100%{ transform: translate(var(--dx), var(--dy)) scale(0.9); opacity: 0; }
}

/* Intensify meteors during celebration */
.celebrate .meteor{ animation-duration: 2.4s !important; }
.celebrate .wish-sparkle{ animation-duration: 1.8s !important; }

/* Prominent banner for ballot open (匹配中) */
.match-open-banner{ 
  background: radial-gradient(120% 120% at 50% -10%, rgba(255,255,255,0.85), rgba(255,255,255,0.6) 40%, rgba(255,255,255,0.2) 70%),
              linear-gradient(90deg, #16a34a, #22c55e, #84cc16);
  color:#0a0a0a; 
  border-radius: 9999px; 
  padding: .4rem .9rem; 
  box-shadow: 0 8px 16px rgba(34,197,94,.35), inset 0 2px 0 rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.7);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  font-weight: 900; 
  letter-spacing: .02em;
  display:inline-flex; align-items:center; gap:.4rem;
}
.match-open-dot{ width:.6rem; height:.6rem; border-radius:9999px; background:#ef4444; box-shadow:0 0 0 0 rgba(239,68,68,.7); animation: pulse-dot 1.2s infinite; }
@keyframes pulse-dot{ 0%{ box-shadow:0 0 0 0 rgba(239,68,68,.7);} 70%{ box-shadow:0 0 0 12px rgba(239,68,68,0);} 100%{ box-shadow:0 0 0 0 rgba(239,68,68,0);} }

/* Run to vote CTA micro-animation */
/* Point to vote CTA micro-animation */
.point-to-vote .pointer{ display:inline-block; animation: point-right 1.2s ease-in-out infinite; transform-origin: 70% 50%; }
@keyframes point-right{ 0%{ transform: translateX(0) rotate(0deg);} 50%{ transform: translateX(2px) rotate(-6deg);} 100%{ transform: translateX(0) rotate(0deg);} }

/* Pen stripe arrow pointing at heart CTA */
.pen-arrow{ position:absolute; right:62px; top:50%; transform: translateY(-50%); width: 140px; height: 10px; pointer-events:none; }
.pen-arrow::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background: repeating-linear-gradient(90deg, rgba(34,197,94,0.9) 0 8px, rgba(255,255,255,0.9) 8px 16px); transform: translateY(-50%); box-shadow:0 1px 0 rgba(0,0,0,.1); }
.pen-arrow::after{ content:""; position:absolute; right:-6px; top:50%; transform: translateY(-50%) rotate(45deg); width: 10px; height: 10px; background: rgba(34,197,94,0.95); clip-path: polygon(0 0, 100% 50%, 0 100%); box-shadow:0 1px 0 rgba(0,0,0,.12); }

.cursive-english {
  font-family: 'Dancing Script', 'Brush Script MT', 'Lucida Handwriting', cursive;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Enhanced Logo Design */
.logo-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transform: perspective(300px) rotateY(-5deg);
  transition: all 0.4s ease;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
}

.logo-container:hover {
  transform: perspective(300px) rotateY(-5deg) translateY(-5px);
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
}

.logo-circle {
  position: relative;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8a80 30%, #ffab91 60%, #ffcdd2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    /* outer depth */
    0 0 28px rgba(255, 107, 107, 0.45),
    0 10px 24px rgba(255, 107, 107, 0.35),
    0 18px 28px rgba(255, 138, 128, 0.28),
    0 10px 22px rgba(0, 0, 0, 0.25),
    /* inner bevel */
    inset 0 3px 22px rgba(255, 255, 255, 0.65),
    inset 0 -3px 8px rgba(220, 38, 38, 0.18),
    inset 0 -8px 16px rgba(0, 0, 0, 0.18);
  border: 3px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
  transform: perspective(300px) rotateX(10deg);
  transition: all 0.3s ease;
}

.logo-circle:hover {
  transform: perspective(300px) rotateX(10deg) scale(1.08);
  box-shadow: 
    0 0 35px rgba(255, 107, 107, 0.5),
    0 12px 25px rgba(255, 107, 107, 0.4),
    0 20px 30px rgba(255, 138, 128, 0.3),
    inset 0 4px 25px rgba(255, 255, 255, 0.7),
    inset 0 -1px 8px rgba(220, 38, 38, 0.15);
}

.logo-circle::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, #ff6b6b, #ff8a80, #ffab91, #ffcdd2, #ff6b6b);
  border-radius: 50%;
  z-index: -1;
  animation: rotate3D 5s linear infinite;
  filter: blur(0.5px);
  opacity: 0.8;
}

.logo-circle::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: 
    radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

@keyframes rotate3D {
  0% { 
    transform: rotate(0deg) scale(1); 
    filter: blur(0.5px);
    opacity: 0.8;
  }
  50% { 
    transform: rotate(180deg) scale(1.01); 
    filter: blur(0.8px);
    opacity: 0.9;
  }
  100% { 
    transform: rotate(360deg) scale(1); 
    filter: blur(0.5px);
    opacity: 0.8;
  }
}

.logo-leaf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  z-index: 10;
  transition: all 0.3s ease;
  font-size: 3rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-leaf::before {
  content: '🍃';
  text-shadow: 
    0 0 8px rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 1px 2px rgba(220, 38, 38, 0.2));
}

.logo-leaf:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Small leaf for footer logo */
.logo-leaf-small {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-leaf-small::before {
  content: '🍃';
  text-shadow: 
    0 0 4px rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 1px 1px rgba(220, 38, 38, 0.2));
}

.logo-circle-small {
  position: relative;
  overflow: visible;
}

.logo-text {
  display: none;
}

.logo-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-title .chinese {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 0.25rem;
  color: #ffffff !important; /* Force white color to override global h1 styles */
  text-shadow: 
    /* Crisp embossed effect - top highlight */
    0 1px 0 rgba(255,255,255,0.8),
    0 2px 0 rgba(255,255,255,0.5),
    /* Depth layers - no blur */
    0 3px 0 rgba(236,72,153,0.4),
    0 4px 0 rgba(190,24,93,0.5),
    0 5px 0 rgba(157,23,77,0.6),
    /* Sharp drop shadow */
    0 6px 0 rgba(131,24,67,0.7),
    0 7px 3px rgba(0,0,0,0.3),
    /* Pink outline - crisp */
    -1px -1px 0 rgba(236,72,153,0.5),
    1px -1px 0 rgba(236,72,153,0.5),
    -1px 1px 0 rgba(236,72,153,0.5),
    1px 1px 0 rgba(236,72,153,0.5);
  transform: perspective(400px) rotateX(15deg);
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.logo-title .english {
  font-size: 1.5rem;
  line-height: 1;
  color: #ffffff !important; /* Force white color to override global styles */
  text-shadow: 
    /* Crisp highlight */
    0 1px 0 rgba(255,255,255,0.75),
    0 2px 0 rgba(255,255,255,0.45),
    /* Depth - no blur */
    0 3px 0 rgba(236,72,153,0.35),
    0 4px 0 rgba(190,24,93,0.45),
    0 5px 0 rgba(157,23,77,0.55),
    /* Sharp shadow */
    0 6px 0 rgba(131,24,67,0.65),
    0 7px 2px rgba(0,0,0,0.25),
    /* Pink outline */
    -1px -1px 0 rgba(236,72,153,0.4),
    1px -1px 0 rgba(236,72,153,0.4),
    -1px 1px 0 rgba(236,72,153,0.4),
    1px 1px 0 rgba(236,72,153,0.4);
  transform: perspective(400px) rotateX(12deg);
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dating platform romantic hint - subtle heart glow */
.logo-title::after {
  content: '❤️';
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  opacity: 0.7;
  animation: heart-beat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.6));
}

@keyframes heart-beat {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-50%) scale(1.15);
    opacity: 1;
  }
}

/* Romantic glow on logo container */
.logo-container::before {
  content: '';
  position: absolute;
  inset: -15px;
  background: radial-gradient(circle at center, 
    rgba(236, 72, 153, 0.15) 0%, 
    rgba(244, 63, 94, 0.1) 30%, 
    transparent 60%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
}

.logo-container:hover::before {
  opacity: 1;
  animation: romantic-pulse 2s ease-in-out infinite;
}

@keyframes romantic-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Enhanced hover effect for logo text - crisp version */
.logo-container:hover .logo-title .chinese {
  text-shadow: 
    0 1px 0 rgba(255,255,255,0.9),
    0 2px 0 rgba(255,255,255,0.6),
    0 3px 0 rgba(236,72,153,0.5),
    0 4px 0 rgba(190,24,93,0.6),
    0 5px 0 rgba(157,23,77,0.7),
    0 6px 0 rgba(131,24,67,0.8),
    0 7px 4px rgba(0,0,0,0.35),
    -1px -1px 0 rgba(236,72,153,0.6),
    1px -1px 0 rgba(236,72,153,0.6),
    -1px 1px 0 rgba(236,72,153,0.6),
    1px 1px 0 rgba(236,72,153,0.6);
  transform: perspective(400px) rotateX(17deg) translateY(-2px);
}

.logo-container:hover .logo-title .english {
  text-shadow: 
    0 1px 0 rgba(255,255,255,0.85),
    0 2px 0 rgba(255,255,255,0.55),
    0 3px 0 rgba(236,72,153,0.4),
    0 4px 0 rgba(190,24,93,0.5),
    0 5px 0 rgba(157,23,77,0.6),
    0 6px 0 rgba(131,24,67,0.7),
    0 7px 3px rgba(0,0,0,0.3),
    -1px -1px 0 rgba(236,72,153,0.5),
    1px -1px 0 rgba(236,72,153,0.5),
    -1px 1px 0 rgba(236,72,153,0.5),
    1px 1px 0 rgba(236,72,153,0.5);
  transform: perspective(400px) rotateX(14deg) translateY(-1px);
}

/* Romantic sparkles around logo on hover */
.logo-container:hover .logo-title::after {
  animation: heart-beat-intense 1.2s ease-in-out infinite;
}

@keyframes heart-beat-intense {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.6));
  }
  50% {
    transform: translateY(-50%) scale(1.3);
    filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.9));
  }
}

/* Bodhi Leaf Decorative Elements - Pink Theme */
.bodhi-accent {
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  opacity: 0.6;
}

.bodhi-accent-1 {
  top: -10px;
  right: -10px;
  transform: rotate(45deg);
  animation: float 2s ease-in-out infinite;
}

.bodhi-accent-2 {
  bottom: -10px;
  left: -10px;
  transform: rotate(-135deg);
  animation: float 2s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(45deg); }
  50% { transform: translateY(-5px) rotate(45deg); }
}

/* Enhanced Hero Section with Clean Light Theme */
.hero-bodhi {
  background: linear-gradient(135deg, #fef2f2 0%, #fce7f3 25%, #fbcfe8 50%, #f9a8d4 75%, #f472b6 100%);
  position: relative;
  overflow: hidden;
}

.hero-bodhi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.5) 100%);
  z-index: 1;
}

.hero-bodhi .bodhi-leaf-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;
  z-index: 2;
}

/* Larger, distinctive pink romantic leaves for hero */
.hero-leaves-large::before,
.hero-leaves-large::after {
  content: '';
  position: absolute;
  border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
  filter: blur(8px);
  opacity: 0.25;
}
.hero-leaves-large::before {
  width: 36vw;
  height: 36vw;
  left: -10vw;
  top: 8vh;
  background: linear-gradient(140deg, rgba(236,72,153,0.55), rgba(249,168,212,0.35));
}
.hero-leaves-large::after {
  width: 28vw;
  height: 28vw;
  right: -6vw;
  top: 22vh;
  background: linear-gradient(140deg, rgba(219,39,119,0.5), rgba(236,72,153,0.3));
}

/* Above-the-fold adjustments for common iPhone sizes */
@media (max-width: 430px) {
  .hero-bodhi .hero-content {
    padding-top: 1.25rem;
  }
}

/* Compact mobile layout adjustments */
@media (max-width: 430px) {
  /* Reduce hero min-height and vertical padding for iPhone 12–14 */
  .hero-bodhi {
    min-height: 70vh !important;
    padding-top: 0.75rem !important;
    padding-bottom: 1rem !important;
  }
  /* Compress hero headings and paragraphs */
  .hero-content h1 {
    font-size: 2.25rem !important; /* ~text-4xl */
    margin-bottom: 0.5rem !important;
  }
  .hero-content h2 {
    font-size: 1.5rem !important; /* ~text-2xl */
    margin-bottom: 0.5rem !important;
  }
  .hero-content p {
    font-size: 1rem !important; /* ~text-base */
    margin-bottom: 0.75rem !important;
    line-height: 1.5 !important;
  }
  /* Compact CTA buttons */
  .hero-content .btn-primary,
  .hero-content .border-3 {
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    border-width: 2px !important;
  }
  /* Compact feature cards and grid spacing */
  .card-elegant {
    padding: 1rem !important;
  }
  .grid {
    gap: 1rem !important;
  }
  /* Hide meteor effect on small screens */
  .meteor-container {
    display: none !important;
  }
  /* Scale decorative pink leaves slightly smaller on phones */
  .hero-leaves-large::before { 
    width: 46vw; 
    height: 46vw; 
    left: -15vw; 
    top: 10vh;
    background: linear-gradient(140deg, rgba(236,72,153,0.5), rgba(249,168,212,0.3));
  }
  .hero-leaves-large::after { 
    width: 38vw; 
    height: 38vw; 
    right: -10vw; 
    top: 24vh;
    background: linear-gradient(140deg, rgba(219,39,119,0.45), rgba(236,72,153,0.25));
  }
}

.hero-content {
  position: relative;
  z-index: 10;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure hero section elements stay visible */
.hero-bodhi {
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-bodhi .fade-in,
.hero-bodhi .slide-in-left,
.hero-bodhi .slide-in-right {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Responsive Logo Scaling */
@media (max-width: 1024px) {
  .logo-container {
    transform: perspective(300px) rotateY(-3deg);
  }
  
  .logo-title .chinese {
    font-size: 2.4rem;
    line-height: 1.1;
    font-weight: 900;
    text-shadow: 
      0 1px 0 rgba(255,255,255,0.75),
      0 2px 0 rgba(255,255,255,0.45),
      0 3px 0 rgba(236,72,153,0.35),
      0 4px 0 rgba(190,24,93,0.45),
      0 5px 0 rgba(157,23,77,0.55),
      0 6px 0 rgba(131,24,67,0.65),
      0 7px 2px rgba(0,0,0,0.28),
      -1px -1px 0 rgba(236,72,153,0.45),
      1px -1px 0 rgba(236,72,153,0.45),
      -1px 1px 0 rgba(236,72,153,0.45),
      1px 1px 0 rgba(236,72,153,0.45);
  }
  
  .logo-title .english {
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 800;
    text-shadow: 
      0 1px 0 rgba(255,255,255,0.7),
      0 2px 0 rgba(255,255,255,0.4),
      0 3px 0 rgba(236,72,153,0.3),
      0 4px 0 rgba(190,24,93,0.4),
      0 5px 0 rgba(157,23,77,0.5),
      0 6px 2px rgba(0,0,0,0.25),
      -1px -1px 0 rgba(236,72,153,0.35),
      1px -1px 0 rgba(236,72,153,0.35),
      -1px 1px 0 rgba(236,72,153,0.35),
      1px 1px 0 rgba(236,72,153,0.35);
  }
}

@media (max-width: 768px) {
  .logo-circle {
    width: 70px;
    height: 70px;
  }
  
  .logo-leaf {
    width: 42px;
    height: 42px;
    font-size: 2.2rem;
  }
  
  .logo-text {
    font-size: 1.8rem;
  }
  
  .logo-title .chinese {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 900;
    text-shadow: 
      0 1px 0 rgba(255,255,255,0.7),
      0 2px 0 rgba(255,255,255,0.4),
      0 3px 0 rgba(236,72,153,0.3),
      0 4px 0 rgba(190,24,93,0.4),
      0 5px 0 rgba(157,23,77,0.5),
      0 6px 2px rgba(0,0,0,0.25),
      -1px -1px 0 rgba(236,72,153,0.4),
      1px -1px 0 rgba(236,72,153,0.4),
      -1px 1px 0 rgba(236,72,153,0.4),
      1px 1px 0 rgba(236,72,153,0.4);
  }
  
  .logo-title .english {
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 800;
    text-shadow: 
      0 1px 0 rgba(255,255,255,0.65),
      0 2px 0 rgba(255,255,255,0.35),
      0 3px 0 rgba(236,72,153,0.25),
      0 4px 0 rgba(190,24,93,0.35),
      0 5px 1px rgba(0,0,0,0.22),
      -1px -1px 0 rgba(236,72,153,0.3),
      1px -1px 0 rgba(236,72,153,0.3),
      -1px 1px 0 rgba(236,72,153,0.3),
      1px 1px 0 rgba(236,72,153,0.3);
  }
  
  /* Fix header height on mobile */
  .hero-bodhi .container > div {
    min-height: 14rem;
  }
}

@media (max-width: 640px) {
  .logo-container {
    flex-direction: row;
    text-align: left;
    gap: 0.5rem;
    align-items: center;
    transform: perspective(300px) rotateY(-2deg);
  }
  
  .logo-circle {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }
  
  .logo-leaf {
    width: 36px;
    height: 36px;
    font-size: 1.8rem;
  }
  
  .logo-text {
    font-size: 1.5rem;
  }
  
  .logo-title {
    flex: 1;
    min-width: 0; /* Allow text to shrink */
  }
  
  .logo-title .chinese {
    font-size: 1.7rem;
    line-height: 1.1;
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 900;
    color: #ffffff !important; /* Force white color for mobile */
    text-shadow: 
      0 1px 0 rgba(255,255,255,0.65),
      0 2px 0 rgba(255,255,255,0.35),
      0 3px 0 rgba(236,72,153,0.25),
      0 4px 0 rgba(190,24,93,0.35),
      0 5px 1px rgba(0,0,0,0.22),
      -1px -1px 0 rgba(236,72,153,0.35),
      1px -1px 0 rgba(236,72,153,0.35),
      -1px 1px 0 rgba(236,72,153,0.35),
      1px 1px 0 rgba(236,72,153,0.35);
  }
  
  .logo-title .english {
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    color: #ffffff !important; /* Force white color for mobile */
    text-shadow: 
      0 1px 0 rgba(255,255,255,0.6),
      0 2px 0 rgba(255,255,255,0.3),
      0 3px 0 rgba(236,72,153,0.22),
      0 4px 1px rgba(0,0,0,0.2),
      -1px -1px 0 rgba(236,72,153,0.28),
      1px -1px 0 rgba(236,72,153,0.28),
      -1px 1px 0 rgba(236,72,153,0.28),
      1px 1px 0 rgba(236,72,153,0.28);
  }
  
  /* Ensure text doesn't get cut off */
  .hero-bodhi {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .hero-bodhi .container > div {
    min-height: 4rem;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .logo-container {
    gap: 0.4rem;
  }
  
  .logo-circle {
    width: 50px;
    height: 50px;
  }
  
  .logo-leaf {
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
  }
  
  .logo-title .chinese {
    font-size: 1.3rem;
    font-weight: 900;
    text-shadow: 
      0 1px 0 rgba(255,255,255,0.6),
      0 2px 0 rgba(255,255,255,0.3),
      0 3px 0 rgba(236,72,153,0.2),
      0 4px 1px rgba(0,0,0,0.2),
      -1px -1px 0 rgba(236,72,153,0.3),
      1px -1px 0 rgba(236,72,153,0.3),
      -1px 1px 0 rgba(236,72,153,0.3),
      1px 1px 0 rgba(236,72,153,0.3);
  }
  
  .logo-title .english {
    font-size: 0.85rem;
    font-weight: 800;
    text-shadow: 
      0 1px 0 rgba(255,255,255,0.55),
      0 2px 0 rgba(255,255,255,0.25),
      0 3px 1px rgba(0,0,0,0.18),
      -1px -1px 0 rgba(236,72,153,0.25),
      1px -1px 0 rgba(236,72,153,0.25),
      -1px 1px 0 rgba(236,72,153,0.25),
      1px 1px 0 rgba(236,72,153,0.25);
  }
}

/* Fast Loading Optimizations */
.fade-in {
  animation: fadeIn 0.6s ease-in-out forwards;
  opacity: 1 !important; /* Ensure it stays fully visible */
}

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

.slide-in-left {
  animation: slideInLeft 0.8s ease-out forwards;
  opacity: 1; /* Ensure it stays visible */
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out forwards;
  opacity: 1; /* Ensure it stays visible */
}

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

@keyframes leafPulse {
  0%, 100% { 
    opacity: 0.6; 
    transform: rotate(-10deg) scale(1);
  }
  50% { 
    opacity: 0.5; 
    transform: rotate(-10deg) scale(1.01);
  }
}

/* Removed gentlePulse animation to prevent text disappearing effect */

/* Meteor Effect - Shooting Stars for Wishes Coming True */
.meteor-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.meteor {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fbbf24 40%, transparent 70%);
  box-shadow: 
    0 0 10px #fbbf24,
    0 0 20px #fbbf24,
    0 0 40px #f59e0b;
  opacity: 0;
  animation: meteorFall linear infinite;
}

.meteor::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fbbf24, #ffffff, transparent);
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 1px;
  opacity: 0.7;
}

.meteor:nth-child(1) {
  left: 10%;
  animation-duration: 5s;
  animation-delay: 0s;
}

.meteor:nth-child(2) {
  left: 30%;
  animation-duration: 6s;
  animation-delay: 2.2s;
}

.meteor:nth-child(3) {
  left: 50%;
  animation-duration: 5.5s;
  animation-delay: 4.2s;
}

.meteor:nth-child(4) {
  left: 70%;
  animation-duration: 4.2s;
  animation-delay: 6.4s;
}

.meteor:nth-child(5) {
  left: 90%;
  animation-duration: 5s;
  animation-delay: 8s;
}

.meteor:nth-child(6) {
  left: 20%;
  animation-duration: 6.3s;
  animation-delay: 10.5s;
}

.meteor:nth-child(7) {
  left: 60%;
  animation-duration: 5.7s;
  animation-delay: 12.6s;
}

.meteor:nth-child(8) {
  left: 80%;
  animation-duration: 4.9s;
  animation-delay: 14.7s;
}

@keyframes meteorFall {
  0% {
    top: -10%;
    opacity: 0;
    transform: translateX(-20px) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translateX(-15px) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateX(15px) scale(1);
  }
  100% {
    top: 110%;
    opacity: 0;
    transform: translateX(20px) scale(0.5);
  }
}

/* Wish sparkle effect */
.wish-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fbbf24;
  border-radius: 50%;
  opacity: 0;
  animation: sparkle 3.5s ease-in-out infinite;
}

.wish-sparkle:nth-child(odd) {
  animation-delay: 0.5s;
}

.wish-sparkle:nth-child(even) {
  animation-delay: 1s;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* Performance optimized gradients */
.gradient-red {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #F9A8D4 0%, #EC4899 50%, #DB2777 100%);
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%);
}

/* 3D Title Styles - Only for h1 and .title-3d class (not h2-h6 for Chinese text clarity) */
h1, .title-3d {
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.6),
    0 2px 0 rgba(185, 28, 28, 0.5),
    0 3px 0 rgba(185, 28, 28, 0.4),
    0 4px 0 rgba(185, 28, 28, 0.3),
    0 5px 1px rgba(185, 28, 28, 0.2);
  filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.2));
  transform: perspective(500px) rotateX(3deg);
  transition: all 0.3s ease;
}

/* Hover effect for 3D titles - Subtle */
h1:hover, .title-3d:hover {
  transform: perspective(500px) rotateX(5deg) translateY(-1px);
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.7),
    0 2px 0 rgba(185, 28, 28, 0.6),
    0 3px 0 rgba(185, 28, 28, 0.5),
    0 4px 0 rgba(185, 28, 28, 0.4),
    0 5px 0 rgba(185, 28, 28, 0.3),
    0 6px 1px rgba(185, 28, 28, 0.25);
  filter: drop-shadow(0 3px 6px rgba(220, 38, 38, 0.25));
}

/* h2-h6 stay crisp with minimal shadow for Chinese text clarity */
h2, h3, h4, h5, h6 {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: all 0.3s ease;
}

/* Specific 3D styles for different heading levels - Subtle */
h1, .text-6xl, .text-8xl {
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.7),
    0 2px 0 rgba(185, 28, 28, 0.6),
    0 3px 0 rgba(185, 28, 28, 0.5),
    0 4px 0 rgba(185, 28, 28, 0.4),
    0 5px 1px rgba(185, 28, 28, 0.3);
  filter: drop-shadow(0 3px 6px rgba(220, 38, 38, 0.25));
  transform: perspective(600px) rotateX(4deg);
}

/* Large text utility classes keep 3D effect - NOT regular h2/h3 headings */
.text-4xl, .text-5xl {
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.6),
    0 2px 0 rgba(185, 28, 28, 0.5),
    0 3px 0 rgba(185, 28, 28, 0.4),
    0 4px 1px rgba(185, 28, 28, 0.3);
  filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.2));
  transform: perspective(500px) rotateX(3deg);
}

.text-3xl, .text-2xl {
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.5),
    0 2px 0 rgba(185, 28, 28, 0.4),
    0 3px 1px rgba(185, 28, 28, 0.3);
  filter: drop-shadow(0 1px 3px rgba(220, 38, 38, 0.2));
  transform: perspective(500px) rotateX(2deg);
}

/* Smaller text utility classes keep subtle 3D - NOT regular h4/h5/h6 headings */
.text-xl, .text-lg {
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.4),
    0 2px 1px rgba(185, 28, 28, 0.3);
  filter: drop-shadow(0 1px 2px rgba(220, 38, 38, 0.15));
  transform: perspective(500px) rotateX(1deg);
}

/* Enhanced hero headings for better contrast - Subtle */
.hero-heading-3d {
  text-shadow: 
    0 1px 0 rgba(220, 38, 38, 0.7),
    0 2px 0 rgba(185, 28, 28, 0.6),
    0 3px 0 rgba(185, 28, 28, 0.5),
    0 4px 1px rgba(185, 28, 28, 0.4);
  filter: drop-shadow(0 3px 6px rgba(220, 38, 38, 0.25));
  transform: perspective(600px) rotateX(4deg);
}

/* Soft shadow for subtle 3D effect - High Contrast */
.text-shadow-soft {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Strong shadow for dramatic 3D effect - High Contrast */
.text-shadow-strong {
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(220, 38, 38, 0.4),
    0 2px 0 rgba(185, 28, 28, 0.3);
}

.backdrop-blur-soft {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Component optimizations with new color scheme */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
  color: var(--secondary-white);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(229, 62, 62, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 16px rgba(229, 62, 62, 0.4);
  background: linear-gradient(135deg, var(--primary-red-dark) 0%, var(--primary-red) 100%);
}

.btn-secondary {
  border: 2px solid var(--primary-red);
  color: var(--primary-red);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-secondary:hover {
  background: var(--primary-red);
  color: var(--secondary-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(229, 62, 62, 0.3);
}

.card-elegant {
  background: var(--secondary-white);
  border-radius: 0.75rem;
  box-shadow: 0 4px 8px rgba(229, 62, 62, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(229, 62, 62, 0.1);
}

.card-elegant:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(229, 62, 62, 0.15);
  border-color: rgba(229, 62, 62, 0.2);
}

.nav-item {
  color: #1f2937 !important;
  transition-colors duration-200;
  font-weight: 500;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.nav-item:hover {
  color: #111827 !important;
}

/* Embossed/3D look for nav */
.nav-emboss {
  position: relative;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.05) 100%);
  color: #1f2937 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.8),
    0 1px 2px rgba(0,0,0,0.1);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 -1px 0 rgba(0,0,0,0.1) inset;
  transform: perspective(300px) rotateX(1deg);
  transition: all 0.2s ease;
}
.nav-active {
  color: #1f2937 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.8),
    0 1px 2px rgba(0,0,0,0.1);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 -1px 0 rgba(0,0,0,0.1) inset;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.05) 100%);
  transform: perspective(300px) rotateX(1deg);
}
.nav-events-featured { 
  /* Match inline style with other tabs - embossed look */
  cursor: pointer !important;
  color: #1f2937 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(0,0,0,0.05)) !important;
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem !important;
  font-weight: 600 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.22),
    0 2px 0 rgba(0,0,0,0.22),
    0 6px 12px rgba(0,0,0,0.35);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.12) inset,
    0 -2px 0 rgba(0,0,0,0.22) inset,
    0 8px 16px rgba(0,0,0,0.25);
  transform: perspective(300px) rotateX(2deg);
  transition: all 0.2s ease;
}

.nav-events-featured:hover {
  filter: brightness(1.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.14)) !important;
}

/* Chip links for mobile quick bar */
.chip-link {
  @apply px-3 py-1.5 text-sm rounded-full text-red-700 border border-red-200 whitespace-nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.35) 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.6) inset,
    0 -2px 0 rgba(239,68,68,0.25) inset,
    0 6px 12px rgba(239,68,68,0.25);
}
.chip-active {
  @apply text-white border-red-600;
  background: linear-gradient(180deg, rgba(239,68,68,0.95) 0%, rgba(220,38,38,0.95) 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.35) inset,
    0 -2px 0 rgba(128,0,0,0.35) inset,
    0 10px 18px rgba(220,38,38,0.45);
}
.chip-link:hover { filter: brightness(1.05); }
.nav-emboss:hover { filter: brightness(1.05); }

/* Auth buttons - elegant integration with site theme */
.auth-login {
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0.12) 100%) !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.25),
    0 2px 0 rgba(0,0,0,0.25),
    0 6px 12px rgba(0,0,0,0.35) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.15) inset,
    0 -2px 0 rgba(0,0,0,0.25) inset,
    0 8px 16px rgba(0,0,0,0.25) !important;
  transform: perspective(300px) rotateX(2deg);
  transition: all 0.2s ease !important;
}
.auth-login:hover { 
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(0,0,0,0.14) 100%) !important;
  border-color: rgba(255,255,255,0.45) !important;
  transform: perspective(300px) rotateX(2deg) translateY(-1px);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.18) inset,
    0 -2px 0 rgba(0,0,0,0.28) inset,
    0 10px 20px rgba(0,0,0,0.3) !important;
}
.auth-signup {
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 100%) !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.3),
    0 2px 0 rgba(0,0,0,0.3),
    0 6px 12px rgba(0,0,0,0.4) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.18) inset,
    0 -2px 0 rgba(0,0,0,0.28) inset,
    0 8px 16px rgba(0,0,0,0.3) !important;
  transform: perspective(300px) rotateX(2deg);
  transition: all 0.2s ease !important;
}
.auth-signup:hover { 
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 100%) !important;
  border-color: rgba(255,255,255,0.65) !important;
  transform: perspective(300px) rotateX(2deg) translateY(-1px);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.22) inset,
    0 -2px 0 rgba(0,0,0,0.32) inset,
    0 10px 20px rgba(0,0,0,0.35) !important;
}

/* Content sections that allow leaf visibility */
.content-with-leaf {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.content-section {
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Ensure leaf visibility through various backgrounds */
.bg-white {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Special handling for form backgrounds */
.bg-red-50, .bg-gray-50, .bg-yellow-50, .bg-pink-50, .bg-blue-50 {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Form input styling fixes */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="tel"], 
input[type="number"], 
select {
  line-height: 1.5 !important;
  min-height: 2.5rem;
  font-size: 0.875rem !important;
}

textarea {
  line-height: 1.6 !important;
  min-height: 6rem;
  font-size: 0.875rem !important;
  padding: 1rem !important;
  resize: vertical;
}

input::placeholder, 
textarea::placeholder {
  color: #9ca3af;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.8;
}

/* Ensure proper spacing for form elements */
.form-group input,
.form-group select {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}

.form-group textarea {
  padding: 1rem;
  border-radius: 0.5rem;
  min-height: 6rem;
}

/* Form styles for contact and other forms */
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #374151; /* Gray for content readability */
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: #ffffff;
}

.form-input:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-input::placeholder {
  color: #9ca3af;
}

/* Textarea specific styling */
textarea.form-input {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.6;
}

/* Select specific styling */
select.form-input {
  /* Remove custom arrow to prevent duplication with native dropdown arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Fix events page filter dropdown positioning */
.sticky select.form-input {
  position: static;
  z-index: auto;
}

/* Ensure dropdown options appear correctly */
select.form-input option {
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Modal dialog overlay styling */
.group .fixed.z-\[9999\] {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Ensure modal breaks out of any container constraints */
/* Modal backdrop only - not register buttons */
.group .fixed[class*="z-[9999]"],
.group .fixed[class*="z-50"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
}

/* Modal isolation - prevent cross-modal interference */
.self-intro-modal .partner-pref-modal,
.self-intro-modal .partner-pref-modal-desktop,
.partner-pref-modal .self-intro-modal,
.partner-pref-modal-desktop .self-intro-modal {
  pointer-events: none !important;
}

/* Only allow hover on the specific modal being hovered */
.self-intro-modal:hover .self-intro-modal .fixed,
.partner-pref-modal:hover .partner-pref-modal .fixed,
.partner-pref-modal-desktop:hover .partner-pref-modal-desktop .fixed {
  pointer-events: auto !important;
}

/* Prevent any hover effects when modal is hidden */
.self-intro-modal .fixed[style*="opacity: 0"],
.partner-pref-modal .fixed[style*="opacity: 0"],
.partner-pref-modal-desktop .fixed[style*="opacity: 0"] {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Prevent form submission on modal buttons */
.group .fixed button[type="button"] {
  pointer-events: auto !important;
}

.group .fixed button[type="button"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure modal buttons don't trigger form submission */
.modal-close-btn {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10001 !important;
}

/* Modal button tooltips */
.modal-close-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10002;
  margin-bottom: 5px;
}

.modal-close-btn[title]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
  z-index: 10002;
  margin-bottom: -1px;
}

/* Ensure modal covers background completely */
.group:hover .fixed.z-\[9999\] {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 200ms ease-in-out !important;
}

/* Fast modal close animation */
.group .fixed.z-\[9999\] {
  transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out !important;
}

/* Instant modal close when display is set to none */
.group .fixed.z-\[9999\][style*="display: none"] {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Modal content styling */
.group .fixed.z-\[9999\] .bg-white {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 56rem;
  max-height: 98vh;
  overflow-y: auto;
  position: relative;
  z-index: 10000;
}

/* Modal header styling */
.group .fixed.z-\[9999\] .border-b {
  background: #fdf2f8;
  border-color: #fbcfe8;
}

/* Mobile responsive modal */
@media (max-width: 640px) {
  .group .fixed.z-\[9999\] .bg-white {
    max-width: 98vw;
    margin: 0.25rem;
  }
}

/* Tablet responsive modal */
@media (min-width: 641px) and (max-width: 1024px) {
  .group .fixed.z-\[9999\] .bg-white {
    max-width: 90vw;
  }
}

/* Desktop responsive modal */
@media (min-width: 1025px) {
  .group .fixed.z-\[9999\] .bg-white {
    max-width: 80vw;
  }
}

/* Specific improvements for textarea areas */
textarea {
  font-family: inherit;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

/* Make textareas more spacious */
.min-h-24 {
  min-height: 6rem;
}

/* Better spacing for multi-line content */
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Form section improvements */
.bg-yellow-50 textarea,
.bg-pink-50 textarea,
.bg-gray-50 textarea,
.bg-blue-50 textarea {
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(229, 231, 235, 0.8);
}

.bg-yellow-50 textarea:focus,
.bg-pink-50 textarea:focus,
.bg-gray-50 textarea:focus,
.bg-blue-50 textarea:focus {
  background-color: rgba(255, 255, 255, 1);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Improve label spacing */
label + textarea {
  margin-top: 0.5rem;
}

/* Better visual hierarchy for form sections */
.space-y-8 > div {
  margin-bottom: 2rem;
}

.space-y-6 > div {
  margin-bottom: 1.5rem;
}

/* Fix dropdown menu positioning and visibility */
.group:hover .group-hover\:opacity-100 {
  z-index: 9999 !important;
  position: absolute !important;
}

/* Ensure header doesn't clip dropdown */
header {
  overflow: visible !important;
}

/* User dropdown menu improvements */
.group .absolute {
  min-width: 12rem;
  white-space: nowrap;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ensure dropdown appears above all other content */
.group .absolute.z-\[9999\] {
  z-index: 9999 !important;
  position: absolute !important;
  transform: translateY(0.5rem);
}

/* Prevent any container from clipping the dropdown */
.container, header, nav {
  overflow: visible !important;
}

/* Make sure the dropdown container has enough space */
.group {
  position: relative;
  z-index: 999;
}

/* Improved dropdown hover behavior */
.group:hover .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  transition-delay: 0ms;
}

.dropdown-menu {
  transform: translateY(-10px);
  transition: all 300ms ease-in-out;
  transition-delay: 500ms;
}

/* Keep dropdown visible when active/focused */
.dropdown-menu:hover,
.dropdown-menu:focus-within,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  transition-delay: 0ms;
}

/* Force parent dropdown to stay visible when child elements are interacted with */
.group:has(.dropdown-menu:hover) .dropdown-menu,
.group:has(.dropdown-menu a:hover) .dropdown-menu,
.group:has(.dropdown-menu a:focus) .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  transition-delay: 0ms;
}

/* Create hover buffer zone to prevent flickering */
.group::before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  bottom: -10px;
  left: -10px;
  z-index: -1;
}

/* Extend hover area for dropdown */
.group .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  right: 0;
  left: 0;
  height: 0.5rem;
  background: transparent;
}

/* Hamburger attention cue */
.hamburger-attn .hamburger-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(251,191,36,0.9);
  animation: pulseDot 1.6s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

/* Compact hero tweaks for small phones */
@media (max-width: 430px) {
  .hero-bodhi {
    min-height: 66vh !important;
    padding-top: 0.25rem !important;
    padding-bottom: 1rem !important;
  }
  .hero-content h1 {
    font-size: 2.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  .hero-content h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .hero-content p {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.5 !important;
  }
  .hero-content .btn-primary,
  .hero-content .border-3 {
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    border-width: 2px !important;
  }
  .card-elegant { padding: 1rem !important; }
  .grid { gap: 1rem !important; }
  .meteor-container { display: none !important; }
  .hero-leaves-large::before { 
    width: 46vw; 
    height: 46vw; 
    left: -15vw; 
    top: 10vh;
    background: linear-gradient(140deg, rgba(236,72,153,0.5), rgba(249,168,212,0.3));
  }
  .hero-leaves-large::after { 
    width: 38vw; 
    height: 38vw; 
    right: -10vw; 
    top: 24vh;
    background: linear-gradient(140deg, rgba(219,39,119,0.45), rgba(236,72,153,0.25));
  }
}

/* Make menu button visually dominant on mobile */
.hamburger-attn {
  position: relative;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(249,168,212,0.95) 0%, rgba(236,72,153,0.95) 100%);
  box-shadow:
    0 0 16px rgba(255,255,255,0.8),
    0 6px 18px rgba(236,72,153,0.5),
    0 2px 0 rgba(255,255,255,0.3) inset,
    0 -2px 0 rgba(236,72,153,0.3) inset;
  transition: all 0.3s ease;
  cursor: pointer;
  animation: menu-pulse 2s ease-in-out infinite;
}

.hamburger-attn:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 20px rgba(255,255,255,0.9),
    0 8px 24px rgba(236,72,153,0.6),
    0 2px 0 rgba(255,255,255,0.35) inset,
    0 -2px 0 rgba(236,72,153,0.35) inset;
  animation: none;
}

.hamburger-attn:active {
  transform: scale(0.98);
}

@keyframes menu-pulse {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(255,255,255,0.8),
      0 6px 18px rgba(236,72,153,0.5),
      0 2px 0 rgba(255,255,255,0.3) inset,
      0 -2px 0 rgba(236,72,153,0.3) inset;
  }
  50% {
    box-shadow:
      0 0 20px rgba(255,255,255,0.9),
      0 8px 24px rgba(236,72,153,0.6),
      0 2px 0 rgba(255,255,255,0.35) inset,
      0 -2px 0 rgba(236,72,153,0.35) inset;
  }
}
.hamburger-attn svg { width: 2.25rem; height: 2.25rem; }
.hamburger-attn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 2px solid rgba(236,72,153,0.4);
  box-shadow: 0 0 18px rgba(249,168,212,0.5);
  animation: glowRing 1.8s ease-in-out infinite;
}
@keyframes glowRing {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

/* Signup plate sizing for single-leaf emblem */
.signup-plate .logo-circle {
  width: 120px;
  height: 120px;
}
.signup-plate .logo-leaf {
  width: 72px;
  height: 72px;
  font-size: 3.5rem;
}
@media (max-width: 480px) {
  .signup-plate .logo-circle { width: 100px; height: 100px; }
  .signup-plate .logo-leaf { width: 60px; height: 60px; font-size: 3rem; }
}

/* Embossed titles on white for auth pages */
.signup-plate .logo-title .chinese {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #334155; /* slate-700: balanced on pink theme */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),   /* top highlight on light bg */
    0 0 1px rgba(0,0,0,0.12),        /* subtle outline */
    0 2px 0 rgba(0,0,0,0.06),        /* light ridge */
    0 3px 6px rgba(0,0,0,0.08),      /* soft neutral drop */
    0 4px 10px rgba(249,168,212,0.10), /* pink ambient */
    0 4px 10px rgba(239,68,68,0.08); /* red ambient */
  -webkit-text-stroke: 0.2px rgba(0,0,0,0.08);
  transform: none; /* avoid subpixel blur */
}
.signup-plate .logo-title .english {
  color: #4b5563; /* gray-600: lighter for softer contrast */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 0 1px rgba(0,0,0,0.10),
    0 2px 0 rgba(0,0,0,0.05),
    0 4px 8px rgba(0,0,0,0.08),
    0 3px 8px rgba(5,150,105,0.08),
    0 3px 8px rgba(239,68,68,0.06);
  transform: none; /* avoid subpixel blur */
}

/* Sharper text on small screens */
@media (max-width: 640px) {
  .signup-plate .logo-title .chinese {
    color: #374151; /* gray-700 for clarity */
    -webkit-text-stroke: 0; /* strokes can blur on mobile */
    text-shadow:
      0 1px 0 rgba(255,255,255,0.85),
      0 1px 2px rgba(0,0,0,0.08);
    transform: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .signup-plate .logo-title .english {
    color: #4b5563;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.85),
      0 1px 2px rgba(0,0,0,0.08);
    transform: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

/* Auth pages: top Bodhi leaf background in romantic pink */
.auth-leaf-hero { position: relative; overflow: hidden; }
.auth-leaf-hero .auth-leaf-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32vh;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 120vw 120vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cdefs%3E%3ClinearGradient id='authLeafGradient' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23f9a8d4;stop-opacity:0.35'/%3E%3Cstop offset='50%25' style='stop-color:%23ec4899;stop-opacity:0.28'/%3E%3Cstop offset='100%25' style='stop-color:%23f9a8d4;stop-opacity:0.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Single large Bodhi leaf spanning the top --%3E%3Cpath d='M20,100 C40,80 60,60 80,40 C100,20 120,8 140,5 C152,3 165,8 168,16 C171,24 165,36 156,48 C147,60 132,78 116,96 C100,114 84,128 68,135 C55,140 44,138 36,130 C28,122 24,110 20,100 Z' fill='url(%23authLeafGradient)' stroke='%23ec4899' stroke-width='0.6' opacity='0.9'/%3E%3C!-- soft glow --%3E%3Cellipse cx='110' cy='35' rx='55' ry='18' fill='%23ffffff' opacity='0.06'/%3E%3C/svg%3E");
}

/* Auth pages: Account-themed teal hero background */
.auth-account-hero { position: relative; overflow: hidden; }
.auth-account-hero .auth-account-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28vh;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 120vw 120vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cdefs%3E%3ClinearGradient id='acctGrad' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23A8DAD;stop-opacity:0.35'/%3E%3Cstop offset='50%25' style='stop-color:%237dd3fc;stop-opacity:0.3'/%3E%3Cstop offset='100%25' style='stop-color:%2322d3ee;stop-opacity:0.28'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='0.95'%3E%3Ccircle cx='110' cy='40' r='28' fill='%23A8DAD' opacity='0.9'/%3E%3C!-- user head --%3E%3Ccircle cx='110' cy='34' r='8' fill='%23ffffff' opacity='0.95'/%3E%3C!-- user shoulders --%3E%3Cpath d='M90,58 C92,48 100,44 110,44 C120,44 128,48 130,58' fill='%23ffffff' opacity='0.95'/%3E%3C/g%3E%3C!-- soft teal wash --%3E%3Cpath d='M20,100 C40,80 60,62 85,50 C110,38 135,32 160,30 C170,29 178,30 180,35 C182,40 175,45 165,50 C150,58 120,75 90,90 C65,102 42,110 28,112 C25,112 22,108 20,100 Z' fill='url(%23acctGrad)' stroke='%23059' stroke-width='0.4' opacity='0.9'/%3E%3C/svg%3E");
}
.auth-account-hero .auth-content { position: relative; z-index: 5; }

/* Account plate: teal theme and account icon */
.account-plate .logo-circle {
  background: linear-gradient(135deg, #A8DAD 0%, #7dd3fc 60%, #22d3ee 100%) !important;
  box-shadow:
    0 0 28px rgba(168, 218, 173, 0.35),
    0 10px 24px rgba(168, 218, 173, 0.28),
    0 18px 28px rgba(125, 211, 252, 0.25),
    0 10px 22px rgba(0, 0, 0, 0.22),
    inset 0 3px 18px rgba(255, 255, 255, 0.55),
    inset 0 -6px 14px rgba(0, 0, 0, 0.18) !important;
  border: 3px solid rgba(255, 255, 255, 0.85) !important;
}
.logo-account {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; color: #ffffff;
}
.logo-account::before { content: '👤'; text-shadow: 0 0 8px rgba(255,255,255,0.7), 0 2px 4px rgba(0,0,0,0.25); }

/* Size variant reuse for account plate */
.account-plate .logo-circle { width: 120px; height: 120px; }
.account-plate .logo-account { width: 72px; height: 72px; font-size: 3.5rem; }
@media (max-width: 480px) {
  .auth-account-hero .auth-account-bg { height: 22vh; background-size: 150vw 130vh; }
  .account-plate .logo-circle { width: 100px; height: 100px; }
  .account-plate .logo-account { width: 60px; height: 60px; font-size: 3rem; }
}
.auth-leaf-hero .auth-content { position: relative; z-index: 5; }
@media (max-width: 430px) {
  .auth-leaf-hero .auth-leaf-bg { height: 26vh; background-size: 160vw 140vh; }
}

/* Footer service area chips - improve contrast */
.service-chip {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 0.75rem;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(239,68,68,0.9) 0%, rgba(220,38,38,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.15) inset,
    0 -2px 0 rgba(0,0,0,0.2) inset,
    0 8px 16px rgba(0,0,0,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.service-chip:hover { filter: brightness(1.05); }

/* Modern toast styles */
.toast-container { 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  z-index: 9999; 
  max-width: 90vw;
}
.toast {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.98);
  border-radius: 1.25rem;
  border: 2px solid rgba(229,231,235,0.9);
  padding: 1.25rem 1.5rem;
  min-width: 320px;
  box-shadow: 
    0 25px 50px -12px rgba(0,0,0,0.25), 
    0 12px 24px -8px rgba(0,0,0,0.15),
    0 0 0 1px rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  animation: toastBounceIn 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
  transition: opacity 0.3s ease-out;
}
.toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0.75rem 0 0 0.75rem;
}
.toast .toast-icon {
  width: 42px; height: 42px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast .toast-content { 
  color: #111827; /* Black text for content */
  font-size: 1.125rem; 
  line-height: 1.5rem; 
  font-weight: 600;
  flex: 1;
}
.toast .toast-close { 
  margin-left: auto; 
  color: #6b7280; /* Gray for content */
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.toast .toast-close:hover { 
  color: #111827; 
  transform: scale(1.2);
}

.toast-success::before { background: linear-gradient(180deg, #A8DADA, #22d3ee); }
.toast-success .toast-icon { background: linear-gradient(135deg, #A8DADA, #22d3ee); }

.toast-error::before { background: linear-gradient(180deg, #ef4444, #dc2626); }
.toast-error .toast-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }

.toast-warning::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.toast-warning .toast-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }

.toast-info::before { background: linear-gradient(180deg, var(--ink-700), var(--ink-900)); }
.toast-info .toast-icon { background: linear-gradient(135deg, var(--gold-700), var(--gold-500)); }

@keyframes toastBounceIn {
  0% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.3); 
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
  }
}

@keyframes successPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
  }
}

/* Mobile responsive toast */
@media (max-width: 640px) {
  .toast-container {
    max-width: 95vw;
  }
  
  .toast {
    min-width: 280px;
    padding: 1rem 1.25rem;
  }
  
  .toast .toast-icon {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }
  
  .toast .toast-content {
    font-size: 1rem;
  }
}

/* Submit buttons with pointing hand hint */
button[type="submit"], .btn-submit {
  position: relative;
  padding-right: 2.25rem !important;
}
button[type="submit"]::after, .btn-submit::after {
  content: '👉';
  position: absolute;
  right: 0.75rem; top: 50%; transform: translateY(-50%);
  font-size: 1rem; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.1));
  animation: handNudge 1.6s ease-in-out infinite;
}
@keyframes handNudge {
  0%, 100% { transform: translate(0, -50%); opacity: 0.95; }
  50% { transform: translate(3px, -50%); opacity: 1; }
}

/* Event badges (e.g., 精选/可报名) - compact sizing */
.event-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem; /* tighter */
  border-radius: 9999px;
  font-size: 0.75rem; /* text-sm */
  line-height: 1; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.event-badge-featured {
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border: 1px solid rgba(255,255,255,0.35);
}
.event-badge-open { 
  color: #374151; /* Gray for content */
  background: #f3f4f6; 
  border: 1px solid #d1d5db; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-weight: 600;
  position: relative;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 9999px;
}

/* Registration heart animation - pumps when event is open */
.registration-heart-active {
  display: inline-block;
  animation: heart-pump 1.5s ease-in-out infinite;
}

@keyframes heart-pump {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    transform: scale(1.02);
  }
}
.event-badge-full { color: #92400e; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.35); }
.event-badge-closed { color: #7f1d1d; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.35); }

/* Mobile whitespace fixes */
@media (max-width: 430px) {
  /* Reduce top/bottom padding on sections to avoid large gaps */
  main > section { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  /* First section right under header: make extra compact */
  main > section:first-of-type { padding-top: 0 !important; padding-bottom: 0.5rem !important; }
  main > section:first-of-type .max-w-7xl, 
  main > section:first-of-type .container { padding-top: 0 !important; }
  main > section:first-of-type .text-center { margin-top: 0 !important; }
  main > section:first-of-type h1 { margin-top: 0 !important; }
  /* Remove any main-level top padding/margins that cause gaps */
  main { padding-top: 0 !important; }
  main > *:first-child { margin-top: 0 !important; }
  /* Disable full-screen min height on content-light pages */
  section.min-h-screen { min-height: auto !important; }
  /* Compact event page hero heading spacing */
  main > section .text-center.mb-12 { margin-bottom: 0.75rem !important; }
  /* Shrink auth leaf hero background height on small screens */
  .auth-leaf-hero .auth-leaf-bg { height: 18vh !important; background-size: 150vw 120vh !important; }
  /* Tighten header height and paddings on mobile */
  header.hero-bodhi .h-20 { height: 2.75rem !important; }
  header.hero-bodhi { padding-top: 0 !important; padding-bottom: 0 !important; min-height: auto !important; }
  header.hero-bodhi .container { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  /* Reduce auth hero top spacing further */
  .auth-leaf-hero { padding-top: 0.25rem !important; }
  .auth-leaf-hero .auth-leaf-bg { height: 12vh !important; background-size: 140vw 110vh !important; }
  .auth-leaf-hero .auth-content { margin-top: 0 !important; }
  /* Ensure header inner container has no enforced min-height */
  .hero-bodhi .container > div { min-height: auto !important; }
}

/* GLOBAL z-index for floating buttons - must be above all page content */
#registerBtnFloat {
  position: fixed !important;
  white-space: nowrap !important; /* Prevent text wrapping/truncation */
  width: 90px !important; /* Compact width for small buttons */
  justify-content: center !important; /* Center content */
  right: 0.75rem !important; /* Ensure right position on mobile */
  z-index: 10002 !important; /* MUST be on top */
}

#interactionBtnFloat {
  position: fixed !important;
  z-index: 9998 !important; /* Below register button */
  display: inline-flex !important; /* Force display */
}

/* AGGRESSIVE mobile scrolling fixes - prevent spring-back behavior */
@media (max-width: 768px) {
  /* Force scrollable body with no spring-back */
  html {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100%;
    position: relative;
  }
  
  body {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: none !important;
    touch-action: pan-y !important;
    height: auto !important;
    min-height: 100% !important;
    position: relative !important;
  }
  
  /* Ensure main content area is scrollable */
  main {
    -webkit-overflow-scrolling: touch !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
    position: relative !important;
    min-height: calc(100vh - 80px) !important;
  }
  
  /* All sections must allow touch scrolling */
  section {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: visible !important;
    /* position: relative removed - can break fixed positioning */
  }
  
  /* Remove overflow hidden that blocks scrolling */
  .overflow-x-hidden {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  
  /* Containers must not block scroll - but NO position relative (breaks fixed buttons) */
  .container, .max-w-7xl, .mx-auto, .max-w-4xl, .max-w-5xl, .max-w-6xl {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: visible !important;
    /* position: relative removed - it breaks fixed positioning of child elements */
  }
  
  /* Fixed elements need special handling */
  .fixed {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: transform;
    pointer-events: auto !important;
  }
  
  /* Sticky elements should not interfere */
  .sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Prevent any element from blocking touch events */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/* SPECIFIC fixes for event detail page - most aggressive */
@media (max-width: 768px) {
  /* Event detail page main section */
  .bg-gradient-to-br,
  section.py-6,
  section.bg-gradient-to-br {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: visible !important;
    position: relative !important;
    min-height: auto !important;
  }
  
  /* All content cards must allow scrolling */
  .bg-white,
  .bg-white.rounded-xl,
  .rounded-xl,
  .space-y-3,
  .space-y-4,
  .space-y-6,
  .grid {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Remove all transforms on mobile that might interfere */
  .bg-white.rounded-xl:hover,
  .card-elegant:hover,
  .hover\:shadow-lg:hover {
    transform: none !important;
  }
  
  /* Floating buttons should allow clicks but not interfere with scrolling */
  /* More specific selectors for event detail floating buttons */
  #registerBtnFloat,
  #interactionBtnFloat,
  .fixed.right-3,
  a.fixed,
  button.fixed {
    position: fixed !important;
    pointer-events: auto !important;
    touch-action: manipulation !important; /* Allow clicks/taps but prevent double-tap zoom */
  }
  
  /* Ensure floating buttons stay at correct position (override any parent relative positioning) */
  #registerBtnFloat {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 0.75rem !important; /* right-3 = 0.75rem */
    z-index: 10002 !important;
  }
  
  #interactionBtnFloat {
    position: fixed !important;
    z-index: 9998 !important;
  }
  
  /* Ensure decorative backgrounds don't interfere - but NOT main content */
  .page-bodhi-bg,
  .bodhi-leaf-bg {
    pointer-events: none !important;
    touch-action: none !important;
  }
  
  /* Main content (.leaf-tint-bg) should allow all interactions */
  .leaf-tint-bg {
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }
  
  /* Prevent backdrop from blocking scroll */
  .backdrop-blur-soft {
    pointer-events: none !important;
  }
}

/* Signup sections: Required vs Optional visual system */
.section-required {
  background: linear-gradient(180deg, rgba(239,68,68,0.06) 0%, rgba(239,68,68,0.03) 100%) !important;
  border-left: 4px solid rgba(239,68,68,0.5);
}
.section-optional {
  background: linear-gradient(180deg, rgba(5,150,105,0.06) 0%, rgba(5,150,105,0.03) 100%) !important;
  border-left: 4px solid rgba(5,150,105,0.45);
}
.section-heading {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #111827; /* Black for content */
}
.badge-required {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  color: #7f1d1d;
  background: rgba(254,226,226,0.9);
  border: 1px solid rgba(239,68,68,0.35);
}
.badge-optional {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  color: #064e3b;
  background: rgba(209,250,229,0.95);
  border: 1px solid rgba(5,150,105,0.35);
}

/* Navigation responsive adjustments */
@media (max-width: 1024px) {
  .nav-item {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 1200px) {
  .nav-item {
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
  }
}

/* Maintain elegant auth buttons on small screens */
@media (max-width: 1024px) {
  .auth-login, .auth-signup {
    padding: 0.45rem 0.65rem !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Keep embossed styling but make it slightly more subtle on mobile */
  .auth-login {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.10) 100%) !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
  }
  .auth-signup {
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%) !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
  }
}

/* Action button with shimmer effect */
.action-button {
  position: relative;
  overflow: hidden;
}

.shimmer-effect {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Enhanced action button glow */
.action-button:hover {
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.5), 0 0 60px rgba(239, 68, 68, 0.3);
}

/* Gender card hover effects */
.gender-card {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gender-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  padding: 3px;
  background: linear-gradient(45deg, transparent, rgba(236, 72, 153, 0.3), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gender-card:hover::before {
  opacity: 1;
}

/* Progressive form step transitions */
.step-transition {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbar for forms */
.max-w-md::-webkit-scrollbar {
  width: 8px;
}

.max-w-md::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.5);
  border-radius: 10px;
}

.max-w-md::-webkit-scrollbar-thumb {
  background: rgba(236, 72, 153, 0.3);
  border-radius: 10px;
}

.max-w-md::-webkit-scrollbar-thumb:hover {
  background: rgba(236, 72, 153, 0.5);
}

/* WeChat QR Code Styling */
.wechat-qr-wrapper {
  transition: transform 0.3s ease;
}

.wechat-qr-wrapper:hover {
  transform: scale(1.05);
}

.wechat-qr-wrapper img {
  transition: all 0.3s ease;
}

.wechat-qr-wrapper:hover img {
  filter: brightness(1.05);
}

/* Leaf logo pulse animation */
.wechat-qr-wrapper:hover .absolute > div {
  animation: leaf-pulse 2s ease-in-out infinite;
}

@keyframes leaf-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Event QR overlay with parallax effect */
.event-qr-overlay {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 10; /* Lower z-index to not block buttons */
  opacity: 1; /* Fully opaque */
  max-height: calc(100% - 1.5rem); /* Ensure it stays within card with padding */
  max-width: calc(100% - 1.5rem);
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.event-qr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
}

.event-qr-inner img {
  width: 5rem;
  height: 5rem;
  border-radius: 0.75rem;
  background: #ffffff; /* Fully opaque white */
  padding: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-qr-link:hover img,
.event-qr-link:focus img {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.event-qr-link:hover,
.event-qr-link:focus {
  opacity: 1;
}

.event-qr-caption {
  font-size: 0.7rem;
  font-weight: 600;
  color: #111827; /* Dark text for contrast */
  text-align: center;
  background: #ffffff; /* Fully opaque white */
  padding: 0.125rem 0.4rem;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
  .event-qr-inner img {
    width: 6rem;
    height: 6rem;
    padding: 0.5rem;
  }

  .event-qr-caption {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
  }
}

.event-qr-overlay--inline {
  position: static;
  justify-content: center;
  margin-top: 0.75rem;
  opacity: 1; /* Full opacity for inline version */
}

.event-qr-overlay--inline .event-qr-inner img {
  width: 5.5rem;
  height: 5.5rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(219, 39, 119, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.event-qr-overlay--inline .event-qr-caption {
  background: rgba(248, 250, 252, 0.95);
  box-shadow: 0 6px 16px rgba(148, 163, 184, 0.15);
}

/* Events list layout */
.events-card-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  background: #ffffff;
  border: 2px solid #fbcfe8;
  border-radius: 1.25rem;
  box-shadow: 0 12px 36px rgba(236, 72, 153, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.event-card:hover,
.event-card:focus-within {
  transform: translateY(-2px);
  border-color: #f472b6;
  box-shadow: 0 18px 44px rgba(236, 72, 153, 0.14);
}

.event-card--featured {
  border-color: #f472b6;
  box-shadow: 0 20px 48px rgba(236, 72, 153, 0.18);
}

.event-card__recommend-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #db2777;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(219, 39, 119, 0.25);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.event-card__recommend-btn:hover,
.event-card__recommend-btn:focus-visible {
  border-color: #db2777;
  background: #fff5f9;
}

.event-card__recommend-btn:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.35);
  outline-offset: 2px;
}

.event-card__recommend-btn--active {
  background: linear-gradient(90deg, #f472b6, #ec4899);
  color: #fff;
  border-color: #f472b6;
}

.event-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-right: 3.5rem;
}

.event-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.event-card__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
}

.event-card__label--featured {
  background: linear-gradient(120deg, rgba(234, 179, 8, 0.12), rgba(245, 158, 11, 0.25));
  color: #92400e;
}

.event-card__label--open {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.event-card__label--full {
  background: rgba(71, 85, 105, 0.15);
  color: #1f2937;
}

.event-card__label--closed {
  background: rgba(107, 114, 128, 0.18);
  color: #433a68;
}

.event-card__title {
  font-size: 1.375rem;
  line-height: 1.3;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.event-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #334155;
}

.event-card__meta span[aria-hidden="true"] {
  font-size: 1rem;
}

.event-card__meta-separator {
  color: rgba(148, 163, 184, 0.8);
}

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.event-card__media {
  width: 100%;
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.12), rgba(251, 207, 232, 0.4));
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(244, 114, 182, 0.25);
}

.event-card__media img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #fff;
}

.event-card__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.event-card__section {
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-card__section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.event-card__feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.event-card__feature {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.event-card__feature-icon {
  font-size: 1.35rem;
}

.event-card__feature-label {
  font-size: 0.75rem;
  color: #64748b;
}

.event-card__feature-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.event-card__registration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.event-card__registration-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.event-card__registration-card--male {
  border-color: rgba(37, 99, 235, 0.25);
}

.event-card__registration-card--female {
  border-color: rgba(236, 72, 153, 0.25);
}

.event-card__registration-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: #475569;
}

.event-card__registration-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
}

.event-card__registration-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.event-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #1f2937;
}

.event-card__pill--waitlist {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.4);
  color: #92400e;
}

.event-card__pill--available {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  color: #065f46;
}

.event-card__pill--full {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.4);
  color: #1f2937;
}

.event-card__pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0 0.35rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  background: #fff;
  border-radius: 0.5rem;
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #047857;
}

.event-card__aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(120deg, #ec4899, #db2777);
  border: 2px solid transparent;
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.event-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(236, 72, 153, 0.3);
}

.event-card__cta:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.35);
  outline-offset: 2px;
}

.event-card__cta--secondary {
  background: #1f2937;
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
}

.event-card__cta--secondary:hover {
  background: #0f172a;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.3);
}

.event-card__cta-icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 768px) {
  .event-card {
    padding: 2rem;
    gap: 1.75rem;
  }

  .event-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .event-card__aside {
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .event-card__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
    align-items: start;
  }

  .event-card--has-media .event-card__body {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 220px);
  }

  .event-card__media {
    height: 100%;
  }

  .event-card__media img {
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
}

.event-quick-nav {
  margin-bottom: 1.75rem;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 12px 28px rgba(236, 72, 153, 0.08);
}

.event-quick-nav__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  margin-bottom: 0.85rem;
  align-items: center;
}

.event-quick-nav__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #be185d;
  white-space: nowrap;
}

.event-quick-nav__subtitle {
  font-size: 0.875rem;
  color: #475569;
}

.event-quick-nav__list {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.35rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.event-quick-nav__list::-webkit-scrollbar {
  height: 6px;
}

.event-quick-nav__list::-webkit-scrollbar-track {
  background: rgba(248, 250, 252, 0.8);
  border-radius: 9999px;
}

.event-quick-nav__list::-webkit-scrollbar-thumb {
  background: rgba(236, 72, 153, 0.35);
  border-radius: 9999px;
}

.event-quick-nav__chip {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  border-radius: 9999px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.8);
  color: #1f2937;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.event-quick-nav__chip:hover,
.event-quick-nav__chip:focus-visible {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.5);
  transform: translateY(-1px);
}

.event-quick-nav__chip:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.35);
  outline-offset: 3px;
}

.event-quick-nav__chip--featured {
  background: linear-gradient(120deg, rgba(236, 72, 153, 0.18), rgba(251, 191, 36, 0.18));
  border-color: rgba(236, 72, 153, 0.55);
  color: #831843;
}

.event-quick-nav__chip-icon {
  font-size: 1.1rem;
}

.event-quick-nav__chip-name {
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 7rem;
}

.event-quick-nav__chip-meta {
  font-size: 0.7rem;
  color: #64748b;
}

.event-quick-nav__chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgba(74, 222, 128, 0.2);
  color: #166534;
  font-size: 0.7rem;
  font-weight: 700;
}

.event-quick-nav__chip-badge--full {
  background: rgba(148, 163, 184, 0.25);
  color: #1f2937;
}

@media (min-width: 768px) {
  .event-quick-nav {
    padding: 1.5rem;
  }

  .event-quick-nav__title {
    font-size: 1.5rem;
  }

  .event-quick-nav__subtitle {
    font-size: 0.95rem;
  }

  .event-quick-nav__list {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .event-quick-nav__chip {
    scroll-snap-align: unset;
  }
}

/* ============================================
   LINK ACCESSIBILITY & USABILITY IMPROVEMENTS
   ============================================ */

/* Ensure all links have minimum touch target size (44x44px for accessibility) */
a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

/* Better hover and focus states for all links */
a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

a:focus {
  outline: 3px solid rgba(236, 72, 153, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

a:active {
  transform: translateY(0);
}

/* Exception: text links don't need min-width */
p a, li a, span a, div.text-sm a, div.text-xs a {
  min-width: auto;
  display: inline;
  padding: 2px 4px;
  border-radius: 2px;
}

/* Improve link contrast and visibility */
a:not(.btn-primary):not(.btn-secondary):not(.nav-item) {
  color: var(--primary-pink-dark); /* Darker for better contrast */
  text-decoration-skip-ink: auto;
  font-weight: 600; /* Bolder for visibility */
}

a:not(.btn-primary):not(.btn-secondary):not(.nav-item):hover {
  color: #9f1239; /* Even darker on hover */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Button links should be clearly clickable */
a.btn, a[class*="btn-"], button {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(236, 72, 153, 0.3);
}

/* Ensure proper pointer cursor on all interactive elements */
a, button, [role="button"], [onclick], .cursor-pointer {
  cursor: pointer !important;
}

/* Better mobile touch targets */
@media (max-width: 768px) {
  a {
    min-height: 44px;
    min-width: 44px;
    padding: 8px;
  }
  
  /* Navigation links */
  nav a {
    min-height: 48px;
    padding: 12px 16px;
  }
  
  /* Text links exception */
  p a, li a, span a {
    min-width: auto;
    min-height: auto;
    padding: 4px 6px;
  }
}

/* Improve link visibility in different contexts */
.bg-white a:not(.btn-primary):not(.btn-secondary):not(.nav-item),
.bg-gray-50 a:not(.btn-primary):not(.btn-secondary):not(.nav-item),
.bg-gray-100 a:not(.btn-primary):not(.btn-secondary):not(.nav-item),
.bg-gray-200 a:not(.btn-primary):not(.btn-secondary):not(.nav-item) {
  color: #be185d !important; /* Darker pink for better contrast on light backgrounds */
  font-weight: 600 !important;
}

.bg-white a:not(.btn-primary):not(.btn-secondary):not(.nav-item):hover,
.bg-gray-50 a:not(.btn-primary):not(.btn-secondary):not(.nav-item):hover,
.bg-gray-100 a:not(.btn-primary):not(.btn-secondary):not(.nav-item):hover,
.bg-gray-200 a:not(.btn-primary):not(.btn-secondary):not(.nav-item):hover {
  color: #9f1239 !important;
  text-decoration: underline;
}

/* Footer links */
footer a {
  transition: all 0.2s ease;
}

footer a:hover {
  color: var(--primary-pink);
  transform: translateX(2px);
}

/* External links indicator */
a[href^="http"]:not([href*="boutiquematch"]):not([href*="localhost"]):not([href*="127.0.0.1"])::after {
  content: " ↗";
  font-size: 0.875em;
  opacity: 0.7;
  margin-left: 2px;
}

/* Skip to content link for keyboard navigation */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary-pink);
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  z-index: 10000;
}

.skip-to-content:focus {
  top: 0;
}

/* Loading state for links */
a[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}

/* Shake animation for invalid input */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.animate-shake {
  animation: shake 0.5s;
}

/* ============================================
   COMPREHENSIVE CONTRAST FIXES - WCAG AA Compliance
   Simplified 3-Color Theme Implementation
   ============================================ */

/* Fix all light text on light backgrounds - use dark colors */
.bg-white .text-gray-400,
.bg-gray-50 .text-gray-400,
.bg-gray-100 .text-gray-400,
.bg-white .text-gray-500,
.bg-gray-50 .text-gray-500,
.bg-white .text-pink-400,
.bg-gray-50 .text-pink-400,
.bg-gray-100 .text-pink-400,
.bg-white .text-red-400,
.bg-gray-50 .text-red-400,
.bg-gray-100 .text-red-400,
.bg-gray-200 .text-gray-400,
.bg-gray-200 .text-gray-500,
.bg-gray-200 .text-gray-600,
.bg-white .text-purple-400,
.bg-gray-50 .text-purple-400,
.bg-gray-100 .text-purple-400,
.bg-white .text-blue-400,
.bg-gray-50 .text-blue-400,
.bg-gray-100 .text-blue-400,
.bg-white .text-green-400,
.bg-gray-50 .text-green-400,
.bg-gray-100 .text-green-400 {
  color: #1e293b !important; /* Dark slate for excellent contrast */
}

/* Ensure all standalone light text has better contrast */
.text-gray-400,
.text-gray-500,
.text-blue-400,
.text-red-400 {
  color: var(--neutral-medium) !important; /* Medium gray instead of light colors */
}

/* Fix gray backgrounds to use darker text */
.bg-gray-300,
.bg-gray-200 {
  color: var(--neutral-dark) !important; /* Dark gray for maximum contrast */
}

.bg-gray-300 .text-gray-600,
.bg-gray-300 .text-gray-500,
.bg-gray-200 .text-gray-600,
.bg-gray-200 .text-gray-500,
.bg-gray-300 .text-gray-400,
.bg-gray-400 .text-gray-600,
.bg-gray-400 .text-gray-500,
.bg-gray-400 .text-gray-400 {
  color: var(--neutral-dark) !important; /* Dark gray for excellent contrast */
}

/* Fix blue-on-blue combinations for better contrast */
.bg-blue-100 .text-blue-600,
.bg-blue-100 .text-blue-700,
.bg-blue-100 .text-blue-800,
.bg-blue-200 .text-blue-600,
.bg-blue-200 .text-blue-700,
.bg-blue-200 .text-blue-800,
.bg-blue-50 .text-blue-600,
.bg-blue-50 .text-blue-700,
.bg-blue-50 .text-blue-800 {
  color: var(--neutral-dark) !important; /* Dark text for better contrast on light blue */
}

/* Ensure all links on light backgrounds have excellent contrast */
.bg-gray-50 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]),
.bg-gray-100 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]),
.bg-gray-200 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]),
.bg-white a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]),
.bg-blue-50 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]),
.bg-blue-100 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]) {
  color: var(--secondary-blue) !important; /* Pink for links */
  font-weight: 600 !important;
}

.bg-gray-50 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]):hover,
.bg-gray-100 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]):hover,
.bg-gray-200 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]):hover,
.bg-white a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]):hover,
.bg-blue-50 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]):hover,
.bg-blue-100 a:not(.btn-primary):not(.btn-secondary):not([class*="bg-"]):hover {
  color: var(--secondary-blue-dark) !important; /* Darker pink on hover */
}

/* Fix any remaining problematic text combinations */
.bg-gray-300 .text-gray-700,
.bg-gray-400 .text-gray-700,
.bg-gray-500 .text-gray-700,
.bg-gray-600 .text-gray-700,
.bg-gray-700 .text-gray-700,
.bg-gray-800 .text-gray-700,
.bg-gray-900 .text-gray-700 {
  color: var(--neutral-dark) !important; /* Ensure dark text on any gray background */
}

/* Fix any light text on light colored backgrounds */
.bg-pink-50 .text-pink-400,
.bg-pink-50 .text-pink-500,
.bg-pink-100 .text-pink-400,
.bg-pink-100 .text-pink-500,
.bg-pink-100 .text-pink-600,
.bg-red-50 .text-red-400,
.bg-red-50 .text-red-500,
.bg-red-100 .text-red-400,
.bg-red-100 .text-red-500,
.bg-red-100 .text-red-600,
.bg-yellow-50 .text-yellow-400,
.bg-yellow-50 .text-yellow-500,
.bg-yellow-100 .text-yellow-400,
.bg-yellow-100 .text-yellow-500,
.bg-yellow-100 .text-yellow-600 {
  color: var(--neutral-dark) !important; /* Dark text for excellent contrast */
}

/* Ensure adequate contrast for text on colored button backgrounds */
.bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600,
.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600,
.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600,
.bg-purple-500, .bg-purple-600, .bg-violet-500, .bg-violet-600,
.bg-amber-500, .bg-amber-600, .bg-orange-500, .bg-orange-600,
.bg-pink-500, .bg-pink-600, .bg-cyan-500, .bg-cyan-600 {
  color: #ffffff !important; /* White text on all colored backgrounds */
}

/* Ensure all button text has proper contrast */
.btn, .button, input[type="submit"], input[type="button"],
.bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600,
.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600,
.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600,
.bg-purple-500, .bg-purple-600, .bg-violet-500, .bg-violet-600,
.bg-amber-500, .bg-amber-600, .bg-orange-500, .bg-orange-600,
.bg-pink-500, .bg-pink-600, .bg-cyan-500, .bg-cyan-600 {
  color: #ffffff !important; /* White text for maximum contrast */
}

/* Final comprehensive contrast check - ensure no white text on white backgrounds */
.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300,
.bg-pink-50, .bg-pink-100, .bg-blue-50, .bg-blue-100,
.bg-red-50, .bg-red-100, .bg-yellow-50, .bg-yellow-100,
.bg-green-50, .bg-green-100, .bg-purple-50, .bg-purple-100 {
  color: var(--neutral-dark) !important; /* Dark text on all light backgrounds */
}

/* Countdown timer - ensure dark text on amber backgrounds */
.countdown-timer,
.countdown-timer .days,
.countdown-timer .hours,
.countdown-timer .minutes,
.countdown-timer .seconds {
  color: #92400e !important; /* Dark brown for excellent contrast on amber background */
}

/* Countdown label - ensure dark text */
.bg-gradient-to-r.from-amber-50.to-orange-50 .text-amber-800,
.bg-gradient-to-r.from-amber-100.to-orange-100 .text-amber-800,
.bg-gradient-to-r.from-amber-100.to-orange-100 div {
  color: #92400e !important; /* Dark brown for excellent contrast */
}

/* Mobile menu - ensure excellent contrast */
#mobile-menu a {
  color: inherit !important; /* Respect Tailwind classes */
}

#mobile-menu .text-slate-700 {
  color: #1e293b !important; /* Dark slate for excellent contrast on white/light backgrounds */
}

#mobile-menu .text-pink-700 {
  color: #be185d !important; /* Dark pink for excellent contrast on light pink backgrounds */
}

#mobile-menu .text-purple-700 {
  color: #6b21a8 !important; /* Dark purple for excellent contrast on white/light backgrounds */
}

/* Override white text on light backgrounds in mobile menu */
#mobile-menu .bg-gradient-to-r.from-pink-100.to-rose-100.text-white,
#mobile-menu .bg-gradient-to-r.from-pink-100.to-rose-100 .text-white {
  color: #be185d !important; /* Dark pink for excellent contrast on light pink background */
}

/* Ensure white text only appears on dark backgrounds in mobile menu */
#mobile-menu .bg-gradient-to-r.from-pink-500.to-pink-600.text-white {
  color: #ffffff !important; /* White text on dark pink background is correct */
}

/* Fix hover states in mobile menu - ensure dark text on light backgrounds */
#mobile-menu .hover\:bg-pink-50:hover,
#mobile-menu .hover\:bg-white\/70:hover,
#mobile-menu .hover\:from-pink-200.hover\:to-rose-200:hover {
  color: #1e293b !important; /* Dark slate for excellent contrast on light backgrounds */
}

/* Fix all light backgrounds in mobile menu */
#mobile-menu .bg-pink-50,
#mobile-menu .bg-white,
#mobile-menu .bg-pink-50\/30,
#mobile-menu .bg-gradient-to-r.from-pink-100.to-rose-100 {
  color: #1e293b !important; /* Dark text on all light backgrounds */
}

/* Ballot page specific contrast improvements */
.ballot-page .text-slate-600,
.ballot-page .text-slate-500,
.ballot-page .text-gray-600,
.ballot-page .text-gray-500,
.ballot-page .text-blue-600,
.ballot-page .text-blue-500,
.ballot-page .text-rose-600,
.ballot-page .text-rose-500,
.ballot-page .text-purple-600,
.ballot-page .text-purple-500 {
  color: #1e293b !important; /* Dark slate for excellent contrast on light backgrounds */
}

/* Ensure ballot labels have high contrast */
.ballot-page label,
.ballot-page .label,
.ballot-page .text-xs,
.ballot-page .text-sm,
.ballot-page .text-base {
  color: #1e293b !important; /* Dark slate for maximum readability */
}

/* Fix ballot form elements contrast */
.ballot-page .bg-white,
.ballot-page .bg-gray-50,
.ballot-page .bg-gray-100,
.ballot-page .bg-pink-50,
.ballot-page .bg-pink-100,
.ballot-page .bg-blue-50,
.ballot-page .bg-blue-100,
.ballot-page .bg-purple-50,
.ballot-page .bg-purple-100 {
  color: #1e293b !important; /* Dark text on all light backgrounds */
}

/* Ensure ballot buttons have proper contrast */
.ballot-page button,
.ballot-page .btn,
.ballot-page input[type="submit"],
.ballot-page input[type="button"],
.ballot-page a[class*="bg-gradient-to-r"] {
  color: #ffffff !important; /* White text on colored button backgrounds */
}

/* Matching interface specific contrast improvements */
.matching-page .text-gray-400,
.matching-page .text-gray-500,
.matching-page .text-purple-400,
.matching-page .text-pink-400,
.matching-page .text-blue-400,
.matching-page .text-green-400 {
  color: #1e293b !important; /* Dark slate for excellent contrast */
}

.matching-page .bg-purple-50,
.matching-page .bg-pink-50,
.matching-page .bg-blue-50,
.matching-page .bg-green-50,
.matching-page .bg-gray-50,
.matching-page .bg-white {
  color: #1e293b !important; /* Dark text on all light backgrounds */
}

/* Fix step counter contrast */
.matching-page .text-purple-700,
.matching-page .text-purple-600,
.matching-page .text-purple-500 {
  color: #1e293b !important; /* Dark text for better readability */
}
  color: #be185d !important; /* Dark rose for excellent contrast on light backgrounds */
}

.ballot-page a[class*="from-rose-50"] span,
.ballot-page a[class*="to-pink-50"] span,
.ballot-page a[class*="from-rose-100"] span,
.ballot-page a[class*="to-pink-100"] span {
  color: #be185d !important; /* Dark rose for excellent contrast on light backgrounds */
}

/* Fix SVG icons in backlinks */
.ballot-page a[class*="from-rose-50"] svg,
.ballot-page a[class*="to-pink-50"] svg,
.ballot-page a[class*="from-rose-100"] svg,
.ballot-page a[class*="to-pink-100"] svg {
  color: #be185d !important; /* Dark rose for excellent contrast on light backgrounds */
}

.ballot-page .bg-slate-50,
.ballot-page .bg-slate-100,
.ballot-page .bg-slate-200 {
  color: #1e293b !important; /* Dark text on light slate backgrounds */
}

/* Override any remaining light text on light backgrounds */
#mobile-menu .text-slate-700,
#mobile-menu .text-pink-700,
#mobile-menu .text-purple-700 {
  color: #1e293b !important; /* Dark slate for excellent contrast */
}

/* Ensure all Chinese text in mobile menu has proper contrast */
#mobile-menu .font-chinese {
  color: inherit !important; /* Inherit from parent, but ensure parent has proper contrast */
}

/* Force dark text for Chinese labels on light backgrounds */
#mobile-menu .bg-gradient-to-r.from-pink-100.to-rose-100 .font-chinese,
#mobile-menu .bg-pink-50 .font-chinese,
#mobile-menu .bg-white .font-chinese,
#mobile-menu .bg-pink-50\/30 .font-chinese {
  color: #1e293b !important; /* Dark slate for excellent contrast */
}

/* Force white text for Chinese labels on dark backgrounds */
#mobile-menu .bg-gradient-to-r.from-pink-500.to-pink-600 .font-chinese {
  color: #ffffff !important; /* White text on dark background */
}

#mobile-menu .text-white {
  color: #ffffff !important; /* White text on dark backgrounds */
}
.bg-purple-500, .bg-purple-600, .bg-pink-500, .bg-pink-600,
.bg-amber-500, .bg-amber-600, .bg-orange-500, .bg-orange-600 {
  color: #ffffff !important;
}

/* Ensure buttons with gradients maintain white text */
[class*="bg-gradient-to-"] {
  color: #ffffff !important;
}

/* Fix tooltips and dark backgrounds - ensure proper contrast */
[class*="tooltip"],
.bg-gray-800, .bg-gray-900,
[class*="bg-gray-8"], [class*="bg-gray-9"] {
  color: #ffffff !important;
}

.bg-gray-800 a, .bg-gray-900 a {
  color: #93c5fd !important; /* Light blue for dark backgrounds */
}

.bg-gray-800 a:hover, .bg-gray-900 a:hover {
  color: #bfdbfe !important;
}

/* Badges and tags - ensure proper contrast with simplified colors */
.bg-green-100, .bg-blue-100, .bg-red-100, .bg-yellow-100,
.bg-pink-100, .bg-purple-100, .bg-indigo-100 {
  color: var(--neutral-dark) !important; /* Dark text on light backgrounds */
}

/* Specific fixes for common patterns */
[class*="step"][class*="bg-gray-300"],
[class*="badge"][class*="bg-gray-300"],
[class*="indicator"][class*="bg-gray-300"] {
  color: var(--neutral-dark) !important;
}

/* Ensure all white text on potentially light backgrounds has shadow for readability */
.bg-gradient-to-r .text-white,
.bg-gradient-to-l .text-white,
.bg-gradient-to-t .text-white,
.bg-gradient-to-b .text-white,
.bg-gradient-to-br .text-white,
.bg-gradient-to-tr .text-white {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   CRITICAL: WHITE TEXT ON DARK BLUE BACKGROUNDS
   Avoid black text on dark blue - use white instead
   ============================================ */

/* Ensure white text on ALL dark blue backgrounds */
.bg-blue-700,
.bg-blue-800,
.bg-blue-900,
.bg-indigo-700,
.bg-indigo-800,
.bg-indigo-900,
[class*="bg-blue-7"],
[class*="bg-blue-8"],
[class*="bg-blue-9"],
[class*="bg-indigo-7"],
[class*="bg-indigo-8"],
[class*="bg-indigo-9"] {
  color: #ffffff !important; /* White text on dark blue backgrounds */
}

/* Ensure all child elements also have white text on dark blue backgrounds */
.bg-blue-700 *,
.bg-blue-800 *,
.bg-blue-900 *,
.bg-indigo-700 *,
.bg-indigo-800 *,
.bg-indigo-900 *,
[class*="bg-blue-7"] *,
[class*="bg-blue-8"] *,
[class*="bg-blue-9"] *,
[class*="bg-indigo-7"] *,
[class*="bg-indigo-8"] *,
[class*="bg-indigo-9"] * {
  color: #ffffff !important;
}

/* Override any dark text colors on dark blue backgrounds */
.bg-blue-700 .text-black,
.bg-blue-700 .text-gray-900,
.bg-blue-700 .text-gray-800,
.bg-blue-700 .text-gray-700,
.bg-blue-800 .text-black,
.bg-blue-800 .text-gray-900,
.bg-blue-800 .text-gray-800,
.bg-blue-800 .text-gray-700,
.bg-blue-900 .text-black,
.bg-blue-900 .text-gray-900,
.bg-blue-900 .text-gray-800,
.bg-blue-900 .text-gray-700,
.bg-indigo-700 .text-black,
.bg-indigo-700 .text-gray-900,
.bg-indigo-700 .text-gray-800,
.bg-indigo-700 .text-gray-700,
.bg-indigo-800 .text-black,
.bg-indigo-800 .text-gray-900,
.bg-indigo-800 .text-gray-800,
.bg-indigo-800 .text-gray-700,
.bg-indigo-900 .text-black,
.bg-indigo-900 .text-gray-900,
.bg-indigo-900 .text-gray-800,
.bg-indigo-900 .text-gray-700 {
  color: #ffffff !important; /* Force white text on dark blue backgrounds */
}

/* Ensure links on dark blue backgrounds are light blue */
.bg-blue-700 a,
.bg-blue-800 a,
.bg-blue-900 a,
.bg-indigo-700 a,
.bg-indigo-800 a,
.bg-indigo-900 a {
  color: #dbeafe !important; /* Light blue for links on dark blue */
}

.bg-blue-700 a:hover,
.bg-blue-800 a:hover,
.bg-blue-900 a:hover,
.bg-indigo-700 a:hover,
.bg-indigo-800 a:hover,
.bg-indigo-900 a:hover {
  color: #ffffff !important; /* White on hover */
}

/* Ensure buttons on dark blue backgrounds also have white text */
.bg-blue-700 button,
.bg-blue-800 button,
.bg-blue-900 button,
.bg-indigo-700 button,
.bg-indigo-800 button,
.bg-indigo-900 button {
  color: #ffffff !important;
}

/* Fix any Tailwind dark text classes on dark blue backgrounds */
.bg-blue-700 .text-slate-900,
.bg-blue-700 .text-slate-800,
.bg-blue-800 .text-slate-900,
.bg-blue-800 .text-slate-800,
.bg-blue-900 .text-slate-900,
.bg-blue-900 .text-slate-800 {
  color: #ffffff !important;
}

/* Specific fix for common admin patterns */
.bg-blue-800 h1,
.bg-blue-800 h2,
.bg-blue-800 h3,
.bg-blue-800 h4,
.bg-blue-800 h5,
.bg-blue-800 h6,
.bg-blue-800 p,
.bg-blue-800 span,
.bg-blue-800 div {
  color: #ffffff !important;
}

/* Ensure any text within blue containers gets white text */
[class*="bg-blue-7"] h1,
[class*="bg-blue-7"] h2,
[class*="bg-blue-7"] h3,
[class*="bg-blue-7"] h4,
[class*="bg-blue-7"] h5,
[class*="bg-blue-7"] h6,
[class*="bg-blue-7"] p,
[class*="bg-blue-7"] span,
[class*="bg-blue-7"] div,
[class*="bg-blue-8"] h1,
[class*="bg-blue-8"] h2,
[class*="bg-blue-8"] h3,
[class*="bg-blue-8"] h4,
[class*="bg-blue-8"] h5,
[class*="bg-blue-8"] h6,
[class*="bg-blue-8"] p,
[class*="bg-blue-8"] span,
[class*="bg-blue-8"] div,
[class*="bg-blue-9"] h1,
[class*="bg-blue-9"] h2,
[class*="bg-blue-9"] h3,
[class*="bg-blue-9"] h4,
[class*="bg-blue-9"] h5,
[class*="bg-blue-9"] h6,
[class*="bg-blue-9"] p,
[class*="bg-blue-9"] span,
[class*="bg-blue-9"] div {
  color: #ffffff !important;
}

/* Fix for any badges or indicators on dark blue */
.bg-blue-800 [class*="badge"],
.bg-blue-800 [class*="tag"],
.bg-blue-800 [class*="indicator"] {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure card headers on dark blue backgrounds have white text */
.bg-blue-800 header,
.bg-blue-800 .card-header,
.bg-blue-800 .header {
  color: #ffffff !important;
}

/* Fix for any dropdowns or menus on dark blue */
.bg-blue-800 .dropdown-menu,
.bg-blue-800 .menu {
  color: #ffffff !important;
}

/* Override any inline styles that might force dark text */
.bg-blue-700[style*="color"],
.bg-blue-800[style*="color"],
.bg-blue-900[style*="color"] {
  color: #ffffff !important;
}

/* ============================================
   CRITICAL: WHITE TEXT ON DARK GRAY/BLACK BACKGROUNDS
   Replace red/blue text on dark backgrounds with white
   ============================================ */

/* Ensure white text on ALL dark gray/black backgrounds */
.bg-gray-700,
.bg-gray-800,
.bg-gray-900,
.bg-black,
.bg-slate-700,
.bg-slate-800,
.bg-slate-900,
[class*="bg-gray-7"],
[class*="bg-gray-8"],
[class*="bg-gray-9"],
[class*="bg-slate-7"],
[class*="bg-slate-8"],
[class*="bg-slate-9"] {
  color: #ffffff !important; /* White text on dark gray/black backgrounds */
}

/* Ensure text elements also have white text on dark backgrounds - but NOT child containers */
.bg-gray-700 h1,
.bg-gray-700 h2,
.bg-gray-700 h3,
.bg-gray-700 h4,
.bg-gray-700 h5,
.bg-gray-700 h6,
.bg-gray-700 p,
.bg-gray-700 span,
.bg-gray-700 label,
.bg-gray-700 td,
.bg-gray-700 th,
.bg-gray-800 h1,
.bg-gray-800 h2,
.bg-gray-800 h3,
.bg-gray-800 h4,
.bg-gray-800 h5,
.bg-gray-800 h6,
.bg-gray-800 p,
.bg-gray-800 span,
.bg-gray-800 label,
.bg-gray-800 td,
.bg-gray-800 th,
.bg-gray-900 h1,
.bg-gray-900 h2,
.bg-gray-900 h3,
.bg-gray-900 h4,
.bg-gray-900 h5,
.bg-gray-900 h6,
.bg-gray-900 p,
.bg-gray-900 span,
.bg-gray-900 label,
.bg-gray-900 td,
.bg-gray-900 th,
.bg-black h1,
.bg-black h2,
.bg-black h3,
.bg-black h4,
.bg-black h5,
.bg-black h6,
.bg-black p,
.bg-black span,
.bg-black label,
.bg-black td,
.bg-black th,
.bg-slate-700 h1,
.bg-slate-700 h2,
.bg-slate-700 h3,
.bg-slate-700 h4,
.bg-slate-700 h5,
.bg-slate-700 h6,
.bg-slate-700 p,
.bg-slate-700 span,
.bg-slate-700 label,
.bg-slate-700 td,
.bg-slate-700 th,
.bg-slate-800 h1,
.bg-slate-800 h2,
.bg-slate-800 h3,
.bg-slate-800 h4,
.bg-slate-800 h5,
.bg-slate-800 h6,
.bg-slate-800 p,
.bg-slate-800 span,
.bg-slate-800 label,
.bg-slate-800 td,
.bg-slate-800 th,
.bg-slate-900 h1,
.bg-slate-900 h2,
.bg-slate-900 h3,
.bg-slate-900 h4,
.bg-slate-900 h5,
.bg-slate-900 h6,
.bg-slate-900 p,
.bg-slate-900 span,
.bg-slate-900 label,
.bg-slate-900 td,
.bg-slate-900 th {
  color: #ffffff !important;
}

/* Override red text on dark backgrounds - use white instead */
.bg-gray-700 .text-red-500,
.bg-gray-700 .text-red-600,
.bg-gray-700 .text-red-700,
.bg-gray-700 .text-red-800,
.bg-gray-700 .text-red-900,
.bg-gray-800 .text-red-500,
.bg-gray-800 .text-red-600,
.bg-gray-800 .text-red-700,
.bg-gray-800 .text-red-800,
.bg-gray-800 .text-red-900,
.bg-gray-900 .text-red-500,
.bg-gray-900 .text-red-600,
.bg-gray-900 .text-red-700,
.bg-gray-900 .text-red-800,
.bg-gray-900 .text-red-900,
.bg-black .text-red-500,
.bg-black .text-red-600,
.bg-black .text-red-700,
.bg-black .text-red-800,
.bg-black .text-red-900,
.bg-slate-700 .text-red-500,
.bg-slate-700 .text-red-600,
.bg-slate-700 .text-red-700,
.bg-slate-800 .text-red-500,
.bg-slate-800 .text-red-600,
.bg-slate-800 .text-red-700,
.bg-slate-900 .text-red-500,
.bg-slate-900 .text-red-600,
.bg-slate-900 .text-red-700,
.bg-blue-500 .text-red-500,
.bg-blue-500 .text-red-600,
.bg-blue-500 .text-red-700,
.bg-blue-600 .text-red-500,
.bg-blue-600 .text-red-600,
.bg-blue-600 .text-red-700,
.bg-blue-700 .text-red-500,
.bg-blue-700 .text-red-600,
.bg-blue-700 .text-red-700,
.bg-blue-800 .text-red-500,
.bg-blue-800 .text-red-600,
.bg-blue-800 .text-red-700,
.bg-blue-900 .text-red-500,
.bg-blue-900 .text-red-600,
.bg-blue-900 .text-red-700 {
  color: #ffffff !important; /* Force white text instead of red on blue backgrounds */
}

/* Override blue text on dark backgrounds - use white instead */
.bg-gray-700 .text-blue-500,
.bg-gray-700 .text-blue-600,
.bg-gray-700 .text-blue-700,
.bg-gray-700 .text-blue-800,
.bg-gray-700 .text-blue-900,
.bg-gray-800 .text-blue-500,
.bg-gray-800 .text-blue-600,
.bg-gray-800 .text-blue-700,
.bg-gray-800 .text-blue-800,
.bg-gray-800 .text-blue-900,
.bg-gray-900 .text-blue-500,
.bg-gray-900 .text-blue-600,
.bg-gray-900 .text-blue-700,
.bg-gray-900 .text-blue-800,
.bg-gray-900 .text-blue-900,
.bg-black .text-blue-500,
.bg-black .text-blue-600,
.bg-black .text-blue-700,
.bg-black .text-blue-800,
.bg-black .text-blue-900,
.bg-slate-700 .text-blue-500,
.bg-slate-700 .text-blue-600,
.bg-slate-700 .text-blue-700,
.bg-slate-800 .text-blue-500,
.bg-slate-800 .text-blue-600,
.bg-slate-800 .text-blue-700,
.bg-slate-900 .text-blue-500,
.bg-slate-900 .text-blue-600,
.bg-slate-900 .text-blue-700,
.bg-blue-500 .text-blue-500,
.bg-blue-500 .text-blue-600,
.bg-blue-600 .text-blue-500,
.bg-blue-600 .text-blue-600,
.bg-blue-700 .text-blue-500,
.bg-blue-700 .text-blue-600,
.bg-blue-800 .text-blue-500,
.bg-blue-800 .text-blue-600,
.bg-blue-900 .text-blue-500,
.bg-blue-900 .text-blue-600 {
  color: #ffffff !important; /* Force white text instead of blue on dark backgrounds */
}

/* Override pink/magenta text on dark backgrounds */
.bg-gray-700 .text-pink-400,
.bg-gray-700 .text-pink-500,
.bg-gray-700 .text-pink-600,
.bg-gray-800 .text-pink-400,
.bg-gray-800 .text-pink-500,
.bg-gray-800 .text-pink-600,
.bg-gray-900 .text-pink-400,
.bg-gray-900 .text-pink-500,
.bg-gray-900 .text-pink-600,
.bg-black .text-pink-400,
.bg-black .text-pink-500,
.bg-black .text-pink-600,
.bg-slate-700 .text-pink-400,
.bg-slate-700 .text-pink-500,
.bg-slate-700 .text-pink-600,
.bg-slate-800 .text-pink-400,
.bg-slate-800 .text-pink-500,
.bg-slate-800 .text-pink-600,
.bg-slate-900 .text-pink-400,
.bg-slate-900 .text-pink-500,
.bg-slate-900 .text-pink-600,
.bg-blue-700 .text-pink-400,
.bg-blue-700 .text-pink-500,
.bg-blue-700 .text-pink-600,
.bg-blue-800 .text-pink-400,
.bg-blue-800 .text-pink-500,
.bg-blue-800 .text-pink-600,
.bg-blue-900 .text-pink-400,
.bg-blue-900 .text-pink-500,
.bg-blue-900 .text-pink-600 {
  color: #ffffff !important; /* Force white text instead of pink on dark backgrounds */
}

/* Ensure links on dark backgrounds are light colored */
.bg-gray-700 a,
.bg-gray-800 a,
.bg-gray-900 a,
.bg-black a,
.bg-slate-700 a,
.bg-slate-800 a,
.bg-slate-900 a {
  color: #dbeafe !important; /* Light blue for links on dark backgrounds */
}

.bg-gray-700 a:hover,
.bg-gray-800 a:hover,
.bg-gray-900 a:hover,
.bg-black a:hover,
.bg-slate-700 a:hover,
.bg-slate-800 a:hover,
.bg-slate-900 a:hover {
  color: #ffffff !important; /* White on hover */
}

/* Ensure buttons on dark backgrounds also have white text */
.bg-gray-700 button,
.bg-gray-800 button,
.bg-gray-900 button,
.bg-black button,
.bg-slate-700 button,
.bg-slate-800 button,
.bg-slate-900 button {
  color: #ffffff !important;
}

/* Override any inline styles that might force colored text on dark backgrounds */
.bg-gray-700[style*="color"],
.bg-gray-800[style*="color"],
.bg-gray-900[style*="color"],
.bg-black[style*="color"],
.bg-slate-700[style*="color"],
.bg-slate-800[style*="color"],
.bg-slate-900[style*="color"] {
  color: #ffffff !important;
}