/* ═══════════════════════════════════════════════════════════════════
   OneMetro — Liquid Glass UI  |  style.css
   ═══════════════════════════════════════════════════════════════════
   COLOR PALETTE (edit these CSS variables to retheme everything):
   --bg-deep      → deepest background
   --bg-mid       → page body
   --glass-*      → frosted glass card backgrounds
   --accent       → primary accent (currently periwinkle blue)
   --accent2      → secondary accent (soft teal)
   --text-*       → text hierarchy
   --line-*       → coloured metro line connector dots
   ═══════════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── CSS VARIABLES ─────────────────────────────────────────────────
   TO CHANGE COLOURS: edit the values in :root below.
   - bg-deep / bg-mid   → background gradient layers
   - accent / accent2   → primary & secondary brand colours
   - glass-*            → frosted card surfaces
   ─────────────────────────────────────────────────────────────────*/
:root {
  /* Backgrounds */
  --bg-deep: #0d0d0d;
  --bg-mid:  #141414;
  --bg-soft: #1c1c1c;

  /* Glass surfaces */
  --glass-1:  rgba(255,255,255,0.035);
  --glass-2:  rgba(255,255,255,0.06);
  --glass-3:  rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.08);
  --glass-border2: rgba(255,255,255,0.14);
  --glass-shadow: rgba(0,0,0,0.6);

  /* ── ACCENT COLORS — change these to retheme ── */
  --accent:    #4f8ef7;            /* primary blue */
  --accent2:   #34d399;            /* success green */
  --accent3:   #fbbf24;            /* amber */
  --accent-glow: rgba(79,142,247,0.15);
  --accent-glow2: rgba(79,142,247,0.07);

  /* Text */
  --text:  #f0f0f0;
  --text2: #9ca3af;
  --text3: #4b5563;

  /* Semantic */
  --success: #34d399;
  --warn:    #ffd97d;
  --danger:  #ff7eb6;
  --info:    #7cc4ff;

  /* Misc */
  --header-h: 64px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  /* Legacy vars (kept so metro-line colours still work) */
  --green: #5de8a0;
  --green2: #3dca82;
  --green3: #1f7a4e;
  --green-glow: rgba(93,232,160,0.12);
  --green-glow2: rgba(93,232,160,0.06);
  --card: var(--glass-1);
  --card2: var(--glass-2);
  --card3: var(--glass-3);
  --bg: var(--bg-deep);
  --bg2: var(--bg-mid);
  --bg3: var(--bg-soft);
  --border: var(--glass-border);
  --border2: var(--glass-border2);
  --red: #ff7eb6;
  --yellow: var(--warn);
  --blue: var(--accent);
  --orange: #ffb347;
  --purple: var(--accent3);
  --cyan: var(--accent2);
}

/* ── RESET & BASE ─────────────────────────────────────────────────*/
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
body{
  background: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 120% 60% at 20% -10%, rgba(124,156,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 85% 15%, rgba(93,232,200,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(232,157,255,0.10) 0%, transparent 50%);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height:100vh;
  line-height:1.55;
}

/* ── LIQUID GLASS MIXIN (reusable class) ──────────────────────────
   Apply .glass to any element to get the frosted glass card look.
   Adjust --glass-blur for stronger/weaker blur effect.
   ─────────────────────────────────────────────────────────────────*/
.glass {
  background: var(--glass-2);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
.glass-strong {
  background: var(--glass-3);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  border: 1px solid var(--glass-border2);
  border-radius: var(--radius-lg);
}

/* ── HEADER ──────────────────────────────────────────────────────*/
.header {
  height: var(--header-h);
  background: rgba(12,14,26,0.75);
  backdrop-filter: blur(28px) saturate(2);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top:0; z-index:200;
  display:flex; align-items:center;
  padding:0 40px; gap:32px;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.logo-mark{
  width:34px;height:34px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:#fff;
  box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.logo-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:var(--text);letter-spacing:-0.3px;}
.logo-name span{color:var(--accent);}
.header-nav{display:flex;align-items:center;gap:2px;flex:1;}
.nav-link{
  padding:6px 14px;border-radius:8px;font-size:13px;font-weight:500;
  color:var(--text2);cursor:pointer;transition:all 0.18s;text-decoration:none;white-space:nowrap;
}
.nav-link:hover{color:var(--text);background:var(--glass-2);}
.nav-link.active{color:var(--accent);background:var(--accent-glow2);}
.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.city-badge{
  display:flex;align-items:center;gap:7px;
  background:var(--glass-2);border:1px solid var(--glass-border2);
  border-radius:10px;padding:6px 13px;cursor:pointer;
  transition:all 0.18s;font-size:13px;font-weight:600;color:var(--text);
}
.city-badge:hover{border-color:var(--accent);background:var(--accent-glow2);}
.badge-dot{width:8px;height:8px;background:var(--accent2);border-radius:50%;animation:pulse 2.5s ease infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(1.5);}}
.badge-arrow{font-size:10px;color:var(--text3);}

/* ── PAGE LAYOUT ──────────────────────────────────────────────────*/
.page{max-width:1220px;margin:0 auto;padding:40px 40px 80px;display:flex;gap:28px;align-items:flex-start;}
.col-left{flex:0 0 370px;display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--header-h) + 24px);overflow:visible;}
.col-right{flex:1;display:flex;flex-direction:column;gap:24px;min-width:0;}

