/* ==========================================================================
   Multisite Center Locator — center-locator.css
   Styled per the Lightbridge "Find a Lightbridge location" reference design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Locator wrapper + brand tokens
   -------------------------------------------------------------------------- */
.mcl-locator {
	--mcl-blue: #007ab8;
	--mcl-blue-dark: #00608f;
	--mcl-navy: #000000;
	--mcl-red: #e82011;
	--mcl-red-dark: #c01a0e;
	--mcl-yellow: #ffd500;
	--mcl-yellow-dark: #ecc500;
	--mcl-text: #000000;
	--mcl-muted: #4b5563;
	--mcl-border: #d6dbe1;

	font-family: inherit;
	color: var(--mcl-text);
	box-sizing: border-box;
}

.mcl-locator *,
.mcl-locator *::before,
.mcl-locator *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   Intro block — heading + descriptive copy above the search bar.
   Optional feature (MCL_Intro); safe to remove with the class.
   -------------------------------------------------------------------------- */
.mcl-intro {
	max-width: 902px;
	margin: 20px auto;
	text-align: center;
}

/* Scoped with .mcl-locator so the heading beats the theme's own h2 rules. */
.mcl-locator .mcl-intro__heading {
	margin: 0 0 1rem;
	color: var(--mcl-blue);
	font-size: 64px;
	line-height: 60px;
	font-weight: 700;
}

.mcl-intro__subheading {
	margin: 0 auto 1.5rem;
	color: var(--mcl-text);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
}

.mcl-intro__text {
	margin: 0 auto 1rem;
	color: var(--mcl-text);
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
}

.mcl-intro__text:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.mcl-locator .mcl-intro__heading {
		font-size: 30px;
	}
}

/* --------------------------------------------------------------------------
   Search bar — pill input with attached red button, geo link below
   -------------------------------------------------------------------------- */
.mcl-search-bar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	max-width: 440px;
	margin: 0 auto 5.5rem;
}

.mcl-search-bar__input-wrap {
	position: relative;
	width: 100%;
}

.mcl-search-bar__input {
	width: 100%;
	padding: 0.9rem 10.5rem 0.9rem 1.5rem;
	border: 2px solid var(--mcl-blue);
	border-radius: 999px;
	font-size: 1rem;
	line-height: 1.25;
	background: #fff;
	color: var(--mcl-text);
	transition: border-color 0.15s;
}

.mcl-search-bar__input::placeholder {
	color: var(--mcl-muted);
}

.mcl-search-bar__input:focus {
	outline: none;
	border-color: var(--mcl-blue);
}

.mcl-search-bar__button {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	padding: 0 1.75rem;
	background: var(--mcl-red);
	color: #fff;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.15s;
}

.mcl-search-bar__button:hover,
.mcl-search-bar__button:focus-visible {
	background: var(--mcl-red-dark);
	outline: none;
}

.mcl-search-bar__geo {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 10px;
	background: none;
	border: none;
	padding: 0;
	color: var(--mcl-navy);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
}

.mcl-search-bar__geo:hover,
.mcl-search-bar__geo:focus-visible {
	color: var(--mcl-blue);
	outline: none;
}

.mcl-search-bar__geo-icon {
	flex-shrink: 0;
}

.mcl-search-error {
	display: none;
	width: 100%;
	color: var(--mcl-red-dark);
	font-size: 0.875rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Two-column layout: list | map
   -------------------------------------------------------------------------- */
.mcl-results {
	display: grid;
	grid-template-columns: 485px 1fr;
	gap: 4rem;
	align-items: start;
}

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

	/* Stack the center list first, the map second, on mobile. */
	.mcl-list {
		order: 1;
	}

	.mcl-map-wrap {
		order: 2;

		/* No sticky on mobile — a pinned map keeps the list scrolling
		   underneath it / the site nav (client-reported issue). 'relative'
		   (not static) keeps the directions popup confined to the map area. */
		position: relative;
	}
}

/* --------------------------------------------------------------------------
   Scrollable list
   -------------------------------------------------------------------------- */
