/* ShipperShop map.html CSS */

:root{--primary:#7C3AED;--bg:#f0f2f5;--card:#fff;--text:#1c1e21;--text2:#65676b;--r:12px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;height:100vh;display:flex;flex-direction:column;overflow:hidden}
#map{flex:1;z-index:1}
.map-hd{position:absolute;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.95);padding:8px 12px;display:flex;align-items:center;gap:8px;backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.map-hd h1{font-size:16px;font-weight:700;white-space:nowrap}
.map-hd h1 i{color:var(--primary)}
.map-search{flex:1;position:relative}
.map-search input{width:100%;padding:7px 12px 7px 30px;border:1.5px solid #ddd;background:#fff;border-radius:20px;font-size:13px;outline:none}
.map-search input:focus{border-color:var(--primary)}
.map-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text2)}
.map-btn{width:34px;height:34px;border-radius:50%;background:var(--card);border:1.5px solid #ddd;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;color:var(--text)}
.map-filters{position:absolute;top:52px;left:0;right:0;z-index:1000;display:flex;gap:6px;padding:4px 12px;overflow-x:auto;scrollbar-width:none}
.map-filters::-webkit-scrollbar{display:none}
.map-filter{flex-shrink:0;padding:5px 12px;border-radius:16px;background:rgba(255,255,255,.9);border:1.5px solid #e4e6eb;font-size:11px;cursor:pointer;white-space:nowrap;backdrop-filter:blur(4px);color:var(--text2)}
.map-filter.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.map-fab{position:absolute;bottom:76px;right:14px;z-index:1000;width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:20px;box-shadow:0 3px 10px rgba(124,58,237,.4);cursor:pointer;display:flex;align-items:center;justify-content:center}
.map-locate{position:absolute;bottom:76px;left:14px;z-index:1000;width:44px;height:44px;border-radius:50%;background:var(--card);border:1.5px solid #ddd;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--primary);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.pin-modal{display:none;position:fixed;bottom:0;left:0;right:0;z-index:2000;background:var(--card);border-radius:16px 16px 0 0;max-height:70vh;flex-direction:column;box-shadow:0 -4px 20px rgba(0,0,0,.15)}
.pin-modal.active{display:flex}
.pin-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e4e6eb;flex-shrink:0}
.pin-modal-hd h3{font-size:16px;font-weight:700}
.pin-modal-close{width:30px;height:30px;border-radius:50%;background:var(--bg);border:none;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pin-modal-bd{flex:1;overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch}
.pin-modal-ft{padding:10px 16px;border-top:1px solid #e4e6eb;flex-shrink:0}
.pf{margin-bottom:12px}
.pf label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:3px}
.pf input,.pf textarea,.pf select{width:100%;padding:9px 12px;border:1.5px solid #ddd;border-radius:10px;font-size:14px;outline:none}
.pf input:focus,.pf textarea:focus{border-color:var(--primary)}
.pf textarea{resize:vertical;min-height:60px}
.pbtn{display:block;width:100%;padding:11px;border:none;border-radius:10px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.pbtn:disabled{opacity:.5}
.map-bnav{position:absolute;bottom:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.95);display:flex;align-items:center;border-top:1px solid #e4e6eb;padding:4px 0 max(4px,env(safe-area-inset-bottom));height:56px;backdrop-filter:blur(8px)}
.map-bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;color:#65676b;text-decoration:none;padding:4px 0}
.map-bnav .mnav-item,.map-bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#999;padding:4px 0;text-decoration:none;-webkit-tap-highlight-color:transparent}.map-bnav a.active,.map-bnav .mnav-item.active{color:#7C3AED}.map-bnav a i,.map-bnav .mnav-item i{font-size:20px}.map-bnav a.active i{transform:scale(1.1)}
.map-bnav a i{font-size:20px}
.map-bnav .fab-space{position:relative;width:60px;display:flex;align-items:center;justify-content:center;}
.map-bnav .fab-center{width:46px;height:46px;border-radius:50%;background:#7C3AED;color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-80%);box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;z-index:10;text-decoration:none;}
.pin-popup{font-size:13px;line-height:1.5;max-width:220px}
.pin-popup strong{font-size:14px;display:block;margin-bottom:4px}
/* Traffic alert marker */
.traffic-marker{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.traffic-marker.critical{background:#f44336;animation:tPulse 1s infinite}
.traffic-marker.high{background:#ff5722}
.traffic-marker.medium{background:#ff9800}
.traffic-marker.low{background:#ffc107}
@keyframes tPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
/* Difficulty badge */
.diff-easy{background:#4caf5020;color:#4caf50;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.diff-medium{background:#ff980020;color:#ff9800;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.diff-hard{background:#f4433620;color:#f44336;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
/* Rating stars */
.pin-stars{color:#ffc107;font-size:12px;margin:4px 0}
.pin-stars .empty{color:#ddd}
/* Shipper marker */
.shipper-marker{width:36px;height:36px;border-radius:50%;border:3px solid #4caf50;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.shipper-marker img{width:100%;height:100%;object-fit:cover}
.shipper-marker-ph{width:36px;height:36px;border-radius:50%;border:3px solid #4caf50;background:#4caf50;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
/* Share location toggle */
.share-toggle{position:absolute;top:88px;right:14px;z-index:1000;background:#fff;border-radius:12px;padding:6px 12px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid #e4e6eb}
.share-toggle.active{border-color:#4caf50;background:#e8f5e9;color:#2e7d32}
/* Legend */
.map-legend{position:absolute;bottom:66px;left:14px;z-index:1000;background:rgba(255,255,255,.95);border-radius:10px;padding:8px 10px;box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:11px;max-width:160px;backdrop-filter:blur(4px);display:none}
.map-legend.show{display:block}
.legend-item{display:flex;align-items:center;gap:6px;padding:2px 0}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.pin-popup .pin-user{font-size:11px;color:var(--text2);margin-top:6px}
.pin-type-badge{display:inline-block;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:600;margin-bottom:4px}

.ask-fab{position:absolute;bottom:130px;right:14px;z-index:1000;width:52px;height:52px;border-radius:50%;background:#1976d2;color:#fff;border:none;font-size:22px;box-shadow:0 3px 10px rgba(25,118,210,.4);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ask-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;display:none;align-items:flex-end;justify-content:center}
.ask-overlay.open{display:flex}
.ask-modal{background:#fff;width:100%;max-width:500px;max-height:90vh;border-radius:16px 16px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s ease}
.ask-overlay.open .ask-modal{transform:translateY(0)}
.ask-head{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #e4e6eb}
.ask-head h3{flex:1;font-size:16px;font-weight:700;margin:0}
.ask-close{background:#e4e6eb;border:none;width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ask-body{padding:16px;overflow-y:auto;flex:1}
.ask-field{margin-bottom:14px}
.ask-field label{display:block;font-size:13px;font-weight:600;color:#65676B;margin-bottom:4px}
.ask-field input,.ask-field select,.ask-field textarea{width:100%;padding:10px 12px;border:1.5px solid #ddd;border-radius:10px;font-size:14px;font-family:inherit;outline:none}
.ask-field input:focus,.ask-field select:focus,.ask-field textarea:focus{border-color:#1976d2}
.ask-field textarea{min-height:80px;resize:none}
.ask-foot{padding:12px 16px;border-top:1px solid #e4e6eb}
.ask-submit{width:100%;padding:12px;background:#1976d2;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.ask-submit:disabled{opacity:.5}
.ask-info{background:#e3f2fd;border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:12px;color:#1565c0;line-height:1.5}

/* === DESKTOP OVERRIDE — show map controls on desktop === */
@media (min-width: 769px) {
  .map-bnav { display: flex !important; }
  .map-fab { display: flex !important; }
  .ask-fab { display: flex !important; }
  .map-locate { display: flex !important; }
  body { background: #f0f2f5 !important; padding-bottom: 0 !important; }
}

/* === DARK MODE === */
.dark .map-hd { background: rgba(30,30,30,.95); }
.dark .map-hd h1 { color: #ddd; }
.dark .map-search input { background: #333; border-color: #444; color: #ddd; }
.dark .map-search i { color: #999; }
.dark .map-btn { background: #2a2a2a; border-color: #444; color: #ddd; }
.dark .map-filter { background: rgba(40,40,40,.9); border-color: #444; color: #bbb; }
.dark .map-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.dark .map-bnav { background: rgba(30,30,30,.95); border-top-color: #333; }
.dark .map-bnav a { color: #999; }
.dark .map-bnav a.active { color: #9C5FFF; }
.dark .map-bnav .fab-center { background: #7C3AED; }
.dark .pin-modal { background: #1e1e1e; }
.dark .pin-modal-hd { border-bottom-color: #333; }
.dark .pin-modal-hd h3 { color: #ddd; }
.dark .pin-modal-close { background: #333; color: #ddd; }
.dark .pin-modal-bd { color: #ddd; }
.dark .pin-modal-ft { border-top-color: #333; }
.dark .pf label { color: #aaa; }
.dark .pf input, .dark .pf textarea, .dark .pf select { background: #333; border-color: #444; color: #ddd; }
.dark .share-toggle { background: #2a2a2a; border-color: #444; color: #ddd; }
.dark .share-toggle.active { background: #1b5e20; border-color: #4caf50; color: #81c784; }
.dark .map-legend { background: rgba(30,30,30,.95); color: #ddd; }
.dark .map-locate { background: #2a2a2a; border-color: #444; }
.dark #pinCoords { background: #333; color: #bbb; }
.dark .ask-overlay .ask-modal { background: #1e1e1e; }
.dark .ask-head { border-bottom-color: #333; }
.dark .ask-head h3 { color: #ddd; }
.dark .ask-close { background: #333; color: #ddd; }
.dark .ask-body { color: #ddd; }
.dark .ask-field label { color: #aaa; }
.dark .ask-field input, .dark .ask-field select, .dark .ask-field textarea { background: #333; border-color: #444; color: #ddd; }
.dark .ask-foot { border-top-color: #333; }
.dark .ask-info { background: #1a237e; color: #82b1ff; }

.leaflet-top.leaflet-left{top:100px!important}