/* ===========================================================
   GOSEETHIS — PREMIUM TYPOGRAPHY SYSTEM (POPPINS)
   - SAFE: CSS ONLY (no logic changes)
   - ACTION: Paste this block at the VERY TOP of style.css
   =========================================================== */

/* Load Poppins properly (so it looks consistent everywhere) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

/* ---- Type tokens (consistent sizing across the entire site) ---- */
:root {
  /* Font family */
  --gst-font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Base sizing */
  --gst-text-base: 16px;
  --gst-line-base: 1.6;

  /* Scale (small set = premium consistency) */
  --gst-text-xs: 12px;
  --gst-text-sm: 13px;
  --gst-text-md: 15px;
  --gst-text-lg: 18px;

  /* Headings (responsive, premium) */
  --gst-h1: clamp(28px, 3.2vw, 42px);
  --gst-h2: clamp(20px, 2.2vw, 28px);
  --gst-h3: clamp(17px, 1.6vw, 22px);

  /* Tracking (letter spacing) */
  --gst-track-tight: -0.02em;
  --gst-track-normal: -0.01em;
  --gst-track-wide: 0.08em;
}

/* ---- Global defaults (premium rendering) ---- */
html {
  font-size: var(--gst-text-base);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--gst-font-sans) !important;
  font-size: var(--gst-text-md) !important;
  line-height: var(--gst-line-base) !important;
  letter-spacing: var(--gst-track-normal) !important;
  font-weight: 400 !important;

  /* Premium font smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Make form controls match typography (premium consistency) */
button,
input,
select,
textarea {
  font-family: var(--gst-font-sans) !important;
  letter-spacing: var(--gst-track-normal) !important;
}

/* Base paragraph sizing (keeps things readable + premium) */
p {
  font-size: var(--gst-text-md) !important;
  line-height: 1.65 !important;
}

/* Headings (global) */
h1 {
  font-size: var(--gst-h1) !important;
  line-height: 1.12 !important;
  letter-spacing: var(--gst-track-tight) !important;
  font-weight: 700 !important;
}

h2 {
  font-size: var(--gst-h2) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  font-weight: 700 !important;
}

h3 {
  font-size: var(--gst-h3) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
}

/* Small text helpers */
small,
.helper,
.hint,
.caption {
  font-size: var(--gst-text-xs) !important;
  line-height: 1.45 !important;
}

/* Common UI text targets (keeps the app feeling “designed”, not random) */
.topbar-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.topbar-tagline {
  font-size: var(--gst-text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* Header hero title/tagline (your big GoSeeThis hero area) */
header h1 {
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

.tagline {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important; /* keeps that “stamp / travel label” vibe */
}

/* Tabs / nav */
.tab-btn {
  font-size: var(--gst-text-md) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Buttons (consistent premium feel) */
.btn,
.btn-small,
.save-btn,
.map-btn,
.comment-btn,
.explore-hero-search-btn {
  font-size: var(--gst-text-md) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Inputs (consistent premium feel) */
input,
select,
textarea,
.explore-hero-search-input,
.comment-input {
  font-size: var(--gst-text-md) !important;
  font-weight: 400 !important;
}

/* Labels / eyebrow text (uppercase chips, “INSIGHTS”, etc.) */
.gst-claim-eyebrow,
.insights-label,
.side-nav-title,
.country-card-hint,
.weekly-love-empty-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: var(--gst-track-wide) !important;
  text-transform: uppercase !important;
}

/* Claim page typography */
.gst-claim-title {
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

.gst-claim-card-title {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.gst-claim-label {
  font-size: var(--gst-text-sm) !important;
  font-weight: 600 !important;
}

/* Modal typography */
.gst-modal-title {
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

.gst-modal-sub,
.gst-claim-sub {
  font-size: var(--gst-text-sm) !important;
  font-weight: 500 !important;
}

/* Tighten ultra-bold stuff (keeps it premium, avoids “poster” look) */
.hero-featured-title,
.gst-hotel-dname,
.insight-title {
  font-weight: 700 !important;
}

/* ===========================================================
   PREMIUM THEME TOKENS (LIGHT + DARK + ACCENT)
   =========================================================== */

:root {
  /* Page + surfaces (light) */
  --page-bg: #f5f7fb;
  --page-bg-alt: #ffffff;
  --surface-elevated: #ffffff;

  /* Text */
  --text-main: #0f172a;
  --text-muted: #6b7280;

  /* Borders / lines */
  --border-soft: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);

  /* Default accent = GREEN (emerald/teal) */
  --accent: #0f766e;             /* main accent (buttons, links) */
  --accent-soft: rgba(15, 118, 110, 0.12); /* subtle pills, backgrounds */
  --accent-strong: #0b4f48;      /* hover / active / strong */

  /* Gold accent (used in .accent-gold mode) */
  --accent-gold-main: #d97706;
  --accent-gold-soft: rgba(217, 119, 6, 0.12);
  --accent-gold-strong: #92400e;

  /* Green accent (used in .accent-green mode) */
  --accent-green-main: #0f766e;
  --accent-green-soft: rgba(15, 118, 110, 0.12);
  --accent-green-strong: #0b4f48;
}

/* Dark mode base (premium)
   - deeper background
   - higher contrast text
   - softer, realistic borders (not pure black)
*/
body.dark {
  /* Page */
  --page-bg: #05070d;      /* deep ink */
  --page-bg-alt: #070b14;  /* subtle lift */

  /* Surfaces */
  --surface: rgba(7, 11, 20, 0.78);
  --surface-elevated: rgba(11, 18, 32, 0.78);

  /* Text */
  --text-main: rgba(241, 245, 249, 0.92);
  --text-muted: rgba(148, 163, 184, 0.88);

  /* Borders / lines */
  --border-soft: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.26);

  /* Dark shadows */
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 26px 85px rgba(0, 0, 0, 0.48);
}

/* Accent = GREEN (default) */
body.accent-green {
  --accent: var(--accent-green-main);
  --accent-soft: var(--accent-green-soft);
  --accent-strong: var(--accent-green-strong);
}

/* Accent = GOLD */
body.accent-gold {
  --accent: var(--accent-gold-main);
  --accent-soft: var(--accent-gold-soft);
  --accent-strong: var(--accent-gold-strong);
}

/* Generic usage helpers */
body {
  background-color: var(--page-bg);
  color: var(--text-main);
}

/* Buttons that already exist in your HTML */
.btn,
.save-btn,
.map-btn,
.chip-btn.active,
.tag-pill,
.badge,
.theme-toggle,
.accent-btn {
  background-color: var(--accent);
  border-color: var(--accent-strong);
  color: #f9fafb;
}

.btn:hover,
.save-btn:hover,
.map-btn:hover,
.chip-btn.active:hover,
.theme-toggle:hover,
.accent-btn:hover {
  background-color: var(--accent-strong);
}

/* Soft accent pills / highlights */
.inline-badges .badge-pill,
.tag-pill,
.highlight-pill,
.trending-item {
  background-color: var(--accent-soft);
  color: var(--text-main);
}

/* Links / text accents */
a,
.text-link-btn {
  color: var(--accent);
}

a:hover,
.text-link-btn:hover {
  color: var(--accent-strong);
}
/* =========================================
   BASE THEME + ACCENT VARIABLES
   ========================================= */
:root {
  /* Light mode base */
  --bg-main: #f5f7fb;
  --bg-elevated: #ffffff;
  --bg-soft: #edf1f9;
  --border-soft: #d3d9e6;
  --text-main: #0f172a;
  --text-muted: #6b7280;

  /* Accent default (GREEN) - will be overridden by .accent-gold */
  --accent-primary: #16a34a;
  --accent-primary-soft: #d1fae5;
  --accent-pill-bg: rgba(22, 163, 74, 0.06);
  --accent-pill-border: rgba(22, 163, 74, 0.3);

  /* Special UI details */
  --chip-bg: #e5edff;
  --chip-bg-active: #1d4ed8;
  --chip-text-active: #ffffff;

  --button-radius: 999px;
  --card-radius: 18px;
}

/* Dark mode overrides */
body.dark {
  --bg-main: #020617;
  --bg-elevated: #020617;
  --bg-soft: #020617;
  --border-soft: #1f2937;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
}

/* Accent: GREEN (default look) */
body.accent-green {
  --accent-primary: #16a34a;              /* emerald */
  --accent-primary-soft: #bbf7d0;
  --accent-pill-bg: rgba(22, 163, 74, 0.08);
  --accent-pill-border: rgba(22, 163, 74, 0.4);
}

/* Accent: GOLD (premium look) */
body.accent-gold {
  --accent-primary: #eab308;              /* amber/gold */
  --accent-primary-soft: #fef9c3;
  --accent-pill-bg: rgba(234, 179, 8, 0.08);
  --accent-pill-border: rgba(234, 179, 8, 0.4);
}

:root {
  /* Light theme base */
  --bg-color: #f5f7fb;
  --bg-card: #ffffff;
  --bg-soft: #eaecf0;

  --text-main: #0f172a;
  --text-muted: #6b7280;
  --border-soft: #e5e7eb;

  /* Accent options */
  --accent-green: #16a34a; /* green */
  --accent-gold: #f59e0b;  /* gold */

  /* Current accent (default = green) */
  --accent-color: var(--accent-green);
}

body.dark {
  --bg-color: #020617;
  --bg-card: #020617;
  --bg-soft: #0f172a;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --border-soft: #1f2933;
}

/* When user chooses green accent */
body.accent-green {
  --accent-color: var(--accent-green);
}

/* When user chooses gold accent */
body.accent-gold {
  --accent-color: var(--accent-gold);
}

/* Generic use of accent color for buttons, pills, etc. */
.btn,
.btn-small,
.save-btn,
.badge,
.badge-pill,
.tag-pill,
.tag-pill--hidden,
.tag-pill--hotel,
.tag-pill--tip,
.founder-pick-tag {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

/* If you have text-only accent links, they can use it too */
.text-link-accent {
  color: var(--accent-color);
}

/* -----------------------------------------------------------
GOSEETHIS — TRAVEL STAMP + MAP + AIRMAIL + PLANE
----------------------------------------------------------- */

:root {
  --bg: #f3f7ff;
  --primary: #0077ff;
  --primary-soft: #e2f0ff;
  --accent: #ff6b6b;
  --accent-soft: #ffe3dd;
  --teal: #00b894;
  --text-main: #123047;
  --text-muted: #6c7a89;
  --card-bg: #ffffff;
  --border-soft: #dde5ef;
}
/* =======================================================
   TOP BAR HEADER (Lonely Planet–style)
======================================================= */
.site-header {
  position: relative;
  z-index: 20;
}

/* Top bar strip */
.topbar {
  background: var(--page-bg-alt, #f9fafb);
  border-bottom: 1px solid var(--border-soft, #e5e7eb);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

/* Inner content: left brand + right controls */
.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Left side: logo + name + tagline */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.topbar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.topbar-tagline {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right side: controls row */
.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 13px;
}

/* Accent buttons row */
.accent-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Optional: keep accent buttons compact */
.accent-btn {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-soft, #e5e7eb);
  background: var(--page-bg, #ffffff);
  cursor: pointer;
  font-size: 12px;
}

/* Slight tweak for header area under the bar */
.hero-shell {
  position: relative;
  overflow: hidden;
}
.hero-featured-credit {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: #f9fafb;
  font-size: 12px;
  display: none; /* JS will change this to inline-flex when used */
  align-items: center;
  gap: 6px;
  z-index: 9999;
  cursor: pointer;
  white-space: nowrap;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}
/* Allow the pill to receive clicks by making the background non-clickable */
.hero-slideshow,
.plane,
.greetings-cloud {
  pointer-events: none;
}
.hero-featured-credit.hero-credit-visible {
  display: inline-flex;
}
.hero-featured-credit:hover {
  background: rgba(15, 23, 42, 0.95);
}
/* --- FIX FEATURED HERO CREDIT PILL CLICKABILITY --- */

#homeHeroCredit {
  position: relative;
  z-index: 1000;     /* ensure it sits above hero overlays */
  pointer-events: auto;
  cursor: pointer;
}

/* Prevent any hero overlays from blocking clicks */
#homeHero::before,
#homeHero::after {
  pointer-events: none !important;
}

/* If your hero has any extra overlay containers, this ensures they don't eat clicks */
.hero-overlay,
.hero-gradient,
.hero-tint {
  pointer-events: none !important;
}

body.dark {
  --bg: #020617;
  --primary: #38bdf8;
  --primary-soft: #0b1220;
  --accent: #fb7185;
  --accent-soft: #4b0f18;
  --teal: #2dd4bf;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --card-bg: #020617;
  --border-soft: #1f2937;
}

.hero-featured-title {
  font-weight: 600;
}

.hero-featured-meta {
  opacity: 0.9;
  margin-top: 2px;
}

/* GLOBAL PAGE BACKGROUND */
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at top, #fdf5e6, #f3f7ff 55%, #e0ecff 100%);
  color: var(--text-main);
  transition: background 0.4s ease, color 0.3s ease;
}

body.dark {
  background: radial-gradient(circle at top, #020617, #020617 55%, #020617 100%);
}

/* -----------------------------------------------------------
HEADER WITH SLIDESHOW COVER PHOTO
----------------------------------------------------------- */

header {
  width: 100%;
  padding: 32px 32px 48px;
  text-align: left;
  color: #fff;
  position: relative;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  text-shadow: 0 4px 12px rgba(0,0,0,0.55);
  overflow: hidden;
  min-height: 240px;
  background: radial-gradient(circle at top, #020617, #020617 60%, #000000 100%);
}

/* When a country page (like Chile) is open:
   - header becomes a compact bar like TripAdvisor
   - logo smaller on the left, name + tagline beside it in one line/stack
   - no big hero image background here (that moves into the content area) */
body.country-page-open header {
  padding: 12px 16px;
  min-height: 72px;
  background: #020617;
  border-bottom: 1px solid rgba(15, 23, 42, 0.8);
  text-shadow: none;
  display: flex;
  align-items: center;
}

/* hide the large hero slideshow on the Chile page */
body.country-page-open .hero-slideshow {
  display: none;
}

/* also hide the dark overlay + contrail line on the compact header */
body.country-page-open header::after,
body.country-page-open header::before {
  display: none;
}

/* airplane + hello bubbles are already hidden further down for country-page-open */

/* Background slideshow container */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Global hero slides (home / explore view) */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: 110% auto;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  animation:
    heroSlideCycle 160s infinite,
    heroKenBurns 160s ease-in-out infinite;
}

/* Slide images (global main-page set) */
.hero-slide-1 {
  background-image: url("A_digital_composite_collage_showcases_iconic_natur.png");
  animation-delay: 0s;
}

.hero-slide-2 {
  background-image: url("hero-1-temple.png");
  animation-delay: 40s;
}

.hero-slide-3 {
  background-image: url("hero-2-winter.png");
  animation-delay: 80s;
}

.hero-slide-4 {
  background-image: url("hero-3-tropical.png");
  animation-delay: 120s;
}

/* Each slide visible for ~40s (160s loop) */
@keyframes heroSlideCycle {
  0%   { opacity: 0; }
  1%   { opacity: 0; }
  2%   { opacity: 1; }
  28%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Ken Burns top → bottom */
@keyframes heroKenBurns {
  0% {
    transform: scale(1.04);
    background-position: center top;
  }
  24% {
    transform: scale(1.1);
    background-position: center bottom;
  }
  100% {
    transform: scale(1.1);
    background-position: center bottom;
  }
}

/* On the Chile page we now fully hide the slideshow in the header
   (we'll show contributor media inside the Chile content instead) */
body.country-page-open .hero-slide-1,
body.country-page-open .hero-slide-2,
body.country-page-open .hero-slide-3,
body.country-page-open .hero-slide-4 {
  display: none;
}

/* Dark overlay on top of images */
header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.4));
  z-index: 1;
}

/* SOFTER overlay in dark mode so the cover is still visible */
body.dark header::after {
  background: linear-gradient(
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.7)
  );
}

/* brighten hero images a bit in dark mode so they pop */
body.dark .hero-slide {
  filter: brightness(1.15) contrast(1.05);
}

/* Glowing contrail following the same path, but slower */
header::before {
  content: "";
  position: absolute;
  top: 48px;
  left: -25%;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.9), rgba(255,255,255,0));
  filter: blur(1px);
  animation: trailMove 40s linear infinite;
  z-index: 2;
}

/* LOGO: hero position (big homepage hero) */
.logo-hero-wrap {
  position: absolute;
  left: 48px;
  top: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 3;
  pointer-events: none;
}

.logo-goseethis {
  width: 230px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.65));
  opacity: 0.96;
  animation: logoFloat 10s ease-in-out infinite;
  transform-origin: center;
}

/* COMPACT BRAND BAR LOOK FOR CHILE PAGE
   (TripAdvisor-style bar: small logo left, name + tagline beside it) */
body.country-page-open .logo-hero-wrap {
  position: static;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 3;
}

body.country-page-open .logo-goseethis {
  width: 52px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  opacity: 1;
  animation: none;
  transform: none;
}

/* GoSeeThis title – big hero version (PREMIUM + RESPONSIVE + SAFE) */
header h1 {
  font-size: clamp(42px, 5.8vw, 72px) !important;
  font-weight: 800 !important;
  margin: 44px 0 6px 240px;
  letter-spacing: -0.04em !important;

  background: linear-gradient(120deg, #fef9c3, #f97316, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  position: relative;
  z-index: 4;
}

/* Compact title for Chile page (PREMIUM + SAFE) */
body.country-page-open header h1 {
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 2px 8px;
  letter-spacing: -0.02em !important;

  background: linear-gradient(120deg, #fef9c3, #f97316, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: none;
}

/* tagline – big hero version (PREMIUM + RESPONSIVE + SAFE) */
.tagline {
  font-size: clamp(14px, 1.8vw, 22px) !important;
  margin-top: 4px;
  margin-left: 240px;

  font-weight: 650 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: #fefce8;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
  position: relative;
  z-index: 4;
}

/* tagline – compact version under the title on Chile page (SAFE) */
body.country-page-open .tagline {
  font-size: 10px !important;
  margin: 0 0 0 8px;

  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: #e5e7eb;
  text-shadow: none;
}

/* When the header becomes compact, treat the logo + title + tagline as a row */
body.country-page-open header {
  flex-wrap: nowrap;
}

body.country-page-open .logo-hero-wrap + h1,
body.country-page-open .tagline {
  display: inline-block;
}

/* HEADER CONTROLS (LANG, THEME, PRIVACY, TERMS) */
.header-controls {
  position: absolute;
  top: 10px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
}

.language-select {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(15,23,42,0.75);
  color: #f9fafb;
  backdrop-filter: blur(4px);
}

body.dark .language-select {
  background: rgba(15,23,42,0.9);
}

.theme-toggle,
.privacy-btn {
  border-radius: 999px;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(15,23,42,0.75);
  color: #f9fafb;
  backdrop-filter: blur(4px);
}

.theme-toggle {
  font-weight: 600;
}

/* PLANE */
.plane {
  position: absolute;
  top: 40px;
  left: -160px;
  width: 90px;
  height: 36px;
  animation: planeFly 40s linear infinite;
  z-index: 5;
}

/* When a country page is open:
   - still hide the airplane + greetings */
body.country-page-open .plane,
body.country-page-open .greetings-cloud {
  display: none;
}

.plane-body {
  position: absolute;
  left: 0;
  top: 10px;
  width: 75px;
  height: 16px;
  background: linear-gradient(90deg, #f9fafb, #e5e7eb);
  border-radius: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6);
}

.plane-body::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  width: 24px;
  height: 16px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(90deg, #e0f2fe, #f9fafb);
}

.plane-body::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 4px;
  width: 40px;
  height: 6px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    #0ea5e9 0 4px,
    #0ea5e9 4px 6px,
    transparent 6px 8px
  );
}

.plane-window {
  position: absolute;
  left: 2px;
  top: 12px;
  width: 12px;
  height: 7px;
  border-radius: 8px;
  background: #0ea5e9;
}

.plane-wing {
  position: absolute;
  width: 30px;
  height: 8px;
  background: #e5e7eb;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.wing-top {
  transform: rotate(-18deg);
  top: 3px;
  left: 24px;
}

.wing-bottom {
  transform: rotate(18deg);
  top: 20px;
  left: 26px;
}

.plane-tail {
  position: absolute;
  right: 2px;
  top: 4px;
  width: 12px;
  height: 14px;
  background: #e5e7eb;
  border-radius: 2px 6px 0 0;
  box-shadow: -2px 0 3px rgba(0,0,0,0.25);
}

@keyframes planeFly {
  0% {
    transform: translateX(0) translateY(0) rotate(8deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateX(120vw) translateY(-20px) rotate(3deg);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(240vw) translateY(8px) rotate(8deg);
    opacity: 0;
  }
}

@keyframes trailMove {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    transform: translateX(160%);
    opacity: 1;
  }
  100% {
    transform: translateX(260%);
    opacity: 0;
  }
}

/* Floating "Hello world" greetings */
.greetings-cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.greeting {
  position: absolute;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.7);
  color: #0f172a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  animation: greetingPulse 60s ease-in-out infinite;
  font-weight: 600;
}

/* Positions */
.greeting:nth-child(1)  { top: 6%;  left: 4%;   animation-delay: 0s; }
.greeting:nth-child(2)  { top: 8%;  right: 6%;  animation-delay: 4s; }
.greeting:nth-child(3)  { top: 14%; left: 6%;   animation-delay: 8s; }
.greeting:nth-child(4)  { top: 16%; right: 6%;  animation-delay: 12s; }
.greeting:nth-child(5)  { top: 4%;  left: 26%;  animation-delay: 16s; }
.greeting:nth-child(6)  { top: 4%;  right: 26%; animation-delay: 20s; }

.greeting:nth-child(7)  { bottom: 40%; left: 4%;   animation-delay: 24s; }
.greeting:nth-child(8)  { bottom: 42%; right: 6%;  animation-delay: 28s; }
.greeting:nth-child(9)  { bottom: 32%; left: 4%;   animation-delay: 32s; }
.greeting:nth-child(10) { bottom: 34%; right: 10%; animation-delay: 36s; }

.greeting:nth-child(11) { top: 22%; left: 4%;   animation-delay: 40s; }
.greeting:nth-child(12) { top: 22%; right: 4%;  animation-delay: 44s; }

.greeting:nth-child(13) { bottom: 18%; left: 6%;   animation-delay: 48s; }
.greeting:nth-child(14) { bottom: 20%; right: 6%;  animation-delay: 52s; }
.greeting:nth-child(15) { bottom: 12%; left: 10%;  animation-delay: 56s; }
.greeting:nth-child(16) { bottom: 10%; right: 10%; animation-delay: 60s; }

.greeting:nth-child(17) { top: 10%; left: 40%;  animation-delay: 10s; }
.greeting:nth-child(18) { top: 10%; right: 40%; animation-delay: 18s; }
.greeting:nth-child(19) { bottom: 26%; left: 30%; animation-delay: 26s; }
.greeting:nth-child(20) { bottom: 28%; right: 30%;animation-delay: 34s; }

.greeting:nth-child(21) { bottom: 6%;  left: 32%; animation-delay: 42s; }
.greeting:nth-child(22) { bottom: 6%;  right: 32%;animation-delay: 50s; }
.greeting:nth-child(23) { top: 28%;  left: 20%; animation-delay: 14s; }
.greeting:nth-child(24) { top: 28%;  right: 20%;animation-delay: 30s; }

@keyframes greetingPulse {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.9) rotate(-4deg);
  }
  10% {
    opacity: 0;
  }
  18% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  26% {
    opacity: 1;
    transform: translate3d(6px, -6px, 0) scale(1.05) rotate(3deg);
  }
  32% {
    opacity: 0;
    transform: translate3d(-4px, -10px, 0) scale(0.98) rotate(-3deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -14px, 0) scale(0.95) rotate(-6deg);
  }
}

/* RESPONSIVE HEADER */
@media (max-width: 640px) {
  header {
    padding: 28px 12px 40px;
    min-height: 220px;
  }

  .logo-hero-wrap {
    left: 16px;
    top: 60px;
  }

  .logo-goseethis {
    width: 150px;
  }

  header h1 {
    font-size: 46px;
    margin-left: 190px;
    margin-top: 30px;
  }

  .tagline {
    font-size: 16px;
    letter-spacing: 0.08em;
    margin-left: 190px;
  }

  /* Compact Chile header on mobile */
  body.country-page-open header {
    padding: 10px 10px;
    min-height: 64px;
  }

  body.country-page-open .logo-goseethis {
    width: 44px;
  }

  body.country-page-open header h1 {
    font-size: 20px;
    margin-left: 8px;
  }

  body.country-page-open .tagline {
    font-size: 10px;
    margin-left: 8px;
    letter-spacing: 0.14em;
  }

  .greeting {
    font-size: 10px;
  }
}

/* -----------------------------------------------------------
TOP NAV
----------------------------------------------------------- */

.top-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #ffffff;
  border-bottom: 1px solid var(--border-soft);
  padding: 0 16px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

body.dark .top-nav {
  background: #020617;
}

.nav-left {
  display: flex;
  align-items: center;
}

.tab-btn {
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;

  /* premium sizing */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;

  /* calm default (no green unless active) */
  color: rgba(15, 23, 42, 0.72);
  border-bottom: 3px solid transparent;

  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Dark mode default */
body.dark .tab-btn{
  color: rgba(226, 232, 240, 0.72);
}

/* Active: keep text neutral, green only as underline */
.tab-btn.active {
  border-bottom-color: var(--accent);
  color: rgba(15, 23, 42, 0.92);
  opacity: 1;
}

body.dark .tab-btn.active{
  color: rgba(248, 250, 252, 0.92);
}

/* -----------------------------------------------------------
GLOBAL BANNER SLOT (top of page)
----------------------------------------------------------- */

#globalBannerSlot {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0 16px;
}

/* -----------------------------------------------------------
MAIN CONTENT LAYOUT – SINGLE CLEAN CANVAS (NO DOUBLE FRAME)
----------------------------------------------------------- */

main {
  max-width: 1120px;
  margin: 24px auto 40px;
  padding: 0 16px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

/* On country pages just move it down a bit so it clears header/tabs */
body.country-page-open main {
  margin-top: 24px !important;
}

/* Dark mode: also keep it transparent */
body.dark main {
  background: transparent;
  box-shadow: none;
}

/* No decorative border around the whole app */
main::before {
  content: none;
}

/* Side layout (side-nav on the right) */
.main-layout {
  display: block;
}

/* SIDE NAV */
.side-nav {
  background: var(--card-bg);
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  padding: 12px;
  height: fit-content;
}

/* Hide the right "Your space" side-nav when a country page (like Chile) is open */
body.country-page-open .side-nav {
  display: none;
}

.side-nav-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.side-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.side-link:hover {
  background: var(--primary-soft);
  transform: translateX(1px);
}

/* TABS */
.tab-container {
  min-width: 0;
}

.tab { display: none; }
.tab.active { display: block; }

.text-link-btn {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}

h2, h3 { color: var(--primary); }

body.dark h2,
body.dark h3 {
  color: var(--teal);
}

.empty-msg {
  text-align: center;

  margin: 14px 0 0;
  padding: 10px 0;

  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;

  color: var(--text-muted);
}

/* Generic button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--accent), #ff9f7a);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.24);
  filter: brightness(1.05);
}

.btn-small {
  padding: 6px 14px;
  font-size: 12px;
}
/* -----------------------------------------------------------
EXPLORE TAB – CLEAN PAGE (NO INNER FRAME / WORLD MAP)
----------------------------------------------------------- */

#explore {
  position: relative;
  padding: 16px 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

/* No decorative background image behind Explore anymore */
#explore::before {
  content: none;
}

/* When a country page is open inside Explore, we still hide other explore content */
#explore.country-open > *:not(#countryDetailPage) {
  display: none;
}

/* Content just sits on the main page background */
#explore > * {
  position: relative;
  z-index: 1;
}

/* Announcement banner for new traveller contributions */
.announcement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  margin: 10px 0 18px;

  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.25;

  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.5);
  color: #166534;
}

body.dark .announcement-banner {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(34, 197, 94, 0.7);
  color: #bbf7d0;
}

.announcement-close {
  border: none;
  background: none;
  font-size: 14px;
  cursor: pointer;
  color: inherit;
}

.announcement-banner.flash {
  animation: bannerFlash 0.9s ease-in-out 4;
}

@keyframes bannerFlash {
  0%, 100% {
    box-shadow: 0 0 0 rgba(34, 197, 94, 0.0);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.7);
    transform: translateY(-1px);
  }
}

/* Collapsible sections on Explore */
.explore-about,
.explore-how,
.explore-community {
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border-soft);

  padding: 12px 14px 14px;
  margin-bottom: 14px;

  font-size: 13px;
  line-height: 1.5;
}

.explore-about summary,
.explore-how summary,
.explore-community summary {
  list-style: none;
  cursor: pointer;

  font-weight: 650;
  font-size: 13px;
  line-height: 1.25;
}

.explore-about summary::-webkit-details-marker,
.explore-how summary::-webkit-details-marker,
.explore-community summary::-webkit-details-marker {
  display: none;
}

.explore-about[open],
.explore-how[open],
.explore-community[open] {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.explore-about p {
  margin: 10px 0 0;
  color: var(--text-muted);
}

.explore-how h3 {
  margin: 10px 0 6px;
  font-size: 14px;
}

.explore-how-steps {
  margin: 6px 0 0;
  padding-left: 18px;

  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.explore-how-steps li {
  margin-bottom: 6px;
}

/* Community section */
.explore-community h3 {
  margin: 10px 0 6px;
  font-size: 14px;
}

.explore-community-list {
  margin: 6px 0 10px;
  padding-left: 18px;
  color: var(--text-muted);
  line-height: 1.5;
}

.explore-community-list li {
  margin-bottom: 6px;
}

.explore-faq-teaser {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Explore highlights (Hidden Gem, Founder’s stash, Trending) */
.explore-highlights {
  margin: 18px 0 20px;
}

.explore-highlights > h3 {
  margin: 10px 0 12px;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}

.highlight-row {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;
  margin-bottom: 14px;
}

.highlight-card {
  flex: 1 1 220px;
  background: var(--card-bg);
  border-radius: 14px;
  border: 1px solid var(--border-soft);

  padding: 12px 14px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.highlight-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.highlight-card.wide {
  flex-basis: 100%;
}

.highlight-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

#dailyInspirationText {
  font-size: 13px;
  color: var(--text-muted);
  margin: 8px 0 12px;
  line-height: 1.5;
}

/* Small list in highlight cards */
.highlight-card ul {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
}

.highlight-card li {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.45;
}

/* Explore section title */
.explore-section-title {
  margin: 18px 0 12px;
  font-size: 16px;
  letter-spacing: -0.015em;
}

/* Explore filters */
.explore-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.explore-filters input,
.explore-filters select {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.explore-filters input {
  flex: 1 1 180px;
}

.explore-filters select {
  flex: 0 0 150px;
}

/* Quick category chips */
.explore-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.chip-btn {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.95);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease, transform 0.1s ease;
}

.chip-btn:hover {
  background: var(--primary-soft);
  transform: translateY(-1px);
}

.chip-btn.active {
  border-color: var(--accent);
  background: rgba(254, 243, 199, 0.95);
}

/* -----------------------------------------------------------
COUNTRY GRID — STAMP / POSTCARD STYLE
----------------------------------------------------------- */

.country-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.country-card {
  background: var(--card-bg);
  border-radius: 16px;
  border: 2px solid #f0d5a5;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
  transform-origin: center center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.3s ease;
}

body.dark .country-card {
  border-color: #e6c48d;
}

/* perforation border — refined + subtle */
.country-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  border: 1px dashed rgba(230, 196, 141, 0.60);
  pointer-events: none;
  opacity: 0.45;
}

/* subtle stamp circle — lighter + more premium */
.country-card::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.10);
  top: -16px;
  right: -16px;
  transform: rotate(-12deg);
  opacity: 0.35;
  pointer-events: none;
}

/* hover effect — subtle + premium */
.country-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.country-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
}

/* tiny polish: cover image gently zooms on hover */
.country-cover {
  transition: transform 240ms ease, filter 240ms ease;
  transform: scale(1.02);
  filter: saturate(1.03) contrast(1.02);
}

.country-card:hover .country-cover {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.04);
}

/* tiny polish: stamp lifts a hair */
.country-stamp {
  transition: transform 200ms ease;
}

.country-card:hover .country-stamp {
  transform: translateY(-1px);
}

/* COVER WRAPPER WITH GRADIENT OVERLAY + STAMP */
.country-cover-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.country-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* Soft, premium overlay: subtle bottom fade + gentle vignette */
.country-cover-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 90%, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.0) 55%),
    linear-gradient(to top, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.0) 60%);
  z-index: 1;
  pointer-events: none;
}

.placeholder-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: linear-gradient(135deg, #f0f4ff, #ffe9d5);
  font-weight: 600;
}

/* Floating stamp: airmail-style tag with flag + name */
/* Glass badge — premium + readable */
.country-stamp {
  position: absolute;
  top: 12px;
left: 12px;
bottom: auto;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  /* brighter glass so text NEVER disappears */
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.15);

  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);

  font-size: 13.5px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.92);

  box-shadow:
    0 10px 28px rgba(2, 6, 23, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  z-index: 2;
}
.country-name{
  font-weight: 800;
  letter-spacing: -0.2px;
}

/* Dark mode — still bright enough */
body.dark .country-stamp {
  background: rgba(15, 23, 42, 0.78);
  color: rgba(248, 250, 252, 0.96);
  border-color: rgba(148, 163, 184, 0.35);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* flag — remove white circle; keep it clean on top of photos */
/* Flag — crisp, readable, no cheap circle */
.country-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  flex-shrink: 0;

  /* subtle lift, not glow */
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
}

body.dark .country-flag {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

/* country name inside stamp */
.country-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* gentle float animation for the stamp */
@keyframes stampFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* body of the country card */
.country-card-body{
  padding: 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(148,163,184,0.18);
}

/* top row: count + share button */
.country-card-meta-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

/* ✅ Places count becomes a premium pill */
.country-card-meta {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(15, 23, 42, 0.75);
  background: rgba(226, 232, 240, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.35);
  white-space: nowrap;
}

body.dark .country-card-meta {
  color: rgba(226, 232, 240, 0.88);
  background: rgba(2, 6, 23, 0.55);
  border-color: rgba(148, 163, 184, 0.22);
}

/* Share button (still uses .map-btn class) — cleaner + more premium */
/* Share button — icon only */
.map-btn{
  width: 34px;
  height: 34px;
  padding: 0;

  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(248,250,252,0.85);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  cursor: pointer;

  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

body.dark .map-btn{
  background: rgba(2,6,23,0.55);
  border-color: rgba(148,163,184,0.22);
}

.map-btn:hover {
  transform: translateY(-1px);
  background: var(--primary-soft);
  border-color: rgba(37, 99, 235, 0.35);
}

/* “Been here?” link — a touch bigger + more confident */
/* Primary CTA — soft premium button */
.add-place-link{
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;

  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;

  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(248,250,252,0.92);
  color: rgba(15,23,42,0.92);

  cursor: pointer;
  transition:
    transform 140ms ease,
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

/* Skeleton loading state */
.country-card.skeleton {
  pointer-events: none;
  border-style: dashed;
  overflow: hidden;
}

.skeleton-block {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.25),
    rgba(209, 213, 219, 0.55),
    rgba(148, 163, 184, 0.25)
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.1s ease-in-out infinite;
}

@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -----------------------------------------------------------
PLACE CARDS
----------------------------------------------------------- */

.place-card {
  position: relative;
  background: var(--card-bg);
  border-radius: 18px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.05);
  margin-bottom: 14px;
  overflow: hidden;
  transform: translateY(0);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

/* Ultra-thin "header band" to make each entry feel like its own object */
.place-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: linear-gradient(
    90deg,
    rgba(15, 118, 110, 0.18),
    rgba(15, 118, 110, 0.06),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

/* Dark mode tuning (crisp separation, not heavy) */
body.dark .place-card {
  border-color: rgba(226, 232, 240, 0.12);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

body.dark .place-card::before {
  background: linear-gradient(
    90deg,
    rgba(45, 212, 191, 0.18),
    rgba(45, 212, 191, 0.06),
    rgba(2, 6, 23, 0)
  );
}

/* Premium hover: only on devices that actually hover (desktop/laptop) */
@media (hover: hover) and (pointer: fine) {
  .place-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow:
      0 26px 55px rgba(15, 23, 42, 0.10),
      0 3px 10px rgba(15, 23, 42, 0.06);
  }

  body.dark .place-card:hover {
    border-color: rgba(226, 232, 240, 0.18);
    box-shadow:
      0 30px 70px rgba(0, 0, 0, 0.45),
      0 4px 14px rgba(0, 0, 0, 0.28);
  }
}

/* Keyboard accessibility (still visual-only) */
.place-card:focus-within {
  outline: 2px solid rgba(15, 118, 110, 0.25);
  outline-offset: 2px;
}

/* Single media (legacy) */
.place-media {
  width: 100%;
  border-radius: 8px;
  max-height: 200px;
  object-fit: cover;
  margin-bottom: 8px;
}

/* Simple horizontal media gallery for multiple images/videos */
.media-gallery {
  display: flex;
  gap: 12px;           /* give thumbnails more breathing room */
  overflow-x: auto;
  padding-bottom: 6px; /* slight padding adjust */
  margin-bottom: 10px; /* better spacing under albums */
  scroll-snap-type: x mandatory;
}

.media-gallery::-webkit-scrollbar {
  height: 6px;
}

.media-gallery::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.7);
  border-radius: 999px;
}

.media-item {
  flex: 0 0 auto;
  width: 400px;        /* make it equal */
  height: 400px;       /* square shape */
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Album container: keep it close to a square instead of full card width */
.media-album {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* This is the strip that currently stretches full width – we constrain it */
.media-gallery-album {
  width: 400px;        /* match the media-item */
  margin: 0 auto 8px;  /* center in the card */
  justify-content: center;
}

/* -----------------------------------------------------------
COMMENTS UNDER EACH PLACE / ALBUM
----------------------------------------------------------- */

.comments-section {
  margin-top: 6px;                 /* ✅ shorter */
  padding-top: 6px;                /* ✅ shorter */
  border-top: 1px dashed var(--border-soft);
  font-size: 13px;
}

.comments-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-main);
}

.comments-list {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;                /* ✅ slightly shorter */
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid var(--border-soft);
  margin-bottom: 3px;              /* ✅ tighter */
}

body.dark .comment-item {
  background: rgba(15, 23, 42, 0.9);
}

.comment-text {
  flex: 1;
  font-size: 12px;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-delete {
  border: none;
  background: none;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}

.comment-delete:hover {
  color: var(--accent);
}

.comments-empty {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-input {
  width: 100%;
  min-height: 50px;
  max-height: 90px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  font-size: 12px;
  resize: vertical;
  box-sizing: border-box;
}

.comment-submit {
  align-self: flex-end;
}

/* subtle hover zoom for desktop */
@media (hover: hover) {
  .media-item img,
  .media-item video {
    transition: transform 0.25s ease;
  }
  .media-item:hover img,
  .media-item:hover video {
    transform: scale(1.06);
  }
}

/* Album-style gallery for country pages:
   show ONE media item at a time with controls */
.media-album {
  margin-bottom: 8px;
}

.media-gallery-album {
  display: flex;
  overflow: hidden;
  scroll-snap-type: none;
}

/* In album mode, each media-item takes full width but only the .active one shows */
.media-gallery-album .media-item {
  flex: 0 0 100%;
  width: 100%;
  height: 220px;           /* you can tweak this height if needed */
  display: none;
}

.media-gallery-album .media-item.active {
  display: flex;
}

/* Make sure album media scales nicely */
.media-gallery-album .media-item img,
.media-gallery-album .media-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* show full image/video inside the rectangle */
}

/* Album controls under the media */
.media-album-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.media-album-prev,
.media-album-next {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.95);
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}

body.dark .media-album-prev,
body.dark .media-album-next {
  background: rgba(15, 23, 42, 0.95);
}

/* Preview */
.preview-card {
  margin-top: 8px;
}

/* preview media */
.preview-media {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  background: linear-gradient(135deg, #f0f4ff, #ffe9d5);
}

.placeholder-media {
  height: 160px;
}

/* rating + favorites row */
.rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.rating-stars {
  font-size: 16px;
  cursor: pointer;
}

.rating-stars .star {
  margin-right: 2px;
}

.rating-stars .star.filled {
  color: #fbbf24;
}

.save-btn {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.8);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}

/* Sharing row */
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.share-btn {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.95);
  font-size: 11px;
  padding: 4px 9px;
  cursor: pointer;
}

body.dark .share-btn {
  background: rgba(15, 23, 42, 0.95);
}

/* small circular icon buttons (map/share in detail view) */
.icon-btn {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.95);
  font-size: 13px;
  padding: 3px 7px;
  cursor: pointer;
}

body.dark .icon-btn {
  background: rgba(15, 23, 42, 0.95);
}

/* -----------------------------------------------------------
CONTRIBUTE LAYOUT + IDENTITY
----------------------------------------------------------- */

.contribute-intro {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* NEW: Why your contribution matters */
.contribute-why {
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}

.contribute-why h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.contribute-why ul {
  margin: 0 0 6px;
  padding-left: 18px;
  color: var(--text-muted);
}

.contribute-why li {
  margin-bottom: 3px;
}

.contribute-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.contribute-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px;
}

.contribute-form-column label {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

.contribute-form-column input[type="text"],
.contribute-form-column input[type="url"],
.contribute-form-column select,
.contribute-form-column textarea,
.contribute-form-column input[type="file"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
}

.contribute-form-column textarea {
  min-height: 90px;
  resize: vertical;
}

.contribute-form-column input[type="file"] {
  padding: 6px 2px;
  background: #ffffff;
}

.contribute-form-column .btn {
  margin-top: 10px;
}

.contribute-tips {
  margin-top: 10px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Identity block */
.contribute-identity {
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.8);
  border: 1px dashed var(--border-soft);
}

.contribute-identity-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.identity-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 4px;
}

.profile-setup {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}

.profile-privacy-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

.hidden {
  display: none;
}

/* Preview column */
.contribute-preview-column h3 {
  margin-top: 0;
}

.preview-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* -----------------------------------------------------------
PROFILE
----------------------------------------------------------- */

.profile-box {
  background: var(--card-bg);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
}

#profileInfo {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

#badgeContainer {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--primary-soft), #ffeccf);
  border: 1px solid rgba(0,0,0,0.04);
}

.badge-icon {
  font-size: 13px;
}

.badge-title {
  font-weight: 700;
}

.profile-divider {
  margin: 16px 0 10px;
  border: none;
  border-top: 1px dashed var(--border-soft);
}

.saved-title {
  font-size: 14px;
  margin: 0 0 6px;
}

/* saved places list */
#savedPlacesSection {
  font-size: 13px;
}

.saved-place-card {
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(249, 250, 251, 0.8);
}

/* Recent contributions text */
#recentContributions {
  margin-top: 10px;
  font-size: 12px;
}

/* Inline pill badges under a post author */
.inline-badges {
  margin: 4px 0;
  font-size: 11px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-right: 4px;
  margin-bottom: 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Recent contributions list */
.recent-contributions-list {
  list-style: none;
  padding-left: 0;
  margin: 4px 0 0;
}

.recent-contributions-list li {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 2px;
}

/* -----------------------------------------------------------
ADMIN NOTE
----------------------------------------------------------- */

.admin-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* -----------------------------------------------------------
MODALS (COUNTRY + PRIVACY + TERMS)
----------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.modal.open {
  display: flex;
}

.modal-content {
  background: var(--card-bg);
  color: var(--text-main);
  max-width: 640px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 18px;
  padding: 16px 16px 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  position: relative;
}

.privacy-modal h3 {
  margin-top: 0;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
}
/* -----------------------------------------------------------
FULLSCREEN MEDIA LIGHTBOX (EXPAND PHOTO / VIDEO)
----------------------------------------------------------- */
.media-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  display: none; /* toggled with .open */
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.media-lightbox.open {
  display: flex;
}

.media-lightbox-inner {
  max-width: min(960px, 100% - 32px);
  max-height: min(90vh, 100% - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-lightbox-main {
  flex: 1;
  background: #000;
  border-radius: 14px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-lightbox-main img,
.media-lightbox-main video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Caption + controls row */
.media-lightbox-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.media-lightbox-caption {
  font-size: 13px;
  color: #e5e7eb;
}

.media-lightbox-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.media-lightbox-controls button {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
}

.media-lightbox-controls button:hover {
  background: rgba(30, 64, 175, 0.9);
}

/* MOBILE MAIN */
@media (max-width: 640px) {
  main {
    margin: 12px 0 24px;
    padding: 0 12px;
  }

  #globalBannerSlot {
    padding: 0 16px;
  }

  .main-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-nav {
    order: 2;
  }

  .tab-container {
    order: 1;
  }

  .contribute-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .explore-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .header-controls {
    top: 8px;
    right: 8px;
  }

  .country-name {
    max-width: 110px;
  }
}

/* =========================================================
  NEW UI PIECES (badges, founder tag, recent feed, CTAs)
========================================================= */

.country-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Text-style link button generic (premium spacing + readability) */
.text-link-btn {
  background: none;
  border: none;

  padding: 0;
  margin-top: 10px;

  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;

  color: var(--accent, #2563eb);
  cursor: pointer;
  text-align: left;
}

.text-link-btn:hover {
  text-decoration: underline;
}

.text-link-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Founder’s Pick tag */
.founder-pick-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.6);
  font-size: 11px;
  color: #92400e;
}

/* Make rating row a nice flex row if not already styled */
.place-card .rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.place-card .rating-stars .star {
  cursor: pointer;
  user-select: none;
  font-size: 16px;
}

.place-card .rating-stars .star.filled {
  color: #facc15; /* star yellow */
}

/* COMMENTS ON PLACE ALBUM – styled like a mini chat bubble card */
.comment-section {
  margin-top: 12px;
  padding: 10px 10px 8px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid var(--border-soft);
}

body.dark .comment-section {
  background: rgba(15, 23, 42, 0.95);
}

.comment-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.comment-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

body.dark .comment-title {
  color: var(--teal);
}

.comment-count {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
  max-height: 180px;
  overflow-y: auto;
}

.comment-list::-webkit-scrollbar {
  width: 5px;
}
.comment-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.7);
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}

.comment-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.6);
  flex-shrink: 0;
}

.comment-bubble {
  flex: 1;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

body.dark .comment-bubble {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(55, 65, 81, 0.9);
}

.comment-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.comment-text {
  font-size: 12px;
}

.comment-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.comment-input {
  flex: 1;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  font-size: 12px;
  outline: none;
  background: #ffffff;
}

body.dark .comment-input {
  background: #020617;
}

.comment-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.comment-btn {
  padding: 7px 12px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--accent), #ff9f7a);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.comment-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
}

/* Extra styling for comment footer + replies + emoji row */
.comment-footer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
}

.comment-like-btn,
.comment-reply-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.comment-like-btn:hover,
.comment-reply-btn:hover {
  color: var(--accent);
}

.comment-like-count {
  font-weight: 600;
}

.comment-reply-list {
  list-style: none;
  padding-left: 16px;
  margin: 4px 0 0 0;
}

.comment-reply-item {
  margin-bottom: 4px;
}

.comment-bubble-reply {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(148, 163, 184, 0.6);
}

body.dark .comment-bubble-reply {
  background: rgba(15, 23, 42, 0.9);
}

.comment-reply-input-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.comment-reply-input-row .comment-input {
  width: 100%;
}

.comment-reply-input-row .comment-btn {
  align-self: flex-end;
}

/* Emoji row for both main comments and replies */
.comment-emoji-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.comment-emoji-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
}

/* -----------------------------------------------------------
Reply input styling (rounded and softer)
----------------------------------------------------------- */

/* Make any input whose placeholder starts with "Reply" rounded */
input[placeholder^="Reply"] {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  background: #ffffff;
  color: var(--text-main);
}

/* Dark mode version */
body.dark input[placeholder^="Reply"] {
  background: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

/* -----------------------------------------------------------
Emoji row for reply inputs
----------------------------------------------------------- */

.reply-emoji-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.reply-emoji-btn {
  border: none;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 13px;
  cursor: pointer;
  background: var(--primary-soft);
  color: var(--text-main);
}

.reply-emoji-btn:hover {
  background: var(--primary);
  color: #ffffff;
}

/* -----------------------------------------------------------
LAZY IMAGE FADE-IN
----------------------------------------------------------- */
.lazy-image {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lazy-image.loaded {
  opacity: 1;
}
/* =========================================================
  COUNTRY DETAIL PAGE (Chile template & future countries)
========================================================= */

/* Full country page container inside #explore */
.country-detail-page {
  margin-top: 8px;
  padding: 0;
}

/* Country header card (Tripadvisor-style) — make it frameless */
.country-detail-hero {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 16px;
}

/* Top row in the hero card: back + pill stamp */
.country-detail-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.country-detail-hero-top .text-link-btn.small {
  margin-top: 0;
  font-size: 12px;
}

/* Stamp reused look but slightly bigger */
.country-detail-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(248,250,252,0.98);
  color: #0f172a;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  border: 1px dashed rgba(148,163,184,0.9);
}

.country-detail-stamp .country-flag {
  width: 26px;
  height: 26px;
  font-size: 17px;
}

/* Contributor media strip (rectangle gallery under the header row) */
.country-contributor-strip {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #020617;
  position: relative;
  min-height: 180px;
  max-height: 220px;
  display: flex;
  align-items: stretch;
}

/* Individual slide */
.country-contributor-slide {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}

.country-contributor-slide img,
.country-contributor-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark gradient so text is readable */
.country-contributor-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15,23,42,0.85),
    rgba(15,23,42,0.0) 55%
  );
  pointer-events: none;
}

/* Handle + icons row overlayed on bottom left */
.country-contributor-handle-row {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.country-contributor-handle-label {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(148,163,184,0.7);
}

.country-contributor-handle-row .social-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(248,250,252,0.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* extra class hooks if you want to style by network later */
.social-icon--instagram {}
.social-icon--facebook {}
.social-icon--tiktok {}

/* Simple slide indicator dots (bottom right) */
.country-contributor-dots {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.country-contributor-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(148,163,184,0.8);
}

.country-contributor-dot.active {
  background: #facc15;
}

/* Below hero card: intro + actions */
.country-detail-hero-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 14px;
}

.country-detail-intro {
  flex: 1 1 220px;
  font-size: 13px;
  color: var(--text-muted);
}

.country-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Category grid like big tiles (Food, Must-see, etc.) */
.country-category-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* Premium icon-tile cards */
.country-category-card {
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: var(--card-bg);
  padding: 0;
  display: block;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.10);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.country-category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
  border-color: var(--accent-soft);
}

.country-category-card:active {
  transform: translateY(-1px) scale(0.995);
}

.country-category-card.active {
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.18);
}

.country-category-card--icon {
  overflow: hidden;
}

/* Inner layout: icon + label */
.country-category-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

/* Icon container (glassy premium look) */
.country-category-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.14),
    rgba(22, 163, 74, 0.10)
  );
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 22px rgba(2, 6, 23, 0.10);
}

body.dark .country-category-icon-wrap {
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.22),
    rgba(34, 197, 94, 0.12)
  );
  border-color: rgba(148, 163, 184, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.30);
}

/* “Discover” gets a slightly stronger accent */
.country-category-icon-wrap--all {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.18),
    rgba(22, 163, 74, 0.14)
  );
}

/* SVG sizing */
.gst-cat-ico {
  width: 26px;
  height: 26px;
  color: rgba(15, 23, 42, 0.92);
}

body.dark .gst-cat-ico {
  color: rgba(226, 232, 240, 0.92);
}

/* Text */
.country-category-text {
  padding: 0;
  min-width: 0;
}

.country-category-label {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* We no longer show nav descriptions in premium mode */
.country-category-description {
  display: none;
}

/* Places section text */
.country-empty-category {
  font-size: 13px;
  color: var(--text-muted);
  margin: 12px 0 8px;
}

/* Responsive tweaks for country detail */
@media (max-width: 640px) {
  .country-detail-hero-bottom {
    flex-direction: column;
  }

  .country-detail-stamp {
    font-size: 12px;
    padding: 4px 10px;
  }

  .country-detail-stamp .country-flag {
    width: 22px;
    height: 22px;
    font-size: 15px;
  }

  .country-contributor-strip {
    min-height: 150px;
    max-height: 190px;
  }
}

/* =========================================================
  HIGHLIGHT PILLS & TRENDING ITEMS
========================================================= */

.highlight-pill {
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(248,250,252,0.95);
  border: 1px solid var(--border-soft);
  margin-bottom: 6px;
}

body.dark .highlight-pill {
  background: rgba(15,23,42,0.95);
}

.highlight-pill-title {
  font-size: 13px;
  font-weight: 600;
}

.highlight-pill-stars {
  font-size: 12px;
  margin-left: 4px;
  color: #facc15;
}

.highlight-pill-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Trending block items */
.trending-item {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-soft);
}

.trending-item:last-child {
  border-bottom: none;
}

.trending-title {
  font-size: 13px;
  font-weight: 600;
}

.trending-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.trending-rating {
  font-size: 11px;
  margin-top: 2px;
}

/* --- Chile country page header bar + cover tweaks (legacy bits) --- */

.country-back-btn {
  white-space: nowrap;
  font-size: 12px;
}

/* Search bar just under the cover / hero on the country page */
.country-global-search {
  margin: 14px 0 12px;
}

.country-global-search input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
}

.country-global-search input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}
/* =========================================================
  OVERRIDES FOR CHILE PAGE HEADER + HERO CARD
========================================================= */

/* 1) Make the header white on the Chile page (no dark hero bg) */
body.country-page-open header {
  background: #ffffff;
  /* slightly tighter header height + padding */
  min-height: 90px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-main);
  text-shadow: none;
}

/* Hide global hero slideshow + plane + greetings when on a country page */
body.country-page-open .hero-slideshow,
body.country-page-open .plane,
body.country-page-open .greetings-cloud {
  display: none;
}

/* Remove dark overlay and contrail in the header on country pages */
body.country-page-open header::after,
body.country-page-open header::before {
  display: none;
}

/* Make GoSeeThis title + tagline normal colored on Chile page */
body.country-page-open header h1 {
  color: var(--text-main);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: none;
}

body.country-page-open .tagline {
  color: var(--text-muted);
  text-shadow: none;
}

/* Optional: slightly shrink the logo on Chile page */
body.country-page-open .logo-goseethis {
  width: 150px; /* was 180px */
  filter: none;
  animation: none;
}

/* 2) TripAdvisor-style hero card: fixed rectangle photo area */
.country-detail-hero-slideshow {
  position: relative;
  width: 100%;
  height: 240px; /* fixed height so all photos appear same rectangle */
  overflow: hidden;
  border-radius: 16px;
  background: #000;
}

/* Each slide fills the rectangle; images cover without stretching */
.country-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}

.country-hero-slide.active {
  opacity: 1;
}

.country-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps rectangle consistent regardless of original size */
  display: block;
}

/* 3) Contributor handle + platform icon INSIDE the photo as overlay chip */
.country-hero-photo-meta {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  font-size: 11px;
  line-height: 1.3;
}

.country-hero-photo-meta .country-hero-platform-icon {
  font-size: 14px;
}

.country-hero-photo-meta .country-hero-handle {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small tweak for mobile so overlay doesn't crowd the image */
@media (max-width: 640px) {
  .country-detail-hero-slideshow {
    height: 270px;
  }

  .country-hero-photo-meta {
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    font-size: 10px;
  }
}

/* =========================================================
   CHILE COUNTRY HERO — FIXED RECTANGLE (BIGGER VERSION)
   FULL IMAGE (NO CROPPING) USING object-fit: contain
========================================================= */

.country-detail-hero-media {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #0f172a; /* dark slate so letterboxing looks clean */
  position: relative;
  height: 300px; /* keep your hero height */
}

/* Mobile version: slightly shorter */
@media (max-width: 640px) {
  .country-detail-hero-media {
    height: 240px;
  }
}

/* Container for the slideshow */
.country-contrib-strip-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Where the current slide sits */
.country-contrib-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image ALWAYS fully visible (no crop) */
.country-header-photo-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* KEY CHANGE */
  display: block;
  background: #0f172a; /* fills any letterbox area */
}

/* =========================================================
   CHILE HERO OVERLAY — HANDLE, SOCIAL ICON, LOCATION
========================================================= */

/* Soft top-to-bottom gradient so text is readable */
.country-detail-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.10) 55%,
    transparent
  );
}

/* Text container */
.country-contrib-meta {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 5;
  max-width: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #f8fafc;
}

/* Title of the photo / place */
.country-header-meta-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

/* Row with icon + handle + platform text */
.country-header-meta-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* Handle / username */
.country-header-meta-handle {
  font-weight: 500;
  max-width: 160px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Platform such as Instagram / TikTok / Facebook */
.country-header-meta-platform {
  font-size: 11px;
  opacity: 0.9;
}

/* Optional small location line */
.country-header-meta-location {
  font-size: 11px;
  opacity: 0.85;
}

/* Social icon styling on dark hero background */
.country-contrib-meta .social-icon {
  background: rgba(255, 255, 255, 0.95);
  color: #111827;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10px;
}

/* =========================================================
   CHILE HERO — PLACEHOLDER + MOBILE TWEAKS
========================================================= */

/* Placeholder when there are no contributor photos yet */
.country-contrib-placeholder {
  width: 100%;
  height: 100%;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #e5e7eb;
  background: radial-gradient(circle at top, #0b1120, #020617);
}

/* Mobile refinements */
@media (max-width: 640px) {
  .country-contrib-meta {
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
  }

  .country-header-meta-title {
    font-size: 13px;
  }

  .country-header-meta-user {
    font-size: 11px;
  }

  .country-header-meta-handle {
    max-width: 130px;
  }

  .country-header-meta-location {
    font-size: 10px;
  }
}
/* -----------------------------------------------------------
FULLSCREEN MEDIA LIGHTBOX (for album expand)
----------------------------------------------------------- */
.media-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.media-lightbox.open {
  display: flex;
}

.media-lightbox-inner {
  max-width: 960px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.95);
  border-radius: 18px;
  padding: 10px 10px 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  position: relative;
}

.media-lightbox-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 70vh;
  overflow: hidden;
}

.media-lightbox-media img,
.media-lightbox-media video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
}

.media-lightbox-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: #e5e7eb;
}

.media-lightbox-counter {
  min-width: 60px;
  text-align: center;
}

.media-lightbox-btn {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.95);
  color: #e5e7eb;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
}

.media-lightbox-btn:hover {
  background: rgba(30, 64, 175, 0.9);
}

.media-lightbox-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  color: #e5e7eb;
  font-size: 20px;
  cursor: pointer;
}

/* Expand icon in album header */
.media-album-expand {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(15, 23, 42, 0.04);
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}

.media-album-expand:hover {
  background: rgba(148, 163, 184, 0.18);
}
/* --- Album comments: "You" label --- */
.comment-you-label {
  font-size: 11px;
  color: #6b7280;          /* soft gray */
  margin-left: 4px;
}

/* --- Replies indentation / look --- */
.reply-list {
  margin-top: 6px;
  padding-left: 18px;       /* indent replies */
  border-left: 2px solid #e5e7eb;  /* light vertical line */
}

.reply-item {
  margin-top: 4px;
}

.reply-bubble {
  background: #f9fafb;      /* slightly lighter background */
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
}

.reply-meta {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 2px;
}

.reply-text {
  font-size: 12px;
}

/* Optional: tighten the main comment spacing a bit */
.comment-item {
  margin-bottom: 10px;
}

/* -----------------------------------------------------------
   MEDIA LIGHTBOX – side-by-side media + comments, same height
   ----------------------------------------------------------- */

/* Inner container of the lightbox */
.media-lightbox-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Row that holds the media (left) and comments (right) */
.media-lightbox-main-row {
  display: flex;
  gap: 16px;
  align-items: stretch;        /* make children match height */
  max-height: 80vh;            /* keep the row inside the viewport */
  margin: 12px 0;
}

/* Left side: media container */
#mediaLightboxMain {
  flex: 3;                     /* bigger area for the image/video */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image / video uses the available height of the row */
.media-lightbox-image,
.media-lightbox-video {
  max-width: 100%;
  max-height: 80vh;
  height: 100%;                /* grow to match the row's height */
  object-fit: contain;         /* keep proportions, no weird stretching */
  border-radius: 12px;
}

/* Right side: comments panel, same height as media */
.media-lightbox-comments-wrap {
  flex: 2;                     /* width of side panel; adjust 1–3 to taste */
  max-height: 80vh;
  overflow-y: auto;            /* scroll inside if there are many comments */
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.95);  /* light, readable */
  color: #020617;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

/* Comment bubble styling on light background */
.media-lightbox-comments-wrap .comment-bubble {
  background: #e5e7eb;
}

/* Input spacing inside the comments panel */
.media-lightbox-comments-wrap .comment-input-row {
  margin-top: 8px;
}

/* Replies slightly darker but still light */
.media-lightbox-comments-wrap .reply-bubble {
  background: #d4d4d8;
}

/* Caption under the row */
#mediaLightboxCaption {
  margin-top: 8px;
  font-size: 13px;
  color: #e5e7eb;
  text-align: center;
}
/* -----------------------------------------------------------
   MEDIA LIGHTBOX — Floating left/right arrows
----------------------------------------------------------- */

.media-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  font-size: 34px;
  color: #ffffff;
  background: rgba(0,0,0,0.25);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.media-lightbox-arrow:hover {
  background: rgba(0,0,0,0.45);
  transform: translateY(-50%) scale(1.08);
}

.media-lightbox-arrow-left {
  left: 12px;
}

.media-lightbox-arrow-right {
  right: 12px;
}

/* Mobile-friendly smaller arrows */
@media (max-width: 640px) {
  .media-lightbox-arrow {
    width: 38px;
    height: 38px;
    font-size: 28px;
  }
}

/* -------------------- MOBILE: stack instead of side-by-side -------------------- */
@media (max-width: 768px) {
  .media-lightbox-main-row {
    flex-direction: column;    /* stack: image on top, comments below */
    max-height: none;
  }

  #mediaLightboxMain {
    flex: none;
  }

  .media-lightbox-image,
  .media-lightbox-video {
    height: auto;
    max-height: 55vh;          /* not too tall on small screens */
  }

  .media-lightbox-comments-wrap {
    flex: none;
    max-height: 40vh;          /* comments scroll if too tall */
  }
}
/* -----------------------------------------------------------
   COUNTRY PAGE – Compact Header (logo bigger, tagline below)
   ----------------------------------------------------------- */

body.country-page-open header {
  padding: 6px 12px !important;
  height: auto !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
}

/* Group the name + tagline into a vertical column */
body.country-page-open h1,
body.country-page-open #tagline {
  display: block !important;
}

body.country-page-open h1 {
  font-size: 20px !important;
  line-height: 1 !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
}

body.country-page-open #tagline {
  font-size: 12px !important;
  line-height: 1.1 !important;
  margin: 2px 0 0 8px !important; /* directly below the name */
  padding: 0 !important;
  opacity: 0.85;
}

/* Logo – larger and aligned */
body.country-page-open .logo-goseethis,
body.country-page-open .header-logo {
  width: 40px !important;           /* bigger logo */
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(2px);       /* alignment tweak */
}

/* Hide homepage hero elements on country view */
body.country-page-open .hero-slideshow,
body.country-page-open .plane,
body.country-page-open .greetings-cloud {
  display: none !important;
}
/* =========================================
   Premium tag pills (Hidden Gem / Hotel / Tip)
   ========================================= */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin-right: 6px;
  margin-top: 4px;

  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;

  /* Subtle “floating” feel */
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);

  /* Light mode base — will be overridden by variants below */
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

/* Dark mode base (you already use body.dark) */
body.dark .tag-pill {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.6);
  color: #e5e7eb;
}

/* Hidden Gem ✨ – warm gold / amber gradient */
.tag-pill--hidden {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #facc15;
  color: #92400e;
}

body.dark .tag-pill--hidden {
  background: linear-gradient(135deg, #292524, #facc15);
  color: #fef3c7;
}

/* Hotel / Stay 🏨 – cool blue gradient */
.tag-pill--hotel {
  background: linear-gradient(135deg, #e0f2fe, #bfdbfe);
  border-color: #60a5fa;
  color: #075985;
}

body.dark .tag-pill--hotel {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #e5f2ff;
}

/* Travel Tip 💡 – fresh green gradient */
.tag-pill--tip {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color: #22c55e;
  color: #047857;
}

body.dark .tag-pill--tip {
  background: linear-gradient(135deg, #052e16, #16a34a);
  color: #ecfdf5;
}

/* Optional: tiny hover pop for “premium” feel */
.tag-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

/* ----------------------------------------------------------
   TAG PILLS (on each place card)
---------------------------------------------------------- */
.tag-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 6px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: radial-gradient(circle at top left, #f9fafb, #e5e7eb);
  color: #0f172a;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  white-space: nowrap;
}

/* Hidden Gem – warm gold */
.tag-pill--hidden {
  background: linear-gradient(90deg, #fef3c7, #ffedd5);
  border-color: #fed7aa;
  color: #92400e;
}

/* Hotel – cool blue */
.tag-pill--hotel {
  background: linear-gradient(90deg, #e0f2fe, #dbeafe);
  border-color: #bfdbfe;
  color: #075985;
}

/* Travel Tip – fresh green */
.tag-pill--tip {
  background: linear-gradient(90deg, #dcfce7, #bbf7d0);
  border-color: #86efac;
  color: #047857;
}

/* ----------------------------------------------------------
   TAG FILTER CHIPS (row above place cards)
---------------------------------------------------------- */
.tag-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 8px;
}

.tag-chip-btn {
  border-radius: 999px;
  border: 1px solid var(--border-soft, #e2e8f0);
  background: rgba(15, 23, 42, 0.02);
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted, #6b7280);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.tag-chip-btn:hover {
  background: rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.tag-chip-btn.active {
  background: radial-gradient(circle at top left, #f97316, #facc15);
  border-color: rgba(248, 250, 252, 0.9);
  color: #111827;
  box-shadow: 0 6px 18px rgba(248, 250, 252, 0.85);
}
/* Country page tag filter row */
.country-tag-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px 0;
}

/* Base style for tag chips on the country page */
.tag-chip-btn {
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.02);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}

.tag-chip-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

/* Active state */
.tag-chip-btn.active {
  border-color: rgba(248, 250, 252, 0.9);
  background: radial-gradient(circle at 0% 0%, #f97316 0, #facc15 40%, #22c55e 100%);
  color: #0f172a;
  font-weight: 600;
}

/* Variants – subtle tinted outlines */
.tag-chip-btn--all {
  border-style: dashed;
}

.tag-chip-btn--hidden {
  border-color: rgba(250, 204, 21, 0.7);
}

.tag-chip-btn--hotel {
  border-color: rgba(59, 130, 246, 0.7);
}

.tag-chip-btn--tip {
  border-color: rgba(16, 185, 129, 0.7);
}

/* Dark mode tweaks if you use body.dark */
body.dark .tag-chip-btn {
  border-color: rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.7);
  color: #e5e7eb;
}

body.dark .tag-chip-btn.active {
  color: #020617;
}
/* -----------------------------------------------------------
GLOBAL FOOTER – GoSeeThis
----------------------------------------------------------- */

.site-footer {
  /* border-top removed for a cleaner, more premium feel */
  background: #f9fafb;
  color: #0f172a;
  
  /* ↓↓↓ reduced padding (less tall) ↓↓↓ */
  padding: 12px 16px 16px;
  
  font-size: 12px;
  margin-top: 24px; /* slightly less space above footer */
}

body.dark .site-footer {
  /* border-top removed in dark mode as well */
  background: #020617;
  color: #e5e7eb;
}

.site-footer-inner {
  max-width: 960px;                           /* keeps footer content narrow */
  margin: 0 auto;
}

.site-footer-brand {
  margin-bottom: 16px;
}

.site-footer-logo {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  color: #0f172a;
}

body.dark .site-footer-logo {
  color: #e5e7eb;
}

.site-footer-tagline {
  font-size: 12px;
  color: #6b7280;                             /* soft grey */
  margin-top: 2px;
}

body.dark .site-footer-tagline {
  color: #9ca3af;
}

.site-footer-sections {
  display: grid;
  gap: 4px;               /* reduced space between sections */
  margin-bottom: 10px;    /* tighter bottom spacing */
}

.footer-section {
  border-radius: 8px;         /* slightly smaller radius */
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 4px 8px;           /* smaller padding */
}

body.dark .footer-section {
  border-color: #1f2937;
  background: #020617;
}

/* the clickable row */
.footer-section > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111827;                             /* deep grey/navy */
}

body.dark .footer-section > summary {
  color: #e5e7eb;
}

/* remove default disclosure triangle */
.footer-section > summary::-webkit-details-marker {
  display: none;
}

/* custom plus/minus icon */
.footer-section > summary::after {
  content: "+";
  font-weight: 600;
  font-size: 14px;
  color: #3b82f6;                             /* calm blue icon */
}

.footer-section[open] > summary::after {
  content: "–";
}

/* body text inside each section */
.footer-section p {
  margin: 6px 0 4px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #4b5563;                             /* medium grey for readable text */
}

body.dark .footer-section p {
  color: #9ca3af;
}

/* bottom line with © */
.site-footer-bottom {
  border-top: 1px solid #e5e7eb;
  padding-top: 6px;       /* tighter top padding */
  margin-top: 6px;
  gap: 4px;               /* narrower spacing */
  font-size: 10px;
  color: #6b7280;
}

body.dark .site-footer-bottom {
  border-top-color: #1f2937;
  color: #9ca3af;
}

.site-footer-note {
  opacity: 0.9;
}

/* slightly soften on very small screens */
@media (max-width: 640px) {
  .site-footer {
    padding: 20px 12px 28px;
  }

  .footer-section {
    padding: 6px 8px;
  }
}
/* Small note under trivia field */
.trivia-disclaimer {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
  margin-bottom: 10px;
  line-height: 1.4;
}

body.dark .trivia-disclaimer {
  color: #9ca3af;
}

/* Country-level traveler trivia block */
.country-trivia-card {
  margin: 12px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eff6ff;            /* soft blue */
  border: 1px solid #bfdbfe;
  font-size: 13px;
}

body.dark .country-trivia-card {
  background: rgba(15, 23, 42, 0.9);
  border-color: #1d4ed8;
}

.country-trivia-title {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

body.dark .country-trivia-title {
  color: #e5e7eb;
}

.country-trivia-text {
  margin: 0 0 4px 0;
  color: #1f2937;
  line-height: 1.4;
}

body.dark .country-trivia-text {
  color: #e5e7eb;
}

.country-trivia-flag {
  margin-right: 4px;
}

.country-trivia-meta {
  margin: 0;
  font-size: 11px;
  color: #4b5563;
}

body.dark .country-trivia-meta {
  color: #9ca3af;
}

/* =========================================================
   HELPFUL FOR YOUR VISIT (soft outline buttons)
   ========================================================= */

.gst-helpful-card {
  margin: 10px 0 12px;
  padding: 12px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

body.dark .gst-helpful-card {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.25);
}

/* ---------------------------------------------------------
   COLLAPSIBLE HEADER (premium + neutral)
   Used by the "Plan this trip" toggle button in app.js
   --------------------------------------------------------- */
.gst-helpful-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.gst-helpful-toggle-left {
  min-width: 0;
}

.gst-helpful-chevron {
  font-size: 14px;
  line-height: 1;
  opacity: 0.8;
  margin-top: 2px;
}

body.dark .gst-helpful-chevron {
  opacity: 0.9;
}

/* Expanded body area */
.gst-helpful-body {
  margin-top: 10px;
}

.gst-helpful-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}

body.dark .gst-helpful-title {
  color: #e5e7eb;
}

.gst-helpful-sub {
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
}

body.dark .gst-helpful-sub {
  color: #9ca3af;
}

.gst-helpful-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.gst-helpful-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid #cbd5e1;
  background: transparent;

  text-decoration: none;
  color: #0f172a;
  min-width: 220px;
}

body.dark .gst-helpful-btn {
  border-color: rgba(148, 163, 184, 0.35);
  color: #e5e7eb;
}

.gst-helpful-btn:hover {
  background: rgba(2, 6, 23, 0.04);
}

body.dark .gst-helpful-btn:hover {
  background: rgba(148, 163, 184, 0.12);
}

.gst-helpful-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
}

.gst-helpful-ico {
  font-size: 14px;
  line-height: 1;
}

.gst-helpful-btn-sub {
  font-size: 11px;
  color: #64748b;
  line-height: 1.2;
}

body.dark .gst-helpful-btn-sub {
  color: #9ca3af;
}

.gst-helpful-note {
  margin-top: 8px;
  font-size: 11px;
  color: #64748b;
}

body.dark .gst-helpful-note {
  color: #9ca3af;
}
/* =========================================================
   AFFILIATES MODULE (Premium, restrained)
   Supports BOTH old + new class names
   ========================================================= */

.gst-affiliates-module{
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 18px 50px rgba(2,6,23,0.06);
  backdrop-filter: blur(10px);
}

body.dark .gst-affiliates-module{
  background: rgba(2,6,23,0.55);
  border-color: rgba(148,163,184,0.16);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}

/* NEW header layout from app.js */
.gst-affiliates-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.gst-affiliates-top-left{
  min-width: 0;
}

.gst-affiliates-top-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Keep old header class working too */
.gst-affiliates-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Admin status pill (from your app.js) */
.gst-affiliates-admin-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: rgba(15, 23, 42, 0.78);
}

body.dark .gst-affiliates-admin-pill{
  background: rgba(226, 232, 240, 0.10);
  border-color: rgba(226, 232, 240, 0.16);
  color: rgba(226, 232, 240, 0.88);
}

/* Title + sub (new app.js uses both) */
.gst-affiliates-title{
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.2px;
  color: rgba(15,23,42,0.92);
  line-height: 1.25;
}

body.dark .gst-affiliates-title{
  color: rgba(226,232,240,0.92);
}

.gst-affiliates-sub{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(71,85,105,0.88);
}

body.dark .gst-affiliates-sub{
  color: rgba(148,163,184,0.92);
}

/* Old kicker (keep it if used elsewhere) */
.gst-affiliates-kicker{
  display:inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: rgba(15, 23, 42, 0.78);
  margin-bottom: 6px;
}

body.dark .gst-affiliates-kicker{
  background: rgba(226, 232, 240, 0.10);
  border-color: rgba(226, 232, 240, 0.16);
  color: rgba(226, 232, 240, 0.88);
}

.gst-affiliates-admin-btn{
  white-space: nowrap;
}

/* Grid: your updated app.js uses gst-affiliates-grid, but keep old gst-affiliates-links too */
.gst-affiliates-grid,
.gst-affiliates-links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px){
  .gst-affiliates-grid,
  .gst-affiliates-links{
    grid-template-columns: 1fr;
  }
}

/* Cards: updated app.js uses gst-affiliate-card + gst-affiliate-label + gst-affiliate-note */
.gst-affiliate-card,
.gst-affiliates-btn{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.72);
  text-decoration:none;
  color: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.gst-affiliate-card:hover,
.gst-affiliates-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(2,6,23,0.08);
  border-color: rgba(15,23,42,0.22);
  background: rgba(255,255,255,0.86);
}

body.dark .gst-affiliate-card,
body.dark .gst-affiliates-btn{
  background: rgba(15,23,42,0.48);
  border-color: rgba(148,163,184,0.14);
}

body.dark .gst-affiliate-card:hover,
body.dark .gst-affiliates-btn:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
  border-color: rgba(226,232,240,0.18);
  background: rgba(15,23,42,0.58);
}

.gst-affiliate-label{
  font-weight: 750;
  font-size: 13px;
  color: rgba(15,23,42,0.92);
  line-height: 1.25;
}

body.dark .gst-affiliate-label{
  color: rgba(226,232,240,0.96);
}

.gst-affiliate-note{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(71,85,105,0.90);
}

body.dark .gst-affiliate-note{
  color: rgba(148,163,184,0.92);
}

/* Keep your older optional pieces working */
.gst-affiliates-emoji{
  width: 22px;
  text-align:center;
  font-size: 16px;
}

.gst-affiliates-label{
  font-weight: 750;
  font-size: 13px;
  color: rgba(15,23,42,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .gst-affiliates-label{
  color: rgba(226,232,240,0.92);
}

.gst-affiliates-arrow{
  margin-left:auto;
  opacity: 0.55;
}

/* Empty state */
.gst-affiliate-empty,
.gst-affiliates-empty{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(71,85,105,0.90);
  padding: 10px 2px 2px;
}

body.dark .gst-affiliate-empty,
body.dark .gst-affiliates-empty{
  color: rgba(148,163,184,0.92);
}

.gst-affiliate-empty-sub{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(71,85,105,0.82);
}

body.dark .gst-affiliate-empty-sub{
  color: rgba(148,163,184,0.86);
}

/* Footer note in the module */
.gst-affiliates-disclosure{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,0.14);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.2px;
  color: rgba(71,85,105,0.78);
}

body.dark .gst-affiliates-disclosure{
  border-top-color: rgba(148,163,184,0.12);
  color: rgba(148,163,184,0.78);
}

/* =========================================================
   AFFILIATES MODAL
   ========================================================= */

.gst-affiliates-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2,6,23,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.gst-affiliates-modal{
  width: min(860px, 96vw);
  max-height: 86vh;
  overflow:auto;
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148,163,184,0.28);
  box-shadow: 0 30px 90px rgba(0,0,0,0.35);
  padding: 14px;
}

body.dark .gst-affiliates-modal{
  background: rgba(2,6,23,0.86);
  border-color: rgba(148,163,184,0.22);
}

.gst-affiliates-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
  margin-bottom: 12px;
}

body.dark .gst-affiliates-modal-head{
  border-bottom-color: rgba(148,163,184,0.18);
}

.gst-affiliates-modal-title{
  font-size: 16px;
  font-weight: 900;
  color: rgba(15,23,42,0.92);
}

body.dark .gst-affiliates-modal-title{
  color: rgba(226,232,240,0.92);
}

.gst-affiliates-modal-sub{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(100,116,139,0.95);
}

body.dark .gst-affiliates-modal-sub{
  color: rgba(148,163,184,0.92);
}

.gst-affiliates-form-head{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 850;
  color: rgba(15,23,42,0.78);
}

body.dark .gst-affiliates-form-head{
  color: rgba(226,232,240,0.82);
}

.gst-affiliates-row{
  display:grid;
  grid-template-columns: 70px 1fr 1.3fr;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 860px){
  .gst-affiliates-row{
    grid-template-columns: 70px 1fr;
  }
}

.gst-affiliates-hint{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(100,116,139,0.95);
}

body.dark .gst-affiliates-hint{
  color: rgba(148,163,184,0.92);
}

/* =========================================================
   REMOVE the Explore dropdown filters (Category + Regions)
   ========================================================= */

/* Hide the whole Regions dropdown row (this is the one your CSS defines) */
.country-region-filter-row,
.country-region-filter-label {
  display: none !important;
}

.contribute-disclaimer {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #6b7280; /* soft grey */
  max-width: 480px;
}

body.dark .contribute-disclaimer {
  color: #9ca3af;
}
/* =========================================
   COMPONENTS USING ACCENT COLORS
   ========================================= */

/* Main page background */
body {
  background: var(--bg-main);
  color: var(--text-main);
}

/* Generic elevated cards (country cards, place cards, profile cards, etc.) */
.country-card,
.place-card,
.profile-card,
.country-detail-hero,
.country-trivia-card,
.saved-place-card,
.highlight-pill,
.trending-item {
  background: var(--bg-elevated);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-soft);
}

/* Generic buttons */
.btn,
.save-btn,
.theme-toggle,
.accent-btn {
  border-radius: var(--button-radius);
  border: 1px solid transparent;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  background: var(--accent-primary);
  color: #ffffff;
}

/* 'Soft' style buttons (like map buttons, some small pills) */
.map-btn,
.text-link-btn,
.banner-close-btn {
  border-radius: var(--button-radius);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
}

/* Accent toggle buttons: highlight selected via JS or :focus styles if needed */
.accent-switcher .accent-btn {
  background: var(--bg-elevated);
  color: var(--text-main);
  border-color: var(--border-soft);
}

.accent-switcher .accent-btn:focus,
.accent-switcher .accent-btn:active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Explore chips row */
.chip-btn {
  border-radius: var(--button-radius);
  border: 1px solid transparent;
  background: var(--chip-bg);
  color: var(--text-main);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}

.chip-btn.active {
  background: var(--chip-bg-active);
  color: var(--chip-text-active);
}

/* Country stamp (flag + name overlay on card) */
.country-stamp {
  background: linear-gradient(
    to right,
    rgba(15, 23, 42, 0.86),
    rgba(15, 23, 42, 0.5)
  );
  color: #f9fafb;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Badge pills (profile badges, inline place badges) */
.badge,
.badge-pill {
  background: var(--accent-pill-bg);
  border: 1px solid var(--accent-pill-border);
  color: var(--text-main);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
}

/* Tag pills under places (Hidden Gem / Hotel / Tip) */
.tag-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  margin-right: 4px;
  margin-bottom: 4px;
  background: var(--accent-pill-bg);
  border: 1px solid var(--accent-pill-border);
  color: var(--text-main);
}

/* Comment bubbles: soft, neutral container */
.comment-bubble,
.reply-bubble {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Daily inspiration + highlights boxes (if you have them) */
.highlight-empty {
  font-size: 12px;
  color: var(--text-muted);
}

/* New contribution banner text inherits accent via background gradient,
   so we keep text neutral and let banner's own gradient define its color. */
#newContributionBanner {
  font-size: 13px;
}

/* Small inputs (search, comment inputs, etc.) */
input[type="text"],
textarea {
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
}

/* Focus states */
input[type="text"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04);
}
/* ===========================================================
   FINAL OVERRIDE – REMOVE MAP BACKGROUND + AIRMAIL FRAME
   =========================================================== */

/* 1) Make the page background clean (no map / texture) */
html,
body {
  background-image: none !important;
  background-color: var(--page-bg) !important;
}

/* 2) Remove any decorative frame drawn with ::before / ::after */
body::before,
body::after {
  content: none !important;
  background: none !important;
  border: none !important;
  border-image: none !important;
  box-shadow: none !important;
}

/* 3) Turn the header into a clean premium bar and hide slideshow */
header {
  background-image: none !important;
  background-color: var(--page-bg-alt) !important;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

/* 4) Main layout uses full page width without extra outer card */
.main-layout {
  max-width: 1100px;
  margin: 24px auto 40px auto;
  padding: 0 16px;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* 5) Keep country cards and place cards clean and premium */
.country-card {
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background-color: var(--page-bg-alt);
}

.place-card {
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background-color: var(--page-bg-alt);
}
/* ==== FIX HEADER LAYERING + CLICKABILITY ==== */

.site-header {
  position: relative;
  z-index: 10;
}

/* Lonely Planet–style top bar */
.topbar {
  position: relative;
  z-index: 20;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
}

/* Hero area sits behind the bar */
.hero-shell {
  position: relative;
  z-index: 0;
}

/* Make sure the animated layers never block clicks */
.hero-slideshow,
.plane,
.greetings-cloud {
  pointer-events: none;
}
/* ==== RESTORE HERO COVER + GREETINGS VISUALLY ==== */

/* Keep the header shell tall enough to show the slideshow + plane */
.hero-shell {
  position: relative;
  min-height: 220px;      /* adjust taller if you want a bigger hero */
  overflow: hidden;
}

/* Make sure slideshow still shows */
.hero-slideshow {
  display: block !important;
  position: absolute;
  inset: 0;
  opacity: 1;
}

/* Show plane + greetings again (visually) */
.plane,
.greetings-cloud {
  display: block !important;
}

/* Keep them from blocking button clicks */
.hero-slideshow,
.plane,
.greetings-cloud {
  pointer-events: none;
}
/* Override any "country page" rules that hide the hero */
body.country-page-open .hero-slideshow,
body.country-page-open .plane,
body.country-page-open .greetings-cloud {
  display: block !important;
}
/* ==== FULL-WIDTH TOP BAR + HERO (NO GREY GUTTERS) ==== */

/* Make sure the header itself goes edge-to-edge */
.site-header {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

/* Top bar background spans full width */
.topbar {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

/* Keep the content inside centered, but not boxed */
.topbar-inner {
  max-width: 1120px;      /* you can tweak this number if you want it wider/narrower */
  margin: 0 auto;
  padding: 10px 16px;
}

/* Hero area under the bar should also stretch full width
   Bigger Lonely Planet–style hero (desktop) */
.hero-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: transparent;

  /* Make sure it behaves like a hero container */
  position: relative;
  overflow: hidden;

  /* 👇 Height of the cover area on desktop/tablet */
  min-height: 400px;
}

/* On phones, keep it a bit shorter so content is still visible */
@media (max-width: 640px) {
  .hero-shell {
    min-height: 260px;
  }
}

/* Make sure the slideshow fills the hero horizontally */
.hero-slideshow {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
}

/* Remove any outer margin at the very top of the main layout
   so there is no grey strip between hero and content */
.main-layout {
  margin-top: 0;
}
/* ===== TOPBAR BRAND — UPDATED LOOK ===== */

/* Make the logo slightly larger */
.topbar-logo {
  height: 52px;     /* was probably around 32–40 — now slightly bigger */
  width: auto;
}
/* Brand name */
.topbar-title {
  font-size: 22px;         /* slightly larger, modern */
  font-weight: 700;        /* bold but not too heavy */
  color: #1e293b;          /* blue-grey (matches dark/light theme nicely) */
  letter-spacing: -0.5px;  /* subtle premium feel */
}

/* Tagline */
.topbar-tagline {
  font-size: 13px;
  font-weight: 400;
  color: #64748b;          /* softer blue-grey */
  margin-top: 2px;
}
body.dark .topbar-title {
  color: #e2e8f0;   /* near white but not pure white */
}

body.dark .topbar-tagline {
  color: #94a3b8;   /* soft grey-blue */
}
/* =========================================
   COUNTRY PAGE: CLEAN HEADER ONLY
   - Hide hero area on country detail pages
   ========================================= */

body.country-page-open .hero-shell {
  display: none;
}

/* =========================================
   HERO BACKGROUND + ANIMATION
   - All slides use the same background behaviour
   - Only base slides (the 4 originals) animate
   ========================================= */

#homeHero {
  position: relative;
  background-size: cover;           /* nicely fills the hero area */
  background-position: center center;
  background-repeat: no-repeat;

  /* no animation by default */
  animation: none !important;
}

/* JS adds .hero-animated ONLY for the 4 standard covers */
#homeHero.hero-animated {
  animation: heroPan 18s ease-in-out infinite !important;
}

/* The hero wrapper is the positioning context for the pill */
.hero-shell {
  position: relative;
}

/* =========================================
   HERO CREDIT PILL
   ========================================= */

#homeHeroCredit {
  position: relative;
  left: 0;
  bottom: 0;

  /* space below the human line */
  margin-top: 10px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 11px;
  border-radius: 999px;

  font-size: 12.5px;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.18);
  color: #f9fafb;

  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  max-width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  z-index: 9;
  pointer-events: auto;
  cursor: pointer !important;
}

/* JS will toggle this class ONLY for featured contributor slides */
#homeHeroCredit.hero-credit-visible {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* =========================================
   FEATURED HERO – BLURRED BACKGROUND + FULL PHOTO
   ========================================= */

/* When a featured photo is active, ONLY hide the slideshow AFTER the image is ready */
#homeHero.hero-has-featured-cover:not(.hero-featured-ready) .hero-slideshow {
  opacity: 1;               /* keep slideshow visible while loading */
  pointer-events: none;
}

#homeHero.hero-has-featured-cover.hero-featured-ready .hero-slideshow {
  opacity: 0;               /* hide slideshow only when featured image is loaded */
  pointer-events: none;
}

/* Container for blurred + sharp layers */
#homeHero.hero-has-featured-cover {
  position: relative;
  overflow: hidden;

  /* keep using the image set by JS so ::before / ::after can inherit it */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* fallback color behind everything */
  background-color: #020617;
}
/* =========================================================
   FEATURED HERO – BLURRED BACKGROUND + FULL PHOTO
   IMPORTANT: Only render layers when hero-featured-ready is ON
========================================================= */

/* If featured cover is active but NOT ready yet, DO NOT show anything */
#homeHero.hero-has-featured-cover:not(.hero-featured-ready)::before,
#homeHero.hero-has-featured-cover:not(.hero-featured-ready)::after {
  content: none !important;
}

/* ✅ Blurred background layer (ONLY when ready) */
#homeHero.hero-has-featured-cover.hero-featured-ready::before {
  content: "";
  position: absolute;
  inset: -10px;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(12px);
  transform: scale(1.02);
  z-index: 0;
}

/* ✅ Sharp contained photo (ONLY when ready) */
#homeHero.hero-has-featured-cover.hero-featured-ready::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;

  background-image: inherit;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;

  max-width: min(960px, 90vw);
  max-height: 100%;
  z-index: 1;
}

/* ✅ When NOT featured, force-remove any pseudo layer leftovers */
#homeHero:not(.hero-has-featured-cover)::before,
#homeHero:not(.hero-has-featured-cover)::after {
  content: none !important;
}

/* Keep hero contents (logo, text, plane, greetings, credit pill) above both layers */
#homeHero.hero-has-featured-cover > * {
  position: relative;
  z-index: 2;
}

/* Sharp full photo on top, contained (no cropping) */
#homeHero.hero-has-featured-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;

  background-image: inherit;        /* same photo again */
  background-size: contain;         /* show entire image */
  background-position: center center;
  background-repeat: no-repeat;

  max-width: min(960px, 90vw);
  max-height: 100%;
  z-index: 1;
}

/* Keep hero contents (logo, text, plane, greetings, credit pill) above both layers */
#homeHero.hero-has-featured-cover > * {
  position: relative;
  z-index: 2;
}
/* Make sure the hero itself is the positioning container */
#homeHero {
  position: relative;
}
/* Force the credit pill to always show a hand pointer */
#homeHeroCredit,
.hero-featured-credit {
  cursor: pointer !important;
}
/* Force the credit pill and everything inside it to show a hand pointer */
#homeHeroCredit,
#homeHeroCredit * ,
.hero-featured-credit,
.hero-featured-credit * {
  cursor: pointer !important;
}
/* Blurry background for country header contributor strip */
.country-contrib-strip {
  position: relative;
  overflow: hidden;
}
/* =========================================
   Country contributor strip – blurred background
   ========================================= */
.country-detail-hero-media.country-contrib-strip {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 260px;     /* ← FIXED HEIGHT */
}

/* Blurred background layer that matches the current slide */
.country-contrib-blur-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.1); /* avoid edges after blur */
  opacity: 0.9;
  z-index: 0;
}

/* Foreground row: we center the photo, and let the text sit on the left */
.country-contrib-strip-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;        /* ← now matches the outer strip perfectly */
  padding: 0 18px;     /* keep only side padding */
}

/* Big, centered foreground photo card */
.country-contrib-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* EXACT center */

  width: 360px;      /* you can adjust */
  height: 240px;     /* you can adjust */
  max-width: 80%;

  border-radius: 16px;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.country-contrib-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text area pinned to the left, above the blur */
.country-contrib-meta {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 40%;

  color: #f9fafb;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Optional: fine-tune text sizing */
.country-header-meta-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.country-header-meta-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.95;
}

.country-header-meta-location {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}
/* =========================================
   Place media albums – blurred background
   ========================================= */
.media-album {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000; /* fallback if no image */
}

.media-album-blur-bg {
  position: absolute;
  inset: 0;
  /* background-image is now set inline from JS */
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.08); /* avoid edges after blur */
  opacity: 0.9;
  z-index: 0;
}

/* Foreground content (gallery + controls) */
.media-album-inner {
  position: relative;
  z-index: 1;
}

/* Make sure the gallery itself still behaves as before */
.media-gallery.media-gallery-album {
  position: relative;
}

/* Only the active media-item is visible */
.media-item {
  display: none;
}

.media-item.active {
  display: block;
}
/* Make the album foreground transparent so the blur shows through */
.media-gallery.media-gallery-album,
.media-gallery.media-gallery-album .media-item {
  background: transparent !important;
}

/* Center the active media vertically & horizontally inside the album */
.media-gallery.media-gallery-album {
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: center;  /* horizontal centering */
  min-height: 240px;        /* adjust height if needed */
  padding: 0 !important;    /* remove uneven spacing */
}

/* IMPORTANT: don't override display here, just center content */
.media-gallery.media-gallery-album .media-item {
  align-items: center;
  justify-content: center;
}

/* Active media items */
.media-item.active {
  display: block;
}

/* Media fills the height of the album */
.media-gallery.media-gallery-album img,
.media-gallery.media-gallery-album video {
  height: 100%;        /* ← fills the full height */
  width: auto;         /* ← keeps aspect ratio */
  object-fit: cover;   /* ← no empty space, fully fills */
  border-radius: 12px;
}
/* ============================================================
   ADMIN HERO PHOTO CHOOSER (small thumbnails)
   ============================================================ */

.admin-hero-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.admin-hero-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.admin-hero-thumb input[type="radio"] {
  display: none;
}

/* Thumbnail image */
.admin-hero-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

/* When selected: green border */
.admin-hero-thumb input[type="radio"]:checked + img,
.admin-hero-thumb input[type="radio"]:checked ~ img {
  border-color: #22c55e; /* green-500 */
}

/* Hover effect */
.admin-hero-thumb img:hover {
  border-color: #a3a3a3;
}
/* Hide hero shell completely when not on Explore */
body.hide-hero .hero-shell {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* =========================================================
   TAB BAR – ACTIVE LOOK + UNDERLINE + SMALL HOVER EFFECT
   (Explore / Contribute / Profile / Admin)
   ========================================================= */

.tab-btn {
  position: relative;
  padding-bottom: 6px;               /* space for the underline */
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* Slightly dim non-active tabs so the active one stands out */
.tab-btn:not(.active) {
  opacity: 0.75;
}

.tab-btn:hover {
  opacity: 1;
}

/* Underline line (hidden by default) */
.tab-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;          /* uses the tab’s text color */
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition:
    transform 180ms ease-out,
    opacity 180ms ease-out;
}

/* Active tab: stronger + visible underline */
.tab-btn.active {
  font-weight: 600;
  opacity: 1;
}

.tab-btn.active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* =========================================================
   TAB CONTENT – SMALL FADE / SLIDE IN WHEN YOU SWITCH TABS
   (The .tab elements are already toggled with .active in JS)
   ========================================================= */

.tab.active {
  /* This does NOT change your display: it only animates */
  animation: tabFadeIn 180ms ease-out;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   EXPLORE CATEGORY CHIPS — ACTIVE + UNDERLINE + HOVER EFFECT
   ========================================================= */

.chip-btn {
  position: relative;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: var(--surface2);
  color: var(--text-normal);
  transition: background 160ms ease, opacity 160ms ease;
}

/* Hover effect */
.chip-btn:hover {
  background: var(--surface3);
}

/* Dim inactive chips slightly */
.chip-btn:not(.active) {
  opacity: 0.8;
}

.chip-btn.active {
  opacity: 1;
  font-weight: 600;
  background: var(--surface3); 
}

/* Animated underline */
.chip-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform: scaleX(0);
  opacity: 0;
  transition:
    transform 180ms ease-out,
    opacity 180ms ease-out;
}

.chip-btn.active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Optional: smoother animation when the Explore grid updates */
#countryList {
  animation: exploreFadeIn 200ms ease-out;
}

/* Progressive reveal control */
#exploreMoreCountriesWrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 6px;
}

#exploreMoreCountriesBtn {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: 0.02em;

  background: var(--accent-color);
  color: #fff;

  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

#exploreMoreCountriesBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  filter: brightness(1.02);
}

#exploreMoreCountriesBtn:active {
  transform: translateY(0px) scale(0.99);
}

body.dark #exploreMoreCountriesBtn {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

@keyframes exploreFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   COMMENT BUBBLES — Cleaner, rounded, modern look
   ========================================================= */

.comment-section {
  margin-top: 14px;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.comment-item,
.reply-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

/* Avatar placeholder (optional circle) */
.comment-avatar {
  width: 32px;
  height: 32px;
  background: var(--surface3);
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Main comment bubble */
.comment-bubble,
.reply-bubble {
  background: var(--surface2);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.12);
  width: 100%;
}

/* Reply bubble slightly smaller + indented */
.reply-list {
  list-style: none;
  padding-left: 35px;
  margin-top: 6px;
}

.reply-bubble {
  background: var(--surface1);
  border-radius: 12px;
  margin-top: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}

/* Comment text + metadata */
.comment-meta,
.reply-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.comment-text,
.reply-text {
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-wrap;
}

/* “(You)” label */
.comment-you-label {
  font-size: 10px;
  color: var(--accent);
}

/* Input row for comments + replies */
.comment-input-row,
.comment-reply-input-row {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-input,
.reply-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--surface3);
  background: var(--surface1);
  font-size: 13px;
}

.comment-input:focus,
.reply-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface2);
}

.comment-btn,
.reply-post-btn {
  align-self: flex-end;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
}

.comment-btn:hover,
.reply-post-btn:hover {
  opacity: 0.9;
}

/* Emoji buttons */
.comment-emoji-row {
  display: flex;
  gap: 6px;
}

.comment-emoji-btn {
  background: var(--surface2);
  border: none;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.comment-emoji-btn:hover {
  background: var(--surface3);
}
/* =========================================================
   COMMENT ACTION BUTTONS (Edit / Delete)
   ========================================================= */

.comment-actions-row {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.comment-action-btn {
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  background: var(--surface3);
  color: var(--text-muted);
}

.comment-action-btn:hover {
  background: var(--accent);
  color: #ffffff;
}

.comment-action-btn--danger {
  background: #fee2e2;
  color: #b91c1c;
}

.comment-action-btn--danger:hover {
  background: #fecaca;
  color: #7f1d1d;
}
/* =========================================================
   COMMENT META NOTES (Edited, etc.)
   ========================================================= */
.comment-edited-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
/* ============================================================
   PREMIUM PLACE CARD LAYOUT — TRIPADVISOR STYLE
   ============================================================ */

/* --- Rating + Title --- */
.place-card-header {
  margin-bottom: 10px;
}

.place-rating-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.rating-stars {
  font-size: 16px;
}

.place-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--primary, #0f172a);
}

/* --- Category Chip --- */
.place-category-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
  font-weight: 600;
}

body.dark .place-category-chip {
  background: rgba(255,255,255,0.1);
  color: #e5e7eb;
  border-color: rgba(255,255,255,0.15);
}

/* --- Tag Pills Row --- */
.place-tag-pills-row {
  margin: 10px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- Description Block --- */
.place-description-block {
  margin: 14px 0 12px;
}

.place-description-label {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 4px;
}

.place-description-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main, #111827);
}

body.dark .place-description-text {
  color: #e5e7eb;
}

/* --- Quick Facts Box --- */
.place-quick-facts {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.45;
  color: #1e293b;
}

body.dark .place-quick-facts {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #e5e7eb;
}

.place-quick-facts p {
  margin: 3px 0;
}

/* --- Actions Row --- */
.place-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 18px;
}

.place-actions-row .save-btn {
  background: var(--accent-primary, #ef4444);
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  color: white;
  font-size: 13px;
  cursor: pointer;
}

.place-actions-row .save-btn:hover {
  opacity: 0.9;
}

.place-actions-row .icon-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.place-actions-row .icon-btn:hover {
  background: #e5e7eb;
}

body.dark .icon-btn {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #e5e7eb;
}

/* --- Comment Section Spacing Fix (now at bottom) --- */
.comment-section {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,0.25);
}
/* =========================================
   COMPACT COMMENT SECTION (SOCIAL-STYLE)
   ========================================= */
.comment-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle, #e5e7eb);
  font-size: 13px;
}

.comment-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.comment-title {
  font-weight: 600;
}

.comment-count {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

/* List + items */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-item {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-item--empty {
  border-bottom: none;
  padding: 4px 0 6px 0;
}

.comment-empty-text {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

/* Small avatar circle */
.comment-avatar,
.comment-avatar--small {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5f5);
  flex-shrink: 0;
}

/* Body text */
.comment-body {
  flex: 1;
}

.comment-header-line {
  font-size: 12px;
  font-weight: 600;
}

.comment-author {
  font-weight: 600;
}

.comment-you-label {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-left: 4px;
}

.comment-text {
  font-size: 13px;
  margin-top: 2px;
}

/* Meta line: time, edited, reply, edit, delete */
.comment-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

.comment-meta-time {
  opacity: 0.9;
}

.comment-meta-dot {
  opacity: 0.6;
}

.comment-meta-edited {
  font-style: italic;
}

.comment-meta-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
}

.comment-meta-btn:hover {
  text-decoration: underline;
}

.comment-meta-btn--danger {
  color: #b91c1c;
}

/* View all / show fewer */
.comment-toggle-wrapper {
  border-bottom: none;
  padding: 0 0 4px 0;
}

.comment-toggle-all {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
}

.comment-toggle-all:hover {
  text-decoration: underline;
}

/* Replies */
.reply-list {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0 0 0 0;
}

.reply-item {
  padding: 2px 0 2px 0;
}

.reply-body {
  margin-left: 0;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.3);
}

.reply-header-line {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

.reply-author {
  font-weight: 500;
}

.reply-time,
.reply-edited {
  font-size: 11px;
}

.reply-text {
  font-size: 13px;
  margin-top: 1px;
}

.reply-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

/* Main composer row under comments */
.comment-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 0 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.comment-input-row--main {
  margin-top: 10px;
}

.comment-input {
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}

.comment-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
}

/* Emoji + Post compact buttons */
.comment-emoji-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.comment-emoji-btn:hover {
  transform: translateY(-1px);
}

.comment-btn {
  border-radius: 999px;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: #0f172a;
  color: #f9fafb;
  white-space: nowrap;
}

.comment-btn:hover {
  opacity: 0.94;
}

/* Small inline reply composer that appears under a comment */
.reply-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.reply-input {
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  padding: 5px 10px;
  font-size: 12px;
  outline: none;
}

.reply-input:focus {
  border-color: #2563eb;
}
.place-rating-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.place-title--inline {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  line-height: 1.2;
}
/* Rating number + stars inline style */
.place-rating-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rating-number {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
}
/* Make rating number visible on dark theme */
body.dark .rating-number,
.dark .rating-number{
  color: rgba(248, 250, 252, 0.92);
}
.rating-stars .star {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
/* === Unified place header: title + rating on one row === */
.place-card-header {
  margin-bottom: 6px;          /* ✅ less vertical space */
}

.place-header-top-row {
  display: flex;
  align-items: center;         /* ✅ prevents extra baseline space */
  justify-content: space-between;
  gap: 10px;                   /* ✅ slightly tighter */
}

.place-title-main {
  font-size: 17px;             /* ✅ slightly smaller */
  font-weight: 700;
  margin: 0;
  line-height: 1.15;           /* ✅ reduces “tall” look */
}

.place-rating-block {
  display: flex;
  align-items: center;
  gap: 3px;                    /* ✅ tighter */
  white-space: nowrap;
}

.place-rating-block .rating-number {
  font-size: 13px;             /* ✅ slightly smaller */
  font-weight: 600;
}

.place-rating-block .rating-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 14px;
}
/* === Unified place header: title + rating on one row === */
.place-card-header {
  margin-bottom: 8px;
}

.place-header-top-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.place-title-main {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.place-rating-block {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.place-rating-block .rating-number {
  font-size: 14px;
  font-weight: 600;
}

.place-rating-block .rating-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 14px;
}
/* === Rating Above Title (Modern Premium Style) === */
.place-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.place-rating-row .rating-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.place-rating-row .rating-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 14px;
}

/* Title under rating */
.place-title-main {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px 0;
}
/* === INLINE RATING + TITLE (Premium Maps-Style Layout) === */

/* Container for the entire inline row */
.place-header-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap; /* allows small screens to break nicely */
  margin-bottom: 6px;
}

/* Rating number */
.place-header-inline .rating-number {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

/* Stars */
.place-header-inline .rating-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px); /* micro-align with number */
}

/* Title inline with rating */
.place-title-inline {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  display: inline;
  color: var(--text-main);
}
/* === PREMIUM QUICK FACTS ROW === */

.place-quick-facts {
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12px;
}

.place-quick-facts-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.place-quick-facts-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-bottom: 6px;
}

@media (min-width: 640px) {
  .place-quick-facts-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.place-quick-fact-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.place-quick-fact-icon {
  flex-shrink: 0;
}

.place-quick-fact-label {
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
}

.place-quick-fact-value {
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-quick-facts-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  padding-top: 6px;
  margin-top: 4px;
}

.place-quick-facts-map a {
  font-size: 11px;
  color: var(--accent, #60a5fa);
  text-decoration: none;
}

.place-quick-facts-map a:hover {
  text-decoration: underline;
}

.place-quick-facts-contributor p {
  margin: 0;
  font-size: 11px;
}
/* Hero album: base media item */
.media-item {
  position: relative;
  overflow: hidden;
}

/* Make videos look like thumbnails, not big players */
.media-item--video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

/* ▶ overlay icon for video thumbnails */
.media-item-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: radial-gradient(circle at center, rgba(0,0,0,0.35), transparent 60%);
  pointer-events: none;
  color: #f9fafb;
}
/* REMOVE emoji buttons completely (white circle issue) */
.comment-emoji-btn,
.comment-emoji-row {
  display: none !important;
}
/* Hide stray avatar bubble between comments and composer */
.comment-section > .comment-avatar,
.comment-section > .comment-avatar.comment-avatar--small {
  display: none !important;
}
/* Hide the avatar bubble in the comment composer row */
.comment-input-row .comment-avatar,
.comment-input-row .comment-avatar.comment-avatar--small {
  display: none !important;
}
/* ============================
   Unified hero media grid
   (1 big tile + 4 small)
   ============================ */

.media-album-grid {
  margin-top: 10px;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}

.media-album-grid .media-album-inner {
  position: relative;
  padding: 0;
  background: transparent;
}

/* Grid layout: big image on the left, 4 small tiles on the right */
.media-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1.3fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border-radius: 18px;
  overflow: hidden;
}

/* Base tile button */
.media-hero-tile {
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

/* Big hero tile (takes full left side) */
.media-hero-main {
  grid-row: 1 / span 2;
  grid-column: 1 / span 1;
}

/* Small right-side tiles */
.media-hero-thumb {
  aspect-ratio: 4 / 3;
}

/* Wrap for image / video */
.media-hero-media-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.media-hero-media-wrap img,
.media-hero-media-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Video play icon overlay */
.media-hero-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  pointer-events: none;
}

/* "+N" overlay on last thumb when more media exist */
.media-hero-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

/* Compact expand button over the grid */
.media-album-grid .media-album-expand {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  color: #f9fafb;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
}
/* -------------------------------------------------
   PREMIUM PLACE CARD SHELL + SECTION SPACING
   ------------------------------------------------- */

/* Card container – white, rounded, subtle shadow */
.place-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
  padding: 16px 16px 20px;
  margin-bottom: 20px;
}

/* Each content section inside the card */
.place-section {
  margin-top: 16px;
}

/* Section titles: Traveler Highlights, Quick Facts, Comments, etc. */
.place-section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px 0;
}

/* Slightly lighter body text inside sections */
.place-description-text,
.place-quick-facts-row,
.traveler-highlights-section,
.place-comments-section {
  font-size: 14px;
  line-height: 1.45;
}

/* Thin divider between major sections if they directly stack */
.place-description-section {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 12px;
  margin-top: 18px;
}

.place-comments-section {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 12px;
  margin-top: 18px;
}
/* Traveler Highlights bullets – clean and readable */
.traveler-highlights-section ul {
  margin: 0 0 4px 0;
  padding-left: 18px;
}

.traveler-highlights-section li {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
}

/* "+ View all traveler notes" link */
.traveler-highlights-section .traveler-notes-link {
  margin-top: 4px;
  padding-left: 0;
  font-size: 13px;
}
/* ================================================
   Fix single-photo albums so the image is not cropped
   ================================================ */
.media-hero-grid:has(.media-hero-tile:nth-child(1)):not(:has(.media-hero-tile:nth-child(2))) {
  display: block !important;       /* turn off the 2x2 grid */
  height: 100%;
}

.media-hero-grid:has(.media-hero-tile:nth-child(1)):not(:has(.media-hero-tile:nth-child(2))) .media-hero-tile {
  width: 100%;
  height: 100%;
  display: block;
}
/* ----------------------------------------------------------
   Traveler Notes Drawer – Premium Minimal Styling
   ---------------------------------------------------------- */

#travelerNotesDrawer {
  /* We already set position + background in JS.
     This just adds a subtle blur + padding to keep it classy. */
  padding: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.traveler-notes-panel {
  /* JS already sets background + radius. Here we refine it. */
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: radial-gradient(circle at top left, #020617 0%, #020617 35%, #020617 60%, #020617 100%);
  overflow: hidden;
}

.traveler-notes-header {
  /* ✅ Make header a proper two-column row that can wrap on small screens */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding-bottom: 8px;
  border-bottom: 1px solid rgba(30, 64, 175, 0.4);
}

/* ✅ Ensure the “Been here?” button never gets clipped on mobile */
.tn-add-story{
  white-space: normal;
  line-height: 1.15;
}

/* Premium link-style look for: “Been here? Share your story!” */
.tn-share-story-link{
  background-image: none !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #e2e8f0 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.tn-share-story-link:hover{
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(2,6,23,0.35);
}

@media (max-width: 520px){
  .tn-add-story{
    width: 100%;
    justify-content: center;
  }
}

.traveler-notes-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

.traveler-notes-close {
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.traveler-notes-close:hover {
  background: rgba(148, 163, 184, 0.4) !important;
  transform: translateY(-0.5px);
}

.traveler-notes-body {
  margin-top: 8px !important;
  padding-right: 4px !important;
  padding-bottom: 4px;
}

/* Custom, subtle scrollbar inside the panel */
.traveler-notes-body::-webkit-scrollbar {
  width: 6px;
}

.traveler-notes-body::-webkit-scrollbar-track {
  background: transparent;
}

.traveler-notes-body::-webkit-scrollbar-thumb {
  background: rgba(30, 64, 175, 0.6);
  border-radius: 999px;
}

/* =========================================
   Explorer Stories — Consensus (premium)
   ========================================= */
.tn-consensus-card{
  border: 1px solid rgba(148,163,184,0.30);
  background: linear-gradient(180deg, rgba(15,23,42,0.78), rgba(2,6,23,0.78));
  border-radius: 16px;
  padding: 10px 10px 9px;
  margin-bottom: 12px;
  box-shadow: 0 10px 26px rgba(2,6,23,0.45);
}

.tn-consensus-top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 720px){
  .tn-consensus-top{
    grid-template-columns: 1fr;
  }
}

.tn-consensus-pill{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.35);
}

.tn-consensus-emoji{
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

.tn-consensus-text{ min-width: 0; }

.tn-consensus-label{
  font-size: 11px;
  color: rgba(148,163,184,0.95);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.tn-consensus-value{
  font-size: 14px;
  font-weight: 650;
  color: rgba(248,250,252,0.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tn-consensus-subrow{
  margin-top: 8px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: space-between;
}

.tn-consensus-subleft{
  font-size: 11px;
  color: rgba(203,213,225,0.88);
}

.tn-consensus-subright{
  display:flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: flex-end;
}

.tn-consensus-subgroup{
  display:inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tn-consensus-subtitle{
  font-size: 11px;
  color: rgba(148,163,184,0.95);
}

.tn-consensus-mini-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(15,23,42,0.45);
  font-size: 11px;
  color: rgba(248,250,252,0.95);
}

.tn-consensus-mini-muted{
  font-size: 11px;
  color: rgba(148,163,184,0.95);
}

/* =========================================
   Explorer Stories — Affiliates (premium/editorial)
   ========================================= */
.tn-aff-card{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.28);
  background: linear-gradient(180deg, rgba(15,23,42,0.72), rgba(2,6,23,0.72));
  padding: 12px;
  box-shadow: 0 10px 26px rgba(2,6,23,0.45);
}

.tn-aff-head{
  margin-bottom: 10px;
}

.tn-aff-kicker{
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.95);
  margin-bottom: 4px;
}

.tn-aff-title{
  font-size: 14px;
  font-weight: 700;
  color: rgba(248,250,252,0.98);
  margin-bottom: 3px;
}

.tn-aff-sub{
  font-size: 12px;
  color: rgba(203,213,225,0.88);
}

.tn-aff-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 720px){
  .tn-aff-grid{
    grid-template-columns: 1fr;
  }
}

.tn-aff-item{
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.35);
  padding: 10px 10px;
}

.tn-aff-link{
  display: block;
  text-decoration: none;
}

.tn-aff-link-title{
  font-size: 13px;
  font-weight: 650;
  color: rgba(248,250,252,0.96);
  margin-bottom: 3px;
}

.tn-aff-link-note{
  font-size: 11px;
  color: rgba(148,163,184,0.95);
}

.tn-aff-item:hover{
  border-color: rgba(148,163,184,0.32);
  background: rgba(15,23,42,0.42);
}

.tn-aff-disclosure{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(148,163,184,0.95);
  line-height: 1.35;
}

.tn-aff-admin{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148,163,184,0.16);
}

.tn-aff-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(203,213,225,0.90);
}

.tn-aff-add{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.45);
  color: rgba(248,250,252,0.95);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.tn-aff-add:hover{
  background: rgba(15,23,42,0.62);
}

.tn-aff-remove{
  position: absolute;
  top: 8px;
  right: 8px;
  border: 1px solid rgba(248,113,113,0.35);
  background: rgba(248,113,113,0.12);
  color: rgba(248,250,252,0.92);
  border-radius: 999px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 11px;
}

.tn-aff-empty{
  font-size: 12px;
  color: rgba(203,213,225,0.85);
  padding: 6px 0;
}

/* Each traveler note card */
.traveler-note-card {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    transform 0.1s ease;
}

.traveler-note-card:hover {
  border-color: rgba(129, 140, 248, 0.9);
  background: rgba(15, 23, 42, 0.92);
  transform: translateY(-1px);
}

/* Media grid within a note (2×2) */
.tn-media-grid {
  /* base layout is already inline style in JS;
     this adds some polish */
}

.tn-media-tile {
  position: relative;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.8);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tn-media-tile img,
.tn-media-tile video {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.tn-media-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.95);
}

.tn-media-tile:hover img,
.tn-media-tile:hover video {
  transform: scale(1.02);
}

/* On very small screens, we keep it readable */
@media (max-width: 480px) {
  .traveler-notes-panel {
    max-width: 100%;
    border-radius: 14px;
    padding: 12px;
  }

  .traveler-notes-title {
    font-size: 14px;
  }

  .traveler-note-card {
    padding: 8px 10px;
  }
}
/* -----------------------------------------------------------
   Traveler Notes CTA pill (premium style)
----------------------------------------------------------- */
.place-traveler-notes-section {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Row that holds the pill + text on the left */
.traveler-notes-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;              /* space between pill and text */
  flex-wrap: wrap;       /* so on small screens it can wrap to two lines */
  margin-top: 4px;
}

/* Text beside the pill */
.traveler-notes-cta-copy {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  max-width: 60%;
  line-height: 1.4;
}

/* The pill button itself */
.traveler-notes-pill {
  border: none;
  outline: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;                    /* keeps the label on one line */

  /* Fancy gradient pill base */
  background-image: linear-gradient(135deg, #1d4ed8, #4f46e5);
  color: #f9fafb;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  transition:
    transform 120ms ease-out,
    box-shadow 120ms ease-out,
    background-image 120ms ease-out,
    opacity 120ms ease-out;
}

/* Hover state */
.traveler-notes-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
  background-image: linear-gradient(135deg, #2563eb, #6366f1);
}

/* Pressed state */
.traveler-notes-pill:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
  opacity: 0.9;
}

/* Keyboard focus */
.traveler-notes-pill:focus-visible {
  outline: 2px solid rgba(191, 219, 254, 0.9);
  outline-offset: 2px;
}

/* Small screen tweaks */
@media (max-width: 640px) {
  .traveler-notes-cta-row {
    align-items: flex-start;
  }

  .traveler-notes-cta-copy {
    max-width: 100%;
  }

  .traveler-notes-pill {
    margin-top: 4px;
  }
}

/* -----------------------------------------------------------
   Traveler Notes overlay media grid
----------------------------------------------------------- */

.tn-note-media-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.tn-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 0;
  cursor: pointer;
  display: block;
}

.tn-thumb img,
.tn-thumb video {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}

/* Video variation */
.tn-thumb--video {
  position: relative;
}

.tn-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #e5e7eb;
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.65),
    rgba(15, 23, 42, 0.1)
  );
  pointer-events: none;
}

/* +N badge on the last visible thumb */
.tn-thumb-more-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(15, 23, 42, 0.8);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.7);
}

/* Lightbox overlay */
.tn-lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  display: none; /* JS switches to flex when open */
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.tn-lightbox-inner {
  position: relative;
  max-width: 900px;
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  background: radial-gradient(circle at top, #020617, #020617);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tn-lightbox-media {
  width: 100%;
  text-align: center;
}

.tn-lightbox-counter {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Close / nav buttons */
.tn-lightbox-close,
.tn-lightbox-prev,
.tn-lightbox-next {
  position: absolute;
  border: none;
  background: rgba(15, 23, 42, 0.7);
  color: #e5e7eb;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.tn-lightbox-close {
  top: 10px;
  right: 10px;
}

.tn-lightbox-prev {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.tn-lightbox-next {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.tn-lightbox-close:hover,
.tn-lightbox-prev:hover,
.tn-lightbox-next:hover {
  background: rgba(15, 23, 42, 0.9);
}

/* Small screen adjustments */
@media (max-width: 640px) {
  .tn-note-media-row {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  .tn-thumb img,
  .tn-thumb video {
    height: 72px;
  }

  .tn-lightbox-inner {
    max-width: 100%;
    margin: 0 10px;
    padding: 12px;
  }
}
/* Admin – Pending submissions layout */
.admin-section-pending .place-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Make the main photo sit nicely at the top */
.admin-section-pending .place-card .place-media {
  width: 100%;
  display: block;
  border-radius: 10px;
  margin-bottom: 6px;
  object-fit: cover;
}

/* "You can edit..." line */
.admin-section-pending .admin-edit-note {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 6px 0;
}

/* One field per line */
.admin-section-pending .admin-field-label {
  display: block;
  font-size: 12px;
  margin: 4px 0;
}

.admin-section-pending .admin-input,
.admin-section-pending .admin-textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
}

/* Hero chooser thumbnails stacked nicely */
.admin-section-pending .admin-hero-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.admin-section-pending .admin-hero-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
}

.admin-section-pending .admin-hero-thumb img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}

/* Contributor line at the bottom, light & small */
.admin-section-pending .admin-contributor-line {
  font-size: 11px;
  color: var(--text-muted);
  margin: 6px 0 0 0;
}
/* Admin Pending – Standard Spacing */
.admin-pending-body {
  gap: 8px !important;
}

.admin-field-label {
  margin: 4px 0 !important;
}

.admin-input,
.admin-textarea {
  margin-top: 4px !important;
}

.admin-edit-note {
  margin-bottom: 6px !important;
}

.admin-contributor-meta {
  margin-top: 6px !important;
}
.admin-media-block {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-media-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-media-thumb {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.admin-media-thumb-inner {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020617;
}

.admin-media-thumb-inner img,
.admin-media-thumb-inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-media-thumb-badge {
  position: absolute;
  left: 4px;
  top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(15, 23, 42, 0.8);
  color: #e5e7eb;
}

.admin-media-remove-btn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  border: none;
  font-size: 10px;
  cursor: pointer;
  background: rgba(248, 113, 113, 0.9);
  color: #f9fafb;
}

.admin-add-media input[type="file"] {
  margin-top: 4px;
  font-size: 11px;
}
/* ===========================
   Modern minimalist comments
   =========================== */

.comment-section {
  padding-top: 6px;
}

.comment-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  border: none;
  background: transparent;
}

.comment-item--empty {
  padding: 2px 0 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.comment-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  flex-shrink: 0;
}

.comment-avatar--circle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #f9fafb;
}

.comment-body {
  flex: 1;
}

.comment-header-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.comment-author {
  font-weight: 600;
  color: var(--text-main, #e5e7eb);
}

.comment-you-label {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
}

.comment-dot,
.reply-dot {
  opacity: 0.7;
}

.comment-time,
.comment-edited,
.reply-time,
.reply-edited {
  font-size: 11px;
  color: var(--text-muted);
}

.comment-text {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 2px;
  margin-bottom: 3px;
}

.comment-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.comment-meta-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}

.comment-meta-btn:hover {
  color: var(--link-color, #93c5fd);
}

.comment-meta-btn--danger:hover {
  color: #fca5a5;
}

.comment-meta-dot {
  opacity: 0.7;
}

.reply-list {
  list-style: none;
  margin: 4px 0 0;
  padding-left: 34px; /* indent under avatar */
}

.reply-item {
  padding: 2px 0;
}

.reply-body {
  font-size: 12px;
}

.reply-header-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.reply-author {
  font-weight: 500;
  color: var(--text-main, #e5e7eb);
}

.reply-text {
  margin-top: 1px;
  margin-bottom: 2px;
  font-size: 12px;
  line-height: 1.4;
}

.reply-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.comment-toggle-wrapper {
  padding-bottom: 4px;
}

.comment-toggle-all {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  color: var(--link-color, #93c5fd);
  cursor: pointer;
}

.comment-toggle-all:hover {
  text-decoration: underline;
}

.comment-input-row--main {
  margin-top: 6px;
}
/* =========================================================
   PREMIUM FOOTER + PREMIUM MODAL (Legal / About / Privacy)
   Replaces the old "footer panel" overlay styling
   ========================================================= */

.site-footer-minimal{
  width:100%;
  padding:18px 14px 14px;
  margin-top:18px;
  border-top:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer-links-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}

.footer-link{
  appearance:none;
  border:0;
  background:transparent;
  color: rgba(226, 232, 240, 0.88);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.footer-link:hover{
  background: rgba(148, 163, 184, 0.14);
  color: rgba(248, 250, 252, 0.98);
  transform: translateY(-1px);
}

.footer-link.is-active{
  background: rgba(34, 197, 94, 0.20);
  color: rgba(255,255,255,0.98);
}

.footer-copyright{
  margin-top:12px;
  text-align:center;
  font-size:11px;
  color: rgba(148, 163, 184, 0.85);
}

/* =========================
   Premium Modal
   ========================= */

.gst-legal-overlay{
  position: fixed;
  inset: 0;

  /* IMPORTANT: keep it in the layout so it can animate */
  display: grid;
  place-items: center;
  padding: 18px;

  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;

  /* Closed state (animatable) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.gst-legal-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity 220ms ease;
}

.gst-legal-modal{
  width: min(980px, 100%);
  max-height: min(78vh, 720px);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  overflow: hidden;
  position: relative;

  /* Closed state for the card (animatable) */
  transform: translateY(14px) scale(0.985);
  opacity: 0;

  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
              opacity 220ms ease;
  will-change: transform, opacity;
}

.gst-legal-overlay.is-open .gst-legal-modal{
  transform: translateY(0px) scale(1);
  opacity: 1;
}

.gst-legal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(248, 250, 252, 0.95);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.gst-legal-close:hover{
  background: rgba(148, 163, 184, 0.14);
  transform: scale(1.04);
}

.gst-legal-grid{
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100%;
}

.gst-legal-nav{
  padding: 14px;
  background: rgba(2, 6, 23, 0.35);
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gst-legal-nav-item{
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.45);
  color: rgba(226, 232, 240, 0.92);
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.gst-legal-nav-item:hover{
  background: rgba(148, 163, 184, 0.14);
  transform: translateY(-1px);
}

.gst-legal-nav-item.is-active{
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.30);
  color: rgba(248, 250, 252, 0.98);
}

.gst-legal-content{
  padding: 22px 22px 18px;
  overflow: auto;
}

.gst-legal-title{
  margin: 0 0 12px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: rgba(248, 250, 252, 0.98);
}

.gst-legal-body{
  color: rgba(226, 232, 240, 0.88);
  font-size: 14px;
  line-height: 1.6;
  white-space: normal;
}

.gst-legal-body p{
  margin: 0 0 12px;
}

/* Subtle affiliate disclosure line in footer modal */
.gst-affiliate-disclosure{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.92);
}

@media (max-width: 820px){
  .gst-legal-grid{
    grid-template-columns: 1fr;
  }
  .gst-legal-nav{
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  }
  .gst-legal-nav-item{
    flex: 1 1 auto;
  }
}
/* =========================================================
   PREMIUM MINIMAL FOOTER (Apple-style)
   ========================================================= */

.site-footer-minimal {
  margin-top: 60px;
  padding: 24px 16px 28px;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  background: transparent;
  text-align: center;
}

/* Top row: clickable words */
.footer-links-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Footer links (look like text, not buttons) */
.footer-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: color 120ms ease;
}

.footer-link:hover {
  color: var(--text-main, #0f172a);
}

.footer-link.is-active {
  color: var(--text-main, #0f172a);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Expanding info panel */
.footer-panel {
  max-width: 720px;
  margin: 10px auto 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease, opacity 180ms ease;
  opacity: 0;
}

.footer-panel.is-open {
  max-height: 400px;
  opacity: 1;
}

/* Panel content */
.footer-panel-content {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-main, #0f172a);
  padding: 12px 4px 4px;
  white-space: pre-line;
}

/* Copyright */
.footer-copyright {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
}

/* Dark mode support */
body.dark .footer-link {
  color: #9ca3af;
}

body.dark .footer-link:hover,
body.dark .footer-link.is-active {
  color: #e5e7eb;
}

body.dark .footer-panel-content {
  color: #e5e7eb;
}

body.dark .site-footer-minimal {
  border-top-color: rgba(255, 255, 255, 0.15);
}
/* =========================================================
   TOP BAR THEME MENU (single icon)
   ========================================================= */

.theme-menu {
  position: relative;
}

.theme-menu-toggle {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  border-radius: 999px;
  transition: background 0.15s ease;
}

.theme-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.theme-menu-panel {
  position: absolute;
  top: 38px;
  right: 0;
  background: var(--panel-bg, #020617);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  padding: 6px;
  display: none;
  min-width: 160px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.45);
  z-index: 200;
}

.theme-menu-panel.is-open {
  display: block;
}

.theme-menu-item {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-main, #e5e7eb);
  text-align: left;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.theme-menu-item:hover {
  background: rgba(148, 163, 184, 0.18);
}
/* =========================================================
   LANGUAGE SELECT AS ICON
   ========================================================= */

.language-select-icon {
  width: 44px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 16px;
  cursor: pointer;
}
/* =========================================================
   FOOTER BAR OVERLAY (Apple-style)
   - Closed: bar height = link row
   - Open: bar expands taller so content is readable
   ========================================================= */

#siteFooter.site-footer-minimal {
  margin-top: 60px;
  padding: 18px 14px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: transparent;
  text-align: center;
}

/* The bar area */
#footerBar {
  position: relative;
  border-radius: 16px;
  overflow: hidden; /* overlay stays clipped to bar */
}

/* ✅ When open, expand the bar height so it can show the content */
#footerBar.is-open {
  min-height: 180px;          /* adjust if you want taller */
}

/* Clickable words row */
#footerLinksRow {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  position: relative;
  z-index: 2;
}

/* Footer links */
#footerLinksRow .footer-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: color 120ms ease;
}

#footerLinksRow .footer-link:hover {
  color: var(--text-main, #0f172a);
}

#footerLinksRow .footer-link.is-active {
  color: var(--text-main, #0f172a);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ✅ Panel covers the ENTIRE footer bar */
#footerPanel {
  position: absolute;
  inset: 0;
  display: flex;              /* keep layout stable */
  opacity: 0;
  pointer-events: none;       /* doesn't block clicks when closed */
  z-index: 5;

  background: var(--bg, #ffffff);
  color: var(--text-main, #0f172a);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
}

#footerPanel.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Panel content fits inside bar */
#footerPanelContent {
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 8px;

  text-align: left;
}

/* Title row */
#footerPanelContent .footer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#footerPanelContent .footer-title h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

/* Close button */
#footerPanelContent .footer-close {
  border: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#footerPanelContent .footer-close:hover {
  background: rgba(148, 163, 184, 0.28);
}

/* ✅ Body text area scrolls if content is longer than the expanded bar */
#footerPanelContent .footer-body {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;

  overflow: auto;          /* scroll inside the bar if needed */
  flex: 1;                 /* takes remaining height */
  padding-right: 6px;      /* space so text doesn't touch scrollbar */
}

/* Dark mode support */
body.dark #footerPanel {
  background: var(--bg, #0b1220);
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.25);
}

body.dark #footerPanelContent .footer-body {
  color: #e5e7eb;
}

body.dark #footerLinksRow .footer-link {
  color: rgba(226, 232, 240, 0.70);
}

body.dark #footerLinksRow .footer-link:hover,
body.dark #footerLinksRow .footer-link.is-active {
  color: rgba(226, 232, 240, 0.95);
}

/* Copyright stays below */
.footer-copyright {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
}

/* Mobile: make open bar taller */
@media (max-width: 520px) {
  #footerBar.is-open {
    min-height: 220px;
  }
}
/* =========================================================
   TOPBAR: Left logo, Center tabs, Right controls (TripAdvisor-style)
   ========================================================= */

.topbar-inner{
  display:flex;
  align-items:center;
  gap:16px;
}

.topbar-left{
  flex:0 0 auto;
}

.topbar-center{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
}

.topbar-center .nav-left{
  display:flex;
  justify-content:center;
  gap:10px;
}

.topbar-right{
  flex:0 0 auto;
}

/* Optional: keep the centered tabs tidy on small screens */
@media (max-width: 820px){
  .topbar-center .nav-left{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
}
/* =====================================================
   HERO POSITIONING – create real white space above hero
   (no cropping, no shrinking)
   ===================================================== */

/* Force the overall page + header area to be white */
html, body {
  background: #ffffff !important;
}

.site-header,
.topbar {
  background: #ffffff !important;
}

/* IMPORTANT: do NOT visually shift the hero with top: (it can crop).
   Instead, create real layout space using margin. */
.hero-shell {
  margin-top: 88px !important; /* increase/decrease later */
}

/* Safety: prevent accidental clipping if any parent uses overflow hidden */
.site-header {
  overflow: visible !important;
}
/* =====================================================
   FORCE the “gap above hero” area to white
   ===================================================== */

/* The gap you created is showing the HEADER background. Force it. */
header.site-header,
header.site-header * {
  background-color: transparent;
}

/* Now explicitly set the key wrappers to white */
header.site-header,
header.site-header .topbar,
header.site-header .topbar-inner,
header.site-header .hero-shell {
  background: #ffffff !important;
}

/* If you have any overlay pseudo-elements causing gray */
header.site-header::before,
header.site-header::after,
header.site-header .hero-shell::before,
header.site-header .hero-shell::after {
  background: transparent !important;
  content: none !important;
}
/* =====================================================
   Remove divider line between hero gap and top tabs
   ===================================================== */

/* Kill borders */
.top-nav {
  border-top: none !important;
  border-bottom: none !important;
}

/* Kill shadows */
.top-nav {
  box-shadow: none !important;
}

/* In case the line comes from a pseudo-element */
.top-nav::before,
.top-nav::after {
  content: none !important;
  display: none !important;
}
/* =====================================================
   REMOVE ALL HEADER / TOPBAR DIVIDER LINES
   ===================================================== */

/* Remove borders & shadows from header containers */
.site-header,
.topbar,
.topbar-inner {
  border: none !important;
  box-shadow: none !important;
}

/* Remove any pseudo-element lines */
.site-header::before,
.site-header::after,
.topbar::before,
.topbar::after {
  content: none !important;
  display: none !important;
}

/* Ensure nav area is also clean */
.top-nav {
  border: none !important;
  box-shadow: none !important;
}
/* =========================================================
   PREMIUM HERO SEARCH (under tabs, above cover photos)
   ========================================================= */
.hero-search-area{
  width: 100%;
  padding: 14px 0 16px 0;
}

.hero-search-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;   /* ✅ center everything */
  gap: 12px;
}

/* The big “pill” container */
.hero-search-box{
  width: min(920px, 100%);      /* ✅ big and centered */
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(148,163,184,0.40);
  border-radius: 999px;
  padding: 14px 16px;           /* ✅ thicker */
  box-shadow: 0 18px 45px rgba(15,23,42,0.12);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  gap: 10px;
}

/* Optional: little icon inside the bar */
.hero-search-box::before{
  content: "🌍";
  font-size: 18px;
  opacity: 0.85;
  margin-left: 6px;
}

.hero-search-input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 18px;              /* ✅ bigger */
  padding: 10px 10px;
}

.hero-search-input::placeholder{
  color: rgba(100,116,139,0.95);
}

/* Region pills row */
.region-pills{
  width: min(920px, 100%);
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Refined region pills */
.region-pill{
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(248,250,252,0.55);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;

  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.region-pill:hover{
  transform: translateY(-1px);
  background: rgba(248,250,252,0.70);
}

/* Active = green only here */
.region-pill.active{
  border-color: rgba(15, 118, 110, 0.55);
  background: rgba(15, 118, 110, 0.16);
  color: rgba(15, 23, 42, 0.92);
}

/* Dark mode */
body.dark .region-pill{
  background: rgba(2, 6, 23, 0.32);
  border-color: rgba(148,163,184,0.22);
  color: rgba(226,232,240,0.86);
}

body.dark .region-pill:hover{
  background: rgba(2, 6, 23, 0.44);
}

body.dark .region-pill.active{
  background: rgba(15, 118, 110, 0.22);
  border-color: rgba(15, 118, 110, 0.60);
  color: rgba(248,250,252,0.92);
}
/* ===========================
   PREMIUM HERO SEARCH (TripAdvisor-ish)
   =========================== */

.explore-hero-search{
  width: 100%;
  display: block;
  padding: 16px 16px 10px 16px;
  box-sizing: border-box;
}

.explore-hero-search-inner{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Clean white pill (minimal premium) */
.explore-hero-searchbox{
  width: min(860px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 999px;

  /* premium glass */
  background: rgba(248, 250, 252, 0.72);
  border: 1px solid rgba(15,23,42,0.10);

  box-shadow:
    0 10px 26px rgba(15,23,42,0.10),
    0 2px 8px rgba(15,23,42,0.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

/* Subtle hover (no green) */
.explore-hero-searchbox:hover{
  box-shadow:
    0 14px 34px rgba(15,23,42,0.14),
    0 3px 10px rgba(15,23,42,0.07);
  transform: translateY(-1px);
}

/* Focus ring (green only here) */
.explore-hero-searchbox:focus-within{
  border-color: rgba(15, 118, 110, 0.55);
  box-shadow:
    0 16px 38px rgba(15,23,42,0.16),
    0 0 0 4px rgba(15, 118, 110, 0.16);
}

.explore-hero-search-icon{
  font-size: 16px;
  opacity: 0.70;
  color: rgba(15, 23, 42, 0.72);
}

/* Input: clean */
.explore-hero-search-input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;

  color: rgba(15, 23, 42, 0.92);
  font-size: 15.5px;
  font-weight: 500;
  padding: 2px 0;
}

.explore-hero-search-input::placeholder{
  color: rgba(15, 23, 42, 0.50);
  font-weight: 500;
}

/* Dark mode overrides: keep it premium, not white */
body.dark .explore-hero-searchbox{
  background: rgba(2, 6, 23, 0.48);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.35),
    0 2px 10px rgba(0,0,0,0.22);
}

body.dark .explore-hero-search-icon{
  color: rgba(226, 232, 240, 0.68);
}

body.dark .explore-hero-search-input{
  color: rgba(248, 250, 252, 0.92);
}

body.dark .explore-hero-search-input::placeholder{
  color: rgba(226, 232, 240, 0.50);
}

/* Regions: clear but lighter than search */
.explore-hero-regions{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 4px;
}

/* Minimal pills */
.explore-hero-regions .region-pill{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.70);
  color: #0f172a;

  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.explore-hero-regions .region-pill:hover{
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,23,42,0.18);
  transform: translateY(-1px);
}

.explore-hero-regions .region-pill.active{
  background: rgba(37,99,235,0.12);  /* soft “selected” */
  border-color: rgba(37,99,235,0.30);
}

/* Mobile: make search feel big */
@media (max-width: 520px){
  .explore-hero-searchbox{
    width: 100%;
    padding: 13px 16px;
  }
}
/* ===========================
   SEARCH BUTTON INSIDE BAR
   (TripAdvisor-style pill)
   =========================== */

.explore-hero-search-btn{
  border: 1px solid rgba(15,23,42,0.25);
  outline: none;

  padding: 8px 16px;
  border-radius: 999px;

  background: rgba(15,23,42,0.06); /* neutral gray */
  color: #0f172a;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;

  cursor: pointer;
  white-space: nowrap;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}

/* Hover = subtle premium lift */
.explore-hero-search-btn:hover{
  background: rgba(15,23,42,0.10);
  border-color: rgba(15,23,42,0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15,23,42,0.18);
}

/* Active click */
.explore-hero-search-btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15,23,42,0.18);
}

/* Mobile: slightly smaller pill */
@media (max-width: 520px){
  .explore-hero-search-btn{
    padding: 7px 14px;
    font-size: 12.5px;
  }
}
.go-home {
  cursor: pointer;
}

.go-home:hover .topbar-title {
  opacity: 0.9;
}
/* =========================================
   Premium Explore Headline (refined)
   ========================================= */
.explore-hero-headline{
  margin: 8px 0 14px 0;
  text-align: center;

  /* calm premium */
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.16;

  /* lighter feel = more premium */
  font-weight: 400;
  letter-spacing: -0.02em;

  /* near-black for light mode */
  color: rgba(15, 23, 42, 0.92);

  text-wrap: balance;
}

/* Dark mode */
body.dark .explore-hero-headline{
  color: rgba(248, 250, 252, 0.92);
}

/* Safety: if .dark is used instead of body.dark */
.dark .explore-hero-headline{
  color: rgba(248, 250, 252, 0.92);
}
/* =========================================
   Explore Hero – Theme Pills (secondary row)
   ========================================= */

.explore-hero-themes{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 8px auto 4px auto;
  max-width: 900px;
}

/* Theme pill base (lighter than region pills) */
.theme-pill{
  border-radius: 999px;

  /* IMPORTANT: icon + text alignment */
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;

  background: rgba(248,250,252,0.42);
  border: 1px solid rgba(148, 163, 184, 0.26);
  color: rgba(15, 23, 42, 0.80);

  transition:
    transform 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}
/* Inline SVG icon inside theme pills */
.gst-pill-icon{
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gst-pill-icon svg{
  width: 16px;
  height: 16px;
  display: block;
}
/* Hover = neutral (no green) */
.theme-pill:hover{
  transform: translateY(-1px);
  background: rgba(248,250,252,0.58);
}

/* Active = green only here */
.theme-pill.active{
  background: rgba(15, 118, 110, 0.14);
  border-color: rgba(15, 118, 110, 0.45);
  color: rgba(15, 23, 42, 0.92);
}

/* Dark mode */
body.dark .theme-pill{
  background: rgba(2, 6, 23, 0.26);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.84);
}

body.dark .theme-pill:hover{
  background: rgba(2, 6, 23, 0.40);
}

body.dark .theme-pill.active{
  background: rgba(15, 118, 110, 0.20);
  border-color: rgba(15, 118, 110, 0.55);
  color: rgba(248, 250, 252, 0.92);
}
/* =========================================================
   HERO THEME PILLS (Explore only) – lighter than region pills
   ========================================================= */

.explore-hero-headline{
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
  text-align: center;
  color: rgba(255,255,255,0.82);
}

/* If your site supports light mode and uses body.light or similar,
   this keeps the headline readable. If you don’t have light mode classes,
   it still looks fine. */
body:not(.dark) .explore-hero-headline{
  color: rgba(15,23,42,0.82);
}

.explore-hero-themes{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.theme-pill{
  appearance: none;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.18);
  color: rgba(255,255,255,0.92);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.theme-pill:hover{
  transform: translateY(-1px);
  background: rgba(15,23,42,0.28);
}

.theme-pill.active{
  background: rgba(226,232,240,0.92);
  color: rgba(15,23,42,0.95);
  border-color: rgba(226,232,240,0.92);
}

/* Light mode */
body:not(.dark) .theme-pill{
  background: rgba(148,163,184,0.14);
  color: rgba(15,23,42,0.90);
  border-color: rgba(148,163,184,0.35);
}
body:not(.dark) .theme-pill:hover{
  background: rgba(148,163,184,0.20);
}
body:not(.dark) .theme-pill.active{
  background: rgba(15,23,42,0.90);
  color: white;
  border-color: rgba(15,23,42,0.90);
}
/* =========================================================
   REMOVE OLD THEME CHIPS FROM EXPLORE GRID
   (we now use the hero theme pills instead)
   ========================================================= */

#explore .explore-chips {
  display: none;
}
/* Hide the Explore hero strip when a country page is open */
body.country-open #exploreHeroSearch {
  display: none !important;
}
/* =========================================================
   Country page: hide ONLY the Home/Explore hero UI
   (headline + big search + region pills + theme pills)
   WITHOUT touching the country hero slideshow
   ========================================================= */

body.country-page-open #homeHero,
body.country-page-open #heroRegionPills,
body.country-page-open #heroThemePills,
body.country-page-open #exploreChips {
  display: none !important;
  visibility: hidden !important;
}
/* Hide the big Explore search bar ONLY (by its placeholder text) */
body.country-page-open input[placeholder="Search by country, place, or keyword..."],
body.country-page-open button,
body.country-page-open input {
}

/* Hide only the wrapper that contains that Explore search input */
body.country-page-open input[placeholder="Search by country, place, or keyword..."] {
  display: none !important;
}

/* If the search input is inside a container, hide that container too */
body.country-page-open input[placeholder="Search by country, place, or keyword..."] 
  :is(*, *::before, *::after) {
  /* do nothing (safe) */
}

/* Hide the headline text block (common hero headline classes/ids) */
body.country-page-open .hero-headline,
body.country-page-open .hero-title,
body.country-page-open .hero-tagline,
body.country-page-open #heroHeadline,
body.country-page-open #heroTitle,
body.country-page-open #heroTagline {
  display: none !important;
  visibility: hidden !important;
}

/* IMPORTANT: keep the country page search bar visible */
body.country-page-open .country-global-search,
body.country-page-open #countryPlacesSearch {
  display: block !important;
  visibility: visible !important;
}
/* =========================================================
   FIX: Hide the Explore premium headline + search bar
   ONLY when a country page is open
   (does NOT affect the country page slideshow)
   ========================================================= */

body.country-page-open #exploreHeroSearch {
  display: none !important;
}
/* =========================================================
   FINAL OVERRIDE: hide the 2 dropdown pills on Explore
   (covers common wrappers used for Category + Regions)
   ========================================================= */

#explore .country-region-filter-row,
#explore .country-region-filter-label,
#explore .country-category-filter-row,
#explore .country-category-filter-label,
#explore .explore-filters-row,
#explore .explore-filters {
  display: none !important;
}
/* =========================================================
   FIX: Reduce white gap between theme pills and cover photos
   ========================================================= */

/* Pull the hero (cover photos) UP closer to theme pills */
.hero-shell {
  margin-top: 32px !important;   /* was much larger before */
}

/* Safety: remove extra spacing added by inner hero wrappers */
.hero-slideshow,
.hero-wrapper,
.hero-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* =========================================================
   HOME HERO — Featured text overlay (ENLARGED & REFINED)
   ========================================================= */

#homeHeroFeaturedText {
  position: absolute;
  left: 16px;
  bottom: 18%;
  z-index: 5;

  max-width: min(680px, 88vw);

  display: none;              /* JS controls visibility */
  flex-direction: column;
  gap: 10px;

  color: #f8fafc;
  text-shadow: 0 3px 14px rgba(0,0,0,0.55);
  pointer-events: none;
}

#homeHeroFeaturedText.is-visible {
  display: flex;
}

/* Eyebrow: Featured by the community */
#homeHeroFeaturedEyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;

  font-size: 12px;              /* ⬆ bigger */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;

  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.25);
  color: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(10px);
}

/* Place name (MAIN HERO TITLE) */
#homeHeroFeaturedTitle {
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);   /* ⬆ noticeably bigger */
  line-height: 1.06;
  font-weight: 760;
  letter-spacing: -0.025em;
  color: rgba(248, 250, 252, 0.99);
}

/* Human line (description) */
#homeHeroFeaturedLine {
  margin: 0;
  font-size: 16.5px;                 /* ⬆ bigger */
  line-height: 1.5;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.96);

  max-width: 60ch;
}

/* Mobile tuning */
@media (max-width: 640px) {
  #homeHeroFeaturedText {
    left: 12px;
    right: 12px;
    bottom: 16%;
    max-width: 94vw;
    gap: 8px;
  }

  #homeHeroFeaturedEyebrow {
    font-size: 11px;
    padding: 6px 10px;
  }

  #homeHeroFeaturedTitle {
    font-size: clamp(26px, 7vw, 38px);
  }

  #homeHeroFeaturedLine {
    font-size: 14.5px;
  }
}

/* ---------------------------------------------------------
   Fix: Prevent white hero when featured image loads
   --------------------------------------------------------- */

/* Keep slideshow visible until featured image is READY */
#homeHero.hero-has-featured-cover .hero-slideshow {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hide slideshow ONLY after image has finished loading */
#homeHero.hero-featured-ready .hero-slideshow {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   Final fix: Kill white hero by disabling pseudo-layers
   --------------------------------------------------------- */
#homeHero.hero-has-featured-cover::before,
#homeHero.hero-has-featured-cover::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#homeHero.hero-has-featured-cover {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-color: transparent !important;
}

/* Featured mode: hide plane + greetings for featured photos */
.hero-has-featured-cover .plane,
.hero-has-featured-cover .greetings-cloud {
  display: none !important;
}

/* Mobile: keep it readable but still premium */
@media (max-width: 640px) {
  #homeHeroFeaturedText {
    left: 14px;
    right: 14px;
    max-width: 92vw;
    bottom: 16%;
    gap: 8px;
  }

  #homeHeroFeaturedEyebrow {
    font-size: 11px;
    padding: 6px 10px;
  }

  #homeHeroFeaturedTitle {
    font-size: clamp(26px, 7vw, 38px);
  }

  #homeHeroFeaturedLine {
    font-size: 14px;
  }

  #homeHeroCredit {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* =========================================================
   FINAL PREMIUM HERO FIT (LANDSCAPE MIN-CROP + PORTRAIT BLUR)
   Paste at the VERY BOTTOM of style.css
   ========================================================= */

/* ---------------------------------------------------------
   A) CONTROL THE HERO WINDOW HEIGHT (THIS REDUCES ZOOM/CROP)
   This is the real fix for "landscape looks too zoomed".
   --------------------------------------------------------- */

/* Desktop/tablet: premium cinematic height (less cropping) */
body:not(.country-page-open) .hero-shell {
  min-height: clamp(300px, 48vh, 460px) !important;
}

/* Mobile: shorter so it doesn't feel huge */
@media (max-width: 640px) {
  body:not(.country-page-open) .hero-shell {
    min-height: clamp(220px, 40vh, 300px) !important;
  }
}

/* Ensure #homeHero fills the hero window */
#homeHero {
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #020617; /* safe fallback */
}

/* The featured image element should always fill the hero box */
#homeHero img[data-hero-cover-img="1"] {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ---------------------------------------------------------
   B) LANDSCAPE MODE = EDGE-TO-EDGE WITH MINIMAL CROP
   We keep cover (premium look), but the reduced hero height
   above dramatically reduces zoom.
   --------------------------------------------------------- */

/* Support BOTH class names you’ve used in your CSS */
#homeHero.hero-cover--landscape img[data-hero-cover-img="1"],
#homeHero.hero-featured-landscape img[data-hero-cover-img="1"] {
  object-fit: cover !important;
  object-position: center 45% !important; /* slightly higher = less “face cut off” */
}

/* ---------------------------------------------------------
   C) PORTRAIT MODE = CONTAIN (NO CROP) + BLURRED BACKGROUND
   This is the premium “Apple / Netflix” safety net.
   --------------------------------------------------------- */

/* Portrait foreground: show the whole image */
#homeHero.hero-cover--portrait img[data-hero-cover-img="1"],
#homeHero.hero-featured-portrait img[data-hero-cover-img="1"] {
  object-fit: contain !important;
  object-position: center center !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Blurred background layer ONLY in portrait mode
   IMPORTANT: this requires that your JS sets #homeHero's background-image
   to the same featured photo (you were already doing this earlier). */
#homeHero.hero-cover--portrait::before,
#homeHero.hero-featured-portrait::before {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center center !important;
  filter: blur(18px) !important;
  transform: scale(1.08) !important;
  opacity: 0.9 !important;
  z-index: 0 !important;
}

/* Slight dark wash behind portrait foreground for readability */
#homeHero.hero-cover--portrait::after,
#homeHero.hero-featured-portrait::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, 0.35) !important;
  z-index: 1 !important;
}

/* Keep any hero overlays/text above everything */
#homeHero > * {
  position: relative;
  z-index: 5;
}
/* =========================================================
   FINAL OVERRIDE — FORCE HERO CREDIT PILL LEFT ALIGNMENT
   Paste at the VERY BOTTOM of style.css
   ========================================================= */

#homeHero #homeHeroCredit {
  left: 22px !important;     /* must match #homeHeroFeaturedText left */
  right: auto !important;
  margin-left: 0 !important;
  transform: none !important;
}
/* =========================================================
   FINAL HERO FIX (NO WHITE/BLACK GAPS)
   - Default slideshow is ALWAYS visible
   - Featured cover is an OVERLAY on top when it exists
   ========================================================= */

/* Always give the hero a premium dark fallback (never white flash) */
#homeHero{
  background-color: #020617 !important;
  position: relative !important;
  overflow: hidden;
}

/* Slideshow should ALWAYS be visible */
#homeHero .hero-slideshow{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Featured hero image becomes an overlay ABOVE slideshow */
#homeHero img[data-hero-cover-img="1"]{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  display: block !important;
}

/* Use your existing portrait/landscape behavior */
#homeHero.hero-featured-landscape img[data-hero-cover-img="1"]{
  object-fit: cover !important;
  object-position: center center !important;
}

#homeHero.hero-featured-portrait img[data-hero-cover-img="1"]{
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(2, 6, 23, 0.65); /* helps portrait feel premium */
}

/* Keep hero text + credit ABOVE everything */
#homeHeroFeaturedText,
#homeHeroCredit{
  position: relative !important;
  z-index: 5 !important;
}
/* =========================================================
   HERO CREDIT PILL — Premium hover enhancement
   (safe overlay, no layout shift)
   ========================================================= */

/* Base: make sure it behaves like an interactive element */
#homeHeroCredit {
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

/* Hover: subtle lift + contrast */
#homeHeroCredit:hover {
  transform: translateY(-1px);
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.45);
}

/* Arrow affordance (hidden by default) */
#homeHeroCredit::after {
  content: "→";
  margin-left: 6px;
  opacity: 0.85;
}
/* =========================================================
   WEEKLY LOVE — Premium section under the hero (SPACING RHYTHM POLISH)
   SAFE: CSS ONLY — no logic changes
   ========================================================= */

.weekly-love{
  width: 100%;
  padding: 26px 16px 16px;
  box-sizing: border-box;
}

.weekly-love-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 42px rgba(15,23,42,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark .weekly-love-inner{
  background: rgba(2,6,23,0.72);
  border-color: rgba(148,163,184,0.25);
  box-shadow: 0 18px 42px rgba(0,0,0,0.35);
}

.weekly-love-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.weekly-love-title{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0f172a;
}

body.dark .weekly-love-title{
  color: #e5e7eb;
}

.weekly-love-subtitle{
  margin: 0;
  font-size: 12.5px;
  color: rgba(100,116,139,0.90);
}

body.dark .weekly-love-subtitle{
  color: rgba(226,232,240,0.72);
}

/* 4-tile grid default (Weekly Love) */
.weekly-love-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px){
  .weekly-love-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   EDITORS PICKS (NEW)
   ========================= */
.editors-picks .weekly-love-inner{
  border-color: rgba(245,158,11,0.20);
}

.editors-kicker{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.85);
}

body.dark .editors-kicker{
  color: rgba(226,232,240,0.70);
}

/* Editors picks grid is 3 columns */
/* =========================
   EDITORS PICKS — Editorial Hero Layout (Premium)
   1 large card + 2 stacked cards
   (visual-only, logic unchanged)
   ========================= */
.editors-picks-grid{
  /* keep weekly-love-grid gap + grid behavior, but redefine layout */
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "hero side1"
    "hero side2";

  /* Big, cinematic presence */
  height: clamp(320px, 34vw, 440px);
  align-items: stretch;
}

/* Override the global fixed tile height ONLY for editor picks */
.editors-picks-grid .weekly-love-tile{
  height: 100%;
  border-radius: 20px;
}

/* Place the 3 tiles into the editorial layout */
.editors-picks-grid .weekly-love-tile:nth-child(1){
  grid-area: hero;
}

.editors-picks-grid .weekly-love-tile:nth-child(2){
  grid-area: side1;
}

.editors-picks-grid .weekly-love-tile:nth-child(3){
  grid-area: side2;
}

/* Tablet / smaller screens: stack nicely (still premium) */
@media (max-width: 900px){
  .editors-picks-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "hero"
      "side1"
      "side2";
    height: auto;
  }

  .editors-picks-grid .weekly-love-tile{
    height: 190px;
    border-radius: 18px;
  }
}

/* =========================================================
   WEEKLY LOVE — compact fixed-size tiles (FINAL)
   ========================================================= */

.weekly-love-tile{
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;

  /* Hard lock tile size */
  height: 140px;
  width: 100%;
  display: block;

  box-shadow: 0 10px 24px rgba(15,23,42,0.12);
  transform: translateY(0);
  transition: transform 140ms ease, box-shadow 180ms ease;
}

.weekly-love-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15,23,42,0.18);
}

/* Image fills the tile */
.weekly-love-img{
  position: absolute;
  inset: 0;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  display: block !important;

  filter: saturate(1.02);
}

/* Gradient overlay */
.weekly-love-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(2,6,23,0.82),
    rgba(2,6,23,0.05) 60%
  );
  pointer-events: none;
}

/* Text pinned to bottom */
.weekly-love-meta{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  pointer-events: none;
}

.weekly-love-place{
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(248,250,252,0.98);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weekly-love-country{
  font-size: 11px;
  color: rgba(226,232,240,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge */
.weekly-love-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(248,250,252,0.98);
  background: rgba(15,23,42,0.72);
  border: 1px solid rgba(226,232,240,0.18);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Editors picks badge gets a warmer tint */
.editors-picks .weekly-love-badge{
  background: rgba(180,83,9,0.72);
  border-color: rgba(245,158,11,0.28);
}

/* Empty state */
.weekly-love-empty{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.03);
}

body.dark .weekly-love-empty{
  background: rgba(226,232,240,0.06);
  border-color: rgba(148,163,184,0.30);
}

.weekly-love-empty-title{
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(15,23,42,0.78);
  margin-bottom: 3px;
}

body.dark .weekly-love-empty-title{
  color: rgba(226,232,240,0.92);
}

.weekly-love-empty-text{
  font-size: 12px;
  color: rgba(100,116,139,0.90);
}

body.dark .weekly-love-empty-text{
  color: rgba(226,232,240,0.72);
}
/* =========================================================
   WEEKLY LOVE — Compatibility aliases
   Your JS sometimes renders weekly-loved-* but CSS styles weekly-love-*
   This maps both to the same styling so tiles always show.
   Paste at VERY BOTTOM of style.css
   ========================================================= */

.weekly-love-tile,
.weekly-loved-tile{
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;

  height: 140px;
  width: 100%;
  display: block;

  box-shadow: 0 10px 24px rgba(15,23,42,0.12);
  transform: translateY(0);
  transition: transform 140ms ease, box-shadow 180ms ease;
}

.weekly-love-tile:hover,
.weekly-loved-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15,23,42,0.18);
}

.weekly-love-img,
.weekly-loved-img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: saturate(1.02);
}

.weekly-love-overlay,
.weekly-loved-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(2,6,23,0.82),
    rgba(2,6,23,0.05) 60%
  );
  pointer-events: none;
}

.weekly-love-meta,
.weekly-loved-meta{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  pointer-events: none;
}

.weekly-love-place,
.weekly-loved-place{
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(248,250,252,0.98);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weekly-love-country,
.weekly-loved-country{
  font-size: 11px;
  color: rgba(226,232,240,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* If your JS uses a badge sometimes */
.weekly-loved-badge,
.weekly-love-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(2,6,23,0.65);
  color: rgba(248,250,252,0.95);
  border: 1px solid rgba(148,163,184,0.28);
  backdrop-filter: blur(6px);
}
/* =========================================================
   OPTION D — Weekly Love click opens a premium modal,
   with "Open full page" view support.
========================================================= */

/* --- Modal shell --- */
.gst-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}
.gst-modal.open{ display: block; }

.gst-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gst-modal-card{
  position: relative;
  max-width: 980px;
  width: calc(100% - 24px);
  margin: 18px auto;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(148,163,184,0.24);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
body.dark .gst-modal-card{
  background: rgba(2,6,23,0.92);
  border-color: rgba(148,163,184,0.25);
}

.gst-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(15,23,42,0.70);
  color: #f9fafb;
  z-index: 2;
}
.gst-modal-close:hover{ opacity: 0.92; }

.gst-modal-media{
  width: 100%;
  height: 320px;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gst-modal-media img,
.gst-modal-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gst-modal-body{
  padding: 14px 14px 16px;
}
.gst-modal-top{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.gst-modal-eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.95);
}
body.dark .gst-modal-eyebrow{ color: rgba(226,232,240,0.70); }

.gst-modal-title{
  margin: 4px 0 2px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
body.dark .gst-modal-title{ color: #e5e7eb; }

.gst-modal-sub{
  font-size: 13px;
  color: rgba(100,116,139,0.92);
}
body.dark .gst-modal-sub{ color: rgba(226,232,240,0.72); }

.gst-modal-actions{
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.gst-modal-desc{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(15,23,42,0.90);
}
body.dark .gst-modal-desc{ color: rgba(226,232,240,0.82); }

.gst-modal-meta{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  font-size: 12px;
  color: rgba(100,116,139,0.92);
}
body.dark .gst-modal-meta{ color: rgba(226,232,240,0.70); }

.gst-meta-chip{
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(248,250,252,0.90);
}
body.dark .gst-meta-chip{
  background: rgba(15,23,42,0.55);
  border-color: rgba(148,163,184,0.22);
}

/* --- Full page view --- */
.gst-place-page{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.98);
  z-index: 9999;
  overflow: auto;
}
body.dark .gst-place-page{
  background: rgba(2,6,23,0.96);
}

.gst-place-page-inner{
  max-width: 980px;
  margin: 14px auto 40px;
  padding: 0 14px;
}

.gst-place-page-hero{
  width: 100%;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  background: #020617;
  margin-top: 10px;
}
.gst-place-page-hero img,
.gst-place-page-hero video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gst-place-page-content{
  padding: 14px 2px;
}

.gst-place-page-eyebrow{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.95);
}
body.dark .gst-place-page-eyebrow{ color: rgba(226,232,240,0.70); }

.gst-place-page-title{
  margin: 6px 0 4px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}
body.dark .gst-place-page-title{ color: #e5e7eb; }

.gst-place-page-sub{
  font-size: 14px;
  color: rgba(100,116,139,0.92);
}
body.dark .gst-place-page-sub{ color: rgba(226,232,240,0.72); }

.gst-place-page-actions{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gst-place-page-desc{
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15,23,42,0.90);
}
body.dark .gst-place-page-desc{ color: rgba(226,232,240,0.82); }

.gst-place-page-meta{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
/* =========================================================
   GOSEETHIS — PREMIUM PREVIEW ENHANCEMENTS
   SAFE: CSS ONLY (no JS logic changes)
   Applies to: modal preview + full page preview
========================================================= */

/* ---------- Premium “Hero Header” (Modal) ---------- */
.gst-modal-card--premium{
  overflow: hidden;
}

.gst-modal-hero-wrap{
  position: relative;
}

.gst-modal-hero-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 62%;
  background: linear-gradient(to top, rgba(2,6,23,0.70), rgba(2,6,23,0.00));
  pointer-events:none;
}

.gst-modal-hero-overlay{
  position: absolute;
  inset: 0;
  padding: 12px 12px 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.gst-modal-hero-overlay > *{ pointer-events: auto; }

.gst-modal-backpill{
  align-self: flex-start;
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  background: rgba(22,163,74,0.96);
  color: #052e16;
  box-shadow: 0 10px 30px rgba(2,6,23,0.25);
}
.gst-modal-backpill:active{ transform: translateY(1px); }

.gst-modal-hero-text{
  margin-top: auto;
  padding-top: 8px;
}

/* Chip style used for category pill */
.gst-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.20);
  color: rgba(15,23,42,0.92);
  font-size: 12px;
  font-weight: 800;
}
body.dark .gst-chip{
  background: rgba(15,23,42,0.74);
  border-color: rgba(148,163,184,0.18);
  color: rgba(248,250,252,0.92);
}

/* Modal title/sub sit on hero image */
.gst-modal-card--premium .gst-modal-title{
  color: #ffffff !important;
  text-shadow: 0 14px 44px rgba(2,6,23,0.60);
}
.gst-modal-card--premium .gst-modal-sub{
  color: rgba(226,232,240,0.92) !important;
  text-shadow: 0 14px 44px rgba(2,6,23,0.60);
}

/* Put the modal image back to hero-style height safely */
.gst-modal-card--premium .gst-modal-media{
  height: 320px;
}

/* ---------- Premium “Spec Grid” (Modal + Full Page) ---------- */
.gst-meta-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gst-meta-grid .gst-meta-chip{
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(248,250,252,0.92);
  border: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 18px 40px rgba(2,6,23,0.06);
}

body.dark .gst-meta-grid .gst-meta-chip{
  background: rgba(15,23,42,0.60);
  border-color: rgba(148,163,184,0.18);
  box-shadow: 0 18px 40px rgba(2,6,23,0.28);
}

.gst-meta-grid .gst-meta-chip b{
  display: block;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.95);
  margin-bottom: 6px;
}

body.dark .gst-meta-grid .gst-meta-chip b{
  color: rgba(148,163,184,0.92);
}

/* Many of your meta chips render like: <div class="gst-meta-chip"><b>Label</b><div>Value</div></div>
   This keeps values bold and premium */
.gst-meta-grid .gst-meta-chip div{
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,23,42,0.92);
}
body.dark .gst-meta-grid .gst-meta-chip div{
  color: rgba(226,232,240,0.94);
}

/* ---------- Premium “Hero Header” (Full page) ---------- */
.gst-place-hero-wrap{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.gst-place-hero-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 62%;
  background: linear-gradient(to top, rgba(2,6,23,0.72), rgba(2,6,23,0.00));
  pointer-events:none;
}

.gst-place-stickybar{
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  pointer-events: none;
}
.gst-place-stickybar > *{ pointer-events: auto; }

.gst-backpill,
.gst-actionpill{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 34px rgba(2,6,23,0.18);
}

.gst-backpill{
  background: rgba(22,163,74,0.96) !important;
  color: #052e16 !important;
  border: 0 !important;
}

.gst-actionpill{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(148,163,184,0.20) !important;
  color: rgba(15,23,42,0.92) !important;
}
body.dark .gst-actionpill{
  background: rgba(15,23,42,0.74) !important;
  border-color: rgba(148,163,184,0.18) !important;
  color: rgba(248,250,252,0.92) !important;
}

.gst-place-hero-overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 16px 18px 16px;
  z-index: 2;
}

.gst-place-hero-overlay .gst-place-page-title,
.gst-place-hero-overlay .gst-place-page-sub{
  color: #ffffff !important;
  text-shadow: 0 14px 44px rgba(2,6,23,0.60);
}

/* Mobile spec grid */
@media (max-width: 520px){
  .gst-meta-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   FULL PAGE PREMIUM TABS (Overview / Traveler stories)
   ========================================================= */

.gst-place-tabs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.gst-place-tab {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: inherit;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

body.dark .gst-place-tab {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.35);
}

.gst-place-tab:hover {
  transform: translateY(-1px);
}

.gst-place-tab.active {
  opacity: 1;
  border-color: rgba(251, 113, 133, 0.7);
}

.gst-place-panel {
  display: none;
}

.gst-place-panel.active {
  display: block;
}

/* Traveler stories list */
.gst-stories-empty {
  padding: 12px 0;
  opacity: 0.8;
  font-size: 13px;
}

.gst-stories-list {
  display: grid;
  gap: 12px;
}

.gst-story-card {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 12px 12px;
}

body.dark .gst-story-card {
  background: rgba(2, 6, 23, 0.72);
  border-color: rgba(148, 163, 184, 0.28);
}

.gst-story-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.gst-story-who {
  font-weight: 800;
  font-size: 13px;
}

.gst-story-meta {
  opacity: 0.8;
  font-size: 12px;
  font-weight: 600;
}

.gst-story-text {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.95;
  white-space: pre-wrap;
}

.gst-story-rating {
  font-size: 12px;
  font-weight: 800;
}

/* --- Explorer Stories premium header left (title + community chips) --- */
.gst-stories-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gst-stories-header-title {
  font-weight: 700;
  font-size: 13px;
  opacity: 0.9;
}

/* ✅ "Been here? Share your story!" button in Explorer Stories header */
.gst-stories-share-btn{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.04);
  color: var(--text-main);

  font-size: 12px;
  font-weight: 800;
  cursor: pointer;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.gst-stories-share-btn:hover{
  transform: translateY(-1px);
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.35);
}

body.dark .gst-stories-share-btn{
  background: rgba(2,6,23,0.25);
  border-color: rgba(148,163,184,0.18);
  color: #e5e7eb;
}

body.dark .gst-stories-share-btn:hover{
  background: rgba(59,130,246,0.16);
  border-color: rgba(59,130,246,0.40);
}

.gst-stories-header-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- Story meta chips (Season/Budget) --- */
.gst-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.gst-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  line-height: 1;
  color: rgba(15, 23, 42, 0.80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.gst-meta-chip--compact {
  padding: 4px 10px;
  font-size: 12px;
}

.gst-meta-chip .gst-chip-k {
  font-weight: 800;
  opacity: 0.75;
  font-size: 11px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.gst-meta-chip .gst-chip-v {
  font-weight: 700;
  opacity: 0.92;
  white-space: nowrap;
}

body.dark .gst-meta-chip {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Subtle "Is this your content? Request review" line (premium + understated) */
.gst-story-claimline {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  color: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

body.dark .gst-story-claimline {
  color: rgba(226, 232, 240, 0.55);
}

.gst-story-claimhint {
  opacity: 0.9;
}

/* Base style: works everywhere (mobile will show it normally) */
.gst-story-claimlink {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-style: italic;
  color: rgba(15, 23, 42, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

body.dark .gst-story-claimlink {
  color: rgba(226, 232, 240, 0.65);
}

/* Desktop hover behavior only (mouse/trackpad):
   - keep it subtle by hiding "Request review" until hover */
@media (hover: hover) and (pointer: fine) {
  .gst-story-claimlink {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  /* Show when hovering the story card OR the line itself */
  .gst-story-card:hover .gst-story-claimlink,
  .gst-story-claimline:hover .gst-story-claimlink {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .gst-story-card:hover .gst-story-claimline {
    color: rgba(15, 23, 42, 0.55);
  }

  body.dark .gst-story-card:hover .gst-story-claimline {
    color: rgba(226, 232, 240, 0.7);
  }
}

/* Hover color polish (still subtle) */
.gst-story-claimlink:hover {
  color: rgba(15, 23, 42, 0.75);
}

body.dark .gst-story-claimlink:hover {
  color: rgba(226, 232, 240, 0.9);
}

/* When already requested */
.gst-story-claimline--disabled .gst-story-claimstatus {
  font-style: italic;
  color: rgba(15, 23, 42, 0.38);
}

body.dark .gst-story-claimline--disabled .gst-story-claimstatus {
  color: rgba(226, 232, 240, 0.45);
}

/* =========================================================
   FIX: Full Page Hero behavior
   - Overview: static hero + thumbnails
   - Stories: slow rotation, NOT clickable
   ========================================================= */
.gst-place-page-hero {
  background: #020617;
  border-radius: 18px;
  overflow: hidden;
}

/* Main hero image should never show a "hand" cursor */
.gst-place-page-hero img,
.gst-hero-main {
  cursor: default !important;
}

.gst-hero-main {
  position: relative;
  width: 100%;
  /* keeps a premium, consistent crop and avoids black gaps */
  aspect-ratio: 16 / 9;
  background: #020617;
}

.gst-hero-main img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.6s ease;
}

.gst-hero-empty {
  padding: 18px;
  color: #e5e7eb;
}

/* Overview thumbnails strip */
.gst-hero-thumbs {
  display: flex;
  gap: 10px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  background: rgba(2, 6, 23, 0.85);
}

.gst-hero-thumb {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  width: 78px;
  height: 52px;
  flex: 0 0 auto;
  cursor: pointer !important;
}

.gst-hero-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* =========================================================
   EXPLORER STORIES TEASER (replaces old blue pill)
   ========================================================= */

.place-explorer-stories-section{
  margin-top: 10px;
}

.explorer-stories-teaser,
.gst-explorer-stories-teaser{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(255,159,122,0.10));
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.explorer-stories-teaser:hover,
.gst-explorer-stories-teaser:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  filter: brightness(1.02);
}

.explorer-stories-avatars{
  display: flex;
  align-items: center;
}

.explorer-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  margin-left: -10px;
}

.explorer-avatar:first-child{
  margin-left: 0;
}

.explorer-avatar--initial{
  background: rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.75);
}

body.dark .explorer-avatar--initial{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}

.explorer-stories-copy{
  flex: 1 1 auto;
  min-width: 0;
}

.explorer-stories-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0f172a);
  line-height: 1.15;
}

.explorer-stories-subtitle{
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorer-stories-arrow{
  font-size: 16px;
  opacity: 0.8;
}

/* Gentle attention animation (runs once; JS only applies once per place) */
.explorer-stories-teaser.is-attention,
.gst-explorer-stories-teaser.is-attention{
  animation: explorerStoriesNudge 900ms ease-out 1;
}

@keyframes explorerStoriesNudge{
  0%{ transform: translateY(0) scale(1); }
  30%{ transform: translateY(-2px) scale(1.01); }
  60%{ transform: translateY(0) scale(1); }
  85%{ transform: translateY(-1px) scale(1.005); }
  100%{ transform: translateY(0) scale(1); }
}
.weekly-love-rating{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(2,6,23,0.68);
  color: rgba(248,250,252,0.98);
  border: 1px solid rgba(148,163,184,0.28);
  backdrop-filter: blur(10px);
}
/* =========================================================
   EXPLORER STORIES TEASER — PREMIUM GLASS (FROSTED)
   ========================================================= */

/* Works whether your teaser is targeted by ID or class */
#gstExplorerStoriesTeaser,
.explorer-stories-teaser {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;                 /* tighter */

  width: 100%;
  padding: 10px 12px;        /* ✅ shorter */
  border-radius: 16px;       /* slightly tighter radius = premium */

  /* Glass */
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow:
    0 10px 26px rgba(2, 6, 23, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  cursor: pointer;
  user-select: none;

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

#gstExplorerStoriesTeaser:hover,
.explorer-stories-teaser:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow:
    0 14px 34px rgba(2, 6, 23, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

#gstExplorerStoriesTeaser:active,
.explorer-stories-teaser:active {
  transform: translateY(0px) scale(0.995);
}

/* subtle “shine” sweep (premium cue) */
#gstExplorerStoriesTeaser::before,
.explorer-stories-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.35) 25%,
    rgba(255,255,255,0.0) 55%
  );

  transform: translateX(-60%);
  opacity: 0;
}

/* “runs once” animation class — if your JS already adds something like this, keep yours.
   If you DON'T have a class, we can add it safely in app.js step B. */
.explorer-stories-teaser.is-once-animate::before {
  animation: gstTeaserShine 1100ms ease-out 1;
  opacity: 1;
}

@keyframes gstTeaserShine {
  0%   { transform: translateX(-60%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(60%); opacity: 0; }
}

/* Left side content */
.explorer-stories-teaser .teaser-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.explorer-stories-teaser .teaser-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

.explorer-stories-teaser .teaser-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.92);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explorer-stories-teaser .teaser-subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.70);
  line-height: 1.25;
}

/* Avatar row */
.explorer-stories-teaser .teaser-avatars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.explorer-stories-teaser .teaser-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.90);
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.18);
}

.explorer-stories-teaser .teaser-avatar.stack {
  margin-left: -10px;
}

/* Right side “chevron” */
.explorer-stories-teaser .teaser-right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(15, 23, 42, 0.70);
  font-weight: 700;
  font-size: 12px;
}

.explorer-stories-teaser .teaser-chevron {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* Dark mode support (if your site uses body.dark already) */
body.dark #gstExplorerStoriesTeaser,
body.dark .explorer-stories-teaser {
  background: rgba(15, 23, 42, 0.62);
  border-color: rgba(226, 232, 240, 0.14);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark .explorer-stories-teaser .teaser-kicker {
  color: rgba(226, 232, 240, 0.62);
}
body.dark .explorer-stories-teaser .teaser-title {
  color: rgba(248, 250, 252, 0.95);
}
body.dark .explorer-stories-teaser .teaser-subtitle {
  color: rgba(226, 232, 240, 0.78);
}
body.dark .explorer-stories-teaser .teaser-chevron {
  background: rgba(226, 232, 240, 0.10);
  border-color: rgba(226, 232, 240, 0.14);
}
/* =========================================================
   Explorer Stories Teaser — Premium Glass (Overview + Country card)
   Uses your existing markup:
   - button#gstExplorerStoriesTeaser.gst-explorer-stories-teaser
   - .explorer-stories-avatars / .explorer-avatar
   - .explorer-stories-copy / title / subtitle / arrow
   ========================================================= */

#gstExplorerStoriesTeaser.gst-explorer-stories-teaser{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 18px;
  padding: 12px 12px;
  margin: 10px 0 12px 0;

  display: flex;
  align-items: center;
  gap: 12px;

  cursor: pointer;

  /* Glass look */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.78),
    rgba(255,255,255,0.58)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 14px 30px rgba(15,23,42,0.10),
    0 0 0 1px rgba(255,255,255,0.55) inset;

  transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#gstExplorerStoriesTeaser.gst-explorer-stories-teaser:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,0.40);
  box-shadow:
    0 18px 40px rgba(15,23,42,0.14),
    0 0 0 1px rgba(255,255,255,0.65) inset;
}

#gstExplorerStoriesTeaser.gst-explorer-stories-teaser:active{
  transform: translateY(0px);
}

#gstExplorerStoriesTeaser.gst-explorer-stories-teaser:focus{
  outline: none;
}

#gstExplorerStoriesTeaser.gst-explorer-stories-teaser:focus-visible{
  outline: 2px solid rgba(59,130,246,0.55);
  outline-offset: 2px;
}

/* Dark mode support (if you use body.dark elsewhere) */
body.dark #gstExplorerStoriesTeaser.gst-explorer-stories-teaser{
  background: linear-gradient(
    135deg,
    rgba(2,6,23,0.72),
    rgba(2,6,23,0.52)
  );
  border-color: rgba(148,163,184,0.26);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}

/* Left “avatar” cluster */
.gst-explorer-stories-teaser .explorer-stories-avatars{
  display: flex;
  align-items: center;
}

.gst-explorer-stories-teaser .explorer-avatar{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 8px 18px rgba(15,23,42,0.12);
  margin-left: -10px;
}

.gst-explorer-stories-teaser .explorer-avatar:first-child{
  margin-left: 0;
}

body.dark .gst-explorer-stories-teaser .explorer-avatar{
  border-color: rgba(2,6,23,0.75);
}

.gst-explorer-stories-teaser .explorer-avatar--initial{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: rgba(15,23,42,0.82);
  background: linear-gradient(135deg, rgba(226,232,240,1), rgba(203,213,225,1));
}

/* Copy */
.gst-explorer-stories-teaser .explorer-stories-copy{
  flex: 1;
  min-width: 0;
  text-align: left;
}

.gst-explorer-stories-teaser .explorer-stories-title{
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gst-explorer-stories-teaser .explorer-stories-subtitle{
  font-size: 12px;
  margin-top: 2px;
  color: rgba(71,85,105,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .gst-explorer-stories-teaser .explorer-stories-title{
  color: rgba(248,250,252,0.94);
}

body.dark .gst-explorer-stories-teaser .explorer-stories-subtitle{
  color: rgba(226,232,240,0.82);
}

/* Right arrow */
.gst-explorer-stories-teaser .explorer-stories-arrow{
  font-size: 18px;
  font-weight: 900;
  opacity: 0.7;
  transform: translateX(0);
  transition: transform 160ms ease, opacity 160ms ease;
}

.gst-explorer-stories-teaser:hover .explorer-stories-arrow{
  transform: translateX(2px);
  opacity: 0.9;
}

/* One-time gentle attention animation (your JS toggles .is-attention) */
.gst-explorer-stories-teaser.is-attention{
  animation: gstTeaserPulse 900ms ease-out 1;
}

@keyframes gstTeaserPulse{
  0%   { transform: translateY(0);   box-shadow: 0 0 0 rgba(59,130,246,0.0); }
  45%  { transform: translateY(-2px); box-shadow: 0 0 22px rgba(59,130,246,0.28); }
  100% { transform: translateY(0);   box-shadow: 0 14px 30px rgba(15,23,42,0.10); }
}
/* ===== Explorer Stories Teaser — Glass/Frosted (ID based, guaranteed) ===== */
#gstExplorerStoriesTeaser{
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 18px;
  padding: 14px 14px;
  margin: 10px 0 12px 0;

  display: flex;
  align-items: center;
  gap: 12px;

  cursor: pointer;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.78),
    rgba(255,255,255,0.58)
  );

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 14px 30px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.55);

  transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#gstExplorerStoriesTeaser:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,0.40);
  box-shadow:
    0 18px 40px rgba(15,23,42,0.14),
    inset 0 1px 0 rgba(255,255,255,0.65);
}

#gstExplorerStoriesTeaser:active{
  transform: translateY(0px) scale(0.995);
}

body.dark #gstExplorerStoriesTeaser{
  background: linear-gradient(
    135deg,
    rgba(2,6,23,0.72),
    rgba(2,6,23,0.52)
  );
  border-color: rgba(148,163,184,0.26);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Shine sweep (only if JS adds .is-once-animate) */
#gstExplorerStoriesTeaser::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.35) 25%,
    rgba(255,255,255,0.0) 55%
  );

  transform: translateX(-60%);
  opacity: 0;
}

#gstExplorerStoriesTeaser.is-once-animate::before{
  animation: gstTeaserShine 1100ms ease-out 1;
  opacity: 1;
}

@keyframes gstTeaserShine{
  0%   { transform: translateX(-60%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(60%); opacity: 0; }
}

/* Keep your existing avatar/copy classes working */
#gstExplorerStoriesTeaser .explorer-stories-avatars{ display:flex; align-items:center; }
#gstExplorerStoriesTeaser .explorer-avatar{
  width: 30px; height: 30px; border-radius: 999px;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 8px 18px rgba(15,23,42,0.12);
  margin-left: -10px;
}
#gstExplorerStoriesTeaser .explorer-avatar:first-child{ margin-left:0; }

#gstExplorerStoriesTeaser .explorer-stories-copy{ flex:1; min-width:0; text-align:left; }
#gstExplorerStoriesTeaser .explorer-stories-title{
  font-size: 13.5px; font-weight: 900; color: rgba(15,23,42,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#gstExplorerStoriesTeaser .explorer-stories-subtitle{
  font-size: 12px; margin-top: 2px; color: rgba(71,85,105,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dark #gstExplorerStoriesTeaser .explorer-stories-title{ color: rgba(248,250,252,0.94); }
body.dark #gstExplorerStoriesTeaser .explorer-stories-subtitle{ color: rgba(226,232,240,0.82); }

#gstExplorerStoriesTeaser .explorer-stories-arrow{
  font-size: 18px; font-weight: 900; opacity: 0.7;
  transition: transform 160ms ease, opacity 160ms ease;
}
#gstExplorerStoriesTeaser:hover .explorer-stories-arrow{
  transform: translateX(2px);
  opacity: 0.9;
}
/* =========================================================
   Explorer Stories teaser — CTA polish (ONLY the teaser)
   Paste at the very bottom of style.css
   ========================================================= */

.explorer-stories-teaser .teaser-right .teaser-cta{
  font-weight: 800;
  letter-spacing: -0.01em;
}

body.dark .explorer-stories-teaser .teaser-right .teaser-cta{
  color: rgba(226, 232, 240, 0.92);
}

.explorer-stories-teaser .teaser-right{
  white-space: nowrap;
}
/* =========================================================
   FINAL OVERRIDE — Explorer Stories teaser (premium glass)
   Paste at the VERY BOTTOM of style.css
   ========================================================= */

#gstExplorerStoriesTeaser.explorer-stories-teaser,
.explorer-stories-teaser{
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.72),
    rgba(248,250,252,0.55)
  ) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow:
    0 14px 34px rgba(2, 6, 23, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

.explorer-stories-teaser .teaser-kicker{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.explorer-stories-teaser .teaser-title{
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.explorer-stories-teaser .teaser-right{
  gap: 10px !important;
}

.explorer-stories-teaser .teaser-cta{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.explorer-stories-teaser .teaser-chevron{
  background: rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

body.dark #gstExplorerStoriesTeaser.explorer-stories-teaser,
body.dark .explorer-stories-teaser{
  background: rgba(2, 6, 23, 0.55) !important;
  border-color: rgba(226, 232, 240, 0.16) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

body.dark .explorer-stories-teaser .teaser-kicker{
  background: rgba(226, 232, 240, 0.10);
  border-color: rgba(226, 232, 240, 0.14);
}
/* =========================================================
   FINAL OVERRIDE — Explorer Stories teaser (match the mock)
   ONLY affects the Explorer Stories teaser
   Paste at the VERY BOTTOM of style.css
   ========================================================= */

#gstExplorerStoriesTeaser.explorer-stories-teaser,
.explorer-stories-teaser{
  position: relative !important;
  overflow: hidden !important;

  padding: 20px 20px 18px 20px !important;
  gap: 18px !important;
  border-radius: 20px !important;

  /* STRONGER frosted glass */
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.95) 0 8px, rgba(255,255,255,0) 8px),
    radial-gradient(
      1400px 360px at 40% 12%,
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.22) 55%,
      rgba(255,255,255,0.05) 75%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,0.88),
      rgba(248,250,252,0.58)
    ) !important;

  border: 1px solid rgba(15, 23, 42, 0.14) !important;

  box-shadow:
    0 22px 60px rgba(2, 6, 23, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35) !important;

  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;

  transform: translateZ(0);
}

/* Subtle “spotlight” texture */
#gstExplorerStoriesTeaser.explorer-stories-teaser::after,
.explorer-stories-teaser::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(900px 240px at 35% 20%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.00) 60%),
    radial-gradient(600px 220px at 70% 85%, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.00) 60%);
  opacity: 0.9;
}

/* Hover: a little more “wow”, still premium */
#gstExplorerStoriesTeaser.explorer-stories-teaser:hover,
.explorer-stories-teaser:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow:
    0 22px 54px rgba(2, 6, 23, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Badge pill like the mock */
.explorer-stories-teaser .teaser-kicker{
  display: inline-flex !important;
  width: fit-content !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Editorial title: bigger + italic “really” */
.explorer-stories-teaser .teaser-title{
  font-size: 22px !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  color: rgba(15, 23, 42, 0.92) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.explorer-stories-teaser .teaser-title em{
  font-style: italic;
  font-weight: 800;
  opacity: 0.92;
}

/* Avatars: slightly larger + more “photo” */
.explorer-stories-teaser .teaser-avatars .teaser-avatar{
  width: 34px !important;
  height: 34px !important;
  border-width: 2px !important;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.16) !important;
}

/* CTA like the mock: warm + elegant */
.explorer-stories-teaser .teaser-right{
  gap: 12px !important;
}

.explorer-stories-teaser .teaser-cta{
  font-weight: 800 !important;
  font-size: 14px !important;
  color: rgba(180, 83, 9, 0.95) !important; /* warm gold-brown */
}

.explorer-stories-teaser:hover .teaser-cta{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Dark mode version */
body.dark #gstExplorerStoriesTeaser.explorer-stories-teaser,
body.dark .explorer-stories-teaser{
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.85) 0 8px, rgba(0,0,0,0) 8px),
    radial-gradient(1200px 260px at 40% 10%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 55%),
    rgba(2, 6, 23, 0.60) !important;

  border-color: rgba(226, 232, 240, 0.14) !important;

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

body.dark .explorer-stories-teaser .teaser-kicker{
  background: rgba(226, 232, 240, 0.10) !important;
  border-color: rgba(226, 232, 240, 0.14) !important;
  color: rgba(248, 250, 252, 0.90) !important;
}

body.dark .explorer-stories-teaser .teaser-title{
  color: rgba(248, 250, 252, 0.95) !important;
}

body.dark .explorer-stories-teaser .teaser-cta{
  color: rgba(252, 211, 77, 0.92) !important;
}
/* =========================================================
   EXTRA POLISH — ultra-fine glass grain + refraction edge
   ONLY affects the Explorer Stories teaser
   Paste at the VERY BOTTOM of style.css
   ========================================================= */

/* Ultra-fine grain layer (looks like real frosted glass) */
#gstExplorerStoriesTeaser.explorer-stories-teaser::before,
.explorer-stories-teaser::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  /* Two tiny repeating patterns layered = realistic grain */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.020) 0px,
      rgba(0,0,0,0.020) 1px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.00) 5px
    );

  opacity: 0.85;
  mix-blend-mode: overlay;
}

/* Subtle refraction edge (thin highlight rim like glass) */
#gstExplorerStoriesTeaser.explorer-stories-teaser,
.explorer-stories-teaser{
  /* Ensure pseudo-layers sit correctly */
  isolation: isolate;
}

#gstExplorerStoriesTeaser.explorer-stories-teaser > *,
.explorer-stories-teaser > *{
  position: relative;
  z-index: 2; /* keep text above grain */
}

/* Refraction rim + soft inner glow */
#gstExplorerStoriesTeaser.explorer-stories-teaser::after,
.explorer-stories-teaser::after{
  /* you already have an ::after spotlight in the mock block.
     This safely ADDS a rim effect using multiple box-shadows. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 1px 0 0 rgba(255,255,255,0.35),
    inset -1px 0 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.18);
}

/* Slight edge sparkle on hover (still premium, not flashy) */
#gstExplorerStoriesTeaser.explorer-stories-teaser:hover::after,
.explorer-stories-teaser:hover::after{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 1px 0 0 rgba(255,255,255,0.45),
    inset -1px 0 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(255,255,255,0.22);
}

/* Dark mode: grain becomes subtler, rim becomes cooler */
body.dark #gstExplorerStoriesTeaser.explorer-stories-teaser::before,
body.dark .explorer-stories-teaser::before{
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.020) 0px,
      rgba(255,255,255,0.020) 1px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.040) 0px,
      rgba(0,0,0,0.040) 1px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.00) 6px
    );
  opacity: 0.70;
  mix-blend-mode: overlay;
}

body.dark #gstExplorerStoriesTeaser.explorer-stories-teaser::after,
body.dark .explorer-stories-teaser::after{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 1px 0 0 rgba(255,255,255,0.06),
    inset -1px 0 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(255,255,255,0.05);
}



/* =========================================================
   Explorer Stories teaser — +N count badge (next to avatars)
   ========================================================= */
.explorer-stories-teaser .teaser-avatars .teaser-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;

  color: rgba(15, 23, 42, 0.80);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.14);
}

body.dark .explorer-stories-teaser .teaser-avatars .teaser-count{
  color: rgba(226, 232, 240, 0.92);
  background: rgba(226, 232, 240, 0.10);
  border-color: rgba(226, 232, 240, 0.22);
}
/* =========================================================
   PREMIUM INSIGHTS STRIP (Inspiration + Did you know?)
   ========================================================= */

.insights-strip {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 0;
  background: transparent;
  border: none;
}

.insights-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 820px) {
  .insights-grid {
    grid-template-columns: 1fr;
  }
}

.insight {
  padding: 0;
}

.insight-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.insight-text {
  margin: 0 0 10px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-main);
  max-width: 58ch;
}

.insight-action {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  cursor: pointer;
}

.insight-action:hover {
  text-decoration: underline;
}

/* =========================================================
   CINEMATIC COUNTRY HERO
========================================================= */

.country-cine-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 320px;
  margin: 10px 0 14px;
  border: 1px solid var(--border-soft);
}

.country-cine-hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--country-hero);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}

.country-cine-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(2,6,23,0.80) 0%,
    rgba(2,6,23,0.55) 42%,
    rgba(2,6,23,0.15) 100%
  );
}

.country-cine-hero-content {
  position: relative;
  z-index: 2;
  padding: 14px 14px 16px;
  color: #f9fafb;
}

.country-cine-back {
  border: none;
  background: rgba(2,6,23,0.35);
  color: #f9fafb;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
}

.country-cine-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.country-cine-flag {
  font-size: 28px;     /* slightly larger flag */
  line-height: 1;
  margin-right: 4px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

.country-cine-title {
  margin: 0;
  font-size: 64px;        /* BIG cinematic title */
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.country-cine-intro {
  margin: 10px 0 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(248,250,252,0.92);
}

.country-cine-bottom-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

.country-cine-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.country-cine-meta-pill {
  background: rgba(2,6,23,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(248,250,252,0.95);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}

/* Admin-only edit button (premium, subtle) */
.country-cine-admin-edit{
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(15,23,42,0.28);
  color: rgba(248,250,252,0.95);

  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.country-cine-admin-edit:hover{
  transform: translateY(-1px);
  background: rgba(2,6,23,0.42);
  border-color: rgba(255,255,255,0.28);
}
.country-cine-admin-edit:active{
  transform: translateY(0px) scale(0.99);
}

/* Admin-only delete country button (danger, stacked under edit) */
.country-cine-admin-delete{
  position: absolute;
  right: 14px;
  top: 52px;
  z-index: 3;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(239, 68, 68, 0.22);
  color: rgba(255,255,255,0.95);

  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.country-cine-admin-delete:hover{
  transform: translateY(-1px);
  background: rgba(239, 68, 68, 0.32);
  border-color: rgba(255,255,255,0.28);
}
.country-cine-admin-delete:active{
  transform: translateY(0px) scale(0.99);
}

.country-cine-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(2,6,23,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 10px 12px;
  border-radius: 16px;
  max-width: 520px;
}

.country-cine-cta-title {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.country-cine-cta-sub {
  font-size: 12px;
  color: rgba(248,250,252,0.88);
  margin-top: 2px;
}

.country-cine-cta-btn {
  white-space: nowrap;
}

/* Admin modal (country hero editor) */
.gst-country-admin-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.gst-country-admin-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gst-country-admin-card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(720px, calc(100vw - 22px));
  max-height: min(88vh, 920px);

  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);

  /* ✅ makes the modal behave nicely: header fixed, body scrolls */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gst-country-admin-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
  flex: 0 0 auto;
}

.gst-country-admin-title{
  font-size: 16px;
  font-weight: 950;
  color: rgba(15,23,42,0.92);
  margin: 0;
}

.gst-country-admin-sub{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.55);
}

.gst-country-admin-x{
  border: none;
  background: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.78);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.gst-country-admin-x:hover{
  background: rgba(15,23,42,0.10);
}

.gst-country-admin-body{
  padding: 12px 14px 14px;
  overflow: auto;          /* ✅ scroll inside modal */
  flex: 1 1 auto;
}

.gst-country-admin-row{
  margin-top: 12px;
}

.gst-country-admin-label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.86);
  margin-bottom: 6px;
}

.gst-country-admin-note{
  font-size: 11px;
  font-weight: 700;
  color: rgba(15,23,42,0.55);
  margin-top: 4px;
}

.gst-country-admin-help{
  font-size: 11px;
  font-weight: 700;
  color: rgba(15,23,42,0.58);
  margin-top: 6px;
  line-height: 1.35;
}

.gst-country-admin-file-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ✅ THIS IS THE IMPORTANT FIX:
   Your real markup uses .gst-country-admin-preview + img#gstCountryHeroPreviewImg */
.gst-country-admin-preview{
  width: 100%;
  aspect-ratio: 16 / 9;          /* nice “cover photo” shape */
  max-height: 240px;             /* prevents the giant vertical stretch */
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.06);
  margin-top: 10px;
}

.gst-country-admin-preview img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;             /* fill the box like a hero cover */
}

.gst-country-admin-textarea{
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border-radius: 12px;
  padding: 10px 10px;
  border: 1px solid rgba(15,23,42,0.18);
  background: rgba(248,250,252,0.92);
  font-size: 13px;
  font-weight: 650;
  color: rgba(15,23,42,0.90);
}

.gst-country-admin-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.10);
}

.gst-country-admin-actions .btn{
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 950;
}

.gst-country-admin-actions .btn.primary{
  background: #16a34a;
  border: 1px solid rgba(0,0,0,0.10);
  color: #fff;
}

.gst-country-admin-actions .btn.primary:hover{
  filter: brightness(1.04);
}

.gst-country-admin-actions .btn.ghost{
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.82);
}

@media (max-width: 560px){
  .gst-country-admin-card{ max-height: 92vh; }
  .gst-country-admin-body{ padding: 10px 12px 12px; }
  .gst-country-admin-preview{ max-height: 180px; }
}
/* =========================================================
   REMOVE WHITE CARD / FRAME BEHIND COUNTRY PAGE
========================================================= */

/* When a country page is open, flatten the layout */
body.country-page-open main {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Also neutralize any inner card wrapper */
body.country-page-open .main-layout,
body.country-page-open .tab-container,
body.country-page-open #explore {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* =========================================================
   COUNTRY PAGE: REMOVE WHITE FRAME AROUND HERO
========================================================= */

body.country-page-open header {
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  min-height: auto !important;
}

body.country-page-open .hero-shell {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
/* =========================================================
   FINAL OVERRIDE — REMOVE THE WHITE "CARD/FRAME" BEHIND
   THE COUNTRY HERO (Chile page)
   Paste this at the VERY BOTTOM of style.css
========================================================= */

.country-detail-hero {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* If you still see any “frame” spacing, remove margins too */
.country-detail-hero-media,
.country-contributor-strip {
  margin: 0 !important;
}
/* =========================================================
   COUNTRY HERO — soft bottom fade + subtle motion polish
   ========================================================= */

.country-cine-hero,
.country-detail-hero-media {
  position: relative;
  overflow: hidden;
}

/* Soft fade at the bottom so the hero blends into the page */
.country-cine-hero::after,
.country-detail-hero-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
  /* fades from transparent to your page background */
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(255,255,255,0.0) 15%,
    var(--app-bg, #f5f7fb) 100%
  );
  z-index: 5;
}

/* In dark mode, fade into dark background instead */
body.dark .country-cine-hero::after,
body.dark .country-detail-hero-media::after {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.0) 15%,
    #020617 100%
  );
}

/* Parallax target (we'll move the image layer via JS) */
.country-cine-hero img,
.country-detail-hero-media img {
  will-change: transform;
  transform: translate3d(0, var(--heroParallax, 0px), 0) scale(1.03);
}
/* Parallax smoothness */
.country-cine-hero-bg {
  will-change: transform;
  transform: translateY(0) scale(1.05);
}
/* CTA button inside country hero */
.country-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 20px rgba(2,6,23,0.20);
  transition: transform 160ms ease, background 160ms ease;
}

.country-hero-cta:hover {
  transform: translateY(-1px);
  background: rgba(2, 6, 23, 0.58);
}
/* =========================================================
   COUNTRY PAGE — HYBRID GRID (B)
   2 columns desktop, 1 column mobile
   Keeps the existing place-card design as-is
   ========================================================= */

#countryPlacesList.country-places-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 28px; /* stronger vertical rhythm = clearer separation */
  align-items: start;
  padding: 2px 0; /* tiny breathing room so shadows don't visually merge */
}

@media (max-width: 900px) {
  #countryPlacesList.country-places-grid {
    grid-template-columns: 1fr;
    row-gap: 18px;
    column-gap: 18px;
    padding: 0;
  }
}

/* Remove any card margins so spacing is controlled by the grid gap */
#countryPlacesList.country-places-grid .place-card {
  margin: 0 !important;
}

/* =========================================================
   PREMIUM TUNING FOR 2-UP COUNTRY GRID
   Keeps your existing slideshow + card layout
   ========================================================= */

/* Make the slideshow feel intentional in a 2-up grid */
#countryPlacesList.country-places-grid .media-hero-grid {
  aspect-ratio: 16 / 9;
  max-height: 320px;
}

/* Slightly tighter card rhythm for dense browsing */
#countryPlacesList.country-places-grid .place-card {
  border-radius: 16px;
  padding: 12px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#countryPlacesList.country-places-grid .place-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

/* Reduce vertical bloat inside grid cards */
#countryPlacesList.country-places-grid .place-quick-facts {
  margin: 10px 0;
}

/* Keep title compact in grid */
#countryPlacesList.country-places-grid .place-title {
  line-height: 1.2;
}
/* =====================================================
   ADMIN MODE INDICATOR
   ===================================================== */

.gst-admin-mode-indicator {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(17, 24, 39, 0.9); /* charcoal */
  color: #fff;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.gst-admin-mode-indicator button {
  appearance: none;
  border: none;
  background: transparent;
  color: #fff;

  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.gst-admin-mode-indicator button:hover {
  opacity: 0.75;
}
/* =========================================================
   PREMIUM ENTRY CARD (Option B) — polish + alignment
   Paste at VERY BOTTOM of style.css
   ========================================================= */

.premium-place-header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 12px 8px;
}

.premium-place-header .place-head-left{
  min-width:0;
}

.premium-place-header .place-head-right{
  display:flex;
  align-items:center;
  gap:8px;               /* slightly tighter */
  flex-shrink:0;
}

/* Make header actions look premium + compact */
.place-head-right .save-btn{
  padding: 3px 10px;      /* tighter than default */
  font-size: 11px;
  line-height: 1.1;
}

.place-head-right .icon-btn{
  padding: 3px 8px;       /* tighter icon button */
  font-size: 13px;
  line-height: 1.1;
}

.claim-place-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.22);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.01em;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.claim-place-link:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(148,163,184,0.34);
  transform:translateY(-1px);
}

body.dark .claim-place-link{
  background:rgba(2,6,23,0.25);
  border-color:rgba(148,163,184,0.18);
}

.claim-place-link--drawer{
  height:30px;
  padding:0 12px;
  font-size:12px;
}
/* Claim requested badge */
.claim-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,0.30);
  background:rgba(59,130,246,0.12);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.claim-time{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  opacity:0.75;
  margin-left:10px;
  white-space:nowrap;
}

.claim-time-inline{
  font-weight:800;
  font-size:12px;
  opacity:0.78;
  margin-left:6px;
  white-space:nowrap;
}

body.dark .claim-status-pill{
  border-color: rgba(96,165,250,0.28);
  background: rgba(30,58,138,0.28);
}

/* Optional: future statuses */
.claim-status-pill.is-approved{
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.14);
}
.premium-place-header .place-title-inline{
  margin:0;
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.2;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.premium-place-header .featured-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(250,204,21,0.14);
  border:1px solid rgba(250,204,21,0.24);
  color:var(--text);
}

/* Tags strip moved below media (premium) */
.premium-tags-strip{
  padding: 0 12px 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.premium-tags-strip .tag-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.20);
  background:rgba(255,255,255,0.02);
  color:var(--text);
}

body.dark .premium-tags-strip .tag-pill{
  background:rgba(2,6,23,0.25);
  border-color:rgba(148,163,184,0.16);
}

/* Micro-line under title (only shows when NOT verified) */
.place-microline{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(100,116,139,0.95);
}

body.dark .place-microline{
  color: rgba(226,232,240,0.70);
}

.premium-place-header .place-subline{
  margin-top: 4px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--text-muted);
  flex-wrap:wrap;
}

/* NEW: place tag pills inline with the location (Option 1) */
.premium-place-header .place-tags-inline{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* Make inline tag pills slightly tighter so the card is shorter */
.premium-place-header .place-tags-inline .tag-pill{
  margin-top: 0;
  padding: 3px 9px;
  font-size: 10.5px;
  line-height: 1.1;
}

.premium-place-header .place-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(255,255,255,0.02);
  color:var(--text);
}

body.dark .premium-place-header .place-chip{
  background:rgba(2,6,23,0.25);
  border-color:rgba(148,163,184,0.16);
}

.premium-section{
  padding:12px 12px 0;
}

.premium-about{
  margin-top:10px;
}

.premium-place-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-top:1px solid rgba(148,163,184,0.12);
}

.premium-actions-left{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.premium-actions-right{
  display:flex;
  gap:10px;
  align-items:center;
}

.premium-mini-btn{
  appearance:none;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  gap:8px;
  align-items:center;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.premium-mini-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(148,163,184,0.28);
}

body.dark .premium-mini-btn{
  background:rgba(2,6,23,0.25);
  border-color:rgba(148,163,184,0.16);
}

.premium-mini-btn.primary{
  border:none;
  background:linear-gradient(135deg, rgba(56,189,248,0.9), rgba(99,102,241,0.9));
  color:#0b1020;
}

.premium-mini-btn.primary:hover{
  background:linear-gradient(135deg, rgba(56,189,248,1), rgba(99,102,241,1));
}

.premium-mini-btn.danger{
  border-color:rgba(239,68,68,0.25);
  background:rgba(239,68,68,0.08);
}

.premium-mini-btn.danger:hover{
  border-color:rgba(239,68,68,0.35);
  background:rgba(239,68,68,0.12);
}

/* =========================================================
   Helpful for your visit (soft outline buttons)
   ========================================================= */
.gst-visit-links{
  margin: 10px 12px 0;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.14);
  background: rgba(255,255,255,0.03);
}

body.dark .gst-visit-links{
  background: rgba(2,6,23,0.22);
  border-color: rgba(148,163,184,0.16);
}

.gst-visit-links-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.gst-visit-links-title{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.gst-visit-links-sub{
  font-size: 12px;
  color: var(--text-muted);
}

.gst-visit-links-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.gst-outline-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: transparent;
  color: var(--text);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.gst-outline-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(148,163,184,0.34);
}

body.dark .gst-outline-btn{
  border-color: rgba(148,163,184,0.18);
  background: transparent;
}

body.dark .gst-outline-btn:hover{
  background: rgba(226,232,240,0.06);
  border-color: rgba(148,163,184,0.28);
}

.gst-outline-emoji{
  line-height: 1;
}

.gst-visit-links-note{
  margin-top:10px;
  font-size:11px;
  line-height:1.35;
  color: var(--text-muted);
  opacity: 0.95;
}

.premium-comments{
  padding:12px;
  border-top:1px solid rgba(148,163,184,0.12);
  display:grid;
  gap:10px;
}

.premium-comment{
  border:1px solid rgba(148,163,184,0.18);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,0.02);
}

body.dark .premium-comment{
  background:rgba(2,6,23,0.25);
  border-color:rgba(148,163,184,0.16);
}
/* =========================================================
   PROFILE SUBTABS (Trip list / Itinerary / Contributions)
   ========================================================= */
.profile-subtabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 10px;
  margin-bottom: 6px;
}

.profile-subtab-btn{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.04);
  color: var(--text-main);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
}

.profile-subtab-btn:hover{
  transform: translateY(-1px);
  background: rgba(15,23,42,0.07);
  border-color: rgba(148,163,184,0.55);
}

.profile-subtab-btn.is-active{
  background: rgba(37,99,235,0.12);
  border-color: rgba(37,99,235,0.35);
}

.profile-subtab-panel{
  display:none;
}

.profile-subtab-panel.is-active{
  display:block;
}
/* =========================================================
   PROFILE MAP (Premium look)
   (Only affects the new Map panel – safe / isolated)
   ========================================================= */

.profile-map-subtext{
  margin: 8px 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 760px;
}

.profile-map-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.legend-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display:inline-block;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.25);
  margin-right: 7px;
  vertical-align: middle;
}

.legend-dot.visited{
  background: linear-gradient(135deg, rgba(34,211,238,0.95), rgba(52,211,153,0.95));
  box-shadow:
    0 0 0 1px rgba(34,211,238,0.25),
    0 0 14px rgba(34,211,238,0.22);
}

.legend-dot.contributed{
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(251,146,60,0.95));
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.25),
    0 0 14px rgba(251,191,36,0.22);
}

.profile-map-container,
.gst-map-container{
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.22);
  overflow: hidden;
  background:
    radial-gradient(1100px 380px at 20% 15%, rgba(34,211,238,0.09), transparent 60%),
    radial-gradient(900px 360px at 80% 35%, rgba(251,191,36,0.08), transparent 55%),
    linear-gradient(180deg, rgba(15,23,42,0.06), rgba(15,23,42,0.02));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);

  /* a bit taller so the map is always visible */
  min-height: 320px;

  padding: 12px;
  position: relative;
}

body.dark .profile-map-container{
  border-color: rgba(148,163,184,0.18);
  background:
    radial-gradient(1100px 380px at 20% 15%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(900px 360px at 80% 35%, rgba(251,191,36,0.10), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,0.75), rgba(2,6,23,0.55));
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.profile-map-container:empty::before{
  content: "Map will appear here in Step 3 ✅";
  display: block;
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 12px;
}

.profile-map-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.profile-map-note{
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* When we inject an SVG map, keep it responsive */
#profileMapContainer svg{
  width: 100%;
  height: auto;
  display:block;
}

/* Country styling (will be used once the SVG is injected in Step 3) */
.gst-country{
  fill: rgba(15,23,42,0.18);
  stroke: rgba(148,163,184,0.25);
  stroke-width: 0.7;
  transition: filter 180ms ease, fill 180ms ease, stroke 180ms ease;
}

body.dark .gst-country{
  fill: rgba(148,163,184,0.08);
  stroke: rgba(148,163,184,0.22);
}

.gst-country:hover{
  stroke: rgba(148,163,184,0.55);
  filter: brightness(1.06);
}

/* Visited = GREEN premium glow */
.gst-country.is-visited{
  /* ✅ Fill is set in JS for reliability */
  stroke: rgba(34,197,94,0.70);
  filter: drop-shadow(0 0 10px rgba(34,197,94,0.18));
}

/* Contributed = GOLD premium glow */
.gst-country.is-contributed{
  stroke: rgba(251,191,36,0.65);
  filter: drop-shadow(0 0 12px rgba(251,191,36,0.22));
}

/* Both = PURPLE (stronger glow) */
.gst-country.is-both{
  stroke: rgba(168,85,247,0.75);
  filter: drop-shadow(0 0 14px rgba(168,85,247,0.25));
}
/* =========================================================
   SMART PLANNER NOTE (Premium highlight)
   ========================================================= */
.gst-smartplanner{
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;

  background: linear-gradient(
    135deg,
    rgba(99,102,241,0.10),
    rgba(56,189,248,0.10)
  );
  border: 1px solid rgba(148,163,184,0.22);
}

body.dark .gst-smartplanner{
  background: linear-gradient(
    135deg,
    rgba(99,102,241,0.16),
    rgba(56,189,248,0.12)
  );
  border-color: rgba(148,163,184,0.25);
}

.gst-smartplanner-title{
  display: flex;
  align-items: center;
  gap: 10px;

  font-weight: 900;
  font-size: 14px;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.gst-smartplanner-sparkle{
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 7px rgba(99,102,241,0.45));
}

.gst-smartplanner-sub{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.gst-smartplanner-sub strong{
  color: var(--text-main);
  font-weight: 800;
}
/* =========================================================
   "YOUR ITINERARY" HEADER (Premium)
   ========================================================= */
.gst-itin-head{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(148,163,184,0.05);
}

body.dark .gst-itin-head{
  background: rgba(255,255,255,0.04);
  border-color: rgba(148,163,184,0.18);
}

.gst-itin-head-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.gst-itin-head-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.gst-itin-head-ico{
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 7px rgba(99,102,241,0.35));
}

.gst-itin-head-chip{
  font-size: 11.5px;
  font-weight: 850;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(99,102,241,0.10);
  color: var(--text-main);
}

body.dark .gst-itin-head-chip{
  background: rgba(99,102,241,0.16);
  border-color: rgba(148,163,184,0.20);
}

.gst-itin-head-sub{
  margin-top: 6px;
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--text-muted);
}

.gst-itin-head-sub strong{
  color: var(--text-main);
  font-weight: 850;
}

.gst-itin-head-line{
  margin-top: 10px;
  height: 1px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(99,102,241,0.00),
    rgba(99,102,241,0.35),
    rgba(56,189,248,0.35),
    rgba(99,102,241,0.00)
  );
}

/* =========================================================
   ITINERARY BUILDER (Premium look + Upgraded)
   ========================================================= */
.itin-form{
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 20px;

  /* premium layered card */
  background:
    radial-gradient(1200px 420px at 10% -20%, rgba(99,102,241,0.16), rgba(99,102,241,0.00) 58%),
    radial-gradient(900px 360px at 110% 0%, rgba(56,189,248,0.14), rgba(56,189,248,0.00) 55%),
    rgba(255,255,255,0.72);

  border: 1px solid rgba(148,163,184,0.22);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.75);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark .itin-form{
  background:
    radial-gradient(1200px 420px at 10% -20%, rgba(99,102,241,0.18), rgba(99,102,241,0.00) 58%),
    radial-gradient(900px 360px at 110% 0%, rgba(56,189,248,0.14), rgba(56,189,248,0.00) 55%),
    rgba(2,6,23,0.60);

  border-color: rgba(148,163,184,0.22);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.itin-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.itin-row label{
  font-size: 12px;
  font-weight: 800;
  opacity: 0.85;
}

.itin-row input,
.itin-row select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(255,255,255,0.78);
  color: var(--text-main);
  font-size: 13px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75);

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 120ms ease,
    background 140ms ease;
}

body.dark .itin-row input,
body.dark .itin-row select{
  background: rgba(2,6,23,0.55);
  border-color: rgba(148,163,184,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.itin-row input:focus,
.itin-row select:focus{
  outline: none;
  border-color: rgba(99,102,241,0.55);
  box-shadow:
    0 0 0 4px rgba(99,102,241,0.18),
    inset 0 1px 0 rgba(255,255,255,0.70);
}

.itin-row input:active,
.itin-row select:active{
  transform: translateY(0.5px);
}

.itin-actions{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   Premium Share bar at bottom of itinerary
   ========================================================= */
.itin-sharebar{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(148,163,184,0.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

body.dark .itin-sharebar{
  background: rgba(255,255,255,0.05);
  border-color: rgba(148,163,184,0.18);
}

.itin-sharebar-title{
  font-weight: 900;
  font-size: 13px;
}

.itin-sharebar-sub{
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.itin-share-menu{
  position: relative;
}

.itin-share-menu-panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 210px;

  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.22);
  background: var(--card-bg);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);

  display: none;
  z-index: 50;
}

.itin-share-menu-panel.is-open{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.itin-share-menu-panel .btn{
  width: 100%;
  justify-content: center;
}

.itin-actions a{
  text-decoration:none;
  font-weight: 900;
  font-size: 12.5px;
}

/* =========================================================
   ITINERARY — Country picker (checkbox dropdown + chips)
   ========================================================= */
.itin-country-picker{
  position: relative;
  margin-top: 6px;
}

.itin-country-picker.is-disabled{
  opacity: 0.7;
  pointer-events: none;
}

.itin-country-btn{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.26);
  background: rgba(255,255,255,0.90);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}

body.dark .itin-country-btn{
  background: rgba(2,6,23,0.55);
  border-color: rgba(148,163,184,0.22);
}

.itin-country-btn:disabled{
  cursor: not-allowed;
}

.itin-country-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.itin-country-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(148,163,184,0.10);
  color: rgba(15,23,42,0.92);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

body.dark .itin-country-chip{
  background: rgba(255,255,255,0.06);
  border-color: rgba(148,163,184,0.20);
  color: rgba(226,232,240,0.90);
}

.itin-country-chip.is-all{
  cursor: default;
}

.itin-country-chip .x{
  font-weight: 900;
  opacity: 0.7;
  line-height: 1;
  transform: translateY(-1px);
}

.itin-country-panel{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 9999;

  max-height: 260px;
  overflow: auto;

  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.22);
  background: var(--card-bg);
  box-shadow: 0 18px 46px rgba(15,23,42,0.18);
}

.itin-country-panel.hidden{
  display: none;
}

.itin-country-opt{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 12.5px;
  cursor: pointer;
}

.itin-country-opt:hover{
  background: rgba(148,163,184,0.10);
}

body.dark .itin-country-opt:hover{
  background: rgba(255,255,255,0.06);
}

.itin-country-opt input{
  width: 16px;
  height: 16px;
}

/* ✅ Optional: Days per selected country (Premium) */
.itin-country-days{
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.55);
}

body.dark .itin-country-days{
  background: rgba(2,6,23,0.25);
  border-color: rgba(148,163,184,0.28);
}

.itin-country-days-head .t{
  font-weight: 900;
  font-size: 12.5px;
}

.itin-country-days-head .s{
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.itin-country-days-grid{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.itin-country-day-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.itin-country-day-name{
  font-size: 12.5px;
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itin-country-days-input{
  width: 92px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.90);
  color: rgba(15,23,42,0.92);
  font-size: 13px;
  text-align: center;
}

body.dark .itin-country-days-input{
  background: rgba(2,6,23,0.55);
  border-color: rgba(148,163,184,0.22);
  color: rgba(226,232,240,0.90);
}

/* ✅ NEW: Live "Days" notice under the Days input */
.itin-days-notice{
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

.itin-days-notice.is-warn{
  color: #b91c1c;
  font-weight: 800;
}

.itin-hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

.itin-card{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  background: var(--surface1);
  border: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

body.dark .itin-card{
  box-shadow: 0 16px 36px rgba(0,0,0,0.28);
}

.itin-day-title{
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.itin-slot{
  display:flex;
  gap:10px;
  margin-top: 8px;
}

.itin-slot-time{
  flex: 0 0 88px;
  font-size: 12px;
  font-weight: 900;
  opacity: 0.85;
}

.itin-slot-body{
  flex: 1;
}

.itin-place{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(148,163,184,0.08);
  margin-bottom: 8px;
}

body.dark .itin-place{
  background: rgba(255,255,255,0.06);
}

.itin-meta{
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}

.itin-meta a{
  color: var(--accent, #2563eb);
  text-decoration: none;
}

.itin-meta a:hover{
  text-decoration: underline;
}

/* --- Upgraded itinerary UI (focus + travel note + optional + inspiration) --- */
.itin-focus{
  font-weight: 800;
  opacity: 0.95;
}

.itin-note{
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(148,163,184,0.28);
  background: rgba(148,163,184,0.08);
}

body.dark .itin-note{
  background: rgba(255,255,255,0.06);
  border-color: rgba(148,163,184,0.22);
}

.itin-subtitle{
  margin-top: 10px;
  font-weight: 900;
  font-size: 12.5px;
}

.itin-list{
  margin: 6px 0 0 18px;
  font-size: 12.5px;
  color: var(--text-main);
}

.itin-slot.is-empty .itin-slot-body{
  opacity: 0.9;
}

.itin-optional{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.itin-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.04);
  font-size: 12px;
  font-weight: 700;
}

body.dark .itin-chip{
  background: rgba(255,255,255,0.06);
  border-color: rgba(148,163,184,0.22);
}

.itin-chip-meta{
  font-weight: 600;
  opacity: 0.78;
}

.itin-chip a{
  font-weight: 800;
  text-decoration: none;
}

.itin-chip a:hover{
  text-decoration: underline;
}

/* Dark mode — Add place CTA */
body.dark .add-place-link{
  background: rgba(2,6,23,0.55);
  border-color: rgba(148,163,184,0.22);
}
/* Share button — subtle premium hover glow */
.country-share-btn:hover{
  background: rgba(37,99,235,0.12);
  border-color: rgba(37,99,235,0.45);
  box-shadow:
    0 0 0 3px rgba(37,99,235,0.12),
    0 6px 16px rgba(37,99,235,0.25);
}
body.dark .country-share-btn:hover{
  background: rgba(37,99,235,0.18);
  border-color: rgba(37,99,235,0.55);
  box-shadow:
    0 0 0 3px rgba(37,99,235,0.18),
    0 6px 18px rgba(37,99,235,0.35);
}
/* Bottom panel "floats" from the photo (premium separation) */
.country-card-body{
  margin: 8px 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);

  box-shadow:
    0 10px 22px rgba(2, 6, 23, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

body.dark .country-card-body{
  border-color: rgba(148,163,184,0.16);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Tap/pressed feedback (mobile-friendly) */
.add-place-link:active{
  transform: translateY(0px) scale(0.99);
}

.country-share-btn:active{
  transform: translateY(0px) scale(0.96);
}

/* If any other icon buttons exist, they also get a nice press */
.map-btn:active{
  transform: translateY(0px) scale(0.96);
}
/* Primary CTA hover — premium, subtle */
.add-place-link:hover{
  background: rgba(37,99,235,0.08);
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 6px 16px rgba(37,99,235,0.18);
}
/* CTA arrow cue — subtle, premium */
.add-place-link{
  position: relative;
  overflow: hidden;
}

/* Arrow element created with CSS (no HTML change) */
.add-place-link::after{
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;

  font-size: 14px;
  font-weight: 700;
  color: var(--accent);

  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

/* On hover, arrow gently slides in */
.add-place-link:hover::after{
  transform: translateY(-50%) translateX(0);
  opacity: 0.9;
}

/* Make space for arrow when hovering */
.add-place-link:hover{
  padding-right: 34px;
}
/* =========================================================
   Country cards: subtle load-in animation (premium)
========================================================= */
@keyframes countryCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.country-card{
  animation: countryCardIn 420ms ease both;
}

/* tiny stagger so the grid feels alive */
.country-card:nth-child(1){ animation-delay: 0ms; }
.country-card:nth-child(2){ animation-delay: 40ms; }
.country-card:nth-child(3){ animation-delay: 80ms; }
.country-card:nth-child(4){ animation-delay: 120ms; }
.country-card:nth-child(5){ animation-delay: 160ms; }
.country-card:nth-child(6){ animation-delay: 200ms; }
.country-card:nth-child(7){ animation-delay: 240ms; }
.country-card:nth-child(8){ animation-delay: 280ms; }
.country-card:nth-child(9){ animation-delay: 320ms; }
.country-card:nth-child(10){ animation-delay: 360ms; }

/* Respect people who prefer no animations */
@media (prefers-reduced-motion: reduce){
  .country-card{ animation: none; }
}
/* =========================================================
   Country card: tiny place thumbnails row
========================================================= */
/* Thumbnails inside the cover photo */
.country-cover-with-thumbs{
  position: relative;
  overflow: hidden; /* needed for sheen */
}

/* Sheen highlight (premium) — no HTML change */
.country-cover-with-thumbs::before{
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0) 65%
  );

  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
  transition:
    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform, opacity;
}

.country-card:hover .country-cover-with-thumbs::before{
  opacity: 0.9;
  transform: translateX(60%) rotate(12deg);
}

/* Respect people who prefer no animations */
@media (prefers-reduced-motion: reduce){
  .country-cover-with-thumbs::before{
    transition: none;
    opacity: 0;
  }
}

.country-cover-with-thumbs .country-thumb-row{
  position: absolute;
  bottom: 10px;
  right: 10px;

  display: flex;
  align-items: center;
  gap: 0;                 /* no gap = overlap */
  z-index: 2;
}

.country-cover-with-thumbs .country-thumb{
  margin-left: -8px;      /* overlap amount */
}

.country-cover-with-thumbs .country-thumb:first-child{
  margin-left: 0;
}

/* make the last thumbnail sit on top (nice stacked feel) */
.country-cover-with-thumbs .country-thumb{
  position: relative;
}
.country-cover-with-thumbs .country-thumb:nth-child(1){ z-index: 1; }
.country-cover-with-thumbs .country-thumb:nth-child(2){ z-index: 2; }
.country-cover-with-thumbs .country-thumb:nth-child(3){ z-index: 3; }

.country-thumb{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 8px 18px rgba(2,6,23,0.35);

  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(2px);
}

.country-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.dark .country-thumb{
  border-color: rgba(148,163,184,0.16);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}
/* =========================================================
   Country card: Visited / Wishlist chips
========================================================= */
.country-status-row{
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.country-status-chip{
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(248,250,252,0.92);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.country-status-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,0.35);
  background: rgba(37,99,235,0.06);
  box-shadow: 0 6px 16px rgba(2,6,23,0.10);
}

.country-status-chip.active{
  border-color: rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.10);
}

body.dark .country-status-chip{
  background: rgba(2,6,23,0.55);
  border-color: rgba(148,163,184,0.18);
}

body.dark .country-status-chip:hover{
  background: rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.55);
}

body.dark .country-status-chip.active{
  border-color: rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.14);
}
/* =========================================================
   Mobile-first refinements for country cards
========================================================= */
@media (max-width: 640px){
  .country-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .country-card{
    border-radius: 16px;
  }

  .country-cover-wrapper{
    aspect-ratio: 4 / 3;
  }

  .country-card-body{
    margin: 6px 8px 8px;
    border-radius: 14px;
  }

  .country-thumb{
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .add-place-link{
    padding: 12px 12px;
    font-size: 13px;
  }
}/* Thumbnails appear only on hover (desktop) */
.country-cover-with-thumbs .country-thumb-row{
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.country-card:hover .country-cover-with-thumbs .country-thumb-row{
  opacity: 1;
  transform: translateY(0);
}

/* On mobile/touch: keep them visible (no hover) */
@media (hover: none){
  .country-cover-with-thumbs .country-thumb-row{
    opacity: 1;
    transform: none;
  }
}
/* =========================================================
   Itinerary — Food preferences pill chips (Premium)
   ========================================================= */
.fp-row-title {
  font-size: 12px;
  font-weight: 800;
  margin: 10px 0 6px;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.fp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* These buttons already have class="fp-chip chip-btn"
   We override chip-btn here so the pills are NEVER white-on-white. */
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;

  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.40);
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-main);

  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  cursor: pointer;
  user-select: none;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.10s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.fp-chip:hover {
  background: rgba(148, 163, 184, 0.22);
  border-color: rgba(148, 163, 184, 0.55);
  transform: translateY(-1px);
}

.fp-chip:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 2px;
}

/* Selected (active) state — premium highlight + checkmark */
.fp-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 0 0 3px rgba(59, 130, 246, 0.10);
}

.fp-chip.active::before {
  content: "✓";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}

/* Dark mode support (so chips don’t turn into low-contrast blobs) */
body.dark .fp-chip {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  box-shadow: none;
}

body.dark .fp-chip:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
}

body.dark .fp-chip.active {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.55);
  color: var(--text-main);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.fp-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* =========================================================
   PROFILE WORLD MAP (Step 5)
   ========================================================= */

.gst-map-shell{
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  position: relative;
}

body:not(.dark) .gst-map-shell{
  background: rgba(255,255,255,0.7);
  box-shadow: 0 16px 34px rgba(15,23,42,0.08);
}

.gst-map-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.gst-map-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 16px;
}

.gst-map-sub{
  font-size: 12.5px;
  opacity: 0.85;
  margin-top: 3px;
  line-height: 1.45;
}

.gst-map-expand-btn{
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(255,255,255,0.10);
  color: rgba(226,232,240,0.92);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

body:not(.dark) .gst-map-expand-btn{
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.88);
}

.gst-map-expand-btn:hover{
  filter: brightness(1.06);
}

/* 🚫 DISABLED legacy fullscreen system
   (Conflicts with .gst-map-shell.is-expanded) */
body.gst-map-expanded{
  overflow: visible;
}

.gst-map-expanded-shell{
  position: static;
  inset: auto;
  z-index: auto;
  margin: 0;
  border-radius: 0;
}

/* Tooltip (FIXED: pinned to cursor / viewport, not to the map container) */
.gst-map-tooltip{
  position: fixed; /* ✅ key fix */
  z-index: 99999;  /* stays above map */
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  pointer-events: none;
  background: rgba(2,6,23,0.92);
  color: rgba(248,250,252,0.95);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  border: 1px solid rgba(148,163,184,0.22);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* JS already offsets the tooltip, so keep transform subtle */
  transform: scale(0.98);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 140ms ease,
    transform 140ms ease;
  will-change: left, top, opacity, transform;
}

/* We keep these classes because JS toggles them (logic unchanged) */
.gst-map-tooltip.flip-x{ transform: scale(0.98); }
.gst-map-tooltip.flip-y{ transform: scale(0.98); }
.gst-map-tooltip.flip-x.flip-y{ transform: scale(0.98); }

/* tiny premium pin */
.gst-map-tooltip .gst-tip-icon{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.95);
  position: relative;
  box-shadow: 0 0 0 2px rgba(148,163,184,0.18);
}

.gst-map-tooltip .gst-tip-icon::after{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 50%;
  top: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(148,163,184,0.95);
  border-radius: 1px;
  box-shadow: 0 0 0 2px rgba(148,163,184,0.14);
}

.gst-map-tooltip.is-visible{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.gst-map-tooltip.hidden{
  opacity: 0;
  visibility: hidden;
}

body:not(.dark) .gst-map-tooltip{
  background: rgba(15,23,42,0.92);
}

/* Popup card (FIXED: no tall container at all) */
.gst-map-pop{
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 999;

  /* ✅ shrink-wrap to content */
  width: auto;
  height: auto;

  /* ✅ no full-screen flex wrapper */
  display: block;

  padding: 0;

  background: none;
}

body.dark .gst-map-pop{
  background: none;
}

.gst-map-pop.hidden{ display:none; }

/* ✅ Sheet container (true shrink-to-content, no blank space) */
.gst-map-sheet{
  width: min(560px, 100%);
  max-height: calc(100dvh - 24px);

  border-radius: 22px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 22px 60px rgba(2,6,23,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;

  /* ✅ IMPORTANT CHANGE:
     - the SHEET itself should NOT be the scroller
     - keep it shrink-wrapped to content
     - if content gets tall, ONLY the body scrolls */
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: hidden;
}

body.dark .gst-map-sheet{
  background: rgba(15,23,42,0.72);
  border-color: rgba(148,163,184,0.22);
}

/* Handle */
.gst-map-sheet-handle{
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(148,163,184,0.55);
  margin: 10px auto 6px;
}

body.dark .gst-map-sheet-handle{
  background: rgba(148,163,184,0.45);
}

/* Header / Body */
.gst-map-sheet-header{
  padding: 0 12px 10px;
}

/* ✅ Body becomes the ONLY scroll area if needed */
.gst-map-sheet-body{
  padding: 0 12px 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

/* Close */
.gst-map-pop-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(2,6,23,0.18);
  cursor: pointer;
  font-size: 22px;
  line-height: 36px;
  font-weight: 900;
  color: rgba(15,23,42,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}

.gst-map-pop-close:hover{ opacity: 1; }

body.dark .gst-map-pop-close{
  background: rgba(15,23,42,0.72);
  border-color: rgba(148,163,184,0.22);
  color: rgba(226,232,240,0.92);
  box-shadow: 0 14px 34px rgba(0,0,0,0.40);
}

body.dark .gst-map-pop-close:hover{
  background: rgba(15,23,42,0.86);
}

/* Title */
.gst-map-pop-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 2px 44px 2px 0;
  color: rgba(15,23,42,0.96);
}

body.dark .gst-map-pop-title{
  color: rgba(248,250,252,0.96);
}

/* Subtitle */
.gst-map-pop-sub{
  font-size: 14px;
  font-weight: 700;
  color: rgba(71,85,105,0.95);
  margin-bottom: 10px;
}

body.dark .gst-map-pop-sub{
  color: rgba(203,213,225,0.92);
}

/* Photo */
.gst-map-pop-photo{
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(241,245,249,0.75);
  box-shadow: 0 12px 28px rgba(2,6,23,0.10);
}

body.dark .gst-map-pop-photo{
  background: rgba(255,255,255,0.05);
  border-color: rgba(148,163,184,0.18);
}

.gst-map-pop-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

/* Arrows */
.gst-map-pop-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,0.18);
  background: rgba(15,23,42,0.65);
  color: rgba(248,250,252,0.95);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(2,6,23,0.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.96;
}

body.dark .gst-map-pop-nav{
  background: rgba(0,0,0,0.45);
  border-color: rgba(226,232,240,0.16);
}

.gst-map-pop-nav.prev{ left: 10px; }
.gst-map-pop-nav.next{ right: 10px; }

.gst-map-pop-nav:disabled{
  opacity: 0.35;
  cursor: default;
}

/* Count */
.gst-map-pop-count{
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(15,23,42,0.62);
  border: 1px solid rgba(226,232,240,0.18);
  color: rgba(248,250,252,0.95);
  box-shadow: 0 10px 22px rgba(2,6,23,0.20);
}

/* Empty state */
.gst-map-pop-empty{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-weight: 800;
  color: rgba(71,85,105,0.92);
}

body.dark .gst-map-pop-empty{
  color: rgba(203,213,225,0.92);
}

/* Upload */
.gst-map-pop-upload{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(59,130,246,0.10);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  color: rgba(37,99,235,0.95);
}

body.dark .gst-map-pop-upload{
  background: rgba(59,130,246,0.16);
  color: rgba(191,219,254,0.95);
}

.gst-map-pop-upload input{ display:none; }

/* Note */
.gst-map-pop-note{
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(71,85,105,0.92);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.dark .gst-map-pop-note{
  color: rgba(203,213,225,0.92);
}

.gst-map-pop-note-dot{
  opacity: 0.55;
}

/* ==========================
   ✅ Fullscreen Lightbox
   ========================== */
.gst-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.gst-lightbox.is-open{
  display: block;
}

.gst-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gst-lightbox-card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 22px));
  height: min(78vh, 760px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.92);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
}

.gst-lightbox-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gst-lightbox-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.08);
  color: rgba(248,250,252,0.92);
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
}

.gst-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.08);
  color: rgba(248,250,252,0.92);
  cursor: pointer;
  font-size: 26px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gst-lightbox-nav.prev{ left: 12px; }
.gst-lightbox-nav.next{ right: 12px; }

.gst-lightbox-count{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(148,163,184,0.22);
  color: rgba(248,250,252,0.92);
}

/* prevent background scroll when lightbox is open */
body.gst-no-scroll{
  overflow: hidden !important;
}

body.dark .gst-map-pop-note{
  color: rgba(226,232,240,0.62);
}

/* Loading bar (existing look) */
.gst-map-loadingbar{
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  overflow:hidden;
  position: relative;
}
.gst-map-loadingbar::after{
  content:"";
  position:absolute;
  inset:0;
  width: 40%;
  border-radius: inherit;
  background: rgba(59,130,246,0.55);
  animation: gstMapLoad 900ms ease-in-out infinite;
}
@keyframes gstMapLoad{
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

.gst-worldmap-wrap{
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: radial-gradient(circle at 30% 20%, rgba(59,130,246,0.10), transparent 55%),
              radial-gradient(circle at 80% 70%, rgba(34,197,94,0.08), transparent 55%),
              rgba(15,23,42,0.20);
  padding: 10px;

  /* ✅ Needed for premium pinned cards overlay */
  position: relative;
}

body:not(.dark) .gst-worldmap-wrap{
  background: radial-gradient(circle at 30% 20%, rgba(59,130,246,0.10), transparent 55%),
              radial-gradient(circle at 80% 70%, rgba(34,197,94,0.08), transparent 55%),
              rgba(255,255,255,0.7);
}

/* =========================================================
   PROFILE MAP – PINNED MEMORY CARDS (premium)
   ========================================================= */

.gst-map-pins{
  position: absolute;
  inset: 0;
  pointer-events: none; /* cards enable pointer individually */
  z-index: 3;
}

.gst-pin-card{
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;

  width: 210px;
  border-radius: 16px;
  padding: 10px;

  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);

  box-shadow:
    0 16px 32px rgba(15,23,42,0.18),
    0 2px 6px rgba(15,23,42,0.10);

  transition: transform 160ms ease, box-shadow 160ms ease;
}

body.dark .gst-pin-card{
  background: rgba(15,23,42,0.74);
  border-color: rgba(148,163,184,0.18);
}

.gst-pin-card:hover{
  transform: translate(-50%, -102%);
  box-shadow:
    0 20px 40px rgba(15,23,42,0.20),
    0 3px 10px rgba(15,23,42,0.12);
}

.gst-pin-thumb{
  width: 100%;
  height: 110px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(148,163,184,0.16);
}

.gst-pin-label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gst-pin-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(59,130,246,0.95);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

.gst-pin-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.86);
}

body.dark .gst-pin-badge{
  background: rgba(15,23,42,0.72);
  border-color: rgba(148,163,184,0.18);
}

.gst-worldmap-svg{
  display:block;
  width: 100%;
  height: auto;
}
/* =========================================================
   CLAIM PAGE (claim.html) – premium hero w/ auto place photo
   ========================================================= */

.gst-claim-page {
  background: radial-gradient(1200px 600px at 50% -200px, rgba(59,130,246,0.18), transparent 55%),
              radial-gradient(900px 500px at 10% 10%, rgba(34,197,94,0.14), transparent 55%),
              #020617;
  color: rgba(248, 250, 252, 0.92);
  min-height: 100vh;
}

.gst-claim-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

.gst-claim-hero{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 12px;
}

.gst-claim-hero-media{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  min-height: 260px;
  box-shadow: 0 18px 44px rgba(2,6,23,0.55);
  position: relative;
}

.gst-claim-hero-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gst-claim-hero-fallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(226,232,240,0.75);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.gst-claim-hero-meta{
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(248, 250, 252, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 14px 36px rgba(2,6,23,0.40);
}

.gst-claim-eyebrow{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(226, 232, 240, 0.72);
}

.gst-claim-title{
  margin: 6px 0 6px;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: rgba(248, 250, 252, 0.95);
}

.gst-claim-sub{
  font-size: 13px;
  color: rgba(226, 232, 240, 0.78);
}

.gst-claim-card{
  margin-top: 14px;
  border-radius: 18px;
  padding: 14px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 16px 42px rgba(2,6,23,0.45);
}

.gst-claim-card-title{
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.92);
}

.gst-claim-card-desc{
  margin: 0 0 12px 0;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.78);
}

.gst-claim-form{
  display: grid;
  gap: 10px;
}

.gst-claim-label{
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.85);
}

.gst-claim-input,
.gst-claim-textarea{
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(248, 250, 252, 0.06);
  color: rgba(248, 250, 252, 0.92);
  padding: 10px 10px;
  outline: none;
}

.gst-claim-input:focus,
.gst-claim-textarea:focus{
  border-color: rgba(96, 165, 250, 0.65);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

.gst-claim-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.gst-claim-success{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: rgba(236, 253, 245, 0.95);
  font-size: 13px;
}

.gst-claim-mini{
  margin-top: 14px;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(248, 250, 252, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.gst-claim-mini-title{
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  color: rgba(248, 250, 252, 0.92);
}

.gst-claim-mini-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 820px){
  .gst-claim-hero{
    grid-template-columns: 1fr;
  }
  .gst-claim-title{
    font-size: 22px;
  }
}
/* ================================
   CLAIM PAGE – upgrades (benefits, steps, selects)
   ================================ */

.gst-claim-benefits{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.gst-claim-benefit{
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(248, 250, 252, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 10px 24px rgba(2,6,23,0.25);
}

.gst-claim-benefit-icon{
  font-size: 16px;
  margin-bottom: 6px;
}

.gst-claim-benefit-title{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  color: rgba(248, 250, 252, 0.95);
}

.gst-claim-benefit-text{
  font-size: 12px;
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.35;
}

.gst-claim-select{
  width: 100%;
  margin-top: 6px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(248, 250, 252, 0.92);
  outline: none;
}

.gst-claim-select:focus{
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
}

.gst-claim-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.82);
}

.gst-claim-check input{
  margin-top: 2px;
}

.gst-claim-steps{
  margin: 8px 0 0;
  padding-left: 18px;
}

.gst-claim-steps li{
  margin: 6px 0;
  color: rgba(226, 232, 240, 0.84);
  font-size: 12.5px;
  line-height: 1.4;
}

.gst-claim-mini-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.72);
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
}

@media (max-width: 820px){
  .gst-claim-benefits{
    grid-template-columns: 1fr;
  }
}
/* Claim page: existing request note */
.gst-claim-existing{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(59,130,246,0.22);
  background: rgba(59,130,246,0.10);
  color: rgba(226,232,240,0.88);
  font-size: 12.5px;
  line-height: 1.35;
}

.gst-claim-status-row{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Claim form – business details (early access) */
.gst-claim-divider{
  margin: 14px 0;
  border: none;
  border-top: 1px dashed rgba(148,163,184,0.25);
}

.gst-claim-section-title{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gst-claim-badge{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.28);
  color: rgba(187,247,208,0.9);
}

.gst-claim-hint{
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: rgba(226,232,240,0.7);
}
/* ================================
   Official details (Owner) card — PREMIUM DARK (matte + confident)
   - No logic changes
   - Keeps the same collapsible behavior + owner-provided photos
   ================================ */
.gst-official-card{
  margin: 12px 0 14px;
  border-radius: 18px;
  overflow: hidden;

  /* Matte dark card (premium) */
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);

  position: relative;
}

/* Thin blue accent line (premium trust signal) */
.gst-official-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(59,130,246,0.85),
    rgba(96,165,250,0.35)
  );
}

/* Header — LIGHT & PREMIUM (collapsed state) */
.gst-official-toggle.gst-helpful-toggle{
  width: 100%;
  border: none;

  /* Light neutral header */
  background: rgba(255, 255, 255, 0.92);

  padding: 10px 12px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Gentle hover — still premium */
.gst-official-toggle.gst-helpful-toggle:hover{
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 -1px 0 rgba(226, 232, 240, 0.8);
}

.gst-official-toggle.gst-helpful-toggle:active{
  background: rgba(248, 250, 252, 1);
}

.gst-official-toggle .gst-helpful-toggle-left{
  text-align: left;
}

/* Title + chip */
.gst-official-title{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.15px;

  /* Dark neutral text for white background */
  color: rgba(15, 23, 42, 0.92);

  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Verified hint — ULTRA SUBTLE (system-level) */
.gst-official-title::after{
  content: "Verified";
  display: inline-block;

  margin-left: 8px;

  /* No box, no fill */
  background: none;
  border: none;

  color: rgba(147,197,253,0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Subtitle */
.gst-official-toggle .gst-helpful-sub{
  font-size: 12px;
  color: rgba(71, 85, 105, 0.85);
  line-height: 1.35;
  margin-top: 2px;
}


/* Chevron */
.gst-official-toggle .gst-helpful-chevron{
  font-size: 15px;
  color: rgba(226, 232, 240, 0.86);
  opacity: 0.9;
}

/* Expandable body */
.gst-official-body.gst-helpful-body{
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.22);
  padding: 12px 14px 14px;
}

/* Content rows */
.gst-official-rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gst-official-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.25;
  color: rgba(226, 232, 240, 0.92);
}

.gst-official-ico{
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
  flex: 0 0 auto;
}

.gst-official-link{
  color: rgba(147, 197, 253, 0.98);
  font-weight: 900;
  text-decoration: none;
  word-break: break-word;
}
.gst-official-link:hover{ text-decoration: underline; }

/* Photos (clean + premium) */
.gst-official-photos{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.gst-official-photo-btn{
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 14px;
}

.gst-official-photo{
  width: 70px;
  height: 50px;
  border-radius: 14px;
  object-fit: cover;

  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.60);
  box-shadow: 0 10px 22px rgba(0,0,0,0.24);
  transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.gst-official-photo-btn:hover .gst-official-photo{
  transform: translateY(-1px);
  opacity: 0.98;
  border-color: rgba(59, 130, 246, 0.30);
}

/* Claim callout under About this place (clean, non-salesy) */
/* Soft claim helper under About this place */
.gst-claim-under-about {
  margin-top: 10px;
  padding-top: 8px;
  font-size: 13px;
  opacity: 0.85;
}

/* Remove any strong layout inherited from header CTA */
.gst-claim-under-about > div {
  align-items: flex-start !important;
}

.gst-claim-under-about > div > div {
  text-align: left !important;
  max-width: none !important;
}

/* Normalize old header-based alignment styles */
.gst-claim-under-about > div {
  align-items: flex-start !important;
}

.gst-claim-under-about > div > div {
  text-align: left !important;
  max-width: none !important;
}
.gst-claim-under-about a {
  font-weight: 600;
}
/* Collapsible verified row (under media) */
.gst-official-toggle{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}

.gst-official-toggle-left{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.gst-verified-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.gst-official-toggle-title{
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

.gst-official-toggle-sub{
  font-size: 13px;
  opacity: 0.68;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gst-official-toggle-chev{
  font-size: 18px;
  opacity: 0.55;
  transition: transform 0.18s ease;
}

/* Panel collapsible behavior */
.gst-official-panel{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.22s ease, opacity 0.18s ease;
  margin: 0;
}

.gst-official-panel.is-open{
  max-height: 800px; /* enough space for owner info + 3 photos */
  opacity: 1;
  margin: 8px 0 0;
}

/* Rotate chevron when open */
.gst-official-toggle[aria-expanded="true"] .gst-official-toggle-chev{
  transform: rotate(180deg);
}
/* About copy as editorial text (no heading) */
.premium-about {
  padding-top: 10px;
}

.premium-about-text{
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.92;
}
/* Premium polish: Explorer Stories feels like the hero block */
.place-explorer-stories-section{
  padding-top: 8px;
}

/* Give the teaser a more editorial card feel */
.explorer-stories-teaser{
  border-radius: 18px;
  padding: 14px 14px;
}

/* Title slightly larger & clearer */
.explorer-stories-teaser .teaser-title{
  font-size: 15px;
  line-height: 1.25;
}

/* Make "Explorers say" feel like a subtle kicker */
.explorer-stories-teaser .teaser-kicker{
  font-size: 12px;
  letter-spacing: 0.2px;
  opacity: 0.75;
}

/* Make the CTA less shouty (more premium) */
.explorer-stories-teaser .teaser-cta{
  opacity: 0.75;
  font-weight: 700;
}

/* Optionally soften the extra chevron if it feels busy */
.explorer-stories-teaser .teaser-chevron{
  opacity: 0.35;
}
/* Premium spacing rhythm: tighter, calmer cards (no logic changes) */

/* Normalize section spacing */
.place-section{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Slightly tighter gap after media + verified row */
.premium-place-header{
  margin-bottom: 8px;
}

/* Tags strip: keep compact */
.premium-tags-strip{
  margin: 8px 0 2px;
}

/* About text: compact but readable */
.premium-about{
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Claim helper under About: keep subtle and close */
.gst-claim-under-about{
  margin-top: 6px;
  padding-top: 6px;
  opacity: 0.82;
}

/* Verified collapsed row: slightly tighter */
.gst-official-toggle{
  margin: 8px 0 4px;
  padding: 9px 11px;
  border-radius: 16px;
}

/* When verified panel opens, keep spacing controlled */
.gst-official-panel.is-open{
  margin: 6px 0 0;
}

/* Explorer Stories: give it breathing room but not huge */
.place-explorer-stories-section{
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Action buttons area (if your buttons sit in a section) */
.place-actions-section{
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Premium actions refinement: reduce noise */

/* Primary action (e.g. "Add to list") stays clear */
.place-actions-section .primary-action,
.place-actions-section .action-primary,
.place-actions-section button:first-child {
  font-weight: 800;
}

/* Secondary actions (e.g. Request removal) feel quieter */
.place-actions-section .secondary-action,
.place-actions-section .action-secondary,
.place-actions-section a:not(.primary-action),
.place-actions-section button:not(:first-child) {
  opacity: 0.65;
  font-weight: 600;
}

/* Reduce visual weight of destructive/secondary text */
.place-actions-section a,
.place-actions-section button {
  font-size: 13px;
}

/* Compact spacing */
.place-actions-section{
  gap: 6px;
}

/* Remove heavy outlines if any */
.place-actions-section button,
.place-actions-section a{
  border-color: rgba(148,163,184,0.25);
}

/* Hover remains, but calm */
.place-actions-section a:hover,
.place-actions-section button:hover{
  opacity: 0.9;
}
/* Premium comments refinement: calmer + cleaner */

/* Comment section spacing */
.place-comments-section{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Make comment headings/subtext less loud */
.place-comments-section .place-section-title,
.place-comments-section h5{
  font-size: 13px;
  opacity: 0.75;
  letter-spacing: 0.15px;
}

/* Comment list items: softer borders, tighter spacing */
.place-comments-section .comment,
.place-comments-section .comment-item,
.place-comments-section li{
  border-color: rgba(148,163,184,0.18) !important;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Comment body typography */
.place-comments-section .comment-text,
.place-comments-section p{
  line-height: 1.4;
  opacity: 0.9;
}

/* Input + button area: compact and calm */
.place-comments-section textarea,
.place-comments-section input[type="text"]{
  border-color: rgba(148,163,184,0.22);
}

.place-comments-section button{
  opacity: 0.85;
  font-weight: 700;
}

/* Avoid overly bold UI lines */
.place-comments-section .muted,
.place-comments-section small{
  opacity: 0.7;
}
/* Notes vibe for comments (minimal + serious) */
.place-comments-section textarea,
.place-comments-section input[type="text"]{
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

.place-comments-section button{
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
}

/* Reduce “card inside card” feeling */
.place-comments-section .comment,
.place-comments-section .comment-item,
.place-comments-section li{
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(148,163,184,0.16) !important;
  border-radius: 0 !important;
}

/* Make usernames/dates feel like subtle metadata */
.place-comments-section .comment-meta,
.place-comments-section .comment-author,
.place-comments-section .comment-time,
.place-comments-section small{
  font-size: 12px;
  opacity: 0.65;
}
/* Unified muted text system (premium editorial feel) */

/* General muted text utility */
.text-muted,
.muted,
.place-microline,
.place-subline,
.place-location,
.gst-claim-under-about,
.place-comments-section small,
.place-comments-section .comment-meta{
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.35;
}

/* Slightly stronger muted text when needed */
.text-muted-strong,
.place-comments-section .comment-author{
  font-size: 12px;
  opacity: 0.75;
}

/* Ensure muted text never competes with content */
.place-description-text,
.premium-about-text{
  opacity: 0.92;
}

/* Normalize link tone in muted areas */
.text-muted a,
.muted a,
.gst-claim-under-about a{
  font-weight: 700;
}
/* Verified row as metadata when placed below Explorer Stories */
.gst-official-toggle{
  background: rgba(255,255,255,0.02);
  border-color: rgba(148,163,184,0.14);
  padding: 8px 11px;
}

.gst-official-toggle-title{
  font-size: 13px;
}

.gst-official-toggle-sub{
  font-size: 12px;
  opacity: 0.6;
}
/* ===============================
   Premium collapsed comments
   =============================== */

/* Wrapper spacing */
.gst-comments-wrap {
  margin-top: 8px;
}

/* Summary line (collapsed state) */
.gst-comments-summary {
  width: 100%;
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
}

.gst-comments-summary-text {
  font-size: 12px;
  opacity: 0.65;
}

.gst-comments-summary-chev {
  font-size: 14px;
  opacity: 0.4;
  margin-left: 6px;
}

/* Comments panel hidden by default */
.gst-comments-panel {
  display: none;
}

/* Expanded state */
.gst-comments-panel.is-open {
  display: block;
  margin-top: 8px;
}
/* Explorers’ notes header (collapse-back affordance) */
.gst-comments-open-header{
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
  margin-bottom: 6px;
  cursor: pointer;
}

.gst-comments-open-header:hover{
  opacity: 0.9;
}
/* =========================================================
   Explorer Stories (Traveler Notes) overlay + close button
   + per-story removal request button
   ========================================================= */

.traveler-notes-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 12px;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
}

.traveler-notes-overlay.open{
  display: flex;
}

.traveler-notes-panel{
  width: min(760px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.traveler-notes-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
}

.traveler-notes-close{
  appearance: none;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(255,255,255,0.08);
  color: rgba(226,232,240,0.95);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.traveler-notes-body{
  padding: 0 14px 14px;
  overflow: auto;
}

/* per-story actions */
.traveler-story-actions{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.traveler-story-removal-label{
  font-size: 12px;
  opacity: 0.85;
}

.traveler-story-removal-btn{
  appearance: none;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(255,255,255,0.06);
  color: rgba(226,232,240,0.95);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.traveler-story-removal-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
}

.traveler-story-removal-btn.is-disabled{
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}
/* =========================================================
   PREMIUM CARD CALMING — MICRO POLISH #6 (SAFE OVERRIDE)
   Goal: Reduce visual noise so cards feel calmer & more expensive
   Method:
     - Softer secondary text
     - Tighter internal rhythm
     - Clear hierarchy without adding UI
   Logic: NONE (CSS only)
   ========================================================= */

/* Grid stays the same (no layout changes) */
#countryPlacesList {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 34px;

  padding: 12px;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.016);
}

body.dark #countryPlacesList {
  background: rgba(226, 232, 240, 0.022);
}

/* Mobile safety */
@media (max-width: 900px) {
  #countryPlacesList {
    grid-template-columns: 1fr;
    column-gap: 18px;
    row-gap: 22px;
    padding: 0;
    background: transparent;
  }
}

/* ---------------------------------------------------------
   Card base (solid, calm, editorial)
   --------------------------------------------------------- */
#countryPlacesList .place-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

body.dark #countryPlacesList .place-card {
  background: rgba(2, 6, 23, 0.70);
  border-color: rgba(148, 163, 184, 0.22);
}

/* Calm elevation (still separated, less “busy”) */
#countryPlacesList .place-card:nth-child(odd) {
  box-shadow:
    -10px 14px 26px rgba(15, 23, 42, 0.07),
    0 2px 6px rgba(15, 23, 42, 0.05);
}
#countryPlacesList .place-card:nth-child(even) {
  box-shadow:
    10px 14px 26px rgba(15, 23, 42, 0.07),
    0 2px 6px rgba(15, 23, 42, 0.05);
}

body.dark #countryPlacesList .place-card:nth-child(odd),
body.dark #countryPlacesList .place-card:nth-child(even) {
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.22);
}

/* ---------------------------------------------------------
   TYPOGRAPHY CALMING (this is the big premium gain)
   --------------------------------------------------------- */

/* Titles: confident but not loud */
#countryPlacesList .place-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Secondary labels & meta: quieter */
#countryPlacesList .place-meta,
#countryPlacesList .place-quick-facts,
#countryPlacesList .premium-comments {
  color: rgba(15, 23, 42, 0.60);
  font-size: 12.5px;
}

body.dark #countryPlacesList .place-meta,
body.dark #countryPlacesList .place-quick-facts,
body.dark #countryPlacesList .premium-comments {
  color: rgba(226, 232, 240, 0.65);
}

/* Body text / story snippets: slightly calmer */
#countryPlacesList .place-description,
#countryPlacesList .story-snippet {
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.80);
}

body.dark #countryPlacesList .place-description,
body.dark #countryPlacesList .story-snippet {
  color: rgba(226, 232, 240, 0.82);
}

/* ---------------------------------------------------------
   INTERNAL SPACING RHYTHM (less air, more intention)
   --------------------------------------------------------- */

/* Reduce stacking gaps slightly */
#countryPlacesList .place-card > * + * {
  margin-top: 6px;             /* ✅ tighter overall card height */
}

/* Action zone feels like a quiet footer */
#countryPlacesList .place-card .premium-place-actions {
  margin-top: auto;
  padding-top: 8px;            /* ✅ less height */
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}

body.dark #countryPlacesList .place-card .premium-place-actions {
  border-top-color: rgba(148, 163, 184, 0.14);
}

/* Comments area: softer, less contrast */
#countryPlacesList .place-card .premium-comments {
  background: rgba(15, 23, 42, 0.012);
}

body.dark #countryPlacesList .place-card .premium-comments {
  background: rgba(255, 255, 255, 0.03);
}

/* ---------------------------------------------------------
   Quiet hover (premium = less movement)
   --------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  #countryPlacesList .place-card:hover {
    transform: translateY(-1px);
    border-color: rgba(148, 163, 184, 0.26);
  }
}/* Discover (Home hint) label */
.country-category-label--discover {
  display: flex;
  align-items: center;
  gap: 8px;
}

.country-category-home {
  display: inline-flex;
  width: 14px;
  height: 14px;
  opacity: 0.75;
  transform: translateY(1px);
}

.country-category-home svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Slightly stronger when active (premium hint, not loud) */
.country-category-card.active .country-category-home {
  opacity: 0.95;
}
/* =========================================================
   EDITOR'S PICKS ROW (3 tiles) — premium, subtle
   ========================================================= */

.editors-picks .weekly-love-inner{
  border: 1px solid rgba(15, 23, 42, 0.10);
}

body.dark .editors-picks .weekly-love-inner{
  border-color: rgba(148, 163, 184, 0.22);
}

.editors-picks-kicker{
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: rgba(15, 23, 42, 0.80);
  margin-bottom: 6px;
}

body.dark .editors-picks-kicker{
  background: rgba(226, 232, 240, 0.10);
  border-color: rgba(226, 232, 240, 0.16);
  color: rgba(226, 232, 240, 0.86);
}

.editors-picks-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px){
  .editors-picks-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* Add a small badge inside tiles */
.editors-picks-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark .editors-picks-badge{
  background: rgba(2, 6, 23, 0.72);
  border-color: rgba(226, 232, 240, 0.18);
  color: rgba(226, 232, 240, 0.92);
}
/* =========================================================
   CLAIM PAGE VISIBILITY FIXES (SAFE OVERRIDES)
   ========================================================= */

/* Back / Cancel buttons on claim.html */
.gst-claim-back {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 8px;

  background: #ffffff;
  color: #111111 !important;

  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.gst-claim-back:hover {
  background: #f5f5f5;
}
/* Claim place info card (top-right on claim page) */
.claim-place-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

/* Title text inside that card */
.claim-place-title {
  color: #111111 !important;
  font-weight: 700;
}
/* =========================================================
   CLAIM PAGE – RIGHT HERO INFO BOX (READABILITY FIX)
   This targets the box beside the photo:
   "CLAIM THIS PLACE / Coffee shop / Chile • Santiago • Experiences"
   ========================================================= */

/* The box container */
.gst-claim-hero-meta{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important;
}

/* Make ALL text inside readable (covers any nested tags) */
.gst-claim-hero-meta,
.gst-claim-hero-meta *{
  color: #0f172a !important;
}

/* "CLAIM THIS PLACE" */
.gst-claim-eyebrow{
  color: rgba(15, 23, 42, 0.72) !important;
}

/* Big title (place name) */
.gst-claim-title,
#claimPlaceTitle{
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Sub line: "Chile • Santiago • Experiences" */
#claimPlaceSub{
  color: rgba(15, 23, 42, 0.70) !important;
  font-weight: 600 !important;
}
/* =========================================================
   CLAIM PAGE (OWNER READABILITY MODE) — CSS ONLY
   Paste at the very bottom of style.css
   ========================================================= */

/* Make claim page background bright + readable */
body.gst-claim-page{
  background: radial-gradient(circle at top, #ffffff, #f3f7ff 55%, #eaf2ff 100%) !important;
  color: #0f172a !important;
}

/* Main wrapper text defaults */
body.gst-claim-page .gst-claim-wrap{
  color: #0f172a !important;
}

/* Hero right info box beside photo */
body.gst-claim-page .gst-claim-hero-meta{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
}
body.gst-claim-page .gst-claim-eyebrow{
  color: rgba(15, 23, 42, 0.68) !important;
}
body.gst-claim-page .gst-claim-title{
  color: #0f172a !important;
  font-weight: 900 !important;
}
body.gst-claim-page .gst-claim-sub{
  color: rgba(15, 23, 42, 0.72) !important;
  font-weight: 600 !important;
}

/* Big claim card (the form container) */
body.gst-claim-page .gst-claim-card{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10) !important;
}

/* Card title + description */
body.gst-claim-page .gst-claim-card-title{
  color: #0f172a !important;
}
body.gst-claim-page .gst-claim-card-desc{
  color: rgba(15, 23, 42, 0.74) !important;
}

/* Benefit boxes */
body.gst-claim-page .gst-claim-benefit{
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
}
body.gst-claim-page .gst-claim-benefit-title{
  color: #0f172a !important;
}
body.gst-claim-page .gst-claim-benefit-text{
  color: rgba(15, 23, 42, 0.70) !important;
}

/* Labels */
body.gst-claim-page .gst-claim-label{
  color: rgba(15, 23, 42, 0.86) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Inputs + textarea + select */
body.gst-claim-page .gst-claim-input,
body.gst-claim-page .gst-claim-textarea,
body.gst-claim-page .gst-claim-select{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04) !important;
}

/* Placeholder readability */
body.gst-claim-page .gst-claim-input::placeholder,
body.gst-claim-page .gst-claim-textarea::placeholder{
  color: rgba(15, 23, 42, 0.45) !important;
}

/* Focus ring (clearer) */
body.gst-claim-page .gst-claim-input:focus,
body.gst-claim-page .gst-claim-textarea:focus,
body.gst-claim-page .gst-claim-select:focus{
  border-color: rgba(37, 99, 235, 0.70) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
  outline: none !important;
}

/* Small hint text */
body.gst-claim-page .gst-claim-hint{
  color: rgba(15, 23, 42, 0.60) !important;
}

/* Dividers */
body.gst-claim-page .gst-claim-divider{
  border-top: 1px dashed rgba(15, 23, 42, 0.18) !important;
}

/* “What happens next?” mini section */
body.gst-claim-page .gst-claim-mini{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}
body.gst-claim-page .gst-claim-steps li{
  color: rgba(15, 23, 42, 0.78) !important;
}
body.gst-claim-page .gst-claim-mini-note{
  color: rgba(15, 23, 42, 0.75) !important;
}

/* Keep back button visible */
body.gst-claim-page .gst-claim-back{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
}
/* =========================================================
   REMOVE EDITOR'S PICK FROM TOP OF COUNTRY PAGE ONLY
   (Keep it on Home page)
   ========================================================= */

/* Hide the "Handpicked by our editors" section
   ONLY when a country page is open */
body.country-page-open .editors-pick-section,
body.country-page-open .handpicked-editors,
body.country-page-open .curated-highlights,
body.country-page-open .editors-highlight,
body.country-page-open .editors-picks {
  display: none !important;
}
/* =========================================================
   TOURISM BOARD SPONSOR MODULE (Country page)
   ========================================================= */

.gst-sponsor-card {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.08);
  margin: 14px 0;
}

body.dark .gst-sponsor-card {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.gst-sponsor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

body.dark .gst-sponsor-top {
  border-bottom-color: rgba(148, 163, 184, 0.14);
}

.gst-sponsor-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gst-sponsor-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(241, 245, 249, 0.8);
  flex: 0 0 auto;
}

.gst-sponsor-logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

body.dark .gst-sponsor-logo {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.35);
}

.gst-sponsor-brand-text {
  min-width: 0;
}

.gst-sponsor-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

body.dark .gst-sponsor-label {
  color: #94a3b8;
}

.gst-sponsor-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

body.dark .gst-sponsor-name {
  color: #e5e7eb;
}

.gst-sponsor-disclosure {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.22);
}

body.dark .gst-sponsor-disclosure {
  background: rgba(59, 130, 246, 0.16);
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.22);
}

.gst-sponsor-body {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
  padding: 14px;
}

@media (max-width: 860px) {
  .gst-sponsor-body {
    grid-template-columns: 1fr;
  }
}

.gst-sponsor-headline {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

body.dark .gst-sponsor-headline {
  color: #f1f5f9;
}

.gst-sponsor-subhead {
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  margin-bottom: 10px;
}

body.dark .gst-sponsor-subhead {
  color: #cbd5e1;
}

.gst-sponsor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.gst-sponsor-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(2, 132, 199, 0.10);
  border: 1px solid rgba(2, 132, 199, 0.20);
  color: #075985;
}

body.dark .gst-sponsor-pill {
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.18);
  color: #bae6fd;
}

.gst-sponsor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gst-sponsor-cta[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.gst-sponsor-note {
  font-size: 11px;
  color: #64748b;
}

body.dark .gst-sponsor-note {
  color: #94a3b8;
}

.gst-sponsor-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 86px;
  gap: 8px;
  align-content: start;
}

.gst-sponsor-photo {
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
}

.gst-sponsor-photo:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  height: 110px;
}

.gst-sponsor-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(226, 232, 240, 0.6);
  color: #475569;
  font-size: 12px;
}

body.dark .gst-sponsor-photo {
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
/* =========================================================
   TOURISM BOARD SPONSOR — FULL-WIDTH ROW
   Makes the sponsor card span the entire country grid row
   ========================================================= */

.gst-sponsor-card--tourism {
  grid-column: 1 / -1 !important;
  width: 100%;
}
/* =========================================================
   TOURISM BOARD — Full-width card + premium drawer (LUXURY)
   Style-only upgrade — NO logic changes
   ========================================================= */

/* FULL WIDTH inside the country grid */
#countryPlacesList .gst-tb-card{
  grid-column: 1 / -1;
}

/* Card */
.gst-tb-card{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  border-radius: 28px;
  border: 1px solid rgba(148,163,184,0.18);

  background: linear-gradient(180deg,
    rgba(255,255,255,0.92),
    rgba(255,255,255,0.86)
  );

  box-shadow:
    0 26px 70px rgba(2,6,23,0.10),
    inset 0 1px 0 rgba(255,255,255,0.60);

  padding: 20px 20px 16px;

  transition: transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

/* soft editorial glow */
.gst-tb-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(900px 240px at 18% 0%,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.0) 60%),
    radial-gradient(760px 240px at 88% 8%,
      rgba(59,130,246,0.10),
      rgba(59,130,246,0.0) 62%);
  opacity: 0.9;
}

.gst-tb-card:hover{
  transform: translateY(-2px);
  border-color: rgba(15,23,42,0.16);
  box-shadow:
    0 34px 90px rgba(2,6,23,0.14),
    inset 0 1px 0 rgba(255,255,255,0.65);
}

body.dark .gst-tb-card{
  border-color: rgba(148,163,184,0.22);
  background: linear-gradient(180deg,
    rgba(2,6,23,0.62),
    rgba(2,6,23,0.46)
  );
  box-shadow:
    0 34px 92px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

body.dark .gst-tb-card::before{
  opacity: 0.55;
}

body.dark .gst-tb-card:hover{
  transform: translateY(-2px);
  border-color: rgba(226,232,240,0.22);
  box-shadow:
    0 40px 110px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.09);
}

.gst-tb-top{ margin-bottom: 14px; }

.gst-tb-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: rgba(15,23,42,0.72);
  background: rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.10);

  padding: 7px 11px;
  border-radius: 999px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark .gst-tb-kicker{
  color: rgba(226,232,240,0.86);
  background: rgba(226,232,240,0.10);
  border-color: rgba(226,232,240,0.18);
}

.gst-tb-title{
  margin-top: 10px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 950;
  color: rgba(15,23,42,0.96);
}

body.dark .gst-tb-title{ color: rgba(248,250,252,0.95); }

.gst-tb-sub{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15,23,42,0.68);
  max-width: 900px;
}

body.dark .gst-tb-sub{ color: rgba(226,232,240,0.72); }

/* Tiles grid */
.gst-tb-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 980px){
  .gst-tb-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .gst-tb-grid{ grid-template-columns: 1fr; }
}

/* Tile */
.gst-tb-tile{
  position: relative;
  overflow: hidden;

  border-radius: 20px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.74);

  box-shadow:
    0 12px 34px rgba(2,6,23,0.08),
    inset 0 1px 0 rgba(255,255,255,0.60);

  transition: transform 160ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

body.dark .gst-tb-tile{
  background: rgba(2,6,23,0.35);
  border-color: rgba(148,163,184,0.22);
  box-shadow: 0 14px 38px rgba(0,0,0,0.34);
}

.gst-tb-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(15,23,42,0.16);
  box-shadow:
    0 18px 48px rgba(2,6,23,0.12),
    inset 0 1px 0 rgba(255,255,255,0.65);
}

body.dark .gst-tb-tile:hover{
  border-color: rgba(226,232,240,0.22);
  box-shadow: 0 22px 58px rgba(0,0,0,0.48);
}

/* Image */
.gst-tb-img{
  height: 94px;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* subtle gradient overlay */
.gst-tb-img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(2,6,23,0.62), rgba(2,6,23,0.00) 70%);
  opacity: 0.52;
}

body.dark .gst-tb-img::after{
  opacity: 0.64;
}

.gst-tb-txt{
  padding: 12px 12px 13px;
}

.gst-tb-tile-title{
  font-size: 13.5px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,0.92);
  line-height: 1.2;
}

body.dark .gst-tb-tile-title{ color: rgba(248,250,252,0.92); }

.gst-tb-tile-sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(100,116,139,0.92);
}

body.dark .gst-tb-tile-sub{ color: rgba(226,232,240,0.72); }

/* Bottom row */
.gst-tb-bottom{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.gst-tb-disclosure{
  font-size: 12px;
  color: rgba(100,116,139,0.92);
}

body.dark .gst-tb-disclosure{ color: rgba(226,232,240,0.62); }

/* CTA button */
.gst-tb-cta{
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 999px;

  padding: 10px 14px;
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;

  background: rgba(255,255,255,0.82);
  color: rgba(15,23,42,0.90);

  box-shadow: 0 10px 26px rgba(2,6,23,0.10);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease, border-color 160ms ease;
}

.gst-tb-cta:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.95);
  border-color: rgba(15,23,42,0.18);
  box-shadow: 0 14px 34px rgba(2,6,23,0.14);
}

body.dark .gst-tb-cta{
  background: rgba(2,6,23,0.55);
  border-color: rgba(226,232,240,0.18);
  color: rgba(248,250,252,0.94);
  box-shadow: 0 14px 34px rgba(0,0,0,0.42);
}

body.dark .gst-tb-cta:hover{
  background: rgba(2,6,23,0.72);
  box-shadow: 0 18px 44px rgba(0,0,0,0.54);
}

/* Drawer overlay */
.gst-tb-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity 160ms ease;
}

.gst-tb-overlay.is-open{ opacity: 1; }

.gst-tb-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Drawer */
.gst-tb-drawer{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%) scale(.98);

  width: min(980px, calc(100vw - 26px));
  max-height: min(86vh, 780px);
  overflow: auto;

  border-radius: 28px;
  border: 1px solid rgba(148,163,184,0.22);

  background: rgba(255,255,255,0.94);
  box-shadow: 0 36px 110px rgba(2,6,23,0.35);

  transition: transform 160ms ease;
}

body.dark .gst-tb-drawer{
  background: rgba(2,6,23,0.78);
  border-color: rgba(148,163,184,0.22);
  box-shadow: 0 42px 140px rgba(0,0,0,0.65);
}

.gst-tb-overlay.is-open .gst-tb-drawer{
  transform: translate(-50%, -50%) scale(1);
}

.gst-tb-drawer-head{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 10px;
}

.gst-tb-drawer-kicker{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.60);
}

body.dark .gst-tb-drawer-kicker{ color: rgba(226,232,240,0.72); }

.gst-tb-drawer-title{
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(15,23,42,0.95);
  margin-top: 6px;
}

body.dark .gst-tb-drawer-title{ color: rgba(248,250,252,0.96); }

.gst-tb-drawer-sub{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15,23,42,0.68);
  max-width: 720px;
}

body.dark .gst-tb-drawer-sub{ color: rgba(226,232,240,0.74); }

.gst-tb-close{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.80);
  color: rgba(15,23,42,0.85);

  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 18px;
  cursor: pointer;

  display: grid;
  place-items: center;

  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.gst-tb-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.95);
  border-color: rgba(15,23,42,0.18);
}

body.dark .gst-tb-close{
  background: rgba(2,6,23,0.62);
  border-color: rgba(226,232,240,0.16);
  color: rgba(248,250,252,0.92);
}

body.dark .gst-tb-close:hover{
  background: rgba(2,6,23,0.80);
}

.gst-tb-drawer-hero{
  height: 210px;
  background-size: cover;
  background-position: center;
  margin: 0 18px 12px;

  border-radius: 22px;
  border: 1px solid rgba(148,163,184,0.18);
  overflow: hidden;
}

.gst-tb-drawer-body{
  padding: 6px 18px 18px;
}

.gst-tb-drawer-section + .gst-tb-drawer-section{ margin-top: 14px; }

.gst-tb-drawer-h{
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.60);
}

body.dark .gst-tb-drawer-h{ color: rgba(226,232,240,0.72); }

.gst-tb-drawer-p{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15,23,42,0.74);
}

body.dark .gst-tb-drawer-p{ color: rgba(226,232,240,0.78); }

.gst-tb-drawer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 900px){
  .gst-tb-drawer-grid{ grid-template-columns: 1fr; }
}

.gst-tb-drawer-tile{
  display: flex;
  gap: 10px;

  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.82);
  overflow: hidden;

  box-shadow: 0 10px 26px rgba(2,6,23,0.08);
}

body.dark .gst-tb-drawer-tile{
  background: rgba(255,255,255,0.05);
  border-color: rgba(148,163,184,0.20);
  box-shadow: 0 12px 30px rgba(0,0,0,0.30);
}

.gst-tb-drawer-img{
  width: 130px;
  min-width: 130px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 520px){
  .gst-tb-drawer-img{ width: 110px; min-width: 110px; }
}

.gst-tb-drawer-txt{
  padding: 10px 10px 12px;
}

.gst-tb-drawer-t{
  font-size: 14px;
  font-weight: 950;
  color: rgba(15,23,42,0.92);
}

body.dark .gst-tb-drawer-t{ color: rgba(248,250,252,0.92); }

.gst-tb-drawer-s{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(15,23,42,0.66);
}

body.dark .gst-tb-drawer-s{ color: rgba(226,232,240,0.74); }

.gst-tb-drawer-list{
  margin: 10px 0 0 18px;
  color: rgba(15,23,42,0.74);
  font-size: 13px;
  line-height: 1.55;
}

body.dark .gst-tb-drawer-list{ color: rgba(226,232,240,0.80); }

.gst-tb-drawer-disclosure{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(15,23,42,0.55);
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,0.18);
}

body.dark .gst-tb-drawer-disclosure{
  color: rgba(226,232,240,0.62);
  border-top-color: rgba(148,163,184,0.20);
}

/* =========================================================
   FEATURED STAYS — Full-width card + premium drawer
   ========================================================= */

/* full width inside country grid */
#countryPlacesList .gst-hotel-card{
  grid-column: 1 / -1;
}

.gst-hotel-card{
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
  overflow: hidden;
  padding: 18px 18px 14px;
  cursor: pointer;
}

/* ✅ Admin-only empty placeholder look */
.gst-hotel-card.gst-hotel-empty{
  border-style: dashed;
  opacity: 0.92;
}

body.dark .gst-hotel-card{
  background: rgba(15,23,42,.55);
  border-color: rgba(148,163,184,.22);
}

.gst-hotel-kicker{
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  background: rgba(15,23,42,.06);
  padding: 6px 10px;
  border-radius: 999px;
}

body.dark .gst-hotel-kicker{
  color: rgba(226,232,240,.78);
  background: rgba(226,232,240,.10);
}

.gst-hotel-title{
  margin-top: 10px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: rgba(15,23,42,.95);
}

body.dark .gst-hotel-title{ color: rgba(248,250,252,.95); }

.gst-hotel-sub{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(15,23,42,.70);
  max-width: 900px;
}

body.dark .gst-hotel-sub{ color: rgba(226,232,240,.72); }

.gst-hotel-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 900px){
  .gst-hotel-grid{ grid-template-columns: 1fr; }
}

.gst-hotel-tile{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
}

body.dark .gst-hotel-tile{
  background: rgba(2,6,23,.30);
  border-color: rgba(148,163,184,.22);
}

.gst-hotel-img{
  height: 110px;
  background-size: cover;
  background-position: center;
}

.gst-hotel-txt{ padding: 10px 10px 12px; }

.gst-hotel-name{
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}

body.dark .gst-hotel-name{ color: rgba(248,250,252,.92); }

.gst-hotel-area{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
}

body.dark .gst-hotel-area{ color: rgba(226,232,240,.70); }

.gst-hotel-why{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(15,23,42,.66);
}

body.dark .gst-hotel-why{ color: rgba(226,232,240,.72); }

.gst-hotel-perks{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.gst-hotel-perk{
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  color: rgba(15,23,42,.86);
}

body.dark .gst-hotel-perk{
  background: rgba(34,197,94,.16);
  color: rgba(248,250,252,.92);
}

.gst-hotel-bottom{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.gst-hotel-disclosure{
  font-size: 12px;
  color: rgba(15,23,42,.55);
}

body.dark .gst-hotel-disclosure{ color: rgba(226,232,240,.60); }

.gst-hotel-cta{
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  background: rgba(34,197,94,.15);
  color: rgba(15,23,42,.90);
}

body.dark .gst-hotel-cta{
  background: rgba(34,197,94,.18);
  color: rgba(248,250,252,.95);
}

/* Drawer */
.gst-hotel-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity 160ms ease;
}

.gst-hotel-overlay.is-open{ opacity: 1; }

.gst-hotel-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gst-hotel-drawer{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%) scale(.98);
  width: min(980px, calc(100vw - 26px));
  max-height: min(86vh, 780px);
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 90px rgba(2,6,23,.35);
  transition: transform 160ms ease;
}

body.dark .gst-hotel-drawer{
  background: rgba(2,6,23,.88);
  border-color: rgba(148,163,184,.22);
}

.gst-hotel-overlay.is-open .gst-hotel-drawer{
  transform: translate(-50%, -50%) scale(1);
}

.gst-hotel-head{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 10px;
}

.gst-hotel-hk{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}

body.dark .gst-hotel-hk{ color: rgba(226,232,240,.70); }

.gst-hotel-ht{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.95);
  margin-top: 6px;
}

body.dark .gst-hotel-ht{ color: rgba(248,250,252,.96); }

.gst-hotel-hs{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,23,42,.68);
  max-width: 720px;
}

body.dark .gst-hotel-hs{ color: rgba(226,232,240,.72); }

.gst-hotel-close{
  border: 0;
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.85);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 18px;
  cursor: pointer;
}

body.dark .gst-hotel-close{
  background: rgba(226,232,240,.10);
  color: rgba(248,250,252,.92);
}

.gst-hotel-hero{
  height: 190px;
  background-size: cover;
  background-position: center;
  margin: 0 18px 12px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
}

.gst-hotel-body{ padding: 6px 18px 18px; }

.gst-hotel-sh{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.60);
}

body.dark .gst-hotel-sh{ color: rgba(226,232,240,.70); }

.gst-hotel-dgrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

.gst-hotel-dtile{
  display: flex;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.78);
  overflow: hidden;
}

body.dark .gst-hotel-dtile{
  background: rgba(255,255,255,.04);
  border-color: rgba(148,163,184,.20);
}

.gst-hotel-dimg{
  width: 150px;
  min-width: 150px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 520px){
  .gst-hotel-dimg{ width: 120px; min-width: 120px; }
}

.gst-hotel-dtxt{ padding: 10px 10px 12px; }

.gst-hotel-dname{
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.dark .gst-hotel-dname{ color: rgba(248,250,252,.92); }

.gst-hotel-site{
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  opacity: .85;
}

.gst-hotel-darea{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
}

body.dark .gst-hotel-darea{ color: rgba(226,232,240,.70); }

.gst-hotel-dwhy{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(15,23,42,.66);
}

body.dark .gst-hotel-dwhy{ color: rgba(226,232,240,.72); }

.gst-hotel-disclose{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(15,23,42,.55);
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.18);
}

body.dark .gst-hotel-disclose{
  color: rgba(226,232,240,.60);
  border-top-color: rgba(148,163,184,.20);
}

/* =========================================================
   Explorer Stories — Premium Quick Facts
   ========================================================= */
.traveler-notes-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tn-fact-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.86);
}

body.dark .tn-fact-chip{
  background: rgba(255,255,255,0.05);
  border-color: rgba(148,163,184,0.22);
  color: rgba(226,232,240,0.92);
}

.tn-fact-label{
  font-weight: 800;
  opacity: 0.85;
}

.traveler-notes-shared{
  margin-top: 14px !important;
  padding-left: 14px !important;

  /* visual anchor — slightly thicker + warm premium tint */
  border-left: 3px solid rgba(217,119,6,0.25); /* warm amber */

  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.012em !important;

  color: rgba(51,65,85,0.95) !important;

  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

body.dark .traveler-notes-shared{
  color: rgba(226,232,240,0.9) !important;
  border-left-color: rgba(245,158,11,0.35); /* warm amber for dark */
}

/* Dot separators stay subtle */
.traveler-notes-shared .tn-meta-sep{
  opacity: 0.45 !important;
}

/* Hierarchy */
.traveler-notes-shared .tn-meta-shared{
  font-weight: 650 !important;
  opacity: 1 !important;
}

.traveler-notes-shared .tn-meta-label{
  opacity: 0.85 !important;
}

.traveler-notes-shared .tn-meta-value{
  opacity: 1 !important;
}

/* Inline meta items */
.traveler-notes-shared .tn-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.traveler-notes-shared .tn-meta-ico{
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
  transform: translateY(0.5px);
}

.traveler-notes-shared .tn-meta-ico svg{
  width: 14px;
  height: 14px;
  display: block;
}

.traveler-notes-shared .tn-meta-label{
  font-weight: 750;
  opacity: 0.85;
}

.traveler-notes-shared .tn-meta-value{
  font-weight: 750;
  opacity: 0.95;
}

.traveler-notes-shared .tn-meta-sep{
  opacity: 0.55;
}

.traveler-notes-shared .tn-meta-shared{
  opacity: 0.95;
}
/* ================================
   Tourism Board editorial collab — TEST admin editor
   (local-only edits; deploy later)
   ✅ FIX: keep module full width like before
   ================================ */

/* ✅ IMPORTANT: wrapper spans full width in your country grid */
#countryPlacesList .gst-tb-card-wrap{
  grid-column: 1 / -1;
}

/* Ensure cluster images crop consistently (premium) */
.gst-tb-cluster-img img,
.gst-tb-drawer-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Small admin bar inside the module (only visible in admin mode) */
.gst-tb-adminbar{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Empty/placeholder state (admin only) */
.gst-tb-card.gst-tb-empty{
  border-style: dashed;
  opacity: 0.92;
}

.gst-tb-card.gst-tb-empty .gst-tb-title{
  margin-top: 4px;
}

.gst-tb-card.gst-tb-empty .gst-tb-subtitle{
  max-width: 720px;
}

.gst-tb-adminbar-btn{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.60);
  color: rgba(15,23,42,0.82);
  font-weight: 900;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}

.gst-tb-adminbar-btn:hover{
  background: rgba(255,255,255,0.82);
}

.gst-tb-adminbar-btn.ghost{
  background: rgba(15,23,42,0.04);
}

.gst-tb-adminbar-note{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.55);
}

/* Admin editor modal */
.gst-tb-admin-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.gst-tb-admin-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
}

.gst-tb-admin-card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(820px, calc(100vw - 28px));
  max-height: min(86vh, 920px);
  overflow: auto;

  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.25);
}

.gst-tb-admin-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
}

.gst-tb-admin-title{
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,23,42,0.82);
}

.gst-tb-admin-close{
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(15,23,42,0.58);
  font-size: 16px;
  padding: 8px 10px;
  border-radius: 12px;
}

.gst-tb-admin-close:hover{
  background: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.80);
}

.gst-tb-admin-body{
  padding: 14px 16px 18px;
}

.gst-tb-admin-note{
  font-size: 12px;
  color: rgba(15,23,42,0.62);
  line-height: 1.35;
  background: rgba(15,23,42,0.03);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.gst-tb-admin-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.72);
  margin-bottom: 12px;
}

.gst-tb-admin-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gst-tb-admin-field{
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.gst-tb-admin-label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.62);
}

.gst-tb-admin-input,
.gst-tb-admin-textarea{
  width: 100%;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.72);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(15,23,42,0.84);
  outline: none;
}

.gst-tb-admin-textarea{
  min-height: 80px;
  resize: vertical;
}

.gst-tb-admin-small{
  font-size: 12px;
  color: rgba(15,23,42,0.58);
}

.gst-tb-admin-divider{
  height: 1px;
  background: rgba(15,23,42,0.10);
  margin: 14px 0;
}

.gst-tb-admin-section-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gst-tb-admin-section-title{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.78);
}

.gst-tb-admin-btn2{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.70);
  color: rgba(15,23,42,0.78);
  font-weight: 900;
  border-radius: 14px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}

.gst-tb-admin-actions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.gst-tb-admin-primary{
  border: 1px solid rgba(59,130,246,0.22);
  background: rgba(59,130,246,0.14);
  color: rgba(15,23,42,0.86);
  font-weight: 900;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
}

.gst-tb-admin-secondary{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.70);
  color: rgba(15,23,42,0.78);
  font-weight: 900;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
}

.gst-tb-admin-status{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.62);
}

/* Cluster editor card */
.gst-tb-admin-cluster{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}

.gst-tb-admin-cluster-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.gst-tb-admin-cluster-title{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.70);
}

.gst-tb-admin-cluster-actions{
  display: inline-flex;
  gap: 6px;
}

.gst-tb-admin-mini{
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.70);
  color: rgba(15,23,42,0.76);
  font-weight: 900;
  border-radius: 12px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}

.gst-tb-admin-mini.danger{
  border-color: rgba(239,68,68,0.20);
  background: rgba(239,68,68,0.10);
}

/* Image row + auto-crop previews */
.gst-tb-admin-image-row{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: start;
}

.gst-tb-admin-image-preview{
  width: 140px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.70);
}

.gst-tb-admin-image-preview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gst-tb-admin-image-actions{
  display: grid;
  gap: 8px;
}

.gst-tb-admin-file{
  width: 100%;
  font-size: 12px;
}

@media (max-width: 520px){
  .gst-tb-admin-grid2{
    grid-template-columns: 1fr;
  }
  .gst-tb-admin-image-row{
    grid-template-columns: 1fr;
  }
  .gst-tb-admin-image-preview{
    width: 100%;
    height: 140px;
  }
}

/* ================================
   Verified owner — PREMIUM INLINE CHIP + POPOVER
   (quiet chip + floating popover)
   ================================ */

/* Wrapper sits under the title/subtitle area */
.gst-official-chip-wrap{
  margin: 10px 0 14px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

/* Small “trust chip” (quiet, premium) */
.gst-official-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(15, 23, 42, 0.18);

  color: rgba(15, 23, 42, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform 120ms ease, background 140ms ease, border-color 140ms ease;
}

.gst-official-chip:hover{
  background: rgba(255,255,255,0.82);
  border-color: rgba(15, 23, 42, 0.26);
}

.gst-official-chip:active{
  transform: translateY(1px);
}

.gst-official-chip:focus{
  outline: none;
}

.gst-official-chip:focus-visible{
  outline: 2px solid rgba(59,130,246,0.45);
  outline-offset: 2px;
}

.gst-official-chip-icon{
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
}

.gst-official-chip-caret{
  font-size: 12px;
  line-height: 1;
  opacity: 0.65;
  transform: translateY(-0.5px);
}

/* Popover container */
.gst-official-popover{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  width: min(420px, calc(100vw - 36px));
  max-width: 420px;

  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 16px;

  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  z-index: 50;
}

body.dark .gst-official-popover{
  background: rgba(2,6,23,0.92);
  border-color: rgba(148,163,184,0.18);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}

.gst-official-popover-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 8px;
}

.gst-official-popover-title{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.84);
  letter-spacing: 0.1px;
}

.gst-official-popover-close{
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(15, 23, 42, 0.55);
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 10px;
}

.gst-official-popover-close:hover{
  background: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.85);
}

body.dark .gst-official-popover-title{
  color: rgba(226, 232, 240, 0.92);
}

body.dark .gst-official-popover-close{
  color: rgba(226,232,240,0.65);
}

body.dark .gst-official-popover-close:hover{
  background: rgba(255,255,255,0.08);
  color: rgba(226,232,240,0.95);
}

.gst-official-popover-body{
  padding: 0 12px 12px;
}

.gst-official-rows{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.gst-official-row{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.03);
}

body.dark .gst-official-row{
  border-color: rgba(148,163,184,0.16);
  background: rgba(255,255,255,0.04);
}

.gst-official-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.64);
}

body.dark .gst-official-label{
  color: rgba(226,232,240,0.65);
}

.gst-official-value{
  font-size: 13px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.90);
  overflow-wrap: anywhere;
}

body.dark .gst-official-value{
  color: rgba(226,232,240,0.92);
}

.gst-official-link{
  color: rgba(37, 99, 235, 0.95);
  text-decoration: none;
  font-weight: 800;
}

.gst-official-link:hover{
  text-decoration: underline;
}

body.dark .gst-official-link{
  color: rgba(147, 197, 253, 0.95);
}

/* Featured by owner */
.gst-official-section-title{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.82);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.dark .gst-official-section-title{
  color: rgba(226,232,240,0.75);
}

.gst-official-section-kicker{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.62);
}

body.dark .gst-official-section-kicker{
  color: rgba(226,232,240,0.62);
}

.gst-official-photos{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.gst-official-photo-btn{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
}

.gst-official-photo{
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
}

body.dark .gst-official-photo{
  border-color: rgba(148,163,184,0.18);
}

/* Subtle footer link (not a loud row) */
.gst-official-footer{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,0.08);
  display: flex;
  justify-content: flex-end;
}

body.dark .gst-official-footer{
  border-top-color: rgba(148,163,184,0.16);
}

.gst-official-footlink{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.62);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
}

.gst-official-footlink:hover{
  color: rgba(15, 23, 42, 0.86);
  opacity: 1;
}

body.dark .gst-official-footlink{
  color: rgba(226,232,240,0.68);
}

body.dark .gst-official-footlink:hover{
  color: rgba(226,232,240,0.92);
}

/* Calm “early access” note */
.gst-official-upgrade{
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.08);
}

body.dark .gst-official-upgrade{
  background: rgba(255,255,255,0.05);
  border-color: rgba(148,163,184,0.16);
}

.gst-official-upgrade-badge{
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.18);
  color: rgba(15, 23, 42, 0.72);
}

body.dark .gst-official-upgrade-badge{
  color: rgba(226,232,240,0.85);
}

.gst-official-upgrade-title{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.84);
}

body.dark .gst-official-upgrade-title{
  color: rgba(226,232,240,0.90);
}

.gst-official-upgrade-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.35;
}

body.dark .gst-official-upgrade-sub{
  color: rgba(226,232,240,0.68);
}

/* Small screens */
@media (max-width: 420px){
  .gst-official-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .gst-official-photos{
    grid-template-columns: repeat(2, 1fr);
  }
  .gst-official-photo{
    height: 82px;
  }
}

/* =========================================================
   Explorer Stories — Editorial Metadata (Option A)
   SAFE: CSS ONLY — no logic or HTML changes
   ========================================================= */

.traveler-notes-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tn-fact-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.86);
}

body.dark .tn-fact-chip{
  background: rgba(255,255,255,0.05);
  border-color: rgba(148,163,184,0.22);
  color: rgba(226,232,240,0.92);
}

.tn-fact-label{
  font-weight: 800;
  opacity: 0.85;
}

/* --- Editorial metadata row --- */
.traveler-notes-shared{
  margin-top: 10px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;

  color: rgba(100,116,139,0.92);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

body.dark .traveler-notes-shared{
  color: rgba(226,232,240,0.72);
}

/* Treat separators (·) as quiet punctuation */
.traveler-notes-shared .tn-meta-sep,
.traveler-notes-shared .dot{
  opacity: 0.45;
}

/* Label/value contrast */
.traveler-notes-shared .tn-meta-label{
  font-weight: 600;
  opacity: 0.85;
}

.traveler-notes-shared .tn-meta-value{
  font-weight: 600;
  opacity: 1;
}

.traveler-notes-shared .tn-meta-shared{
  opacity: 0.95;
}

/* =====================================================
   PREMIUM EMAIL NOTIFICATION (CONTRIBUTION FORM)
   ===================================================== */

.notify-optin,
#notifyEmailWrap {
  margin-top: 12px;
}

/* Checkbox row */
#notifyEmailOptIn {
  transform: scale(1.05);
  accent-color: #0ea5e9;
  cursor: pointer;
}

/* Label text next to checkbox */
label[for="notifyEmailOptIn"],
.notify-optin label {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.85);
  cursor: pointer;
}

/* Email input wrapper */
#notifyEmailWrap {
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.95),
    rgba(241, 245, 249, 0.95)
  );
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* Email input field */
#notifyEmailInput {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 14px;
  outline: none;
  background: #ffffff;
}

#notifyEmailInput:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.18);
}

/* Help text */
#notifyEmailWrap p,
.notify-help {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(100, 116, 139, 0.95);
}

/* =====================
   DARK MODE SUPPORT
   ===================== */

body.dark label[for="notifyEmailOptIn"],
body.dark .notify-optin label {
  color: rgba(226, 232, 240, 0.9);
}

body.dark #notifyEmailWrap {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.6),
    rgba(2, 6, 23, 0.6)
  );
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

body.dark #notifyEmailInput {
  background: rgba(2, 6, 23, 0.45);
  border-color: rgba(148, 163, 184, 0.28);
  color: rgba(248, 250, 252, 0.95);
}

body.dark #notifyEmailInput::placeholder {
  color: rgba(148, 163, 184, 0.75);
}
/* =========================================
   ADMIN EMAIL NOTIFICATION MODAL (PREMIUM)
========================================= */

.admin-modal.hidden {
  display: none;
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: inherit;
}

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(6px);
}

.admin-modal-card {
  position: relative;
  max-width: 420px;
  margin: 12vh auto;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.35);
  animation: adminModalIn 0.25s ease-out;
}

@keyframes adminModalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.admin-modal-card h3 {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.admin-modal-sub {
  margin: 0 0 16px 0;
  font-size: 13.5px;
  color: rgba(71, 85, 105, 0.95);
}

.admin-modal-field {
  margin-bottom: 14px;
}

.admin-modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: rgba(15, 23, 42, 0.85);
}

.admin-modal-value {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(241, 245, 249, 0.9);
  font-size: 13.5px;
  word-break: break-all;
}

.admin-modal-link-row {
  display: flex;
  gap: 8px;
}

.admin-modal-link-row input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 13px;
  background: #fff;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* =====================
   DARK MODE SUPPORT
===================== */

body.dark .admin-modal-card {
  background: rgba(2, 6, 23, 0.95);
}

body.dark .admin-modal-card h3 {
  color: rgba(248, 250, 252, 0.95);
}

body.dark .admin-modal-sub {
  color: rgba(203, 213, 225, 0.85);
}

body.dark .admin-modal-field label {
  color: rgba(226, 232, 240, 0.9);
}

body.dark .admin-modal-value {
  background: rgba(15, 23, 42, 0.7);
  color: rgba(248, 250, 252, 0.95);
}

body.dark .admin-modal-link-row input {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(148, 163, 184, 0.25);
  color: rgba(248, 250, 252, 0.95);
}
/* ===========================================================
   PREMIUM ACTIVE INDICATOR (country category icons)
   - Adds a subtle underline + tiny dot when a category is active
   - CSS-only (no logic changes)
   =========================================================== */

/* Ensure the card can host a positioned indicator */
.country-category-card {
  position: relative;
}

/* Subtle underline (hidden by default) */
.country-category-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Show underline on active */
.country-category-card.active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Tiny dot beside label (premium micro-detail) */
.country-category-card .country-category-label::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Dot appears only for active cards */
.country-category-card.active .country-category-label::after {
  opacity: 1;
  transform: scale(1);
}

/* Optional: slightly “lift” the active icon */
.country-category-card.active .country-category-icon-wrap {
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 14px 28px rgba(2, 6, 23, 0.14);
}

body.dark .country-category-card.active .country-category-icon-wrap {
  border-color: rgba(148, 163, 184, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 32px rgba(0, 0, 0, 0.35);
}

/* ===========================================================
   AFFILIATES MODULE (Premium editorial, at bottom of stories)
   =========================================================== */

.gst-affiliates-module {
  grid-column: 1 / -1; /* IMPORTANT: span both columns in the country grid */
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.9);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  padding: 14px 14px;
}

body.dark .gst-affiliates-module {
  background: rgba(15, 23, 42, 0.70);
  border-color: rgba(148, 163, 184, 0.20);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.gst-affiliates-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gst-affiliates-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 700;
}

body.dark .gst-affiliates-kicker {
  color: rgba(226, 232, 240, 0.65);
}

.gst-affiliates-title {
  font-size: 14px;
  font-weight: 850;
  color: rgba(15, 23, 42, 0.92);
  margin-top: 2px;
}

body.dark .gst-affiliates-title {
  color: rgba(248, 250, 252, 0.92);
}

.gst-affiliates-admin-btn {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

body.dark .gst-affiliates-admin-btn {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(248, 250, 252, 0.92);
}

.gst-affiliates-group {
  border-top: 1px dashed rgba(15, 23, 42, 0.14);
  padding-top: 10px;
  margin-top: 10px;
}

body.dark .gst-affiliates-group {
  border-top-color: rgba(148, 163, 184, 0.22);
}

.gst-affiliates-group-title {
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.78);
  margin: 0 0 8px 0;
}

body.dark .gst-affiliates-group-title {
  color: rgba(248, 250, 252, 0.80);
}

.gst-affiliates-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  .gst-affiliates-links {
    grid-template-columns: 1fr;
  }
}

.gst-affiliates-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;

  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.75);
  color: rgba(15, 23, 42, 0.90);
}

body.dark .gst-affiliates-link {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.20);
  color: rgba(248, 250, 252, 0.92);
}

.gst-affiliates-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

.gst-affiliates-link-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
}

.gst-affiliates-emoji {
  font-size: 14px;
  line-height: 1;
}

.gst-affiliates-link-sub {
  font-size: 11px;
  color: rgba(15, 23, 42, 0.55);
}

body.dark .gst-affiliates-link-sub {
  color: rgba(226, 232, 240, 0.70);
}

.gst-affiliates-empty {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.60);
}

body.dark .gst-affiliates-empty {
  color: rgba(226, 232, 240, 0.70);
}
.gst-affiliates-admin-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(148,163,184,0.30);
  background: rgba(15,23,42,0.06);
  margin-right:8px;
  white-space:nowrap;
}
/* =========================================================
   WEEKLY LOVE — Final rhythm override (keeps premium sizing + spacing)
   SAFE: CSS ONLY — no logic changes
   ========================================================= */

#weeklyLoveSection {
  opacity: 0.94;
}

#weeklyLoveSection .weekly-love-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

#weeklyLoveSection .weekly-love-subtitle {
  font-size: 12.5px;
  opacity: 0.9;
}

#weeklyLoveSection .weekly-love-grid {
  margin-top: 0;
}

#weeklyLoveSection .weekly-love-empty {
  opacity: 0.9;
}
/* =========================================================
   PREMIUM POLISH — Editors’ Pick feels like a gallery
   + Country cards: reduce visual noise (more luxury, less “decor”)
   Safe CSS overrides only (no logic changes)
   ========================================================= */

/* -------------------------
   1) EDITOR'S PICKS = calmer “gallery”
   ------------------------- */

/* Your HTML uses .editors-kicker (not .editors-picks-kicker) */
#editorsPicksSection .editors-kicker{
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: rgba(15, 23, 42, 0.78);
  margin-bottom: 8px;
}

body.dark #editorsPicksSection .editors-kicker{
  background: rgba(226, 232, 240, 0.10);
  border-color: rgba(226, 232, 240, 0.16);
  color: rgba(226, 232, 240, 0.86);
}

/* Make the Editors Pick container feel quieter + more “museum label” */
#editorsPicksSection .weekly-love-inner{
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 16px 40px rgba(2,6,23,0.05);
}

body.dark #editorsPicksSection .weekly-love-inner{
  background: rgba(2,6,23,0.45);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 44px rgba(0,0,0,0.28);
}

/* Give tiles a bit more breathing room */
#editorsPicksSection .weekly-love-grid{
  gap: 12px;
}

/* Tone down title/subtitle slightly (premium restraint) */
#editorsPicksSection .weekly-love-title{
  font-size: 16px;
  letter-spacing: 0.2px;
}

#editorsPicksSection .weekly-love-subtitle{
  opacity: 0.85;
}

/* -------------------------
   2) COUNTRY CARDS = less visual noise (more premium)
   ------------------------- */

/* Make borders less “gold outline”, more modern + subtle */
.country-card{
  border: 1px solid rgba(148,163,184,0.22) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12) !important;
}

body.dark .country-card{
  border-color: rgba(148,163,184,0.18) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.28) !important;
}

/* Reduce decorative perforation + stamp so it feels luxury, not “theme park” */
.country-card::before{
  opacity: 0.22 !important;
  border-color: rgba(148,163,184,0.28) !important;
}

.country-card::after{
  opacity: 0.18 !important;
  border-color: rgba(148,163,184,0.22) !important;
}

/* Hover: calmer (premium) */
.country-card:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
}

body.dark .country-card:hover{
  box-shadow: 0 18px 40px rgba(0,0,0,0.32) !important;
}

/* Cover hover parallax: premium spring + subtle lift */
.country-cover{
  transform: translateY(0px) scale(1.015) !important;
  filter: saturate(1.01) contrast(1.01) !important;

  /* Apple-ish spring easing */
  transition:
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.country-card:hover .country-cover{
  /* Parallax feel: lift image upward while slightly zooming */
  transform: translateY(-8px) scale(1.06) !important;
  filter: saturate(1.06) contrast(1.03) !important;
}
/* =========================================================
   GOSEETHIS — PREMIUM COUNTRY CARD OVERRIDES (SAFE)
   (Adds premium look without deleting your existing styles)
========================================================= */

/* Bigger cinematic photo, but still same size for all cards */
.country-cover-wrapper{
  aspect-ratio: auto !important;
  height: 170px !important;

  /* needed for premium overlay layers */
  position: relative !important;
  overflow: hidden !important;
}

/* Premium “sheen” highlight + cinematic vignette (SAFE: only visual) */
.country-cover-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;

  /* 1) soft vignette + 2) bottom fade + 3) sheen sweep layer */
  background:
    radial-gradient(120% 90% at 20% 90%, rgba(2, 6, 23, 0.40), rgba(2, 6, 23, 0.0) 55%),
    linear-gradient(to top, rgba(2, 6, 23, 0.40), rgba(2, 6, 23, 0.0) 62%),
    linear-gradient(120deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.18) 28%,
      rgba(255,255,255,0.00) 56%);

  /* keep vignette/fade static, move only sheen */
  background-size: auto, auto, 220% 220%;
  background-position: center, center, -140% -60%;
  opacity: 1;

  transition:
    background-position 700ms cubic-bezier(.16,1,.3,1),
    opacity 260ms ease;
}

/* Sheen sweep on hover */
.country-card:hover .country-cover-wrapper::after{
  background-position: center, center, 140% 60%;
  opacity: 1;
}

/* Clean premium card shell */
.country-card{
  border-radius: 22px !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 18px 55px rgba(2,6,23,0.10) !important;
  overflow: hidden !important;
}

/* Dark mode card shell */
body.dark .country-card{
  border-color: rgba(148,163,184,0.16) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,0.35) !important;
}

/* Remove the postcard perforation + stamp corner circle (premium clean) */
.country-card::before,
.country-card::after{
  display: none !important;
}

/* Premium: glass body overlaps the photo slightly */
.country-card-body{
  margin-top: -18px !important;
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;

  background: rgba(255,255,255,0.86) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  border-top: 1px solid rgba(255,255,255,0.65) !important;
}

/* Dark mode glass body */
body.dark .country-card-body{
  background: rgba(2,6,23,0.62) !important;
  border-top-color: rgba(255,255,255,0.10) !important;
}

/* Stronger premium hover lift */
.country-card:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 28px 80px rgba(2,6,23,0.14) !important;
}

/* Gradient helper we inserted in app.js (extra cinematic depth) */
.country-cover-with-thumbs{
  position: relative;
}

.country-cover-gradient{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 170px;          /* must match .country-cover-wrapper height */
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(2,6,23,0.06) 0%,
    rgba(2,6,23,0.08) 40%,
    rgba(2,6,23,0.45) 100%
  );
}

/* Make sure your stamp stays above the gradient */
.country-stamp{
  z-index: 2 !important;
}

/* Make thumbnails stay above gradient too */
.country-cover-with-thumbs .country-thumb-row{
  z-index: 2 !important;
}

/* Small premium “tap to explore” hint */
.country-card-hint{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(71,85,105,0.65);
}

.country-card-hint-arrow{
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
  opacity: 0.7;
}

body.dark .country-card-hint{
  color: rgba(148,163,184,0.70);
}

/* Mobile: slightly taller photo */
@media (max-width: 520px){
  .country-cover-wrapper{
    height: 190px !important;
  }
  .country-cover-gradient{
    height: 190px !important;
  }
}
/* =========================================================
   GOSEETHIS — CINEMATIC COUNTRY CARD (MATCHING MOCKUP)
   Safe: overrides only, does not remove your logic
========================================================= */

/* Make the cover photo tall + consistent (same size for all cards) */
.country-cover-wrapper{
  aspect-ratio: auto !important;
  height: 240px !important; /* TALLER = closer to mockup */
  overflow: hidden !important;
  position: relative !important;
}

/* Clean premium card shape */
.country-card{
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 20px 60px rgba(2,6,23,0.12) !important;
}

/* Remove postcard perforation/corner circle if your old CSS has them */
.country-card::before,
.country-card::after{
  display: none !important;
}

/* Photo feel */
.country-cover{
  transform: scale(1.04) !important;
  filter: saturate(1.06) contrast(1.03) !important;
}
.country-card:hover .country-cover{
  transform: scale(1.09) !important;
  filter: saturate(1.12) contrast(1.06) !important;
}

/* Hide the old body area so it doesn't add noise */
.country-card-body-hidden{
  display: none !important;
}

/* Overlay gradient like the mockup (for readable text on photo) */
.country-cover-with-thumbs{
  position: relative !important;
}

.country-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 90%, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.0) 55%),
    linear-gradient(to top, rgba(2, 6, 23, 0.62), rgba(2, 6, 23, 0.0) 62%);
}

/* Keep your stamp pill visible above overlay */
.country-stamp{
  z-index: 3 !important;

  /* premium layered lift */
  transform: translate3d(0,0,0);
  transition:
    transform 420ms cubic-bezier(.16,1,.3,1),
    box-shadow 420ms cubic-bezier(.16,1,.3,1);
}

/* subtle layered lift on hover */
.country-card:hover .country-stamp{
  transform: translate3d(0,-2px,0);
  box-shadow:
    0 14px 34px rgba(2, 6, 23, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Top-right share button container */
.country-hero-top-right{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

/* Make share feel like the mockup (pill-ish) */
.country-hero-top-right .map-btn{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,0.55) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Big title bottom-left like the mockup */
.country-hero-text{
  position: absolute;
  left: 18px;
  bottom: 62px; /* leaves room for the actions row */
  z-index: 2;
  pointer-events: none; /* so card click still works */
}

.country-hero-title{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 18px 45px rgba(0,0,0,0.45);
  line-height: 1.02;
}

.country-hero-sub{
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 14px 35px rgba(0,0,0,0.40);
}

/* Bottom actions row on the photo (Visited + Been here) */
.country-hero-actions{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 12px;

  /* ensure buttons still clickable */
  pointer-events: auto;
}

/* Style visited + been here as “text-on-image” like the mockup */
.country-hero-actions .country-status-chip,
.country-hero-actions .add-place-link{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;

  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 14px 35px rgba(0,0,0,0.45) !important;

  font-weight: 800 !important;
  font-size: 16px !important;
}

/* Keep your active visited look without adding a pill */
.country-hero-actions .country-status-chip.active{
  color: rgba(255,255,255,0.98) !important;
}

/* Thumb row must stay above overlay if you use it */
.country-cover-with-thumbs .country-thumb-row{
  z-index: 3 !important;
}

/* Responsive */
@media (max-width: 900px){
  .country-cover-wrapper{ height: 220px !important; }
  .country-hero-title{ font-size: 40px; }
}

@media (max-width: 520px){
  .country-cover-wrapper{ height: 260px !important; }
  .country-hero-title{ font-size: 40px; }
  .country-hero-sub{ font-size: 15px; }
}
/* =========================================================
   GOSEETHIS — PREMIUM COUNTRY CARD (VARIANT A)
   Safe: styling only, logic unchanged
========================================================= */

/* Make the photo taller + consistent (same size for all cards) */
.country-cover-wrapper{
  aspect-ratio: auto !important;
  height: 280px !important; /* taller = less cramped */
  overflow: hidden !important;
  position: relative !important;
}

/* Premium card shape */
.country-card{
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 20px 60px rgba(2,6,23,0.12) !important;
}

/* Remove postcard perforation/corner circle if present */
.country-card::before,
.country-card::after{
  display: none !important;
}

/* Photo feel */
.country-cover{
  transform: scale(1.05) !important;
  filter: saturate(1.06) contrast(1.03) !important;
  transition: transform 260ms ease, filter 260ms ease !important;
}

.country-card:hover .country-cover{
  transform: scale(1.10) !important;
  filter: saturate(1.12) contrast(1.06) !important;
}

/* Overlay gradient for readability */
.country-cover-with-thumbs{
  position: relative !important;
}

.country-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 90%, rgba(2,6,23,0.45), rgba(2,6,23,0.0) 55%),
    linear-gradient(to top, rgba(2,6,23,0.62), rgba(2,6,23,0.0) 62%);
}

/* Make stamp stay above overlay */
.country-stamp{
  z-index: 3 !important;
}

/* Share: top-right, hidden until hover (premium) */
.country-hero-top-right{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  gap: 8px;

  opacity: 0;
  transform: translate3d(0,-8px,0) scale(0.96);
  transition:
    opacity 220ms ease,
    transform 520ms cubic-bezier(.16,1,.3,1);

  will-change: transform, opacity;
}

/* layered reveal */
.country-card:hover .country-hero-top-right{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

/* Share button style (glass) + micro-lift combined (NO duplicates) */
.country-hero-top-right .map-btn{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  background: rgba(15,23,42,0.55) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.92) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform: translate3d(0,0,0);
  transition:
    transform 520ms cubic-bezier(.16,1,.3,1),
    background 160ms ease,
    border-color 160ms ease;

  will-change: transform;
}

.country-card:hover .country-hero-top-right .map-btn{
  transform: translate3d(0,-1px,0);
}

/* Bottom glass bar */
.country-hero-bar{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 4;

  padding: 6px 8px;
  border-radius: 12px;

  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 20px rgba(0,0,0,0.16);

  /* hidden by default (desktop) */
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform, opacity;
}

/* Show glass bar only on hover (desktop) */
.country-card:hover .country-hero-bar{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Always visible on touch devices */
@media (hover: none){
  .country-hero-top-right{
    opacity: 1;
    transform: none;
  }
  .country-hero-bar{
    opacity: 1;
    transform: none;
  }
}

/* Bar top row: places left, visited right */
.country-hero-bar-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

/* Places pill inside bar — quieter, refined */
.country-hero-bar .country-card-meta{
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.88) !important;

  font-weight: 650 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em;

  padding: 5px 8px !important;
  border-radius: 999px !important;
}

/* Visited pill — quieter but confident */
.country-hero-bar .country-status-chip{
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.94) !important;

  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: -0.1px;

  padding: 5px 9px !important;
  border-radius: 999px !important;

  white-space: nowrap;
}

/* Keep active visited obvious but premium */
.country-hero-bar .country-status-chip.active{
  background: rgba(16,185,129,0.24) !important;
  border-color: rgba(16,185,129,0.35) !important;
}

/* Been here — Glass Primary (premium, blends into bar) */
.country-hero-bar .add-place-link{
  width: 100% !important;
  border-radius: 11px !important;

  padding: 8px 10px !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  letter-spacing: -0.1px;

  /* glass primary */
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.96) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 10px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);

  transition:
    transform 520ms cubic-bezier(.16,1,.3,1),
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 520ms cubic-bezier(.16,1,.3,1);

  will-change: transform;
}

/* Hover: tiny lift + slightly brighter glass */
.country-card:hover .country-hero-bar .add-place-link{
  transform: translate3d(0,-1px,0);
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* Pressed: subtle sink */
.country-hero-bar .add-place-link:active{
  transform: translate3d(0,0,0) scale(0.99);
}

/* Ensure thumbs appear above overlay if you use them */
.country-cover-with-thumbs .country-thumb-row{
  z-index: 4 !important;
}

/* Responsive tuning */
@media (max-width: 900px){
  .country-cover-wrapper{ height: 260px !important; }
}

@media (max-width: 520px){
  .country-cover-wrapper{ height: 320px !important; }
}
/* =========================================================
   GOSEETHIS — PREMIUM TOURISM BOARD CLUSTERS (STYLE ONLY)
   This ONLY changes visuals. No logic touched.
   ========================================================= */

/* Grid spacing feels more editorial */
.gst-tb-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 900px){
  .gst-tb-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px){
  .gst-tb-grid{ grid-template-columns: 1fr; }
}

/* The 4 frames themselves */
.gst-tb-cluster{
  appearance: none;
  -webkit-appearance: none;

  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;

  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);

  overflow: hidden;
  cursor: pointer;

  box-shadow:
    0 18px 42px rgba(2,6,23,0.12),
    inset 0 1px 0 rgba(255,255,255,0.7);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.gst-tb-cluster:hover{
  transform: translateY(-4px);
  border-color: rgba(15,23,42,0.18);
  box-shadow:
    0 26px 60px rgba(2,6,23,0.18),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

/* Image area */
.gst-tb-cluster-img{
  position: relative;
  height: 190px;
  background: #e5e7eb;
}

.gst-tb-cluster-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Soft editorial gradient */
.gst-tb-cluster-img::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(2,6,23,0.00) 45%,
    rgba(2,6,23,0.22) 100%
  );
  pointer-events: none;
}

/* Text block */
.gst-tb-cluster-meta{
  padding: 14px 14px 16px;
}

.gst-tb-cluster-name{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,0.95);
}

.gst-tb-cluster-blurb{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,23,42,0.70);
}

/* Dark mode */
body.dark .gst-tb-cluster{
  background: rgba(2,6,23,0.72);
  border-color: rgba(148,163,184,0.25);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

body.dark .gst-tb-cluster-name{
  color: rgba(248,250,252,0.96);
}

body.dark .gst-tb-cluster-blurb{
  color: rgba(226,232,240,0.75);
}
/* Focus glow — ultra subtle, premium */
.country-card::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;

  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0;

  transition: opacity 240ms ease;
}

.country-card:hover::after{
  opacity: 1;
}
/* Delay sheen slightly — feels intentional */
.country-card:hover .country-cover-with-thumbs::before{
  transition-delay: 90ms;
}
/* Glass edge polish — micro realism */
.country-card{
  box-shadow:
    0 18px 55px rgba(2,6,23,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .country-card,
  .country-cover,
  .country-cover-with-thumbs::before,
  .country-hero-bar,
  .country-stamp{
    transition: none !important;
    transform: none !important;
  }
}
/* =========================================================
   Featured stays – Gallery lightbox (premium)
   ========================================================= */
.gst-gallery-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.gst-gallery-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
.gst-gallery-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(6px);
}
.gst-gallery-modal{
  position: relative;
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow: 0 20px 70px rgba(0,0,0,0.45);
}
.gst-gallery-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  z-index: 3;
}
.gst-gallery-close:hover{
  background: rgba(2, 6, 23, 0.55);
}
.gst-gallery-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  color: rgba(255,255,255,0.92);
}
.gst-gallery-title{
  font-weight: 800;
  letter-spacing: 0.2px;
}
.gst-gallery-count{
  font-size: 12px;
  opacity: 0.85;
}
.gst-gallery-stage{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px 14px;
}
.gst-gallery-img{
  width: 100%;
  height: auto;
  max-height: calc(100vh - 170px);
  object-fit: contain;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.35);
}
.gst-gallery-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(2, 6, 23, 0.42);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.gst-gallery-prev{ left: 16px; }
.gst-gallery-next{ right: 16px; }

/* =========================================================
   ✅ NEW: Map lightbox upgrades (thumbs + zoom + pan)
   ========================================================= */
.gst-gallery-top-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.gst-gallery-zoom{
  display:flex;
  align-items:center;
  gap: 6px;
}

.gst-gallery-zoom-btn{
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(2, 6, 23, 0.28);
  color: rgba(255,255,255,0.92);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.gst-gallery-zoom-btn:hover{
  background: rgba(2, 6, 23, 0.45);
}

.gst-gallery-stage--zoom{
  user-select: none;
}

.gst-gallery-imgwrap{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
  touch-action: pan-y;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gst-gallery-img--zoom{
  transform: translate(0px,0px) scale(1);
  transform-origin: center center;
  user-select:none;
  -webkit-user-drag: none;
}

.gst-gallery-thumbs{
  padding: 10px 12px 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-top: 1px solid rgba(148,163,184,0.12);
}

.gst-gallery-thumb{
  width: 56px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.20);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.78;
}

.gst-gallery-thumb:hover{ opacity: 1; }

.gst-gallery-thumb.is-active{
  opacity: 1;
  border-color: rgba(14,165,233,0.85);
  box-shadow: 0 0 0 2px rgba(14,165,233,0.22);
}

/* Small “View gallery” button + photo badge inside the stays drawer */
.gst-hotel-gallery-btn{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.18);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  width: fit-content;
}
.gst-hotel-gbadge{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
/* =========================
   Premium: Itinerary Advanced settings (Trip & Country)
   ========================= */
.gst-adv-details{
  margin-top:14px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.gst-adv-details > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
}
.gst-adv-details > summary::-webkit-details-marker{ display:none; }
.gst-adv-details > summary::after{
  content:"▾";
  font-size:14px;
  opacity:0.75;
}
.gst-adv-details[open] > summary::after{
  content:"▴";
}
.gst-adv-summary{
  background: rgba(0,0,0,0.03);
}
.gst-adv-body{
  padding:12px 12px 14px 12px;
}
/* =========================================================
   PRIMARY CTA — Generate / Update Itinerary
   (visual only, NO logic impact)
   ========================================================= */
#itinApplyBtn{
  position: relative;
  padding: 10px 18px;
  border-radius: 14px;

  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: -0.01em;

  color: white;
  background:
    linear-gradient(
      135deg,
      #6366f1,
      #38bdf8
    );

  border: none;

  box-shadow:
    0 10px 26px rgba(56,189,248,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35);

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease;
}

/* Hover = lift */
#itinApplyBtn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px rgba(56,189,248,0.55),
    inset 0 1px 0 rgba(255,255,255,0.45);
  filter: brightness(1.03);
}

/* Active = press */
#itinApplyBtn:active{
  transform: translateY(0.5px);
  box-shadow:
    0 8px 20px rgba(56,189,248,0.40),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Focus (keyboard accessibility) */
#itinApplyBtn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(99,102,241,0.35),
    0 12px 28px rgba(56,189,248,0.45);
}

/* Dark mode tuning */
body.dark #itinApplyBtn{
  box-shadow:
    0 14px 34px rgba(56,189,248,0.55),
    inset 0 1px 0 rgba(255,255,255,0.20);
}
/* =========================================================
   PROFILE WORLD MAP (Step 5)
   ========================================================= */

.gst-map-shell{
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  position: relative;
}

body:not(.dark) .gst-map-shell{
  background: rgba(255,255,255,0.7);
}

.gst-map-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gst-map-title{
  font-weight: 950;
  font-size: 14px;
  color: var(--text-main);
}

.gst-map-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

.gst-map-actions{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}

.gst-map-load{
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.gst-map-legend{
  margin-top: 10px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.gst-map-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  border: 1px solid rgba(148,163,184,0.35);
}

.gst-dot-visited{ background: rgba(14,165,233,0.85); } /* blue */
.gst-dot-contrib{ background: rgba(251,191,36,0.85); } /* gold */

.gst-map-spacer{ width: 10px; display:inline-block; }

.gst-worldmap-wrap{
  margin-top: 12px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(148,163,184,0.08);
}

/* tooltip (FIXED: pinned to cursor / viewport, not to the map container) */
.gst-map-tooltip{
  position: fixed; /* ✅ key fix */
  z-index: 99999;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  pointer-events: none;
  background: rgba(2,6,23,0.92);
  color: rgba(248,250,252,0.95);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  border: 1px solid rgba(148,163,184,0.22);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transform: scale(0.98);
  opacity: 0;
  visibility: hidden;

  transition:
    opacity 140ms ease,
    transform 140ms ease;
  will-change: left, top, opacity, transform;
}

/* keep flip classes (JS toggles them) */
.gst-map-tooltip.flip-x{ transform: scale(0.98); }
.gst-map-tooltip.flip-y{ transform: scale(0.98); }
.gst-map-tooltip.flip-x.flip-y{ transform: scale(0.98); }

.gst-map-tooltip .gst-tip-icon{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.95);
  position: relative;
  box-shadow: 0 0 0 2px rgba(148,163,184,0.18);
}

.gst-map-tooltip .gst-tip-icon::after{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 50%;
  top: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(148,163,184,0.95);
  border-radius: 1px;
  box-shadow: 0 0 0 2px rgba(148,163,184,0.14);
}

.gst-map-tooltip.is-visible{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.gst-map-tooltip.hidden{
  opacity: 0;
  visibility: hidden;
}

/* popup */
.gst-map-pop{
  position:absolute;
  right: 12px;
  top: 62px;
  width: min(330px, calc(100% - 24px));
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.92);
  color: rgba(248,250,252,0.95);
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
  padding: 12px;
  display:none;
}

body:not(.dark) .gst-map-pop{
  background: rgba(255,255,255,0.95);
  color: rgba(15,23,42,0.92);
}

.gst-map-pop.is-open{ display:block; }

.gst-map-pop-close{
  position:absolute;
  right: 10px;
  top: 8px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 22px;
  cursor:pointer;
  line-height: 1;
}

.gst-map-pop-title{
  font-weight: 950;
  font-size: 14px;
  padding-right: 26px;
}

.gst-map-pop-sub{
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}

.gst-map-pop-photo{
  margin-top: 10px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(148,163,184,0.10);
  height: 160px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gst-map-pop-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gst-map-pop-empty{
  padding: 10px;
  text-align:center;
  font-size: 12px;
  opacity: 0.9;
}

/* upload label */
.gst-map-pop-upload{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.gst-map-pop-upload input{
  display:none;
}

.gst-map-pop-note{
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.75;
}

/* legend count "chip" (premium) */
.gst-map-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(148,163,184,0.10);
  color: var(--text-main);
}

/* Fullscreen mode (SAFE + FIXED: no blur blanking) */
body.gst-map-fullscreen{
  overflow: hidden; /* prevent page scrolling behind the map */
}

/* Duplicate fullscreen styles REMOVED.
   (This block was overriding the correct fullscreen rules above and causing the see-through/washed-out look.) */

/* NEW: photo thumbnails (up to 3) inside the map popup */
.gst-map-pop-thumbrow{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gst-map-thumb{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.30);
  background: rgba(148,163,184,0.12);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
}

.gst-map-thumb.is-active{
  outline: 2px solid rgba(251,191,36,0.85);
  outline-offset: 2px;
}

/* NEW: popup actions row */
.gst-map-pop-actions{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ✅ Pin button contrast + clear active state */
.gst-map-pinbtn{
  border: 1px solid rgba(15,23,42,0.22) !important;
  color: rgba(15,23,42,0.88) !important;
  background: rgba(255,255,255,0.88) !important;
  font-weight: 900 !important;
}

body.dark .gst-map-pinbtn{
  border-color: rgba(148,163,184,0.28) !important;
  color: rgba(248,250,252,0.92) !important;
  background: rgba(2,6,23,0.35) !important;
}

.gst-map-pinbtn.is-on{
  border-color: rgba(245,158,11,0.55) !important;
  background: rgba(245,158,11,0.12) !important;
}

/* Make Delete not blend into white */
.gst-map-pop-actions .btn-ghost{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.86);
  font-weight: 900;
}

body.dark .gst-map-pop-actions .btn-ghost{
  border-color: rgba(148,163,184,0.20);
  background: rgba(248,250,252,0.06);
  color: rgba(248,250,252,0.90);
}

/* Premium: visited toggle button */
.gst-map-visit-btn{
  border: 1px solid rgba(14,165,233,0.35) !important;
  background: rgba(14,165,233,0.14) !important;
  color: rgba(14,165,233,0.98) !important;
  font-weight: 900 !important;
}

body.dark .gst-map-visit-btn{
  border-color: rgba(56,189,248,0.35) !important;
  background: rgba(56,189,248,0.16) !important;
  color: rgba(186,230,253,0.98) !important;
}

.gst-map-visit-btn.is-on{
  background: rgba(14,165,233,0.22) !important;
}

.gst-map-visit-btn.is-disabled{
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

/* Memory strip (premium, draggable) */
.gst-memory-strip{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(148,163,184,0.06);
  padding: 10px 10px 8px;
}

body.dark .gst-memory-strip{
  background: rgba(255,255,255,0.04);
}

.gst-memory-strip-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.gst-memory-strip-title{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.gst-memory-strip-meta{
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.gst-memory-strip-row{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 10px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  cursor: grab;
  user-select: none;

  /* ✅ Premium: center when there are few highlights */
  justify-content: center;
}

.gst-memory-strip-row:active{
  cursor: grabbing;
}

.gst-mem-chip{
  flex: 0 0 auto;
  width: 86px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(148,163,184,0.10);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  padding: 0;
  cursor: pointer;
}

.gst-mem-chip::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,0.00) 0%, rgba(2,6,23,0.58) 100%);
  opacity: 0.9;
  pointer-events:none;
}

body:not(.dark) .gst-mem-chip::after{
  opacity: 0.55;
}

.gst-mem-chip-label{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(248,250,252,0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:not(.dark) .gst-mem-chip-label{
  color: rgba(15,23,42,0.92);
}

.gst-mem-empty{
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 2px 2px;
}

.btn-ghost{
  background: transparent !important;
  border: 1px solid rgba(148,163,184,0.30) !important;
}

body.dark .btn-ghost{
  border-color: rgba(148,163,184,0.22) !important;
}
/* ---- Safety patch: keep Explorer avatars circular everywhere ---- */
.explorer-avatar,
.explorer-stories-teaser .explorer-avatar,
.gst-explorer-stories-teaser .explorer-avatar {
  border-radius: 999px !important;
  overflow: hidden;
}

/* If any avatar is an <img> in some views, force it too */
.explorer-avatar img,
.teaser-avatar {
  border-radius: 999px !important;
}
/* ================================
   SAFETY PATCH (premium visuals)
   - restore circular explorer avatars
   - ensure story galleries stay visible on all screens
   ================================ */

/* Force explorer avatars to be circular no matter what */
.explorer-avatar {
  border-radius: 999px !important;
  overflow: hidden !important;
  background-clip: padding-box;
}

/* If any avatar is ever rendered as an <img>, force it too */
.explorer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px !important;
  display: block;
}

/* Make sure galleries are never collapsed by a parent */
.media-gallery {
  display: flex !important;
  overflow-x: auto;
}

/* Keep gallery tiles responsive so they don't "disappear" on phones */
.media-item {
  width: min(400px, 78vw) !important;
  height: min(400px, 78vw) !important;
}
/* =========================================================
   EXPLORE MORE (Premium UI, safe add-on)
   ========================================================= */

.explore-more-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
}

.explore-more-progress{
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.70);
}

body.dark .explore-more-progress{
  color: rgba(226,232,240,0.78);
}

/* Your button already has .explore-more-btn — this just makes it feel “premium” */
.explore-more-btn{
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 750;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 40px rgba(2,6,23,0.10);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.explore-more-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 55px rgba(2,6,23,0.14);
}

.explore-more-btn:active{
  transform: translateY(0px) scale(0.99);
}

/* Subtle “newly revealed” highlight */
.country-card--pop{
  animation: gstCountryPop 850ms ease-out 1;
  outline: 2px solid rgba(59,130,246,0.25);
  outline-offset: 4px;
}

@keyframes gstCountryPop{
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}
/* =========================================================
   PROFILE MAP — PINNED GALLERIES (MAX 12) + OVERFLOW DOT PINS
   SAFE: CSS ONLY
   ========================================================= */

.gst-worldmap-wrap {
  position: relative;
}

.gst-map-pins-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

/* ✅ Premium layer-stack toggle (top-right) */
.gst-map-pins-toggle{
  pointer-events: auto;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1200;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(148,163,184,0.20);
  box-shadow: 0 10px 22px rgba(2,6,23,0.12);

  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,0.86);

  cursor: pointer;
  user-select: none;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.gst-map-pins-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,0.16);
}

.gst-map-pins-toggle:active{
  transform: translateY(0px) scale(0.99);
}

.gst-map-pins-toggle-ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
}

.gst-map-pins-toggle-text{
  white-space: nowrap;
}

body.dark .gst-map-pins-toggle{
  background: rgba(2,6,23,0.62);
  border-color: rgba(148,163,184,0.18);
  color: rgba(226,232,240,0.92);
}

/* ---------------------------
   PHOTO GALLERY CARDS (TOP 12)
   --------------------------- */
.gst-map-pin-card {
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 80px;
  max-width: 34vw;

  border-radius: 12px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.20);
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.14);

  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, width 160ms ease, max-width 160ms ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 10;
}

.gst-map-pin-card:hover {
  z-index: 999 !important;
  transform: translate(-50%, -56%) scale(1.08);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22);
}

/* ✅ Minimized mode: PHOTO DOT (ultra-minimal, premium) */
.gst-map-pin-card.is-min{
  width: 28px;
  max-width: 28px;
  height: 28px;

  border-radius: 999px;
  overflow: hidden;

  box-shadow:
    0 4px 10px rgba(2,6,23,0.16),
    inset 0 0 0 1.5px rgba(255,255,255,0.85);

  background: rgba(255,255,255,0.92);
}

/* Photo becomes a circular dot */
.gst-map-pin-card.is-min .gst-map-pin-img{
  height: 100%;
  border-radius: 999px;
}

/* Hide all text/meta in minimized mode */
.gst-map-pin-card.is-min .gst-map-pin-meta{
  display: none;
}

/* Disable hover scaling when minimized (keeps precision) */
.gst-map-pin-card.is-min:hover{
  transform: translate(-50%, -50%);
  box-shadow:
    0 5px 12px rgba(2,6,23,0.18),
    inset 0 0 0 1.5px rgba(255,255,255,0.9);
}

/* ✅ Peek mode: expand ONLY the selected dot */
.gst-map-pin-card.is-min.is-peek{
  width: 150px;
  max-width: 220px;
  height: auto;

  border-radius: 12px;
  overflow: hidden;

  z-index: 1200;

  box-shadow: 0 14px 30px rgba(2,6,23,0.22);
}

/* Restore image + meta in peek */
.gst-map-pin-card.is-min.is-peek .gst-map-pin-img{
  height: 60px;
  border-radius: 0;
}

.gst-map-pin-card.is-min.is-peek .gst-map-pin-meta{
  display: flex;
}

/* overflow pins stay under cards by default */
.gst-map-pin-dotonly {
  z-index: 6;
}

.gst-map-pin-img {
  height: 46px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.gst-map-pin-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.1;
}

.gst-map-pin-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.95);
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.18);
  flex: 0 0 auto;
}

.gst-map-pin-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(15, 23, 42, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .gst-map-pin-card {
  background: rgba(2, 6, 23, 0.82);
  border-color: rgba(148, 163, 184, 0.18);
}

body.dark .gst-map-pin-name {
  color: rgba(226, 232, 240, 0.92);
}


/* ---------------------------
   OVERFLOW MAP PINS (AFTER 12)
   RED / CORAL — VERY NOTICEABLE
   + animated newest pin
   --------------------------- */

.gst-map-pin-dotonly {
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -100%);
  width: 22px;
  height: 22px;

  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform 160ms ease;
}

/* Pin body — CRIMSON / CORAL */
.gst-map-pin-dotonly::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    #ef4444,   /* red */
    #f43f5e,   /* rose */
    #fb7185    /* coral */
  );

  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);

  box-shadow:
    0 8px 18px rgba(127, 29, 29, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Inner white dot */
.gst-map-pin-dotonly-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: white;
  z-index: 1;
}

/* Hover — lift + grow */
.gst-map-pin-dotonly:hover {
  transform: translate(-50%, -108%) scale(1.2);
}

/* =========================
   NEWEST OVERFLOW PIN PULSE
   ========================= */
.gst-map-pin-dotonly:first-of-type::after {
  content: "";
  position: absolute;
  inset: -6px;

  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(244, 63, 94, 0.45),
    rgba(244, 63, 94, 0.0) 65%
  );

  animation: gst-pin-pulse 1.8s ease-out infinite;
}

@keyframes gst-pin-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Dark mode — deeper red */
body.dark .gst-map-pin-dotonly::before {
  background: linear-gradient(
    180deg,
    #fb7185,
    #f43f5e,
    #be123c
  );

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* =========================================================
   GOSEETHIS — PREMIUM WEEKLY LOVE (DESIGN ONLY)
   Safe: CSS-only overrides scoped to #weeklyLoveSection
   ========================================================= */

#weeklyLoveSection.weekly-love{
  margin-top: 22px;
}

#weeklyLoveSection .weekly-love-inner{
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 18px 55px rgba(2,6,23,0.08);
  overflow: hidden;
}

body.dark #weeklyLoveSection .weekly-love-inner{
  background: rgba(2,6,23,0.50);
  border-color: rgba(148,163,184,0.20);
  box-shadow: 0 26px 80px rgba(0,0,0,0.35);
}

#weeklyLoveSection .weekly-love-head{
  padding-bottom: 10px;
}

/* --- Premium editorial layout: 1 featured + 3 supporting --- */
#weeklyLoveSection .weekly-love-grid{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-auto-rows: 168px;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 980px){
  #weeklyLoveSection .weekly-love-grid{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }
}

@media (max-width: 560px){
  #weeklyLoveSection .weekly-love-grid{
    grid-template-columns: 1fr;
    grid-auto-rows: 190px;
  }
}

/* Featured tile */
#weeklyLoveSection .weekly-love-tile:nth-child(1){
  grid-row: span 2;
  height: auto !important;
  min-height: calc(168px * 2 + 14px);
}

@media (max-width: 980px){
  #weeklyLoveSection .weekly-love-tile:nth-child(1){
    grid-row: auto;
    min-height: 220px;
  }
}

@media (max-width: 560px){
  #weeklyLoveSection .weekly-love-tile:nth-child(1){
    min-height: 240px;
  }
}

/* --- Tile shell: premium card (no “plain rectangle”) --- */
#weeklyLoveSection .weekly-love-tile{
  position: relative;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #0b1220 !important;

  box-shadow:
    0 14px 38px rgba(2,6,23,0.12),
    inset 0 1px 0 rgba(255,255,255,0.10);

  transform: translateY(0);
  transition:
    transform 170ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

body.dark #weeklyLoveSection .weekly-love-tile{
  border-color: rgba(148,163,184,0.18) !important;
  box-shadow:
    0 22px 62px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

#weeklyLoveSection .weekly-love-tile:hover{
  transform: translateY(-3px);
  border-color: rgba(15,23,42,0.16) !important;
  box-shadow:
    0 22px 60px rgba(2,6,23,0.16),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

body.dark #weeklyLoveSection .weekly-love-tile:hover{
  border-color: rgba(226,232,240,0.20) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* --- Image --- */
#weeklyLoveSection .weekly-love-img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transform: scale(1.02);
  filter: saturate(1.06) contrast(1.02);
}

/* Cinematic overlay (soft) */
#weeklyLoveSection .weekly-love-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 260px at 30% 15%, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 60%),
    linear-gradient(to top, rgba(2,6,23,0.62), rgba(2,6,23,0.10) 55%, rgba(2,6,23,0.00));
  pointer-events: none;
}

/* Subtle sheen sweep (premium) */
#weeklyLoveSection .weekly-love-tile::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, rgba(255,255,255,0.00), rgba(255,255,255,0.22), rgba(255,255,255,0.00));
  transform: translateX(-60%) rotate(8deg);
  opacity: 0;
  pointer-events:none;
  transition: opacity 220ms ease, transform 700ms cubic-bezier(.16,1,.3,1);
}

#weeklyLoveSection .weekly-love-tile:hover::before{
  opacity: 1;
  transform: translateX(60%) rotate(8deg);
}

/* --- Badges (rank + saves, rating) --- */
#weeklyLoveSection .weekly-love-badge,
#weeklyLoveSection .weekly-love-rating-badge{
  position: absolute;
  top: 12px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(2,6,23,0.55);
  color: rgba(248,250,252,0.96);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#weeklyLoveSection .weekly-love-badge{
  left: 12px;
}

#weeklyLoveSection .weekly-love-rating-badge{
  right: 12px;
}

/* --- Glass info card at bottom (the “premium” look) --- */
#weeklyLoveSection .weekly-love-meta{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;

  padding: 10px 12px 11px;
  border-radius: 16px;

  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(148,163,184,0.18);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 14px 34px rgba(2,6,23,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55);

  display: flex;
  flex-direction: column;
  gap: 2px;

  text-align: left;
  pointer-events: none;
}

body.dark #weeklyLoveSection .weekly-love-meta{
  background: rgba(2,6,23,0.58);
  border-color: rgba(148,163,184,0.22);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

#weeklyLoveSection .weekly-love-place{
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,0.96);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark #weeklyLoveSection .weekly-love-place{
  color: rgba(248,250,252,0.96);
}

#weeklyLoveSection .weekly-love-country{
  font-size: 11.5px;
  font-weight: 650;
  color: rgba(15,23,42,0.62);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark #weeklyLoveSection .weekly-love-country{
  color: rgba(226,232,240,0.72);
}
/* =========================================================
   GOSEETHIS — WEEKLY LOVE LUXURY ACCENT (DESIGN ONLY)
   Subtle champagne gold, premium editorial feel
   ========================================================= */

:root{
  --lux-gold: linear-gradient(
    90deg,
    rgba(212,175,55,0.0),
    rgba(212,175,55,0.55),
    rgba(212,175,55,0.0)
  );
}

/* Thin gold accent line under section header */
#weeklyLoveSection .weekly-love-head::after{
  content:"";
  display:block;
  margin-top: 10px;
  height: 1px;
  width: 100%;
  background: var(--lux-gold);
  opacity: 0.7;
}

/* Micro gold highlight on card hover */
#weeklyLoveSection .weekly-love-tile::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;

  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,0.45),
    0 0 0 1px rgba(212,175,55,0.12);

  transition: opacity 220ms ease;
}

#weeklyLoveSection .weekly-love-tile:hover::after{
  opacity: 1;
}

/* Featured tile slightly stronger gold presence */
#weeklyLoveSection .weekly-love-tile:nth-child(1)::after{
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,0.55),
    0 0 0 1px rgba(212,175,55,0.18);
}

/* Dark mode tuning (less shine, more warmth) */
body.dark #weeklyLoveSection .weekly-love-head::after{
  opacity: 0.55;
}

body.dark #weeklyLoveSection .weekly-love-tile::after{
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,0.30),
    0 0 0 1px rgba(212,175,55,0.10);
}
/* =========================================================
   GOSEETHIS — WEEKLY LOVE: micro parallax + stagger + heart anim
   CSS-only (no logic changes)
   ========================================================= */

/* ---------- 1) MICRO PARALLAX (hover drift on image) ---------- */
#weeklyLoveSection .weekly-love-img{
  transition: transform 900ms cubic-bezier(.16,1,.3,1), filter 300ms ease;
  will-change: transform;
}

/* Default drift */
#weeklyLoveSection .weekly-love-tile:hover .weekly-love-img{
  transform: scale(1.08) translate3d(-8px, -10px, 0);
  filter: saturate(1.10) contrast(1.04);
}

/* Featured tile: slightly different drift so it feels “special” */
#weeklyLoveSection .weekly-love-tile:nth-child(1):hover .weekly-love-img{
  transform: scale(1.10) translate3d(-12px, -14px, 0);
}

/* Reduce motion for people who prefer it (premium accessibility) */
@media (prefers-reduced-motion: reduce){
  #weeklyLoveSection .weekly-love-img{
    transition: none;
  }
  #weeklyLoveSection .weekly-love-tile:hover .weekly-love-img{
    transform: none;
  }
}

/* ---------- 2) SLIGHT CARD STAGGER (desktop only) ---------- */
/* Adds a subtle editorial “designed” offset without breaking layout */
@media (min-width: 981px){
  #weeklyLoveSection .weekly-love-tile:nth-child(2){ transform: translateY(2px); }
  #weeklyLoveSection .weekly-love-tile:nth-child(3){ transform: translateY(6px); }
  #weeklyLoveSection .weekly-love-tile:nth-child(4){ transform: translateY(10px); }

  /* Keep hover lift working (combine stagger + hover lift) */
  #weeklyLoveSection .weekly-love-tile:nth-child(2):hover{ transform: translateY(-1px); }
  #weeklyLoveSection .weekly-love-tile:nth-child(3):hover{ transform: translateY(3px); }
  #weeklyLoveSection .weekly-love-tile:nth-child(4):hover{ transform: translateY(7px); }
}

/* ---------- 3) “LOVED THIS WEEK” HEART ANIMATION ---------- */
/* We don’t change your HTML/logic — we just animate if a heart exists.
   This targets common patterns: .weekly-love-heart, .heart, .heart-icon, svg inside badges.
*/
@keyframes weeklyHeartPulse{
  0%   { transform: scale(1);   }
  35%  { transform: scale(1.12); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1);   }
}

/* If you have a dedicated heart element class */
#weeklyLoveSection .weekly-love-heart,
#weeklyLoveSection .heart,
#weeklyLoveSection .heart-icon{
  display: inline-flex;
  transform-origin: center;
}

/* Gentle pulse on hover (premium: only when user interacts) */
#weeklyLoveSection .weekly-love-tile:hover .weekly-love-heart,
#weeklyLoveSection .weekly-love-tile:hover .heart,
#weeklyLoveSection .weekly-love-tile:hover .heart-icon{
  animation: weeklyHeartPulse 800ms cubic-bezier(.16,1,.3,1) 1;
}

/* Also try to pulse heart-like SVGs in badges (safe fallback) */
#weeklyLoveSection .weekly-love-badge svg,
#weeklyLoveSection .weekly-love-meta svg{
  transform-origin: center;
}

#weeklyLoveSection .weekly-love-tile:hover .weekly-love-badge svg,
#weeklyLoveSection .weekly-love-tile:hover .weekly-love-meta svg{
  animation: weeklyHeartPulse 800ms cubic-bezier(.16,1,.3,1) 1;
}

/* Slight glow when pulsing (quiet luxury) */
#weeklyLoveSection .weekly-love-tile:hover .weekly-love-badge,
#weeklyLoveSection .weekly-love-tile:hover .weekly-love-meta{
  box-shadow:
    0 16px 40px rgba(2,6,23,0.16),
    inset 0 1px 0 rgba(255,255,255,0.50);
}
/* =========================================================
   GOSEETHIS — EDITORS PICKS (HANDPICKED) PREMIUM DESIGN ONLY
   Safe: CSS-only overrides scoped to #editorsPicksSection
   ========================================================= */

#editorsPicksSection.editors-picks{
  margin-top: 18px;
}

/* Make it feel like its own premium module */
#editorsPicksSection .weekly-love-inner{
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 18px 55px rgba(2,6,23,0.08);
}

body.dark #editorsPicksSection .weekly-love-inner{
  background: rgba(2,6,23,0.50);
  border-color: rgba(148,163,184,0.20);
  box-shadow: 0 26px 80px rgba(0,0,0,0.35);
}

/* Header spacing / typography */
#editorsPicksSection .weekly-love-head{
  padding-bottom: 6px;
}

#editorsPicksSection .editors-kicker{
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: 11px;
  opacity: 0.8;
}

/* --- 3 tall cards end-to-end --- */
#editorsPicksSection .weekly-love-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 2px 2px;
}

/* Tall “poster” height */
#editorsPicksSection .weekly-love-tile{
  position: relative;
  height: 420px !important;
  border-radius: 22px !important;
  overflow: hidden !important;

  border: 1px solid rgba(15,23,42,0.10) !important;
  background: #0b1220 !important;

  box-shadow:
    0 18px 55px rgba(2,6,23,0.14),
    inset 0 1px 0 rgba(255,255,255,0.10);

  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

#editorsPicksSection .weekly-love-tile:hover{
  transform: translateY(-4px);
  border-color: rgba(15,23,42,0.16) !important;
  box-shadow:
    0 26px 78px rgba(2,6,23,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

body.dark #editorsPicksSection .weekly-love-tile{
  border-color: rgba(148,163,184,0.18) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Image: crisp, premium */
#editorsPicksSection .weekly-love-img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.03);
  filter: saturate(1.06) contrast(1.03);
  transition: transform 900ms cubic-bezier(.16,1,.3,1), filter 280ms ease;
  will-change: transform;
}

#editorsPicksSection .weekly-love-tile:hover .weekly-love-img{
  transform: scale(1.10) translate3d(-10px, -10px, 0);
  filter: saturate(1.10) contrast(1.05);
}

/* Overlay: cinematic readability */
#editorsPicksSection .weekly-love-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 260px at 30% 10%, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 60%),
    linear-gradient(to top, rgba(2,6,23,0.78), rgba(2,6,23,0.10) 55%, rgba(2,6,23,0.00));
  pointer-events: none;
}

/* Badge: cleaner, more premium */
#editorsPicksSection .weekly-love-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 11px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(2,6,23,0.55);
  color: rgba(248,250,252,0.96);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Meta becomes a clean text block over the image (not a glass card) */
#editorsPicksSection .weekly-love-meta{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;

  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  text-align: left;
  pointer-events: none;
}

/* Big destination title */
#editorsPicksSection .weekly-love-place{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(248,250,252,0.98);
  text-transform: uppercase;
  line-height: 1.02;

  text-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

/* Subtext */
#editorsPicksSection .weekly-love-country{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(226,232,240,0.78);
  letter-spacing: 0.02em;

  text-shadow: 0 10px 22px rgba(0,0,0,0.45);
}

/* Responsive */
@media (max-width: 980px){
  #editorsPicksSection .weekly-love-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #editorsPicksSection .weekly-love-tile{
    height: 360px !important;
  }
  #editorsPicksSection .weekly-love-place{
    font-size: 30px;
  }
}
/* =========================================================
   EDITORS PICKS — EDGE-TO-EDGE COLLAGE (CSS ONLY)
   Paste UNDER the previous editors-picks block
   ========================================================= */

/* Remove the outer padding so the grid can touch the container edges */
#editorsPicksSection .weekly-love-inner{
  padding: 0 !important;
}

/* Tight collage grid (almost no gap) */
#editorsPicksSection .weekly-love-grid{
  gap: 6px !important;              /* change to 0px if you want true seam */
  padding: 0 !important;
  margin: 0 !important;
}

/* Make tiles square off slightly so they connect visually */
#editorsPicksSection .weekly-love-tile{
  border-radius: 18px !important;   /* slightly smaller radius looks better when tight */
}

/* Optional: true “seamless” look (remove rounded corners on middle tile) */
#editorsPicksSection .weekly-love-tile:nth-child(2){
  border-radius: 12px !important;
}

/* Make the overall module corners remain premium */
#editorsPicksSection .weekly-love-inner{
  border-radius: 26px !important;
  overflow: hidden !important;
}

/* Mobile: restore a bit more spacing so it doesn’t feel cramped */
@media (max-width: 980px){
  #editorsPicksSection .weekly-love-grid{
    gap: 10px !important;
    padding: 10px !important;
  }
  #editorsPicksSection .weekly-love-tile{
    border-radius: 22px !important;
  }
}
/* =========================================================
   EDITORS PICKS — FORCE 3 CARDS IN ONE ROW (DESKTOP)
   CSS ONLY – NO LOGIC CHANGES
   ========================================================= */

/* Desktop & large screens: ALWAYS 3 cards in one row */
@media (min-width: 981px){
  #editorsPicksSection .weekly-love-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    width: 100% !important;
  }

  /* Prevent accidental wrapping caused by flex rules elsewhere */
  #editorsPicksSection .weekly-love-tile{
    min-width: 0 !important;
    height: 420px !important;
  }
}

/* Tablet: still keep them in one row if space allows */
@media (min-width: 720px) and (max-width: 980px){
  #editorsPicksSection .weekly-love-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mobile: stack (intentional, premium) */
@media (max-width: 719px){
  #editorsPicksSection .weekly-love-grid{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   EDITOR PICKS — FORCE 3 TALL CARDS IN ONE ROW (NO LOGIC CHANGES)
   Paste at VERY BOTTOM of style.css
   ========================================================= */

#editorsPicksSection .editors-picks-grid{
  /* Override any previous grid-area / masonry layout */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: none !important;

  gap: 18px !important;
  align-items: stretch;
  width: 100%;
}

/* Cancel the old "hero/side" placement so nothing drops */
#editorsPicksSection .editors-picks-grid .weekly-love-tile{
  grid-area: auto !important;
  height: 360px;              /* tall cards */
  border-radius: 22px;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 220ms ease, filter 220ms ease;
}

/* Slight premium hover */
#editorsPicksSection .editors-picks-grid .weekly-love-tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15,23,42,0.18);
  filter: saturate(1.05);
}

/* Make overlay feel more “editorial” */
#editorsPicksSection .editors-picks-grid .weekly-love-overlay{
  background: linear-gradient(
    to top,
    rgba(2,6,23,0.86),
    rgba(2,6,23,0.18) 55%,
    rgba(2,6,23,0.05) 100%
  );
}

/* More breathing room for text */
#editorsPicksSection .editors-picks-grid .weekly-love-meta{
  left: 16px;
  right: 16px;
  bottom: 16px;
  gap: 4px;
}

/* Slightly bigger title for editor picks */
#editorsPicksSection .editors-picks-grid .weekly-love-place{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Subtitle a touch clearer */
#editorsPicksSection .editors-picks-grid .weekly-love-country{
  font-size: 12px;
  color: rgba(226,232,240,0.86);
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px){
  #editorsPicksSection .editors-picks-grid{
    grid-template-columns: 1fr !important;
  }

  #editorsPicksSection .editors-picks-grid .weekly-love-tile{
    height: 220px;
    border-radius: 18px;
  }
}
/* =========================================================
   WEEKLY LOVE — PREMIUM GLASS REDESIGN (VISUAL ONLY)
   Paste this at the VERY BOTTOM of style.css
   ========================================================= */

/* Premium container */
.weekly-love{
  padding: 30px 16px 18px;
}

.weekly-love-inner{
  border-radius: 26px;
  border: 1px solid rgba(148,163,184,0.18);
  background:
    radial-gradient(1200px 320px at 20% 0%, rgba(59,130,246,0.10) 0%, rgba(59,130,246,0.00) 55%),
    radial-gradient(900px 280px at 90% 10%, rgba(245,158,11,0.10) 0%, rgba(245,158,11,0.00) 60%),
    rgba(255,255,255,0.86);
  box-shadow: 0 28px 70px rgba(15,23,42,0.12);
}

.weekly-love-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.weekly-love-subtitle{
  font-size: 14px;
  color: rgba(51,65,85,0.78);
}

/* Editorial layout: 1 hero + 3 stacked */
.weekly-love-grid{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, 150px);
  grid-template-areas:
    "hero side1"
    "hero side2"
    "hero side3";
  gap: 18px;
}

.weekly-love-grid .weekly-love-tile:nth-child(1){ grid-area: hero; }
.weekly-love-grid .weekly-love-tile:nth-child(2){ grid-area: side1; }
.weekly-love-grid .weekly-love-tile:nth-child(3){ grid-area: side2; }
.weekly-love-grid .weekly-love-tile:nth-child(4){ grid-area: side3; }

@media (max-width: 900px){
  .weekly-love-grid{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "hero"
      "side1"
      "side2"
      "side3";
    gap: 14px;
  }
  .weekly-love-grid .weekly-love-tile{
    min-height: 190px;
  }
}

/* Premium glass card */
.weekly-love-tile{
  position: relative;
  border: 1px solid rgba(148,163,184,0.28);
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 22px;
  overflow: hidden;

  background: rgba(255,255,255,0.70);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow:
    0 18px 50px rgba(15,23,42,0.14),
    0 2px 10px rgba(15,23,42,0.06);

  transition: transform 200ms ease, box-shadow 240ms ease, border-color 240ms ease;
  width: 100%;
  height: 100%;
  text-align: left;
}

.weekly-love-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(148,163,184,0.40);
  box-shadow:
    0 26px 70px rgba(15,23,42,0.18),
    0 6px 18px rgba(15,23,42,0.08);
}

/* Image atmosphere */
.weekly-love-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.02);
}

/* Editorial fade + subtle vignette */
.weekly-love-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.05) 46%, rgba(0,0,0,0.10) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 42%, rgba(15,23,42,0.44) 100%);
  pointer-events: none;
}

/* Top-left pill (your existing badge text, restyled) */
.weekly-love-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.92);

  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(148,163,184,0.30);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  box-shadow: 0 10px 20px rgba(15,23,42,0.10);
  max-width: calc(100% - 160px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Top-right chip (CSS-only, no logic change) */
.weekly-love-tile::before{
  content: "★ Worth a Look";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(15,23,42,0.92);

  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(148,163,184,0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  box-shadow: 0 10px 20px rgba(15,23,42,0.10);
  pointer-events: none;
}

/* Bottom glass info bar */
.weekly-love-meta{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;

  padding: 14px 14px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(148,163,184,0.26);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow: 0 14px 30px rgba(15,23,42,0.12);
  overflow: hidden;
}

.weekly-love-place{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,0.94);
  line-height: 1.15;
}

.weekly-love-country{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(51,65,85,0.78);
}

/* Bottom-right micro label to fill the “empty corner” */
.weekly-love-tile::after{
  content: "TRENDING";
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: rgba(15,23,42,0.40);
  pointer-events: none;
}

/* Gold corner glow (signature premium detail) */
.weekly-love-meta:after{
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 70px;
  height: 70px;
  background: radial-gradient(circle, rgba(245,158,11,0.55) 0%, rgba(245,158,11,0.18) 35%, rgba(245,158,11,0.00) 70%);
  filter: blur(1px);
  pointer-events: none;
}

/* Hero tile: bigger typography (still same logic) */
.weekly-love-grid .weekly-love-tile:nth-child(1) .weekly-love-meta{
  padding: 18px 18px 16px;
  border-radius: 18px;
}
.weekly-love-grid .weekly-love-tile:nth-child(1) .weekly-love-place{
  font-size: 26px;
  letter-spacing: -0.03em;
}
.weekly-love-grid .weekly-love-tile:nth-child(1) .weekly-love-country{
  font-size: 14px;
}

/* Focus ring (keyboard accessibility) */
.weekly-love-tile:focus-visible{
  outline: 3px solid rgba(59,130,246,0.45);
  outline-offset: 3px;
}
/* =========================================
   FIX: Make first weekly card span full height
   SAFE: CSS only – no logic changes
   ========================================= */

.weekly-love-grid {
  align-items: stretch;
}

.weekly-love-grid > :first-child {
  grid-row: 1 / -1;   /* span all rows */
  height: 100%;
}
/* =========================================================
   FINAL FIX — Make first weekly card match full right height
   SAFE: CSS ONLY | OVERRIDES ALL PREVIOUS RULES
   ========================================================= */

/* Force grid rows to be equal height */
.weekly-love-grid{
  grid-auto-rows: 1fr;
  align-items: stretch;
}

/* First (featured) card spans ALL rows */
.weekly-love-grid > .weekly-love-tile:first-child{
  grid-row: 1 / -1 !important;
  height: 100% !important;
  align-self: stretch !important;
}
/* =========================================
   PREMIUM META PILL REFINEMENT
   ========================================= */

.weekly-love-meta{
  background: rgba(248, 250, 252, 0.78);   /* off-white, not pure white */
  border: 1px solid rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);

  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Dark mode tuning */
body.dark .weekly-love-meta{
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.28);
}
/* =========================================================
   WEEKLY LOVE — GLASS META PILL + TYPOGRAPHY POLISH
   SAFE: CSS ONLY (no logic / no layout changes)
   ========================================================= */

/* Glass pill refinement (soft, premium, not pure white) */
.weekly-love-meta{
  background: rgba(248, 250, 252, 0.78); /* off-white glass */
  border: 1px solid rgba(148, 163, 184, 0.22);

  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);

  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Dark mode tuning */
body.dark .weekly-love-meta{
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.28);
}

/* Typography polish: clear hierarchy */
.weekly-love-place{
  font-weight: 800;
  letter-spacing: -0.015em;
}

.weekly-love-country{
  opacity: 0.7;
  font-weight: 600;
}
/* =========================================================
   WEEKLY LOVE — BADGE CONTRAST SOFTENING
   SAFE: CSS ONLY (no logic / no layout changes)
   ========================================================= */

/* All top badges (rank + CTA chips) */
.weekly-love-badge,
.weekly-love-tile::before{
  background: rgba(255, 255, 255, 0.55);   /* softer glass */
  color: rgba(15, 23, 42, 0.78);            /* less harsh text */
  border: 1px solid rgba(148, 163, 184, 0.22);

  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);

  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Star/icon inside badge — quieter */
.weekly-love-badge svg,
.weekly-love-badge i,
.weekly-love-tile::before svg,
.weekly-love-tile::before i{
  opacity: 0.75;
}

/* Dark mode — keep readable but calm */
body.dark .weekly-love-badge,
body.dark .weekly-love-tile::before{
  background: rgba(15, 23, 42, 0.65);
  color: rgba(248, 250, 252, 0.82);
  border-color: rgba(148, 163, 184, 0.28);
}
/* =========================================================
   TRUE GLASS META PILL (FIXES "TOO WHITE" ISSUE)
   ========================================================= */

.weekly-love-meta{
  /* darker, tinted glass — NOT white */
  background: rgba(230, 235, 242, 0.62);

  border: 1px solid rgba(148, 163, 184, 0.20);

  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);

  /* remove card-like white highlight */
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.14);
}

/* Dark mode — slightly lighter glass */
body.dark .weekly-love-meta{
  background: rgba(17, 24, 39, 0.62);
  border-color: rgba(148, 163, 184, 0.25);
}
/* =========================================================
   PREMIUM META PILL — COMPACT WIDTH REFINEMENT
   ========================================================= */

.weekly-love-meta{
  max-width: 86%;
  padding-left: 14px;
  padding-right: 14px;
}
/* =========================================================
   EDITORS PICKS — Rename badge to Collection I / II / III
   SAFE: CSS ONLY | does NOT touch place/country pill
   ========================================================= */

/* 1) Hide the original badge text (but keep the pill) */
#editorsPicksSection .weekly-love-badge{
  color: transparent !important;
}

/* 2) Recreate premium wording inside the SAME pill */
#editorsPicksSection .weekly-love-badge::after{
  content: "COLLECTION";
  color: rgba(15, 23, 42, 0.84);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 3) Set each card’s Roman numeral */
#editorsPicksSection .weekly-love-tile:nth-child(1) .weekly-love-badge::after{ content: "COLLECTION I"; }
#editorsPicksSection .weekly-love-tile:nth-child(2) .weekly-love-badge::after{ content: "COLLECTION II"; }
#editorsPicksSection .weekly-love-tile:nth-child(3) .weekly-love-badge::after{ content: "COLLECTION III"; }

/* Dark mode: keep it readable but calm */
body.dark #editorsPicksSection .weekly-love-badge::after{
  color: rgba(248, 250, 252, 0.86);
}
/* =========================================================
   EDITORS PICKS — FIX BADGE CENTERING + FIX META PILL CLIPPING
   SAFE: CSS ONLY (no logic changes)
   ========================================================= */

/* ---------- 1) Fix "COLLECTION I/II/III" pill: center + fully visible ---------- */

/* Keep the pill, but prevent the old text from affecting layout */
#editorsPicksSection .weekly-love-badge{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hide original text without leaving spacing issues */
  font-size: 0 !important;
  line-height: 0 !important;

  /* Ensure the pill has enough room */
  padding: 10px 14px !important;
  min-width: 168px;            /* prevents tight pill */
  max-width: calc(100% - 36px);/* prevents overflow */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Render our premium label centered */
#editorsPicksSection .weekly-love-badge::after{
  position: relative;
  display: inline-block;

  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: rgba(15, 23, 42, 0.84);
  white-space: nowrap;
}

/* Per-card Roman numerals */
#editorsPicksSection .weekly-love-tile:nth-child(1) .weekly-love-badge::after{ content: "COLLECTION I"; }
#editorsPicksSection .weekly-love-tile:nth-child(2) .weekly-love-badge::after{ content: "COLLECTION II"; }
#editorsPicksSection .weekly-love-tile:nth-child(3) .weekly-love-badge::after{ content: "COLLECTION III"; }

/* Dark mode readability */
body.dark #editorsPicksSection .weekly-love-badge::after{
  color: rgba(248, 250, 252, 0.86);
}


/* ---------- 2) Fix bottom place/country pill clipping: more inset + safer radius ---------- */

#editorsPicksSection .weekly-love-tile{
  overflow: hidden; /* keep clean edges */
}

/* Pull the meta pill inward so it doesn't intersect rounded corners */
#editorsPicksSection .weekly-love-meta{
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;

  border-radius: 16px !important; /* slightly tighter than the card */
  padding: 14px 14px 12px !important;

  z-index: 4; /* ensure it's above overlays */
}

/* Optional: keep it from becoming too wide on large cards */
#editorsPicksSection .weekly-love-meta{
  max-width: calc(100% - 36px);
}
/* =========================================================
   EDITORS PICKS — RE-ANCHOR COLLECTION BADGE TO TOP
   SAFE: CSS ONLY | fixes badge drifting to center
   ========================================================= */

/* Force the badge to stay at the TOP of the card */
#editorsPicksSection .weekly-love-badge{
  position: absolute !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Hide original text cleanly */
  font-size: 0 !important;
  line-height: 0 !important;

  padding: 10px 16px !important;
  min-width: 170px;
  max-width: calc(100% - 48px);

  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;

  z-index: 6;
}

/* Render premium text inside the pill */
#editorsPicksSection .weekly-love-badge::after{
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;

  color: rgba(15, 23, 42, 0.84);
}

/* Roman numerals per card */
#editorsPicksSection .weekly-love-tile:nth-child(1) .weekly-love-badge::after{ content: "COLLECTION I"; }
#editorsPicksSection .weekly-love-tile:nth-child(2) .weekly-love-badge::after{ content: "COLLECTION II"; }
#editorsPicksSection .weekly-love-tile:nth-child(3) .weekly-love-badge::after{ content: "COLLECTION III"; }

/* Dark mode tuning */
body.dark #editorsPicksSection .weekly-love-badge::after{
  color: rgba(248, 250, 252, 0.88);
}
/* =========================================================
   EDITORS PICKS — EDITORIAL OFFSET (SLIGHTLY LEFT)
   ========================================================= */

#editorsPicksSection .weekly-love-badge{
  left: 22px !important;        /* editorial offset */
  transform: none !important;  /* remove centering transform */
}
/* =========================================
   HIGHLIGHTS — PREMIUM 7-CARD HERO STRIP (CSS ONLY)
   SAFE: does NOT change logic, just styling
   Targets the highlights strip: #gstMemoryStripRow .gst-mem-chip
   ========================================= */

/* Keep pin/ghost button behavior unchanged */
.gst-map-pop-actions .btn-ghost{
  color: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(148,163,184,0.40) !important;
}
body.dark .gst-map-pop-actions .btn-ghost{
  color: rgba(248,250,252,0.92) !important;
  border-color: rgba(148,163,184,0.22) !important;
}
#gstMapPopPinBtn.is-on{
  border-color: rgba(245, 158, 11, 0.55) !important;
  color: rgba(124, 45, 18, 0.95) !important;
}
body.dark #gstMapPopPinBtn.is-on{
  color: rgba(255, 237, 213, 0.95) !important;
}

/* The Highlights box container (makes it feel intentional) */
.gst-memory-strip{
  padding: 14px 14px 12px !important;
}

/* ---------- Premium strip layout (CENTERED + BIGGER) ---------- */
#gstMemoryStripRow{
  display: flex;
  align-items: center;
  justify-content: center;

  /* smaller gap so 7 fit better */
  gap: 10px;

  /* extra side padding so edge cards aren’t clipped */
  padding: 14px 22px 16px;

  /* keep it all visible, only scroll if someone has a very small screen */
  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-padding-left: 22px;
  scroll-padding-right: 22px;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar (still scrollable) */
#gstMemoryStripRow::-webkit-scrollbar{ height: 8px; }
#gstMemoryStripRow::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.35);
  border-radius: 999px;
}
body.dark #gstMemoryStripRow::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.18);
}

/* ---------- Base card/chip styling ---------- */
#gstMemoryStripRow .gst-mem-chip{
  position: relative;
  flex: 0 0 auto;

  /* default size (overridden below) */
  width: 140px;
  height: 140px;

  border-radius: 20px;
  border: 1px solid rgba(148,163,184,0.28);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  cursor: pointer;
  outline: none;

  scroll-snap-align: center;

  /* Premium motion */
  transition:
    transform 240ms cubic-bezier(.16,1,.3,1),
    box-shadow 240ms cubic-bezier(.16,1,.3,1),
    filter 240ms cubic-bezier(.16,1,.3,1);

  /* Premium shadow */
  box-shadow:
    0 18px 44px rgba(2,6,23,0.10),
    inset 0 1px 0 rgba(255,255,255,0.22);

  filter: saturate(1.05) contrast(1.03);
}

/* Dark mode tuning */
body.dark #gstMemoryStripRow .gst-mem-chip{
  border-color: rgba(148,163,184,0.18);
  box-shadow:
    0 18px 54px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Label: bigger + cleaner */
#gstMemoryStripRow .gst-mem-chip-label{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;

  padding: 8px 10px;
  border-radius: 14px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;

  color: rgba(15,23,42,0.92);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(8px);

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.dark #gstMemoryStripRow .gst-mem-chip-label{
  color: rgba(248,250,252,0.95);
  background: rgba(2,6,23,0.62);
}

/* ---------- 7-card “center hero” sizing (AUTO-FIT: all visible) ---------- */
/* These clamp() sizes scale down on smaller screens so the edge cards stay visible. */

/* 1 & 7: smallest */
#gstMemoryStripRow .gst-mem-chip:nth-child(1),
#gstMemoryStripRow .gst-mem-chip:nth-child(7){
  width: clamp(92px, 8.2vw, 116px);
  height: clamp(92px, 8.2vw, 116px);
  border-radius: 18px;
  opacity: 0.92;
}

/* 2 & 6: small/medium */
#gstMemoryStripRow .gst-mem-chip:nth-child(2),
#gstMemoryStripRow .gst-mem-chip:nth-child(6){
  width: clamp(108px, 9.3vw, 132px);
  height: clamp(108px, 9.3vw, 132px);
  border-radius: 20px;
  opacity: 0.96;
}

/* 3 & 5: medium/large */
#gstMemoryStripRow .gst-mem-chip:nth-child(3),
#gstMemoryStripRow .gst-mem-chip:nth-child(5){
  width: clamp(126px, 10.6vw, 154px);
  height: clamp(126px, 10.6vw, 154px);
  border-radius: 22px;
  opacity: 1;
}

/* 4: center hero (biggest) */
#gstMemoryStripRow .gst-mem-chip:nth-child(4){
  width: clamp(150px, 12.6vw, 182px);
  height: clamp(150px, 12.6vw, 182px);
  border-radius: 26px;

  box-shadow:
    0 30px 84px rgba(2,6,23,0.18),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

/* ---------- Hover motion (premium) ---------- */
#gstMemoryStripRow .gst-mem-chip:hover{
  transform: translateY(-12px) scale(1.05);
  box-shadow:
    0 38px 110px rgba(2,6,23,0.22),
    inset 0 1px 0 rgba(255,255,255,0.30);
  filter: saturate(1.12) contrast(1.07);
  z-index: 2;
}

/* Hero hover: slightly calmer scale */
#gstMemoryStripRow .gst-mem-chip:nth-child(4):hover{
  transform: translateY(-14px) scale(1.03);
}

/* ---------- Pinned badge (kept + polished) ---------- */
#gstMemoryStripRow .gst-mem-chip-badge{
  position: absolute;
  top: 10px;
  right: 10px;

  height: 24px;
  min-width: 24px;
  padding: 0 8px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 12px 28px rgba(2,6,23,0.14);
}
body.dark #gstMemoryStripRow .gst-mem-chip-badge{
  background: rgba(2,6,23,0.70);
  border-color: rgba(148,163,184,0.22);
  color: rgba(248,250,252,0.95);
}

/* Optional pinned outline (safe) */
#gstMemoryStripRow .gst-mem-chip--pinned{
  outline: 2px solid rgba(245, 158, 11, 0.25);
  outline-offset: 3px;
}

/* ===== Premium motion (SAFE) ===== */
.gst-modal,
.gst-place-page{
  animation: gstFadeIn 220ms ease-out;
}

@keyframes gstFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.gst-modal-card,
.gst-place-hero-wrap,
.gst-meta-grid .gst-meta-chip{
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.gst-meta-grid .gst-meta-chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(2,6,23,0.10);
}
body.dark .gst-meta-grid .gst-meta-chip:hover{
  box-shadow: 0 22px 48px rgba(2,6,23,0.34);
}

.btn{
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}
.btn:active{
  transform: translateY(1px);
}
/* ===== Premium typography / spacing (SAFE) ===== */
.gst-place-page-content{
  padding-top: 18px !important;
}

.gst-place-page-desc,
.gst-modal-desc{
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.gst-place-page-title{
  letter-spacing: -0.035em !important;
}

.gst-modal-card--premium .gst-modal-title{
  letter-spacing: -0.03em !important;
}

.gst-place-page-thumbs{
  margin-top: 14px !important;
}
/* =========================================================
   GOSEETHIS — MAP FULLSCREEN HARD OVERRIDE (FINAL)
   This block FORCE-FIXES expand even if earlier CSS conflicts.
   DO NOT REMOVE.
   ========================================================= */

/* Lock page scroll when map is expanded */
body.gst-map-fullscreen{
  overflow: hidden !important;
}

/* Force the map shell to truly go fullscreen */
body.gst-map-fullscreen .gst-map-shell{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  margin: 0 !important;
  border-radius: 0 !important;

  background: #f8fafc !important; /* solid, not transparent */

  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  padding: 18px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Inner panels stay clean and readable */
body.gst-map-fullscreen .gst-map-head,
body.gst-map-fullscreen .gst-map-legend,
body.gst-map-fullscreen .gst-memory-strip,
body.gst-map-fullscreen .gst-map-wrap,
body.gst-map-fullscreen .gst-worldmap-wrap,
body.gst-map-fullscreen .gst-map-container{
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(203, 213, 225, 0.65) !important;
}

/* Map container must fill available space */
body.gst-map-fullscreen .gst-map-wrap,
body.gst-map-fullscreen .gst-worldmap-wrap{
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* SVG sizing — CRITICAL (prevents blur / white fade) */
body.gst-map-fullscreen #profileMapContainer svg,
body.gst-map-fullscreen #gstWorldMapWrap svg{
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  display: block !important;
}
/* =========================================================
   GOSEETHIS — FULLSCREEN MAP SHOW FIX
   Fixes the "blank white fullscreen" by forcing real height.
   ========================================================= */

body.gst-map-fullscreen .gst-worldmap-wrap,
body.gst-map-fullscreen #profileMapContainer,
body.gst-map-fullscreen #gstWorldMapWrap,
body.gst-map-fullscreen .gst-map-container{
  flex: 1 !important;
  min-height: 0 !important;
}

/* Make sure the map wrapper is a real flex box that can grow */
body.gst-map-fullscreen #gstWorldMapWrap,
body.gst-map-fullscreen #profileMapContainer{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Force a minimum visible height so it never collapses */
body.gst-map-fullscreen #gstWorldMapWrap,
body.gst-map-fullscreen #profileMapContainer{
  min-height: 420px !important;
}

/* The SVG MUST have a height in fullscreen */
body.gst-map-fullscreen #gstWorldMapWrap svg,
body.gst-map-fullscreen #profileMapContainer svg{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
/* =========================================================
   MAP POPUP: No tall white frame + open near click/pin
   ========================================================= */

/* Fullscreen click-catcher (transparent) */
.gst-map-pop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;

  /* IMPORTANT: no white frame */
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* hidden by default */
  display: none !important;
}

/* When opened */
.gst-map-pop.is-open{
  display: block !important;
}

/* The actual popup card */
.gst-map-pop .gst-map-sheet{
  position: absolute !important;
  left: 12px;   /* JS will override */
  top: 12px;    /* JS will override */

  width: min(560px, calc(100% - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
}
/* =========================
   Highlights: drag reorder UI
   ========================= */

#gstMemoryStripRow.gst-mem-reordering{
  scroll-snap-type: none !important;
}

#gstMemoryStripRow .gst-mem-chip{
  cursor: grab;
}

#gstMemoryStripRow .gst-mem-chip:active{
  cursor: grabbing;
}

#gstMemoryStripRow .gst-mem-chip--dragging{
  opacity: 0.75;
  transform: translateY(-6px) scale(1.04);
  z-index: 9999;
}
/* =========================================================
   HIGHLIGHTS (Memory Strip) — Drag Reorder Styling
   ========================================================= */

#gstMemoryStripRow .gst-mem-chip{
  cursor: grab;
}

#gstMemoryStripRow .gst-mem-chip:active{
  cursor: grabbing;
}

#gstMemoryStripRow .gst-mem-chip.is-dragging{
  opacity: 0.9;
  transform: translateY(-10px) scale(1.06);

  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.18);

  z-index: 9999;
}

#gstMemoryStripRow .gst-mem-chip.is-over{
  box-shadow:
    inset 0 0 0 2px rgba(99, 102, 241, 0.55),
    0 0 0 6px rgba(99, 102, 241, 0.08);
}
/* =========================
   Premium drag smoothness
   ========================= */

#gstMemoryStripRow .gst-mem-chip{
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms ease,
    opacity 120ms ease;
}
/* =========================
   Highlight drop settle animation
   ========================= */

@keyframes gst-highlight-settle {
  0% {
    transform: translateY(-6px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

#gstMemoryStripRow .gst-mem-chip{
  animation: gst-highlight-settle 180ms ease;
}
/* =========================================================
   PROFILE — PREMIUM HEADER + PREMIUM TABS
   SAFE OVERRIDE (PASTE AT VERY END OF style.css)
   ========================================================= */

/* Premium profile container polish */
.gst-profile-premium{
  border-radius: 18px;
}

/* ---------- Premium header ---------- */
.gst-profile-header{
  display:flex;
  gap:14px;
  align-items:center;
  padding: 6px 2px 10px;
}

.gst-profile-avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:0.08em;
  font-size:12px;
  border:1px solid rgba(148,163,184,0.25);
  background:rgba(255,255,255,0.7);
  box-shadow:0 10px 25px rgba(2,6,23,0.12);
}

body.dark .gst-profile-avatar{
  background:rgba(2,6,23,0.55);
  border-color:rgba(148,163,184,0.18);
  box-shadow:0 16px 42px rgba(0,0,0,0.45);
}

.gst-profile-headtext{
  flex:1;
  min-width:0;
}

.gst-profile-name{
  font-size:14px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.gst-profile-subline{
  margin-top:4px;
  font-size:12px;
  color:var(--text-muted);
}

.gst-profile-chips{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.gst-profile-chip{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(148,163,184,0.25);
  background:rgba(15,23,42,0.05);
}

body.dark .gst-profile-chip{
  background:rgba(226,232,240,0.08);
  border-color:rgba(148,163,184,0.18);
}

.gst-profile-chip.subtle{
  opacity:0.85;
}

/* Hide legacy profile messages (JS still updates them) */
.gst-profile-hidden-meta{
  display:none !important;
}

/* ---------- Premium micro-map preview (subtle “flex”) ---------- */
.gst-profile-mappeek{
  width:100%;
  margin-top:6px;
  padding:8px 10px 8px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.14);
  background: rgba(148,163,184,0.03);
  text-align:left;
  cursor:pointer;
  display:block;
  position:relative;
  overflow:hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.gst-profile-mappeek:hover{
  transform: translateY(-1px);
  border-color: rgba(148,163,184,0.22);
  box-shadow: 0 10px 26px rgba(2,6,23,0.08);
}

body.dark .gst-profile-mappeek{
  background: rgba(255,255,255,0.025);
  border-color: rgba(148,163,184,0.12);
}

body.dark .gst-profile-mappeek:hover{
  box-shadow: 0 16px 44px rgba(0,0,0,0.34);
}

.gst-profile-mappeek-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.gst-profile-mappeek-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:-0.01em;
  color: var(--text-main);
}

.gst-profile-mappeek-meta{
  font-size:11px;
  font-weight:800;
  color: var(--text-muted);
  white-space:nowrap;
  opacity:0.92;
}

/* ✅ Very thin cinematic strip */
.gst-profile-mappeek-strip{
  margin-top:8px;
  height:26px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(120px 60px at 10% 40%, rgba(99,102,241,0.07), rgba(0,0,0,0)),
    radial-gradient(140px 70px at 90% 60%, rgba(56,189,248,0.06), rgba(0,0,0,0)),
    rgba(255,255,255,0.55);
  border:1px solid rgba(148,163,184,0.12);
}

body.dark .gst-profile-mappeek-strip{
  background:
    radial-gradient(120px 60px at 10% 40%, rgba(99,102,241,0.12), rgba(0,0,0,0)),
    radial-gradient(140px 70px at 90% 60%, rgba(56,189,248,0.09), rgba(0,0,0,0)),
    rgba(2,6,23,0.28);
  border-color: rgba(148,163,184,0.10);
}

/* soft edge fades */
.gst-profile-mappeek-strip::before,
.gst-profile-mappeek-strip::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:26px;
  pointer-events:none;
  z-index:2;
}

.gst-profile-mappeek-strip::before{
  left:0;
  background: linear-gradient(90deg, rgba(248,250,252,0.92), rgba(248,250,252,0));
}

.gst-profile-mappeek-strip::after{
  right:0;
  background: linear-gradient(270deg, rgba(248,250,252,0.92), rgba(248,250,252,0));
}

body.dark .gst-profile-mappeek-strip::before{
  background: linear-gradient(90deg, rgba(2,6,23,0.92), rgba(2,6,23,0));
}

body.dark .gst-profile-mappeek-strip::after{
  background: linear-gradient(270deg, rgba(2,6,23,0.92), rgba(2,6,23,0));
}

.gst-profile-mappeek-canvas{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  display:flex;
  align-items:center;
}

.gst-profile-mappeek-canvas svg{
  width: 125%;
  height: auto;
  transform: translateX(-8%);
  opacity: 0.40;
  filter: saturate(0) contrast(0.92);
}

.gst-profile-mappeek-placeholder{
  width:100%;
  height:100%;
  opacity:0.55;
  background:
    radial-gradient(circle at 20% 55%, rgba(148,163,184,0.26) 1px, rgba(0,0,0,0) 2px) 0 0 / 18px 18px,
    radial-gradient(circle at 72% 35%, rgba(148,163,184,0.18) 1px, rgba(0,0,0,0) 2px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(148,163,184,0.04), rgba(148,163,184,0.00));
}

/* ---------- PREMIUM MAIN TABS ---------- */
.profile-subtabs.gst-profile-subtabs-premium{
  display:flex;
  gap:6px;
  padding:6px;
  margin:10px 0;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.22);
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 28px rgba(2,6,23,0.12);
}

body.dark .profile-subtabs.gst-profile-subtabs-premium{
  background:rgba(2,6,23,0.4);
  border-color:rgba(148,163,184,0.16);
  box-shadow:0 18px 50px rgba(0,0,0,0.45);
}

.profile-subtabs.gst-profile-subtabs-premium .profile-subtab-btn{
  flex:1;
  border:none;
  background:transparent;
  border-radius:12px;
  padding:10px 8px;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.85;
  cursor:pointer;
  transition:all 160ms ease;
}

.profile-subtabs.gst-profile-subtabs-premium .profile-subtab-btn:hover{
  background:rgba(15,23,42,0.06);
  opacity:1;
  transform:translateY(-1px);
}

body.dark .profile-subtabs.gst-profile-subtabs-premium .profile-subtab-btn:hover{
  background:rgba(226,232,240,0.08);
}

.profile-subtabs.gst-profile-subtabs-premium .profile-subtab-btn.is-active{
  background:rgba(37,99,235,0.16);
  opacity:1;
}

/* Panels */
.profile-subtab-panel{
  display:none;
}

.profile-subtab-panel.is-active{
  display:block;
}

/* =========================================================
   PROFILE TABS — ANIMATED PANEL TRANSITIONS (PREMIUM)
   FIXED — NO FOOTER CLIPPING
   SAFE OVERRIDE (PASTE AT VERY END OF style.css)
   ========================================================= */

.profile-subtab-panel{
  display: block !important;

  /* hidden state */
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
  pointer-events: none;

  /* smooth premium motion */
  transition:
    max-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease,
    transform 220ms ease;

  will-change: max-height, opacity, transform;
}

.profile-subtab-panel.is-active{
  /* VERY large cap so long itineraries never clip */
  max-height: 20000px;

  opacity: 1;
  transform: translateY(0);
  overflow: visible;
  pointer-events: auto;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .profile-subtab-panel{
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   PROFILE HEADER — REMOVE AVATAR + STATS (PREMIUM CLEAN)
   SAFE OVERRIDE (PASTE AT VERY END OF style.css)
   ========================================================= */

/* Remove circular initials avatar */
.gst-profile-avatar{
  display: none !important;
}

/* Remove Saved / Contributed chips row */
.gst-profile-chips{
  display: none !important;
}

/* Tighten header spacing after removal */
.gst-profile-header{
  gap: 0 !important;
  padding-bottom: 6px !important;
}

/* Make name feel more premium when alone */
.gst-profile-name{
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
}

/* Subline spacing polish */
.gst-profile-subline{
  margin-top: 6px !important;
  font-size: 12.5px !important;
}
/* =========================================================
   PROFILE HEADER — REMOVE "TRAVELER" TITLE
   SAFE OVERRIDE
   ========================================================= */

/* Hide the old title line completely */
.gst-profile-name{
  display: none !important;
}

/* Make the subtitle look premium as the main line */
.gst-profile-subline{
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-main) !important;
  margin-top: 6px !important;
}
/* =========================================================
   SHARE MODAL — PREMIUM (CENTER)
   ========================================================= */

body.gst-modal-open{
  overflow: hidden;
}

.gst-share-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.gst-share-modal.is-open{
  display: flex;
}

.gst-share-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
}

.gst-share-sheet{
  position: relative;
  width: min(420px, 100%);
  background: var(--card-bg, #fff);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 22px 70px rgba(0,0,0,0.40);
  border: 1px solid rgba(148,163,184,0.22);
  z-index: 1;

  transform: translateY(10px) scale(0.985);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.gst-share-modal.is-open .gst-share-sheet{
  transform: translateY(0) scale(1);
  opacity: 1;
}

body.dark .gst-share-sheet{
  background: rgba(2,6,23,0.92);
  border-color: rgba(148,163,184,0.18);
}

.gst-share-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.gst-share-header h3{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gst-share-close{
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(148,163,184,0.10);
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.9;
}

body.dark .gst-share-close{
  background: rgba(148,163,184,0.12);
  border-color: rgba(148,163,184,0.18);
}

.gst-share-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gst-share-option{
  border: 1px solid rgba(148,163,184,0.25);
  background: transparent;
  border-radius: 16px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.gst-share-option:hover{
  transform: translateY(-1px);
  border-color: rgba(148,163,184,0.40);
  background: rgba(148,163,184,0.08);
}

.gst-share-option.primary{
  background: rgba(37,99,235,0.12);
  border-color: rgba(37,99,235,0.38);
}

.gst-share-option-title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.gst-share-option-sub{
  font-size: 12px;
  opacity: 0.82;
  margin-top: 4px;
  line-height: 1.35;
}

/* =========================================================
   ONE-TIME EARNED NUDGE (Premium toast)
   ========================================================= */
@keyframes gstToastIn {
  from { opacity: 0; transform: translate3d(-50%, 10px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}

@keyframes gstToastOut {
  from { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  to   { opacity: 0; transform: translate3d(-50%, 10px, 0) scale(0.985); }
}

.gst-earned-nudge{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 60px rgba(2,6,23,0.16),
    inset 0 1px 0 rgba(255,255,255,0.55);

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  animation: gstToastIn 220ms ease forwards;
}

.gst-earned-nudge.is-leaving{
  animation: gstToastOut 220ms ease forwards;
}

.gst-earned-nudge-text{
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,0.92);
}

.gst-earned-nudge-cta{
  font-size: 12px;
  font-weight: 900;
  color: rgba(37,99,235,0.92);
  white-space: nowrap;
}

body.dark .gst-earned-nudge{
  border-color: rgba(226,232,240,0.16);
  background: rgba(15,23,42,0.62);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

body.dark .gst-earned-nudge-text{
  color: rgba(226,232,240,0.92);
}

body.dark .gst-earned-nudge-cta{
  color: rgba(147,197,253,0.95);
}

/* =========================================================
   ONE-TIME EARNED NUDGE (Premium toast)
   ========================================================= */
@keyframes gstToastIn {
  from { opacity: 0; transform: translate3d(-50%, 10px, 0) scale(0.98); }
  to   { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}

@keyframes gstToastOut {
  from { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  to   { opacity: 0; transform: translate3d(-50%, 10px, 0) scale(0.985); }
}

.gst-earned-nudge{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 60px rgba(2,6,23,0.16),
    inset 0 1px 0 rgba(255,255,255,0.55);

  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  animation: gstToastIn 220ms ease forwards;
}

.gst-earned-nudge.is-leaving{
  animation: gstToastOut 220ms ease forwards;
}

.gst-earned-nudge-text{
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,0.92);
}

.gst-earned-nudge-cta{
  font-size: 12px;
  font-weight: 900;
  color: rgba(37,99,235,0.92);
  white-space: nowrap;
}

body.dark .gst-earned-nudge{
  border-color: rgba(226,232,240,0.16);
  background: rgba(15,23,42,0.62);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

body.dark .gst-earned-nudge-text{
  color: rgba(226,232,240,0.92);
}

body.dark .gst-earned-nudge-cta{
  color: rgba(147,197,253,0.95);
}
/* =========================================================
   PREMIUM DARK MODE — GLOBAL ENHANCEMENTS
   Goal: when body has .dark, EVERYTHING feels intentional.
   Safe: mostly overrides; does not change your JS logic.
   ========================================================= */

/* Cinematic background (subtle, premium) */
body.dark{
  background: radial-gradient(1200px 800px at 20% -10%, rgba(56, 189, 248, 0.10), rgba(2,6,23,0) 55%),
              radial-gradient(900px 650px at 90% 10%, rgba(217, 119, 6, 0.10), rgba(2,6,23,0) 55%),
              linear-gradient(180deg, var(--page-bg) 0%, #020617 100%) !important;
  color: var(--text-main) !important;
}

/* Make common “white surfaces” become dark glass */
body.dark header,
body.dark .site-header,
body.dark .topbar,
body.dark .topbar-inner,
body.dark .tab-panels,
body.dark .tab-panel,
body.dark .panel,
body.dark .card,
body.dark .modal,
body.dark .modal-card,
body.dark .admin-modal-card,
body.dark .gst-legal-modal,
body.dark .gst-claim-card,
body.dark .gst-claim-hero,
body.dark .gst-helpful-card,
body.dark .gst-affiliates-module{
  background: var(--surface-elevated) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-main) !important;
}

/* Top bar + tabs */
body.dark .topbar{
  border-bottom: 1px solid var(--border-soft) !important;
  box-shadow: 0 16px 60px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(10px);
}

body.dark .tab-btn{
  background: rgba(148,163,184,0.08) !important;
  border-color: rgba(148,163,184,0.14) !important;
  color: rgba(241,245,249,0.92) !important;
}
body.dark .tab-btn:hover{
  background: rgba(148,163,184,0.12) !important;
}
body.dark .tab-btn.active{
  background: rgba(15, 118, 110, 0.18) !important;
  border-color: rgba(15, 118, 110, 0.35) !important;
  color: rgba(241,245,249,0.96) !important;
}
body.dark.accent-gold .tab-btn.active{
  background: rgba(217, 119, 6, 0.18) !important;
  border-color: rgba(217, 119, 6, 0.38) !important;
}

/* Theme menu panel */
body.dark .theme-menu-panel{
  background: rgba(11,18,32,0.88) !important;
  border: 1px solid rgba(148,163,184,0.16) !important;
  box-shadow: 0 26px 85px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(14px);
}
body.dark .theme-menu-item{
  color: rgba(241,245,249,0.92) !important;
}
body.dark .theme-menu-item:hover{
  background: rgba(148,163,184,0.10) !important;
}

/* Inputs / selects / textareas (big dark-mode improvement) */
body.dark input,
body.dark select,
body.dark textarea{
  background: rgba(2,6,23,0.55) !important;
  border: 1px solid rgba(148,163,184,0.18) !important;
  color: rgba(241,245,249,0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.dark input::placeholder,
body.dark textarea::placeholder{
  color: rgba(148,163,184,0.70) !important;
}
body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus{
  outline: none !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12) !important;
}

/* Links */
body.dark a{
  color: rgba(147, 197, 253, 0.95);
}
body.dark a:hover{
  color: rgba(191, 219, 254, 0.95);
}

/* Footer */
body.dark footer,
body.dark .site-footer-minimal{
  border-top: 1px solid rgba(148,163,184,0.14) !important;
  background: rgba(2,6,23,0.70) !important;
}
body.dark .footer-link{
  color: rgba(241,245,249,0.86) !important;
}
body.dark .footer-link:hover{
  background: rgba(148,163,184,0.10) !important;
}

/* Pills / chips */
body.dark .region-pill,
body.dark .theme-pill,
body.dark .tag-pill,
body.dark .badge,
body.dark .chip,
body.dark .chip-btn{
  background: rgba(148,163,184,0.10) !important;
  border-color: rgba(148,163,184,0.16) !important;
  color: rgba(241,245,249,0.90) !important;
}
body.dark .region-pill.active,
body.dark .theme-pill.active,
body.dark .chip-btn.active{
  background: var(--accent-soft) !important;
  border-color: rgba(15, 118, 110, 0.35) !important;
}
body.dark.accent-gold .region-pill.active,
body.dark.accent-gold .theme-pill.active,
body.dark.accent-gold .chip-btn.active{
  border-color: rgba(217, 119, 6, 0.38) !important;
}

/* Buttons */
body.dark .btn,
body.dark button.btn,
body.dark .save-btn,
body.dark .map-btn{
  box-shadow: 0 18px 50px rgba(0,0,0,0.25) !important;
}

/* Modal overlays should be darker + cleaner */
body.dark .gst-legal-overlay,
body.dark .admin-modal-backdrop{
  background: rgba(0,0,0,0.62) !important;
}

/* Reduce harsh dividers */
body.dark hr,
body.dark .divider,
body.dark .profile-divider{
  border-color: rgba(148,163,184,0.14) !important;
}

/* =========================================================
   EXPLORE MAP ARTIFACT STRIP (Premium, whisper label + counts)
   - Shows ONLY when visited > 0 OR contributed > 0 (controlled by JS)
   - Tap opens Profile → MAP
   ========================================================= */
#gstExploreMapArtifact.gst-explore-mapartifact{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 10px 12px;
  margin: 12px 0 14px 0;

  cursor: pointer;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 14px 34px rgba(2,6,23,0.10),
    inset 0 1px 0 rgba(255,255,255,0.55);

  transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#gstExploreMapArtifact.gst-explore-mapartifact:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,0.18);
  box-shadow:
    0 18px 44px rgba(2,6,23,0.12),
    inset 0 1px 0 rgba(255,255,255,0.62);
}

#gstExploreMapArtifact.gst-explore-mapartifact:active{
  transform: translateY(0px) scale(0.995);
}

/* whisper row */
.gst-explore-mapartifact-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.gst-explore-mapartifact-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:-0.01em;
  color: rgba(15,23,42,0.92);
}

.gst-explore-mapartifact-meta{
  font-size:11px;
  font-weight:800;
  color: rgba(15,23,42,0.55);
  white-space:nowrap;
}

/* The ultra-thin “artifact” strip */
.gst-explore-mapartifact-strip{
  height: 26px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;

  /* soft fade edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);

  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.04),
    rgba(15,23,42,0.02),
    rgba(15,23,42,0.04)
  );
}

/* Canvas where we clone the real SVG (never clickable) */
.gst-explore-mapartifact-canvas{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make the cloned SVG fit the thin strip */
.gst-explore-mapartifact-canvas svg{
  width: 120%;
  height: auto;
  opacity: 0.55;
  transform: translateY(-6px);
}

/* Placeholder if SVG isn’t ready yet */
.gst-explore-mapartifact-placeholder{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 30%, rgba(59,130,246,0.14), transparent 48%),
    radial-gradient(circle at 70% 60%, rgba(16,185,129,0.12), transparent 52%),
    linear-gradient(90deg, rgba(15,23,42,0.06), rgba(15,23,42,0.02), rgba(15,23,42,0.06));
}

/* Dark mode */
body.dark #gstExploreMapArtifact.gst-explore-mapartifact{
  background: rgba(15,23,42,0.60);
  border-color: rgba(226,232,240,0.14);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

body.dark .gst-explore-mapartifact-title{
  color: rgba(226,232,240,0.92);
}

body.dark .gst-explore-mapartifact-meta{
  color: rgba(226,232,240,0.58);
}

body.dark .gst-explore-mapartifact-strip{
  background: linear-gradient(
    90deg,
    rgba(226,232,240,0.10),
    rgba(226,232,240,0.06),
    rgba(226,232,240,0.10)
  );
}

body.dark .gst-explore-mapartifact-canvas svg{
  opacity: 0.50;
}
/* ===============================
   AUTH (Magic link) — Profile Cloud Sync
   =============================== */
.gst-auth-card{
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(148,163,184,0.06);
}

body.dark .gst-auth-card{
  background: rgba(255,255,255,0.04);
  border-color: rgba(148,163,184,0.20);
}

.gst-auth-title{
  font-weight: 900;
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 4px;
}

.gst-auth-sub{
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 10px;
}

.gst-auth-label{
  display:block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.gst-auth-row{
  display:flex;
  gap: 10px;
  align-items: center;
}

.gst-auth-input{
  flex: 1;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.35);
  background: transparent;
  color: var(--text-main);
}

body.dark .gst-auth-input{
  border-color: rgba(148,163,184,0.28);
}

.gst-auth-btn{
  white-space: nowrap;
}

.gst-auth-hint{
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.gst-auth-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.gst-auth-action.danger{
  border-color: rgba(239,68,68,0.35) !important;
}

.gst-auth-status{
  margin-top: 10px;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(148,163,184,0.08);
  color: var(--text-main);
}