/* ================================================================
   IDA & VOLTA v5.0 — app.css
   Professional GPS Navigation for Portugal's Iconic Routes
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg:       #0a0a12;
  --bg-1:     #0f0f1c;
  --bg-2:     #161628;
  --bg-3:     #1e1e36;
  --bg-glass: rgba(10,10,18,0.88);
  --border:   rgba(255,255,255,0.06);
  --border-2: rgba(255,255,255,0.12);
  --accent:   #ff3d5a;
  --accent-2: #ff6b35;
  --gold:     #fbbf24;
  --green:    #10b981;
  --blue:     #3b82f6;
  --text:     #f1f1f5;
  --text-2:   #a1a1b5;
  --text-3:   #5a5a72;
  --r:        14px;
  --r-lg:     20px;
  --r-xl:     28px;
  --font:     'Outfit', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --shadow:   0 8px 32px rgba(0,0,0,0.4);
  --en2:      #ff3d5a;
  --rn:       #3b82f6;
  --cs:       #10b981;
  --safe-b:   env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%; width:100%; overflow:hidden;
  font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a { color:var(--text-2); text-decoration:none; }

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

/* ===== VIEW SYSTEM ===== */
.view { position:fixed; inset:0; display:none; flex-direction:column; z-index:1; }
.view.active { display:flex; }

