/* ============================================
   MacauGo — Macau AI Travel Companion
   Design: "Macau Editorial" — Premium travel magazine
   Palette: Warm terracotta × Gold × Deep teal
   ============================================ */

/* ===== Design Tokens ===== */
:root {
  /* --- Color Palette (OKLCH) --- */
  --c-primary:        #C8553D;          /* Terracotta - brand, CTAs */
  --c-primary-dark:   #A03E2A;          /* Dark terracotta - hover */
  --c-primary-light:  #E8846E;          /* Light terracotta - accents */
  --c-accent:         #E8A85F;          /* Warm gold - highlights */
  --c-accent-dark:    #C88A3E;          /* Dark gold */
  --c-gold:           #B8942E;          /* Rich gold - badges, awards */
  --c-teal:           #2A9D8F;          /* Deep teal - secondary */
  --c-teal-dark:      #1A6B61;          /* Dark teal */
  --c-navy:           #1E3A4D;          /* Navy - dark surfaces */
  --c-navy-deep:      #0F1F2B;          /* Deepest navy - hero bg */

  /* --- Tinted Neutrals (warm bias for Macau) --- */
  --c-cream:          #FFFBF5;          /* Page background */
  --c-warm:           #FDF5EB;          /* Alt background */
  --c-surface:        #FFFFFF;          /* Card surface */
  --c-dark:           #2C1F17;          /* Headline text */
  --c-text:           #3D3029;          /* Body text */
  --c-text-muted:     #8C7E73;          /* Secondary text */
  --c-border:         #EADDCF;          /* Subtle borders */
  --c-border-strong:  #D4C5B0;          /* Stronger borders */

  /* --- Shadows (warm biased) --- */
  --shadow-xs:  0 1px 3px  rgba(45, 27, 20, 0.04);
  --shadow-sm:  0 2px 8px  rgba(45, 27, 20, 0.06);
  --shadow-md:  0 6px 20px rgba(45, 27, 20, 0.08);
  --shadow-lg:  0 12px 40px rgba(45, 27, 20, 0.10);
  --shadow-xl:  0 20px 60px rgba(45, 27, 20, 0.14);
  --shadow-glow: 0 0 40px rgba(200, 85, 61, 0.15);

  /* --- Shadows: Hover state --- */
  --shadow-sm-h: 0 4px 12px rgba(45, 27, 20, 0.10);
  --shadow-md-h: 0 10px 30px rgba(45, 27, 20, 0.12);
  --shadow-lg-h: 0 18px 50px rgba(45, 27, 20, 0.15);

  /* --- Border Radius --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* --- Typography --- */
  --font-display: 'Playfair Display', 'Noto Serif TC', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* --- Type Scale (Major Third / 1.25) --- */
  --text-xs:   0.75rem;    /* 12px — captions, badges */
  --text-sm:   0.875rem;   /* 14px — secondary UI, meta */
  --text-base: 1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px — lead text */
  --text-xl:   1.25rem;    /* 20px — subheadings */
  --text-2xl:  1.5rem;     /* 24px — card titles */
  --text-3xl:  1.875rem;   /* 30px — section subhead */
  --text-4xl:  2.25rem;    /* 36px — section headline */
  --text-5xl:  3rem;       /* 48px — major headline */
  --text-6xl:  3.75rem;    /* 60px — hero */

  /* --- Spacing (4pt base) --- */
  --space-1:  0.25rem;     /* 4px */
  --space-2:  0.5rem;      /* 8px */
  --space-3:  0.75rem;     /* 12px */
  --space-4:  1rem;        /* 16px */
  --space-5:  1.25rem;     /* 20px */
  --space-6:  1.5rem;      /* 24px */
  --space-8:  2rem;        /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-base: 300ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);
}

/* Backward compat aliases */
:root {
  --c-shadow: rgba(45, 27, 20, 0.08);
  --c-shadow-hover: rgba(45, 27, 20, 0.15);
  --c-text-light: #8C7E73;
  --c-card: #1A1F2E;
  --c-card-text: #EBE3D5;
  --c-card-muted: rgba(235, 227, 213, 0.55);
  --c-card-border: rgba(255, 255, 255, 0.08);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --font-serif: 'Playfair Display', 'Noto Serif TC', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --c-bg-light: var(--c-warm);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--c-primary); color: white; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-dark);
}

p { line-height: 1.75; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-warm); }
::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-primary-light); }

/* ===== Container ===== */
.container { 
  max-width: 1240px; 
  margin: 0 auto; 
  padding: 0 var(--space-6); 
}
.container-sm { 
  max-width: 900px; 
  margin: 0 auto; 
  padding: 0 var(--space-6); 
}

/* ===== Navbar — Refined ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 251, 245, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: all var(--transition-base);
}
.navbar.scrolled {
  background: rgba(255, 251, 245, 0.95);
  border-bottom-color: var(--c-border);
  box-shadow: var(--shadow-sm);
}

.navbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 var(--space-6);
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}

.navbar-logo {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  color: var(--c-primary); white-space: nowrap; letter-spacing: -0.01em;
}
.navbar-logo .logo-icon {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-dark));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 17px;
  box-shadow: 0 2px 8px rgba(200,85,61,0.3);
}

.navbar-links {
  display: flex; align-items: center; gap: 2px;
  flex: 1; justify-content: center;
  overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.navbar-links::-webkit-scrollbar { display: none; }
.navbar-links a {
  padding: 8px 14px; font-size: var(--text-sm); font-weight: 500;
  color: var(--c-text-muted); border-radius: var(--radius-xs);
  transition: all var(--transition-fast); white-space: nowrap;
  letter-spacing: -0.01em;
}
.navbar-links a:hover { background: var(--c-warm); color: var(--c-text); }
.navbar-links a.active { color: var(--c-primary); font-weight: 600; }

/* ===== Mega Dropdown Navigation ===== */
.navbar-dropdown { position: relative; }
.navbar-dropdown-btn {
  padding: 8px 14px; font-size: var(--text-sm); font-weight: 500;
  color: var(--c-text-muted); border-radius: var(--radius-xs);
  cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 4px;
  transition: all var(--transition-fast); letter-spacing: -0.01em;
}
.navbar-dropdown-btn i.fa-chevron-down { font-size: 0.65em; margin-left: 2px; opacity: 0.5; transition: transform var(--transition-fast); }
.navbar-dropdown:hover .navbar-dropdown-btn i.fa-chevron-down { transform: rotate(180deg); opacity: 1; }
.navbar-dropdown-btn:hover { background: var(--c-warm); color: var(--c-text); }

.navbar-dropdown-menu {
  position: absolute; top: calc(100% + 8px);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2); min-width: 200px;
  display: none; flex-direction: column; gap: 1px; z-index: 1100;
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.navbar-dropdown:not(:has(.mega-dropdown)):last-child .navbar-dropdown-menu { right: 0; }
.navbar-dropdown:hover .navbar-dropdown-menu { display: flex; opacity: 1; transform: translateY(0); }
.navbar-dropdown-menu a {
  padding: 10px 16px; font-size: var(--text-sm); font-weight: 500;
  color: var(--c-text); border-radius: var(--radius-xs);
  white-space: nowrap; display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.navbar-dropdown-menu a:hover { background: var(--c-warm); color: var(--c-primary); }
.navbar-dropdown-menu a i { width: 16px; text-align: center; color: var(--c-text-muted); }

/* Mega Dropdown (multi-column) */
.navbar-dropdown-menu.mega-dropdown {
  flex-direction: row; gap: 0; padding: var(--space-4) var(--space-3);
  min-width: 620px; left: 50%; transform: translateX(-50%) translateY(-8px);
}
.navbar-dropdown:hover .navbar-dropdown-menu.mega-dropdown { transform: translateX(-50%) translateY(0); }
.mega-col {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 var(--space-4); min-width: 180px;
  border-right: 1px solid var(--c-border);
}
.mega-col:last-child { border-right: none; }
.mega-col.mega-highlight { background: var(--c-warm); border-radius: var(--radius-sm); padding-top: var(--space-2); padding-bottom: var(--space-2); border-right: none; }
.mega-title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--c-text-muted);
  padding: var(--space-1) var(--space-2) var(--space-2); white-space: nowrap;
}
.mega-col a {
  padding: 7px 12px; font-weight: 400; font-size: var(--text-sm); border-radius: var(--radius-xs);
}
.nav-dropdown-divider { border: none; border-top: 1px solid var(--c-border); margin: var(--space-1) var(--space-2); }

.navbar-right { display: flex; align-items: center; gap: var(--space-3); }

/* Navbar Search */
.navbar-search { position: relative; }
.navbar-search-btn {
  width: 38px; height: 38px; border-radius: var(--radius-xs);
  background: var(--c-warm); display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--c-text-muted); transition: all var(--transition-fast);
  border: 1px solid transparent; cursor: pointer;
}
.navbar-search-btn:hover { background: var(--c-primary); color: white; border-color: var(--c-primary); }

.navbar-search-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  width: 380px; max-width: 90vw; background: var(--c-card);
  border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: none; z-index: 1000;
  overflow: hidden;
}
.navbar-search-dropdown.open { display: block; }

.navbar-search-input-wrap {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
}
.navbar-search-input-wrap i { color: var(--c-muted); font-size: 14px; }
.navbar-search-input-wrap input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 14px; color: var(--c-text); font-family: inherit;
}
.navbar-search-input-wrap input::placeholder { color: var(--c-muted); }
.navbar-search-input-wrap button {
  background: none; border: none; color: var(--c-muted); cursor: pointer;
  font-size: 14px; padding: 2px;
}

.navbar-search-results { max-height: 360px; overflow-y: auto; }
.search-result-item:hover { background: var(--c-warm) !important; }

.lang-switcher {
  display: flex; gap: 1px; background: var(--c-warm);
  border-radius: var(--radius-xs); padding: 3px;
  border: 1px solid var(--c-border);
}
.lang-btn {
  padding: 6px 10px; font-size: 11px; font-weight: 600;
  color: var(--c-text-muted); border-radius: 5px;
  transition: all var(--transition-fast); letter-spacing: 0.02em;
}
.lang-btn.active, .lang-btn:hover { background: var(--c-primary); color: white; }

.navbar-fav-btn {
  position: relative; width: 38px; height: 38px; border-radius: var(--radius-xs);
  background: var(--c-warm); display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--c-primary); transition: all var(--transition-fast);
  border: 1px solid transparent;
}
.navbar-fav-btn:hover { background: var(--c-primary); color: white; border-color: var(--c-primary); }
.navbar-fav-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  background: var(--c-gold); color: white; border-radius: 9px;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid var(--c-surface);
}

.navbar-toggle { display: none; font-size: 22px; color: var(--c-primary); }

/* AI highlight in nav */
.nav-ai-highlight {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-dark));
  color: white !important; border-radius: var(--radius-xs);
  padding: 8px 16px !important; font-weight: 600;
  box-shadow: 0 2px 12px rgba(200,85,61,0.25);
}
.nav-ai-highlight:hover { 
  filter: brightness(1.08); 
  transform: translateY(-1px); 
  box-shadow: 0 4px 16px rgba(200,85,61,0.35);
  color: white !important;
}

/* ===== Hero — Cover ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--c-navy-deep);
  background: url('../images/hero-bg.jpg') center/cover no-repeat, url('../images/hero-bg.png') center/cover no-repeat, var(--c-navy-deep);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  /* Dark gradient overlay for text readability over Macau skyline */
  background: linear-gradient(
    160deg,
    rgba(10, 18, 30, 0.70) 0%,
    rgba(8, 16, 28, 0.50) 35%,
    rgba(12, 20, 30, 0.55) 65%,
    rgba(6, 12, 22, 0.80) 100%
  );
}
.hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  /* Warm glow accents */
  background:
    radial-gradient(ellipse 900px 700px at 20% 80%, rgba(200,85,61,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 600px 600px at 80% 25%, rgba(232,168,95,0.10) 0%, transparent 60%);
}
.hero-content {
  position: relative; z-index: 2; text-align: center;
  max-width: 820px; padding: 140px var(--space-6) 80px; color: white;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 22px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-8);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
}
.hero-badge .dot { 
  width: 7px; height: 7px; border-radius: 50%; 
  background: var(--c-accent); 
  box-shadow: 0 0 12px rgba(232,168,95,0.6);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 5rem); font-weight: 700;
  line-height: 1.05; margin-bottom: var(--space-6);
  letter-spacing: -0.03em;
  color: white;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero h1 .accent { 
  color: var(--c-accent); 
  font-style: italic; 
  display: block;
  font-size: 0.88em;
}
.hero p {
  font-size: clamp(1.05rem, 2vw, 1.25rem); 
  color: rgba(255,255,255,0.78);
  margin-bottom: var(--space-10); 
  max-width: 560px; margin-left: auto; margin-right: auto;
  font-weight: 300; line-height: 1.65;
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}

/* Hero AI Search */
.hero-ai-bar { max-width: 560px; margin: 0 auto; }
.hero-ai-input-wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full); 
  padding: 5px 5px 5px 22px; 
  transition: all var(--transition-base);
}
.hero-ai-input-wrap:focus-within {
  background: rgba(255,255,255,0.16); 
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(232,168,95,0.1), 0 0 40px rgba(200,85,61,0.12);
}
.hero-ai-icon { color: var(--c-accent); font-size: 20px; margin-right: 10px; flex-shrink: 0; }
.hero-ai-input {
  flex: 1; background: none; border: none; outline: none;
  color: white; font-size: var(--text-base); padding: 13px 0;
  font-family: var(--font-body);
}
.hero-ai-input::placeholder { color: rgba(255,255,255,0.38); }
.hero-ai-btn {
  background: var(--c-accent); border: none; color: var(--c-navy-deep);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  font-size: 16px; flex-shrink: 0; transition: all var(--transition-fast);
  font-weight: 700;
}
.hero-ai-btn:hover { 
  background: #F5C276; 
  transform: scale(1.06); 
  box-shadow: 0 0 24px rgba(232,168,95,0.4);
}

/* Hero "Plan My Trip" text button */
.hero-ai-btn-text {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--c-accent) 0%, #E8A85F 100%);
  color: var(--c-navy-deep);
  border: none; cursor: pointer;
  padding: 12px 24px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}
.hero-ai-btn-text:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(232,168,95,0.45);
  filter: brightness(1.04);
}

/* Navbar Login button */
.navbar-login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent-dark) 100%);
  color: #fff; border: none; cursor: pointer;
  padding: 9px 18px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.navbar-login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(200,85,61,0.32);
}
.hero-ai-chips {
  display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center;
  margin-top: var(--space-4);
}
.ai-chip {
  background: rgba(255,255,255,0.06); 
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8); 
  padding: 8px 16px; border-radius: var(--radius-full);
  font-size: var(--text-xs); cursor: pointer; 
  transition: all var(--transition-fast); white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-chip:hover { 
  background: rgba(255,255,255,0.14); 
  color: white; 
  border-color: var(--c-accent);
  transform: translateY(-1px);
}

/* Hero Stats */
.hero-stats {
  display: flex; gap: var(--space-10); justify-content: center;
  margin-top: var(--space-12); flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat-num {
  font-family: var(--font-display); 
  font-size: 2rem; font-weight: 700;
  color: var(--c-accent);
  line-height: 1.1;
}
.hero-stat-label { 
  font-size: var(--text-xs); 
  color: rgba(255,255,255,0.5); 
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ===== Buttons — Refined ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-xs);
  font-size: var(--text-sm); font-weight: 600; 
  transition: all var(--transition-fast);
  white-space: nowrap; letter-spacing: -0.01em;
}
.btn-primary { background: var(--c-primary); color: white; }
.btn-primary:hover { 
  background: var(--c-primary-dark); 
  transform: translateY(-2px); 
  box-shadow: 0 8px 24px rgba(200,85,61,0.3); 
}
.btn-outline { 
  background: rgba(255,255,255,0.08); color: white; 
  border: 1px solid rgba(255,255,255,0.2); 
}
.btn-outline:hover { 
  background: rgba(255,255,255,0.16); 
  border-color: rgba(255,255,255,0.4); 
}
.btn-ghost { color: var(--c-primary); background: var(--c-warm); }
.btn-ghost:hover { background: var(--c-primary); color: white; }
.btn-gold { background: var(--c-gold); color: white; }
.btn-gold:hover { background: #9E7D26; transform: translateY(-2px); }
.btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; color: var(--c-primary);
  transition: all var(--transition-fast); cursor: pointer;
}
.btn-text:hover { color: var(--c-primary-dark); gap: 10px; }
.btn-text i { font-size: 0.85em; transition: transform var(--transition-fast); }
.btn-text:hover i { transform: translateX(3px); }

.section-footer {
  text-align: center; margin-top: var(--space-8);
}