/* ── HERO TEXT ───────────────────────────────────────────────────*/
.hero-label{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-glow2);border:1px solid rgba(124,156,255,0.2);
  color:var(--accent);font-size:10.5px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 12px;border-radius:50px;margin-bottom:10px;
}
.hero-label::before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%;}
.hero-h1{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:700;line-height:1.1;letter-spacing:-0.8px;color:var(--text);}
.hero-h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:13.5px;color:var(--text2);margin-top:9px;line-height:1.65;}

/* ── ROUTE FINDER CARD ──────────────────────────────────────────*/
.route-card{
  background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid var(--glass-border2);
  border-radius: var(--radius-lg);
  padding:22px;
  position:relative;
  z-index:20; /* stay above stats-row so dropdown floats over it */
  box-shadow: 0 8px 40px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.08);
}
.rcard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.rcard-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--text);}
.rcard-city{font-size:12px;color:var(--text3);font-weight:500;}
.inputs-wrap{position:relative;z-index:50;}
.connector{position:absolute;left:19px;top:50px;bottom:50px;width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent2));border-radius:2px;opacity:.5;}
.s-row{
  background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.09);
  border-radius:16px;
  padding:13px 14px 13px 48px;
  margin-bottom:10px;position:relative;
  transition:border-color 0.25s,box-shadow 0.25s,background 0.25s;
}
.s-row:last-of-type{margin-bottom:0;}
.s-row:focus-within{
  border-color:rgba(124,156,255,0.55);
  background:rgba(124,156,255,0.06);
  box-shadow:0 0 0 3px rgba(124,156,255,0.10);
}
/* FROM dot — hollow ring */
.s-dot{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;
  border:2.5px solid var(--accent);
  background:transparent;z-index:2;
  box-shadow:0 0 10px rgba(124,156,255,0.4);
}
/* TO dot — solid teal */
.s-dot.dest{
  background:var(--accent2);border-color:var(--accent2);
  box-shadow:0 0 10px rgba(93,232,200,0.55);
}
.s-lbl{
  font-size:10px;font-weight:700;letter-spacing:0.8px;
  text-transform:uppercase;color:var(--text3);margin-bottom:4px;
}
.s-input{
  width:100%;background:transparent;border:none;outline:none;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;
  color:var(--text);caret-color:var(--accent);
  line-height:1.3;
}
.s-input::placeholder{color:var(--text3);font-weight:400;font-size:14px;}

/* Connector line between FROM and TO */
.connector{
  position:absolute;left:22px;top:52px;bottom:52px;
  width:2px;
  background:linear-gradient(to bottom, var(--accent) 0%, var(--accent2) 100%);
  border-radius:2px;opacity:0.35;
}
.connector::before,.connector::after{
  content:'';position:absolute;width:6px;height:6px;
  border-radius:50%;left:-2px;
}
.connector::before{top:-4px;background:var(--accent);opacity:0.8;}
.connector::after{bottom:-4px;background:var(--accent2);opacity:0.8;}

