.mbl-locator {
	--mbl-border: #e0e0e0;
	--mbl-header-bg: #f7f7f7;
	--mbl-accent: #c8102e;
	--mbl-accent-dark: #a10c24;
	--mbl-text: #222;
	--mbl-muted: #666;
	font-family: inherit;
	color: var(--mbl-text);
	max-width: 100%;
	background: #fff;
	border: 1px solid var(--mbl-border);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.mbl-locator__title {
	margin: 0;
	padding: 18px 22px;
	background: linear-gradient(135deg, var(--mbl-accent), var(--mbl-accent-dark));
	color: #fff;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.mbl-locator__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--mbl-border);
	background: #fbfbfb;
}

.mbl-locator__search {
	flex: 1 1 260px;
	min-width: 200px;
	padding: 10px 14px;
	border: 1px solid var(--mbl-border);
	border-radius: 4px;
	font-size: 15px;
}

.mbl-locator__state-filter {
	padding: 10px 14px;
	border: 1px solid var(--mbl-border);
	border-radius: 4px;
	font-size: 15px;
	background: #fff;
}

.mbl-locator__mobile-sort {
	display: none; /* shown only below the card-layout breakpoint */
	padding: 10px 14px;
	border: 1px solid var(--mbl-border);
	border-radius: 4px;
	font-size: 15px;
	background: #fff;
}

.mbl-locator__count {
	margin-left: auto;
	color: var(--mbl-muted);
	font-size: 14px;
}

.mbl-locator__table-wrap {
	overflow-x: auto;
}

.mbl-locator__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.mbl-locator__table thead th {
	background: var(--mbl-header-bg);
	text-align: left;
	padding: 12px 14px;
	border-bottom: 2px solid var(--mbl-border);
	white-space: nowrap;
	user-select: none;
}

.mbl-locator__table th.is-sortable {
	cursor: pointer;
}

.mbl-locator__table th.is-sortable:hover {
	background: #eee;
}

.mbl-locator__table th.is-sortable::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	opacity: 0.35;
}

.mbl-locator__table th.is-sortable[data-order="asc"]::after {
	border-bottom: 5px solid var(--mbl-text);
	opacity: 1;
}

.mbl-locator__table th.is-sortable[data-order="desc"]::after {
	border-top: 5px solid var(--mbl-text);
	opacity: 1;
}

.mbl-locator__table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--mbl-border);
	vertical-align: top;
}

.mbl-locator__table tbody tr:last-child td {
	border-bottom: none;
}

.mbl-locator__table tbody tr:hover {
	background: #fafafa;
}

.mbl-locator__location-name {
	font-weight: 600;
}

.mbl-locator__store-number {
	color: var(--mbl-muted);
	font-size: 13px;
	display: block;
}

.mbl-schedule {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 18px;
	row-gap: 3px;
}

.mbl-schedule__row {
	display: contents;
}

.mbl-schedule__day {
	color: var(--mbl-text);
}

.mbl-schedule__time {
	color: var(--mbl-muted);
}

.mbl-schedule--fallback,
.mbl-schedule--empty {
	color: var(--mbl-muted);
	font-style: italic;
}

.mbl-locator__no-results {
	padding: 24px;
	text-align: center;
	color: var(--mbl-muted);
}

.mbl-empty {
	color: var(--mbl-muted);
}

/* Admin list table status badges */
.mbl-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
}

.mbl-status-active {
	background: #d7f5dc;
	color: #1e6b30;
}

.mbl-status-delco {
	background: #fff3cd;
	color: #8a6300;
}

.mbl-status-closed {
	background: #f3d4d4;
	color: #8a1c1c;
}

/* ==========================================================================
   Responsive: below this width the table collapses into stacked "cards"
   (one per location) instead of scrolling horizontally. Column headers are
   visually hidden (but stay in the DOM for screen readers) since sorting
   by clicking them isn't practical once the table is no longer a grid —
   the .mbl-locator__mobile-sort dropdown takes over that job instead.
   ========================================================================== */
@media (max-width: 720px) {

	.mbl-locator__title {
		font-size: 18px;
		padding: 14px 16px;
	}

	.mbl-locator__controls {
		padding: 14px 16px;
	}

	.mbl-locator__search,
	.mbl-locator__state-filter,
	.mbl-locator__mobile-sort {
		flex: 1 1 100%;
		width: 100%;
	}

	.mbl-locator__mobile-sort {
		display: block;
	}

	.mbl-locator__count {
		margin-left: 0;
		width: 100%;
	}

	.mbl-locator__table-wrap {
		overflow-x: visible;
	}

	.mbl-locator__table,
	.mbl-locator__table tbody,
	.mbl-locator__table tr,
	.mbl-locator__table td {
		display: block;
		width: 100%;
	}

	/* Visually hidden but still present for assistive tech. */
	.mbl-locator__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.mbl-locator__table tbody tr {
		padding: 14px 16px;
		border-bottom: 1px solid var(--mbl-border);
	}

	.mbl-locator__table tbody tr:last-child {
		border-bottom: none;
	}

	.mbl-locator__table td {
		padding: 3px 0;
		border-bottom: none;
	}

	.mbl-locator__table td:first-child {
		padding-bottom: 8px;
	}

	/* Field label shown above the value, e.g. "Lunch Buffet" then the
	   day/time grid below it. Block (not inline) so it doesn't run into
	   the grid that follows. */
	.mbl-locator__table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		color: var(--mbl-muted);
		margin-bottom: 3px;
	}

	.mbl-locator__location-name {
		font-size: 16px;
	}
}

@media (max-width: 420px) {
	.mbl-locator__title {
		font-size: 16px;
	}
}