/* ===== Section Headers — Refined ===== */
.section { padding: var(--space-20) 0; }
.section-header { 
  text-align: center; max-width: 600px; 
  margin: 0 auto var(--space-12); 
}
.section-header h2 {
  font-family: var(--font-display); 
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700; color: var(--c-dark); 
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}
.section-header h2 .accent { color: var(--c-primary); font-style: italic; }
.section-header p { 
  font-size: var(--text-base); 
  color: var(--c-text-muted); 
  font-weight: 400;
}

.section-eyebrow {
  text-align: center; font-size: var(--text-xs); font-weight: 700;
  color: var(--c-primary); text-transform: uppercase;
  letter-spacing: 0.15em; margin-bottom: var(--space-2);
}

/* Section size variants */
.section-lg { padding: var(--space-24) 0; }
.section-md { padding: var(--space-16) 0; }
.section-sm { padding: var(--space-10) 0; }

/* ===== Stats Bar ===== */
.stats-bar { 
  background: var(--c-warm); 
  border-top: 1px solid var(--c-border); 
  border-bottom: 1px solid var(--c-border); 
}
.stats-bar-grid { 
  display: grid; grid-template-columns: repeat(4, 1fr); 
  gap: var(--space-6); padding: var(--space-10) 0; 
  text-align: center; 
}
.stat-item .num { 
  font-family: var(--font-display); font-size: 2rem; 
  font-weight: 700; color: var(--c-primary); 
}
.stat-item .label { font-size: var(--text-sm); color: var(--c-text-muted); }
.stat-item .unesco-badge { 
  font-size: 11px; color: var(--c-gold); font-weight: 700; 
  letter-spacing: 0.08em; text-transform: uppercase; 
}

/* ===== Categories (for Explore page) ===== */
.cat-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
  gap: var(--space-5); 
}
.cat-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; aspect-ratio: 3/4; transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.cat-card:hover { 
  transform: translateY(-6px); 
  box-shadow: var(--shadow-lg); 
}
.cat-card img { 
  position: absolute; inset: 0; width: 100%; height: 100%; 
  object-fit: cover; transition: transform 0.5s var(--ease-out); 
}
.cat-card:hover img { transform: scale(1.08); }
.cat-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; 
  padding: var(--space-6);
}
.cat-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: white; margin-bottom: var(--space-3);
}
.cat-card h3 { 
  color: white; font-family: var(--font-display); 
  font-size: 1.3rem; margin-bottom: 4px; 
}
.cat-card p { color: rgba(255,255,255,0.8); font-size: var(--text-sm); line-height: 1.5; }
.cat-card .explore-arrow {
  margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-accent); font-size: var(--text-sm); font-weight: 600;
  opacity: 0; transform: translateY(8px); transition: all var(--transition-base);
}
.cat-card:hover .explore-arrow { opacity: 1; transform: translateY(0); }

/* ===== Food Grid — Shared Explore Card ===== */
.food-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  gap: var(--space-5); 
}

.food-card {
  background: var(--c-card); 
  border-radius: var(--radius-md); overflow: hidden;
  transition: all var(--transition-base); 
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  cursor: pointer; position: relative;
  border: 1px solid var(--c-card-border);
}
.food-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 12px 32px rgba(0,0,0,0.25); 
  border-color: rgba(255,255,255,0.15);
}

.food-card-img { 
  position: relative; aspect-ratio: 1/1; overflow: hidden; 
  background: #252a3a;
}
.food-card-img img { 
  width: 100%; height: 100%; object-fit: cover; 
  transition: transform 0.5s var(--ease-out); 
}
.food-card:hover .food-card-img img { transform: scale(1.06); }

.food-card-badge {
  position: absolute; top: var(--space-3); left: var(--space-3);
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  padding: 4px 12px; border-radius: var(--radius-full); 
  font-size: var(--text-xs); font-weight: 700;
  color: var(--c-primary); text-transform: uppercase; letter-spacing: 0.04em;
}

.food-card-fav {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--c-text-light); transition: var(--transition);
}
.food-card-fav:hover { background: white; color: var(--c-primary); }
.food-card-fav.faved { color: var(--c-primary); }

.food-card-body { padding: 18px; }
.food-card-body h4 { font-family: var(--font-serif); font-size: 18px; margin-bottom: 4px; color: var(--c-card-text); }
.food-card-body .price { font-size: 13px; color: var(--c-gold); font-weight: 600; margin-bottom: 8px; }
.food-card-body .desc { font-size: 13px; color: var(--c-card-muted); line-height: 1.5; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.food-card-footer { display: flex; align-items: center; justify-content: space-between; }
.food-card-rating { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--c-card-text); }
.food-card-rating .stars { color: var(--c-gold); }
.food-card-rating .num { font-weight: 600; }
.food-card-reviews { font-size: 12px; color: var(--c-card-muted); }

/* ===== Ranking ===== */
.ranking-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }
.ranking-tab {
  padding: 10px 22px; border-radius: 50px; font-size: 14px; font-weight: 600;
  background: var(--c-warm); color: var(--c-text-light); transition: var(--transition);
}
.ranking-tab.active { background: var(--c-primary); color: white; }

.ranking-list { max-width: 800px; margin: 0 auto; }
.ranking-item {
  display: flex; align-items: center; gap: 20px;
  background: var(--c-card); border-radius: var(--radius-md); padding: 16px;
  margin-bottom: 12px; transition: var(--transition); cursor: pointer;
  box-shadow: 0 2px 10px var(--c-shadow);
}
.ranking-item:hover { transform: translateX(4px); box-shadow: 0 6px 20px var(--c-shadow-hover); }

.ranking-num {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 20px; font-weight: 700;
}
.ranking-num.top1 { background: linear-gradient(135deg, #FFD700, #FFA500); color: white; }
.ranking-num.top2 { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: white; }
.ranking-num.top3 { background: linear-gradient(135deg, #CD7F32, #B87333); color: white; }
.ranking-num.other { background: var(--c-warm); color: var(--c-text-light); }

.ranking-img { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.ranking-img img { width: 100%; height: 100%; object-fit: cover; }

.ranking-info { flex: 1; min-width: 0; }
.ranking-info h5 { font-size: 16px; font-weight: 600; color: var(--c-dark); margin-bottom: 2px; }
.ranking-info .meta { font-size: 12px; color: var(--c-text-light); }
.ranking-info .meta .stars { color: var(--c-gold); margin-right: 6px; }
.ranking-info .bar { height: 4px; background: var(--c-warm); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.ranking-info .bar-fill { height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); border-radius: 2px; transition: width 1s ease; }

.ranking-score { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--c-primary); }

/* ===== Recommendation System ===== */
.rec-section { background: linear-gradient(180deg, var(--c-warm), var(--c-cream)); }
.rec-filters {
  background: var(--c-card); border-radius: var(--radius-xl); padding: 32px;
  box-shadow: 0 8px 30px var(--c-shadow); max-width: 900px; margin: 0 auto;
}
.rec-filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 24px; }
.rec-filter-group label { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); margin-bottom: 8px; }
.rec-filter-group select {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm); background: var(--c-cream); font-size: 14px;
  font-family: inherit; color: var(--c-text); transition: var(--transition); cursor: pointer;
}
.rec-filter-group select:focus { outline: none; border-color: var(--c-primary); }

.rec-cta { text-align: center; }
.rec-results { margin-top: 40px; }

/* ===== AI Assistant ===== */
.ai-section { background: var(--c-dark); color: white; }
.ai-section .section-header h2 { color: white; }
.ai-section .section-header p { color: rgba(255,255,255,0.6); }

.ai-chat-container {
  max-width: 700px; margin: 0 auto; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); overflow: hidden;
  backdrop-filter: blur(20px);
}
.ai-chat-messages { padding: 24px; max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.ai-msg { display: flex; gap: 12px; max-width: 85%; }
.ai-msg.user { margin-left: auto; flex-direction: row-reverse; }
.ai-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ai-avatar.bot { background: var(--c-primary); color: white; }
.ai-avatar.user { background: var(--c-navy); color: white; }
.ai-bubble {
  padding: 12px 18px; border-radius: 16px; font-size: 14px; line-height: 1.6;
}
.ai-msg.bot .ai-bubble { background: rgba(255,255,255,0.08); border-bottom-left-radius: 4px; }
.ai-msg.user .ai-bubble { background: var(--c-primary); border-bottom-right-radius: 4px; }

.ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 16px; }
.ai-suggestion-chip {
  padding: 8px 16px; border-radius: 50px; font-size: 13px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8); transition: var(--transition); cursor: pointer;
}
.ai-suggestion-chip:hover { background: rgba(255,255,255,0.15); border-color: var(--c-accent); color: white; }

.ai-input-row { display: flex; gap: 10px; padding: 16px 24px 24px; border-top: 1px solid rgba(255,255,255,0.08); }
.ai-input {
  flex: 1; padding: 12px 18px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: white; font-size: 14px; font-family: inherit;
}
.ai-input::placeholder { color: rgba(255,255,255,0.4); }
.ai-input:focus { outline: none; border-color: var(--c-accent); }
.ai-send-btn {
  padding: 12px 24px; border-radius: var(--radius-sm); background: var(--c-primary);
  color: white; font-weight: 600; font-size: 14px; transition: var(--transition);
}
.ai-send-btn:hover { background: var(--c-primary-dark); }

/* ===== Map ===== */
.map-section { background: var(--c-cream); }
.map-container {
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 8px 30px var(--c-shadow); position: relative;
}
#map { height: 550px; width: 100%; }
.map-controls {
  position: absolute; top: 16px; right: 16px; z-index: 500;
  background: white; padding: 12px; border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-width: 220px;
}
.map-controls h5 { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--c-dark); }
.map-cat-filter { display: flex; flex-direction: column; gap: 6px; }
.map-cat-filter label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.map-cat-filter input[type="checkbox"] { accent-color: var(--c-primary); }

.map-popup { padding: 0; border-radius: var(--radius-md); overflow: hidden; }
.map-popup img { width: 100%; height: 120px; object-fit: cover; }
.map-popup-body { padding: 12px 14px; }
.map-popup-body h5 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.map-popup-body .meta { font-size: 12px; color: var(--c-text-light); }
.map-popup-body .stars { color: var(--c-gold); }

/* ===== Journey Planning ===== */
.journey-section { background: linear-gradient(180deg, var(--c-cream), var(--c-warm)); }
.journey-builder {
  max-width: 800px; margin: 0 auto; background: var(--c-card);
  border-radius: var(--radius-xl); padding: 36px;
  box-shadow: 0 8px 30px var(--c-shadow);
}
.journey-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.journey-option {
  padding: 20px; border: 2px solid var(--c-border); border-radius: var(--radius-md);
  cursor: pointer; transition: var(--transition); text-align: center;
}
.journey-option:hover { border-color: var(--c-primary-light); }
.journey-option.selected { border-color: var(--c-primary); background: var(--c-warm); }
.journey-option .icon { font-size: 28px; margin-bottom: 10px; color: var(--c-primary); }
.journey-option h5 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.journey-option p { font-size: 12px; color: var(--c-text-light); }

.journey-result { margin-top: 32px; }
.journey-timeline { position: relative; padding-left: 32px; }
.journey-timeline::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--c-border); }
.journey-stop {
  position: relative; margin-bottom: 24px; padding: 20px;
  background: var(--c-card); border-radius: var(--radius-md);
  box-shadow: 0 2px 12px var(--c-shadow);
}
.journey-stop::before {
  content: ''; position: absolute; left: -26px; top: 24px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-primary); border: 3px solid var(--c-cream);
}
.journey-stop-num { font-size: 12px; font-weight: 700; color: var(--c-primary); text-transform: uppercase; letter-spacing: 1px; }
.journey-stop h5 { font-family: var(--font-serif); font-size: 18px; margin: 4px 0 8px; }
.journey-stop p { font-size: 14px; color: var(--c-text-light); }
.journey-stop .stop-img { width: 100%; height: 160px; border-radius: var(--radius-sm); overflow: hidden; margin-top: 12px; }
.journey-stop .stop-img img { width: 100%; height: 100%; object-fit: cover; }

.journey-tips-box {
  margin-top: 24px; padding: 20px; background: var(--c-warm);
  border-radius: var(--radius-md); border-left: 4px solid var(--c-gold);
}
.journey-tips-box h6 { font-size: 14px; font-weight: 600; color: var(--c-dark); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.journey-tips-box p { font-size: 13px; color: var(--c-text-light); }

/* ===== Food Stories ===== */
.stories-section { background: var(--c-warm); }
.stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.story-card {
  background: var(--c-card); border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; transition: var(--transition); box-shadow: 0 4px 16px var(--c-shadow);
}
.story-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px var(--c-shadow-hover); }
.story-card-img { aspect-ratio: 16/10; overflow: hidden; }
.story-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.story-card:hover .story-card-img img { transform: scale(1.05); }
.story-card-body { padding: 24px; }
.story-card-body .cat-tag {
  display: inline-block; padding: 4px 12px; border-radius: 50px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.story-card-body h4 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 8px; color: var(--c-card-text); }
.story-card-body p { font-size: 14px; color: var(--c-card-muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.story-card-body .read-more { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--c-primary); display: inline-flex; align-items: center; gap: 4px; }

/* ===== Restaurant Cards ===== */
.rest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.rest-card {
  background: var(--c-card); border-radius: var(--radius-lg); overflow: hidden;
  transition: var(--transition); box-shadow: 0 4px 16px var(--c-shadow); cursor: pointer;
}
.rest-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px var(--c-shadow-hover); }
.rest-card-img { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.rest-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.rest-card:hover .rest-card-img img { transform: scale(1.05); }
.rest-card-rating-badge {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
  padding: 4px 12px; border-radius: 50px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 4px;
}
.rest-card-rating-badge .stars { color: var(--c-gold); }
.rest-card-body { padding: 20px; }
.rest-card-body h4 { font-family: var(--font-serif); font-size: 19px; margin-bottom: 6px; color: var(--c-card-text); }
.rest-card-body .info-row { font-size: 13px; color: var(--c-card-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.rest-card-body .info-row i { width: 14px; color: var(--c-primary); }

/* ===== Detail Modal ===== */
.detail-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(45,27,20,0.7);
  backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.detail-modal {
  background: var(--c-cream); border-radius: var(--radius-xl);
  max-width: 800px; width: 100%; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: modalIn 0.4s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.detail-hero-img { width: 100%; height: 320px; object-fit: cover; }
.detail-close {
  position: fixed; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--c-dark); z-index: 2001; transition: var(--transition);
}
.detail-close:hover { background: white; transform: rotate(90deg); }
.detail-content { padding: 32px; }
.detail-content h2 { font-family: var(--font-serif); font-size: 30px; margin-bottom: 8px; color: var(--c-dark); }
.detail-content .detail-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; font-size: 14px; }
.detail-content .detail-meta span { display: flex; align-items: center; gap: 6px; color: var(--c-text-light); }
.detail-content .detail-meta .stars { color: var(--c-gold); }
.detail-story-section { margin-bottom: 24px; }
.detail-story-section h3 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 10px; color: var(--c-primary); }
.detail-story-section p { font-size: 15px; line-height: 1.8; color: var(--c-text); }
.detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.detail-tag { padding: 4px 12px; background: var(--c-warm); border-radius: 50px; font-size: 12px; color: var(--c-text-light); }

/* ===== Favorites Page ===== */
.fav-empty {
  text-align: center; padding: 80px 20px;
}
.fav-empty .icon { font-size: 64px; color: var(--c-border); margin-bottom: 20px; }
.fav-empty h3 { font-family: var(--font-serif); font-size: 24px; margin-bottom: 12px; color: var(--c-dark); }
.fav-empty p { color: var(--c-text-light); margin-bottom: 24px; }

/* ===== Footer ===== */
.footer { background: var(--c-dark); color: rgba(255,255,255,0.7); padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand h3 { font-family: var(--font-serif); font-size: 24px; color: white; margin-bottom: 12px; }
.footer-brand .tagline { font-style: italic; color: var(--c-accent); font-size: 16px; margin-bottom: 12px; }
.footer-brand p { font-size: 14px; line-height: 1.7; }
.footer-brand .unesco { margin-top: 16px; padding: 8px 16px; background: rgba(212,162,76,0.1); border: 1px solid rgba(212,162,76,0.3); border-radius: var(--radius-sm); font-size: 12px; color: var(--c-gold); display: inline-flex; align-items: center; gap: 8px; }

.footer-col h5 { font-size: 14px; font-weight: 600; color: white; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { font-size: 14px; transition: var(--transition); cursor: pointer; }
.footer-col ul li a:hover { color: var(--c-accent); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; font-size: 13px; }

/* ===== Why Section ===== */
.why-section { background: var(--c-warm); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.why-card {
  background: var(--c-card); border-radius: var(--radius-lg); padding: 28px;
  transition: var(--transition); box-shadow: 0 4px 16px var(--c-shadow);
}
.why-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px var(--c-shadow-hover); }
.why-card .icon-box {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: white;
}
.why-card h4 { font-family: var(--font-serif); font-size: 18px; margin-bottom: 8px; color: var(--c-dark); }
.why-card p { font-size: 14px; color: var(--c-text-light); line-height: 1.6; }

/* ===== Floating AI Button ===== */
.floating-ai {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  box-shadow: 0 6px 20px rgba(200,85,61,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: white; cursor: pointer; transition: var(--transition);
}
.floating-ai:hover { transform: scale(1.1) rotate(5deg); }
.floating-ai::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--c-primary); opacity: 0.3;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.4); opacity: 0; } }

