/* =========================================================
   SEI Travel Tracker — [sei_list] + [sei_map] Shortcode Styles
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

/* ================================================================
   SEI_LIST
   ================================================================ */

.sei-list-wrap {
	--sei-bg:         #1a1a2e;
	--sei-hdr-font:   #f5f0ee;
	--sei-tbl-font:   #d4e8e8;
	--sei-tbl-bg:     #1e2d3d;
	--sei-tbl-bg-alt: #243545;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	margin:  0;
	padding: 0;
	background: var(--sei-bg);
	min-height: 100vh;
}

/* ---- Header ---- */
.sei-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 20px 24px 16px;
}

.sei-list-title {
	display: flex !important;
	align-items: center;
	gap: 12px;
	font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: clamp(35px, 5vw, 80px) !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	line-height: 1.2 !important;
	color: var(--sei-hdr-font, #f5f0ee) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.sei-list-icon { font-size: clamp(30px, 4.5vw, 72px); line-height: 1; }

.sei-list-page-indicator {
	font-size: 18px;
	color: rgba(255,255,255,.35);
	font-variant-numeric: tabular-nums;
	letter-spacing: .05em;
	min-width: 50px;
	text-align: right;
}

/* ---- Meta row: Updated + Clock ---- */
.sei-list-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.sei-list-updated {
	font-size: 19px;
	color: rgba(255,255,255,.45);
}

.sei-list-clock {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 22px;
	color: rgba(255,255,255,.75);
	font-variant-numeric: tabular-nums;
}

.sei-clock-time {
	font-weight: 700;
	font-size: 24px;
	letter-spacing: .04em;
	color: var(--sei-hdr-font);
}

.sei-clock-tz {
	font-size: 14px;
	color: rgba(255,255,255,.4);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ---- Table wrapper ---- */
.sei-list-table-wrap {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 0;
}

/* ---- Table ---- */
.sei-list-table {
	width: 100%;
	min-width: 780px;
	border-collapse: collapse;
	border: none;
	background: transparent;
	font-size: 28px;
	margin: 0;
	padding: 0;
}

/* ---- Head ---- */
.sei-list-table thead tr {
	background: transparent;
	border-bottom: 1px solid rgba(255,255,255,.12);
}

.sei-list-table thead th {
	color: var(--sei-hdr-font) !important;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 12px 20px;
	white-space: nowrap;
	text-align: left;
	border: none !important;
	background: transparent !important;
}

/* ---- Body rows ---- */
.sei-list-table tbody tr { border: none; }
.sei-list-table tbody tr.sei-row-odd  { background: var(--sei-tbl-bg); }
.sei-list-table tbody tr.sei-row-even { background: var(--sei-tbl-bg-alt); }
.sei-list-table tbody tr:hover { opacity: .88; }

.sei-list-table td {
	padding: 15px 20px;
	vertical-align: middle;
	white-space: nowrap;
	color: var(--sei-tbl-font);
	border: none !important;
	font-size: 28px;
}

/* ---- Status accent stripe ---- */
.sei-row.sei-status-active    { border-left: 4px solid #22c55e !important; }
.sei-row.sei-status-landed    { border-left: 4px solid #60a5fa !important; }
.sei-row.sei-status-scheduled { border-left: 4px solid #fbbf24 !important; }
.sei-row.sei-status-diverted  { border-left: 4px solid #c084fc !important; }
.sei-row.sei-status-incident  { border-left: 4px solid #f87171 !important; }
.sei-row.sei-status-cancelled { border-left: 4px solid rgba(255,255,255,.2) !important; }

/* ---- Flight number ---- */
.sei-flight-number {
	font-size: 30px;
	font-weight: 700;
	color: var(--sei-hdr-font);
	letter-spacing: .04em;
}

/* ---- IATA badge ---- */
.sei-iata {
	display: inline-block;
	background: rgba(255,255,255,.12);
	color: var(--sei-hdr-font);
	font-size: 20px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 3px;
	letter-spacing: .07em;
	font-family: "Courier New", monospace;
	margin-right: 7px;
}

/* ---- Times ---- */
.sei-time {
	font-size: 28px;
	font-weight: 600;
	color: var(--sei-tbl-font);
}

.sei-actual-badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #4ade80;
	background: rgba(74,222,128,.12);
	border: 1px solid rgba(74,222,128,.3);
	border-radius: 3px;
	padding: 2px 6px;
	margin-left: 6px;
	text-transform: uppercase;
	letter-spacing: .05em;
	vertical-align: middle;
}

.sei-tz-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,.4);
	margin-left: 4px;
	letter-spacing: .04em;
	vertical-align: middle;
	font-family: 'Barlow Condensed', monospace;
}

/* ---- Status badge ---- */
.sei-status-badge {
	display: inline-flex;
	align-items: center;
	font-size: 20px;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 20px;
	text-transform: capitalize;
	letter-spacing: .03em;
}

.sei-status-badge.sei-status-active    { background: rgba(34,197,94,.18);   color: #4ade80; }
.sei-status-badge.sei-status-landed    { background: rgba(96,165,250,.18);  color: #93c5fd; }
.sei-status-badge.sei-status-scheduled { background: rgba(251,191,36,.18);  color: #fcd34d; }
.sei-status-badge.sei-status-diverted  { background: rgba(192,132,252,.18); color: #d8b4fe; }
.sei-status-badge.sei-status-incident  { background: rgba(248,113,113,.18); color: #fca5a5; }
.sei-status-badge.sei-status-cancelled { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
.sei-status-badge.sei-status-unknown   { background: rgba(255,255,255,.06); color: rgba(255,255,255,.3); }

/* ---- Delay ---- */
.sei-delay-badge {
	display: inline-block;
	background: rgba(248,113,113,.18);
	color: #fca5a5;
	font-size: 22px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
}

.sei-ontime { font-size: 22px; color: #4ade80; font-weight: 500; }

/* ---- Traveler count ---- */
.sei-traveler-count {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 28px;
	font-weight: 600;
	color: var(--sei-tbl-font);
}

/* ---- Destination ---- */
.sei-destination { font-size: 26px; font-weight: 500; color: var(--sei-tbl-font); }

/* ---- Empty state ---- */
.sei-list-empty { color: rgba(255,255,255,.4); font-style: italic; padding: 20px 24px; font-size: 20px; }

/* ================================================================
   SLOT-MACHINE / TICKER ANIMATION
   ================================================================ */

.sei-flip-cell { position: relative; }
.sei-flip-inner { display: contents; }

.sei-char {
	display: inline-block;
	transition: none;
}

.sei-char.sei-scrambling {
	color: rgba(255,255,255,.5);
	animation: sei-char-flash 0.07s linear infinite;
}

@keyframes sei-char-flash {
	0%   { opacity: 1; }
	50%  { opacity: 0.4; }
	100% { opacity: 1; }
}

/* ================================================================
   SEI_MAP
   ================================================================ */

.sei-map-outer {
	position: relative;
	margin:   0;
	padding:  0;
	width:    100%;
	display:  block;
	background: var(--sei-bg, #0f172a);
}

/* The Leaflet map fills 100% of the outer */
.sei-map-outer .sei-map-wrap {
	position: absolute;
	top:    0;
	left:   0;
	right:  0;
	bottom: 0;
	margin:  0;
	padding: 0;
}

/* Header overlay */
.sei-map-header-overlay {
	position: relative;
	z-index:  1000;
	background: transparent;
	padding: 20px 24px 28px !important;
	pointer-events: none;
}

.sei-map-header-overlay * { pointer-events: auto; }

/* ================================================================
   MAP LABELS — Leaflet divIcon markers
   The wrapper div (.sei-map-country-label / .sei-map-state-label)
   is collapsed to zero size so Leaflet's default white box vanishes.
   The <span> inside uses position:absolute + transform to center
   itself over the latlng point.
   ================================================================ */

.sei-map-country-label,
.sei-map-state-label,
.sei-map-iata-label {
	background:  transparent !important;
	border:      none !important;
	box-shadow:  none !important;
	width:       0 !important;
	height:      0 !important;
	overflow:    visible !important;
	pointer-events: none !important;
}

/* Leaflet also applies .leaflet-div-icon — override that too */
.leaflet-div-icon.sei-map-country-label,
.leaflet-div-icon.sei-map-state-label,
.leaflet-div-icon.sei-map-iata-label {
	background: transparent !important;
	border:     none !important;
}

.sei-map-country-label span,
.sei-map-state-label span {
	position:    absolute;
	top:         0;
	left:        0;
	transform:   translate(-50%, -50%);
	white-space: nowrap;
	line-height: 1;
	pointer-events: none;
	/* color is set as inline style by JS so no CSS var needed */
	text-shadow: 0 1px 4px rgba(0,0,0,.98), 0 0 10px rgba(0,0,0,.9);
}

.sei-map-iata-label span {
	position:    absolute;
	top:         0;
	left:        0;
	transform:   translate(-50%, -180%);  /* sits above the airport dot */
	white-space: nowrap;
	line-height: 1;
	pointer-events: none;
	font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size:   11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-shadow: 0 1px 4px rgba(0,0,0,.98), 0 0 8px rgba(0,0,0,.9);
}

.sei-map-country-label span {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:   11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sei-map-state-label span {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:   10px;
	font-weight: 700;
	letter-spacing: .05em;
}

.sei-map-outer .leaflet-container {
	width:  100% !important;
	height: 100% !important;
}

.sei-map-outer .leaflet-control-attribution {
	background: rgba(0,0,0,.5) !important;
	color: rgba(255,255,255,.35) !important;
	font-size: 10px;
}

.sei-map-outer .leaflet-control-attribution a {
	color: rgba(255,255,255,.5) !important;
}

/* ---- Responsive ---- */
@media ( max-width: 768px ) {
	.sei-list-title  { font-size: 28px !important; }
	.sei-list-table  { font-size: 18px; }
	.sei-list-table td,
	.sei-list-table th { padding: 10px 12px; font-size: 18px; }
	.sei-clock-time  { font-size: 18px; }
	.sei-list-updated { font-size: 14px; }
}

/* ---- Plane icon tooltip ---- */
.sei-plane-tooltip {
	background:    rgba(10, 10, 20, 0.88) !important;
	border:        1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 5px !important;
	color:         #fff !important;
	font-family:   'Barlow Condensed', -apple-system, sans-serif !important;
	font-size:     13px !important;
	font-weight:   700 !important;
	letter-spacing:.08em !important;
	padding:       4px 9px !important;
	white-space:   nowrap !important;
	box-shadow:    0 2px 8px rgba(0,0,0,0.5) !important;
	backdrop-filter: blur(4px);
	pointer-events: none;
}

.sei-plane-tooltip::before {
	border-top-color: rgba(255, 255, 255, 0.18) !important;
}

/* Make plane markers show a pointer cursor */
.leaflet-marker-icon {
	cursor: pointer;
}

/* ================================================================
   SEI_ARRIVING — Now Arriving announcement shortcode
   ================================================================ */

.sei-arriving-wrap {
	background: var(--sei-bg, #1a1a2e);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
	padding: 40px;
}

.sei-arriving-inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 3vh, 40px);
}

.sei-arriving-label {
	font-size: clamp(18px, 2.5vw, 32px);
	font-weight: 600;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--sei-tbl-font, #d4e8e8);
	opacity: 0.7;
}

.sei-arriving-flight {
	font-size: clamp(48px, 10vw, 140px);
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1;
	color: var(--sei-hdr-font, #f5f0ee);
}

.sei-arriving-message {
	display: flex;
	align-items: baseline;
	gap: clamp(8px, 1.5vw, 20px);
	flex-wrap: wrap;
	justify-content: center;
}

.sei-arriving-count {
	font-size: clamp(60px, 12vw, 180px);
	font-weight: 800;
	line-height: 1;
	color: var(--sei-hdr-font, #f5f0ee);
}

.sei-arriving-text {
	font-size: clamp(20px, 3vw, 48px);
	font-weight: 400;
	color: var(--sei-hdr-font, #f5f0ee);
	opacity: 0.65;
}

.sei-arriving-location {
	font-size: clamp(30px, 5vw, 80px);
	font-weight: 700;
	color: var(--sei-hdr-font, #f5f0ee);
}

/* Overlay version — shown on top of the map for 10 seconds */
.sei-arriving-overlay {
	position: absolute;
	inset: 0;
	z-index: 1200;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.sei-arriving-overlay.sei-arriving-visible {
	opacity: 1;
	pointer-events: auto;
}

.sei-arriving-overlay .sei-arriving-wrap {
	min-height: 100%;
	height: 100%;
}