/*
 * Seismic Explore — layout + theme presets.
 * Outer radius: Elementor Style (Box → Border radius).
 * Filters: Voxel-style PopupPicker (dark tone when data-c4p-sx-theme=dark).
 * Accent is owned by Elementor ({{WRAPPER}}); fallback on the widget shell only.
 */
.elementor-widget-c4p-seismic-explore {
	--c4p-sx-accent: #1d4ed8;
	--c4p-sx-marker-stroke: #0f172a;
	--c4p-sx-marker-fill: #e11d48;
}

.c4p-sx {
	--c4p-sx-map-h: 440px;
	--c4p-sx-radius-sm: 5px;
	--c4p-sx-gap: 15px;
	--c4p-sx-pad: 20px;
	/* Shared tokens — overridden by --theme-dark / --theme-light */
	--c4p-sx-bg: #0b1220;
	--c4p-sx-panel: #111827;
	--c4p-sx-line: rgba(148, 163, 184, 0.22);
	--c4p-sx-text: #e2e8f0;
	--c4p-sx-muted: #94a3b8;
	--c4p-sx-filters-bg: rgba(15, 23, 42, 0.55);
	--c4p-sx-map-bg: #020617;
	--c4p-sx-table-head: #0f172a;
	--c4p-sx-trigger-bg: #0f172a;
	--c4p-sx-surface: linear-gradient(165deg, #0a1020 0%, #111827 50%, #0b1220 100%);
	--c4p-sx-row-hover: rgba(29, 78, 216, 0.12);
	color: var(--c4p-sx-text);
	background: var(--c4p-sx-surface);
	border: 1px solid var(--c4p-sx-line);
	overflow: hidden;
	font-family: Montserrat, var(--e-global-typography-text-font-family, sans-serif);
	font-size: var(--e-global-typography-text-font-size, 15px);
	line-height: 1.5;
}

/* Dark preset — Explore default (widget + dark filter/calendar popups). */
.c4p-sx--theme-dark {
	--c4p-sx-bg: #0b1220;
	--c4p-sx-panel: #111827;
	--c4p-sx-line: rgba(148, 163, 184, 0.28);
	--c4p-sx-text: #e2e8f0;
	--c4p-sx-muted: #94a3b8;
	--c4p-sx-filters-bg: rgba(15, 23, 42, 0.55);
	--c4p-sx-map-bg: #020617;
	--c4p-sx-table-head: #0f172a;
	--c4p-sx-trigger-bg: #0f172a;
	--c4p-sx-surface: linear-gradient(165deg, #0a1020 0%, #111827 50%, #0b1220 100%);
	--c4p-sx-row-hover: rgba(29, 78, 216, 0.12);
}

/* Light preset — bright surface; PopupPicker stays light (no --tone-dark). */
.c4p-sx--theme-light {
	--c4p-sx-bg: #f8fafc;
	--c4p-sx-panel: #ffffff;
	--c4p-sx-line: #e2e8f0;
	--c4p-sx-text: #0f172a;
	--c4p-sx-muted: #64748b;
	--c4p-sx-filters-bg: #f1f5f9;
	--c4p-sx-map-bg: #e2e8f0;
	--c4p-sx-table-head: #f8fafc;
	--c4p-sx-trigger-bg: #ffffff;
	--c4p-sx-surface: linear-gradient(165deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
	--c4p-sx-row-hover: rgba(29, 78, 216, 0.08);
}

.c4p-sx.is-loading {
	opacity: 0.72;
	pointer-events: none;
}

.c4p-sx__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--c4p-sx-gap);
	padding: var(--c4p-sx-pad);
	border-bottom: 1px solid var(--c4p-sx-line);
}

.c4p-sx__brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.c4p-sx__mark {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: var(--c4p-sx-accent);
	flex: 0 0 auto;
}

.c4p-sx__title {
	margin: 0;
	font-family: Montserrat, var(--e-global-typography-primary-font-family, sans-serif);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--c4p-sx-text);
}

.c4p-sx__subtitle {
	margin: 4px 0 0;
	color: var(--c4p-sx-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
}

.c4p-sx__stats {
	color: var(--c4p-sx-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.c4p-sx__filters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 12px var(--c4p-sx-gap);
	padding: 16px var(--c4p-sx-pad);
	border-bottom: 1px solid var(--c4p-sx-line);
	background: var(--c4p-sx-filters-bg);
	align-items: end;
}

.c4p-sx__filter.ts-form-group,
.c4p-sx__filters .ts-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	min-width: 0;
}

.c4p-sx__filters label,
.c4p-sx__filters .ts-form-group > label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c4p-sx-muted);
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}

/* Triggers follow theme tokens (dark preset / light preset). */
.c4p-sx .c4p-popup-picker__trigger.ts-filter,
.c4p-sx button.c4p-popup-picker__trigger {
	background: var(--c4p-sx-trigger-bg) !important;
	background-color: var(--c4p-sx-trigger-bg) !important;
	border-color: var(--c4p-sx-line) !important;
	color: var(--c4p-sx-text) !important;
}

