/* ═══════════════════════════════════════════════════════════════════════════
   Saabam Cargo Leaflet Shipment Map v1.1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme override protection ─────────────────────────────────────────────
   Many themes add: svg { max-width:100%; height:auto } which breaks icon SVGs.
   The !important rules below keep the map layout intact on every theme.
   ────────────────────────────────────────────────────────────────────────── */
.saabam-map-wrapper *, .saabam-map-teaser * { box-sizing: border-box; }
.saabam-map-wrapper svg, .saabam-map-teaser svg { max-width: none !important; overflow: visible; }
.saabam-map-body    { display: flex !important; flex-direction: row !important; }
.saabam-map-map     { min-height: 420px !important; height: 420px !important; display: block !important; position: relative !important; }
.saabam-map-header  { display: flex !important; align-items: center !important; background: linear-gradient(130deg,var(--saabam-cargo,#00a924) 0%,#006e1a 100%) !important; color:#fff !important; }
.saabam-map-header-icon  { width: 20px !important; height: 20px !important; max-width: none !important; flex-shrink: 0 !important; }
.saabam-map-tl-header    { display: flex !important; align-items: center !important; }
.saabam-map-tl-header svg{ width: 14px !important; height: 14px !important; max-width: none !important; flex-shrink: 0 !important; }
.saabam-map-error svg    { width: 20px !important; height: 20px !important; max-width: none !important; flex-shrink: 0 !important; }
.saabam-map-tl-node-wrap *{ max-width: none !important; }



/* ── Card wrapper ─────────────────────────────────────────────────────────── */
.saabam-map-wrapper {
	background:    #ffffff;
	border-radius: 14px;
	box-shadow:    0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.06);
	margin:        28px 0;
	overflow:      hidden;
	font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.saabam-map-header {
	display:        flex;
	align-items:    center;
	gap:            10px;
	padding:        14px 20px;
	background:     linear-gradient(130deg, var(--saabam-cargo, #00a924) 0%, #006e1a 100%);
	color:          #fff;
	font-size:      14px;
	font-weight:    600;
	letter-spacing: 0.2px;
}

.saabam-map-header-icon {
	width:       20px;
	height:      20px;
	flex-shrink: 0;
	opacity:     0.9;
}

.saabam-map-header-status {
	font-size:     11px;
	font-weight:   500;
	padding:       2px 10px;
	background:    rgba(255, 255, 255, 0.22);
	border-radius: 20px;
	letter-spacing: 0.3px;
}

.saabam-map-header-tn {
	margin-left:  auto;
	font-size:    12px;
	font-weight:  400;
	opacity:      0.75;
	letter-spacing: 0.8px;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.saabam-map-loading {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             12px;
	padding:         52px 20px;
	color:           #6b7280;
	font-size:       14px;
}

.saabam-map-spinner {
	width:         26px;
	height:        26px;
	border:        3px solid #e5e7eb;
	border-top-color: var(--saabam-cargo, #00a924);
	border-radius: 50%;
	animation:     saabam-map-spin 0.75s linear infinite;
	flex-shrink:   0;
}

@keyframes saabam-map-spin { to { transform: rotate(360deg); } }

/* ── Body: map + timeline side by side ────────────────────────────────────── */
.saabam-map-body {
	display: flex;
	flex-direction: row;
	min-height: 420px;
}

@media (max-width: 680px) {
	.saabam-map-body {
		flex-direction: column;
		min-height: auto;
	}
}

/* ── Leaflet map pane ────────────────────────────────────────────────────── */
.saabam-map-map {
	flex:       1 1 60%;
	min-height: 420px;
	background: #f0f4f8;
	display:    block;
	position:   relative;
}

@media (max-width: 680px) {
	.saabam-map-map { min-height: 300px; height: 300px; }
}

/* ── Timeline panel ──────────────────────────────────────────────────────── */
.saabam-map-timeline-panel {
	flex:          0 0 260px;
	border-left:   1px solid #e5e7eb;
	display:       flex;
	flex-direction: column;
	background:    #fafafa;
	overflow:      hidden;
}

@media (max-width: 680px) {
	.saabam-map-timeline-panel {
		flex:        none;
		border-left: none;
		border-top:  1px solid #e5e7eb;
	}
}

.saabam-map-tl-header {
	display:       flex;
	align-items:   center;
	gap:           7px;
	padding:       12px 16px;
	font-size:     11px;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color:         #6b7280;
	border-bottom: 1px solid #e5e7eb;
	background:    #f3f4f6;
}

.saabam-map-tl-header svg {
	width:       14px;
	height:      14px;
	flex-shrink: 0;
	color:       #9ca3af;
}

.saabam-map-tl-list {
	overflow-y: auto;
	flex:       1;
	padding:    8px 0 12px;
}

/* ── Timeline item ───────────────────────────────────────────────────────── */
.saabam-map-tl-item {
	display: flex;
	gap:     12px;
	padding: 0 16px 0 14px;
}

.saabam-map-tl-left {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	flex-shrink:    0;
	width:          20px;
}

.saabam-map-tl-node-wrap {
	position:  relative;
	width:     14px;
	height:    14px;
	flex-shrink: 0;
	margin-top: 3px;
}

.saabam-map-tl-node {
	display:       block;
	width:         12px;
	height:        12px;
	border-radius: 50%;
	border:        2px solid #fff;
	position:      absolute;
	top: 1px; left: 1px;
}

/* Pulsing ring on current item */
.saabam-map-tl-node-ring {
	display:       block;
	position:      absolute;
	inset:         -2px;
	border-radius: 50%;
	border:        2px solid transparent;
	animation:     saabam-map-tl-pulse 2s ease-out infinite;
	opacity:       0;
}

@keyframes saabam-map-tl-pulse {
	0%   { transform: scale(0.6); opacity: 0.8; }
	100% { transform: scale(1.8); opacity: 0;   }
}

.saabam-map-tl-rail {
	flex:       1;
	width:      2px;
	background: #e5e7eb;
	margin:     3px 0;
	min-height: 16px;
}

.saabam-map-tl-right {
	flex:        1;
	min-width:   0;
	padding:     2px 0 14px;
}

.saabam-map-tl-status {
	display:     block;
	font-size:   13px;
	font-weight: 600;
	line-height: 1.3;
}

.saabam-map-tl-loc {
	display:     flex;
	align-items: center;
	gap:         3px;
	font-size:   11px;
	color:       #6b7280;
	margin-top:  2px;
}

.saabam-map-tl-loc svg { flex-shrink: 0; }

.saabam-map-tl-dt {
	display:   block;
	font-size: 11px;
	color:     #9ca3af;
	margin-top: 2px;
}

.saabam-map-tl-remarks {
	display:       block;
	font-size:     11px;
	color:         #6b7280;
	font-style:    italic;
	margin-top:    3px;
	padding-top:   3px;
	border-top:    1px dashed #e5e7eb;
}

/* ── Footer / legend ─────────────────────────────────────────────────────── */
.saabam-map-footer {
	display:     flex;
	align-items: center;
	gap:         16px;
	flex-wrap:   wrap;
	padding:     10px 18px;
	background:  #f9fafb;
	border-top:  1px solid #e5e7eb;
	font-size:   12px;
	color:       #6b7280;
}

.saabam-map-legend-item {
	display:     flex;
	align-items: center;
	gap:         6px;
	white-space: nowrap;
}

.saabam-map-dot {
	display:       inline-block;
	width:         10px;
	height:        10px;
	border-radius: 50%;
	flex-shrink:   0;
	position:      relative;
}

.saabam-map-dot-pulse::after {
	content:       '';
	position:      absolute;
	inset:         -2px;
	border-radius: 50%;
	border:        2px solid var(--pc, #f59e0b);
	animation:     saabam-map-legend-pulse 2s ease-out infinite;
}

@keyframes saabam-map-legend-pulse {
	0%   { transform: scale(0.6); opacity: 0.9; }
	100% { transform: scale(1.9); opacity: 0;   }
}

.saabam-map-line-sample {
	display:       inline-block;
	width:         28px;
	height:        3px;
	border-radius: 2px;
	flex-shrink:   0;
}

.saabam-map-line-progress { background: #10b981; }
.saabam-map-line-planned  { background: repeating-linear-gradient(90deg, #94a3b8 0 6px, transparent 6px 12px); }

.saabam-map-legend-sep {
	width:       1px;
	height:      14px;
	background:  #e5e7eb;
	flex-shrink: 0;
}

/* ── Error state ─────────────────────────────────────────────────────────── */
.saabam-map-error {
	display:        flex;
	align-items:    flex-start;
	gap:            12px;
	margin:         20px;
	padding:        16px;
	background:     #fef2f2;
	border:         1px solid #fecaca;
	border-radius:  10px;
	color:          #b91c1c;
	font-size:      13px;
	line-height:    1.5;
}

.saabam-map-error svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.saabam-map-error p   { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Leaflet marker overrides
   ═══════════════════════════════════════════════════════════════════════════ */

.saabam-map-icon { background: none !important; border: none !important; }

/* Pulsing current-location marker */
.saabam-map-pulse {
	position: relative;
	display:  inline-block;
	width:    40px;
	height:   40px;
}

.saabam-map-pulse-core {
	position:      absolute;
	inset:         9px;
	background:    var(--pc, #f59e0b);
	border-radius: 50%;
	border:        2.5px solid #fff;
	box-shadow:    0 2px 10px rgba(0, 0, 0, 0.28);
}

.saabam-map-pulse-ring {
	position:      absolute;
	inset:         0;
	border:        3px solid var(--pc, #f59e0b);
	border-radius: 50%;
	animation:     saabam-map-ring-pulse 2s ease-out infinite;
	opacity:       0;
}

@keyframes saabam-map-ring-pulse {
	0%   { transform: scale(0.4); opacity: 0.9; }
	100% { transform: scale(1.7); opacity: 0;   }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Route polyline animations
   ═══════════════════════════════════════════════════════════════════════════ */

/* Leaflet applies the className to the SVG <path> — animate stroke-dashoffset */
.saabam-map-route-dashed {
	animation: saabam-map-march 2s linear infinite;
}

@keyframes saabam-map-march { to { stroke-dashoffset: -36; } }

.saabam-map-route-progress {
	animation: saabam-map-glow 2.5s ease-in-out infinite;
}

@keyframes saabam-map-glow {
	0%, 100% { opacity: 0.9; }
	50%       { opacity: 1;   }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Popup styling
   ═══════════════════════════════════════════════════════════════════════════ */

.leaflet-popup-content-wrapper {
	border-radius: 12px !important;
	box-shadow:    0 8px 28px rgba(0, 0, 0, 0.15) !important;
	padding:       0 !important;
}

.leaflet-popup-content { margin: 14px 16px !important; }
.leaflet-popup-tip     { background: #fff !important; }

.saabam-map-popup {
	font-size:   13px;
	line-height: 1.5;
	min-width:   160px;
}

.saabam-map-popup-badge {
	display:        inline-block;
	padding:        2px 9px;
	border-radius:  20px;
	font-size:      10px;
	font-weight:    700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom:  6px;
}

.saabam-map-badge-origin      { background: #d1fae5; color: #065f46; }
.saabam-map-badge-destination { background: #fee2e2; color: #991b1b; }
.saabam-map-badge-waypoint    { background: #dbeafe; color: #1e40af; }
.saabam-map-badge-current     { background: #fef3c7; color: #92400e; }

.saabam-map-popup-location {
	font-weight:   600;
	color:         #111827;
	margin-bottom: 8px;
	font-size:     13px;
}

.saabam-map-popup-update {
	display:       grid;
	grid-template-columns: 10px 1fr;
	grid-template-rows:    auto auto;
	gap:           0 8px;
	align-items:   center;
	padding:       5px 0;
	border-top:    1px solid #f3f4f6;
}

.saabam-map-popup-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	display:       block;
	grid-row:      1;
}

.saabam-map-popup-status-text {
	font-size:   12px;
	font-weight: 600;
	grid-row:    1;
}

.saabam-map-popup-dt {
	grid-column: 2;
	grid-row:    2;
	font-size:   11px;
	color:       #9ca3af;
}

.saabam-map-popup-remarks {
	grid-column: 1 / -1;
	font-size:   11px;
	color:       #6b7280;
	font-style:  italic;
	margin-top:  2px;
}

.leaflet-control-attribution { font-size: 10px !important; }

/* ── Animated route marker ───────────────────────────────────────────────── */

.saabam-map-mover-wrap {
	background: none !important;
	border:     none !important;
}

.saabam-map-mover {
	transform-origin: center center;
	filter: drop-shadow(0 3px 8px rgba(26, 115, 232, 0.50));
	will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium teaser (shown when map feature is not licensed)
   ═══════════════════════════════════════════════════════════════════════════ */

.saabam-map-teaser {
	position:    relative;
	margin:      28px 0;
	border-radius: 14px;
	overflow:    hidden;
	box-shadow:  0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.06);
	background:  #ffffff;
}

.saabam-map-teaser-bg {
	position:   absolute;
	inset:      0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%2300a924' fill-opacity='0.07'/%3E%3C/svg%3E") repeat;
	pointer-events: none;
}

.saabam-map-teaser-inner {
	position:        relative;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	padding:         52px 32px 44px;
	font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.saabam-map-teaser-icon {
	margin-bottom: 20px;
}

.saabam-map-teaser-title {
	margin:      0 0 12px;
	font-size:   20px;
	font-weight: 700;
	color:       #111827;
	line-height: 1.2;
}

.saabam-map-teaser-desc {
	margin:      0 0 24px;
	font-size:   14px;
	color:       #6b7280;
	max-width:   400px;
	line-height: 1.65;
}

.saabam-map-teaser-btn {
	display:         inline-block;
	padding:         11px 28px;
	background:      linear-gradient(130deg, #00a924 0%, #006e1a 100%);
	color:           #fff !important;
	font-size:       14px;
	font-weight:     600;
	border-radius:   8px;
	text-decoration: none !important;
	letter-spacing:  0.2px;
	box-shadow:      0 4px 14px rgba(0, 169, 36, 0.35);
	transition:      box-shadow 0.2s, transform 0.15s;
}

.saabam-map-teaser-btn:hover {
	box-shadow: 0 6px 20px rgba(0, 169, 36, 0.45);
	transform:  translateY(-1px);
	color:      #fff !important;
}

.saabam-map-teaser-note {
	margin:    16px 0 0;
	font-size: 12px;
	color:     #9ca3af;
}

.saabam-map-teaser-note a {
	color: #6b7280;
}