/* Swap button */
.swap-row{display:flex;justify-content:center;margin:6px 0;z-index:5;}
.swap-btn{
  width:34px;height:34px;
  background:rgba(124,156,255,0.1);
  border:1.5px solid rgba(124,156,255,0.25);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;color:var(--accent);transition:all 0.22s;
}
.swap-btn:hover{
  background:rgba(124,156,255,0.2);
  border-color:var(--accent);
  transform:rotate(180deg) scale(1.08);
}

/* Autocomplete */
.ac-wrap{position:relative;}
.ac-drop{position:absolute;top:calc(100% + 4px);left:-44px;right:-12px;background:rgba(13,16,32,0.98);backdrop-filter:blur(28px);border:1px solid var(--glass-border2);border-radius:var(--radius-md);max-height:220px;overflow-y:auto;z-index:9999;display:none;box-shadow:0 24px 60px rgba(0,0,0,0.85);}
.ac-drop.open{display:block;}
.ac-item{padding:10px 14px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;gap:8px;transition:background 0.12s,color 0.12s;}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover{background:var(--accent-glow2);color:var(--text);}
.ac-dots{display:flex;gap:4px;flex-shrink:0;}
.ac-dot{width:8px;height:8px;border-radius:2px;}

/* Find button */
.find-btn{
  width:100%;margin-top:16px;
  background:linear-gradient(135deg, #4f8ef7 0%, #7c5cf6 100%);
  border:none;border-radius:14px;padding:16px;
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all 0.22s cubic-bezier(.22,.9,.32,1);
  box-shadow:0 8px 28px rgba(124,156,255,0.35),
             0 2px 6px rgba(0,0,0,0.2),
             inset 0 1px 0 rgba(255,255,255,0.2);
  letter-spacing:0.2px;
}
.find-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(124,156,255,0.45),0 4px 12px rgba(0,0,0,0.2);
  background:linear-gradient(100deg, #8eaaff 0%, #72f0d4 100%);
}
.find-btn:active{transform:translateY(0);box-shadow:0 4px 16px rgba(124,156,255,0.3);}
.find-btn .spin{border-color:rgba(255,255,255,0.3);border-top-color:#fff;}

/* Stats */
.stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;position:relative;z-index:1;}
.stat-box{background:var(--glass-1);border:1px solid var(--glass-border);backdrop-filter:blur(16px);border-radius:var(--radius-md);padding:14px;text-align:center;}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
.stat-lbl{font-size:11px;color:var(--text3);margin-top:3px;font-weight:500;}

/* ── RESULT SECTION ──────────────────────────────────────────────
   This is the "new screen" that slides in when route is found.
   It uses a slide-up animation for a page-like feel.
   ─────────────────────────────────────────────────────────────────*/
/* ── RESULT PAGE OVERLAY ─────────────────────────────────────────
   When a route is found, this slides in as a full-screen overlay
   on top of everything. User can hit the Back button to return.
   ──────────────────────────────────────────────────────────────*/
.result-sec{
  display:none;
  position:fixed;inset:0;z-index:500;
  background:rgba(12,14,26,0.97);
  backdrop-filter:blur(32px) saturate(1.6);
  -webkit-backdrop-filter:blur(32px) saturate(1.6);
  flex-direction:column;
  overflow-y:auto;
}
.result-sec.vis{
  display:flex;
  animation:pageSlideIn 0.38s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes pageSlideIn{
  from{opacity:0;transform:translateY(100%);}
  to{opacity:1;transform:translateY(0);}
}
/* Inner content container with max-width */
.result-inner{
  max-width:720px;
  width:100%;
  margin:0 auto;
  padding:0 20px 80px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* Result page top bar */
.result-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  position:sticky;top:0;z-index:10;
  background:rgba(12,14,26,0.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  margin-bottom:4px;
}
.result-back{
  width:36px;height:36px;
  background:var(--glass-2);
  border:1px solid var(--glass-border2);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;
  color:var(--text2);transition:all 0.18s;
  flex-shrink:0;
}
.result-back:hover{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);}
.result-topbar-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;font-weight:700;
  color:var(--text);flex:1;
}
.result-topbar-meta{font-size:12px;color:var(--text3);}

/* Route option tabs ── one tab per unique route found
   Add more tab styles here if you want wider tabs on smaller screens */
.route-opts-wrap{display:none;}
.route-opts-wrap.vis{display:block;}
.route-opts-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;}
.route-opts-tabs{display:flex;gap:8px;flex-wrap:wrap;overflow-x:auto;padding-bottom:4px;}