.c4p-sx .c4p-popup-picker__trigger .ts-filter-text,
.c4p-sx .c4p-popup-picker__value {
	color: var(--c4p-sx-text) !important;
}

.c4p-sx .c4p-popup-picker__placeholder {
	color: var(--c4p-sx-muted) !important;
}

.c4p-sx .c4p-popup-picker__trigger i,
.c4p-sx .c4p-popup-picker__trigger svg {
	color: var(--c4p-sx-muted) !important;
	fill: var(--c4p-sx-muted) !important;
}

.c4p-sx .c4p-popup-picker__trigger .ts-down-icon {
	border-right-color: var(--c4p-sx-muted);
	border-bottom-color: var(--c4p-sx-muted);
}

.c4p-sx .c4p-popup-picker--open .c4p-popup-picker__trigger,
.c4p-sx .c4p-popup-picker__trigger:focus {
	border-color: var(--c4p-sx-accent) !important;
	box-shadow: 0 0 0 1px var(--c4p-sx-accent);
	outline: none;
}

.c4p-sx__filter-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: stretch;
	grid-column: span 2;
	min-width: 0;
}

.c4p-sx__filter-actions .c4p-sx__btn {
	flex: 1 1 0;
	white-space: nowrap;
	width: auto;
	align-self: stretch;
}

.c4p-sx__btn {
	background: var(--c4p-sx-accent);
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 10px 16px;
	min-height: 42px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	transition: opacity 0.2s ease;
}

.c4p-sx__btn:hover {
	opacity: 0.92;
}

.c4p-sx__btn--ghost {
	background: transparent;
	border: 1px solid var(--c4p-sx-line);
	color: var(--c4p-sx-text);
}

.c4p-sx__chart-wrap {
	padding: 14px var(--c4p-sx-pad) 10px;
	border-bottom: 1px solid var(--c4p-sx-line);
}

.c4p-sx__chart-label {
	margin: 0 0 8px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c4p-sx-muted);
}

.c4p-sx__body {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	min-height: var(--c4p-sx-map-h);
}

.c4p-sx__map {
	min-height: var(--c4p-sx-map-h);
	background: var(--c4p-sx-map-bg);
}

/*
 * Voxel/theme often sets `path { fill: currentColor }` which paints Leaflet
 * circleMarkers black (stroke still works). Force marker colours from tokens.
 */
.c4p-sx .leaflet-overlay-pane svg path.c4p-sx-marker {
	fill: var(--c4p-sx-marker-fill, #e11d48) !important;
	stroke: var(--c4p-sx-marker-stroke, #0f172a) !important;
}

.c4p-sx__side {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--c4p-sx-line);
	background: var(--c4p-sx-panel);
	max-height: var(--c4p-sx-map-h);
}

.c4p-sx__detail {
	padding: var(--c4p-sx-pad);
	border-bottom: 1px solid var(--c4p-sx-line);
	min-height: 150px;
}

.c4p-sx__hint {
	margin: 0;
	color: var(--c4p-sx-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.c4p-sx__mag {
	font-size: 2rem;
	font-weight: 700;
	font-family: Montserrat, var(--e-global-typography-primary-font-family, sans-serif);
	color: var(--c4p-sx-accent);
	line-height: 1.1;
	margin-bottom: 12px;
	letter-spacing: -0.02em;
}

.c4p-sx__detail dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px var(--c4p-sx-gap);
	margin: 0;
	font-size: 0.875rem;
}

.c4p-sx__detail dt {
	color: var(--c4p-sx-muted);
	font-weight: 500;
}

.c4p-sx__detail dd {
	margin: 0;
	color: var(--c4p-sx-text);
}

.c4p-sx__detail a {
	color: var(--c4p-sx-accent);
	font-weight: 600;
}

.c4p-sx__table-wrap {
	overflow: auto;
	flex: 1;
}

.c4p-sx__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8125rem;
	color: var(--c4p-sx-text);
}

.c4p-sx__table th,
.c4p-sx__table td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--c4p-sx-line);
	text-align: left;
	line-height: 1.4;
}

.c4p-sx__table th {
	color: var(--c4p-sx-muted);
	font-weight: 600;
	position: sticky;
	top: 0;
	background: var(--c4p-sx-table-head);
}

.c4p-sx__table tr {
	cursor: pointer;
	transition: background 0.15s ease;
}

.c4p-sx__table tr:hover,
.c4p-sx__table tr.is-active {
	background: var(--c4p-sx-row-hover);
}

.c4p-sx__footer {
	padding: 14px var(--c4p-sx-pad);
	border-top: 1px solid var(--c4p-sx-line);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--c4p-sx-muted);
}

.c4p-sx__footer p {
	margin: 0;
}

@media (max-width: 900px) {
	.c4p-sx__body {
		grid-template-columns: 1fr;
	}

	.c4p-sx__side {
		border-left: 0;
		border-top: 1px solid var(--c4p-sx-line);
		max-height: none;
	}
}