/* ═══════════════════════════════════════════════════════════════════════
   PixAfar Globe Experience — Styles
   Dark premium design with gold (#c9973b) accent
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces — dark to light progression */
  --bg:            #0b0d12;
  --surface:       #121218;
  --surface-2:     #1a1a24;
  --surface-3:     #22222e;

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-subtle: rgba(255,255,255,0.05);
  --border-gold:   rgba(201,151,59,0.25);

  /* Brand */
  --gold:          #c9973b;
  --gold-light:    #e0b05a;
  --gold-warm:     #f0d28a;
  --gold-glow:     rgba(201,151,59,0.22);
  --teal:          #5bc49f;
  --blue:          #8db4d6;
  --ocean:         #4a90c4;
  --danger:        #f66;

  /* Text */
  --text:          #f0f0f0;
  --text-secondary: #b0b0b0;
  --text-muted:    #888;
  --text-dim:      #555;
  --success:       #7cd9b3;

  /* Type scale — modular (1.2 ratio, base 14px) */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;

  /* Spacing scale — 4px base grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radius scale */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-pill: 999px;

  /* Shadows — layered depth system */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.5);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.6);
  --shadow-gold: 0 4px 20px rgba(201,151,59,0.2);

  /* Layout */
  --panel-w:       340px;
  --panel-r:       var(--r-lg);
  --hdr-h:         52px;

  /* Easing */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Ensure [hidden] always hides regardless of CSS display overrides */
[hidden] { display: none !important; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Loading screen ─────────────────────────────────────────────────────── */
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.loading-screen.is-hidden {
  opacity: 0; pointer-events: none; visibility: hidden;
}
.loading-inner { text-align: center; }
.loading-logo {
  font-size: 36px; font-weight: 700; letter-spacing: -1px;
  margin-bottom: 24px;
}
.loading-text {
  color: var(--text-muted); font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 20px;
}
.loading-bar-track {
  width: 200px; height: 2px;
  background: var(--surface-3);
  border-radius: 2px; overflow: hidden;
  margin: 0 auto;
}
.loading-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  animation: loadBar 2.5s var(--ease) forwards;
}
@keyframes loadBar { from { width: 0 } to { width: 90% } }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hdr-h);
  z-index: 500;
  background: rgba(11,13,18,0.85);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  height: 100%; padding: 0 20px;
}
.header-logo {
  text-decoration: none;
  font-size: 18px; font-weight: 700; letter-spacing: -0.5px;
  flex-shrink: 0;
}
.logo-pix  { color: var(--text); }
.logo-afar { color: var(--gold); }

.header-hint {
  flex: 1; text-align: center;
  font-size: 12px; color: var(--text-muted);
  letter-spacing: 0.3px;
  transition: opacity 0.3s;
}

/* ── View toggle ─────────────────────────────────────────────────────────── */
.view-toggle {
  display: flex; gap: 4px; flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.toggle-btn {
  background: none; border: none;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.toggle-btn.is-active {
  background: var(--gold);
  color: #0b0d12;
}
.toggle-btn:hover:not(.is-active) { color: var(--text); }

/* ── Globe stage ─────────────────────────────────────────────────────────── */
.globe-stage, .map-stage {
  position: fixed;
  inset: 0;
  top: var(--hdr-h);
}
/* Globe.gl injects a canvas — make it fill fully */
.globe-stage canvas { width: 100% !important; height: 100% !important; display: block; }

/* ── Mode switching ──────────────────────────────────────────────────────── */
[data-mode="globe"] .globe-stage { display: block; }
[data-mode="globe"] .map-stage   { display: none; }
[data-mode="map"]   .globe-stage { display: none; }
[data-mode="map"]   .map-stage   { display: block; }

/* Hide globe-only elements in map mode */
[data-mode="map"] .flight-overlay,
[data-mode="map"] .panel-hint { display: none; }

/* ── Leaflet dark override ───────────────────────────────────────────────── */
/* NOTE: L.map() initializes ON #map-container, not INSIDE it, so
   `.leaflet-container` lands on the SAME element as `.map-stage`.
   Use no-space selector (compound class), not descendant combinator. */
.map-stage.leaflet-container,
.leaflet-container {
  background: var(--bg) !important;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.map-stage.leaflet-container {
  height: 100%; width: 100%;
}
.leaflet-popup-content-wrapper {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  color: var(--text);
}
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 14px 16px; font-size: 13px; }
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out { color: var(--text) !important; }

/* ── Photo marker pins (flat map) ────────────────────────────────────────── */
.photo-marker { background: none; border: none; }
.photo-marker-inner {
  width: 56px; height: 56px;
  border-radius: 50% 50% 50% 0;
  border: 2.5px solid var(--gold);
  overflow: hidden;
  transform: rotate(-45deg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 3px var(--gold-glow);
  background: var(--surface-2);
  transition: border-color 0.2s, transform 0.2s var(--ease-spring), box-shadow 0.2s;
  cursor: pointer;
}
.photo-marker-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: rotate(45deg);
  display: block;
}
.photo-marker-inner.is-featured { border-color: #fff; box-shadow: 0 4px 20px rgba(255,255,255,0.25); }

/* ── Control panels (glassmorphism) ──────────────────────────────────────── */
.control-panel {
  position: fixed;
  top: calc(var(--hdr-h) + 24px);
  width: var(--panel-w);
  background: rgba(14,15,22,0.88);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--border-gold);
  border-radius: var(--panel-r);
  z-index: 200;
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease);
}
/* NOTE: .panel-from was removed when per-gallery from_mode replaced the live
   departure picker. The .panel-to positioning lives further down under the
   "PANEL-TO POSITIONING" section. */
.panel-to {
  opacity: 0; pointer-events: none;
  transform: translateX(20px);
}
.panel-to.is-visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
.panel-inner { padding: 22px 20px 20px; }

/* panel-step-badge: consolidated into the polish block. Keeping the
   text-transform:none override from UX5 + the polish block's token-based
   version as the single source of truth. */
/* panel-step-badge + panel-title: see consolidated versions in polish block */
.panel-hint { font-size: 11px; color: var(--text-dim); margin-top: 10px; text-align: center; }

/* Fade panels during flight */
.panels-hidden .control-panel { opacity: 0; pointer-events: none; }

/* ── Location input ──────────────────────────────────────────────────────── */
.input-wrap { position: relative; }
.location-input {
  width: 100%;
  padding: 11px 40px 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,151,59,0.3);
  border-radius: 9px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.location-input::placeholder { color: var(--text-dim); }
.location-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
/* Remove browser search-cancel button */
.location-input::-webkit-search-cancel-button { display: none; }
.input-spinner {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.input-spinner.is-active { opacity: 1; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── Suggestions dropdown ────────────────────────────────────────────────── */
.suggestions-list {
  list-style: none;
  margin-top: 6px;
  background: rgba(16,16,24,0.98);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s var(--ease), opacity 0.2s;
}
.suggestions-list.is-open {
  max-height: 320px;
  opacity: 1;
  overflow-y: auto;
}
.suggestion-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover,
.suggestion-item[aria-selected="true"] { background: rgba(201,151,59,0.1); }
.suggestion-thumb {
  width: 50px; height: 38px;
  object-fit: cover; border-radius: 5px;
  flex-shrink: 0; background: var(--surface-3);
}
.suggestion-text { flex: 1; min-width: 0; }
.suggestion-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-sub {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Input error ─────────────────────────────────────────────────────────── */
.panel-error {
  font-size: 12px; color: #f06; margin-top: 6px;
  min-height: 16px;
}

/* ── Confirmed location state ────────────────────────────────────────────── */
.confirmed-loc {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(201,151,59,0.08);
  border: 1px solid var(--border-gold);
  border-radius: 9px;
}
.confirmed-icon { font-size: 16px; flex-shrink: 0; }
.confirmed-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--gold); }
.confirmed-change {
  background: none; border: none;
  font-size: 11px; color: var(--text-muted);
  cursor: pointer; padding: 2px 6px;
  border-radius: 4px; transition: color 0.2s, background 0.2s;
  text-decoration: underline; text-underline-offset: 2px;
}
.confirmed-change:hover { color: var(--text); background: rgba(255,255,255,0.05); }

/* ── Flight overlay banner ───────────────────────────────────────────────── */
.flight-overlay {
  position: fixed;
  top: calc(var(--hdr-h) + 16px);
  left: 50%; transform: translateX(-50%) translateY(-12px);
  background: rgba(8,9,14,0.94);
  border: 1px solid rgba(201,151,59,0.45);
  border-radius: 40px;
  padding: 12px 24px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 500; color: var(--text);
  z-index: 400;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: nowrap;
}
.flight-overlay.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.flight-plane {
  font-size: 18px;
  display: inline-block;
  animation: planeBob 1.1s ease-in-out infinite alternate;
}
@keyframes planeBob {
  from { transform: translateY(0) rotate(45deg); }
  to   { transform: translateY(-5px) rotate(45deg); }
}
.flight-label-from, .flight-label-to { color: var(--gold); font-weight: 700; }
.flight-arrow { color: var(--text-muted); }

/* ── Destination panel ───────────────────────────────────────────────────── */
.destination-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 68vh;
  background: linear-gradient(
    180deg,
    rgba(11,13,18,0.0)   0%,
    rgba(11,13,18,0.97)  6%,
    rgba(11,13,18,1.0)  10%
  );
  transform: translateY(100%);
  transition: transform 0.55s var(--ease);
  z-index: 300;
  overflow-y: auto;
  border-top: 1px solid var(--border-gold);
  overscroll-behavior: contain;
}
.destination-panel.is-open { transform: translateY(0); }

.dest-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky; top: 0;
  background: rgba(11,13,18,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
}
.dest-back {
  background: none; border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 12px;
  font-size: 12px; color: var(--text-muted);
  cursor: pointer; flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}
.dest-back:hover { border-color: var(--gold); color: var(--text); }
.dest-location-info { flex: 1; min-width: 0; }
/* dest-city + dest-country: consolidated into the polish block below.
   Keeping overflow/ellipsis here as it's structural, not visual. */
.dest-city {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dest-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dest-star-btn {
  background: none;
  border: 1px solid var(--border-gold);
  border-radius: 7px; padding: 7px 12px;
  font-size: 12px; color: var(--gold);
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background 0.2s, border-color 0.2s;
}
.dest-star-btn:hover { background: var(--gold-glow); }
.dest-star-btn.is-starred { background: var(--gold-glow); }
.dest-star-btn.is-starred .star-icon::before { content: '★'; }
.star-icon { font-size: 14px; }
.star-label { font-size: 11px; }
/* "Open full gallery" link — hidden while the Globe app IS the gallery
   viewer. Re-enable when deployed to production with a real domain by
   removing this display:none. The markup stays in index.html so it's
   a one-line CSS change to bring it back. */
.dest-view-full {
  display: none;
  background: var(--gold); color: #0b0d12;
  border-radius: 7px; padding: 8px 14px;
  font-size: 12px; font-weight: 700;
  text-decoration: none; flex-shrink: 0;
  transition: background 0.2s;
  white-space: nowrap;
}
.dest-view-full:hover { background: var(--gold-light); }

.dest-meta {
  padding: 8px 24px 4px;
  font-size: 12px; color: var(--text-muted);
}
.dest-photographer { color: var(--text); font-weight: 600; margin-left: 4px; }

/* ── Photo grid ──────────────────────────────────────────────────────────── */
.dest-photo-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 14px 20px 48px;
}
.photo-card { border-radius: 9px; overflow: hidden; background: var(--surface-3); }
.photo-card-btn {
  display: block; width: 100%;
  aspect-ratio: 4/3;
  padding: 0; border: none; background: none;
  cursor: pointer; overflow: hidden;
}
.photo-card-btn img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.35s var(--ease), filter 0.25s;
  filter: brightness(0.9);
}
.photo-card-btn:hover img { transform: scale(1.06); filter: brightness(1.05); }
.photo-card-btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
/* Video badge */
.photo-card { position: relative; }
.photo-card-video-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.7); border-radius: 4px;
  padding: 2px 6px; font-size: 10px; color: #fff;
  pointer-events: none;
}