/* Each route tab — grows from flex, wraps cleanly at 3+ routes */
.route-opt-tab{
  flex:1;min-width:140px;
  padding:12px 10px;
  background:var(--glass-1);
  backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  cursor:pointer;text-align:center;transition:all .2s;
  font-family:'DM Sans',sans-serif;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
.route-opt-tab:hover{border-color:var(--glass-border2);background:var(--glass-2);transform:translateY(-1px);}
.route-opt-tab.active{
  border-color:var(--accent);
  background:var(--accent-glow2);
  box-shadow:0 0 0 1px var(--accent), 0 8px 24px var(--accent-glow);
}
.rot-icon{font-size:18px;margin-bottom:4px;}
.rot-label{font-size:12px;font-weight:700;color:var(--text2);}
.route-opt-tab.active .rot-label{color:var(--accent);}
.rot-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.route-opt-tab.active .rot-meta{color:rgba(124,156,255,0.7);}
.rot-persona{font-size:10px;color:var(--text3);margin-top:2px;font-style:italic;}
.route-opt-tab.active .rot-persona{color:var(--accent2);}

/* Result header & pills */
.result-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.result-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--text);}
.result-pills{display:flex;gap:8px;flex-wrap:wrap;}
.rpill{background:var(--glass-2);border:1px solid var(--glass-border);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--text2);}
.rpill.g{background:rgba(93,232,160,0.12);border-color:rgba(93,232,160,0.25);color:var(--success);}

/* Steps card — Liquid Glass */
.steps-card{
  background:linear-gradient(145deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%);
  backdrop-filter:blur(28px) saturate(1.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);
  border:1px solid var(--glass-border2);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:0 8px 40px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Individual route step */
/* ── ROUTE STEPS with COLOURED circles + connectors ─────────────
   Each station dot and connector line uses the actual metro line
   colour. This is set via inline style="--lc:#hexcolor" on .rstep.
   ──────────────────────────────────────────────────────────────*/
.rstep{display:flex;gap:14px;position:relative;padding-bottom:6px;}
/* Colored connector line between steps */
.rstep:not(:last-child)::after{
  content:'';position:absolute;left:10px;top:22px;bottom:0;
  width:2px;
  background:var(--lc, var(--glass-border2));
  opacity:0.55;
}
/* Base circle — colour comes from --lc set per step */
.rnode{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--lc, var(--glass-border2));
  background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;flex-shrink:0;z-index:1;margin-top:1px;
  box-shadow:0 0 6px color-mix(in srgb,var(--lc,transparent) 40%,transparent);
}
/* Start node */
.rnode.s{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 0 12px var(--accent-glow);
  width:26px;height:26px;font-size:10px;
}
/* End node */
.rnode.e{
  background:var(--success);border-color:var(--success);color:#0c1a14;
  box-shadow:0 0 12px rgba(93,232,160,0.5);
  width:26px;height:26px;font-size:10px;
}
/* Interchange node */
.rnode.x{
  background:var(--warn);border-color:var(--warn);color:#1a1200;
  box-shadow:0 0 10px rgba(255,217,125,0.5);
  width:26px;height:26px;font-size:10px;
}
/* Regular stop: filled circle in line colour */
.rnode.reg{
  background:color-mix(in srgb,var(--lc,var(--glass-border2)) 25%,rgba(0,0,0,0.6));
  border-color:var(--lc,var(--glass-border2));
  width:20px;height:20px;
}
.rbody{padding-bottom:6px;}
.rname{font-size:14px;font-weight:600;color:var(--text);}
.rlineinfo{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text3);margin-top:2px;}
.rsq{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.rtag{display:inline-flex;align-items:center;gap:4px;background:rgba(255,217,125,0.1);border:1px solid rgba(255,217,125,0.25);color:var(--warn);font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;margin-top:4px;}

/* ── SECTION BLOCKS ──────────────────────────────────────────────*/
.sblock{background:var(--glass-1);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:22px 24px;}
.sblock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sblock-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--text);}
.sblock-action{font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;}
.sblock-action:hover{opacity:0.7;}