.mcl-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-height: 652px; /* matches .mcl-map height */
	overflow-y: auto;

	/* Separation drop-shadow so the address list reads as its own panel
	   alongside the map. Extra right padding gives the shadow room. */
	/* padding: 0.25rem 1rem 0.25rem 0.5rem;
	border-radius: 12px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1); */
	scrollbar-width: thin;
	scrollbar-color: var(--mcl-border) transparent;
}

.mcl-list::-webkit-scrollbar {
	width: 6px;
}

.mcl-list::-webkit-scrollbar-thumb {
	background: var(--mcl-border);
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.mcl-map-wrap {
	position: sticky;
	top: 1.5rem;

	/* Own stacking context so the map (and its internal layers) can never
	   paint above the site navigation. */
	z-index: 0;
}

.mcl-map {
	width: 100%;
	height: 652px;
	border-radius: 12px;
	background: #e5e7eb;
	overflow: hidden;
}

@media (max-width: 900px) {
	.mcl-map {
		height: 360px;
	}

	.mcl-list {
		max-height: none;
	}
}

/* --------------------------------------------------------------------------
   Location card — borderless, blue circle pin left, content right
   -------------------------------------------------------------------------- */
.mcl-card {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
	padding: 1.25rem 0.875rem;
	border-radius: 10px;
	cursor: pointer; /* whole card opens its map tooltip */
	transition: background-color 0.15s;
}

.mcl-card:hover,
.mcl-card--active {
	background: #f2f7fb;
}

.mcl-card:focus-visible {
	outline: 2px solid var(--mcl-blue);
	outline-offset: 2px;
}

/* The center matched by the current search — persistent highlight with a
   blue accent bar, so it's clear which address the result belongs to. */
.mcl-card--searched {
	background: #e3f0fa;
	box-shadow: inset 4px 0 0 var(--mcl-blue);
}

.mcl-card__pin-icon {
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.mcl-card__body {
	flex: 1;
	min-width: 0;
}

/* Name — title: 24px / 30px, primary blue.
   Scoped with .mcl-locator so the margin beats the theme's
   `.lbc-page__content h3` rule inside the locator only. */
.mcl-locator .mcl-card__name {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 800;
	line-height: 30px;
	color: var(--mcl-blue);
}

.mcl-card__name a {
	color: var(--mcl-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mcl-card__name a:hover {
	color: var(--mcl-blue-dark);
}

/* Status badge — blue rectangle, white text, below the name.
   Square corners (no border-radius) and 18px text per client. */
.mcl-card__status-badge {
	display: inline-block;

	/* The badge's own padding already creates its visual size, so keep the
	   outer margins minimal — otherwise title → badge → address spacing
	   stacks up and looks too large. */
	margin: 2px 0 8px;
	padding: 10px 25px;
	background: var(--mcl-blue);
	color: #fff;
	border-radius: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* Address / phone / email — blue underlined links, one per line.
   Links: 18px / 24px per client. Scoped with .mcl-locator + !important on
   color because theme link styles otherwise override it to dark text. */
.mcl-locator .mcl-card__address,
.mcl-locator .mcl-card__phone,
.mcl-locator .mcl-card__email {
	display: block;
	font-style: normal;
	font-size: 18px;
	color: var(--mcl-blue) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-bottom: 0.3rem;
	line-height: 24px;
	overflow-wrap: anywhere;
}

.mcl-locator .mcl-card__address:hover,
.mcl-locator .mcl-card__phone:hover,
.mcl-locator .mcl-card__email:hover {
	color: var(--mcl-blue-dark) !important;
}

/* Hours — plain dark text */
.mcl-card__hours {
	margin: 0.15rem 0 0;
}

.mcl-card__hours ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mcl-card__hours li {
	font-size: 18px;
	color: var(--mcl-text);
	line-height: 24px;
}

/* Distance (injected by JS after a search) */
.mcl-card__distance {
	font-size: 0.85rem;
	color: var(--mcl-muted);
	min-height: 0;
	margin: 0.25rem 0 0;
}

.mcl-card__distance:not(:empty) {
	margin-bottom: 0.25rem;
}

/* CTA buttons — yellow Request Info, red Schedule A Tour, pill shape.
   Scoped with .mcl-locator + !important where themes commonly override
   (display, width, underline) so the buttons stay side-by-side. */
.mcl-locator .mcl-card__ctas {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}

.mcl-locator .mcl-card__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	/* Natural-width pills, side by side, left-aligned (per approved design).
	   flex-grow 0 so neither button stretches. */
	flex: 0 0 auto;
	width: auto !important;
	padding: 9px 30px;
    border-radius: 38px;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none !important;
	text-align: center;
	white-space: nowrap;
	border: none;
	box-shadow: none;
	transition: background-color 0.15s, color 0.15s;
}

.mcl-locator .mcl-card__cta--request {
	background: var(--mcl-yellow);
	color: var(--mcl-navy) !important;
}

.mcl-locator .mcl-card__cta--request:hover,
.mcl-locator .mcl-card__cta--request:focus-visible {
	background: var(--mcl-yellow-dark);
	color: var(--mcl-navy) !important;
}

.mcl-locator .mcl-card__cta--tour {
	background: var(--mcl-red);
	color: #fff !important;
}

.mcl-locator .mcl-card__cta--tour:hover,
.mcl-locator .mcl-card__cta--tour:focus-visible {
	background: var(--mcl-red-dark);
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Empty / no-results states
   -------------------------------------------------------------------------- */
.mcl-no-results,
.mcl-list--no-match-message {
	text-align: center;
	color: var(--mcl-muted);
	padding: 2rem 1rem;
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Map info window (pin tooltip) — spacing/design per the Lightbridge reference:
   blue title, address, small-icon contact rows, centred blue buttons.
   Lives inside #mcl-map, so the .mcl-locator CSS variables are available.
   -------------------------------------------------------------------------- */
.mcl-iw {
	min-width: 250px;
	max-width: 300px;
	padding: 10px 8px 8px;
	font-family: inherit;
}

.mcl-iw__title {
	color: var(--mcl-blue);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 10px;
	padding-right: 30px; /* clear the close (X) button on the same line */
}

/* Google's Maps JS API renders the InfoWindow close (X) button inside its own
   header row (.gm-style-iw-chr), which pushes our title onto a second line.
   Collapse that header and pin the X to the top-right so the title and the X
   sit inline; the title's padding-right (above) keeps the text clear of it. */
.mcl-locator .gm-style-iw-chr {
	height: 0;
	min-height: 0;
}

.mcl-locator .gm-style-iw-chr .gm-ui-hover-effect {
	position: absolute !important;
	top: 0 !important;
	right: 8px !important;
	z-index: 1;
}

/* Status badge — colour-coded pill (matches the map pin colours). */
.mcl-iw__badge {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	background: var(--mcl-blue);
}

.mcl-iw__badge--new {
	background: var(--mcl-blue);
}

.mcl-iw__badge--coming-soon {
	background: var(--mcl-red);
}

.mcl-iw__address {
	color: var(--mcl-text);
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 14px;
}

.mcl-locator .mcl-iw__row {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #444 !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none !important;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.mcl-locator .mcl-iw__row:hover {
	color: var(--mcl-blue) !important;
}

/* Small inline icon (not a chip) per the reference. */
.mcl-iw__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--mcl-blue);
}

.mcl-iw__btns {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.mcl-locator .mcl-iw__btn {
	display: inline-block !important;
	background: var(--mcl-blue);
	color: #fff !important;
	padding: 10px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 0.15s;
}

.mcl-locator .mcl-iw__btn:hover,
.mcl-locator .mcl-iw__btn:focus-visible {
	background: var(--mcl-blue-dark);
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   AJAX suggestion dropdown (replaces Google Places autocomplete). Positioned
   inside the relatively-positioned .mcl-search-bar__input-wrap.
   -------------------------------------------------------------------------- */
.mcl-suggest {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 100000; /* above sticky site nav */
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--mcl-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 320px;
	overflow-y: auto;
	text-align: left;
}

.mcl-suggest[hidden] {
	display: none;
}

.mcl-suggest__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 14px;
	border-radius: 8px;
	cursor: pointer;
}

.mcl-suggest__item:hover,
.mcl-suggest__item.is-active {
	background: #f2f7fb;
}

.mcl-suggest__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mcl-blue);
}

.mcl-suggest__addr {
	font-size: 13px;
	line-height: 1.3;
	color: var(--mcl-muted);
}

.mcl-suggest__empty {
	padding: 12px 14px;
	font-size: 14px;
	color: var(--mcl-muted);
	text-align: center;
}

/* Friendly fallback shown in place of the map after a Google auth failure. */
.mcl-map__error {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 1.5rem;
	text-align: center;
	color: var(--mcl-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Directions — "GET DIRECTIONS" form modal
   -------------------------------------------------------------------------- */
.mcl-modal[hidden] {
	display: none;
}

/* Overlays only the map column (mounted inside .mcl-map-wrap). */
.mcl-modal {
	position: absolute;
	inset: 0;
	z-index: 20; /* above the map + its controls/tooltip */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.mcl-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.mcl-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100% - 2rem);
	overflow-y: auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	padding: 1.75rem 2rem 2rem;
}

.mcl-modal__close {
	position: absolute;
	top: 0.85rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: #555;
	cursor: pointer;
}

.mcl-locator .mcl-modal__title,
.mcl-modal__title {
	margin: 0 0 1.5rem;
	color: var(--mcl-blue, #007ab8);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mcl-modal__input {
	display: block;
	width: 100%;
	padding: 0.85rem 1rem;
	margin-bottom: 1.25rem;
	border: 1px solid #d6dbe1;
	border-radius: 6px;
	font-size: 1rem;
	color: #111;
	background: #fff;
}

.mcl-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.25rem;
}

.mcl-modal__units {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.mcl-modal__radio {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 1rem;
	color: var(--mcl-blue, #007ab8);
	cursor: pointer;
}

.mcl-modal__radio input {
	accent-color: var(--mcl-blue, #007ab8);
}

.mcl-modal__go {
	background: var(--mcl-blue, #007ab8);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0.7rem 1.4rem;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.15s;
}

.mcl-modal__go:hover,
.mcl-modal__go:focus-visible {
	background: var(--mcl-blue-dark, #00608f);
	outline: none;
}

.mcl-modal__status {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--mcl-muted, #4b5563);
}

/* --------------------------------------------------------------------------
   Directions — "STORE DIRECTION" left-column panel (turn-by-turn)
   -------------------------------------------------------------------------- */
.mcl-directions[hidden] {
	display: none;
}

.mcl-directions {
	max-height: 652px; /* matches the map height */
	overflow-y: auto;
	border-radius: 12px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
	background: #fff;
}

@media (max-width: 900px) {
	.mcl-directions {
		max-height: none;
	}
}

.mcl-directions__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: #fff;
	border-bottom: 1px solid var(--mcl-border);
}

.mcl-locator .mcl-directions__title,
.mcl-directions__title {
	margin: 0;
	color: var(--mcl-blue);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mcl-directions__close {
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	color: #777;
	cursor: pointer;
}

.mcl-directions__external {
	display: inline-block;
	margin: 0.75rem 1.25rem 0;
	font-size: 0.85rem;
	color: var(--mcl-blue);
	text-decoration: underline;
}

.mcl-directions__steps {
	padding: 0.5rem 1rem 1rem;
	font-size: 14px;
	line-height: 1.4;
}

/* Tidy Google's default DirectionsRenderer panel markup. */
.mcl-directions__steps .adp-placemark {
	border: none;
	background: #f7f9fb;
	margin: 0.5rem 0;
}

.mcl-directions__steps .adp-summary {
	margin: 0.5rem 0 0.75rem;
	color: var(--mcl-text);
}

.mcl-directions__steps table.adp-directions {
	width: 100%;
	border-collapse: collapse;
}

.mcl-directions__steps .adp-directions td {
	padding: 0.6rem 0.4rem;
	border-top: 1px solid var(--mcl-border);
	vertical-align: top;
}