/* ── Destination loading dots ───────────────────────────────────────────── */
.dest-loading {
  display: flex; justify-content: center;
  padding: 40px 0;
}
.dest-loading.is-hidden { display: none; }
.dest-loading-dots { display: flex; gap: 8px; }
.dest-loading-dots span {
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  animation: dotPulse 1.2s ease-in-out infinite;
}
.dest-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.dest-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.2); }
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.93);
}
.lightbox-img-wrap {
  position: relative; z-index: 1;
  max-width: min(90vw, 1200px);
  max-height: 85vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-img {
  max-width: 100%; max-height: 85vh;
  object-fit: contain; display: block;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}
.lightbox-close {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.1); border: none;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 18px; color: #fff;
  cursor: pointer; z-index: 2;
  transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 20px; color: #fff;
  cursor: pointer; z-index: 2;
  transition: background 0.2s;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.18); }
.lightbox-caption {
  position: absolute; bottom: 56px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px; color: rgba(255,255,255,0.6);
  z-index: 2; text-align: center;
  max-width: 480px; pointer-events: none;
}
.lightbox-counter {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px; color: rgba(255,255,255,0.4);
  z-index: 2; pointer-events: none;
}

/* ── Globe tooltip (rendered inside Globe.gl's element) ──────────────────── */
.globe-tooltip {
  background: rgba(10,11,18,0.95);
  border: 1px solid rgba(201,151,59,0.5);
  border-radius: 10px;
  padding: 10px;
  max-width: 190px;
  font-size: 12px;
  color: var(--text);
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.globe-tooltip img {
  width: 100%; height: 76px;
  object-fit: cover; border-radius: 6px;
  display: block; margin-bottom: 8px;
}
.globe-tooltip-name {
  font-size: 12px; font-weight: 700; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.globe-tooltip-sub {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Leaflet popup content ───────────────────────────────────────────────── */
.map-popup { min-width: 200px; }
.map-popup-img {
  width: 100%; height: 100px;
  object-fit: cover; border-radius: 7px;
  margin-bottom: 10px; display: block;
  background: var(--surface-3);
}
.map-popup-name { font-size: 14px; font-weight: 700; color: var(--gold); margin-bottom: 2px; }
.map-popup-sub  { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.map-popup-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map-popup-btn {
  background: var(--gold); color: #0b0d12;
  border: none; border-radius: 6px;
  padding: 7px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}
.map-popup-btn:hover { background: var(--gold-light); }
.map-popup-star {
  background: none;
  border: 1px solid var(--border-gold);
  border-radius: 6px; padding: 7px 10px;
  font-size: 14px; color: var(--gold);
  cursor: pointer; transition: background 0.2s;
}
.map-popup-star:hover { background: var(--gold-glow); }
.map-popup-star.is-starred { background: var(--gold-glow); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --panel-w: calc(100vw - 32px); }

  .panel-to   { left: 16px; right: 16px; top: auto; bottom: 16px; }
  .panel-to.is-visible { transform: translateY(0); }

  .header-hint { display: none; }
  .star-label  { display: none; }

  .destination-panel { height: 80vh; }
  .dest-photo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; padding: 10px 12px 40px; }

  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }

  .dest-view-full { font-size: 11px; padding: 7px 10px; }
}

@media (max-width: 480px) {
  .dest-header { flex-wrap: wrap; }
  .dest-city { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   LOGIN OVERLAY
   ════════════════════════════════════════════════════════════════════════ */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(11,13,18,0.96) 0%, rgba(5,6,10,0.99) 70%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: loginFade 280ms ease;
}
@keyframes loginFade { from { opacity: 0; } to { opacity: 1; } }

.login-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(26,26,30,0.92), rgba(18,18,22,0.92));
  border: 1px solid rgba(201,151,59,0.32);
  border-radius: 18px;
  padding: 36px 32px 28px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 80px rgba(201,151,59,0.08);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.login-logo {
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 30px;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.login-logo .logo-pix  { color: #f0f0f0; font-weight: 600; }
.login-logo .logo-afar { color: var(--gold); font-weight: 600; }
.login-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,151,59,0.4);
  border-radius: 4px;
  padding: 2px 8px;
  vertical-align: middle;
}

.login-title {
  margin: 18px 0 4px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #f0f0f0;
}
.login-sub {
  margin: 0 0 22px;
  font-size: 13px;
  text-align: center;
  color: #888;
}

.login-form { display: flex; flex-direction: column; gap: 14px; }

.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field-label {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #999;
}
.login-field input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: #f0f0f0;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.login-field input::placeholder { color: #555; }
.login-field input:focus {
  border-color: rgba(201,151,59,0.6);
  background: rgba(255,255,255,0.06);
}

.login-error {
  min-height: 18px;
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #f66;
}

.login-btn {
  position: relative;
  margin-top: 6px;
  padding: 13px 18px;
  background: linear-gradient(180deg, #d6a544, #b3812f);
  color: #181410;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
  box-shadow: 0 6px 16px rgba(201,151,59,0.25);
}
.login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(201,151,59,0.35);
}
.login-btn:active:not(:disabled) { transform: translateY(0); }
.login-btn:disabled { opacity: 0.6; cursor: progress; }

.login-btn .login-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(24,20,16,0.35);
  border-top-color: rgba(24,20,16,0.95);
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  animation: spin 700ms linear infinite;
}
.login-btn.is-busy .login-btn-spinner { display: inline-block; }
.login-btn.is-busy .login-btn-label::after { content: '…'; }

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

