/* LocationsSystemV2 — filterable locations panel (Figma "Filter", node 15354:2604).
   Card surface radius, drop shadow and both button styles already come from .crd and the
   theme's --btn-* tokens, which carry the design's 0 radius, 0/.25em/.625em card shadow and
   3px v2 border. Only the filter-bar field chrome and the card's internal rhythm live here. */
.loc-sys.v2 {

	.loc-fltr-rw {
		gap: 1rem;
	}

	/* Search box and state select share the design's accent hairline on the band surface.
	   Both stretch to the row height, which the search box's icon button establishes. */
	.loc-srch,
	.loc-slct {
		border: 1px solid var(--accent);
		background-color: var(--background);
	}

	.loc-srch {
		flex: 1 1 18rem;
		gap: 1rem;
		max-width: 21rem;
		padding: 0.5rem 0.5rem 0.5rem 1rem;

		input {
			min-width: 0;
			padding: 0;
			line-height: 1.5;

			&::placeholder {
				color: var(--text-color);
				opacity: 1;
			}
		}
	}

	.loc-srch-go {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
		color: var(--btn-pry-txt);
		background-color: var(--btn-pry);
		transition: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s;

		svg {
			width: 1.625rem;
			height: 1.625rem;
		}

		@media (hover: hover) and (pointer: fine) {

			&:is(:hover, :focus-visible) {
				color: var(--btn-hvr-pry-txt);
				background-color: var(--btn-hvr-pry);
			}
		}
	}

	.loc-slct {
		position: relative;
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		width: 15.625rem;
		max-width: 100%;
		padding: 0.75rem;

		/* appearance: base-select opts this <select> into the CSS Customizable Select
		   spec so the popup and its options can actually take padding/color — the plain
		   OS popup (still used by browsers without the feature) ignores both. The native
		   picker arrow is hidden in favor of the IconChevronDownLine already overlaid below. */
		select {
			appearance: base-select;
			padding: 0 1.75rem 0 0;
			line-height: 1.5;
			cursor: pointer;

			&::picker-icon {
				display: none;
			}

			&::picker(select) {
				border: 1px solid var(--accent);
				background-color: var(--background);
			}

			option {
				padding: 0.5rem 0.75rem;

				&:hover,
				&:focus,
				&:checked {
					color: var(--background);
					background-color: var(--accent);
				}
			}
		}

		svg {
			position: absolute;
			right: 0.75rem;
			width: 1.375rem;
			height: 1.375rem;
			pointer-events: none;
		}
	}

	/* .btn is inline-flex, so the author-sheet display out-ranks the UA [hidden] rule.
	   The button ships hidden and init.js reveals it only when geolocation can work. */
	[data-role="geolocate"][hidden] {
		display: none;
	}

	.loc-hint {
		margin-top: 1rem;
	}

	/* Cards sit on the band surface rather than the inner-theme tint .bg-bx would paint —
	   the design keeps card and band the same white and separates them by shadow alone. */
	.loc-itm {
		position: relative;
		z-index: 1;
		gap: 1.5rem;
		padding: 2rem;
		background-color: var(--background);
	}

	.loc-itm-txt {
		gap: 1rem;
	}

	.loc-ln {
		gap: 0.5rem;
		margin: 0;

		svg {
			width: 1.5rem;
			height: 1.5rem;
			color: var(--accent);
		}

		a {
			font-weight: bold;
			text-decoration: underline;
		}
	}

	/* Hours can be several stacked runs (Mon-Thu / Fri / Sat / Sun), so the icon aligns
	   to the top of the list rather than centering against its full height. */
	.loc-hrs {
		align-items: flex-start;
	}

	.loc-hrs-lst {
		gap: 0.25rem;
	}

	/* Buttons hold the card floor so a wrapped title can't stagger them across a row. */
	.loc-itm-btns {
		gap: 1rem;
		margin-top: auto;
	}

	/* Filtered-out items are .flx, whose display also out-ranks the UA [hidden] rule. */
	.loc-lst > [hidden] {
		display: none;
	}
}

/* 699px Responsive */
@media screen and (max-width:699px) {

	.loc-sys.v2 {

		/* The filter row is one control per line down here, so let each fill it rather
		   than leave the select and the geolocate button hanging on a ragged right edge. */
		.loc-srch,
		.loc-slct,
		[data-role="geolocate"] {
			width: 100%;
			max-width: 100%;
		}

		.loc-itm-btns > .btn {
			flex: 1 1 auto;
		}
	}
}