/* ═══════════════════════════════════════════════
   EXPLORE SRI LANKA — Multi-Page SPA styles
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-deep:      #030712;
  --bg-dark:      #0a0f1e;
  --gold:         #c9a227;
  --gold-light:   #e8c547;
  --teal:         #00d4aa;
  --coral:        #ff6b6b;
  --purple:       #7c3aed;
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.10);
  --glass-hover:  rgba(255,255,255,0.08);
  --text-primary: #f0f4ff;
  --text-muted:   #94a3b8;
  --text-dim:     #64748b;
  --radius:       16px;
  --radius-lg:    24px;
  --transition:   all 0.35s cubic-bezier(0.4,0,0.2,1);
  --nav-h:        70px;
  --font-display: 'Playfair Display', serif;
  --font-body:    'Outfit', sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  overflow: hidden;        /* ← no body scroll; pages scroll internally */
  line-height: 1.6;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ── UTILITY ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.hidden { display: none !important; }

.gradient-text {
  background: linear-gradient(135deg, var(--gold), var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.glass-card:hover {
  background: var(--glass-hover);
  border-color: rgba(201,162,39,0.28);
  box-shadow: 0 8px 40px rgba(201,162,39,0.08);
  transform: translateY(-3px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), #e8a020);
  color: #000; font-family: var(--font-body); font-weight: 600;
  font-size: .95rem; padding: .8rem 2rem; border: none;
  border-radius: 50px; cursor: pointer; transition: var(--transition);
  letter-spacing: .03em; box-shadow: 0 4px 20px rgba(201,162,39,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,162,39,.5); filter: brightness(1.1); }

.btn-ghost {
  background: transparent; color: var(--text-primary);
  font-family: var(--font-body); font-weight: 500; font-size: .95rem;
  padding: .8rem 2rem; border: 1px solid var(--glass-border);
  border-radius: 50px; cursor: pointer; transition: var(--transition);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 20px rgba(201,162,39,.2); }

.section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(201,162,39,0.1); border: 1px solid rgba(201,162,39,0.25);
  padding: .35rem 1rem; border-radius: 50px; margin-bottom: 1.2rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3rem); font-weight: 700;
  line-height: 1.15; margin-bottom: 1rem;
}
.section-sub { color: var(--text-muted); font-size: 1.05rem; max-width: 560px; margin-bottom: 2.5rem; }

/* ═══════════════ NAVBAR ═══════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  display: flex; align-items: center; padding: 0 2.5rem;
  height: var(--nav-h);
  background: rgba(3,7,18,0.75);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-border);
}
.navbar.scrolled { background: rgba(3,7,18,0.95); box-shadow: 0 4px 30px rgba(0,0,0,.5); }

.nav-logo { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.logo-icon { font-size: 1.6rem; }
.logo-text { font-size: 1.05rem; font-weight: 400; color: var(--text-primary); }
.logo-text strong { font-weight: 700; color: var(--gold); }

.nav-links { display: flex; list-style: none; gap: .2rem; margin: 0 auto; }
.nav-link {
  display: block; text-decoration: none; cursor: pointer;
  color: var(--text-muted); font-size: .9rem; font-weight: 500;
  padding: .45rem 1rem; border-radius: 8px; transition: var(--transition);
  user-select: none;
}
.nav-link:hover, .nav-link.active { color: var(--text-primary); background: var(--glass-bg); }
.nav-link.active { color: var(--gold); }

.nav-actions { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }

.btn-signin {
  background: linear-gradient(135deg,var(--gold),#e8a020); color: #000;
  font-family: var(--font-body); font-weight: 600; font-size: .85rem;
  padding: .5rem 1.3rem; border: none; border-radius: 50px; cursor: pointer; transition: var(--transition);
}
.btn-signin:hover { filter: brightness(1.15); transform: translateY(-1px); }

.cart-icon {
  cursor: pointer; font-size: 1.2rem; padding: .4rem .7rem;
  border-radius: 8px; transition: var(--transition);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.cart-icon:hover { background: var(--glass-hover); }
.cart-count {
  background: var(--coral); color: #fff; font-size: .65rem; font-weight: 700;
  padding: .1rem .35rem; border-radius: 50px; margin-left: .2rem; vertical-align: super;
}

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .5rem; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: var(--transition); }

/* ═══════════════ SIDEBAR ═══════════════ */
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 1100; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.sidebar-overlay.active { opacity: 1; pointer-events: all; }
.sidebar {
  position: fixed; top: 0; left: 0; width: 280px; height: 100vh;
  background: rgba(10,15,30,.97); backdrop-filter: blur(30px);
  z-index: 1200; padding: 1.5rem;
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(0.4,0,0.2,1);
  border-right: 1px solid var(--glass-border);
}
.sidebar.open { transform: translateX(0); }
.sidebar-header {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 2.5rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--glass-border);
}
.sidebar-close {
  margin-left: auto; background: none; border: none;
  color: var(--text-muted); font-size: 1.1rem; cursor: pointer;
  padding: .3rem .6rem; border-radius: 6px; transition: var(--transition);
}
.sidebar-close:hover { color: var(--coral); }
.sidebar-links { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.sidebar-link {
  display: block; text-decoration: none; cursor: pointer; user-select: none;
  color: var(--text-muted); font-size: 1.05rem; font-weight: 500;
  padding: .75rem 1rem; border-radius: 10px; transition: var(--transition);
}
.sidebar-link:hover { background: var(--glass-bg); color: var(--gold); }

/* ═══════════════════════════════════════
   PAGE SYSTEM — the core SPA mechanism
════════════════════════════════════════ */
#pageWrapper {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  overflow: hidden;          /* clip; individual pages scroll */
}