.login-foot {
  margin: 22px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: #777;
}
.login-foot a { color: var(--gold); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

/* When the body is in the 'guest' auth state, fade everything else */
body[data-auth="checking"] .site-header,
body[data-auth="checking"] .panel-to,
body[data-auth="guest"] .site-header,
body[data-auth="guest"] .panel-to {
  opacity: 0;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   AUTH BADGE (header)
   ════════════════════════════════════════════════════════════════════════ */
.auth-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  padding: 6px 10px 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 12.5px;
  color: #cfcfcf;
}
.auth-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-logout {
  background: rgba(201,151,59,0.16);
  border: 1px solid rgba(201,151,59,0.35);
  color: var(--gold);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease;
}
.auth-logout:hover { background: rgba(201,151,59,0.28); }

/* ════════════════════════════════════════════════════════════════════════
   FROM-PICKER MODAL
   ════════════════════════════════════════════════════════════════════════ */
.from-picker {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.from-picker[hidden] { display: none; }
.from-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,6,10,0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: loginFade 220ms ease;
}
.from-picker-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, rgba(26,26,30,0.96), rgba(18,18,22,0.96));
  border: 1px solid rgba(201,151,59,0.34);
  border-radius: 16px;
  padding: 28px 26px 22px;
  box-shadow:
    0 22px 50px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  animation: fpRise 260ms cubic-bezier(.2,.8,.2,1);
}
@keyframes fpRise {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.from-picker-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ccc;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.from-picker-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.from-picker-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
  color: #f0f0f0;
}
.from-picker-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #888;
}
.from-picker-current {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(201,151,59,0.08);
  border: 1px solid rgba(201,151,59,0.22);
  border-radius: 10px;
  font-size: 12.5px;
}
.fpc-label { color: #888; }
.fpc-value { color: var(--gold); font-weight: 500; }

.from-picker .input-wrap { position: relative; }
.from-picker .location-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: #f0f0f0;
  outline: none;
}
.from-picker .location-input:focus {
  border-color: rgba(201,151,59,0.6);
}
.from-picker .input-spinner {
  position: absolute;
  right: 12px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(201,151,59,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 140ms ease;
}
.from-picker .input-spinner.is-active {
  opacity: 1;
  animation: spin 700ms linear infinite;
}

.from-picker .suggestions-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  border-radius: 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  display: none;
}
.from-picker .suggestions-list.is-open { display: block; }
.from-picker .suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 120ms ease;
}
.from-picker .suggestion-item:last-child { border-bottom: 0; }
.from-picker .suggestion-item:hover,
.from-picker .suggestion-item[aria-selected="true"] { background: rgba(201,151,59,0.12); }
.from-picker .suggestion-name { font-size: 13.5px; color: #f0f0f0; }
.from-picker .suggestion-sub  { font-size: 11.5px; color: #777; margin-top: 2px; }

.from-picker-error {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #f66;
}

.from-picker-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.from-picker-reset {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  color: #888;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.from-picker-reset:hover { color: var(--gold); border-color: rgba(201,151,59,0.4); }

/* ════════════════════════════════════════════════════════════════════════
   DESTINATION-PANEL "FROM" BUTTON
   ════════════════════════════════════════════════════════════════════════ */
.dest-from-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f0f0f0;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dest-from-btn:hover {
  background: rgba(201,151,59,0.16);
  border-color: rgba(201,151,59,0.4);
  color: var(--gold);
}
.dest-from-btn.is-default {
  border-style: dashed;
  color: #aaa;
}
.dest-from-btn.is-default:hover { color: var(--gold); }
.dest-from-btn .from-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════
   PANEL-TO POSITIONING (now lives on the LEFT — was previously on the right)
   ════════════════════════════════════════════════════════════════════════ */
.panel-to {
  left: 24px;
  right: auto;
  top: calc(var(--hdr-h, 64px) + 16px);
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.panels-hidden .panel-to { opacity: 0; pointer-events: none; }

/* Declutter: when a destination is landed, hide the "Where do you want to go?"
   card so the open gallery panel owns the screen. The phase class is set by
   flight.js via document.body.classList when State.phase === 'LANDED'. */
body.phase-landed .panel-to { opacity: 0; pointer-events: none; transform: translateX(-20px); transition: opacity 240ms ease, transform 240ms ease; }

@media (max-width: 720px) {
  .panel-to { left: 16px; right: 16px; }
  .auth-badge { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   MODE CHIPS (inside from-picker)
   ════════════════════════════════════════════════════════════════════════ */
.mode-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 6px 0 14px;
}
.mode-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #bbb;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}
.mode-chip:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: #f0f0f0;
  transform: translateY(-1px);
}
.mode-chip-icon {
  font-size: 20px;
  line-height: 1;
}
.mode-chip.is-selected {
  background: rgba(201,151,59,0.14);
  border-color: rgba(201,151,59,0.55);
  color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201,151,59,0.3) inset, 0 4px 14px rgba(201,151,59,0.18);
}
.mode-chip.is-selected[data-mode="drive"] {
  background: rgba(91,196,159,0.14);
  border-color: rgba(91,196,159,0.55);
  color: #7cd9b3;
  box-shadow: 0 0 0 1px rgba(91,196,159,0.3) inset, 0 4px 14px rgba(91,196,159,0.18);
}
.mode-chip.is-selected[data-mode="train"] {
  background: rgba(141,180,214,0.14);
  border-color: rgba(141,180,214,0.55);
  color: #a8c8e5;
  box-shadow: 0 0 0 1px rgba(141,180,214,0.3) inset, 0 4px 14px rgba(141,180,214,0.18);
}
.mode-chip.is-selected[data-mode="boat"] {
  background: rgba(74,144,196,0.14);
  border-color: rgba(74,144,196,0.55);
  color: #82b2dc;
  box-shadow: 0 0 0 1px rgba(74,144,196,0.3) inset, 0 4px 14px rgba(74,144,196,0.18);
}

/* ════════════════════════════════════════════════════════════════════════
   DEST-PANEL FROM-BUTTON — color the icon by mode
   ════════════════════════════════════════════════════════════════════════ */
.dest-from-btn[data-mode="fly"]   .from-icon { color: #c9973b; }
.dest-from-btn[data-mode="drive"] .from-icon { color: #5bc49f; }
.dest-from-btn[data-mode="train"] .from-icon { color: #8db4d6; }
.dest-from-btn[data-mode="boat"]  .from-icon { color: #4a90c4; }

/* ════════════════════════════════════════════════════════════════════════
   FLIGHT OVERLAY — tint accent by mode
   ════════════════════════════════════════════════════════════════════════ */
.flight-overlay[data-mode="drive"] { border-color: rgba(91,196,159,0.55); box-shadow: 0 8px 32px rgba(91,196,159,0.22); }
.flight-overlay[data-mode="drive"] .flight-plane { color: #7cd9b3; }
.flight-overlay[data-mode="drive"] .flight-arrow { color: #7cd9b3; }

.flight-overlay[data-mode="train"] { border-color: rgba(141,180,214,0.55); box-shadow: 0 8px 32px rgba(141,180,214,0.22); }
.flight-overlay[data-mode="train"] .flight-plane { color: #a8c8e5; }
.flight-overlay[data-mode="train"] .flight-arrow { color: #a8c8e5; }

.flight-overlay[data-mode="boat"] { border-color: rgba(74,144,196,0.55); box-shadow: 0 8px 32px rgba(74,144,196,0.22); }
.flight-overlay[data-mode="boat"] .flight-plane { color: #82b2dc; }
.flight-overlay[data-mode="boat"] .flight-arrow { color: #82b2dc; }

/* ════════════════════════════════════════════════════════════════════════
   BRAND IMAGE — live-site logo.png (377×187 white PNG on dark)
   ════════════════════════════════════════════════════════════════════════ */
.brand-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

/* Loading screen: big + centered */
.loading-logo .brand-img { max-width: 220px; margin: 0 auto 4px; }

/* Login card: centered, medium */
.login-logo .brand-img { max-width: 180px; margin: 0 auto; }
.login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.login-logo .login-tag { margin-left: 0; }

/* Site header: small, aligned with nav row */
.header-logo { display: inline-flex; align-items: center; }
.header-logo .brand-img { max-height: 30px; width: auto; }

@media (max-width: 720px) {
  .header-logo .brand-img { max-height: 24px; }
  .login-logo .brand-img  { max-width: 140px; }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTH MENU (replaces auth-badge)
   ════════════════════════════════════════════════════════════════════════ */
.auth-menu {
  position: relative;
  margin-left: 12px;
}
.auth-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #cfcfcf;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.auth-menu-trigger:hover {
  background: rgba(201,151,59,0.12);
  border-color: rgba(201,151,59,0.35);
  color: var(--gold);
}
.auth-menu-trigger .auth-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 160ms ease;
}
.auth-menu-trigger[aria-expanded="true"] .auth-caret { transform: rotate(180deg); }

.auth-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: linear-gradient(180deg, rgba(26,26,30,0.96), rgba(18,18,22,0.96));
  border: 1px solid rgba(201,151,59,0.3);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  z-index: 500;
  animation: authMenuRise 160ms cubic-bezier(.2,.8,.2,1);
}
@keyframes authMenuRise {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.auth-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: #e6e6e6;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.auth-menu-item:hover,
.auth-menu-item:focus-visible {
  background: rgba(201,151,59,0.14);
  color: var(--gold);
  outline: none;
}
.auth-menu-item .am-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
  font-size: 14px;
}
.auth-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255,255,255,0.08);
  list-style: none;
}
.auth-menu-signout { color: #f0a0a0; }
.auth-menu-signout:hover { background: rgba(240,80,80,0.14); color: #ff8a8a; }

/* ════════════════════════════════════════════════════════════════════════
   EMPTY-STATE CTA inside panel-to (when user has no galleries)
   ════════════════════════════════════════════════════════════════════════ */
.panel-to.is-empty .input-wrap,
.panel-to.is-empty .suggestions-list,
.panel-to.is-empty .panel-hint { display: none; }

.empty-cta {
  display: block;
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #d6a544, #b3812f);
  color: #181410;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(201,151,59,0.25);
  transition: transform 120ms ease, box-shadow 160ms ease;
}
.empty-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(201,151,59,0.35);
}
.empty-msg {
  margin: 8px 0 0;
  color: #bbb;
  font-size: 12px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   SITE VIEW SHELL — full-screen panels for signup/membership/account/etc.
   ════════════════════════════════════════════════════════════════════════ */
.site-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: calc(var(--hdr-h, 64px) + 24px) 24px 48px;
  overflow-y: auto;
  background: radial-gradient(ellipse at top, rgba(20,24,34,0.94) 0%, rgba(6,7,11,0.99) 70%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: siteViewFade 220ms ease;
}
.site-view[hidden] { display: none; }
@keyframes siteViewFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.view-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 36px 32px 32px;
  background: linear-gradient(180deg, rgba(26,26,30,0.92), rgba(18,18,22,0.92));
  border: 1px solid rgba(201,151,59,0.28);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.view-inner.wide { max-width: 980px; }

.view-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: #aaa;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.view-back:hover { color: var(--gold); border-color: rgba(201,151,59,0.45); background: rgba(201,151,59,0.08); }

.view-title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 500;
  color: #f0f0f0;
  letter-spacing: -0.2px;
}
.view-sub {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: #888;
}

/* ── Form primitives ── */
.view-form { display: flex; flex-direction: column; gap: 14px; }
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #999;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="tel"] {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: #f0f0f0;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.form-field input::placeholder { color: #555; }
.form-field input:focus {
  border-color: rgba(201,151,59,0.6);
  background: rgba(255,255,255,0.06);
}
.form-hint { font-size: 11.5px; color: #777; }
.form-error   { min-height: 18px; margin: 4px 0 0; font-size: 12.5px; color: #f66; }
.form-success { min-height: 18px; margin: 4px 0 0; font-size: 12.5px; color: #7cd9b3; }
.form-section {
  margin: 18px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #cfcfcf;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.view-btn {
  position: relative;
  margin-top: 6px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.view-btn.primary {
  background: linear-gradient(180deg, #d6a544, #b3812f);
  color: #181410;
  box-shadow: 0 6px 16px rgba(201,151,59,0.25);
}
.view-btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(201,151,59,0.35); }
.view-btn.ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: #cfcfcf;
}
.view-btn.ghost:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: #f0f0f0; }
.view-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.view-btn .btn-spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(24,20,16,0.3);
  border-top-color: rgba(24,20,16,0.95);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.view-btn.is-busy .btn-spinner { display: inline-block; }
.view-btn.is-busy .btn-label::after { content: '…'; }

.view-foot { margin: 22px 0 0; font-size: 12.5px; text-align: center; color: #777; }
.view-foot-note { margin: 20px 0 0; font-size: 12px; text-align: center; color: #666; }

.view-link {
  background: transparent; border: 0; padding: 0;
  color: var(--gold);
  font-size: inherit;
  text-decoration: none;
  cursor: pointer;
}
.view-link:hover { text-decoration: underline; }

.login-link-btn {
  background: transparent; border: 0; padding: 0;
  color: var(--gold);
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
}
.login-link-btn:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════
   MEMBERSHIP GRID
   ════════════════════════════════════════════════════════════════════════ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.plan-card {
  position: relative;
  padding: 32px 24px 24px;
  background: linear-gradient(180deg, rgba(30,30,36,0.96), rgba(20,20,26,0.96));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.plan-card:hover { transform: translateY(-2px); border-color: rgba(201,151,59,0.4); }
.plan-card.is-current {
  border-color: rgba(201,151,59,0.65);
  box-shadow: 0 0 0 1px rgba(201,151,59,0.45) inset, 0 16px 40px rgba(201,151,59,0.15);
}
/* plan-ribbon, plan-title, plan-price: see consolidated rules in the
   "PLAN CARDS — premium pricing grid" section near end of file. */
.plan-price { text-align: center; margin: 8px 0 20px; color: #f0f0f0; }
.plan-price-period   { font-size: 13px; color: #888; margin-left: 2px; }
.plan-price-year     { font-size: 11.5px; color: #777; margin-top: 4px; }
.plan-features {
  list-style: none; padding: 0; margin: 0 0 20px;
  font-size: 13px; color: #cfcfcf;
  display: flex; flex-direction: column; gap: 8px;
}
.plan-card .view-btn { width: 100%; }

/* ════════════════════════════════════════════════════════════════════════
   BILLING CARDS
   ════════════════════════════════════════════════════════════════════════ */
.billing-card {
  margin: 16px 0;
  padding: 20px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}
.billing-label {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
}
.billing-plan { font-size: 20px; font-weight: 600; color: #f0f0f0; margin-bottom: 4px; }
.billing-meta { font-size: 12.5px; color: #aaa; }

.storage-bar-track {
  height: 10px;
  margin: 12px 0 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.storage-bar {
  height: 100%;
  background: linear-gradient(90deg, #5bc49f, #c9973b);
  transition: width 400ms cubic-bezier(.2,.8,.2,1);
}
.storage-bar[data-level="warn"]   { background: linear-gradient(90deg, #c9973b, #e67a22); }
.storage-bar[data-level="danger"] { background: linear-gradient(90deg, #e67a22, #ff5555); }

.billing-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════
   CREATE GALLERY — map picker + dropzone
   ════════════════════════════════════════════════════════════════════════ */
.cg-mappick { margin: 6px 0 0; }
.cg-map {
  height: 320px;
  margin-top: 6px;
  background: #0a0d14;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
}
.cg-coords {
  margin-top: 6px;
  font-size: 12px;
  color: #888;
  text-align: center;
}

.cg-dropzone {
  margin-top: 6px;
  padding: 22px;
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.14);
  border-radius: 14px;
  transition: border-color 160ms ease, background 160ms ease;
}
.cg-dropzone.is-dragging {
  border-color: var(--gold);
  background: rgba(201,151,59,0.08);
}
.cg-dropzone-inner { text-align: center; color: #aaa; }
.cg-dropzone-icon { font-size: 32px; margin-bottom: 8px; }
.cg-dropzone-text { font-size: 14px; color: #ccc; }
.cg-dropzone-sub  { margin-top: 4px; font-size: 11.5px; color: #777; }

.cg-thumbs {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.cg-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.4);
}
.cg-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cg-cover-tag {
  position: absolute;
  top: 6px; left: 6px;
  padding: 2px 8px;
  background: var(--gold);
  color: #181410;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 999px;
}
.cg-thumb-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 11px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 140ms ease;
}
.cg-thumb-remove:hover { background: rgba(220,50,50,0.85); }

/* ════════════════════════════════════════════════════════════════════════
   Hide globe/map/panels when inside a site-view
   ════════════════════════════════════════════════════════════════════════ */
body[data-view="signup"]        .globe-stage,
body[data-view="signup"]        .map-stage,
body[data-view="signup"]        .panel-to,
body[data-view="membership"]    .globe-stage,
body[data-view="membership"]    .map-stage,
body[data-view="membership"]    .panel-to,
body[data-view="account"]       .globe-stage,
body[data-view="account"]       .map-stage,
body[data-view="account"]       .panel-to,
body[data-view="billing"]       .globe-stage,
body[data-view="billing"]       .map-stage,
body[data-view="billing"]       .panel-to,
body[data-view="create-gallery"] .globe-stage,
body[data-view="create-gallery"] .map-stage,
body[data-view="create-gallery"] .panel-to {
  display: none;
}

@media (max-width: 720px) {
  .view-inner { padding: 24px 18px; }
  .form-row   { grid-template-columns: 1fr; }
  .billing-actions { flex-direction: column; }
  .billing-actions .view-btn { width: 100%; }
  .cg-map { height: 260px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PUBLIC SHARE VIEW
   Chrome stripped down for logged-out viewers arriving via /?share=XXX
   ════════════════════════════════════════════════════════════════════════ */

/* Hide everything that only makes sense to the gallery owner */
body[data-mode="public"] .auth-menu,
body[data-mode="public"] .panel-to,
body[data-mode="public"] #dest-from-btn,
body[data-mode="public"] #dest-star-btn,
body[data-mode="public"] #dest-share-btn {
  display: none !important;
}

/* Re-brand the header hint for public viewers */
body[data-mode="public"] #step-hint {
  content: 'Viewing a shared journey on PixAfar';
}

/* The persistent "Join PixAfar" CTA in the corner */
.public-cta {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 150;
  max-width: 260px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(26,26,30,0.94), rgba(18,18,22,0.94));
  border: 1px solid rgba(201,151,59,0.4);
  border-radius: 14px;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 60px rgba(201,151,59,0.08);
  animation: publicCtaSlide 480ms cubic-bezier(.2,.8,.2,1) 800ms backwards;
}
@keyframes publicCtaSlide {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.public-cta-title {
  font-size: 15px;
  font-weight: 600;
  color: #f0f0f0;
  margin-bottom: 4px;
}
.public-cta-sub {
  font-size: 12.5px;
  color: #aaa;
  line-height: 1.45;
  margin-bottom: 12px;
}
.public-cta-btn {
  display: inline-block;
  padding: 9px 16px;
  background: linear-gradient(180deg, #d6a544, #b3812f);
  color: #181410;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 120ms ease, box-shadow 160ms ease;
  box-shadow: 0 4px 14px rgba(201,151,59,0.25);
}
.public-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(201,151,59,0.35);
}

/* Public view error surface */
.public-error {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 440px;
  padding: 22px 26px;
  background: rgba(26,26,30,0.95);
  border: 1px solid rgba(255,100,100,0.35);
  border-radius: 14px;
  color: #f0f0f0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 200;
}

@media (max-width: 720px) {
  .public-cta { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   SHARE BUTTON + MODAL
   Lives in the destination panel for gallery owners.
   ════════════════════════════════════════════════════════════════════════ */
.dest-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f0f0f0;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dest-share-btn:hover {
  background: rgba(201,151,59,0.16);
  border-color: rgba(201,151,59,0.45);
  color: var(--gold);
}
.dest-share-btn.is-public {
  background: rgba(91,196,159,0.14);
  border-color: rgba(91,196,159,0.5);
  color: #7cd9b3;
}

.share-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.share-modal[hidden] { display: none; }
.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,6,10,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.share-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, rgba(26,26,30,0.96), rgba(18,18,22,0.96));
  border: 1px solid rgba(201,151,59,0.36);
  border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: fpRise 260ms cubic-bezier(.2,.8,.2,1);
}
.share-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ccc;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}
.share-modal-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
  color: #f0f0f0;
}
.share-modal-sub {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: #888;
}
.share-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 16px;
}
.share-toggle-label { font-size: 13.5px; color: #e0e0e0; }
.share-toggle-sub   { font-size: 11.5px; color: #888; margin-top: 2px; }

/* Simple pill switch */
.share-switch {
  position: relative;
  width: 42px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease;
  flex-shrink: 0;
}
.share-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #f0f0f0;
  border-radius: 50%;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}
.share-switch.is-on { background: rgba(91,196,159,0.6); }
.share-switch.is-on::after { transform: translateX(18px); }

.share-url-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.share-url-input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #e0e0e0;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.share-copy-btn {
  padding: 10px 16px;
  background: linear-gradient(180deg, #d6a544, #b3812f);
  color: #181410;
  font-size: 12.5px;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.share-copy-btn.is-copied {
  background: linear-gradient(180deg, #7cd9b3, #5bc49f);
}
.share-hint {
  font-size: 11.5px;
  color: #888;
  margin: 4px 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
   EXIF AUTO-FILL BADGE
   Shown inside the create-gallery map picker after EXIF GPS auto-places pin
   ════════════════════════════════════════════════════════════════════════ */
.cg-exif-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(91,196,159,0.12);
  border: 1px solid rgba(91,196,159,0.35);
  border-radius: 999px;
  font-size: 12px;
  color: #7cd9b3;
  animation: exifPop 320ms cubic-bezier(.2,.8,.2,1);
  transition: opacity 1.2s ease;
}
.cg-exif-badge.is-fading { opacity: 0; }
@keyframes exifPop {
  from { opacity: 0; transform: translateY(-6px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   MARKER CLUSTER — dark theme
   Overrides leaflet.markercluster's default blue bubbles with our gold-
   accented glass-panel style.
   ════════════════════════════════════════════════════════════════════════ */
.px-cluster-wrap {
  background: transparent !important;
  border: none !important;
}
.px-cluster-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(26,26,30,0.95), rgba(12,13,18,0.95));
  border: 2px solid rgba(201,151,59,0.65);
  border-radius: 50%;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.55),
    0 0 0 4px rgba(201,151,59,0.12),
    0 0 20px rgba(201,151,59,0.18);
  color: var(--gold);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}
.px-cluster-inner:hover {
  transform: scale(1.08);
}
.px-cluster-count {
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  line-height: 1;
}

/* Hide the default leaflet.markercluster bubbles that might leak through */
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large,
.marker-cluster div {
  background: transparent !important;
  color: inherit !important;
}

/* ════════════════════════════════════════════════════════════════════════
   TRAVEL STATS CHIP (header)
   "🌐 23 of 195 countries · 4 of 7 continents"
   ════════════════════════════════════════════════════════════════════════ */
.stats-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 16px;
  padding: 7px 14px;
  background: rgba(201,151,59,0.10);
  border: 1px solid rgba(201,151,59,0.32);
  border-radius: 999px;
  font-size: 12px;
  color: #e0e0e0;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
  cursor: default;
}
.stats-chip:hover {
  background: rgba(201,151,59,0.18);
  transform: translateY(-1px);
}
.stats-chip .stats-icon {
  font-size: 13px;
  margin-right: 4px;
}
.stats-chip .stats-num {
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stats-chip .stats-sub {
  color: #999;
  margin-left: 4px;
}
.stats-chip .stats-divider {
  color: rgba(255,255,255,0.18);
  font-weight: 300;
}

body[data-mode="public"] .stats-chip { display: none; }

@media (max-width: 1100px) {
  .stats-chip .stats-sub { display: none; } /* just "23 · 4" on narrow screens */
}
@media (max-width: 820px) {
  .stats-chip { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTO-TOUR BUTTON (header)
   ════════════════════════════════════════════════════════════════════════ */
.tour-btn {
  margin-left: 10px;
  padding: 8px 16px;
  background: rgba(201,151,59,0.10);
  border: 1px solid rgba(201,151,59,0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.tour-btn:hover {
  background: rgba(201,151,59,0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,151,59,0.2);
}
.tour-btn[data-state="playing"] {
  background: rgba(91,196,159,0.16);
  border-color: rgba(91,196,159,0.5);
  color: #7cd9b3;
  box-shadow: 0 0 0 3px rgba(91,196,159,0.12), 0 4px 14px rgba(91,196,159,0.2);
  animation: tourPulse 2.4s ease-in-out infinite;
}
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(91,196,159,0.12), 0 4px 14px rgba(91,196,159,0.2); }
  50%      { box-shadow: 0 0 0 5px rgba(91,196,159,0.2),  0 6px 22px rgba(91,196,159,0.32); }
}
body[data-mode="public"] .tour-btn,
body[data-mode="embed"] .tour-btn,
body[data-mode="landing"] .tour-btn { display: none; }

@media (max-width: 820px) {
  .tour-btn { padding: 6px 12px; font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHTBOX MINI-MAP (roadmap #7)
   Small Leaflet map in the bottom-left of the lightbox showing the gallery's
   geographic location. Non-interactive — pure context.
   ════════════════════════════════════════════════════════════════════════ */
.lightbox-minimap {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(12,13,18,0.94);
  border: 1px solid rgba(201,151,59,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 320ms ease 180ms, transform 320ms ease 180ms;
  z-index: 5;
}
.lightbox.is-open .lightbox-minimap {
  opacity: 1;
  transform: translateY(0);
}
.lightbox-minimap-inner {
  width: 100%;
  height: 140px;
  background: rgba(20,20,26,0.9);
}
.lightbox-minimap-label {
  padding: 8px 12px 10px;
  font-size: 11.5px;
  color: #e0e0e0;
  border-top: 1px solid rgba(201,151,59,0.2);
  text-align: center;
  letter-spacing: 0.3px;
}
/* Override the global leaflet-container background so the mini-map tiles
   don't bleed through as #0b0d12 before they load */
.lightbox-minimap .leaflet-container {
  background: #0a0b10 !important;
}

@media (max-width: 720px) {
  .lightbox-minimap { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   TIMELINE SCRUBBER (roadmap #10)
   Bottom-floating year slider that filters pins by gallery_date.
   ════════════════════════════════════════════════════════════════════════ */
.timeline-scrubber {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 48px));
  padding: 14px 20px 12px;
  background: linear-gradient(180deg, rgba(22,22,28,0.92), rgba(14,14,20,0.92));
  border: 1px solid rgba(201,151,59,0.35);
  border-radius: 14px;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  z-index: 180;
  animation: timelineSlide 340ms cubic-bezier(.2,.8,.2,1);
}
.timeline-scrubber[hidden] { display: none; }
@keyframes timelineSlide {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.timeline-label {
  font-size: 12.5px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  margin-bottom: 8px;
}
.timeline-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 0;
}
.timeline-input::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, rgba(201,151,59,0.55), rgba(201,151,59,0.2));
  border-radius: 999px;
}
.timeline-input::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, rgba(201,151,59,0.55), rgba(201,151,59,0.2));
  border-radius: 999px;
}
.timeline-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -7px;
  background: radial-gradient(circle at 35% 35%, #f0d28a, #c9973b 70%);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(201,151,59,0.45), 0 0 0 4px rgba(201,151,59,0.1);
  cursor: grab;
  transition: transform 140ms ease;
}
.timeline-input::-webkit-slider-thumb:hover { transform: scale(1.12); }
.timeline-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); }
.timeline-input::-moz-range-thumb {
  width: 18px; height: 18px;
  background: radial-gradient(circle at 35% 35%, #f0d28a, #c9973b 70%);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(201,151,59,0.45);
  cursor: grab;
}
.timeline-bookends {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #888;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Header toggle button */
/* Timeline button — matches the Tour button style (auto-width with label) */
.timeline-toggle-btn {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px 7px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  color: #e0e0e0;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 180ms var(--ease);
}
.timeline-toggle-btn:hover {
  background: rgba(201,151,59,0.14);
  border-color: rgba(201,151,59,0.4);
  transform: translateY(-1px);
}
.timeline-toggle-btn.is-active {
  background: rgba(201,151,59,0.22);
  border-color: rgba(201,151,59,0.55);
  color: var(--gold);
}

body[data-mode="public"] .timeline-toggle-btn,
body[data-mode="public"] .timeline-scrubber { display: none; }

@media (max-width: 720px) {
  .timeline-scrubber { bottom: 16px; width: calc(100vw - 32px); padding: 12px 16px 10px; }
  .timeline-toggle-btn { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   EMBED MODE (roadmap #13)
   Triggered by ?share=XXX&embed=1 — strips even more chrome than public
   mode. Designed to live inside an iframe on a blog.
   ════════════════════════════════════════════════════════════════════════ */

/* Everything that public mode hides, plus the header entirely and the Join CTA */
body[data-mode="embed"] .site-header,
body[data-mode="embed"] .public-cta,
body[data-mode="embed"] .auth-menu,
body[data-mode="embed"] .panel-to,
body[data-mode="embed"] .tour-btn,
body[data-mode="embed"] .timeline-toggle-btn,
body[data-mode="embed"] .timeline-scrubber,
body[data-mode="embed"] .stats-chip,
body[data-mode="embed"] #dest-from-btn,
body[data-mode="embed"] #dest-star-btn,
body[data-mode="embed"] #dest-share-btn,
body[data-mode="embed"] #dest-view-full-link {
  display: none !important;
}

/* Make the globe/map stage fill the iframe edge-to-edge */
body[data-mode="embed"] .globe-stage,
body[data-mode="embed"] .map-stage {
  top: 0 !important;
}

/* Subtle "Made with PixAfar" badge in the corner — bottom-right so it
   doesn't compete with the destination panel that still appears after flight */
.embed-badge {
  position: fixed;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  background: rgba(12,13,18,0.85);
  border: 1px solid rgba(201,151,59,0.4);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--gold);
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 150;
  transition: background 140ms ease;
}
.embed-badge:hover {
  background: rgba(201,151,59,0.18);
}

/* ════════════════════════════════════════════════════════════════════════
   EMBED ROW inside the share modal
   ════════════════════════════════════════════════════════════════════════ */
.share-embed-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.share-embed-header {
  margin-bottom: 10px;
}
.share-embed-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 2px;
}
.share-embed-sub {
  display: block;
  font-size: 11px;
  color: #888;
}
.share-embed-row .share-url-input {
  font-size: 11px;      /* smaller because iframe snippets are long */
}

/* ════════════════════════════════════════════════════════════════════════
   LANDING VIEW (marketing page for logged-out visitors)
   Auto-tour of real public galleries with a hero CTA overlay
   ════════════════════════════════════════════════════════════════════════ */

/* Landing mode strips the header + all owner chrome, then layers a hero card */
body[data-mode="landing"] .auth-menu,
body[data-mode="landing"] .panel-to,
body[data-mode="landing"] .stats-chip,
body[data-mode="landing"] .header-hint,
body[data-mode="landing"] .timeline-toggle-btn,
body[data-mode="landing"] .timeline-scrubber,
body[data-mode="landing"] #dest-from-btn,
body[data-mode="landing"] #dest-star-btn,
body[data-mode="landing"] #dest-share-btn {
  display: none !important;
}

/* The sign-in + sign-up hero card — floats on the left, doesn't block the globe */
.landing-hero {
  position: fixed;
  left: 6vw;
  top: 50%;
  transform: translateY(-50%);
  max-width: 440px;
  padding: 36px 34px 32px;
  background: linear-gradient(170deg, rgba(22,22,28,0.72), rgba(10,11,16,0.88));
  border: 1px solid rgba(201,151,59,0.35);
  border-radius: 18px;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 28px 60px rgba(0,0,0,0.55), 0 0 80px rgba(201,151,59,0.08);
  z-index: 120;
  animation: landingHeroRise 680ms cubic-bezier(.2,.8,.2,1) 260ms backwards;
}
@keyframes landingHeroRise {
  from { opacity: 0; transform: translateY(calc(-50% + 24px)) scale(0.96); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.landing-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(201,151,59,0.14);
  border: 1px solid rgba(201,151,59,0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.landing-title {
  margin: 0 0 14px;
  font-family: 'Georgia', serif;
  font-size: 38px;
  line-height: 1.12;
  font-weight: 400;
  color: #f4f4f4;
  white-space: pre-line;     /* honour the \n in "Pin every trip.\nFly..." */
  letter-spacing: -0.5px;
}
.landing-sub {
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #bbb;
}
.landing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.landing-btn {
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
}
.landing-btn-primary {
  background: linear-gradient(180deg, #d6a544, #b3812f);
  color: #181410;
  border: 0;
  box-shadow: 0 6px 18px rgba(201,151,59,0.28);
}
.landing-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(201,151,59,0.4);
}
.landing-btn-ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e0e0e0;
}
.landing-btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

/* Sign-in link in the top-right so returning users don't have to hunt */
body[data-mode="landing"] .site-header .header-logo {
  pointer-events: none;   /* logo isn't a link on the landing page */
}

@media (max-width: 820px) {
  .landing-hero {
    left: 16px; right: 16px; max-width: none;
    top: auto; bottom: 24px; transform: none;
    padding: 24px 22px;
  }
  .landing-title { font-size: 28px; }
  .landing-sub   { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO LOGO (landing page)
   Large brand mark above the eyebrow chip — gives the pitch a real
   centerpiece instead of relying on the tiny 60px header logo.
   ════════════════════════════════════════════════════════════════════════ */
.landing-hero-logo {
  display: block;
  margin: 0 auto 22px;
  width: 200px;
  max-width: 80%;
  text-align: center;
  pointer-events: auto;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.landing-hero-logo:hover {
  transform: scale(1.03);
}
.landing-hero-logo .brand-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(201,151,59,0.18));
}

@media (max-width: 820px) {
  .landing-hero-logo { width: 160px; margin-bottom: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SITE FOOTER (copyright + design credit)
   Persistent thin bar at the bottom of the viewport. Shown on landing,
   public share, and embed views — visible everywhere except inside the
   authed app where the destination panel needs the screen real estate.
   ════════════════════════════════════════════════════════════════════════ */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,9,14,0.78) 60%, rgba(8,9,14,0.92) 100%);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: rgba(220,220,220,0.55);
  text-align: center;
  pointer-events: none; /* purely informational, no interaction */
  user-select: none;
}
.site-footer-copy { color: rgba(220,220,220,0.7); }
.site-footer-sep  { color: rgba(201,151,59,0.5); }
.site-footer-credit-wrap {
  color: rgba(220,220,220,0.55);
}
.site-footer-credit {
  /* Interactive link — re-enable pointer events on just this element
     (parent .site-footer has pointer-events: none to avoid trapping clicks
     over the globe) */
  pointer-events: auto;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.6px;
  text-decoration: none;
  border-bottom: 1px solid rgba(201,151,59,0);
  transition: color 160ms ease, border-bottom-color 160ms ease, text-shadow 160ms ease;
}
.site-footer-credit:hover,
.site-footer-credit:focus-visible {
  color: #f0d28a;
  border-bottom-color: rgba(240,210,138,0.7);
  text-shadow: 0 0 12px rgba(201,151,59,0.4);
  outline: none;
}
.site-footer-credit:focus-visible {
  outline: 2px solid rgba(201,151,59,0.6);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hide the footer in the authed app — the destination panel needs
   that bottom region for photos, and the credit feels noisy when you're
   actively using the product */
body[data-auth="in"] .site-footer { display: none; }

/* In embed mode the iframe host sets its own footer; ours would compete */
body[data-mode="embed"] .site-footer { display: none; }

@media (max-width: 720px) {
  .site-footer {
    padding: 8px 14px;
    font-size: 10px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .site-footer-sep { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   UX IMPROVEMENTS — April 2026 polish pass
   ════════════════════════════════════════════════════════════════════════ */

/* UX1: Hide the empty header bar on the landing page.
   In landing mode everything in the header is hidden (auth menu, stats,
   hint, toggle, tour), so the 52px bar is pure dead space. Removing it
   lets the hero card + globe claim the full viewport. */
body[data-mode="landing"] .site-header { display: none !important; }
body[data-mode="landing"] .globe-stage { top: 0 !important; }
body[data-mode="landing"] .map-stage   { top: 0 !important; }

/* UX2: Primary CTA dominance.
   "Create free account" is the single most important button on the page.
   Make it full-width, taller, and separated from the ghost "Sign in". */
.landing-actions {
  flex-direction: column;
  gap: 10px;
}
.landing-btn-primary {
  width: 100%;
  padding: 16px 24px;
  font-size: 15px;
  text-align: center;
}
.landing-btn-ghost {
  width: 100%;
  padding: 12px 24px;
  text-align: center;
  font-size: 13.5px;
}

/* UX3: Tour ticker — shows "Touring N destinations" during landing auto-tour */
.landing-tour-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 16px;
  background: rgba(201,151,59,0.06);
  border: 1px solid rgba(201,151,59,0.2);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(220,220,220,0.65);
  letter-spacing: 0.3px;
  animation: tickerFade 1s ease 3s backwards;
}
@keyframes tickerFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-tour-ticker .ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: tickerPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tickerPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.15); }
}
.landing-tour-ticker .ticker-text {
  color: rgba(220,220,220,0.75);
}
.landing-tour-ticker .ticker-count {
  color: var(--gold);
  font-weight: 600;
}

/* UX4: Soften the hero card border — reduce gold opacity so the CTAs
   breathe and the card feels more "floating in space" than "boxed in". */
.landing-hero {
  border-color: rgba(201,151,59,0.18);
  box-shadow: 0 28px 60px rgba(0,0,0,0.5), 0 0 40px rgba(201,151,59,0.04);
}

/* UX5: Already sentence-case in HTML ("Start your journey"), but the CSS
   was uppercasing it. Remove the text-transform. */
.panel-step-badge {
  text-transform: none;
}

/* UX6: Hide the "Or click any gold pin on the globe" hint when in map mode,
   because map mode has photo-marker teardrops, not gold pins. */
[data-mode="map"] .panel-hint { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   4-TIER PRICING GRID — updated membership view
   ════════════════════════════════════════════════════════════════════════ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

/* "Most popular" tier gets a glow + slight scale lift */
.plan-card.is-popular {
  border-color: rgba(201,151,59,0.65);
  box-shadow: 0 0 0 2px rgba(201,151,59,0.2), 0 12px 36px rgba(201,151,59,0.18);
  transform: scale(1.02);
  z-index: 1;
}
.ribbon-free {
  background: linear-gradient(135deg, #5bc49f, #3da87e) !important;
  border-color: rgba(91,196,159,0.6) !important;
  color: #0a1a14 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(91,196,159,0.3);
}
.ribbon-popular {
  background: linear-gradient(135deg, #d6a544, #b3812f) !important;
  color: #181410 !important;
  font-weight: 700 !important;
}
.ribbon-current {
  background: rgba(91,196,159,0.18) !important;
  border-color: rgba(91,196,159,0.5) !important;
  color: #7cd9b3 !important;
}

/* Popular CTA button gets extra emphasis */
.popular-btn {
  box-shadow: 0 6px 20px rgba(201,151,59,0.35) !important;
  font-size: 14px !important;
}

/* Feature list per-tier styling */
.plan-features .feature-yes {
  color: #e0e0e0;
}
.plan-features .feature-no {
  color: rgba(255,255,255,0.25);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.12);
}

/* Yearly savings highlight */
.plan-price-year {
  font-size: 11.5px;
  color: #7cd9b3;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card.is-popular { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   GALLERY CRUD — Edit form, delete buttons, photo management
   ════════════════════════════════════════════════════════════════════════ */

/* Edit + Delete buttons in destination header */
.dest-edit-btn, .dest-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e0e0e0;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dest-edit-btn:hover {
  background: rgba(201,151,59,0.16);
  border-color: rgba(201,151,59,0.4);
  color: var(--gold);
}
.dest-delete-btn:hover {
  background: rgba(255,80,80,0.12);
  border-color: rgba(255,80,80,0.4);
  color: #ff6666;
}
.dest-delete-btn.is-confirming {
  background: rgba(255,60,60,0.18);
  border-color: rgba(255,60,60,0.6);
  color: #ff4444;
  animation: confirmPulse 600ms ease;
}
@keyframes confirmPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Hide edit/delete in public/embed/landing modes */
body[data-mode="public"] .dest-edit-btn,
body[data-mode="public"] .dest-delete-btn,
body[data-mode="embed"] .dest-edit-btn,
body[data-mode="embed"] .dest-delete-btn,
body[data-mode="landing"] .dest-edit-btn,
body[data-mode="landing"] .dest-delete-btn {
  display: none !important;
}

/* Inline edit form */
.dest-edit-form {
  padding: 14px 20px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dest-edit-form[hidden] { display: none; }
.dest-edit-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.dest-edit-form .form-field { display: flex; flex-direction: column; gap: 4px; }
.dest-edit-form .form-label { font-size: 11px; text-transform: uppercase; color: #999; letter-spacing: 0.5px; }
.dest-edit-form input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: #f0f0f0;
  outline: none;
}
.dest-edit-form input:focus { border-color: rgba(201,151,59,0.55); }
.dest-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.dest-edit-actions .view-btn { padding: 9px 18px; font-size: 12.5px; }

/* Per-photo delete button (✕ in corner of each thumbnail) */
.photo-card {
  position: relative;
}
.photo-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #ccc;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, background 140ms ease, color 140ms ease, transform 120ms ease;
  z-index: 2;
}
.photo-card:hover .photo-delete-btn {
  opacity: 1;
}
.photo-delete-btn:hover {
  background: rgba(255,60,60,0.7);
  border-color: rgba(255,60,60,0.8);
  color: #fff;
  transform: scale(1.1);
}
.photo-delete-btn.is-confirming {
  opacity: 1;
  background: rgba(255,60,60,0.8);
  color: #fff;
  font-weight: 700;
  animation: confirmPulse 500ms ease;
}

@media (max-width: 720px) {
  .dest-edit-form .form-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   DESIGN POLISH — April 2026
   Comprehensive visual upgrade using the token system above.
   Applied as overrides to avoid disrupting existing cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ── HEADER ──────────────────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(180deg, rgba(11,13,18,0.95) 0%, rgba(11,13,18,0.85) 100%);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}

/* Toggle buttons — more refined shape + hover */
.toggle-btn {
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 180ms var(--ease);
}
.toggle-btn.is-active {
  box-shadow: 0 0 0 1px rgba(201,151,59,0.4) inset, var(--shadow-gold);
}

/* ── LOADING SCREEN ──────────────────────────────────────────────────── */
.loading-screen {
  background: radial-gradient(ellipse at 40% 40%, rgba(18,18,24,0.98), var(--bg) 70%);
}
.loading-bar-track {
  border-radius: var(--r-pill);
  overflow: hidden;
}
.loading-bar {
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold), var(--gold-warm));
}

/* ── LOGIN OVERLAY — premium feel ────────────────────────────────────── */
.login-card {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl), 0 0 100px rgba(201,151,59,0.06);
}
.login-field input {
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.login-field input:focus {
  box-shadow: 0 0 0 3px rgba(201,151,59,0.12);
}
.login-btn {
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  letter-spacing: 0.5px;
  transition: transform 140ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}

/* ── DESTINATION PANEL — tighter, more editorial ─────────────────────── */
.destination-panel {
  background: linear-gradient(180deg, rgba(14,15,20,0.96) 0%, rgba(10,11,16,0.98) 100%);
  border-top: 1px solid rgba(201,151,59,0.15);
  box-shadow: 0 -12px 48px rgba(0,0,0,0.5);
}
.dest-header {
  padding: var(--sp-4) var(--sp-5);
  gap: var(--sp-3);
}
.dest-city {
  font-family: 'Georgia', serif;
  font-weight: 400;
  letter-spacing: -0.3px;
}
.dest-country {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold);
  font-weight: 500;
}
.dest-meta {
  padding: var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.dest-by {
  color: var(--text-dim);
  font-weight: 300;
}
.dest-photographer {
  color: var(--text);
  font-weight: 600;
}

/* Action buttons — unified capsule style */
.dest-from-btn, .dest-star-btn, .dest-share-btn, .dest-edit-btn, .dest-delete-btn {
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  transition: all 160ms var(--ease);
}

/* ── PHOTO GRID — editorial spacing ──────────────────────────────────── */
.dest-photo-grid {
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-10);
}
.photo-card {
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.photo-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
  z-index: 1;
}
.photo-card img {
  transition: filter 300ms var(--ease);
}
.photo-card:hover img {
  filter: brightness(1.08) contrast(1.02);
}

/* ── LIGHTBOX — cinematic ────────────────────────────────────────────── */
.lightbox-backdrop {
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox-img {
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xl);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 180ms var(--ease);
}
/* No transform on hover — moving buttons are hard to click.
   Use color + glow instead so the button responds without shifting. */
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(201,151,59,0.25);
  color: var(--gold-warm);
  box-shadow: 0 0 16px rgba(201,151,59,0.3);
}

/* ── FLIGHT OVERLAY — more premium pill ──────────────────────────────── */
.flight-overlay {
  background: linear-gradient(135deg, rgba(18,18,24,0.92), rgba(14,14,20,0.92));
  border: 1px solid rgba(201,151,59,0.35);
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-6);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(201,151,59,0.12);
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.4px;
}
.flight-plane {
  font-size: var(--fs-lg);
  filter: drop-shadow(0 0 8px rgba(201,151,59,0.4));
}
.flight-label-from, .flight-label-to {
  font-weight: 600;
}
.flight-arrow {
  opacity: 0.5;
  font-size: var(--fs-sm);
}

/* ── CONTROL PANEL (destination picker) ──────────────────────────────── */
.control-panel {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(201,151,59,0.04);
}
.panel-step-badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,151,59,0.1);
  border: 1px solid rgba(201,151,59,0.3);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
  display: inline-block;
  margin-bottom: var(--sp-3);
}
.panel-title {
  font-family: 'Georgia', serif;
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: var(--sp-4);
}
.panel-title em {
  color: var(--gold);
  font-style: normal;
}
.location-input {
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.location-input:focus {
  box-shadow: 0 0 0 3px rgba(201,151,59,0.1);
}

/* ── SUGGESTION LIST — refined dropdown ──────────────────────────────── */
.suggestions-list.is-open {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201,151,59,0.15);
}
.suggestion-item {
  padding: var(--sp-3) var(--sp-4);
  transition: background 120ms var(--ease);
  border-bottom: 1px solid var(--border-subtle);
}
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-item:hover, .suggestion-item[aria-selected="true"] {
  background: rgba(201,151,59,0.1);
}
.suggestion-name {
  font-size: var(--fs-base);
  font-weight: 500;
}
.suggestion-sub {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: 2px;
}

/* ── MAP POPUP — refined ─────────────────────────────────────────────── */
.map-popup-name {
  font-family: 'Georgia', serif;
  font-weight: 400;
  font-size: var(--fs-base);
  color: var(--text);
}
.map-popup-btn {
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: var(--sp-2) var(--sp-4);
  background: linear-gradient(180deg, var(--gold), #b3812f);
  color: #181410;
  border: 0;
  cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 160ms var(--ease);
}
.map-popup-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

/* ── SITE VIEWS — cleaner card chrome ────────────────────────────────── */
.site-view .view-inner {
  border-radius: var(--r-xl);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-xl);
}
.view-title {
  font-family: 'Georgia', serif;
  font-weight: 400;
  letter-spacing: -0.3px;
}
.view-back {
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  transition: all 160ms var(--ease);
}
.view-back:hover {
  background: rgba(201,151,59,0.1);
  color: var(--gold);
}
.view-btn {
  border-radius: var(--r-md);
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 180ms var(--ease);
}
.view-btn.primary {
  background: linear-gradient(180deg, #d6a544, #b3812f);
  box-shadow: var(--shadow-gold);
}
.view-btn.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(201,151,59,0.35);
}
.view-btn.ghost {
  border-radius: var(--r-md);
}
.view-btn.ghost:hover:not(:disabled) {
  border-color: rgba(201,151,59,0.3);
  background: rgba(201,151,59,0.08);
}

/* Form fields in site views */
.view-form input[type="text"],
.view-form input[type="email"],
.view-form input[type="tel"],
.view-form input[type="password"],
.view-form input[type="date"],
.view-form input[type="search"] {
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.view-form input:focus {
  border-color: rgba(201,151,59,0.5);
  box-shadow: 0 0 0 3px rgba(201,151,59,0.1);
}
.form-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-hint {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.form-section {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.form-error {
  font-size: var(--fs-sm);
  color: var(--danger);
}
.form-success {
  font-size: var(--fs-sm);
  color: var(--success);
}

/* ── PLAN CARDS — premium pricing grid ───────────────────────────────── */
.plan-card {
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(180deg, rgba(22,22,28,0.95), rgba(16,16,22,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,0.14);
}
.plan-ribbon {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid rgba(201,151,59,0.3);
  background: rgba(201,151,59,0.1);
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.plan-title {
  font-family: 'Georgia', serif;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.plan-price {
  margin-bottom: var(--sp-5);
}
.plan-price-currency {
  font-size: var(--fs-base);
  color: var(--text-muted);
  vertical-align: super;
}
.plan-price-amount {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.plan-price-period {
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.plan-features {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}
.plan-features li {
  font-size: var(--fs-sm);
  line-height: 1.7;
  padding: var(--sp-1) 0;
}

/* ── BILLING DASHBOARD — card polish ─────────────────────────────────── */
.billing-card {
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.billing-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.billing-plan {
  font-family: 'Georgia', serif;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--text);
}
.storage-bar-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.storage-bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width 600ms var(--ease-out);
}
.storage-bar[data-level="warn"] {
  background: linear-gradient(90deg, var(--gold), #e8a020);
}
.storage-bar[data-level="danger"] {
  background: linear-gradient(90deg, #e8a020, var(--danger));
}

/* ── FROM-PICKER + SHARE MODAL — unified modal chrome ────────────────── */
.from-picker-card, .share-modal-card {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
}

/* ── STATS CHIP — micro-refinement ───────────────────────────────────── */
.stats-chip {
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── TOUR BUTTON — cleaner ───────────────────────────────────────────── */
.tour-btn {
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}

/* ── TIMELINE SCRUBBER — refined chrome ──────────────────────────────── */
.timeline-scrubber {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(201,151,59,0.06);
}

/* ── LANDING HERO — editorial refinement ─────────────────────────────── */
.landing-hero {
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
}
.landing-title {
  font-size: var(--fs-3xl);
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin-bottom: var(--sp-4);
}
.landing-sub {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--sp-6);
}
.landing-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 1.2px;
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* ── LOGIN LINK BUTTONS — styled to look clickable ───────────────────── */
.login-link-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(201,151,59,0);
  transition: border-bottom-color 160ms var(--ease), color 160ms var(--ease);
  padding: 0;
}
.login-link-btn:hover {
  color: var(--gold-warm);
  border-bottom-color: var(--gold-warm);
}

/* ── CREATE-GALLERY — dropzone refinement ────────────────────────────── */
.cg-dropzone {
  border-radius: var(--r-lg);
  border: 2px dashed rgba(201,151,59,0.2);
  background: rgba(201,151,59,0.02);
  padding: var(--sp-8) var(--sp-6);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
  text-align: center;
}
.cg-dropzone:hover, .cg-dropzone.is-dragging {
  border-color: rgba(201,151,59,0.5);
  background: rgba(201,151,59,0.06);
}
.cg-dropzone-icon {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-3);
  opacity: 0.6;
}
.cg-dropzone-text {
  font-size: var(--fs-base);
  color: var(--text-secondary);
}
.cg-dropzone-sub {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-top: var(--sp-2);
}
.cg-map {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* ── GLOBAL TRANSITIONS — smoother hover states everywhere ──────────── */
button, a, input, select, textarea {
  transition-property: background, border-color, color, box-shadow, transform, opacity;
  transition-duration: 160ms;
  transition-timing-function: var(--ease);
}

/* ── SCROLLBAR — dark themed ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(201,151,59,0.2);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(201,151,59,0.4); }

/* ── SELECTION COLOR — brand-aligned ─────────────────────────────────── */
::selection {
  background: rgba(201,151,59,0.3);
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════════
   PHOTO THUMBNAIL FADE-IN
   Images start transparent and fade in once loaded. This makes the load
   feel intentional ("revealing") instead of broken ("popping in").
   ════════════════════════════════════════════════════════════════════════ */
.photo-card-btn img {
  opacity: 0;
  transition: opacity 350ms var(--ease);
}
.photo-card-btn img.is-loaded {
  opacity: 1;
}

/* Timeline button — now has a text label so users can find it */
.timeline-btn-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.timeline-toggle-btn {
  gap: 5px;
  padding: 7px 14px 7px 10px;
  border-radius: var(--r-md);
}
@media (max-width: 1000px) {
  .timeline-btn-label { display: none; }
}

/* Day/night texture toggle button */
.daynight-btn {
  margin-left: 6px;
  width: 36px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  color: #e0e0e0;
  font-size: 16px;
  cursor: pointer;
  transition: all 180ms var(--ease);
}
.daynight-btn:hover {
  background: rgba(201,151,59,0.14);
  border-color: rgba(201,151,59,0.4);
  transform: translateY(-1px);
}
/* Hide in modes where the globe isn't the primary view */
body[data-mode="public"] .daynight-btn,
body[data-mode="embed"] .daynight-btn,
body[data-mode="landing"] .daynight-btn {
  display: none;
}
@media (max-width: 820px) {
  .daynight-btn { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER SVG ICONS — crisp inline SVGs replacing emoji icons
   ════════════════════════════════════════════════════════════════════════ */
.hdr-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: -2px;
}
.toggle-btn .hdr-icon,
.tour-btn .hdr-icon,
.timeline-toggle-btn .hdr-icon {
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM FEEL PASS — eliminate every "basic" element
   ════════════════════════════════════════════════════════════════════════ */

/* ── DESTINATION PICKER PANEL — luxury glass card ────────────────────── */
.control-panel {
  background: linear-gradient(165deg, rgba(18,18,26,0.82) 0%, rgba(12,13,20,0.88) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(201,151,59,0.22);
  box-shadow:
    0 24px 48px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 0 rgba(255,255,255,0.06) inset;
}

/* ── BADGE — bolder, with shimmer highlight ──────────────────────────── */
.panel-step-badge {
  background: linear-gradient(135deg, rgba(201,151,59,0.18), rgba(201,151,59,0.08));
  border: 1px solid rgba(201,151,59,0.45);
  box-shadow: 0 1px 4px rgba(201,151,59,0.15);
  padding: var(--sp-1) var(--sp-4);
}

/* ── SEARCH INPUT — premium depth ────────────────────────────────────── */
.location-input {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.03);
}
.location-input::placeholder {
  color: rgba(255,255,255,0.28);
  font-weight: 300;
}
.location-input:focus {
  background: rgba(0,0,0,0.3);
  border-color: rgba(201,151,59,0.5);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset, 0 0 0 3px rgba(201,151,59,0.08);
}

/* ── HINT TEXT — elegant whisper or hide ──────────────────────────────── */
.panel-hint {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.22);
  font-style: italic;
  letter-spacing: 0.3px;
}

/* ── HEADER — more depth and polish ──────────────────────────────────── */
.site-header {
  background: linear-gradient(180deg, rgba(8,9,14,0.96) 0%, rgba(11,13,18,0.92) 100%);
  border-bottom: 1px solid rgba(201,151,59,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* ── HEADER HINT — fade it to a whisper so it doesn't compete ────────── */
.header-hint {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.3);
  font-weight: 300;
  letter-spacing: 0.5px;
}

/* ── STATS CHIP — premium badge with more substance ──────────────────── */
.stats-chip {
  background: linear-gradient(135deg, rgba(18,18,26,0.85), rgba(12,13,20,0.85));
  border: 1px solid rgba(201,151,59,0.35);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03) inset;
  padding: 8px 16px;
}

/* ── TOGGLE BUTTONS — more refined pill shape ────────────────────────── */
.view-toggle {
  background: rgba(0,0,0,0.25);
  border-radius: var(--r-md);
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.06);
}
.toggle-btn {
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.toggle-btn.is-active {
  background: linear-gradient(180deg, rgba(201,151,59,0.9), rgba(179,129,47,0.9));
  color: #121014;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(201,151,59,0.35);
}
.toggle-btn:not(.is-active):hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.05);
  border-radius: 7px;
}

/* ── TOUR + TIMELINE BUTTONS — consistent premium capsules ──────────── */
.tour-btn, .timeline-toggle-btn {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tour-btn:hover, .timeline-toggle-btn:hover {
  background: rgba(201,151,59,0.12);
  border-color: rgba(201,151,59,0.4);
  box-shadow: 0 2px 8px rgba(201,151,59,0.15);
}
.tour-btn[data-state="playing"] {
  background: linear-gradient(135deg, rgba(91,196,159,0.15), rgba(91,196,159,0.08));
  border-color: rgba(91,196,159,0.5);
  color: #7cd9b3;
}

/* ── AUTH MENU TRIGGER — premium dropdown handle ─────────────────────── */
#auth-menu-trigger, .auth-menu-trigger {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#auth-menu-trigger:hover {
  border-color: rgba(201,151,59,0.35);
  background: rgba(201,151,59,0.08);
}

/* ── FLIGHT OVERLAY PILL — premium glass ─────────────────────────────── */
.flight-overlay {
  background: linear-gradient(135deg, rgba(14,15,22,0.94) 0%, rgba(10,11,18,0.94) 100%);
  border: 1px solid rgba(201,151,59,0.4);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    0 0 60px rgba(201,151,59,0.08),
    0 1px 0 rgba(255,255,255,0.06) inset;
}

/* ── DESTINATION PANEL — elevated premium surface ────────────────────── */
.destination-panel {
  background: linear-gradient(180deg, rgba(12,13,20,0.97) 0%, rgba(8,9,14,0.98) 100%);
  border-top: 1px solid rgba(201,151,59,0.2);
  box-shadow:
    0 -16px 48px rgba(0,0,0,0.5),
    0 -1px 0 rgba(255,255,255,0.04) inset;
}

/* ── DEST HEADER ACTION BUTTONS — consistent capsule style ───────────── */
.dest-from-btn, .dest-star-btn, .dest-share-btn, .dest-edit-btn, .dest-delete-btn {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dest-from-btn:hover, .dest-star-btn:hover, .dest-share-btn:hover, .dest-edit-btn:hover {
  background: rgba(201,151,59,0.12);
  border-color: rgba(201,151,59,0.4);
  box-shadow: 0 2px 8px rgba(201,151,59,0.12);
}

/* ── PHOTO GRID — premium card feel ──────────────────────────────────── */
.photo-card {
  background: rgba(20,20,28,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.04);
}
.photo-card:hover {
  border-color: rgba(201,151,59,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,151,59,0.15);
}

/* ── SUGGESTION DROPDOWN — luxury dropdown ───────────────────────────── */
.suggestions-list.is-open {
  background: linear-gradient(180deg, rgba(18,18,26,0.96), rgba(12,13,20,0.96));
  border: 1px solid rgba(201,151,59,0.2);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── LOGIN CARD — premium depth ──────────────────────────────────────── */
.login-card {
  background: linear-gradient(170deg, rgba(22,22,30,0.94) 0%, rgba(14,14,22,0.94) 100%);
  border: 1px solid rgba(201,151,59,0.25);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.6),
    0 0 120px rgba(201,151,59,0.06),
    0 1px 0 rgba(255,255,255,0.06) inset;
}

/* ── MODALS — consistent premium glass ───────────────────────────────── */
.from-picker-card, .share-modal-card {
  background: linear-gradient(170deg, rgba(22,22,30,0.96) 0%, rgba(14,14,22,0.96) 100%);
  border: 1px solid rgba(201,151,59,0.3);
  box-shadow:
    0 32px 64px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.06) inset;
}

/* ── LIGHTBOX — truly cinematic ──────────────────────────────────────── */
.lightbox-backdrop {
  background: rgba(0,0,0,0.94);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  background: rgba(20,20,28,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* ── SITE VIEW CARDS — premium wrapper ───────────────────────────────── */
.site-view .view-inner {
  background: linear-gradient(170deg, rgba(18,18,26,0.96) 0%, rgba(12,13,20,0.96) 100%);
  border: 1px solid rgba(201,151,59,0.2);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.04) inset;
}

/* ── VIEW FORM INPUTS — premium depth ────────────────────────────────── */
.view-form input[type="text"],
.view-form input[type="email"],
.view-form input[type="tel"],
.view-form input[type="password"],
.view-form input[type="date"],
.view-form input[type="search"] {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset;
}
.view-form input:focus {
  background: rgba(0,0,0,0.3);
  border-color: rgba(201,151,59,0.45);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset, 0 0 0 3px rgba(201,151,59,0.08);
}

/* ── PLAN CARDS — premium elevation ──────────────────────────────────── */
.plan-card {
  background: linear-gradient(170deg, rgba(20,20,28,0.96) 0%, rgba(14,14,22,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.plan-card:hover {
  border-color: rgba(201,151,59,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,151,59,0.1);
}
.plan-card.is-popular {
  border-color: rgba(201,151,59,0.5);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.4),
    0 0 40px rgba(201,151,59,0.1),
    0 0 0 1px rgba(201,151,59,0.3) inset;
}

/* ── BILLING CARDS — premium surface ─────────────────────────────────── */
.billing-card {
  background: linear-gradient(170deg, rgba(20,20,28,0.8) 0%, rgba(14,14,22,0.8) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ── TIMELINE SCRUBBER — premium floating panel ──────────────────────── */
.timeline-scrubber {
  background: linear-gradient(180deg, rgba(18,18,26,0.94) 0%, rgba(12,13,20,0.94) 100%);
  border: 1px solid rgba(201,151,59,0.3);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.5),
    0 0 40px rgba(201,151,59,0.06),
    0 1px 0 rgba(255,255,255,0.04) inset;
}

/* ── LANDING HERO — luxe glass ───────────────────────────────────────── */
.landing-hero {
  background: linear-gradient(165deg, rgba(18,18,26,0.78) 0%, rgba(10,11,16,0.88) 100%);
  border: 1px solid rgba(201,151,59,0.22);
  box-shadow:
    0 32px 72px rgba(0,0,0,0.5),
    0 0 80px rgba(201,151,59,0.05),
    0 1px 0 rgba(255,255,255,0.06) inset;
  backdrop-filter: blur(32px) saturate(1.7);
  -webkit-backdrop-filter: blur(32px) saturate(1.7);
}

/* ── GLOBAL — premium inset highlight on every glass surface ─────────── */
/* The single-pixel white inset line at the top edge is what separates
   "flat dark" from "glass panel catching light from above." It's the
   subtle detail that makes Apple, Linear, and Vercel designs feel premium. */

/* ════════════════════════════════════════════════════════════════════════
   MAP FLIGHT — animated transport icon
   The icon (✈/🚗/🚆/⛵) moves along the great-circle curve from
   departure to destination at 60fps via requestAnimationFrame.
   ════════════════════════════════════════════════════════════════════════ */
/* ── Map flight: directional arrow + mode badge ──────────────────────── */
.flight-map-icon-wrap {
  background: transparent !important;
  border: none !important;
}
.flight-map-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* SVG arrow — points in direction of travel via JS rotate() */
.flight-arrow-svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)) drop-shadow(0 0 10px currentColor);
  transition: transform 120ms ease-out;
}
/* Small transport mode emoji badge in the corner */
.flight-map-mode-label {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 11px;
  background: rgba(0,0,0,0.75);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ════════════════════════════════════════════════════════════════════════
   GLOBE FLIGHT ARROW — animated directional marker on the 3D globe
   Rendered via Globe.gl's htmlElementsData layer so it projects correctly
   onto the 3D surface and follows the arc path at 60fps.
   ════════════════════════════════════════════════════════════════════════ */
/* Globe arrow — pulsing transport icon that rides the arc.
   No rotation (HTML overlays on Globe.gl are billboarded — they always
   face the camera, so compass rotation doesn't make visual sense). */
.globe-flight-arrow {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.globe-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 22px;
  background: radial-gradient(circle, var(--flight-color, #c9973b) 0%, rgba(0,0,0,0.6) 70%);
  border: 2px solid var(--flight-color, #c9973b);
  border-radius: 50%;
  box-shadow:
    0 0 16px var(--flight-color, #c9973b),
    0 0 32px var(--flight-color, rgba(201,151,59,0.4)),
    0 4px 12px rgba(0,0,0,0.6);
  animation: globeArrowPulse 1.4s ease-in-out infinite;
}
@keyframes globeArrowPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 16px var(--flight-color, #c9973b), 0 0 32px rgba(201,151,59,0.3), 0 4px 12px rgba(0,0,0,0.6); }
  50%      { transform: scale(1.12); box-shadow: 0 0 24px var(--flight-color, #c9973b), 0 0 48px rgba(201,151,59,0.5), 0 4px 12px rgba(0,0,0,0.6); }
}

/* Password eye toggle */
.password-wrap {
  position: relative;
}
.password-wrap input {
  padding-right: 44px;
}
.password-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 160ms ease;
}
.password-eye:hover { color: var(--gold); }
.eye-icon { width: 20px; height: 20px; }

/* SVG icons inside mode chips + flight overlay */
.mode-svg {
  width: 22px;
  height: 22px;
}
.mode-chip-icon { line-height: 0; }
.flight-plane .mode-svg {
  width: 18px;
  height: 18px;
}
.from-icon .mode-svg {
  width: 14px;
  height: 14px;
}

/* Auth menu SVG icons (replacing emojis) */
svg.am-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
  vertical-align: middle;
}
.auth-menu-item:hover svg.am-icon {
  opacity: 1;
  color: var(--gold);
}

/* Date input — fix low-contrast placeholder on dark backgrounds */
input[type="date"] {
  color-scheme: dark;
  color: var(--text);
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--text-secondary);
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(0.3) hue-rotate(10deg);
  cursor: pointer;
}

/* Globe arrow icon — SVG inside the pulsing circle */
.globe-arrow-icon .mode-svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}