/* ── FLOATING PILL NAVIGATION ─────────────────────────────── */
.nav {
 position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
 z-index: 100; width: calc(100% - 48px); max-width: 1400px;
 display: grid; grid-template-columns: auto 1fr auto;
 align-items: center;
 background: rgba(255,255,255,0.88);
 backdrop-filter: blur(24px) saturate(180%);
 -webkit-backdrop-filter: blur(24px) saturate(180%);
 border: 1px solid rgba(255,255,255,0.7);
 border-radius: 100px;
 padding: 8px 10px 8px 20px;
 box-shadow: 0 4px 32px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
}
/* Scroll blur strip — blurs any content that scrolls under and above the nav.
   Only applied on pages that render the floating pill nav. */
body:has(> .nav) {
 --nav-blur-height: 74px;
}
body:has(> .nav)::before {
 content: '';
 position: fixed;
 top: 0; left: 0; right: 0;
 height: var(--nav-blur-height, 74px);
 z-index: 99;
 pointer-events: none;
 backdrop-filter: blur(16px) saturate(150%);
 -webkit-backdrop-filter: blur(16px) saturate(150%);
 -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
         mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.nav-logo {
 font-family: var(--font-heading); font-weight: 900;
 font-size: 18px; color: var(--text-primary); letter-spacing: -0.05em;
 text-decoration: none;
}
.nav-logo span { color: var(--accent-text); }
/* Center navigation links pill */
.nav-links-wrap {
 display: flex; align-items: center; justify-content: center;
}
.nav-links {
 display: flex; align-items: center; justify-content: center;
 gap: 2px;
 background: rgba(0,0,0,0.04);
 border: 1px solid rgba(0,0,0,0.06);
 border-radius: 100px;
 padding: 4px;
 margin: 0 12px;
}
.nav-links a {
 padding: 6px 12px; border-radius: 100px;
 font-size: 13px; font-weight: 700;
 color: var(--text-secondary); font-family: var(--font-heading);
 transition: all var(--transition); text-decoration: none;
 display: flex; align-items: center; gap: 6px;
 white-space: nowrap;
}
.nav-links a:hover { background: rgba(255,255,255,0.9); color: var(--text-primary); }
.nav-links a.active { background: var(--surface-dark); color: var(--accent); }
.nav-links a.locked { color: rgba(117,119,119,0.5); }
.nav-links a.locked .nav-lock { font-size: 10px; opacity: 0.5; }
.nav-actions { display: flex; gap: 8px; align-items: center; }
/* Trip group pills */
.nav-trip-group {
 display: flex; gap: 3px; align-items: center;
 background: rgba(0,0,0,0.04);
 border: 1px solid rgba(0,0,0,0.06);
 border-radius: 100px; padding: 3px;
}
.nav-trip-btn {
 padding: 5px 10px; border-radius: 100px;
 font-size: 12px; font-weight: 700; cursor: pointer;
 border: none; background: transparent;
 color: var(--text-muted);
 display: flex; align-items: center; gap: 4px;
 font-family: var(--font-heading); transition: all var(--transition);
}
.nav-trip-btn.active { background: var(--surface-dark); color: var(--accent); }
.nav-trip-score {
 font-size: 10px; font-weight: 800;
 padding: 2px 5px; border-radius: 5px;
 background: rgba(0,0,0,0.08); color: var(--text-muted);
}
.nav-trip-btn.active .nav-trip-score { background: rgba(197,254,0,0.2); color: var(--accent); }
/* Plan toggle */
.nav-plan-pill {
 display: flex; align-items: center; gap: 4px;
 padding: 3px 3px 3px 10px;
 border-radius: 100px;
 background: rgba(0,0,0,0.05);
 border: 1px solid rgba(0,0,0,0.07);
 font-size: 11px;
}
.nav-plan-tog {
 display: flex; background: rgba(0,0,0,0.07);
 border-radius: 6px; padding: 2px; gap: 1px;
}
.nav-plan-btn {
 font-size: 10px; font-weight: 700;
 padding: 4px 9px; border-radius: 5px;
 border: none; cursor: pointer;
 background: transparent; color: var(--text-muted);
 font-family: var(--font-heading);
}
.nav-plan-btn.active { background: var(--surface-dark); color: var(--accent); }
/* User chip */
.nav-user-chip {
 display: flex; align-items: center; gap: 7px;
 padding: 4px 14px 4px 4px;
 background: rgba(255,255,255,0.75);
 border: 1px solid rgba(255,255,255,0.85);
 border-radius: 100px; cursor: pointer;
}
.nav-avatar {
 width: 28px; height: 28px; border-radius: 50%;
 background: var(--surface-dark);
 display: flex; align-items: center; justify-content: center;
 font-size: 12px; font-weight: 800; color: var(--accent);
}
.nav-user-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }

/* ── NavierAI tab accent ─────────────────────────────────── */
.nav-ai-tab { color: var(--accent-text) !important; }
.nav-ai-tab.active { background: var(--surface-dark) !important; color: var(--accent) !important; }