/* Pulse dot for hero badge */
.pulse {
  animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,168,95,0.6); }
  50% { box-shadow: 0 0 0 12px rgba(232,168,95,0); }
}

/* ===== Page Title ===== */
.page-title-bar {
  margin-top: 68px; padding: 60px 0 40px; text-align: center;
  background: linear-gradient(180deg, var(--c-warm), var(--c-cream));
}
.page-title-bar h1 { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 40px); color: var(--c-dark); margin-bottom: 8px; }
.page-title-bar p { font-size: 16px; color: var(--c-text-light); }

/* ===== Animations ===== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeInUp 0.6s ease forwards; }

/* ===== AI Services Grid (Homepage) ===== */
.ai-services-section {
  padding: var(--space-12) 0 var(--space-8);
  background: var(--c-cream);
}
.ai-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.ai-service-card {
  background: var(--c-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.ai-service-card:hover {
  border-color: var(--c-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ai-service-card .ai-svc-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: white;
}
.ai-service-card h4 {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  color: var(--c-dark); margin: 0;
}
.ai-service-card p {
  font-size: var(--text-sm); color: var(--c-text-muted); line-height: 1.5;
  margin: 0; flex: 1;
}

/* ===== Attractions Cards (Homepage) ===== */
.attr-section { padding: var(--space-12) 0; background: var(--c-warm); }
.attr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.attr-card {
  background: var(--c-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: all var(--transition-base);
}
.attr-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
}
.attr-card-img {
  height: 200px; overflow: hidden; position: relative;
}
.attr-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.attr-card:hover .attr-card-img img { transform: scale(1.05); }
.attr-card-body {
  padding: var(--space-4);
}
.attr-card-body h5 {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  color: var(--c-card-text); margin-bottom: var(--space-1);
}
.attr-card-body .attr-location {
  font-size: var(--text-xs); color: var(--c-card-muted);
  display: flex; align-items: center; gap: var(--space-1);
}
.attr-card-body .attr-desc {
  font-size: var(--text-sm); color: var(--c-card-muted); margin-top: var(--space-2);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.attr-card-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
  color: white; backdrop-filter: blur(4px);
}

/* ===== Events Cards (Homepage) ===== */
.events-home-section { padding: var(--space-12) 0; }
.events-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.event-card-home {
  background: var(--c-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-card-border);
  padding: var(--space-5);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.event-card-home:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.event-card-home .event-date-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-3);
}
.event-card-home .event-date-badge.upcoming { background: rgba(124,58,237,0.2); color: #A78BFA; }
.event-card-home .event-date-badge.ongoing { background: rgba(52,211,153,0.2); color: #6EE7B7; }
.event-card-home .event-date-badge.festival { background: rgba(251,191,36,0.2); color: #FCD34D; }
.event-card-home h5 {
  font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600;
  margin-bottom: var(--space-2); color: var(--c-card-text);
}
.event-card-home .event-venue {
  font-size: var(--text-sm); color: var(--c-card-muted);
  display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2);
}
.event-card-home .event-date-text {
  font-size: var(--text-sm); color: var(--c-accent); font-weight: 500;
}

/* ===== Hotels Cards (Homepage) ===== */
.hotels-home-section { padding: var(--space-12) 0; background: var(--c-warm); }
.hotels-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.hotel-card {
  background: var(--c-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border: 1px solid var(--c-card-border);
  cursor: pointer;
  transition: all var(--transition-base);
}
.hotel-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.hotel-card-img {
  height: 180px; background: #252a3a;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; overflow: hidden; position: relative;
}
.hotel-card-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.hotel-card-body {
  padding: var(--space-4);
}
.hotel-card-body h5 {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  margin-bottom: var(--space-1); color: var(--c-card-text);
}
.hotel-card-body .hotel-area {
  font-size: var(--text-xs); color: var(--c-card-muted);
}
.hotel-card-body .hotel-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-2);
}
.hotel-card-body .hotel-stars {
  color: var(--c-accent); font-size: var(--text-sm);
}
.hotel-card-body .hotel-price {
  font-size: var(--text-sm); font-weight: 600; color: var(--c-primary);
}

/* ===== Shopping Cards (Homepage) ===== */
.shops-home-section { padding: var(--space-12) 0; }
.shops-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.shop-card {
  background: var(--c-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-card-border);
  padding: var(--space-5);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all var(--transition-base);
}
.shop-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.shop-card .shop-type-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-3);
  background: rgba(200, 85, 61, 0.2); color: var(--c-accent);
}
.shop-card h5 {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  margin-bottom: var(--space-1); color: var(--c-card-text);
}
.shop-card .shop-area {
  font-size: var(--text-xs); color: var(--c-card-muted);
}

/* ===== Travel Info Cards ===== */
.info-section { padding: var(--space-12) 0; background: var(--c-warm); }
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.info-card {
  background: var(--c-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  cursor: pointer;
}
.info-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-border-strong);
}
.info-card .info-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: white; margin-bottom: var(--space-3);
}
.info-card h5 {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  margin-bottom: var(--space-1);
}
.info-card p {
  font-size: var(--text-sm); color: var(--c-text-muted); line-height: 1.5;
}

/* ===== CTA Banner ===== */
.cta-banner {
  padding: var(--space-16) 0;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent-dark) 100%);
  color: white; text-align: center;
}
.cta-banner h2 {
  font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700;
  color: white; margin-bottom: var(--space-3);
}
.cta-banner p {
  font-size: var(--text-lg); color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-8); max-width: 600px; margin-left: auto; margin-right: auto;
}
.cta-banner .btn-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: white; color: var(--c-primary);
  padding: 16px 36px; border-radius: var(--radius-full);
  font-size: var(--text-base); font-weight: 700;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: all var(--transition-base);
}
.cta-banner .btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* ===== Responsive: AI Services ===== */
@media (max-width: 1024px) {
  .ai-services-grid { grid-template-columns: repeat(2, 1fr); }
  .attr-grid { grid-template-columns: repeat(2, 1fr); }
  .events-home-grid { grid-template-columns: repeat(2, 1fr); }
  .hotels-home-grid { grid-template-columns: repeat(2, 1fr); }
  .shops-home-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ai-services-grid { grid-template-columns: 1fr; }
  .attr-grid { grid-template-columns: 1fr; }
  .events-home-grid { grid-template-columns: 1fr; }
  .hotels-home-grid { grid-template-columns: 1fr; }
  .shops-home-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .cta-banner h2 { font-size: var(--text-2xl); }
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .navbar-links { display: none; }
  .navbar-toggle { display: flex; }
  .navbar-links.mobile-open {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; background: var(--c-cream); padding: 16px;
    border-bottom: 1px solid var(--c-border); gap: 0;
  }
  .navbar-links.mobile-open a { padding: 12px 16px; width: 100%; border-radius: var(--radius-sm); }
  .navbar-links.mobile-open a:hover { background: var(--c-warm); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .stats-bar-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hero-stats { gap: 24px; }
  .hero-stat-num { font-size: 26px; }
  .section { padding: 56px 0; }
  .rec-filter-row { grid-template-columns: 1fr; }
  .ranking-item { flex-wrap: wrap; }
  .map-controls { max-width: 180px; }
  .detail-content { padding: 20px; }
  .floating-ai { width: 48px; height: 48px; font-size: 18px; bottom: 16px; right: 16px; }
}

/* Leaflet custom marker */
.custom-marker {
  background: var(--c-primary); width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.custom-marker span { transform: rotate(45deg); display: block; text-align: center; line-height: 22px; font-size: 12px; color: white; }

/* ========================================
   UPGRADED STYLES — Perfect Level
   ======================================== */

/* Hero Entry Points */
.hero-entry-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  max-width: 900px;
}
.hero-entry-card {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  color: #fff;
}
.hero-entry-card:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.hero-entry-card .entry-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin: 0 auto 14px;
  background: rgba(255,255,255,0.2);
}
.hero-entry-card h4 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.hero-entry-card p { font-size: 13px; opacity: 0.85; line-height: 1.5; }

/* Floating AI Chat Widget */
.floating-chat-widget {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
}
.chat-widget-btn {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-teal));
  color: #fff; border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(200,85,61,0.4);
  transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.chat-widget-btn:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(200,85,61,0.5); }