.page {
  position: absolute;
  inset: 0;
  overflow-y: auto;          /* each page scrolls independently */
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity .4s cubic-bezier(0.4,0,0.2,1),
              transform .4s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}

.page.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* ═══════════════ HOME PAGE ═══════════════ */
.hero {
  position: relative; min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; padding: 4rem 2rem 3rem;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .5;
  animation: drift 12s ease-in-out infinite alternate;
}
.orb1 { width: 500px; height: 500px; background: radial-gradient(circle,rgba(201,162,39,.35),transparent); top: -150px; left: -100px; }
.orb2 { width: 600px; height: 600px; background: radial-gradient(circle,rgba(0,212,170,.2),transparent); bottom: -200px; right: -150px; animation-delay: -6s; }
.orb3 { width: 300px; height: 300px; background: radial-gradient(circle,rgba(124,58,237,.25),transparent); top: 40%; left: 60%; animation-delay: -3s; }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,20px) scale(1.1); } }

.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); background: rgba(201,162,39,.1); border: 1px solid rgba(201,162,39,.3);
  padding: .4rem 1.2rem; border-radius: 50px; margin-bottom: 1.8rem;
}
.badge-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; animation: pulse-dot 2s ease infinite; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.6)} 50%{box-shadow:0 0 0 6px rgba(201,162,39,0)} }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem,7vw,5.5rem); font-weight: 700;
  line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -.02em;
}
.hero-title em { font-style: italic; color: var(--teal); }
.hero-subtitle { font-size: clamp(1rem,1.8vw,1.15rem); color: var(--text-muted); line-height: 1.7; margin-bottom: 2.5rem; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3.5rem; }
.hero-stats { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.stat { text-align: center; }
.stat-num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--gold); }
.stat-label { display: block; font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.stat-divider { width: 1px; height: 40px; background: var(--glass-border); }

/* fade-up animations */
.animate-fade-up { opacity: 0; transform: translateY(30px); animation: fadeUp .8s cubic-bezier(0.4,0,0.2,1) forwards; }
.delay-1{animation-delay:.2s}.delay-2{animation-delay:.4s}.delay-3{animation-delay:.6s}.delay-4{animation-delay:.8s}
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* intro section */
.intro-section { padding: 4rem 0 3rem; }
.intro-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.intro-card { padding: 2rem 1.5rem; text-align: center; }
.intro-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; filter: drop-shadow(0 0 10px rgba(201,162,39,.4)); }
.intro-card h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .6rem; }
.intro-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.6; }