/* ── Country Switcher ────────────────────────────────────── */
.nav-country-switcher { position: relative; }
.nav-country-btn {
 display: flex; align-items: center; gap: 5px;
 padding: 5px 10px 5px 8px; border-radius: 100px;
 background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.08);
 font-size: 12px; font-weight: 700; cursor: pointer;
 font-family: var(--font-heading); color: var(--text-primary);
 white-space: nowrap; transition: background var(--transition);
}
.nav-country-btn:hover { background: rgba(0,0,0,0.08); }
.nav-country-chevron {
 font-size: 14px !important; line-height: 1;
 transition: transform var(--transition); color: var(--text-muted);
}
.nav-country-switcher.open .nav-country-chevron { transform: rotate(180deg); }
.nav-country-flag { font-size: 16px; line-height: 1; }

.nav-country-dropdown {
 position: absolute; top: calc(100% + 8px); right: 0;
 background: rgba(255,255,255,0.97);
 backdrop-filter: blur(24px) saturate(180%);
 -webkit-backdrop-filter: blur(24px) saturate(180%);
 border: 1px solid rgba(0,0,0,0.07);
 border-radius: 20px; padding: 6px;
 box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.05);
 min-width: 220px; z-index: 300;
 display: none; flex-direction: column; gap: 1px;
}
.nav-country-dropdown.open {
 display: flex;
 animation: nav-dd-in 0.14s cubic-bezier(0.34,1.16,0.64,1);
}
@keyframes nav-dd-in {
 from { opacity: 0; transform: translateY(-6px) scale(0.96); }
 to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-country-option {
 display: flex; align-items: center; gap: 10px;
 padding: 9px 12px; border-radius: 12px; cursor: pointer;
 transition: background var(--transition);
 font-size: 13px; font-weight: 600; color: var(--text-primary);
 border: none; background: transparent; text-align: left; width: 100%;
 font-family: var(--font-body);
}
.nav-country-option:hover { background: var(--bg-secondary); }
.nav-country-option.selected { background: var(--surface-dark); color: #f5f2f1; }
.nco-flag { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; line-height: 1; }
.nco-info { flex: 1; min-width: 0; }
.nco-name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.nco-tier {
 font-size: 10px; font-weight: 700; text-transform: uppercase;
 letter-spacing: 0.7px; color: var(--text-muted); margin-top: 2px;
}
.nav-country-option.selected .nco-tier { color: rgba(197,254,0,0.55); }
.nco-check {
 font-size: 14px !important; color: var(--accent);
 opacity: 0; flex-shrink: 0;
}
.nav-country-option.selected .nco-check { opacity: 1; }

/* ── Visa nav dropdown ─────────────────────────────────────── */
.nav-visa-wrap {
  position: relative; display: flex; align-items: center;
}
.nav-visa-btn {
  padding: 6px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 700; font-family: var(--font-heading);
  color: var(--text-secondary);
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 2px;
  transition: all var(--transition); white-space: nowrap;
}
.nav-visa-wrap:hover .nav-visa-btn { background: rgba(255,255,255,0.9); color: var(--text-primary); }
.nav-visa-wrap.active .nav-visa-btn { background: var(--surface-dark); color: var(--accent); }
.nav-visa-chevron {
  font-size: 11px !important; transition: transform var(--transition);
}
.nav-visa-wrap:hover .nav-visa-chevron { transform: rotate(180deg); }
.nav-visa-dd {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 14px; padding: 5px; min-width: 174px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05);
  border: 1px solid rgba(255,255,255,0.7);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
}
.nav-visa-wrap:hover .nav-visa-dd,
.nav-visa-wrap.open .nav-visa-dd {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-visa-wrap.open .nav-visa-chevron { transform: rotate(180deg); }
.nav-visa-dd-item {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700; font-family: var(--font-heading);
  color: var(--text-secondary); text-decoration: none;
  transition: all var(--transition); white-space: nowrap;
}
.nav-visa-dd-item:hover { background: rgba(255,255,255,0.9); color: var(--text-primary); }
.nav-visa-dd-item.current { background: var(--surface-dark); color: var(--accent); }
.nav-visa-dd-item.disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }

/* ── Plan upgrade banner (fixed below nav, all dashboard pages) ── */
@keyframes plan-pill-glow {
 0%, 62%, 100% { background: #f5c842; }
 76%, 86%      { background: rgba(255,255,255,0.88); }
}
.report-plan-bar {
 position: fixed;
 top: 70px; left: 50%; transform: translateX(-50%);
 width: calc(100% - 48px); max-width: 1400px;
 z-index: 99;
 display: flex; align-items: center; justify-content: center; gap: 12px;
 padding: 7px 20px 7px;
 background: var(--accent);
 border-radius: 0 0 20px 20px;
 font-size: 12px; font-weight: 600; color: var(--accent-text);
 box-shadow: 0 6px 24px rgba(197,254,0,0.35);
}
/* Corner fills — match the 28px effective radius of the nav pill,
   filling the gap between the nav's curved bottom corners and
   the bar's flat top edge. Nav (z-index:100) sits on top. */
.report-plan-bar::before,
.report-plan-bar::after {
 content: ''; position: absolute;
 top: -28px; width: 28px; height: 28px;
 background: var(--accent); pointer-events: none;
}
.report-plan-bar::before { left: 0;  border-top-left-radius:  28px; }
.report-plan-bar::after  { right: 0; border-top-right-radius: 28px; }
.report-plan-badge {
 display: inline-flex; align-items: center; gap: 5px;
 padding: 3px 10px; border-radius: 100px;
 background: rgba(56,75,0,0.18); color: var(--accent-text);
 font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
 white-space: nowrap; flex-shrink: 0;
}
.report-plan-text { color: var(--accent-text); font-weight: 600; }
.report-plan-link {
 display: inline-flex; align-items: center;
 padding: 4px 12px; border-radius: 100px;
 background: #f5c842;
 color: var(--accent-text); font-weight: 800; font-size: 11px;
 text-decoration: none; white-space: nowrap;
 animation: plan-pill-glow 4.5s ease-in-out infinite;
}
.report-plan-link:hover { animation: none; background: rgba(255,255,255,0.88); color: var(--accent-text); }

/* ── PAGE SHELL ──────────────────────────────────────────────── */
.page-shell { padding-top: 80px; min-height: 100vh; }
.page-center {
 max-width: 1400px; margin: 0 auto;
 padding: var(--space-xl) var(--space-xl);
}
.page-narrow {
 max-width: 720px; margin: 0 auto;
 padding: var(--space-3xl) var(--space-xl);
}

/* ── DASHBOARD LAYOUT ────────────────────────────────────────── */
.dash-layout {
 display: grid;
 grid-template-columns: 220px 1fr;
 min-height: calc(100vh - 80px);
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
 background: white; border-right: 1px solid var(--border);
 padding: var(--space-xl) 0; position: sticky;
 top: 80px; height: calc(100vh - 80px); overflow-y: auto;
}
.sidebar-trip {
 padding: 0 var(--space-md) var(--space-lg);
 border-bottom: 1px solid var(--border); margin-bottom: var(--space-md);
}
.trip-chip {
 background: var(--accent-light); border: 1px solid rgba(197,254,0,0.3);
 border-radius: var(--radius-xl); padding: 12px 14px;
}
.trip-chip-label { font-size: 10px; color: var(--accent-text); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.trip-chip-name  { font-family: var(--font-heading); font-weight: 700; font-size: 13px; margin-top: 3px; }
.trip-chip-score { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.trip-chip-score strong { color: var(--accent-text); }
.sidebar-section-label {
 font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
 color: var(--text-muted); padding: var(--space-md) var(--space-md) var(--space-xs);
 font-weight: 700;
}
.nav-item {
 display: flex; align-items: center; gap: 10px;
 padding: 10px var(--space-md); border-radius: var(--radius-lg);
 margin: 1px var(--space-sm); cursor: pointer; font-size: 13px;
 color: var(--text-secondary); transition: all var(--transition);
 text-decoration: none; font-family: var(--font-body);
}
.nav-item:hover { background: var(--bg-secondary); color: var(--text-primary); }
.nav-item.active {
 background: var(--surface-dark); color: var(--accent);
 font-weight: 700;
}
.nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.premium-nav-item {
 display: flex; align-items: center; gap: 10px;
 padding: 10px var(--space-md); font-size: 13px;
 color: var(--text-muted); opacity: 0.6;
}
.premium-nav-item .lock-icon { font-size: 11px; color: var(--gold); }

/* ── DASHBOARD MAIN ──────────────────────────────────────────── */
.dash-main { padding: var(--space-xl) var(--space-xl); overflow-y: auto; }
.dash-header { margin-bottom: var(--space-xl); }
.dash-greeting { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.dash-title { font-family: var(--font-heading); font-weight: 800; font-size: 32px; letter-spacing: -1px; }

/* ── BENTO GRIDS ─────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.grid-dest { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

/* ── TOPBAR (for score/assessment pages) ─────────────────────── */
.topbar {
 position: sticky; top: 14px; z-index: 200;
 display: grid; grid-template-columns: auto 1fr auto;
 align-items: center;
 background: rgba(255,255,255,0.88);
 backdrop-filter: blur(24px) saturate(180%);
 -webkit-backdrop-filter: blur(24px) saturate(180%);
 border: 1px solid rgba(255,255,255,0.7);
 border-radius: 100px;
 padding: 7px 10px 7px 20px;
 box-shadow: 0 4px 32px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
 .grid-4 { grid-template-columns: repeat(2, 1fr); }
 .nav { width: calc(100% - 32px); }
 .bento { gap: 16px; }
}
@media (max-width: 768px) {
 .dash-layout { grid-template-columns: 1fr; }
 .sidebar { display: none; }
 .grid-2, .grid-3 { grid-template-columns: 1fr; }
 .grid-dest { grid-template-columns: repeat(2, 1fr); }
 .nav-links-wrap { display: none; }
 .page-center, .page-narrow { padding: var(--space-xl) var(--space-md); }
 .nav { width: calc(100% - 24px); }
}