.chat-widget-btn .chat-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c-primary);
  animation: chatPulse 2s infinite;
}
@keyframes chatPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}
.chat-widget-panel {
  position: absolute;
  bottom: 76px; right: 0;
  width: 380px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.chat-widget-panel.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.chat-widget-header {
  background: linear-gradient(135deg, var(--c-primary), var(--c-teal));
  color: #fff; padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
}
.chat-widget-header .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.chat-widget-header .info h5 { font-size: 15px; font-weight: 600; }
.chat-widget-header .info .status { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 5px; }
.chat-widget-header .status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.chat-widget-header .close-btn {
  margin-left: auto; background: rgba(255,255,255,0.15); border: none;
  color: #fff; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 14px; transition: background 0.2s;
}
.chat-widget-header .close-btn:hover { background: rgba(255,255,255,0.3); }
.chat-widget-messages {
  height: 360px; overflow-y: auto; padding: 16px;
  background: #f8f6f3;
  display: flex; flex-direction: column; gap: 12px;
}
.chat-widget-messages .ai-msg { display: flex; gap: 10px; }
.chat-widget-messages .ai-msg.user { flex-direction: row-reverse; }
.chat-widget-messages .ai-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
}
.chat-widget-messages .ai-avatar.bot { background: var(--c-primary); }
.chat-widget-messages .ai-avatar.user { background: var(--c-navy); }
.chat-widget-messages .ai-bubble {
  background: #fff; padding: 10px 14px; border-radius: 14px 14px 14px 4px;
  font-size: 13px; line-height: 1.6; color: var(--c-text);
  max-width: 75%; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.chat-widget-messages .ai-msg.user .ai-bubble {
  background: var(--c-primary); color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.chat-widget-input {
  padding: 12px 16px; border-top: 1px solid #eee;
  display: flex; gap: 8px; background: #fff;
}
.chat-widget-input input {
  flex: 1; border: 1px solid #e0ddd8; border-radius: 24px;
  padding: 10px 16px; font-size: 13px; outline: none;
  transition: border-color 0.2s;
}
.chat-widget-input input:focus { border-color: var(--c-primary); }
.chat-widget-input button {
  background: var(--c-primary); color: #fff; border: none;
  width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; font-size: 14px; transition: background 0.2s;
}
.chat-widget-input button:hover { background: var(--c-primary-dark, #a04430); }
.chat-widget-suggestions {
  padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px; background: #fff;
}
.chat-widget-suggestions button {
  background: #f0ede8; border: none; border-radius: 14px;
  padding: 6px 12px; font-size: 12px; cursor: pointer;
  color: var(--c-text); transition: all 0.2s;
}
.chat-widget-suggestions button:hover { background: var(--c-primary); color: #fff; }
.typing-indicator { display: flex; gap: 4px; padding: 8px 14px; }
.typing-indicator span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-light);
  animation: typingBounce 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* Restaurant Tags */
.rest-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rest-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.rest-tag.traveler { background: #fef3c7; color: #92400e; }
.rest-tag.hidden { background: #ede9fe; color: #5b21b6; }
.rest-tag.traditional { background: #fee2e2; color: #991b1b; }
.rest-tag.michelin { background: #fef3c7; color: #92400e; }
.rest-tag.family { background: #d1fae5; color: #065f46; }
.rest-tag.romantic { background: #fce7f3; color: #9f1239; }
.rest-tag.budget { background: #d1fae5; color: #065f46; }
.rest-tag.fine { background: #f3e8ff; color: #6b21a8; }
.rest-tag.historic { background: #fef3c7; color: #92400e; }
.rest-tag.quick { background: #e0f2fe; color: #075985; }
.rest-tag.english-menu {
  background: #dbeafe; color: #1e40af;
}
.rest-card-info-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--c-text-light);
  margin-top: 4px;
}
.rest-card-info-row i { width: 16px; color: var(--c-primary); }

/* Data Insights Page */
.insights-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; margin-bottom: 40px;
}
.insight-stat-card {
  background: var(--c-card); border-radius: var(--radius-lg);
  padding: 24px 20px; text-align: center;
  box-shadow: 0 4px 16px var(--c-shadow);
  transition: transform 0.3s ease;
}
.insight-stat-card:hover { transform: translateY(-4px); }
.insight-stat-card .icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; margin: 0 auto 12px;
}
.insight-stat-card .num { font-size: 28px; font-weight: 700; color: var(--c-dark); font-family: var(--font-serif); }
.insight-stat-card .label { font-size: 13px; color: var(--c-text-light); margin-top: 4px; }

.chart-container {
  background: var(--c-card); border-radius: var(--radius-lg);
  padding: 28px; margin-bottom: 24px;
  box-shadow: 0 4px 16px var(--c-shadow);
}
.chart-container h4 {
  font-family: var(--font-serif); font-size: 20px;
  color: var(--c-dark); margin-bottom: 6px;
}
.chart-container .chart-desc { font-size: 14px; color: var(--c-text-light); margin-bottom: 20px; }
.chart-wrapper { position: relative; height: 300px; }
.chart-wrapper.doughnut { display: flex; align-items: center; gap: 30px; }
.chart-wrapper.doughnut canvas { max-width: 260px; }
.chart-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.chart-legend-item { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.chart-legend-item .dot { width: 12px; height: 12px; border-radius: 4px; }
.chart-legend-item .pct { margin-left: auto; font-weight: 600; color: var(--c-dark); }

.trending-list { display: flex; flex-direction: column; gap: 10px; }
.trending-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #f8f6f3; border-radius: 12px;
  transition: all 0.2s;
}
.trending-item:hover { background: #f0ede8; transform: translateX(4px); }
.trending-rank {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.trending-rank.r1 { background: #f59e0b; }
.trending-rank.r2 { background: #9ca3af; }
.trending-rank.r3 { background: #cd7f32; }
.trending-rank.r4, .trending-rank.r5, .trending-rank.r6, .trending-rank.r7, .trending-rank.r8 { background: #e0ddd8; color: var(--c-text); }
.trending-info { flex: 1; }
.trending-info h6 { font-size: 14px; font-weight: 600; color: var(--c-dark); }
.trending-info .meta { font-size: 12px; color: var(--c-text-light); }
.trending-trend { font-size: 18px; }

/* About Macau Page */
.about-hero {
  position: relative; padding: 120px 0 60px;
  background: linear-gradient(135deg, #1a3a2e 0%, #2d5a3d 50%, #c8553d 100%);
  color: #fff; text-align: center;
}
.about-hero h1 { font-family: var(--font-serif); font-size: 42px; margin-bottom: 12px; }
.about-hero .subtitle { font-size: 18px; opacity: 0.9; }
.about-intro {
  max-width: 800px; margin: 0 auto; padding: 40px 24px;
  font-size: 16px; line-height: 1.9; color: var(--c-text);
}
.about-facts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 48px;
}
.about-fact-card {
  background: var(--c-card); border-radius: var(--radius-lg);
  padding: 20px; text-align: center;
  box-shadow: 0 4px 12px var(--c-shadow);
  border-top: 3px solid var(--c-primary);
}
.about-fact-card .label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text-light); margin-bottom: 8px; }
.about-fact-card .value { font-size: 16px; font-weight: 600; color: var(--c-dark); }
.about-districts { display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; }
.about-district-card {
  background: var(--c-card); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: 0 4px 16px var(--c-shadow);
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start;
}
.about-district-card .district-num {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; font-family: var(--font-serif);
}
.about-district-card h4 { font-family: var(--font-serif); font-size: 22px; color: var(--c-dark); margin-bottom: 8px; }
.about-district-card p { font-size: 14px; line-height: 1.7; color: var(--c-text); margin-bottom: 10px; }
.about-district-card .best-for {
  display: inline-block; padding: 4px 14px; background: var(--c-warm);
  border-radius: 20px; font-size: 13px; color: var(--c-primary); font-weight: 500;
}
.about-heritage {
  background: var(--c-warm); border-radius: var(--radius-lg);
  padding: 36px; border-left: 5px solid var(--c-gold);
}
.about-heritage h3 { font-family: var(--font-serif); font-size: 24px; color: var(--c-dark); margin-bottom: 16px; }
.about-heritage p { font-size: 15px; line-height: 1.9; color: var(--c-text); }
.unesco-badge-large {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; background: var(--c-gold); color: #fff;
  border-radius: 30px; font-size: 14px; font-weight: 600;
  margin-bottom: 20px;
}

/* Social Share */
.share-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: #fff;
  font-size: 15px; transition: all 0.25s;
}
.share-btn:hover { transform: scale(1.1); }
.share-btn.facebook { background: #1877f2; }
.share-btn.twitter { background: #1da1f2; }
.share-btn.wechat { background: #07c160; }
.share-btn.copy { background: var(--c-text-light); }
.share-btn.copy.copied { background: #10b981; }
.share-label { font-size: 14px; color: var(--c-text-light); font-weight: 500; margin-right: 4px; }

/* Reviews */
.reviews-section { margin-top: 32px; }
.reviews-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.reviews-header h3 { font-family: var(--font-serif); font-size: 22px; color: var(--c-dark); }
.reviews-summary {
  display: flex; align-items: center; gap: 16px;
  background: var(--c-warm); border-radius: var(--radius-md);
  padding: 16px 24px; margin-bottom: 20px;
}
.reviews-summary .big-rating { font-size: 36px; font-weight: 700; color: var(--c-dark); font-family: var(--font-serif); }
.reviews-summary .stars-text { font-size: 14px; color: var(--c-text-light); }
.review-card {
  background: var(--c-card); border-radius: var(--radius-md);
  padding: 20px; margin-bottom: 12px;
  box-shadow: 0 2px 8px var(--c-shadow);
}
.review-card .review-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.review-card .review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.review-card .review-author { font-size: 14px; font-weight: 600; color: var(--c-dark); }
.review-card .review-country { font-size: 12px; color: var(--c-text-light); }
.review-card .review-text { font-size: 14px; line-height: 1.7; color: var(--c-text); }
.review-card .review-date { font-size: 12px; color: var(--c-text-light); margin-top: 8px; }

/* Journey Planner Upgrade */
.journey-options-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.journey-option-card {
  border: 2px solid #e0ddd8; border-radius: var(--radius-md);
  padding: 20px 16px; text-align: center; cursor: pointer;
  transition: all 0.25s; background: var(--c-card);
}
.journey-option-card:hover { border-color: var(--c-primary); background: #fff; }
.journey-option-card.selected {
  border-color: var(--c-primary); background: var(--c-primary);
  color: #fff;
}
.journey-option-card.selected .icon { background: rgba(255,255,255,0.2); }
.journey-option-card.selected p { color: rgba(255,255,255,0.85); }
.journey-option-card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--c-warm); color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin: 0 auto 10px;
  transition: all 0.25s;
}
.journey-option-card h5 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.journey-option-card p { font-size: 12px; color: var(--c-text-light); }

.journey-result-card {
  background: var(--c-card); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 16px;
  box-shadow: 0 4px 16px var(--c-shadow);
  display: grid; grid-template-columns: 120px 1fr;
  gap: 0;
}
.journey-result-card .stop-img {
  height: 100%; min-height: 120px;
}
.journey-result-card .stop-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.journey-result-card .stop-body { padding: 16px 20px; }
.journey-result-card .stop-num {
  display: inline-block; padding: 2px 12px;
  background: var(--c-primary); color: #fff;
  border-radius: 20px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.journey-result-card h5 { font-size: 16px; font-weight: 600; color: var(--c-dark); margin-bottom: 4px; }
.journey-result-card .stop-desc { font-size: 13px; color: var(--c-text-light); line-height: 1.5; }
.journey-result-card .stop-meta {
  display: flex; gap: 16px; margin-top: 8px; font-size: 12px;
}
.journey-result-card .stop-meta span { display: flex; align-items: center; gap: 4px; color: var(--c-primary); }

.journey-summary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-teal));
  border-radius: var(--radius-lg); padding: 24px;
  color: #fff; text-align: center; margin-bottom: 24px;
}
.journey-summary .summary-stats {
  display: flex; justify-content: center; gap: 32px;
}
.journey-summary .summary-stat .num { font-size: 28px; font-weight: 700; font-family: var(--font-serif); }
.journey-summary .summary-stat .label { font-size: 12px; opacity: 0.85; }

/* Scroll Reveal Animation */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Nav additional */
.nav-about { display: none; }
@media(min-width: 1100px) { .nav-about { display: inline-block; } }

/* Insights nav */
.nav-insights { display: none; }
@media(min-width: 1100px) { .nav-insights { display: inline-block; } }

/* Scrollbar styling for chat */
.chat-widget-messages::-webkit-scrollbar { width: 5px; }
.chat-widget-messages::-webkit-scrollbar-track { background: transparent; }
.chat-widget-messages::-webkit-scrollbar-thumb { background: #d0cdc8; border-radius: 10px; }

/* Hero scroll indicator */
.hero-scroll-indicator {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7); font-size: 24px;
  animation: scrollBounce 2s infinite; cursor: pointer;
}

/* ===== Today's Pick ===== */
.today-pick-section {
  position: relative;
  z-index: 3;
  margin-top: -60px;
  padding: 0 var(--space-4) var(--space-12);
  display: flex;
  justify-content: center;
}
.today-pick-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--c-border);
  display: flex;
  max-width: 720px;
  width: 100%;
  overflow: hidden;
  transition: all var(--transition-base);
}
.today-pick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(45,27,20,0.18);
}
.today-pick-img {
  width: 220px; min-height: 200px;
  flex-shrink: 0;
  background: var(--c-warm);
  display: flex; align-items: center; justify-content: center;
}
.today-pick-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.today-pick-body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.today-pick-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); font-weight: 600;
  color: var(--c-primary); text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: var(--space-2);
}
.today-pick-label .badge {
  background: var(--c-primary); color: white;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 10px; letter-spacing: 1px;
}
.today-pick-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 700;
  color: var(--c-dark); margin-bottom: var(--space-2);
  line-height: 1.2;
}
.today-pick-body p {
  font-size: var(--text-sm); color: var(--c-text-muted);
  line-height: 1.6; margin-bottom: var(--space-4);
}
.today-pick-meta {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap;
}
.today-pick-meta .rating {
  display: flex; align-items: center; gap: 4px;
  font-weight: 600; color: var(--c-gold); font-size: var(--text-sm);
}
.today-pick-meta .price {
  font-size: var(--text-sm); color: var(--c-text);
  font-weight: 500;
}
.today-pick-meta .reviews {
  font-size: var(--text-xs); color: var(--c-text-muted);
}

@media (max-width: 640px) {
  .today-pick-section { margin-top: -40px; padding-bottom: var(--space-8); }
  .today-pick-card { flex-direction: column; }
  .today-pick-img { width: 100%; height: 180px; }
  .today-pick-body { padding: var(--space-4); }
  .today-pick-body h3 { font-size: var(--text-xl); }
}
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-entry-points { grid-template-columns: 1fr; gap: 12px; }
  .chat-widget-panel { width: calc(100vw - 32px); right: -8px; }
  .insights-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-wrapper.doughnut { flex-direction: column; }
  .about-district-card { grid-template-columns: 1fr; }
  .journey-result-card { grid-template-columns: 1fr; }
  .journey-result-card .stop-img { min-height: 140px; }
  .journey-summary .summary-stats { gap: 20px; }
}

/* ===== Community Feed ===== */
.community-page { max-width: 680px; margin: 0 auto; padding: 40px 20px 80px; }
.community-header { text-align: center; margin-bottom: 32px; }
.community-header h2 { font-family: var(--font-serif); font-size: 32px; color: var(--c-dark); margin-bottom: 8px; }
.community-header p { color: #6B7280; font-size: 16px; }
.community-create-bar { display: flex; gap: 12px; align-items: center; background: #fff; border: 2px solid #e5e0d8; border-radius: 16px; padding: 16px 20px; margin-bottom: 32px; cursor: pointer; transition: all 0.2s; }
.community-create-bar:hover { border-color: var(--c-primary); box-shadow: 0 4px 16px rgba(200,85,61,0.1); }
.community-create-bar .avatar-placeholder { width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; flex-shrink: 0; }
.community-create-bar span { color: #9CA3AF; font-size: 15px; flex: 1; }
.community-create-bar .cam-icon { color: var(--c-primary); font-size: 20px; }
.community-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid #f0ede6; padding-bottom: 12px; }
.community-tabs button { background: none; border: none; padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; transition: all 0.2s; font-family: var(--font-sans); }
.community-tabs button.active { background: var(--c-primary); color: #fff; }
.community-tabs button:hover:not(.active) { background: #f5f2ec; }

/* AI Tab buttons (dark background variant) */
.tabs-dark { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 12px; }
.tabs-dark button { background: rgba(255,255,255,0.08); border: none; padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.2s; font-family: var(--font-sans); }
.tabs-dark button.active { background: var(--c-primary); color: #fff; }
.tabs-dark button:hover:not(.active) { background: rgba(255,255,255,0.15); color: #fff; }

/* Post Card */
.post-card { background: #fff; border-radius: 20px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #f0ede6; }
.post-card-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.post-card-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.post-card-author-name { font-weight: 600; font-size: 15px; color: var(--c-dark); }
.post-card-author-meta { font-size: 13px; color: #9CA3AF; display: flex; align-items: center; gap: 8px; }
.post-card-verified { color: #3B82F6; font-size: 12px; }
.post-card-photos { display: grid; gap: 4px; }
.post-card-photos.single { grid-template-columns: 1fr; }
.post-card-photos.double { grid-template-columns: 1fr 1fr; }
.post-card-photos.triple { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.post-card-photos.triple img:first-child { grid-row: span 2; }
.post-card-photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.post-card-photos.single img { aspect-ratio: 16/10; }
.post-card-actions { display: flex; gap: 24px; padding: 12px 20px; border-top: 1px solid #f5f2ec; }
.post-card-action { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #6B7280; cursor: pointer; border: none; background: none; font-family: var(--font-sans); transition: color 0.2s; }
.post-card-action:hover { color: var(--c-primary); }
.post-card-action.liked { color: #EF4444; }
.post-card-action.liked i { font-weight: 900; }
.post-card-content { padding: 8px 20px 16px; }
.post-card-content .rating { color: #F59E0B; font-size: 14px; margin-bottom: 8px; }
.post-card-content .rating i { margin-right: 2px; }
.post-card-content .text { font-size: 15px; line-height: 1.6; color: #374151; margin-bottom: 8px; white-space: pre-line; }
.post-card-content .location { font-size: 13px; color: #6B7280; display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.post-card-content .location i { color: var(--c-primary); }
.post-card-content .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.post-card-content .tag { background: #f5f2ec; color: #6B7280; font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.post-card-time { font-size: 13px; color: #9CA3AF; padding: 0 20px 12px; }

/* Create Post Modal */
.create-post-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.create-post-modal { background: #fff; border-radius: 20px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 28px; }
.create-post-modal h3 { font-family: var(--font-serif); font-size: 22px; margin-bottom: 20px; color: var(--c-dark); }
.create-post-modal .form-group { margin-bottom: 16px; }
.create-post-modal label { display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.create-post-modal textarea { width: 100%; min-height: 100px; padding: 12px; border: 2px solid #e5e0d8; border-radius: 12px; font-family: var(--font-sans); font-size: 14px; resize: vertical; }
.create-post-modal textarea:focus { border-color: var(--c-primary); outline: none; }
.create-post-modal select { width: 100%; padding: 10px 12px; border: 2px solid #e5e0d8; border-radius: 10px; font-family: var(--font-sans); font-size: 14px; background: #fff; }
.create-post-modal select:focus { border-color: var(--c-primary); outline: none; }
.create-post-modal .rating-stars { display: flex; gap: 4px; font-size: 24px; color: #D1D5DB; cursor: pointer; }
.create-post-modal .rating-stars .active { color: #F59E0B; }
.create-post-modal .btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.create-post-modal .btn-cancel { padding: 10px 24px; border: 2px solid #e5e0d8; border-radius: 10px; background: #fff; cursor: pointer; font-family: var(--font-sans); font-weight: 500; }
.create-post-modal .btn-publish { padding: 10px 24px; border: none; border-radius: 10px; background: var(--c-primary); color: #fff; cursor: pointer; font-family: var(--font-sans); font-weight: 600; }
.create-post-modal .btn-publish:hover { background: var(--c-primary-dark); }

/* ===== Achievements ===== */
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 960px; margin: 0 auto; padding: 0 20px 60px; }
.achievement-card { background: #fff; border-radius: 16px; padding: 20px; display: flex; gap: 16px; align-items: center; border: 2px solid #f0ede6; transition: all 0.3s; }
.achievement-card.unlocked { border-color: var(--c-accent); background: linear-gradient(135deg, #fffaf5, #fff8f0); }
.achievement-card .ach-icon { width: 56px; height: 56px; border-radius: 16px; background: #f5f2ec; display: flex; align-items: center; justify-content: center; font-size: 28px; transition: all 0.3s; }
.achievement-card.unlocked .ach-icon { background: linear-gradient(135deg, var(--c-accent), var(--c-primary)); }
.achievement-card .ach-info { flex: 1; }
.achievement-card .ach-name { font-weight: 600; font-size: 16px; color: var(--c-dark); margin-bottom: 4px; }
.achievement-card .ach-desc { font-size: 13px; color: #6B7280; margin-bottom: 6px; }
.achievement-card .ach-reward { font-size: 12px; color: var(--c-accent); font-weight: 500; }
.achievement-card .ach-progress { margin-top: 8px; }
.achievement-card .ach-progress-bar { height: 6px; border-radius: 3px; background: #f0ede6; overflow: hidden; }
.achievement-card .ach-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--c-accent), var(--c-primary)); transition: width 0.5s; }
.achievement-card .ach-progress-text { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
.achievement-card .ach-status { font-size: 12px; font-weight: 600; }
.achievement-card .ach-status.unlocked { color: #10B981; }
.achievement-card .ach-status.locked { color: #9CA3AF; }

/* ===== Food Passport ===== */
.passport-container { max-width: 560px; margin: 0 auto; padding: 40px 20px 80px; }
.passport-header { text-align: center; margin-bottom: 32px; }
.passport-header h2 { font-family: var(--font-serif); font-size: 32px; color: var(--c-dark); margin-bottom: 8px; }
.passport-header p { color: #6B7280; }
.passport-progress { background: linear-gradient(135deg, var(--c-dark), #3A2A20); border-radius: 16px; padding: 24px; margin-bottom: 28px; text-align: center; color: #fff; }
.passport-progress .count { font-size: 48px; font-weight: 700; font-family: var(--font-serif); }
.passport-progress .label { font-size: 14px; opacity: 0.8; margin-top: 4px; }
.passport-progress .bar { height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; margin-top: 16px; overflow: hidden; }
.passport-progress .bar-fill { height: 100%; border-radius: 4px; background: #F59E0B; transition: width 0.5s; }
.passport-items { display: flex; flex-direction: column; gap: 12px; }
.passport-item { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px; padding: 16px 20px; border: 2px solid #f0ede6; transition: all 0.3s; }
.passport-item.checked { border-color: #10B981; background: #f0fdf4; }
.passport-item .pp-icon { font-size: 28px; }
.passport-item .pp-name { font-weight: 600; font-size: 16px; color: var(--c-dark); flex: 1; }
.passport-item .pp-check { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #D1D5DB; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.passport-item.checked .pp-check { background: #10B981; border-color: #10B981; color: #fff; }
.passport-item.checked .pp-check::after { content: '✓'; font-weight: 700; }

/* ===== User Profile ===== */
.profile-page { max-width: 680px; margin: 0 auto; padding: 40px 20px 80px; }
.profile-header-card { background: linear-gradient(135deg, var(--c-dark), #3A2A20); border-radius: 20px; padding: 32px 24px; text-align: center; color: #fff; margin-bottom: 24px; }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; margin: 0 auto 16px; border: 4px solid rgba(255,255,255,0.3); }
.profile-name { font-family: var(--font-serif); font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.profile-bio { font-size: 14px; opacity: 0.85; margin-bottom: 16px; }
.profile-stats { display: flex; justify-content: center; gap: 32px; }
.profile-stat { text-align: center; }
.profile-stat .num { font-size: 20px; font-weight: 700; }
.profile-stat .label { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.profile-section { margin-bottom: 24px; }
.profile-section h3 { font-family: var(--font-serif); font-size: 20px; color: var(--c-dark); margin-bottom: 16px; border-bottom: 2px solid #f5f2ec; padding-bottom: 8px; }

/* ===== Food Diary ===== */
.food-diary { max-width: 560px; margin: 0 auto; padding: 40px 20px 80px; }
.diary-day { background: #fff; border-radius: 16px; border: 2px solid #f0ede6; margin-bottom: 20px; overflow: hidden; }
.diary-day-header { background: var(--c-dark); color: #fff; padding: 12px 20px; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.diary-entry { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f5f2ec; }
.diary-entry:last-child { border-bottom: none; }
.diary-entry .entry-icon { font-size: 22px; }
.diary-entry .entry-name { flex: 1; font-size: 15px; color: var(--c-dark); font-weight: 500; }
.diary-entry .entry-time { font-size: 13px; color: #9CA3AF; }
.diary-entry .entry-check { color: #10B981; font-size: 18px; }

/* ===== AI Recommendation Panel (Upgraded) ===== */
.ai-recommend-panel { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #f0ede6; }
.ai-recommend-panel h3 { font-family: var(--font-serif); font-size: 22px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.ai-recommend-panel .field { margin-bottom: 16px; }
.ai-recommend-panel label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.ai-recommend-panel select, .ai-recommend-panel input { width: 100%; padding: 10px 12px; border: 2px solid #e5e0d8; border-radius: 10px; font-family: var(--font-sans); font-size: 14px; }
.ai-recommend-panel .btn-analyze { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.ai-recommend-results { margin-top: 24px; }
.ai-recommend-item { display: flex; gap: 14px; align-items: center; background: var(--c-warm); border-radius: 14px; padding: 14px; margin-bottom: 10px; border: 1px solid #f0ede6; }
.ai-recommend-item img { width: 70px; height: 70px; border-radius: 12px; object-fit: cover; }
.ai-recommend-item .info { flex: 1; }
.ai-recommend-item .info .name { font-weight: 600; font-size: 15px; color: var(--c-dark); }
.ai-recommend-item .info .why { font-size: 13px; color: #6B7280; margin-top: 2px; }
.ai-recommend-item .info .match { display: inline-block; font-size: 12px; background: #10B981; color: #fff; padding: 2px 8px; border-radius: 8px; margin-top: 4px; }

/* AI Photo Recognition */
.ai-photo-zone { border: 3px dashed #e5e0d8; border-radius: 16px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s; }
.ai-photo-zone:hover { border-color: var(--c-primary); background: #fffaf5; }
.ai-photo-zone i { font-size: 48px; color: var(--c-primary); margin-bottom: 12px; }
.ai-photo-zone p { color: #6B7280; font-size: 15px; }
.ai-photo-result { background: #f0fdf4; border-radius: 16px; padding: 24px; margin-top: 20px; border: 1px solid #bbf7d0; }

/* AI Review Summary */
.ai-review-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ai-review-positive { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px; padding: 20px; }
.ai-review-negative { background: #fef2f2; border: 1px solid #fecaca; border-radius: 14px; padding: 20px; }
.ai-review-summary h4 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.ai-review-positive h4 { color: #059669; }
.ai-review-negative h4 { color: #DC2626; }
.ai-review-summary ul { list-style: none; padding: 0; margin: 0; }
.ai-review-summary li { font-size: 14px; padding: 4px 0; color: #374151; }
.ai-review-summary li::before { content: '✓ '; color: #10B981; font-weight: 700; }
.ai-review-negative li::before { content: '⚠ '; color: #F59E0B; font-weight: 700; }

/* AI Translator */
.ai-translator { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.ai-translator textarea { width: 100%; min-height: 80px; padding: 12px; border: 2px solid #e5e0d8; border-radius: 12px; font-size: 15px; resize: vertical; margin-bottom: 12px; }
.ai-translator .result-box { background: var(--c-warm); border-radius: 12px; padding: 16px; margin-top: 12px; }
.ai-translator .result-box .translated { font-size: 16px; font-weight: 600; color: var(--c-dark); margin-bottom: 8px; }
.ai-translator .result-box .note { font-size: 13px; color: #6B7280; font-style: italic; }

/* ===== Smart Map Upgrades ===== */
.map-heat-legend { background: rgba(255,255,255,0.95); border-radius: 10px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.map-heat-legend h5 { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--c-dark); }
.map-heat-legend .bar { display: flex; align-items: center; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #fef3c7, #f59e0b, #ef4444); margin-bottom: 4px; }
.map-heat-legend .labels { display: flex; justify-content: space-between; font-size: 11px; color: #6B7280; }
.nearby-section { margin-top: 24px; }
.nearby-section h3 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 16px; }
.nearby-list { display: flex; flex-direction: column; gap: 10px; }
.nearby-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 14px; border: 1px solid #f0ede6; }
.nearby-item .distance { font-size: 13px; color: var(--c-primary); font-weight: 600; white-space: nowrap; }

/* ===== Smart Feed (Homepage) ===== */
.smart-feed-section { padding: 60px 0; }
.smart-feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.smart-feed-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #f0ede6; cursor: pointer; transition: all 0.3s; }
.smart-feed-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.smart-feed-card img { width: 100%; height: 200px; object-fit: cover; }
.smart-feed-card .card-body { padding: 16px; }
.smart-feed-card .card-body h4 { font-weight: 600; font-size: 16px; margin-bottom: 6px; color: var(--c-dark); }
.smart-feed-card .card-body p { font-size: 13px; color: #6B7280; line-height: 1.5; }
.smart-feed-card .card-body .meta { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; color: #9CA3AF; }
.smart-feed-card .why-tag { display: inline-block; font-size: 11px; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; padding: 3px 10px; border-radius: 10px; margin-top: 8px; }

/* ===== Social Platform Connect Bar ===== */
.social-connect-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 2px solid #f0ede6; border-radius: 16px; padding: 14px 20px; margin-bottom: 24px; }
.social-connect-label { font-size: 13px; font-weight: 600; color: var(--c-text-light); white-space: nowrap; }
.social-platform-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.social-connect-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #e5e0d8; background: #f8f6f3; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #9CA3AF; cursor: pointer; transition: all 0.25s; }
.social-connect-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background: #fffaf5; transform: scale(1.08); }
.social-connect-btn.connected { border-color: #10B981; color: #10B981; background: #f0fdf4; }
.social-connect-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #D1D5DB; border: 2px solid #fff; transition: all 0.25s; }
.social-connect-dot.active { background: #10B981; }
.btn-social-import { margin-left: auto; padding: 8px 16px; border-radius: 20px; border: none; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.25s; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); }
.btn-social-import:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200,85,61,0.3); }

/* Community Sort Tabs */
.community-sort-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.community-sort-tabs button { padding: 8px 18px; border-radius: 20px; border: 2px solid #f0ede6; background: #fff; font-size: 13px; font-weight: 500; color: #6B7280; cursor: pointer; transition: all 0.2s; font-family: var(--font-sans); }
.community-sort-tabs button.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.community-sort-tabs button:hover:not(.active) { border-color: var(--c-primary-light); color: var(--c-primary); }
.community-empty { text-align: center; padding: 60px 20px; }
.community-empty i { font-size: 48px; color: #e5e0d8; margin-bottom: 16px; }
.community-empty p { color: #6B7280; font-size: 15px; }

/* Platform Badges */
.platform-badge { font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.imported-badge { font-size: 11px; display: inline-flex; align-items: center; gap: 3px; background: #fef3c7; color: #92400e; padding: 1px 8px; border-radius: 10px; font-weight: 500; }

/* Create Post Platform Selector */
.form-platform-select { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.form-platform-chip { padding: 6px 14px; border-radius: 20px; border: 2px solid #e5e0d8; background: #fff; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 4px; font-family: var(--font-sans); }
.form-platform-chip:hover { border-color: var(--c-primary); }
.form-platform-chip.selected { border-color: var(--c-primary); background: var(--c-warm); color: var(--c-primary); }

/* ===== Upgraded Trip Planner (Timeline) ===== */
.trip-timeline { position: relative; padding-left: 32px; }
.trip-timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: #e5e0d8; }
.trip-stop { position: relative; margin-bottom: 24px; }
.trip-stop::before { content: ''; position: absolute; left: -23px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-primary); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c-primary); }
.trip-stop .time { font-size: 13px; font-weight: 700; color: var(--c-primary); margin-bottom: 4px; }
.trip-stop .card { background: #fff; border-radius: 14px; padding: 16px; border: 1px solid #f0ede6; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.trip-stop .card h5 { font-size: 16px; font-weight: 600; color: var(--c-dark); margin-bottom: 4px; }
.trip-stop .card .type-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 8px; margin-bottom: 6px; }
.trip-stop .card .type-badge.quick { background: #fef3c7; color: #92400e; }
.trip-stop .card .type-badge.sit { background: #dbeafe; color: #1e40af; }
.trip-stop .card .type-badge.must { background: #fce7f3; color: #9d174d; }
.trip-stop .card .walk { font-size: 12px; color: #6B7280; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.trip-summary-bar { display: flex; gap: 24px; background: linear-gradient(135deg, var(--c-dark), #3A2A20); border-radius: 16px; padding: 24px; color: #fff; margin-bottom: 28px; }
.trip-summary-bar .stat { text-align: center; flex: 1; }
.trip-summary-bar .stat .num { font-size: 24px; font-weight: 700; }
.trip-summary-bar .stat .lab { font-size: 12px; opacity: 0.7; }
.trip-budget-slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #10B981, #F59E0B, #EF4444); outline: none; }
.trip-budget-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary); cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

/* ===== Responsive Adjustments (Extended) ===== */
@media (max-width: 768px) {
  .community-page, .passport-container, .profile-page, .food-diary { padding: 24px 16px 60px; }
  .smart-feed-grid { grid-template-columns: 1fr; }
  .achievement-grid { grid-template-columns: 1fr; }
  .ai-review-summary { grid-template-columns: 1fr; }
  .profile-stats { gap: 20px; }
  .trip-summary-bar { flex-wrap: wrap; gap: 16px; }
  .social-connect-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .btn-social-import { margin-left: 0; }
}

/* ============================================
   NEW: Attractions Page Styles
   ============================================ */
.attraction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}
.attraction-card {
  background: var(--c-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 12px var(--c-shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.attraction-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px var(--c-shadow-hover);
  border-color: var(--c-primary-light);
}
.attraction-card-img {
  position: relative;
  height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attraction-card-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.attraction-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.attraction-card-body h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-card-text);
  margin-bottom: 8px;
  line-height: 1.4;
}
.attraction-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.attraction-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.attraction-badge.unesco {
  background: #fef3c7;
  color: #92400e;
}
.attraction-badge.photo {
  background: #fce7f3;
  color: #9d174d;
}
.attraction-desc {
  font-size: 13px;
  color: var(--c-text-light);
  line-height: 1.6;
  margin-bottom: 12px;
  flex: 1;
}
.attraction-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--c-text-light);
  margin-bottom: 8px;
}
.attraction-meta .rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: var(--c-gold);
}
.attraction-hours {
  font-size: 12px;
  color: var(--c-text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.attraction-hours i { color: var(--c-teal); }
.attraction-tips {
  font-size: 12px;
  color: var(--c-text-light);
  background: var(--c-warm);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}
.attraction-tips i { color: var(--c-accent); margin-top: 2px; }
.attraction-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.btn-nav-directions {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
  text-decoration: none;
}
.btn-nav-directions:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200,85,61,0.35);
}
.btn-nav-directions i { font-size: 12px; }
.btn-view-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--c-warm);
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--c-border);
  transition: var(--transition);
  cursor: pointer;
}
.btn-view-map:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* ============================================
   Attraction Image Carousel
   ============================================ */
.attr-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.attr-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.attr-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.attr-carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.attr-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.attr-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.3);
}
.attr-dot.active {
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
  transform: scale(1.2);
}
.attr-carousel-prev,
.attr-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.2s;
}
.attr-carousel:hover .attr-carousel-prev,
.attr-carousel:hover .attr-carousel-next {
  opacity: 1;
}
.attr-carousel-prev { left: 8px; }
.attr-carousel-next { right: 8px; }
.attr-carousel-prev:hover,
.attr-carousel-next:hover {
  background: rgba(0,0,0,0.6);
}
.attr-carousel-counter {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  pointer-events: none;
}

/* ============================================
   Event Card Enhanced Styles
   ============================================ */
.event-hot-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  animation: hotPulse 1.5s infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 16px rgba(239,68,68,0.8); }
}
.event-time-row,
.event-organizer-row {
  font-size: 13px;
  color: var(--c-card-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.event-time-row i { color: #F59E0B; }
.event-organizer-row i { color: #8B5CF6; }
.event-status-upcoming { background: rgba(124,58,237,0.2); color: #A78BFA; }
.event-status-ongoing { background: rgba(52,211,153,0.2); color: #6EE7B7; animation: eventPulse 2s infinite; }
.event-status-ended { background: rgba(107,114,128,0.2); color: #9CA3AF; }

/* ============================================
   NEW: Photo Spots Page Styles
   ============================================ */
.photospot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.photospot-card {
  background: var(--c-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 12px var(--c-shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.photospot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px var(--c-shadow-hover);
  border-color: var(--c-primary-light);
}
.photospot-card-visual {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.photospot-icon-big {
  font-size: 52px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
  transition: transform 0.4s ease;
}
.photospot-card:hover .photospot-icon-big {
  transform: scale(1.15);
}
.photospot-time-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.photospot-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.photospot-card-body h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: 6px;
}
.photospot-card-body p {
  font-size: 13px;
  color: var(--c-text-light);
  line-height: 1.6;
  margin-bottom: 12px;
}
.photospot-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ps-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--c-warm);
  color: var(--c-primary);
  border: 1px solid var(--c-border);
}

/* Shop badge */
.shop-cat-badge {
  background: #2D5A27;
  color: white;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
}

/* Image lazy loading styles — data URI placeholders load instantly */
img[loading="lazy"] {
  transition: opacity 0.5s ease;
}

.photospot-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.btn-share-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c-teal), #1a7a6e);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-share-photo:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(42,157,143,0.35);
}

/* ============================================
   NEW: Trip Planner Navigation & Actions
   ============================================ */
.trip-stop-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.btn-nav-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  cursor: pointer;
}
.btn-nav-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(200,85,61,0.3);
}
.btn-nav-mini i { font-size: 11px; }
.btn-call-rest {
  background: var(--c-warm);
  color: var(--c-teal);
  border: 1px solid var(--c-border);
}
.btn-call-rest:hover {
  background: var(--c-teal);
  color: #fff;
  border-color: var(--c-teal);
  box-shadow: 0 3px 12px rgba(42,157,143,0.25);
}
.trip-actions-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  padding: 20px;
  background: var(--c-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 12px var(--c-shadow);
  flex-wrap: wrap;
}
.btn-trip-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-sans);
}
.btn-trip-action:nth-child(1) {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
}
.btn-trip-action:nth-child(1):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,85,61,0.35);
}
.btn-trip-action:nth-child(2) {
  background: var(--c-warm);
  color: var(--c-primary);
  border: 2px solid var(--c-primary-light);
}
.btn-trip-action:nth-child(2):hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.btn-trip-action i { font-size: 15px; }

/* ============================================
   NEW: Toast Notification
   ============================================ */
.toast-msg {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--c-dark);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 9999;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90vw;
}
.toast-msg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: toastIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-msg i { font-size: 16px; color: var(--c-accent); }
@keyframes toastIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(80px); }
  60% { opacity: 1; transform: translateX(-50%) translateY(-6px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================
   NEW: Hero Stats (5-column support)
   ============================================ */
.hero-stats {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}
.hero-stat {
  text-align: center;
  min-width: 80px;
}
.hero-stat-num {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1.2;
}
.hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
}

/* ============================================
   NEW: Responsive Adjustments for New Features
   ============================================ */
@media (max-width: 768px) {
  .hero-stats { gap: 16px; }
  .hero-stat-num { font-size: 24px; }
  .hero-stat-label { font-size: 11px; }
  .attraction-grid { grid-template-columns: 1fr; }
  .photospot-grid { grid-template-columns: 1fr; }
  .attraction-actions { flex-direction: column; }
  .photospot-actions { flex-direction: column; }
  .btn-nav-directions, .btn-share-photo, .btn-view-map { width: 100%; }
  .trip-actions-bar { flex-direction: column; }
  .btn-trip-action { width: 100%; justify-content: center; }
  .trip-stop-actions { flex-direction: column; }
  .btn-nav-mini { width: 100%; justify-content: center; }
  .toast-msg { bottom: 20px; font-size: 13px; padding: 12px 20px; }
}

@media (max-width: 480px) {
  .hero-stats { gap: 10px; }
  .hero-stat-num { font-size: 20px; }
  .hero-stat { min-width: 60px; }
  .attraction-card-icon { width: 52px; height: 52px; font-size: 24px; }
  .photospot-icon-big { font-size: 40px; }
}

/* ============================================
   NEW: Events Page Styles
   ============================================ */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
}
.event-card {
  background: var(--c-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 12px var(--c-shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px var(--c-shadow-hover);
}
.event-card-header {
  position: relative;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #252a3a, #1a1f2e);
}
.event-card-header img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.event-icon-big {
  font-size: 52px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
.event-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.event-status-upcoming { background: #dbeafe; color: #1e40af; }
.event-status-ongoing { background: #d1fae5; color: #065f46; animation: eventPulse 2s infinite; }
.event-status-ended { background: #f3f4f6; color: #6b7280; }
@keyframes eventPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.event-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.event-category-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(200, 85, 61, 0.2);
  color: var(--c-accent);
  margin-bottom: 8px;
  width: fit-content;
}
.event-card-body h4 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-card-text);
  margin-bottom: 10px;
  line-height: 1.4;
}
.event-date-row,
.event-venue-row,
.event-price-row {
  font-size: 13px;
  color: var(--c-card-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.event-date-row i { color: var(--c-accent); }
.event-venue-row i { color: var(--c-teal); }
.event-price-row i { color: #10B981; }
.event-price-row .free { color: #10B981; font-weight: 700; }
.event-card-body p {
  font-size: 13px;
  color: var(--c-card-muted);
  line-height: 1.6;
  margin: 10px 0;
  flex: 1;
}
.event-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.evt-tag {
  font-size: 11px;
  color: var(--c-text-light);
  opacity: 0.7;
}
.event-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.event-actions .btn-nav-directions { flex: 1; }

/* ============================================
   NEW: Photo Gallery Styles
   ============================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.gallery-card {
  background: var(--c-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 8px var(--c-shadow);
  transition: var(--transition);
}
.gallery-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--c-shadow-hover); }
.gallery-card-img {
  height: 220px;
  overflow: hidden;
  background: var(--c-warm);
}
.gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-fallback {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: linear-gradient(135deg, var(--c-warm), #f0e6d3);
}
.gallery-card-info { padding: 14px 16px 16px; }
.gallery-caption { font-size: 14px; font-weight: 500; color: var(--c-dark); margin-bottom: 8px; }
.gallery-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--c-text-light);
  margin-bottom: 10px;
}
.gallery-meta span { display: flex; align-items: center; gap: 4px; }
.gallery-tag {
  background: var(--c-warm);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--c-primary);
}
.gallery-actions {
  display: flex;
  gap: 12px;
}
.mini-action {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--c-text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  transition: color 0.2s;
  font-family: var(--font-sans);
}
.mini-action:hover { color: var(--c-primary); }
.mini-action i { font-size: 14px; }
.upload-zone {
  border: 2px dashed var(--c-border);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  color: var(--c-text-light);
}
.upload-zone:hover { border-color: var(--c-primary); background: var(--c-warm); }

/* ============================================
   NEW: Cantonese Guide Styles
   ============================================ */
.cantonese-tip {
  background: linear-gradient(135deg, #fef3c7, #fef9e7);
  border: 1px solid #f59e0b33;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 14px;
  color: #92400e;
  margin-bottom: 28px;
}
.cantonese-section { margin-bottom: 36px; }
.cantonese-cat-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-border);
}
.cantonese-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.cantonese-card {
  background: var(--c-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  padding: 16px;
  transition: var(--transition);
}
.cantonese-card:hover { border-color: var(--c-primary-light); box-shadow: 0 2px 12px var(--c-shadow); }
.canto-phrase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.canto-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-dark);
  font-family: 'Noto Sans TC', 'Microsoft YaHei', sans-serif;
}
.canto-speak-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.canto-speak-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(200,85,61,0.3); }
.canto-speak-btn:active { transform: scale(0.95); }
.canto-jyutping {
  font-size: 14px;
  color: var(--c-teal);
  font-weight: 500;
  margin-bottom: 4px;
}
.canto-meaning {
  font-size: 13px;
  color: var(--c-text-light);
  line-height: 1.5;
}

/* ============================================
   NEW: Tools Page Styles
   ============================================ */
.tools-card {
  background: var(--c-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  padding: 28px;
  box-shadow: 0 2px 12px var(--c-shadow);
}
.tools-card h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: 12px;
  margin-top: 20px;
}
.tools-card h3:first-child { margin-top: 0; }
.tools-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-dark);
  margin-bottom: 8px;
}

/* Weather */
.weather-now {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 24px;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
.weather-icon-big { font-size: 56px; }
.weather-temp { font-size: 28px; font-weight: 700; color: var(--c-dark); }
.weather-detail { font-size: 13px; color: var(--c-text-light); margin-top: 4px; }
.forecast-row { display: flex; gap: 16px; margin-top: 12px; }
.forecast-day {
  flex: 1;
  text-align: center;
  padding: 12px;
  background: var(--c-warm);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.fc-icon { font-size: 28px; margin-bottom: 4px; }
.weather-tip-box {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--c-warm);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--c-text);
}
.weather-tip-box i { color: var(--c-accent); }

/* Transport */
.transport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.transport-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--c-warm);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--c-text);
}
.transport-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  background: var(--c-primary);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

/* Currency */
.currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.currency-item {
  padding: 12px;
  background: var(--c-warm);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-dark);
}

/* Emergency */
.emergency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.emergency-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--c-warm);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.em-icon { font-size: 28px; }

/* Shopping */
.shopping-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.shop-item {
  padding: 10px 14px;
  background: var(--c-warm);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--c-text);
}

/* ============================================
   NEW: Responsive Adjustments for New Pages
   ============================================ */
@media (max-width: 768px) {
  .event-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .cantonese-grid { grid-template-columns: 1fr; }
  .weather-now { flex-direction: column; text-align: center; }
  .forecast-row { flex-direction: column; }
  .tools-card { padding: 20px; }
  .currency-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== ITINERARY PAGE ===== */
.itin-hero {
  position: relative;
  background: linear-gradient(135deg, #166534 0%, #1a7a44 20%, #047857 50%, #0d9488 80%, #0e7490 100%);
  padding: 52px 48px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  margin-top: 64px;
}
.itin-hero::before {
  content: '';
  position: absolute;
  top: -50%; right: -15%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
  border-radius: 50%;
}
.itin-hero::after {
  content: '';
  position: absolute;
  bottom: -40%; left: -10%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  border-radius: 50%;
}
.itin-hero-content { position: relative; z-index: 1; }
.itin-pdf-btn {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #4338ca;
  font-weight: 700; font-size: 0.92rem; font-family: var(--font-sans, inherit);
  border: none; border-radius: 999px; padding: 11px 20px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); transition: transform .15s ease, box-shadow .15s ease;
}
.itin-pdf-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.24); }
.itin-pdf-btn i { color: #dc2626; }
.itin-hero-label {
  display: inline-block;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.itin-hero h1 {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.2;
  text-shadow: 0 2px 14px rgba(0,0,0,0.1);
}
.itin-hero-sub {
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
  margin-top: 8px;
}
.itin-hero-badges {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}
.itin-badge {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 16px 22px;
  text-align: center;
  min-width: 85px;
  color: #fff;
}
.itin-badge-val { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.itin-badge-lbl { font-size: 0.7rem; opacity: 0.7; margin-top: 3px; }

.itin-tabs-wrap {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 0 48px;
  margin-top: -18px;
  position: sticky;
  top: 64px;
  z-index: 99;
}
.itin-tab-btn {
  flex: 0 0 auto;
  min-width: 140px;
  padding: 13px 24px;
  border: none;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: 14px 14px 0 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
  text-align: center;
  line-height: 1.3;
}
.itin-tab-btn:hover { color: #166534; background: #fff; }
.itin-tab-btn.active {
  background: #fff;
  color: #166534;
  box-shadow: 0 -4px 18px rgba(22,101,52,0.1);
}
.itin-tab-day { font-size: 0.68rem; opacity: 0.55; display: block; font-weight: 500; }
.itin-tab-theme { font-size: 0.9rem; }

.itin-main-wrap {
  display: flex;
  gap: 0;
  padding: 0 48px 48px;
  min-height: calc(100vh - 280px);
}
.itin-timeline-col {
  flex: 0 0 52%;
  max-width: 52%;
  padding: 28px 20px 28px 0;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.itin-map-col {
  flex: 0 0 48%;
  max-width: 48%;
  position: sticky;
  top: 130px;
  height: calc(100vh - 180px);
}
#itinMap {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  box-shadow: 0 6px 32px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Timeline */
.itl-day-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1e1b4b;
  margin-bottom: 4px;
  padding-left: 36px;
}
.itl-day-desc {
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 22px;
  padding-left: 36px;
  line-height: 1.5;
}
.itl-timeline { position: relative; padding-left: 36px; }
.itl-timeline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, #e0e7ff, #ddd6fe, #fef3c7, #d1fae5);
  border-radius: 1px;
}
.itl-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
  border: 1.5px solid transparent;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.itl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.03);
  border-color: rgba(22,101,52,0.12);
}
.itl-card-active {
  border-color: #166534 !important;
  box-shadow: 0 6px 22px rgba(22,101,52,0.12), 0 2px 4px rgba(22,101,52,0.05) !important;
}

.itl-dot {
  position: absolute;
  left: -22px;
  top: 24px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 2;
  flex-shrink: 0;
}
.itl-dot-scenic   { background: linear-gradient(135deg, #6366f1, #818cf8); }
.itl-dot-food     { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.itl-dot-culture  { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.itl-dot-shopping { background: linear-gradient(135deg, #10b981, #34d399); }

.itl-time {
  flex-shrink: 0;
  min-width: 48px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6366f1;
  background: #eef2ff;
  padding: 3px 9px;
  border-radius: 7px;
  text-align: center;
  margin-top: 2px;
}
.itl-body { flex: 1; min-width: 0; }
/* Itinerary POI cover image — every itinerary card shows a themed cover */
.itl-card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
  display: block;
  background: #eef2ff;
}
@media (max-width: 640px) {
  .itl-card-img { height: 120px; }
}
.itl-name {
  font-size: 1rem;
  font-weight: 700;
  color: #1e1b4b;
  margin-bottom: 3px;
}
.itl-cat {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 5px;
  margin-bottom: 5px;
}
.itl-cat-scenic   { background: #eef2ff; color: #4f46e5; }
.itl-cat-food     { background: #fef3c7; color: #d97706; }
.itl-cat-culture  { background: #f3e8ff; color: #7c3aed; }
.itl-cat-shopping { background: #d1fae5; color: #059669; }

.itl-desc {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 7px;
}
.itl-meta {
  display: flex;
  gap: 12px;
  font-size: 0.7rem;
  color: #9ca3af;
}
.itl-meta span { display: flex; align-items: center; gap: 2px; }
.itl-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.itl-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 11px;
  border-radius: 7px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #4b5563;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  font-family: var(--font-sans);
}
.itl-action-btn:hover {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #166534;
}

/* Toast */
.itin-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #fff;
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 0.82rem;
  z-index: 9999;
  font-weight: 600;
  animation: itinToastIn 0.3s ease forwards, itinToastOut 0.4s ease 2s forwards;
}
@keyframes itinToastIn { from{opacity:0;top:65px} to{opacity:1;top:80px} }
@keyframes itinToastOut { from{opacity:1;top:80px} to{opacity:0;top:65px} }

/* Responsive */
@media (max-width: 1024px) {
  .itin-main-wrap { flex-direction: column; padding: 0 16px 32px; }
  .itin-timeline-col, .itin-map-col { flex: 1 1 100%; max-width: 100%; }
  .itin-map-col { position: relative; top: 0; height: 380px; margin-top: 20px; }
  .itin-tabs-wrap { padding: 0 16px; }
  .itin-tab-btn { min-width: 110px; padding: 10px 16px; }
  .itin-hero { flex-direction: column; text-align: center; padding: 40px 20px 32px; gap: 20px; }
  .itin-hero h1 { font-size: 1.8rem; }
  .itin-hero-badges { justify-content: center; }
  .itin-timeline-col { max-height: none; overflow-y: visible; }
}
@media (max-width: 640px) {
  .itin-hero { padding: 28px 14px; margin-top: 56px; }
  .itin-hero h1 { font-size: 1.4rem; }
  .itin-hero-badges { gap: 6px; }
  .itin-badge { padding: 10px 14px; min-width: 64px; }
  .itin-badge-val { font-size: 1.3rem; }
  .itin-tab-btn { min-width: 85px; padding: 8px 12px; font-size: 0.75rem; }
  .itl-card { padding: 12px 14px; }
  #itinMap { border-radius: 12px; }
}

/* ===== Featured Food Scroll ===== */
.food-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.food-scroll .food-card {
  background: var(--c-surface); 
  border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; 
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
}
.food-scroll .food-card:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--shadow-md);
  border-color: var(--c-border);
}
.food-scroll .food-card-img {
  position: relative; width: 100%; padding-top: 66%;
  background: var(--c-warm); overflow: hidden;
}
.food-scroll .food-card-img img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.5s var(--ease-out);
}
.food-scroll .food-card:hover .food-card-img img { transform: scale(1.06); }
.food-scroll .food-card-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.65); color: #FFD700;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.food-scroll .food-card-info { padding: var(--space-3) var(--space-4); }
.food-scroll .food-card-info h4 { 
  font-size: var(--text-sm); font-weight: 600; 
  margin: 0 0 4px; color: var(--c-text);
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
.food-scroll .food-card-price { font-size: var(--text-xs); color: var(--c-text-muted); }

/* ===== Section Alternate BG ===== */
.section-alt { background: var(--c-warm); }

/* ===== Restaurant Grid — Refined ===== */
.resto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}
.resto-card {
  background: var(--c-surface); 
  border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; 
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
}
.resto-card:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--shadow-md);
  border-color: var(--c-border);
}
.resto-card-img {
  position: relative; width: 100%; padding-top: 50%;
  background: var(--c-warm); overflow: hidden;
}
.resto-card-img img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  object-fit: cover; transition: transform 0.5s var(--ease-out);
}
.resto-card:hover .resto-card-img img { transform: scale(1.06); }
.resto-card-rating {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(0,0,0,0.65); color: #FFD700;
  padding: 5px 12px; border-radius: var(--radius-xs);
  font-size: var(--text-xs); font-weight: 700;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.resto-card-info { padding: var(--space-4); }
.resto-card-info h4 { 
  font-size: var(--text-base); font-weight: 600; 
  margin: 0 0 6px; color: var(--c-dark);
  font-family: var(--font-body); letter-spacing: -0.01em;
}
.resto-card-meta { 
  font-size: var(--text-xs); color: var(--c-text-muted); 
  display: block; margin-bottom: 8px; 
}
.resto-card-meta i { margin-right: 4px; }
.resto-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.resto-card-tags em {
  font-style: normal; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-xs);
  background: var(--c-warm); color: var(--c-primary);
}

/* ===== Category Pills — Refined ===== */
.cat-pills {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center;
}
.cat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  background: var(--c-surface); 
  border: 1.5px solid var(--c-border);
  cursor: pointer; transition: all var(--transition-fast);
  font-size: var(--text-sm); font-weight: 500;
}
.cat-pill:hover {
  border-color: var(--pill-color); 
  background: color-mix(in srgb, var(--pill-color) 6%, white);
  transform: translateY(-2px); 
  box-shadow: var(--shadow-sm);
}
.cat-pill-icon { font-size: 14px; color: var(--pill-color); width: 18px; text-align: center; }
.cat-pill-label { color: var(--c-text); font-weight: 500; }
.cat-pill-count { font-size: 11px; color: var(--c-text-muted); font-weight: 400; }

@media (max-width: 768px) {
  .resto-grid { grid-template-columns: 1fr; }
  .cat-pills { gap: 6px; }
  .cat-pill { padding: 8px 14px; font-size: 12px; }
}

/* ===== Generic Page Search — Refined ===== */
.rec-search-wrap { margin: 0 0 var(--space-6) 0; }
.rec-search-input {
  width: 100%;
  max-width: 500px;
  padding: 14px 20px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  outline: none;
  transition: all var(--transition-fast);
  background: var(--c-surface);
}
.rec-search-input:focus { 
  border-color: var(--c-primary); 
  box-shadow: 0 0 0 3px rgba(200,85,61,0.08);
}

/* ============================================
   HOMEPAGE SECTIONS — Refined Visual Hierarchy
   Hero > AI Planner > Today > Explore > Food > Attractions > Community
   ============================================ */

/* ===== AI Trip Planner — Floating Card ===== */
.ai-planner-section {
  padding: var(--space-20) 0;
  background: linear-gradient(180deg, var(--c-navy-deep) 0%, var(--c-navy) 40%, var(--c-cream) 100%);
  position: relative;
  margin-top: -1px;
}
.ai-planner-section .container {
  background: var(--c-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-12);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,0.04);
  max-width: 880px;
}
.ai-planner-header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.ai-planner-header .ai-icon-big {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-dark));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 26px; color: white;
  box-shadow: var(--shadow-glow);
}
.ai-planner-header h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 700; color: var(--c-dark); margin-bottom: var(--space-2);
}
.ai-planner-header p {
  font-size: var(--text-sm); color: var(--c-text-muted); max-width: 460px; margin: 0 auto;
  line-height: 1.65;
}
.ai-planner-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ai-planner-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.ai-planner-form .form-group label {
  font-size: 11px; font-weight: 700; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ai-planner-form .form-group input,
.ai-planner-form .form-group select {
  padding: 14px 16px; 
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-xs); 
  font-size: var(--text-sm);
  font-family: var(--font-body); 
  background: var(--c-cream);
  color: var(--c-text); 
  transition: all var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.ai-planner-form .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%238C7E73'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.ai-planner-form .form-group input:focus,
.ai-planner-form .form-group select:focus {
  border-color: var(--c-primary); 
  background: white;
  box-shadow: 0 0 0 3px rgba(200,85,61,0.08);
}
.ai-planner-cta {
  text-align: center;
  margin-bottom: var(--space-4);
}
.ai-planner-cta .btn-generate {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 44px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-dark));
  color: white; font-size: var(--text-base); font-weight: 700;
  border: none; cursor: pointer; 
  transition: all var(--transition-base);
  box-shadow: 0 4px 20px rgba(200,85,61,0.25);
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
.ai-planner-cta .btn-generate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200,85,61,0.35);
}
/* AI Planner Result */
.ai-planner-result { display: none; }
.ai-planner-result.show { display: block; }
.ai-itinerary-timeline {
  display: flex; flex-direction: column; gap: 0;
  position: relative; padding-left: 36px;
  margin-top: var(--space-6);
}
.ai-itinerary-timeline::before {
  content: ''; position: absolute; left: 15px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
  border-radius: 1px;
}
.ai-timeline-item {
  position: relative; padding: var(--space-4) var(--space-5); 
  margin-bottom: var(--space-3);
  background: var(--c-cream); 
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  transition: all var(--transition-fast);
}
.ai-timeline-item:hover {
  background: white; 
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}
.ai-timeline-item::before {
  content: ''; position: absolute; left: -27px; top: 24px;
  width: 12px; height: 12px; border-radius: 50%;
  background: white; border: 3px solid var(--c-primary);
  box-shadow: 0 0 0 4px rgba(200,85,61,0.08);
}
.ai-timeline-item .tl-time {
  font-size: var(--text-xs); font-weight: 700; color: var(--c-primary);
  margin-bottom: 2px; letter-spacing: 0.04em;
}
.ai-timeline-item .tl-title {
  font-weight: 600; font-size: var(--text-base); color: var(--c-dark);
  margin-bottom: 4px; font-family: var(--font-display); letter-spacing: -0.01em;
}
.ai-timeline-item .tl-desc {
  font-size: var(--text-sm); color: var(--c-text-muted); margin-bottom: 8px;
  line-height: 1.6;
}
.ai-timeline-item .tl-meta {
  display: flex; gap: var(--space-4); align-items: center;
  font-size: var(--text-xs); color: var(--c-text-muted);
}
.ai-timeline-item .tl-meta span {
  display: flex; align-items: center; gap: 4px;
}
.ai-timeline-item .tl-meta a {
  color: var(--c-teal); font-weight: 600;
  transition: color var(--transition-fast);
}
.ai-timeline-item .tl-meta a:hover { color: var(--c-teal-dark); }
.ai-trip-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin-top: var(--space-6); padding-top: var(--space-6); 
  border-top: 1px solid var(--c-border);
}
.ai-trip-stat {
  text-align: center;
}
.ai-trip-stat .stat-val {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: var(--c-primary);
}
.ai-trip-stat .stat-lbl {
  font-size: var(--text-xs); color: var(--c-text-muted);
  font-weight: 500;
}

/* ===== Today in Macau — Refined ===== */
.today-section {
  padding: var(--space-20) 0;
  background: var(--c-cream);
}
.today-event-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5); 
  margin-top: var(--space-8);
}
.today-event-card {
  display: flex; gap: var(--space-4); 
  background: var(--c-surface);
  border-radius: var(--radius-md); 
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  cursor: pointer; 
  transition: all var(--transition-base);
  align-items: center;
  border: 1px solid transparent;
}
.today-event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-border);
}
.today-event-date {
  flex-shrink: 0; width: 64px; text-align: center;
  background: var(--c-warm);
  border-radius: var(--radius-sm);
  padding: 10px 0;
}
.today-event-date .day {
  font-family: var(--font-display); 
  font-size: 1.8rem; font-weight: 700;
  color: var(--c-primary); line-height: 1;
}
.today-event-date .month {
  font-size: 11px; color: var(--c-text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.today-event-info h5 {
  font-size: var(--text-base); font-weight: 600; color: var(--c-dark);
  margin-bottom: 2px; font-family: var(--font-body); letter-spacing: -0.01em;
}
.today-event-info .venue {
  font-size: var(--text-xs); color: var(--c-text-muted);
}
.today-event-info .venue i { margin-right: 4px; color: var(--c-accent-dark); }
.today-event-badge {
  display: inline-block; padding: 3px 12px; border-radius: var(--radius-full);
  font-size: 10px; font-weight: 700; margin-top: 8px;
  letter-spacing: 0.05em;
}
.today-event-badge.upcoming { background: #EDE9FE; color: #7C3AED; }
.today-event-badge.ongoing { background: #DCFCE7; color: #16A34A; }

/* ===== Explore Top-Level Cards — Refined ===== */
.explore-top-section {
  padding: var(--space-20) 0;
  background: var(--c-surface);
}
.explore-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.explore-top-card {
  position: relative; border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s var(--ease-out);
  background: var(--c-cream);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: var(--space-8) var(--space-6);
  border: 1px solid var(--c-border);
}
.explore-top-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.explore-top-card .explore-icon-circle {
  width: 64px; height: 64px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: white; margin-bottom: var(--space-4);
  transition: transform 0.3s var(--ease-out);
}
.explore-top-card:hover .explore-icon-circle {
  transform: scale(1.12);
}
.explore-top-card h3 {
  font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 700; color: var(--c-dark); margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.explore-top-card .explore-count {
  font-size: var(--text-sm); color: var(--c-text-muted); 
  margin-bottom: var(--space-3); font-weight: 500;
}
.explore-top-card .explore-arrow-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; color: var(--c-primary);
  opacity: 0; transform: translateY(8px);
  transition: all 0.3s var(--ease-out);
}
.explore-top-card:hover .explore-arrow-link {
  opacity: 1; transform: translateY(0);
}

/* ===== Compact Food Section — Refined ===== */
.compact-food-section {
  padding: var(--space-20) 0;
  background: linear-gradient(180deg, var(--c-surface), var(--c-cream));
}
.compact-food-grid {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}

/* ===== Compact Attraction Section — Refined ===== */
.compact-attr-section {
  padding: var(--space-20) 0;
  background: var(--c-cream);
}
.compact-attr-grid {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.compact-attr-card {
  background: var(--c-surface); 
  border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border: 1px solid transparent;
}
.compact-attr-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-border);
}
.compact-attr-card .attr-img {
  aspect-ratio: 16/9; overflow: hidden;
  background: var(--c-warm);
}
.compact-attr-card .attr-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.compact-attr-card:hover .attr-img img { transform: scale(1.06); }
.compact-attr-card .attr-body {
  padding: var(--space-4);
}
.compact-attr-card .attr-body h5 {
  font-size: var(--text-base); font-weight: 600; color: var(--c-dark);
  margin-bottom: 2px; font-family: var(--font-body); letter-spacing: -0.01em;
}
.compact-attr-card .attr-body .attr-meta {
  font-size: var(--text-xs); color: var(--c-text-muted);
}

/* ===== Community Compact — Refined ===== */
.community-compact-section {
  padding: var(--space-20) 0 var(--space-24);
  background: var(--c-surface);
}
.community-compact-grid {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5); 
  margin-top: var(--space-8);
}
.community-compact-card {
  background: var(--c-cream); 
  border-radius: var(--radius-md);
  padding: var(--space-5); 
  transition: all var(--transition-base); 
  cursor: pointer;
  border: 1px solid var(--c-border);
}
.community-compact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
  background: var(--c-surface);
}
.community-compact-card .cc-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4);
}
.community-compact-card .cc-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-dark));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 700;
}
.community-compact-card .cc-name {
  font-size: var(--text-sm); font-weight: 600; color: var(--c-dark);
}
.community-compact-card .cc-time {
  font-size: var(--text-xs); color: var(--c-text-muted);
}
.community-compact-card .cc-content {
  font-size: var(--text-sm); color: var(--c-text); 
  line-height: 1.7; margin-bottom: var(--space-3);
}
.community-compact-card .cc-meta {
  display: flex; gap: var(--space-4); 
  font-size: var(--text-xs); color: var(--c-text-muted);
}
.community-compact-card .cc-meta span {
  display: flex; align-items: center; gap: 4px;
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 1024px) {
  .explore-top-grid { grid-template-columns: repeat(2, 1fr); }
  .compact-food-grid { grid-template-columns: repeat(2, 1fr); }
  .compact-attr-grid { grid-template-columns: repeat(2, 1fr); }
  .community-compact-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-planner-form { grid-template-columns: 1fr; }
  .ai-trip-summary { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
  .navbar-links a { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 768px) {
  .food-scroll { grid-template-columns: repeat(2, 1fr); }
  .resto-grid { grid-template-columns: 1fr; }
  .explore-top-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .explore-top-card { aspect-ratio: auto; min-height: 130px; padding: var(--space-6); }
  .explore-top-card .explore-icon-circle { width: 52px; height: 52px; font-size: 22px; }
  .compact-food-grid { grid-template-columns: repeat(2, 1fr); }
  .compact-attr-grid { grid-template-columns: repeat(2, 1fr); }
  .community-compact-grid { grid-template-columns: 1fr; }
  .ai-planner-section .container { padding: var(--space-8) var(--space-5); }
  .today-event-card { flex-direction: column; text-align: center; align-items: center; }
  .hero-stats { gap: var(--space-6); }
  .hero-stat-num { font-size: 1.5rem; }
  .section { padding: var(--space-12) 0; }
  .section-header h2 { font-size: 1.5rem; }
}
@media (max-width: 640px) {
  .explore-top-grid { grid-template-columns: 1fr; }
  .compact-food-grid { grid-template-columns: 1fr; }
  .compact-attr-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 0.95rem; }
  .hero-content { padding: 100px var(--space-4) 60px; }
}

/* ===== Image Consistency ===== */
.food-card-img img,
.resto-card-img img,
.compact-attr-card .attr-img img,
.ranking-img img {
  background: var(--c-warm);
}
.food-card-img img,
.compact-attr-card .attr-img img {
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ===== Footer — Refined ===== */
.footer {
  background: var(--c-dark);
  color: rgba(255,255,255,0.65);
  padding: var(--space-16) 0 var(--space-8);
  font-size: var(--text-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}
.footer-brand h3 {
  font-family: var(--font-display); font-size: 1.4rem;
  color: white; margin-bottom: var(--space-2);
}
.footer-brand .tagline {
  color: var(--c-accent); font-size: var(--text-sm);
  margin-bottom: var(--space-3); font-weight: 500;
}
.footer-brand p {
  font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--space-4);
  color: rgba(255,255,255,0.5);
}
.footer-brand .unesco {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.06); padding: 10px 16px;
  border-radius: var(--radius-xs); font-size: var(--text-xs);
  border: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .unesco i { color: var(--c-gold); }
.footer-col h5 {
  color: white; font-size: var(--text-sm); font-weight: 700;
  margin-bottom: var(--space-4); letter-spacing: 0.02em;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-col ul li a {
  color: rgba(255,255,255,0.5); cursor: pointer;
  transition: color var(--transition-fast);
  font-size: var(--text-sm);
  display: flex; align-items: center; gap: 8px;
}
.footer-col ul li a:hover { color: white; }
.footer-col ul li a i { font-size: 12px; opacity: 0.6; }
.footer-bottom {
  text-align: center; padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
  font-size: var(--text-xs);
}

/* ===== Floating Chat Widget — Refined ===== */
.floating-chat-widget {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
}
.chat-widget-btn {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-dark));
  color: white; font-size: 24px; display: flex;
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(200,85,61,0.25);
  cursor: pointer; transition: all var(--transition-base);
  position: relative;
}
.chat-widget-btn:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-xl), 0 0 40px rgba(200,85,61,0.35);
}
.chat-pulse {
  position: absolute; inset: -4px; border-radius: 22px;
  border: 2px solid var(--c-accent);
  animation: pulse 2s ease-out infinite;
  opacity: 0;
}

/* ===== TRAVEL INFO PAGE ===== */
.info-quick-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.info-nav-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}
.info-nav-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-primary);
  transform: translateY(-2px);
}
.info-nav-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: white;
  margin-bottom: var(--space-3);
}
.info-nav-card h5 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: 4px;
}
.info-nav-card p {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  line-height: 1.5;
}

/* Info Detail Section */
.info-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.info-section-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: white;
  flex-shrink: 0;
}
.info-section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.info-detail-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}

/* Weather Table */
.weather-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
}
.weather-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.weather-table th {
  background: var(--c-warm);
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-text-light);
}
.weather-table td {
  padding: 10px 14px;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-light);
}
.weather-table tr.best-month {
  background: rgba(22,163,74,0.06);
}
.weather-table tr.best-month td {
  color: #16A34A;
  font-weight: 500;
}

/* Season Cards */
.info-season-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.info-season-card {
  background: var(--c-warm);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: 13px;
  color: var(--c-text-light);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}
.info-season-card i { font-size: 22px; }
.info-season-card.spring i { color: #22C55E; }
.info-season-card.summer i { color: #F59E0B; }
.info-season-card.autumn i { color: #F97316; }
.info-season-card.winter i { color: #3B82F6; }

/* Tip Box */
.info-tip-box {
  background: var(--c-warm);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--c-text-light);
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.info-tip-box i { color: var(--c-primary); margin-top: 2px; }
.info-tip-box strong { color: var(--c-text); }

/* Currency Rate Grid */
.currency-rate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.currency-rate-item {
  background: var(--c-warm);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cr-flag { font-size: 24px; }
.cr-code { font-size: 13px; font-weight: 600; color: var(--c-text); }
.cr-rate { font-size: 12px; color: var(--c-text-light); }
.currency-converter-box {
  background: var(--c-warm);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

/* Emergency Big Grid */
.emergency-big-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.emergency-big-item {
  background: var(--c-warm);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.eb-icon { font-size: 40px; flex-shrink: 0; }
.eb-content { font-size: 14px; color: var(--c-text-light); line-height: 1.6; }

/* Contact Item */
.info-contact-item {
  background: var(--c-warm);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: 14px;
  color: var(--c-text-light);
  line-height: 1.7;
}
.info-contact-item strong { color: var(--c-text); display: block; margin-bottom: 4px; }

/* Visa Badge */
.info-visa-badge {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  color: white;
}
.info-visa-badge.green { background: linear-gradient(135deg, #16A34A, #22C55E); }
.info-visa-badge.blue { background: linear-gradient(135deg, #2563EB, #3B82F6); }
.info-visa-badge.yellow { background: linear-gradient(135deg, #D97706, #F59E0B); }

/* Transport Card */
.info-transport-card {
  background: var(--c-warm);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.info-transport-card .it-icon { font-size: 28px; margin-bottom: 8px; }
.info-transport-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.info-transport-card p { font-size: 13px; color: var(--c-text-light); line-height: 1.6; margin: 0; }

/* Route Item */
.info-route-item {
  background: var(--c-warm);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--c-text-light);
  line-height: 1.5;
}

/* Stat Mini */
.info-stat-mini {
  background: var(--c-warm);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: 13px;
  color: var(--c-text-light);
  line-height: 1.6;
}
.info-stat-mini strong { display: block; color: var(--c-text); margin-bottom: 4px; font-size: 14px; }

/* Responsive for Travel Info */
@media (max-width: 1024px) {
  .info-quick-nav { grid-template-columns: repeat(2, 1fr); }
  .currency-rate-grid { grid-template-columns: repeat(2, 1fr); }
  .info-season-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .info-quick-nav { grid-template-columns: 1fr; }
  .currency-rate-grid { grid-template-columns: repeat(2, 1fr); }
  .info-season-grid { grid-template-columns: 1fr; }
  .emergency-big-grid { grid-template-columns: 1fr; }
  .info-detail-card { padding: var(--space-5); }
}

/* ===== AI HUB ===== */
.aihub-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 80px 0 60px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.aihub-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 20% 80%, rgba(200,85,61,0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(59,130,246,0.12) 0%, transparent 50%);
  animation: aihubGlow 8s ease-in-out infinite alternate;
}
@keyframes aihubGlow {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, -3%) scale(1.05); }
}
.aihub-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.9);
}
.aihub-hero h1 {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff, #e0d5c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aihub-hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  max-width: 650px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
/* Generator */
.aihub-generator {
  max-width: 750px;
  margin: 0 auto;
  text-align: left;
}
.aihub-gen-form {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 32px;
}
.aihub-gen-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.aihub-gen-field { flex: 1; min-width: 160px; }
.aihub-gen-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.aihub-gen-field input,
.aihub-gen-field select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 15px;
  font-family: var(--font-sans);
}
.aihub-gen-field select option { color: #333; background: #fff; }
.aihub-gen-field input::placeholder { color: rgba(255,255,255,0.35); }
.aihub-tag-group { display: flex; gap: 8px; flex-wrap: wrap; }
.aihub-tag {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.aihub-tag:hover { border-color: var(--c-primary); color: #fff; }
.aihub-tag.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.aihub-gen-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-primary), #e07b5a);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 8px;
  font-family: var(--font-sans);
}
.aihub-gen-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200,85,61,0.35);
}

/* Loading */
.aihub-loading { text-align: center; padding: 40px 20px; }
.aihub-loading-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: aihubSpin 0.8s linear infinite;
}
@keyframes aihubSpin { to { transform: rotate(360deg); } }
.aihub-loading p { color: rgba(255,255,255,0.7); font-size: 15px; }
.aihub-loading-steps { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 8px; min-height: 20px; }

/* Result Cards */
.aihub-day-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px;
  margin-top: 24px;
  backdrop-filter: blur(8px);
}
.aihub-day-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.aihub-day-header h3 { font-family: var(--font-serif); font-size: 22px; color: #fff; margin: 0; }
.aihub-day-num {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  padding: 4px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-right: 8px;
}
.aihub-day-weather {
  font-size: 14px; color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  padding: 6px 14px; border-radius: 20px;
}
/* Timeline */
.aihub-timeline { position: relative; padding-left: 24px; }
.aihub-timeline::before {
  content: '';
  position: absolute; left: 7px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
}
.aihub-tl-item { position: relative; margin-bottom: 20px; display: flex; gap: 16px; }
.aihub-tl-dot {
  position: absolute; left: -21px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  z-index: 1;
}
.aihub-tl-content { flex: 1; }
.aihub-tl-time { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.aihub-tl-icon { font-size: 15px; margin-right: 2px; }
.aihub-tl-title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.aihub-tl-desc { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; margin-bottom: 6px; }
.aihub-tl-meta { font-size: 12px; color: rgba(255,255,255,0.4); display: flex; gap: 16px; flex-wrap: wrap; }
.aihub-day-summary {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; gap: 24px; font-size: 13px; color: rgba(255,255,255,0.5);
}

/* Trip Summary */
.aihub-trip-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 24px;
}
.aihub-ts-stat { 
  background: rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}
.aihub-ts-val { font-size: 24px; font-weight: 700; color: var(--c-primary); margin-bottom: 4px; }
.aihub-ts-lbl { font-size: 12px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; }
.aihub-weather-tip {
  background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2);
  border-radius: 12px; padding: 14px 20px; margin-top: 16px;
  font-size: 14px; color: rgba(255,255,255,0.7);
}
.aihub-result-actions { text-align: center; margin-top: 24px; }

/* Feature Grid */
.aihub-section { background: var(--c-bg); padding: 60px 0; }
.aihub-section-title {
  font-family: var(--font-serif); font-size: 32px; text-align: center;
  color: var(--c-dark); margin-bottom: 40px;
}
.aihub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.aihub-card {
  background: var(--c-card); border-radius: 16px; padding: 24px;
  box-shadow: 0 2px 12px var(--c-shadow);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  position: relative; overflow: hidden;
}
.aihub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border-color: var(--card-color, var(--c-primary));
}
.aihub-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-color, var(--c-primary));
}
.aihub-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 12px;
}
.aihub-card-emoji { font-size: 28px; margin-bottom: 8px; }
.aihub-card h4 { font-family: var(--font-serif); font-size: 17px; color: var(--c-dark); margin-bottom: 6px; }
.aihub-card p { font-size: 13px; color: var(--c-text-light); line-height: 1.5; }

/* Modal */
.aihub-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.3s;
  padding: 20px;
}
.aihub-modal.show { opacity: 1; visibility: visible; }
.aihub-modal-content {
  background: #fff; border-radius: 20px; max-width: 700px; width: 100%;
  max-height: 85vh; overflow-y: auto; position: relative;
  padding: 40px 32px;
}
.aihub-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: #f0ede6; border: none; width: 36px; height: 36px;
  border-radius: 50%; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-light); transition: all 0.2s;
}
.aihub-modal-close:hover { background: var(--c-primary); color: #fff; }

/* Weather Card in modal */
.aihub-weather-card {
  background: linear-gradient(135deg, #eff6ff, #f0fdf4); border-radius: 16px; padding: 28px; text-align: center;
}
.aihub-wc-big { font-size: 32px; margin-bottom: 8px; color: var(--c-dark); }
.aihub-wc-label { font-size: 16px; font-weight: 600; color: var(--c-text-light); margin-bottom: 20px; }
.aihub-wc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; margin-bottom: 16px; }
.aihub-wc-grid div { background: #fff; border-radius: 10px; padding: 12px 16px; }
.aihub-wc-grid span { display: block; font-size: 12px; color: var(--c-text-light); margin-bottom: 2px; }
.aihub-wc-grid strong { font-size: 16px; color: var(--c-dark); }
.aihub-wc-tip { font-size: 14px; color: var(--c-text); background: #fff; border-radius: 10px; padding: 12px 16px; text-align: left; }

/* Budget Calculator */
.aihub-budget-calc { background: #f8f6f3; border-radius: 16px; padding: 24px; }
.aihub-bc-input { margin-bottom: 24px; }
.aihub-bc-input label { font-weight: 600; display: block; margin-bottom: 8px; color: var(--c-dark); }
.aihub-bc-input input[type="range"] { -webkit-appearance: none; height: 6px; background: #e0d5c0; border-radius: 3px; cursor: pointer; }
.aihub-bc-input input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--c-primary); border-radius: 50%; cursor: pointer; }
.aihub-bc-breakdown { }
.aihub-bc-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e5e0d8; font-size: 14px; }
.aihub-bc-total { display: flex; justify-content: space-between; padding: 14px 0; font-weight: 700; font-size: 16px; color: var(--c-primary); border-top: 2px solid var(--c-primary); margin-top: 4px; }

/* Mini Map */
.aihub-nearby-list { }
.aihub-nearby-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f8f6f3; border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
.aihub-nearby-item:hover { background: #f0ede6; }
.aihub-nearby-emoji { font-size: 20px; }
.aihub-nearby-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--c-dark); }
.aihub-nearby-arrow { color: var(--c-text-light); }

/* Landmark / Food recognition */
.aihub-landmark-rec { }
.aihub-lm-upload {
  border: 2px dashed #e5e0d8; border-radius: 16px; padding: 32px; text-align: center; cursor: pointer;
  transition: all 0.3s; margin-bottom: 20px; background: #fafaf8;
}
.aihub-lm-upload:hover { border-color: var(--c-primary); background: #fffaf5; }
.aihub-lm-quick { margin-top: 16px; }
.aihub-lm-tag {
  display: inline-block; padding: 6px 14px; background: #f0ede6; border-radius: 16px;
  font-size: 13px; cursor: pointer; margin: 4px; transition: all 0.2s;
}
.aihub-lm-tag:hover { background: var(--c-primary); color: #fff; }
.aihub-rec-result { }
.aihub-rec-header { font-size: 16px; margin-bottom: 12px; font-weight: 600; }
.aihub-rec-card { background: #f8f6f3; border-radius: 14px; padding: 20px; border: 1px solid #e5e0d8; }
.aihub-rec-card h4 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 8px; }
.aihub-rec-meta { font-size: 13px; color: var(--c-text-light); margin-top: 8px; }

/* Translator Interactive */
.aihub-translate { }
.aihub-tl-langs { display: flex; gap: 8px; margin-bottom: 16px; }
.aihub-tl-lang {
  padding: 8px 18px; border-radius: 20px; border: 1px solid #e5e0d8;
  background: #fff; cursor: pointer; font-size: 14px; transition: all 0.2s;
}
.aihub-tl-lang.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.aihub-tl-input {
  width: 100%; padding: 14px 18px; border: 2px solid #e5e0d8; border-radius: 14px;
  font-size: 18px; font-family: var(--font-sans); resize: vertical; min-height: 80px;
  transition: border-color 0.2s;
}
.aihub-tl-input:focus { border-color: var(--c-primary); outline: none; }
.aihub-tl-actions { display: flex; gap: 12px; margin-top: 12px; align-items: center; }
.aihub-tl-result { margin-top: 16px; min-height: 60px; }
.aihub-tl-result-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px; padding: 20px; }
.aihub-tl-from, .aihub-tl-to { font-size: 12px; color: var(--c-text-light); margin-bottom: 4px; }
.aihub-tl-from span, .aihub-tl-to span { font-weight: 600; color: var(--c-dark); }
.aihub-tl-text { font-size: 22px; font-weight: 600; color: var(--c-dark); margin: 8px 0; }
.aihub-tl-culture { font-size: 13px; color: var(--c-text); margin-top: 12px; padding-top: 12px; border-top: 1px solid #bbf7d0; line-height: 1.5; }
.aihub-tl-menu { margin-top: 24px; }
.aihub-tl-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aihub-tl-menu-item {
  background: #f8f6f3; border-radius: 12px; padding: 14px 16px; cursor: pointer;
  transition: all 0.2s; text-align: center;
}
.aihub-tl-menu-item:hover { background: #f0ede6; transform: translateY(-2px); }
.aihub-tl-mi-zh { display: block; font-size: 20px; font-weight: 600; color: var(--c-dark); margin-bottom: 4px; }
.aihub-tl-mi-en { display: block; font-size: 13px; color: var(--c-primary); }
.aihub-tl-mi-pt { display: block; font-size: 12px; color: var(--c-text-light); }

/* Cantonese Scenarios */
.aihub-canto-scenario { margin-bottom: 28px; }
.aihub-canto-scenario h4 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 14px; color: var(--c-dark); }
.aihub-canto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aihub-canto-card {
  background: #f8f6f3; border-radius: 14px; padding: 18px;
  border: 1px solid #f0ede6; transition: all 0.2s;
}
.aihub-canto-card:hover { border-color: var(--c-primary); }
.aihub-canto-text { font-size: 22px; font-weight: 600; color: var(--c-dark); margin-bottom: 4px; }
.aihub-canto-jyut { font-size: 13px; color: var(--c-primary); font-style: italic; margin-bottom: 6px; }
.aihub-canto-meaning { font-size: 12px; color: var(--c-text-light); line-height: 1.4; margin-bottom: 8px; }
.aihub-canto-speak {
  background: var(--c-primary); color: #fff; border: none; padding: 6px 14px;
  border-radius: 8px; font-size: 12px; cursor: pointer; transition: all 0.2s;
}
.aihub-canto-speak:hover { background: #a8432e; }

/* Diary */
.aihub-diary { background: #fdfcf9; border: 1px solid #e5e0d8; border-radius: 16px; overflow: hidden; }
.aihub-diary-header {
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(200,85,61,0.08));
  padding: 24px; text-align: center; border-bottom: 1px solid #e5e0d8;
}
.aihub-diary-date { font-size: 14px; color: var(--c-text-light); margin-bottom: 4px; }
.aihub-diary-header h3 { font-family: var(--font-serif); font-size: 24px; color: var(--c-dark); }
.aihub-diary-body { padding: 24px; }
.aihub-diary-body p { line-height: 1.8; color: var(--c-text); margin-bottom: 16px; font-size: 15px; }
.aihub-diary-highlights { padding: 0 24px 24px; }
.aihub-diary-highlights h4 { font-family: var(--font-serif); font-size: 18px; margin-bottom: 12px; }
.aihub-diary-highlights ul { list-style: none; padding: 0; }
.aihub-diary-highlights li { padding: 8px 0; border-bottom: 1px solid #f0ede6; font-size: 14px; color: var(--c-text); }
.aihub-diary-quote {
  margin: 0 24px 24px; padding: 20px; background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 12px; font-family: var(--font-serif); font-style: italic;
  font-size: 15px; color: #92400e; line-height: 1.7; text-align: center;
}

/* Daily Recommendations */
.aihub-daily { background: #f8f6f3; border-radius: 16px; padding: 24px; }
.aihub-daily-header { text-align: center; margin-bottom: 20px; }
.aihub-daily-date { font-size: 14px; color: var(--c-text-light); }
.aihub-daily-theme { font-size: 24px; font-weight: 700; color: var(--c-dark); margin-top: 4px; }
.aihub-daily-slot { margin-bottom: 20px; }
.aihub-daily-slot-header { font-size: 15px; font-weight: 700; color: var(--c-dark); margin-bottom: 12px; }
.aihub-daily-foods { display: flex; flex-direction: column; gap: 8px; }
.aihub-daily-food {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid #f0ede6;
}
.aihub-df-name { font-weight: 600; color: var(--c-dark); font-size: 15px; }
.aihub-df-meta { font-size: 13px; color: var(--c-text-light); }
.aihub-daily-activity { margin-bottom: 20px; }
.aihub-daily-attr { background: #fff; border-radius: 12px; padding: 16px; border: 1px solid #f0ede6; }
.aihub-daily-attr h5 { font-family: var(--font-serif); font-size: 17px; margin-bottom: 6px; color: var(--c-dark); }
.aihub-daily-attr p { font-size: 13px; color: var(--c-text-light); }
.aihub-daily-tip {
  background: #eff6ff; border-radius: 10px; padding: 14px 16px;
  font-size: 14px; color: #1e40af; line-height: 1.5;
}

/* Toast */
.aihub-toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: #333; color: #fff; padding: 12px 28px; border-radius: 28px;
  font-size: 14px; font-weight: 600; z-index: 99999; transition: transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.aihub-toast.show { transform: translateX(-50%) translateY(0); }

/* Responsive */
@media (max-width: 768px) {
  .aihub-hero h1 { font-size: 32px; }
  .aihub-trip-summary { grid-template-columns: repeat(2, 1fr); }
  .aihub-grid { grid-template-columns: 1fr; }
  .aihub-canto-grid, .aihub-tl-menu-grid { grid-template-columns: 1fr; }
  .aihub-modal-content { padding: 24px 18px; }
}
@media (max-width: 480px) {
  .aihub-gen-row { flex-direction: column; }
  .aihub-trip-summary { grid-template-columns: 1fr; }
  .aihub-day-header { flex-direction: column; align-items: flex-start; }
  .aihub-wc-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Detail Modal Styles (attraction/event)
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  animation: modalFadeIn 0.25s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
  background: var(--c-card);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  border: 1px solid var(--c-border);
  width: 92%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideUp 0.3s ease;
}
@keyframes modalSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.modal-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.modal-gallery img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.modal-gallery img:hover { transform: scale(1.03); }

@media (max-width: 480px) {
  .modal-content { width: 95%; max-height: 85vh; border-radius: 12px; }
  .modal-gallery { grid-template-columns: repeat(2, 1fr); }
  .modal-gallery img { height: 110px; }
}

/* ===== END ===== */

/* ===== Trip Preferences v2 — compact grouped layout (light+dark) ===== */
.tp-card {
  background: var(--c-card);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 4px 16px var(--c-shadow);
  margin-bottom: 24px;
}
.tp-heading {
  font-family: var(--font-serif);
  font-size: 20px;
  margin: 28px 0 16px;
  color: var(--c-dark);
}
.tp-group {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
  background: var(--c-warm);
  transition: border-color .2s;
}
.tp-group:last-child { margin-bottom: 0; }
.tp-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 14px;
}
.tp-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
.tp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.tp-field label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--c-dark);
  margin-bottom: 7px;
}
.tp-field select {
  width: 100%;
  padding: 9px 30px 9px 12px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 10px;
  font-size: 13.5px;
  font-family: var(--font-sans);
  background: var(--c-cream);
  color: var(--c-text);
  appearance: none;
  -webkit-appearance: none;
  --tp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C7E73' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-image: var(--tp-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color .2s;
}
html[data-theme="dark"] .tp-field select {
  --tp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A79A8F' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tp-field select:hover { border-color: var(--c-primary); }
.tp-field select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(224,122,98,0.15); }
.tp-field input[type="range"] {
  width: 100%;
  accent-color: var(--c-primary);
  cursor: pointer;
}
.tp-range-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
}
.tp-range-row span { font-size: 12px; color: var(--c-text-light); }
.tp-range-row b { font-weight: 700; font-size: 15px; color: var(--c-primary); }
.tp-variety { display: flex; flex-direction: column; justify-content: flex-end; }
.tp-field .tp-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--c-cream);
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s;
}
.tp-field .tp-toggle-row:hover { border-color: var(--c-primary); }
.tp-field .tp-toggle-row input { display: none; }
.tp-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--c-border-strong);
  transition: background .25s;
  flex-shrink: 0;
}
.tp-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tp-field .tp-toggle-row input:checked + .tp-toggle-track { background: var(--c-primary); }
.tp-field .tp-toggle-row input:checked + .tp-toggle-track::after { transform: translateX(16px); }
.tp-toggle-text { font-size: 13px; color: var(--c-text); line-height: 1.35; }
.tp-toggle-text b { display: block; font-size: 13px; color: var(--c-dark); font-weight: 600; }
@media (max-width: 640px) {
  .tp-grid { grid-template-columns: 1fr; }
  .tp-card { padding: 16px; }
}