/* Lines tags */
.lines-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.ltag{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:all 0.18s;white-space:nowrap;}
.ltag-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* Services grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(min-width:900px){.svc-grid{grid-template-columns:repeat(4,1fr);}}
.svc-tile{background:var(--glass-2);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:18px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;}
.svc-tile::after{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;opacity:0.08;transition:opacity 0.2s;}
.svc-tile:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.4);border-color:var(--glass-border2);}
.svc-tile:hover::after{opacity:0.18;}
.c-green::after{background:var(--success);}
.c-blue::after{background:var(--accent);}
.c-yellow::after{background:var(--warn);}
.c-orange::after{background:var(--orange);}
.c-purple::after{background:var(--accent3);}
.c-cyan::after{background:var(--accent2);}
.tile-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;background:var(--glass-2);}
.tile-name{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;}
.tile-desc{font-size:11.5px;color:var(--text3);line-height:1.45;}

/* Cities grid */
.cities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ctile{
  background:var(--glass-1);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:0;cursor:pointer;transition:all 0.22s;
  text-align:center;overflow:hidden;
  position:relative;
}
.ctile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.ctile.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 24px var(--accent-glow);}
/* Coloured top band — city's metro colour */
.ctile-band{display:none;}
.ctile-body{padding:10px 10px 12px;}
/* City flag icon SVG area */
.ctile-icon{
  width:100%;height:100px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  margin:0;
  font-size:22px;
  background:var(--glass-2);
  overflow:hidden;
  position:relative;
}
.ctile-icon svg{
  width:100%;height:100%;
  transition:transform 0.35s ease;
}
.ctile:hover .ctile-icon svg{transform:scale(1.06);}
.ctile-icon img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.4s ease;
  filter:brightness(0.85) saturate(0.9);
}
.ctile:hover .ctile-icon img{transform:scale(1.05);filter:brightness(0.95) saturate(1);}
/* City name overlay on image */
.ctile-img-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px 10px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,0.85));
  pointer-events:none;
  z-index:2;
}
.ctile-overlay-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.ctile-overlay-sub{
  font-size:10px;color:rgba(255,255,255,0.7);margin-top:1px;
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.ctile-name{font-size:11.5px;font-weight:700;color:var(--text);line-height:1.2;}
.ctile-count{font-size:10px;color:var(--text3);margin-top:3px;}
.ctile-lines{font-size:9.5px;color:var(--text3);margin-top:2px;}

/* ── MODALS ──────────────────────────────────────────────────────*/
.mbackdrop{position:fixed;inset:0;background:rgba(8,10,20,0.8);backdrop-filter:blur(8px);z-index:400;display:none;align-items:center;justify-content:center;padding:20px;}
.mbackdrop.open{display:flex;}
.mbox{background:rgba(17,20,37,0.92);backdrop-filter:blur(32px);border:1px solid var(--glass-border2);border-radius:var(--radius-lg);padding:28px;width:100%;max-width:520px;max-height:80vh;overflow-y:auto;animation:fadeUp 0.22s ease;box-shadow:0 24px 80px rgba(0,0,0,0.6);}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.mtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.mtitle{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;color:var(--text);}
.mclose{width:30px;height:30px;background:var(--glass-2);border:1px solid var(--glass-border);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:var(--text2);transition:all 0.15s;flex-shrink:0;}
.mclose:hover{color:var(--danger);border-color:rgba(255,126,182,0.3);}
.mbody{font-size:13.5px;color:var(--text2);line-height:1.75;margin-top:12px;}
.mactions{display:flex;gap:10px;margin-top:20px;}
.mbtn{flex:1;padding:12px;border-radius:var(--radius-sm);font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all 0.18s;}
.mbtn.p{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
.mbtn.p:hover{opacity:0.9;}
.mbtn.s{background:var(--glass-2);color:var(--text2);border:1px solid var(--glass-border);}
.mbtn.s:hover{color:var(--text);}
.mcity-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.mcity-opt{display:flex;align-items:center;gap:10px;background:var(--glass-1);border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;transition:all 0.18s;}
.mcity-opt:hover,.mcity-opt.sel{border-color:var(--accent);background:var(--accent-glow2);}
.mco-emoji{font-size:18px;}
.mco-name{font-size:13px;font-weight:600;color:var(--text);}
.mco-count{font-size:10px;color:var(--text3);margin-top:1px;}
.nlist{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.nitem{display:flex;align-items:center;gap:12px;background:var(--glass-1);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:10px 12px;}
.nrank{width:26px;height:26px;border-radius:7px;background:var(--accent-glow2);color:var(--accent);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ninfo{flex:1;}
.nname{font-size:13px;font-weight:600;color:var(--text);}
.nline{font-size:11px;color:var(--text3);margin-top:1px;}
.ndist{font-size:12px;font-weight:700;color:var(--success);background:rgba(93,232,160,0.1);border:1px solid rgba(93,232,160,0.2);padding:3px 9px;border-radius:7px;}
.gmap-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:rgba(124,156,255,0.1);border:1px solid rgba(124,156,255,0.25);border-radius:7px;font-size:15px;text-decoration:none;transition:all 0.18s;cursor:pointer;}
.gmap-btn:hover{background:rgba(124,156,255,0.2);border-color:var(--accent);transform:scale(1.08);}

/* ── FOOTER ──────────────────────────────────────────────────────*/
.footer{background:rgba(12,14,26,0.6);backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);padding:32px 40px;}
.footer-inner{max-width:1220px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.flogo{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.fmark{width:26px;height:26px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10px;color:#fff;}
.fname{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--text);}
.ftag{font-size:12px;color:var(--text3);}
.flinks{display:flex;gap:18px;flex-wrap:wrap;}
.flink{font-size:12px;color:var(--text3);cursor:pointer;transition:color 0.15s;text-decoration:none;}
.flink:hover{color:var(--accent);}
.fcopy{font-size:11px;color:var(--text3);}

/* ── UTILITIES ───────────────────────────────────────────────────*/
.spin{width:15px;height:15px;border:2.5px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:rot 0.6s linear infinite;display:none;}
@keyframes rot{to{transform:rotate(360deg);}}
.estate{text-align:center;padding:36px;}
.estate-icon{font-size:36px;margin-bottom:10px;}
.estate-msg{font-size:13px;color:var(--text2);}

/* ── SCROLLBAR ───────────────────────────────────────────────────*/
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--glass-border2);border-radius:3px;}

/* ── RESPONSIVE ──────────────────────────────────────────────────*/


/* ── SCHEMATIC MAP ────────────────────────────────────────────────
   SVG-based schematic metro map (like Image 1 reference).
   No external library. Updates when Supabase data changes.
   ──────────────────────────────────────────────────────────────*/
.schematic-map-wrap{
  background:#111;
  border-radius:var(--radius-lg);
  border:1px solid var(--glass-border2);
  overflow:hidden;
  position:relative;
}
.schematic-map-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:rgba(0,0,0,0.5);
  border-bottom:1px solid var(--glass-border);
}
.schematic-map-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.schematic-svg-container{
  width:100%;overflow:auto;
  cursor:grab;
  background:#111;
}
.schematic-svg-container:active{cursor:grabbing;}
#schematicSVG{
  min-width:800px;min-height:500px;
  font-family:'DM Sans',sans-serif;
}
/* Station dots on schematic */
.s-station-dot{cursor:pointer;transition:r 0.15s;}
.s-station-dot:hover{filter:brightness(1.4);}
.s-station-label{
  font-size:10px;fill:#ccc;
  pointer-events:none;
}
.s-station-label.interchange{
  font-size:11px;fill:#fff;font-weight:600;
}
/* Highlighted route on schematic */
.s-route-line{
  stroke-dasharray:none;
  filter:drop-shadow(0 0 4px currentColor);
}
.s-from-marker, .s-to-marker{
  font-size:12px;font-weight:800;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}