/* ===== HOME ===== */
#v-home { background:var(--bg); z-index:100; overflow-y:auto; overflow-x:hidden; }
.home-hero {
  position:relative; padding:56px 24px 32px;
  background:linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow:hidden;
}
.home-hero::before {
  content:''; position:absolute; top:-40%; right:-25%; width:500px; height:500px;
  background:radial-gradient(circle, rgba(255,61,90,0.07) 0%, transparent 70%);
  pointer-events:none;
}
.home-brand { position:relative; z-index:1; }
.home-logo {
  font-size:2.6rem; font-weight:900; letter-spacing:-1px; line-height:1;
  background:linear-gradient(135deg, #fff 0%, var(--text-2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.home-logo span {
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.home-sub { font-size:0.85rem; color:var(--text-3); margin-top:6px; font-weight:400; letter-spacing:0.5px; }
.home-stats { display:flex; gap:24px; margin-top:28px; position:relative; z-index:1; }
.home-stat-n { font-size:1.8rem; font-weight:800; font-variant-numeric:tabular-nums; }
.home-stat-l { font-size:0.6rem; color:var(--text-3); text-transform:uppercase; letter-spacing:1.5px; margin-top:2px; }
.home-section-title {
  font-size:0.65rem; text-transform:uppercase; letter-spacing:2px;
  color:var(--text-3); padding:28px 24px 14px; font-weight:600;
}

/* Route Cards */
.route-cards { padding:0 16px 12px; display:flex; flex-direction:column; gap:12px; }
.route-card {
  position:relative; overflow:hidden;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px 20px 16px;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor:pointer;
}
.route-card:active { transform:scale(0.98); }
.route-card::before {
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
  border-radius:0 4px 4px 0;
}
.route-card[data-route="en2"]::before { background:var(--en2); }
.route-card[data-route="rn"]::before  { background:var(--rn); }
.route-card[data-route="cs"]::before  { background:var(--cs); }
.route-card:hover { background:var(--bg-2); border-color:var(--border-2); }
.rc-top { display:flex; align-items:flex-start; justify-content:space-between; }
.rc-icon { font-size:1.8rem; margin-bottom:6px; }
.rc-badge {
  font-size:0.6rem; padding:4px 10px; border-radius:20px;
  background:rgba(255,255,255,0.06); color:var(--text-2); font-weight:500;
}
.rc-name { font-size:1.1rem; font-weight:700; margin-bottom:3px; }
.rc-desc { font-size:0.8rem; color:var(--text-2); margin-bottom:14px; }
.rc-meta { display:flex; gap:14px; align-items:center; }
.rc-km { font-family:var(--font-mono); font-weight:600; font-size:0.9rem; }
.rc-km small { color:var(--text-3); font-weight:400; }
.rc-transports { display:flex; gap:5px; margin-left:auto; }
.rc-transport {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; background:var(--bg-3); transition:all 0.2s;
}
.rc-transport:hover { background:rgba(255,255,255,0.12); }
.rc-transport.active { background:var(--accent); color:#fff; }
.rc-explore {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; padding:10px 20px; border-radius:10px;
  font-size:0.82rem; font-weight:600;
  background:rgba(255,255,255,0.04); border:1px solid var(--border-2);
  transition:all 0.2s;
}
.route-card:hover .rc-explore { background:rgba(255,255,255,0.08); }

.home-settings {
  display:flex; align-items:center; gap:10px;
  padding:16px 20px; margin:8px 16px 16px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--r); cursor:pointer; transition:all 0.2s;
}
.home-settings:hover { background:var(--bg-2); }
.hs-icon { font-size:1.1rem; opacity:0.6; }
.hs-text { font-size:0.88rem; color:var(--text-2); }

.home-footer {
  text-align:center; padding:20px 24px 40px;
  font-size:0.68rem; color:var(--text-3); line-height:1.7;
}

/* ===== MAP VIEW ===== */
#v-map { z-index:50; }
#map { flex:1; z-index:1; background:var(--bg); }
.leaflet-control-zoom { display:none!important; }
.leaflet-control-attribution { font-size:9px!important; background:rgba(0,0,0,0.5)!important; color:#666!important; }

.map-top {
  position:absolute; top:0; left:0; right:0; z-index:1000;
  padding:calc(env(safe-area-inset-top,12px) + 8px) 12px 0;
  display:flex; align-items:center; gap:8px;
  pointer-events:none;
}
.map-top > * { pointer-events:auto; }
.mt-btn {
  width:44px; height:44px; border-radius:12px;
  background:var(--bg-glass); backdrop-filter:blur(16px);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:all 0.2s;
}
.mt-btn:active { transform:scale(0.92); }
.mt-route-pill {
  flex:1; height:44px; border-radius:12px;
  background:var(--bg-glass); backdrop-filter:blur(16px);
  border:1px solid var(--border);
  display:flex; align-items:center; padding:0 14px; gap:8px;
  font-size:0.85rem; font-weight:600; overflow:hidden;
}
.mt-route-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mt-gps {
  display:flex; align-items:center; gap:5px;
  height:44px; border-radius:12px; padding:0 12px;
  background:var(--bg-glass); backdrop-filter:blur(16px);
  border:1px solid var(--border); font-size:0.7rem; color:var(--text-2);
}
.gps-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.gps-dot.off  { background:var(--text-3); }
.gps-dot.good { background:var(--green); box-shadow:0 0 8px var(--green); }
.gps-dot.mid  { background:var(--gold); box-shadow:0 0 8px var(--gold); }
.gps-dot.poor { background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* Reroute Banner */
.reroute-banner {
  position:absolute; top:68px; left:12px; right:12px; z-index:1100;
  background:linear-gradient(135deg, rgba(255,61,90,0.95), rgba(255,107,53,0.95));
  border-radius:var(--r); padding:14px 16px;
  display:none; align-items:center; gap:12px;
  animation:reroute-pulse 2s infinite;
  box-shadow:0 4px 24px rgba(255,61,90,0.3);
}
.reroute-banner.show { display:flex; }
@keyframes reroute-pulse { 0%,100%{opacity:1} 50%{opacity:0.85} }
.rb-icon { font-size:1.3rem; }
.rb-text { flex:1; font-size:0.85rem; font-weight:500; }
.rb-btn { padding:6px 14px; border-radius:8px; background:rgba(255,255,255,0.2); font-size:0.8rem; font-weight:600; }

/* Nav Card */
.nav-card {
  position:absolute; top:68px; left:12px; right:12px; z-index:1050;
  background:var(--bg-glass); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:var(--r);
  padding:16px; display:none; align-items:center; gap:14px;
}
.nav-card.show { display:flex; }
.nc-dir {
  width:52px; height:52px; border-radius:14px;
  background:var(--bg-3); display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; flex-shrink:0;
}
.nc-info { flex:1; min-width:0; }
.nc-dist { font-family:var(--font-mono); font-size:1.3rem; font-weight:700; line-height:1; }
.nc-street { font-size:0.82rem; color:var(--text-2); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Bottom Sheet */
.bottom-sheet {
  position:absolute; bottom:0; left:0; right:0; z-index:1000;
  background:var(--bg-1); border-top:1px solid var(--border);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding-bottom:var(--safe-b);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  max-height:55vh; overflow-y:auto;
}
.bottom-sheet.collapsed { transform:translateY(calc(100% - 70px)); }
.bs-handle { width:36px; height:4px; border-radius:2px; background:var(--text-3); margin:10px auto 0; cursor:pointer; }

/* HUD */
.hud { display:none; padding:16px 16px 0; gap:8px; }
.hud.show { display:grid; grid-template-columns:1fr 1fr 1fr; }
.hud-cell {
  background:var(--bg-2); border-radius:var(--r); padding:14px 10px; text-align:center;
  border:1px solid var(--border);
}
.hud-val { font-family:var(--font-mono); font-size:1.5rem; font-weight:600; line-height:1; }
.hud-val.speed { color:var(--green); }
.hud-val.dist  { color:var(--accent); }
.hud-val.eta   { color:var(--gold); }
.hud-lbl { font-size:0.58rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-3); margin-top:6px; }

/* Action Bar */
.action-bar { display:flex; gap:8px; padding:14px 16px; }
.ab-btn {
  flex:1; height:48px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:0.82rem; font-weight:600;
  background:var(--bg-2); border:1px solid var(--border);
  transition:all 0.2s;
}
.ab-btn:active { transform:scale(0.96); }
.ab-btn .ab-i { font-size:1.1rem; }
.ab-btn.go   { background:linear-gradient(135deg,var(--green),#059669); border-color:var(--green); color:#fff; }
.ab-btn.stop { background:linear-gradient(135deg,var(--accent),#dc2626); border-color:var(--accent); color:#fff; }

/* Route Strip */
.route-strip {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px 14px; font-size:0.76rem; color:var(--text-3);
}
.rs-val { font-family:var(--font-mono); color:var(--text-2); font-weight:500; }

/* ===== PLANNER ===== */
#v-planner { z-index:80; background:var(--bg); overflow-y:auto; }
.plan-top {
  position:sticky; top:0; z-index:10;
  padding:calc(env(safe-area-inset-top,12px) + 8px) 16px 12px;
  background:var(--bg); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.plan-back {
  width:40px; height:40px; border-radius:12px;
  background:var(--bg-2); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.plan-title { font-size:1.05rem; font-weight:700; flex:1; }
.plan-save {
  padding:8px 18px; border-radius:10px; font-size:0.82rem; font-weight:600;
  background:var(--green); color:#fff;
}

/* Day count setup */
.plan-setup {
  padding:24px 16px; text-align:center;
  background:var(--bg-1); margin:16px; border-radius:var(--r-lg);
  border:1px solid var(--border);
}
.ps-question { font-size:1rem; font-weight:600; margin-bottom:16px; }
.ps-counter { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:16px; }
.ps-btn {
  width:44px; height:44px; border-radius:12px;
  background:var(--bg-3); border:1px solid var(--border-2);
  font-size:1.4rem; font-weight:700; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.ps-btn:active { transform:scale(0.9); }
.ps-num {
  font-family:var(--font-mono); font-size:2.4rem; font-weight:800;
  min-width:60px; color:var(--gold);
}
.ps-apply {
  padding:12px 28px; border-radius:var(--r);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:0.9rem; font-weight:600; font-family:var(--font);
  transition:all 0.2s;
}
.ps-apply:active { transform:scale(0.96); }
.ps-hint { font-size:0.75rem; color:var(--text-3); margin-top:10px; }

.plan-summary {
  display:flex; gap:10px; padding:0 16px 12px; overflow-x:auto;
  scrollbar-width:none;
}
.plan-summary::-webkit-scrollbar { display:none; }
.ps-chip {
  flex-shrink:0; padding:10px 16px; border-radius:var(--r);
  background:var(--bg-1); border:1px solid var(--border);
  text-align:center; min-width:80px;
}
.ps-chip-val { font-family:var(--font-mono); font-size:1.1rem; font-weight:700; }
.ps-chip-lbl { font-size:0.58rem; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }

.plan-days { padding:0 16px 120px; }
.plan-day {
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden;
}
.pd-header {
  display:flex; align-items:center; padding:14px 16px; gap:12px;
  cursor:pointer; transition:background 0.2s;
}
.pd-header:hover { background:var(--bg-2); }
.pd-num {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.85rem; flex-shrink:0;
}
.pd-info { flex:1; min-width:0; }
.pd-route { font-weight:600; font-size:0.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-km { font-size:0.75rem; color:var(--text-3); font-family:var(--font-mono); margin-top:2px; }
.pd-chevron { font-size:0.9rem; color:var(--text-3); transition:transform 0.3s; }
.plan-day.open .pd-chevron { transform:rotate(180deg); }
.pd-stops { display:none; padding:0 16px 14px; }
.plan-day.open .pd-stops { display:block; }
.pd-stop {
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border);
}
.pd-stop:last-child { border-bottom:none; }
.pd-stop-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--text-3); flex-shrink:0; }
.pd-stop-dot.start { background:var(--gold); border-color:var(--gold); }
.pd-stop-dot.end { background:var(--accent); border-color:var(--accent); }
.pd-stop-name { flex:1; font-size:0.85rem; }
.pd-stop-actions { display:flex; gap:4px; }
.pd-stop-btn {
  width:28px; height:28px; border-radius:6px;
  background:var(--bg-3); display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; transition:all 0.15s;
}
.pd-stop-btn:hover { background:rgba(255,255,255,0.12); }
.pd-day-actions {
  display:flex; gap:8px; padding:0 16px 14px;
}
.plan-day.open .pd-day-actions { display:flex; }
.pd-day-btn {
  padding:6px 14px; border-radius:8px; font-size:0.75rem;
  background:var(--bg-3); border:1px solid var(--border);
  color:var(--text-2); transition:all 0.2s;
}
.pd-day-btn:hover { background:rgba(255,255,255,0.08); }
.pd-day-btn.danger { color:var(--accent); border-color:rgba(255,61,90,0.2); }
.pd-day-btn.danger:hover { background:rgba(255,61,90,0.1); }

/* ===== STAMPS ===== */
#v-stamps { z-index:80; background:var(--bg); overflow-y:auto; }
.stamps-top {
  position:sticky; top:0; z-index:10;
  padding:calc(env(safe-area-inset-top,12px) + 8px) 16px 12px;
  background:var(--bg); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.stamps-progress {
  margin:20px 16px; padding:20px; border-radius:var(--r-lg);
  background:var(--bg-1); border:1px solid var(--border); text-align:center;
}
.sp-bar-bg { height:6px; border-radius:3px; background:var(--bg-3); margin-top:12px; overflow:hidden; }
.sp-bar { height:100%; border-radius:3px; transition:width 0.5s; }
.sp-pct { font-size:2rem; font-weight:800; font-family:var(--font-mono); }
.sp-label { font-size:0.75rem; color:var(--text-3); margin-top:2px; }
.stamps-grid { padding:0 16px 100px; display:flex; flex-direction:column; gap:6px; }
.stamp-row {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:var(--r); background:var(--bg-1); border:1px solid var(--border);
  transition:all 0.2s;
}
.stamp-row.done { border-color:rgba(16,185,129,0.3); background:rgba(16,185,129,0.05); }
.sr-check { font-size:1.2rem; }
.sr-info { flex:1; }
.sr-name { font-size:0.88rem; font-weight:500; }
.sr-day { font-size:0.7rem; color:var(--text-3); }

/* ===== SETTINGS ===== */
#v-settings { z-index:80; background:var(--bg); overflow-y:auto; }
.settings-top {
  position:sticky; top:0; z-index:10;
  padding:calc(env(safe-area-inset-top,12px) + 8px) 16px 12px;
  background:var(--bg); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.settings-group { padding:20px 16px 0; }
.sg-title { font-size:0.6rem; text-transform:uppercase; letter-spacing:2px; color:var(--text-3); margin-bottom:10px; font-weight:600; }
.setting-row {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:var(--r);
  background:var(--bg-1); border:1px solid var(--border);
  margin-bottom:6px; cursor:pointer; transition:background 0.2s;
}
.setting-row:hover { background:var(--bg-2); }
.setting-row .s-icon { font-size:1.1rem; width:24px; text-align:center; flex-shrink:0; }
.setting-row .s-label { flex:1; font-size:0.88rem; }
.setting-row .s-value { font-size:0.82rem; color:var(--text-2); }
.lang-opts { display:flex; gap:5px; }
.lang-opt {
  padding:7px 12px; border-radius:8px; font-size:0.8rem;
  background:var(--bg-3); border:2px solid transparent; transition:all 0.2s;
}
.lang-opt.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ===== MODAL ===== */
.modal-overlay {
  position:fixed; inset:0; z-index:5000; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(8px);
}
.modal-overlay.show { display:flex; }
.modal-box {
  background:var(--bg-1); border:1px solid var(--border-2);
  border-radius:var(--r-xl); padding:28px 24px;
  width:340px; max-width:90vw;
}
.modal-title { font-size:1.05rem; font-weight:700; text-align:center; margin-bottom:18px; }
.modal-options { display:flex; flex-direction:column; gap:8px; }
.modal-opt {
  padding:13px 16px; border-radius:var(--r);
  background:var(--bg-2); border:1px solid var(--border);
  text-align:center; font-size:0.88rem; transition:all 0.2s;
}
.modal-opt:hover { border-color:var(--accent); background:var(--bg-3); }

/* ===== TOAST ===== */
.toast {
  position:fixed; bottom:120px; left:50%; transform:translateX(-50%); z-index:9000;
  background:var(--bg-2); border:1px solid var(--border-2);
  color:var(--text); padding:12px 24px; border-radius:var(--r);
  font-size:0.85rem; box-shadow:var(--shadow); pointer-events:none;
  animation:toast-anim 3s forwards;
}
@keyframes toast-anim {
  0%   { opacity:0; transform:translateX(-50%) translateY(12px); }
  10%  { opacity:1; transform:translateX(-50%) translateY(0); }
  80%  { opacity:1; }
  100% { opacity:0; transform:translateX(-50%) translateY(-8px); }
}

/* ===== LEAFLET CUSTOM ===== */
.custom-popup .leaflet-popup-content-wrapper {
  background:var(--bg-2); color:var(--text); border-radius:var(--r);
  border:1px solid var(--border-2); box-shadow:var(--shadow);
}
.custom-popup .leaflet-popup-tip { background:var(--bg-2); }
.custom-popup .leaflet-popup-content { margin:12px 14px; font-family:var(--font); }
.popup-name { font-weight:600; font-size:0.92rem; margin-bottom:2px; }
.popup-sub { font-size:0.75rem; color:var(--text-2); margin-bottom:8px; }
.popup-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 14px; border-radius:8px; font-size:0.78rem; font-weight:600;
  background:var(--accent); color:#fff; cursor:pointer; border:none;
  font-family:var(--font);
}

/* User marker */
.user-pin {
  width:22px; height:22px; border-radius:50%;
  background:var(--blue); border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(59,130,246,0.25), 0 2px 8px rgba(0,0,0,0.3);
  position:relative;
}
.user-pin::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  background:rgba(59,130,246,0.12); animation:user-ring 2s infinite;
}
@keyframes user-ring { 0%,100%{transform:scale(1);opacity:0.4} 50%{transform:scale(1.4);opacity:0} }

/* ===== RESPONSIVE ===== */
@media(min-width:600px) {
  .bottom-sheet { left:16px; right:auto; width:400px; border-radius:var(--r-xl); bottom:16px; border:1px solid var(--border); }
  .reroute-banner, .nav-card { left:16px; right:auto; width:400px; }
}