/* ═══════════════════════════════════════════════════════════════
   SimiTolk Unified Map Styles — Leaflet + OpenStreetMap
   Shared across all map instances for consistent design
   ═══════════════════════════════════════════════════════════════ */

/* ─── Map Container ─── */
.simitolk-map{border-radius:14px;border:1px solid var(--line,#e2e8f0);overflow:hidden;position:relative;background:#e8f0e8}
.simitolk-map .leaflet-container{border-radius:14px}
@keyframes mapPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.7}}
@keyframes mapBounce{0%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}

/* ─── Attribution — OSM License Compliance ─── */
.simitolk-map .leaflet-control-attribution{font-size:10px !important;background:rgba(255,255,255,.85) !important;backdrop-filter:blur(4px);border-radius:6px 0 0 0 !important;padding:2px 8px !important;color:#64748b !important;line-height:1.4}
.simitolk-map .leaflet-control-attribution a{color:#2563eb !important;font-weight:600}

/* ─── Popup Styling ─── */
.simitolk-map .leaflet-popup-content-wrapper{border-radius:12px !important;box-shadow:0 8px 30px rgba(0,0,0,.15) !important;padding:0 !important;border:none;font-family:'Inter',system-ui,sans-serif}
.simitolk-map .leaflet-popup-content{margin:0 !important;padding:14px 16px !important;font-size:13px !important;line-height:1.5 !important;color:#0f172a !important;min-width:160px}
.simitolk-map .leaflet-popup-content b{font-size:14px;display:block;margin-bottom:2px;color:#0f172a}
.simitolk-map .leaflet-popup-content span{font-size:11px;color:#64748b;display:block;margin-top:1px}
.simitolk-map .leaflet-popup-tip-container{display:none !important}
.simitolk-map .leaflet-popup-close-button{color:#94a3b8 !important;font-size:18px !important;width:24px !important;height:24px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:50% !important;top:6px !important;right:6px !important}
.simitolk-map .leaflet-popup-close-button:hover{color:#dc2626 !important;background:#fef2f2 !important}

/* ─── Marker Base ─── */
.sm-marker{display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s}
.sm-marker:hover{transform:scale(1.1)}
.sm-marker i{color:#fff;flex-shrink:0}

/* Rider / Delivery Boy — green motorcycle */
.sm-rider{background:linear-gradient(135deg,#16a34a,#22c55e);width:42px;height:42px;animation:mapPulse 2s infinite}
.sm-rider i{font-size:18px}

/* Shop / Pickup — dark store */
.sm-shop{background:linear-gradient(135deg,#0f172a,#334155);width:36px;height:36px}
.sm-shop i{font-size:14px}

/* Customer / Drop — orange pin */
.sm-drop{background:linear-gradient(135deg,#ea580c,#f97316);width:36px;height:36px}
.sm-drop i{font-size:14px}

/* Home / Destination — green house */
.sm-home{background:linear-gradient(135deg,#16a34a,#15803d);width:32px;height:32px}
.sm-home i{font-size:13px}

/* User / Customer marker — amber */
.sm-user{background:linear-gradient(135deg,#f59e0b,#d97706);width:38px;height:38px}
.sm-user i{font-size:16px}

/* Provider / Service — teal */
.sm-provider{background:linear-gradient(135deg,#0ea5b7,#0891b2);width:42px;height:42px}
.sm-provider i{font-size:17px}

/* Admin search — gold magnifier */
.sm-admin{background:linear-gradient(135deg,#f59e0b,#d97706);width:50px;height:50px}
.sm-admin i{font-size:20px}

/* Venue / Event — purple */
.sm-venue{background:linear-gradient(135deg,#8b5cf6,#7c3aed);width:36px;height:36px}
.sm-venue i{font-size:14px}

/* ─── Default Leaflet marker override ─── */
.leaflet-div-icon{background:none !important;border:none !important}
.leaflet-default-icon-path{background-image:none !important}

/* ─── Route / Polyline ─── */
.sm-route{stroke-dasharray:10,8;stroke-linecap:round;animation:none}

/* ─── Loading overlay ─── */
.sm-map-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(248,250,252,.95);color:#94a3b8;z-index:500;pointer-events:none;font-weight:700;font-size:13px;gap:10px;border-radius:14px;transition:opacity .4s}
.sm-map-loading .sm-spinner{width:32px;height:32px;border:3px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:smSpin .8s linear infinite}
@keyframes smSpin{to{transform:rotate(360deg)}}

/* ─── Map legend ─── */
.sm-legend{display:flex;gap:12px;flex-wrap:wrap;padding:10px 14px;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:10px;font-size:11px;font-weight:700;color:#475569;margin-top:8px}
.sm-legend-item{display:flex;align-items:center;gap:5px}
.sm-legend-dot{width:10px;height:10px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);flex-shrink:0}
.sm-legend-dot.rider{background:#16a34a}
.sm-legend-dot.shop{background:#0f172a}
.sm-legend-dot.drop{background:#ea580c}
.sm-legend-dot.user{background:#f59e0b}
.sm-legend-dot.venue{background:#8b5cf6}

/* ─── Responsive ─── */
@media(max-width:768px){
  .simitolk-map .leaflet-popup-content{font-size:12px !important;padding:10px 12px !important;min-width:140px}
  .sm-marker{transform:scale(.85)}
  .sm-legend{font-size:10px;gap:8px;padding:8px 10px}
}
/* ─── Dark Theme ─── */
[data-theme="dark"] .simitolk-map .leaflet-control-attribution{background:rgba(15,23,42,.85) !important;color:#cbd5e1 !important}
[data-theme="dark"] .simitolk-map .leaflet-control-attribution a{color:#93c5fd !important}
[data-theme="dark"] .simitolk-map .leaflet-popup-content{color:var(--ink,#f1f5f9) !important}
[data-theme="dark"] .simitolk-map .leaflet-popup-content b{color:var(--ink,#f1f5f9) !important}
[data-theme="dark"] .simitolk-map .leaflet-popup-content span{color:var(--muted,#94a3b8) !important}
[data-theme="dark"] .simitolk-map .leaflet-popup-close-button:hover{background:rgba(239,68,68,.1) !important}
[data-theme="dark"] .simitolk-map .leaflet-popup-content-wrapper{background:var(--card,#1e293b) !important}
[data-theme="dark"] .sm-legend{background:var(--card,#1e293b);border-color:var(--line,#334155);color:var(--muted,#94a3b8)}
[data-theme="dark"] .sm-map-loading{background:rgba(15,23,42,.95);color:#94a3b8}