/* quick nav tiles */
.quick-nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 1rem; margin-top: .5rem; }
.qnav-card {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.1rem 1.2rem; cursor: pointer; border-radius: var(--radius);
}
.qnav-icon { font-size: 1.5rem; }
.qnav-label { font-size: .9rem; font-weight: 600; flex: 1; }
.qnav-arrow { color: var(--gold); font-weight: 700; transition: var(--transition); }
.qnav-card:hover .qnav-arrow { transform: translateX(4px); }

/* ═══════════════ INNER PAGES LAYOUT ═══════════════ */
.page-inner { min-height: 100%; display: flex; flex-direction: column; }

/* colourful header band for non-home pages */
.page-header-band {
  position: relative; padding: 3.5rem 0 2.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border-bottom: 1px solid var(--glass-border);
  overflow: hidden;
}
.page-header-orb {
  position: absolute; width: 500px; height: 300px; border-radius: 50%;
  filter: blur(80px); opacity: .55; top: -80px; right: -80px;
  pointer-events: none;
}
.page-body { flex: 1; padding: 3rem 2rem 4rem; }

/* ═══════════════ PLACES ═══════════════ */
.places-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 1.5rem; }
.place-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; aspect-ratio: 4/3;
}
.place-img-wrap { position: absolute; inset: 0; overflow: hidden; }
.place-img-wrap img { width:100%; height:100%; object-fit:cover; transition: transform .6s ease; filter: brightness(.75); }
.place-card:hover .place-img-wrap img { transform: scale(1.1); filter: brightness(.55); }
.place-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 60%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
}
.place-tag {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(201,162,39,.15); border: 1px solid rgba(201,162,39,.3);
  padding: .25rem .7rem; border-radius: 50px; margin-bottom: .6rem; width: fit-content;
}
.place-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: .4rem; }
.place-desc { font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.5; max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.place-card:hover .place-desc { max-height: 100px; }
.place-cta { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; font-size: .82rem; font-weight: 600; color: var(--gold); opacity: 0; transform: translateY(8px); transition: var(--transition); }
.place-card:hover .place-cta { opacity: 1; transform: translateY(0); }

/* ═══════════════ GUIDES ═══════════════ */
.guides-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1.5rem; }
.guide-card { padding: 2rem 1.5rem; text-align: center; cursor: pointer; position: relative; overflow: hidden; }
.guide-card::before { content:''; position: absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg,var(--gold),var(--teal)); opacity:0; transition:var(--transition); }
.guide-card:hover::before { opacity: 1; }
.guide-avatar { width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid var(--glass-border); margin:0 auto 1rem; display:block; transition:var(--transition); }
.guide-card:hover .guide-avatar { border-color: var(--gold); }
.guide-name { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin-bottom:.3rem; }
.guide-specialty { font-size:.82rem; color:var(--teal); font-weight:500; margin-bottom:.6rem; }
.guide-stars { color:var(--gold); font-size:.9rem; margin-bottom:.5rem; }
.guide-rating-text { font-size:.82rem; color:var(--text-muted); margin-bottom:.8rem; }
.guide-langs { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-bottom:1rem; }
.lang-tag { font-size:.72rem; color:var(--text-muted); background:var(--glass-bg); border:1px solid var(--glass-border); padding:.15rem .6rem; border-radius:50px; }
.guide-price { font-size:1.1rem; font-weight:700; color:var(--gold); margin-bottom:1rem; }
.guide-price span { font-size:.78rem; font-weight:400; color:var(--text-muted); }
.guide-btn { width:100%; background:transparent; border:1px solid var(--gold); color:var(--gold); font-family:var(--font-body); font-size:.85rem; font-weight:600; padding:.6rem 1.2rem; border-radius:50px; cursor:pointer; transition:var(--transition); }
.guide-btn:hover { background:var(--gold); color:#000; }

/* ═══════════════ EVENTS ═══════════════ */
.events-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap: 1.5rem; }
.event-card { overflow: hidden; cursor: default; }
.event-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .5s ease; }
.event-card:hover .event-card-img { transform: scale(1.04); }
.event-card-body { padding: 1.5rem; }
.event-type-badge { display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .7rem; border-radius:50px; margin-bottom:.8rem; }
.event-title { font-family:var(--font-display); font-size:1.15rem; font-weight:700; margin-bottom:.5rem; }
.event-meta { display:flex; flex-direction:column; gap:.3rem; margin-bottom:1rem; }
.event-meta-item { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-muted); }
.event-desc { font-size:.88rem; color:var(--text-muted); line-height:1.6; margin-bottom:1.2rem; }
.event-map-btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:var(--teal); background:rgba(0,212,170,.08); border:1px solid rgba(0,212,170,.2); padding:.4rem .9rem; border-radius:50px; cursor:pointer; text-decoration:none; transition:var(--transition); }
.event-map-btn:hover { background:rgba(0,212,170,.15); }