.schematic-legend{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:10px 14px;
  background:rgba(0,0,0,0.4);
  border-top:1px solid var(--glass-border);
}
.schematic-legend-item{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--text2);
}
.schematic-legend-line{
  width:20px;height:3px;border-radius:2px;flex-shrink:0;
}
/* ── ROUTE MAP SECTION ────────────────────────────────────────────
   Leaflet.js map that renders the found route on a real map.
   The map appears inside the result page below the steps card.
   ─────────────────────────────────────────────────────────────────*/
.map-section {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border2);
  box-shadow: 0 8px 40px var(--glass-shadow);
}
.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--glass-2);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
}
.map-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-toggle {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  transition: all 0.18s;
}
.map-toggle:hover { background: var(--accent-glow2); }
#routeMapContainer {
  height: 340px;
  width: 100%;
  background: #0c0e1a;
  position: relative;
}
/* Override Leaflet styles to match dark theme */
.leaflet-container {
  background: #111425 !important;
  font-family: 'DM Sans', sans-serif !important;
}
.leaflet-tile-pane { filter: brightness(0.75) saturate(0.7) hue-rotate(185deg); }
.leaflet-popup-content-wrapper {
  background: rgba(17,20,37,0.97) !important;
  border: 1px solid var(--glass-border2) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
  color: var(--text) !important;
  backdrop-filter: blur(20px) !important;
}
.leaflet-popup-tip { background: rgba(17,20,37,0.97) !important; }
.leaflet-popup-content { margin: 12px 16px !important; font-size: 13px !important; }
.map-popup-name { font-weight: 700; font-size: 14px; color: #eef0fb; margin-bottom: 4px; }
.map-popup-line { font-size: 11px; color: #8891c0; display: flex; align-items: center; gap: 5px; }
.map-popup-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.map-popup-type { font-size: 10px; margin-top: 4px; font-weight: 600; }
.map-popup-start { color: #7c9cff; }
.map-popup-end   { color: #5de8c8; }
.map-popup-xfer  { color: #ffd97d; }
/* No coords notice */
.map-no-coords {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text3);
  font-size: 13px;
  gap: 8px;
  text-align: center;
  padding: 20px;
}

/* ── POPULAR ROUTES (SEO quick links) ───────────────────────────────
   Shown below results and above metro lines section.
   Each chip fills in From+To and triggers route search.
   ─────────────────────────────────────────────────────────────────*/
.pop-route-chip {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--glass-1);
  border:1px solid var(--glass-border);
  border-radius:20px;padding:7px 14px;
  cursor:pointer;transition:all 0.18s;
  font-size:12px;font-weight:500;
}
.pop-route-chip:hover {
  border-color:var(--accent);
  background:var(--accent-glow2);
  transform:translateY(-1px);
}
.pop-from{color:var(--text2);}
.pop-arrow{color:var(--accent);font-size:11px;}
.pop-to{color:var(--text);}


/* ── MAP STATION LABELS ─────────────────────────────────────────
   .map-label-xfer → interchange stations (always visible)
   .map-label-reg  → regular stations (shown at zoom 13+)
   ──────────────────────────────────────────────────────────────*/
.map-label-reg {
  display: none; /* hidden until zoom ≥ 13, toggled by JS */
}

@media(max-width:1100px){
  .page{flex-direction:column;padding:24px 24px 60px;}
  .col-left{flex:none;width:100%;position:static;}
  .header{padding:0 24px;}
  .cities-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:760px){
  .header-nav{display:none;}
  .hero-h1{font-size:28px;}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .cities-grid{grid-template-columns:repeat(2,1fr);}
  .footer{padding:24px 20px;}
  .route-opt-tab{min-width:120px;}
  .result-inner{padding:0 14px 80px;}
}
@media(max-width:500px){
  .cities-grid{grid-template-columns:repeat(2,1fr);}
}


.svc-tile:nth-child(1) .tile-icon{background:rgba(79,142,247,.12);border-color:rgba(79,142,247,.2);color:#4f8ef7;}
.svc-tile:nth-child(2) .tile-icon{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.2);color:#34d399;}
.svc-tile:nth-child(3) .tile-icon{background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.2);color:#fbbf24;}
.svc-tile:nth-child(4) .tile-icon{background:rgba(167,139,250,.10);border-color:rgba(167,139,250,.2);color:#a78bfa;}
.svc-tile:nth-child(5) .tile-icon{background:rgba(249,115,22,.10);border-color:rgba(249,115,22,.2);color:#f97316;}
.svc-tile:nth-child(6) .tile-icon{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.2);color:#f87171;}
.svc-tile:nth-child(7) .tile-icon{background:rgba(34,211,238,.10);border-color:rgba(34,211,238,.2);color:#22d3ee;}
.tile-icon{border:1px solid rgba(255,255,255,.08);}