/* ===== CSS Reset / tokens ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg: #f2f2f7;          /* iOS grouped background */
  --card: #ffffff;         /* Card surfaces */
  --tint: #8e8e93;         /* iOS gray */
  --tint-2:#c7c7cc;
  --text:#111;
  --muted:#6b7280;
  --radius:16px;           /* Large rounded corners */
  --radius-pill:22px;
}

/* ===== Page scaffolding ===== */
body {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height:100vh;
  padding-bottom: 64px;
}

/* Fixed background for the whole page (stays in place on scroll) */
html, body { height: 100%; }

body.has-bg {
  background-image: url('images/background.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--bg);
  background-attachment: fixed; /* works on desktop/Android */
  position: relative;           /* needed for ::before stacking */
}

/* iOS Safari workaround: fixed pseudo-layer */
body.has-bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-position: inherit;
  background-repeat: inherit;
  background-size: inherit;
  background-color: inherit;
  z-index: -1;
}

/* ===== Header ===== */
.app-header {
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  padding: 10px 12px; 
  background: rgba(240,240,245,0.60); 
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tint-2);
}

/* FIXED: Show full logo without cropping */
.app-logo {
  width: 44px;             
  height: 44px;             
  border-radius: 0;         
  object-fit: contain;      
  object-position: center;  
  background: transparent;  
  display: block;
}

.app-title-wrap { flex:1; text-align:center; }
.app-title { font-size:18px; font-weight:700; }
.app-subtitle { font-size:12px; color: var(--muted); }
.icon-btn { background: transparent; border: 0; padding: 6px; border-radius: 10px; }
.icon-btn img { width:22px; height:22px; }

/* ===== Row button (Notification History) ===== */
.row-button{
  width:100%; background:#e9e9ee; border:0; padding:12px 16px; display:flex; justify-content:space-between; align-items:center;
  font-size:15px; border-bottom:1px solid var(--tint-2);
}
.chevron{ font-size:20px; }

/* ===== Hero area ===== */
.hero{ padding:16px; }
.hero-actions{ display:flex; gap:12px; margin-bottom:18px; }
.pill-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  background: rgba(255,255,255,0.60); padding:14px; border-radius: var(--radius-pill);
  text-decoration:none; color:var(--text); border:1px solid var(--tint-2);
}
.pill-btn img{ width:48px; height:48px; }

/* ===== Icon grid ===== */
.icon-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
.icon-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background: rgba(255,255,255,0.92); border:1px solid var(--tint-2); padding:14px;
  border-radius: 999px; text-align:center; text-decoration:none; color:var(--text);
}
.icon-card img{ width:28px; height:28px; }
.icon-card span{ font-size:12px; }