/* ═══════════════ SHOP ═══════════════ */
.shop-filter { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.filter-btn { background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-muted); font-family:var(--font-body); font-size:.85rem; font-weight:500; padding:.45rem 1.1rem; border-radius:50px; cursor:pointer; transition:var(--transition); }
.filter-btn:hover, .filter-btn.active { background:rgba(201,162,39,.15); border-color:var(--gold); color:var(--gold); }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; }
.product-card { overflow:hidden; cursor:pointer; }
.product-img-wrap { position:relative; aspect-ratio:1; overflow:hidden; }
.product-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.08); }
.product-badge-new { position:absolute; top:.7rem; right:.7rem; font-size:.65rem; font-weight:700; text-transform:uppercase; background:var(--coral); color:#fff; padding:.2rem .55rem; border-radius:50px; }
.product-body { padding:1.2rem; }
.product-category { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); margin-bottom:.4rem; }
.product-name { font-size:.95rem; font-weight:600; color:var(--text-primary); margin-bottom:.4rem; line-height:1.4; }
.product-price { font-size:1.1rem; font-weight:700; color:var(--gold); margin-bottom:.8rem; }
.product-price .orig-price { font-size:.8rem; font-weight:400; color:var(--text-dim); text-decoration:line-through; margin-left:.4rem; }
.add-cart-btn { width:100%; background:linear-gradient(135deg,var(--gold),#e8a020); color:#000; font-family:var(--font-body); font-size:.82rem; font-weight:600; padding:.55rem 1rem; border:none; border-radius:50px; cursor:pointer; transition:var(--transition); }
.add-cart-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* cart sidebar */
.cart-sidebar {
  position: fixed; top: var(--nav-h); right: 0; width: 360px;
  height: calc(100vh - var(--nav-h)); z-index: 1500;
  padding: 1.5rem; transform: translateX(100%);
  transition: transform .4s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto; border-radius: 0; border-left: 1px solid var(--glass-border);
}
.cart-sidebar.open { transform: translateX(0); }
.cart-sidebar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--glass-border); }
.cart-sidebar-header h3 { font-size:1.1rem; font-weight:700; }
.btn-close-cart { background:none; border:none; color:var(--text-muted); font-size:1rem; cursor:pointer; padding:.3rem .6rem; }
.cart-item { display:flex; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--glass-border); align-items:center; }
.cart-item img { width:55px; height:55px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.cart-item-info { flex:1; }
.cart-item-name { font-size:.88rem; font-weight:600; margin-bottom:.2rem; }
.cart-item-price { font-size:.85rem; color:var(--gold); }
.cart-item-remove { background:none; border:none; color:var(--coral); cursor:pointer; font-size:.9rem; padding:.2rem; }
.cart-total { font-weight:700; font-size:1.05rem; padding:1rem 0 0; border-top:1px solid var(--glass-border); color:var(--gold); }

/* ═══════════════ AI PAGE ═══════════════ */
.ai-page-inner { background: linear-gradient(180deg,transparent,rgba(0,212,170,.04),transparent); }
.ai-widget { max-width:780px; margin:0 auto; padding:2.5rem; border-color:rgba(0,212,170,.2); }
.ai-header { display:flex; align-items:center; gap:.8rem; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); margin-bottom:1.5rem; }
.ai-pulse { width:8px; height:8px; background:var(--teal); border-radius:50%; animation:pulse-dot 1.8s ease infinite; }
.ai-question { font-family:var(--font-display); font-size:1.4rem; margin-bottom:1.5rem; }
.interest-tags { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem; }
.tag-btn { background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-muted); font-family:var(--font-body); font-size:.88rem; font-weight:500; padding:.5rem 1.1rem; border-radius:50px; cursor:pointer; transition:var(--transition); }
.tag-btn:hover, .tag-btn.selected { background:rgba(201,162,39,.15); border-color:var(--gold); color:var(--gold); transform:scale(1.05); }
.ai-generate-btn { margin-bottom:1.5rem; }
.ai-result { border-top:1px solid var(--glass-border); padding-top:1.5rem; }
.ai-result:empty { display:none; }
.ai-result-item { display:flex; align-items:flex-start; gap:1rem; padding:1rem; border-radius:12px; margin-bottom:.8rem; background:rgba(255,255,255,.03); border:1px solid var(--glass-border); animation:fadeUp .4s ease both; }
.ai-result-icon { font-size:1.8rem; flex-shrink:0; }
.ai-result-info h4 { font-size:1rem; font-weight:600; margin-bottom:.2rem; color:var(--teal); }
.ai-result-info p { font-size:.85rem; color:var(--text-muted); }
.typing-indicator { display:flex; gap:5px; align-items:center; padding:1rem 0; }
.typing-indicator span { width:8px; height:8px; background:var(--teal); border-radius:50%; animation:typing .9s ease infinite; }
.typing-indicator span:nth-child(2){animation-delay:.2s} .typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes typing { 0%,80%,100%{transform:scale(.7);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* ═══════════════ MODALS ═══════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  backdrop-filter: blur(8px); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s; padding: 1rem;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-content {
  position: relative; width: 100%; max-width: 820px;
  max-height: 90vh; overflow-y: auto; padding: 2.5rem;
  animation: modalPop .4s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes modalPop { from{transform:scale(.9) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-muted);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; transition: var(--transition); z-index: 10;
}
.modal-close:hover { background: var(--coral); color: #fff; border-color: var(--coral); }

/* place modal internals */
.place-modal-hero { border-radius:12px; overflow:hidden; margin-bottom:1.5rem; aspect-ratio:16/7; }
.place-modal-hero img { width:100%; height:100%; object-fit:cover; }
.place-modal-title { font-family:var(--font-display); font-size:2rem; font-weight:700; margin-bottom:.5rem; }
.place-modal-tag { display:inline-block; font-size:.75rem; font-weight:600; color:var(--gold); background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.25); padding:.25rem .8rem; border-radius:50px; margin-bottom:1rem; }
.place-modal-meta { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.5rem; }
.meta-badge { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--text-muted); background:var(--glass-bg); border:1px solid var(--glass-border); padding:.35rem .9rem; border-radius:50px; }
.place-modal-section { margin-bottom:1.5rem; }
.place-modal-section h4 { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); margin-bottom:.6rem; }
.place-modal-section p { color:var(--text-muted); font-size:.92rem; line-height:1.7; }
.place-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.6rem; }
.place-gallery img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; transition:var(--transition); cursor:pointer; }
.place-gallery img:hover { transform:scale(1.03); filter:brightness(1.1); }
.map-embed { border-radius:12px; overflow:hidden; margin-top:.6rem; border:1px solid var(--glass-border); }
.map-embed iframe { width:100%; height:280px; border:none; display:block; }

