/* eScore24x7 Maps — Google Maps-inspired design system */
:root {
  --gm-blue: #1a73e8;
  --gm-blue-light: #4285F4;
  --gm-red: #ea4335;
  --gm-green: #34a853;
  --gm-yellow: #fbbc04;
  --ink: #202124;
  --ink-soft: #5f6368;
  --ink-faint: #80868b;
  --surface: #ffffff;
  --surface-alt: #f1f3f4;
  --surface-hover: #e8f0fe;
  --border: #dadce0;
  --shadow-sm: 0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-md: 0 2px 6px rgba(60,64,67,.3),0 1px 2px rgba(60,64,67,.15);
  --shadow-lg: 0 4px 16px rgba(60,64,67,.3),0 2px 8px rgba(60,64,67,.15);
  --radius-pill: 24px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --touch-size: 44px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ── Map container ──────────────────────────────────── */
body{margin:0;background:#f6f7f8;overflow:hidden;font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#map{position:absolute;top:0;left:0;width:100%;height:100%}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{display:none!important}

/* ── Top search area ─────────────────────────────────── */
#map-ui{position:absolute;top:calc(8px + var(--safe-t));left:8px;right:8px;z-index:100;pointer-events:none}
.search-line{display:flex;align-items:center;max-width:720px;margin:0 auto;pointer-events:auto}

#search{flex:1;height:48px;display:flex;align-items:center;gap:8px;padding:0 4px 0 16px;border-radius:8px;background:var(--surface);box-shadow:var(--shadow-md);min-width:0;transition:box-shadow .2s}
#search:focus-within{box-shadow:0 2px 8px rgba(60,64,67,.4),0 1px 3px rgba(60,64,67,.3)}
.search-icon{width:20px;height:20px;fill:var(--ink-soft);flex:0 0 auto}
#q{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink);height:100%;font-family:inherit}
#q::placeholder{color:var(--ink-faint);opacity:1;font-size:16px}
#qc{display:none;width:32px;height:32px;border-radius:50%;border:0;background:var(--surface-alt);color:var(--ink-soft);font-size:18px;cursor:pointer;flex:0 0 auto;transition:background .15s;line-height:32px;text-align:center}
#qc:hover{background:#e0e2e5}
#qc:focus-visible{outline:2px solid var(--gm-blue);outline-offset:2px}

/* ── Search results ─────────────────────────────────── */
#res{max-width:680px;margin:8px auto 0;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-height:42vh;overflow:auto;pointer-events:auto}
#res:empty{display:none}
.r{display:flex;align-items:center;gap:12px;padding:13px 17px;border-bottom:1px solid #f0f1f2;cursor:pointer;min-height:44px}
.r:last-child{border-bottom:0}
.r:hover,.r:active{background:var(--surface-hover)}
.ri{width:36px;height:36px;border-radius:50%;background:var(--surface-alt);display:grid;place-items:center;font-size:18px;flex-shrink:0;color:var(--ink-soft)}
.rt{flex:1;min-width:0}
.rn{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-size:14px}
.ra{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ── Map tools (locate, directions) ─────────────────── */
.map-tools{position:absolute;right:calc(12px + var(--safe-r));bottom:calc(24px + var(--safe-b));z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center}
.map-tool{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--shadow-sm);color:var(--ink-soft);font-size:22px;cursor:pointer;display:grid;place-items:center;transition:transform .1s,box-shadow .1s;-webkit-tap-highlight-color:transparent}
.map-tool:active{transform:scale(.95);box-shadow:0 1px 2px rgba(60,64,67,.3)}
.map-tool:focus-visible{outline:2px solid var(--gm-blue);outline-offset:2px}
.map-tool.route-tool{background:var(--gm-blue);color:#fff;box-shadow:0 1px 4px rgba(26,115,232,.4)}
.map-tool.route-tool:active{box-shadow:0 1px 2px rgba(26,115,232,.5)}

/* ── User location marker ────────────────────────────── */
.user-dot{width:22px;height:22px;border-radius:50%;background:var(--gm-blue-light);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.user-dot-accuracy{position:absolute;border-radius:50%;border:2px solid rgba(66,133,244,.2);background:rgba(66,133,244,.08);pointer-events:none;transform:translate(-50%,-50%)}

/* ── Route pin ───────────────────────────────────────── */
.route-pin{width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--gm-red);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transform:rotate(-45deg)}

/* ── Toast ───────────────────────────────────────────── */
#map-warn{position:absolute;left:12px;bottom:calc(12px + var(--safe-b));z-index:90;background:rgba(0,0,0,.75);color:#fff;font:12px/1.4 Roboto,-apple-system,sans-serif;padding:8px 14px;border-radius:8px;max-width:70vw;pointer-events:none;backdrop-filter:blur(4px)}

/* ── Loading overlay ─────────────────────────────────── */
#load{position:fixed;inset:0;z-index:999;background:#f6f7f8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ink-soft);font-size:14px;transition:opacity .5s;font-family:Roboto,-apple-system,sans-serif}
#load.hidden{opacity:0;pointer-events:none}
#load .sp{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--gm-blue);border-radius:50%;animation:spin .6s linear infinite}

/* ── Tablet / desktop ────────────────────────────────── */
@media(min-width:768px){
  #map-ui{top:calc(12px + var(--safe-t));left:12px;right:12px}
  .search-line{max-width:640px}
  #q{font-size:15px}
  .map-tools{right:calc(16px + var(--safe-r));bottom:calc(28px + var(--safe-b))}
  .map-tool{width:44px;height:44px;font-size:22px}
}

/* ── Small mobile (<400px) ───────────────────────────── */
@media(max-width:399px){
  #map-ui{top:calc(6px + var(--safe-t));left:6px;right:6px}
  #search{height:44px;padding-left:12px;padding-right:4px}
  #q{font-size:15px}
  .map-tools{right:calc(8px + var(--safe-r));bottom:calc(16px + var(--safe-b))}
  .map-tool{width:40px;height:40px;font-size:20px}
}

/* ── Landscape mobile ────────────────────────────────── */
@media(max-height:480px) and (orientation:landscape){
  #map-ui{top:calc(4px + var(--safe-t))}
  #search{height:40px;padding-left:10px}
  #q{font-size:14px}
  .map-tools{right:calc(8px + var(--safe-r));bottom:calc(8px + var(--safe-b))}
  .map-tool{width:36px;height:36px;font-size:18px}
}