/* ===== Cards / content ===== */
.content{ padding:16px; }
.card{
  background: var(--card); border:1px solid var(--tint-2); border-radius: var(--radius); padding:14px; margin-bottom:14px;
}
.section-title{ font-size:16px; font-weight:700; margin-bottom:10px; }
.muted{ color: var(--muted); }
.small{ font-size:12px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== Inputs / buttons ===== */
input[type="file"]{
  width:100%; padding:12px; background:#f8f8fa;
  border:1px solid var(--tint-2); border-radius:12px;
}
textarea{
  width:100%; padding:12px; background:#f8f8fa;
  border:1px solid var(--tint-2); border-radius:12px;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.primary-btn{
  background:#1c1c1e; color:#fff; border:0; padding:12px 14px; border-radius:12px;
}
.ghost-btn{
  background:transparent; border:1px solid var(--tint-2); padding:12px 14px; border-radius:12px;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{ border:1px solid var(--tint-2); background:#fff; padding:6px 10px; border-radius:999px; }

/* ===== Image preview ===== */
.preview-wrap{
  margin-top:10px; border:1px dashed var(--tint-2);
  border-radius:12px; padding:8px;
  display:flex; justify-content:center; align-items:center;
  min-height:140px; background:#fafafa;
}
#preview{
  max-width:100%; max-height:280px;
  border-radius:10px; display:block;
}

/* ===== Map container ===== */
.map{
  width:100%; height:320px;
  border-radius:12px; overflow:hidden;
}

/* ===== Bottom tab bar ===== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; height:64px;
  background:#f2f2f7; border-top:1px solid var(--tint-2);
  display:flex;
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  text-decoration:none; color:#333; font-size:12px;
}
.tab img{ width:42px; height:42px; }
.tab.active{ font-weight:700; }



/* wapoint map added style code */
/* Full-screen map layout */
body.full-screen, html.full-screen { height: 100%; }
body.full-screen { margin: 0; background: #f2f2f7; }

/* Map fills the viewport beneath overlays */
.map-full { position: fixed; inset: 0; }

/* Small circular "you are here" dot */
.me-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #0a84ff; box-shadow: 0 0 0 4px rgba(10,132,255,.25);
}

/* Numbered waypoint pill marker */
.wp-dot {
  min-width: 26px; height: 26px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color: #fff; background: #111; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Floating controls (top-right) */
.floating-controls {
  position: fixed; top: 10px; right: 10px; z-index: 10;
  display: flex; gap: 8px;
}

/* Bottom action bar */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 10px 12px; background: rgba(242,242,247,.92); backdrop-filter: blur(8px);
  border-top: 1px solid #c7c7cc;
}
.bottom-bar .button-row { display: flex; gap: 10px; }
.bottom-bar .mode-note { font-size: 12px; color: #6b7280; margin-bottom: 8px; }

/* Reuse your button styles; add a tiny variant */
.small-btn { font-size: 12px; padding: 6px 10px; }

/* Tap prompt that appears where you click */
.tap-prompt {
  position: absolute; z-index: 12; transform: translate(-50%, -110%);
  background: #fff; border: 1px solid #c7c7cc; border-radius: 12px; padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.tap-prompt .prompt-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.tap-prompt .prompt-row { display: flex; gap: 8px; }

/* "Active" selection hint */
.chip-active { outline: 2px solid #0a84ff; }

/* Navigation banner (top) */
.nav-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 11;
  padding: 10px 12px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid #c7c7cc;
}
.nav-primary { font-weight: 700; }
.nav-secondary { font-size: 12px; color: #6b7280; }








/* Make the map fill the screen */
html, body { height: 100%; }
body.full-screen { margin: 0; background: #f2f2f7; }

/* Full-bleed map container */
.map-full {
  position: fixed;            /* pin to the viewport */
  inset: 0;                   /* top/right/bottom/left = 0 */
}

/* Optional: if you prefer non-fixed, ensure a real height */
@supports (height: 100dvh) {
  .map-full { position: relative; height: 100dvh; }
}





/* Full-screen map */
html, body { height: 100%; }
body.full-screen { margin: 0; background: #f2f2f7; }
.map-full { position: fixed; inset: 0; }

/* Floating controls */
.floating-controls {
  position: fixed; top: 10px; right: 10px; z-index: 20;
  display: flex; gap: 8px;
}

/* "You are here" dot */
.me-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #0a84ff; box-shadow: 0 0 0 4px rgba(10,132,255,.25);
}

/* Numbered waypoint markers */
.wp-dot {
  min-width: 26px; height: 26px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center;
  font: 700 12px/1 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#fff; background:#111; border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* Banner like native nav */
.nav-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 21;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid #c7c7cc;
  padding: 10px 12px;
}
.nav-primary { font-weight: 700; }
.nav-secondary { font-size: 12px; color: #6b7280; }

/* Bottom action bar */
.bottom-bar {
  position: fixed; left:0; right:0; bottom:0; z-index: 20;
  background: rgba(242,242,247,.92); backdrop-filter: blur(8px);
  border-top: 1px solid #c7c7cc; padding: 10px 12px;
}
.bottom-bar .button-row { display:flex; gap:10px; }
.mode-note { font-size:12px; color:#6b7280; margin-bottom:6px; }

/* Tap prompt */
.tap-prompt {
  position: absolute; z-index: 22; transform: translate(-50%, -110%);
  background: #fff; border: 1px solid #c7c7cc; border-radius: 12px; padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.tap-prompt .prompt-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.tap-prompt .prompt-row { display:flex; gap:8px; }
.small-btn { font-size: 12px; padding: 6px 10px; }
.chip-active { outline: 2px solid #0a84ff; }

/* Waypoint side sheet */
.wp-sheet {
  position: fixed; left: 10px; bottom: 96px; z-index: 19; width: 280px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border: 1px solid #c7c7cc; border-radius: 14px; padding: 10px;
}
.wp-sheet-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.wp-title{ font-weight:700; }
.wp-list{ list-style:none; padding:0; margin:0; max-height: 30vh; overflow:auto; }
.wp-item{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px dashed #e5e7eb; }
.wp-left{ display:flex; align-items:center; gap:8px; }
.wp-badge{ width:22px; height:22px; border-radius:11px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.wp-name{ font-size: 13px; }
.wp-right{ display:flex; gap:6px; }
.fab { position: fixed; left: 10px; bottom: 52px; z-index: 19; }

/* Popup content */
.popup-wrap{ min-width: 160px; }
.popup-title{ font-weight: 700; margin-bottom: 4px; }
.popup-sub{ font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.popup-row{ display:flex; gap:6px; }
.chip.danger { border-color:#ff3b30; color:#ff3b30; }


/* ===== Stacked Button Layout ===== */
.stacked-layout {
  display: flex;
  gap: 12px;
}

.left-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.right-col {
  flex: 1;
  display: flex;
}

.full-height {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}


/* ===== Build Routes UI ===== */
html, body { height: 100%; }
body.full-screen { margin: 0; background: var(--bg, #f2f2f7); }
.map-full { position: fixed; inset: 0; }

/* Top header like Apple Maps */
.maps-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; background: rgba(242,242,247,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tint-2, #c7c7cc);
}
.hdr-title{ font-weight: 700; }
.hdr-btn{ border: 1px solid var(--tint-2,#c7c7cc); background:#fff; border-radius: 12px; padding: 6px 10px; }
.hdr-btn.go{ background:#0a84ff; color:#fff; border-color:#0a84ff; }
.hdr-btn:disabled{ opacity:.5 }

/* Right-side tools */
.tool-stack{
  position: fixed; right: 10px; top: 70px; z-index: 25;
  display: flex; flex-direction: column; gap: 8px;
}
.tool{ border:1px solid var(--tint-2,#c7c7cc); background:#fff; border-radius:12px; padding:8px 10px; }
.tool-active{ outline: 2px solid #0a84ff; }

/* Bottom toolbar */
.maps-tabbar{
  position: fixed; left:0; right:0; bottom:0; z-index:26;
  height: 58px; display:flex; justify-content:space-around; align-items:center;
  background: rgba(242,242,247,.96); border-top:1px solid var(--tint-2,#c7c7cc);
}
.tab-item{ background:transparent; border:0; font-size:12px; }

/* Blue "me" dot */
.me-dot{
  width: 14px; height: 14px; border-radius: 50%;
  background:#0a84ff; box-shadow:0 0 0 4px rgba(10,132,255,.25);
}

/* Numbered waypoint pin (dark pill) */
.wp-badge-pin{
  min-width: 26px; height: 26px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:#111; border:2px solid #fff; font-weight:700; font-size:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* Route summary bubble */
.route-bubble{
  position: fixed; z-index: 24; right: 70px; top: 120px;
  background:#fff; border:1px solid var(--tint-2,#c7c7cc); border-radius:12px; padding:8px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* Slide-up info panel */
.info-panel{
  position: fixed; left: 10px; bottom: 70px; z-index: 24; width: 280px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border:1px solid var(--tint-2,#c7c7cc); border-radius:14px; padding:10px;
}
.panel-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.panel-title{ font-weight:700; }
.point-list{ list-style:none; padding:0; margin:0; max-height: 30vh; overflow:auto; }
.point-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px dashed #e5e7eb; }
.point-actions{ display:flex; gap:6px; }

/* Mapbox popups tuned to style */
.mapboxgl-popup-content{ border-radius:12px; }
.popup-title{ font-weight:700; margin-bottom:4px; }
.popup-sub{ font-size:12px; color:#6b7280; margin-bottom:6px; }


/* ===== Build Routes: full-screen map scaffold ===== */
body.full-screen { padding: 0; background: #e9ecef; }
.map-full { position: fixed; inset: 44px 0 64px 0; }         /* under header, above tabbar */

/* ===== Apple-Maps style header ===== */
.maps-header{
  position: fixed; top: 0; left: 0; right: 0; height: 44px;
  display: grid; grid-template-columns: 56px 1fr 72px; align-items: center;
  background: rgba(240,240,245,0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tint-2);
  z-index: 10;
}
.hdr-btn{ background: transparent; border: 0; font-size: 18px; color: #2c2c2e; padding: 10px 14px; }
.hdr-btn.go{ font-weight: 700; opacity: .6; }
.hdr-btn.go:enabled{ opacity: 1; color: #007aff; }
.hdr-title{ text-align: center; font-weight: 600; }

/* ===== Summary bubble (distance/time) ===== */
.route-bubble{
  position: fixed; top: 56px; right: 12px;
  background: rgba(255,255,255,.92); border: 1px solid var(--tint-2);
  padding: 10px 12px; border-radius: 12px; z-index: 9;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* ===== Tool stack (right side) ===== */
.tool-stack{ position: fixed; right: 10px; bottom: 90px; display: flex; flex-direction: column; gap: 10px; z-index: 9; }
.tool{
  background: rgba(255,255,255,.95); border: 1px solid var(--tint-2); border-radius: 12px;
  padding: 8px 10px; font-size: 12px; min-width: 70px;
}
.tool-active{ background: #e6f0ff; border-color: #b3d1ff; }

/* ===== Bottom tabbar (visual) ===== */
.maps-tabbar{
  position: fixed; left: 0; right: 0; bottom: 0; height: 64px;
  background: #f2f2f7; border-top: 1px solid var(--tint-2);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; z-index: 10;
}
.maps-tabbar .tab-item{ background: transparent; border: 0; font-size: 12px; color: #333; }

/* ===== Info panel (slide-up) ===== */
.info-panel{
  position: fixed; left: 0; right: 0; bottom: 64px; max-height: 50vh; overflow: auto;
  background: rgba(255,255,255,.98); border-top: 1px solid var(--tint-2);
  padding: 12px; z-index: 11; box-shadow: 0 -10px 30px rgba(0,0,0,.08);
}
.panel-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.panel-title{ font-weight: 700; }
.point-list{ list-style: none; display: grid; gap: 8px; }
.point-row{ display: flex; justify-content: space-between; align-items: center; }
.point-actions .chip{ margin-left: 6px; }
.chip.danger{ border-color: #ff3b30; color: #ff3b30; }

/* ===== Numbered waypoint marker ===== */
.wp-badge-pin{
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 600 13px/1 -apple-system,system-ui,Segoe UI,Roboto;
  background: #ff9f0a; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ===== You (blue dot) ===== */
.me-dot{
  width: 16px; height: 16px; border-radius: 50%;
  background: #0a84ff; box-shadow: 0 0 0 4px rgba(10,132,255,.25);
}

/* ===== Pin popover (Start / WayPt / Dest) ===== */
.pin-popover{
  position: absolute; transform: translate(-50%, -110%);
  background: rgba(255,255,255,.98); border: 1px solid var(--tint-2);
  border-radius: 12px; padding: 10px; z-index: 12; box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.pin-buttons{ display: grid; grid-auto-flow: column; gap: 8px; margin-bottom: 8px; }
.square-btn{
  width: 58px; height: 36px; border-radius: 8px; border: 1px solid var(--tint-2);
  background: #fff; font-size: 12px;
}
.pin-title{ display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 2px; }
.info-dot{ width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--tint-2); background: #fff; font-size: 12px; }

/* ===== Action sheet for "Begin Navigation" ===== */
.choice-sheet{
  position: fixed; inset: 0; background: rgba(0,0,0,.28); display: grid; place-items: end center; padding: 14px; z-index: 50;
}
.sheet-card{
  width: 100%; max-width: 520px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 -12px 30px rgba(0,0,0,.18);
}
.sheet-title{ font-weight: 700; margin-bottom: 6px; }
.sheet-text{ color: var(--muted); margin-bottom: 10px; }
.sheet-btn{ width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--tint-2); background: #fff; margin-top: 8px; }
.sheet-btn.primary{ background: #e6f0ff; border-color: #b3d1ff; }
.sheet-btn.danger{ color: #ff3b30; border-color: #ffb3ab; }