/* guide modal */
.guide-modal-header { display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; }
.guide-modal-avatar { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--gold); flex-shrink:0; }
.guide-modal-info h2 { font-family:var(--font-display); font-size:1.6rem; margin-bottom:.3rem; }
.guide-modal-info p { color:var(--text-muted); font-size:.9rem; }
.guide-contact-form { display:flex; flex-direction:column; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label { font-size:.82rem; color:var(--text-muted); font-weight:500; }
.form-group input, .form-group textarea, .form-group select { background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-primary); font-family:var(--font-body); font-size:.92rem; padding:.75rem 1rem; border-radius:10px; outline:none; transition:var(--transition); appearance:none; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.1); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-group select option { background:var(--bg-dark); }

/* ═══════════════ AUTH MODAL ═══════════════ */
.auth-modal { max-width:440px; padding:2.5rem; }
.auth-tabs { display:flex; gap:0; margin-bottom:2rem; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:12px; padding:.3rem; }
.auth-tab { flex:1; background:transparent; border:none; color:var(--text-muted); font-family:var(--font-body); font-size:.9rem; font-weight:600; padding:.6rem 1rem; border-radius:9px; cursor:pointer; transition:var(--transition); }
.auth-tab.active { background:linear-gradient(135deg,var(--gold),#e8a020); color:#000; box-shadow:0 2px 10px rgba(201,162,39,.3); }
.auth-form { display:flex; flex-direction:column; gap:1rem; }
.form-floating { position:relative; }
.form-input { width:100%; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-primary); font-family:var(--font-body); font-size:.95rem; padding:1.3rem 1rem .5rem; border-radius:10px; outline:none; transition:var(--transition); appearance:none; }
.form-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.1); }
.form-floating label { position:absolute; top:50%; left:1rem; transform:translateY(-50%); font-size:.92rem; color:var(--text-dim); pointer-events:none; transition:var(--transition); }
.form-input:focus ~ label, .form-input:not(:placeholder-shown) ~ label { top:.6rem; font-size:.72rem; color:var(--gold); transform:translateY(0); }
.form-select { padding:.75rem 1rem; }
.auth-divider { display:flex; align-items:center; gap:1rem; color:var(--text-dim); font-size:.82rem; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--glass-border); }
.btn-social { width:100%; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-primary); font-family:var(--font-body); font-size:.9rem; font-weight:500; padding:.75rem 1rem; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.6rem; transition:var(--transition); }
.btn-social:hover { background:var(--glass-hover); border-color:var(--gold); }
.btn-social span { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:linear-gradient(135deg,#4285f4,#ea4335,#fbbc05,#34a853); border-radius:50%; font-size:.75rem; font-weight:700; color:#fff; }

/* ═══════════════ FOOTER ═══════════════ */
.footer { position:relative; padding:4rem 0 2rem; border-top:1px solid var(--glass-border); overflow:hidden; }
.footer-glow { position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:200px; background:radial-gradient(ellipse,rgba(201,162,39,.1),transparent); pointer-events:none; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:3rem; }
.footer-brand p { color:var(--text-muted); font-size:.88rem; line-height:1.7; }
.footer-links { display:flex; flex-direction:column; gap:.6rem; }
.footer-links h4 { font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-primary); margin-bottom:.5rem; }
.footer-links a { text-decoration:none; cursor:pointer; color:var(--text-muted); font-size:.88rem; transition:var(--transition); }
.footer-links a:hover { color:var(--gold); }
.footer-contact h4 { font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.8rem; }
.footer-contact p { color:var(--text-muted); font-size:.88rem; margin-bottom:.4rem; }
.social-icons { display:flex; gap:.6rem; margin-top:1rem; }
.social-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:8px; color:var(--text-muted); text-decoration:none; font-size:.75rem; font-weight:700; transition:var(--transition); }
.social-icon:hover { background:rgba(201,162,39,.15); border-color:var(--gold); color:var(--gold); }
.footer-bottom { border-top:1px solid var(--glass-border); padding-top:1.5rem; text-align:center; color:var(--text-dim); font-size:.82rem; }

/* ═══════════════ TOAST ═══════════════ */
.toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(20,25,40,.95); border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px); color: var(--text-primary);
  font-size: .9rem; font-weight: 500; padding: .8rem 1.8rem;
  border-radius: 50px; z-index: 9999;
  transition: transform .4s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap; box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .btn-signin { display: none; }
  .places-grid { grid-template-columns: 1fr 1fr; }
  .guides-grid { grid-template-columns: 1fr 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .cart-sidebar { width: 100%; }
  .modal-content { padding: 1.5rem; }
  .place-gallery { grid-template-columns: 1fr 1fr; }
  .guide-modal-header { flex-direction: column; text-align: center; }
  .page-body { padding: 2rem 1rem 3rem; }
  .quick-nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .places-grid,.guides-grid,.shop-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-stats { gap: 1.2rem; }
  .quick-nav { grid-template-columns: 1fr; }
  .ai-widget { padding: 1.5rem; }
}