/* =============================================================================
   LA MOTA — STORE LOCATOR
   Self-contained styles for the [lamota_locations] component.
   Uses the brand tokens from lamota-brand.css (loaded site-wide).
   ========================================================================== */

.lm-locator {
	--lmL-bg:     #1c1c1c;
	--lmL-panel:  #202020;
	--lmL-line:   #2c2c2c;
	--lmL-text:   #e9eaea;
	--lmL-muted:  #9aa0a0;
	--lmL-teal:   var(--lm-teal, #63C8CD);
	--lmL-tealD:  var(--lm-teal-dark, #00B9B4);

	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: 0;
	border: 1px solid var(--lmL-line);
	border-radius: var(--lm-radius-lg, 18px);
	overflow: hidden;
	background: var(--lmL-bg);
	box-shadow: var(--lm-shadow-2, 0 12px 34px rgba(0,0,0,.28));
	font-family: var(--lm-font-body, system-ui, sans-serif);
	color: var(--lmL-text);
}
.lm-locator--listonly { grid-template-columns: 1fr; }

/* ---- Panel (list side) ------------------------------------------------- */
.lm-locator__panel {
	display: flex;
	flex-direction: column;
	background: var(--lmL-panel);
	min-height: 0;
}

.lm-locator__toolbar {
	padding: 16px;
	border-bottom: 1px solid var(--lmL-line);
	background: linear-gradient(180deg, rgba(99,200,205,.10), rgba(99,200,205,0));
}

.lm-locator__search { position: relative; margin-bottom: 12px; }
.lm-locator__search-ico {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	line-height: 0;
	pointer-events: none;
}
.lm-locator__search-ico svg { width: 15px; height: 15px; fill: var(--lmL-teal); }
.lm-locator__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px 12px 40px;
	background: #181818;
	border: 1px solid var(--lmL-line);
	border-radius: var(--lm-radius-pill, 999px);
	color: var(--lmL-text);
	font-size: 15px;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.lm-locator__input::placeholder { color: var(--lmL-muted); }
.lm-locator__input:focus {
	border-color: var(--lmL-teal);
	box-shadow: 0 0 0 3px rgba(99,200,205,.22);
}

/* ---- "Use my location" button ----------------------------------------- */
.lm-locator__near {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 12px;
	padding: 10px 14px;
	font-family: var(--lm-font-heading, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--lmL-teal);
	background: rgba(99,200,205,.10);
	border: 1px solid rgba(99,200,205,.38);
	border-radius: var(--lm-radius-pill, 999px);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.lm-locator__near:hover {
	background: var(--lmL-teal);
	color: #07171a;
	border-color: var(--lmL-teal);
	box-shadow: 0 0 18px rgba(99,200,205,.34);
}
.lm-locator__near:disabled { cursor: default; opacity: .85; }
.lm-locator__near-ico { line-height: 0; display: inline-flex; }
.lm-locator__near svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.lm-locator__near.is-loading svg { animation: lmLocSpin .9s linear infinite; }
@keyframes lmLocSpin { to { transform: rotate(360deg); } }
.lm-locator__near-status {
	margin: -4px 0 12px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--lmL-muted);
}
.lm-locator__near-status.is-ok { color: var(--lmL-teal); }
.lm-locator__near-status.is-error { color: #e98c8c; }
.lm-locator__near-status.is-busy { color: var(--lmL-muted); }

.lm-locator__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.lm-chip {
	appearance: none;
	border: 1px solid var(--lmL-line);
	background: #181818;
	color: var(--lmL-muted);
	font-family: var(--lm-font-heading, sans-serif);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	padding: 8px 16px;
	border-radius: var(--lm-radius-pill, 999px);
	cursor: pointer;
	transition: all .18s ease;
}
.lm-chip:hover { color: var(--lmL-text); border-color: var(--lmL-teal); }
.lm-chip.is-active {
	background: var(--lmL-teal);
	color: #191919;
	border-color: var(--lmL-teal);
	box-shadow: 0 0 18px rgba(99,200,205,.40);
}

/* ---- List -------------------------------------------------------------- */
.lm-locator__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	max-height: 600px;
	scrollbar-color: var(--lmL-teal) transparent;
}
.lm-locator--listonly .lm-locator__list { max-height: none; }

.lm-store {
	border-bottom: 1px solid var(--lmL-line);
	padding: 4px 16px 14px;
	transition: background .18s ease;
}
.lm-store:hover { background: rgba(99,200,205,.06); }
.lm-store.is-active { background: rgba(99,200,205,.12); box-shadow: inset 3px 0 0 var(--lmL-teal); }

.lm-store__head {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 12px 0 8px;
	cursor: pointer;
	color: inherit;
}
.lm-store__name {
	display: block;
	font-family: var(--lm-font-heading, sans-serif);
	font-weight: 800;
	font-size: 17px;
	color: #fff;
	margin-bottom: 4px;
}
.lm-store__addr { display: block; font-size: 14px; color: var(--lmL-muted); line-height: 1.4; }
.lm-store__hours { display: block; font-size: 13px; color: var(--lmL-teal); margin-top: 4px; white-space: pre-line; }

.lm-store__actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; }
.lm-store__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
	gap: 6px;
	font-family: var(--lm-font-heading, sans-serif);
	font-weight: 700;
	font-size: 12px;
	text-decoration: none;
	padding: 7px 10px;
	border-radius: var(--lm-radius-pill, 999px);
	background: var(--lmL-teal);
	color: #191919 !important;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.lm-store__btn:hover { background: var(--lmL-tealD); transform: translateY(-1px); box-shadow: 0 0 16px rgba(99,200,205,.4); }
.lm-store__btn--ghost {
	background: transparent;
	color: var(--lmL-teal) !important;
	border: 1px solid var(--lmL-teal);
}
.lm-store__btn--ghost:hover { background: rgba(99,200,205,.12); color: #fff !important; box-shadow: none; }
.lm-store__btn svg { width: 12px; height: 12px; fill: currentColor; }

.lm-store__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
/* Colours are forced (scoped selector + !important) so the host theme's
   global link/SVG rules can't repaint these into its own brand blue. */
.lm-locator .lm-store__soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid rgba(99,200,205,.35) !important;
	color: #63C8CD !important;
	background: rgba(99,200,205,.06) !important;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.lm-locator .lm-store__soc:hover { background: #63C8CD !important; color: #191919 !important; transform: translateY(-1px); }
.lm-locator .lm-store__soc svg { width: 17px; height: 17px; fill: currentColor !important; }

.lm-locator__empty { padding: 28px 16px; text-align: center; color: var(--lmL-muted); }

/* ---- Map --------------------------------------------------------------- */
.lm-locator__map {
	width: 100%;
	height: var(--lm-h, 600px);
	min-height: 320px;
	background: #1f1f1f;
	scroll-margin-top: 80px; /* clear the sticky nav when scrolled into view on mobile */
}

/* Tile-layer guard. Host themes routinely ship a global `img{max-width:100%}`
   (sometimes with display:block) for responsive images. Applied to Leaflet's
   raster tiles that rule blanks the tile layer entirely — the map goes dark
   while markers, controls, and popups still render. Reset img sizing inside
   the map so tiles paint under any theme. Scoped to the map only, so the host
   theme's responsive images are untouched everywhere else. */
.lm-locator__map img,
.leaflet-container img {
	max-width: none !important;
}

/* Leaflet container: brand background under the tiles + inherit the body font
   so its controls/attribution read as ours. */
.leaflet-container {
	background: #1c1c1c;
	font-family: var(--lm-font-body, system-ui, sans-serif);
}

/* Custom teardrop pin (divIcon) — strip Leaflet's default white icon box. */
.lm-pin { background: transparent; border: 0; }
.lm-pin svg { display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }

/* Zoom controls, tinted to the brand. */
.leaflet-bar a,
.leaflet-bar a:hover {
	background: #202020;
	color: #63C8CD;
	border-bottom-color: #2c2c2c;
}
.leaflet-bar a:hover { background: #262626; }
.leaflet-control-attribution {
	background: rgba(25,25,25,.78) !important;
	color: #9aa0a0 !important;
}
.leaflet-control-attribution a { color: #63C8CD !important; }

/* ---- Branded popup (override Leaflet's white bubble) ------------------- */
.lm-leaflet-popup .leaflet-popup-content-wrapper {
	background: #191919;
	color: #EAF4F5;
	border: 1px solid rgba(99,200,205,.55);
	border-radius: 14px;
	box-shadow: 0 14px 38px rgba(0,0,0,.55);
}
.lm-leaflet-popup .leaflet-popup-content {
	margin: 14px;
	line-height: 1.4;
}
.lm-leaflet-popup .leaflet-popup-tip {
	background: #191919;
	border: 1px solid rgba(99,200,205,.55);
	box-shadow: none;
}
.lm-leaflet-popup .leaflet-popup-close-button {
	color: #9FB9BD;
	top: 8px;
	right: 8px;
	font-size: 20px;
	transition: color .16s ease;
}
.lm-leaflet-popup .leaflet-popup-close-button:hover { color: #63C8CD; background: transparent; }
/* Keep the popup scrollable but hide its scrollbar. */
.lm-leaflet-popup .leaflet-popup-content-wrapper { scrollbar-width: none; -ms-overflow-style: none; }
.lm-leaflet-popup .leaflet-popup-content-wrapper::-webkit-scrollbar { width: 0; height: 0; }

/* Popup content (scoped class wrappers we control) */
.lm-iw { font-family: var(--lm-font-body, sans-serif); color: #EAF4F5; max-width: 310px; padding: 2px 2px 4px; }
.lm-iw__name { display: block; font-family: var(--lm-font-heading, sans-serif); font-size: 16px; color: #FFFFFF; margin-bottom: 4px; padding-right: 18px; }
.lm-iw__addr { font-size: 13px; color: #AFC9CD; line-height: 1.4; }
.lm-iw__hours { font-size: 12px; color: #63C8CD; margin-top: 4px; white-space: pre-line; }
.lm-iw__row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; }
.lm-iw__btn {
	display: inline-block;
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
	font-weight: 700;
	font-size: 12px;
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 999px;
	background: #63C8CD;
	color: #0B1416 !important;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.lm-iw__btn--ghost { background: transparent; color: #63C8CD !important; border: 1px solid rgba(99,200,205,.55); }
.lm-iw__btn:hover { background: #00B9B4; transform: translateY(-1px); box-shadow: 0 0 16px rgba(99,200,205,.4); }
.lm-iw__btn--ghost:hover { background: rgba(99,200,205,.12); color: #fff !important; box-shadow: none; }
.lm-iw__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 9px; }
.lm-leaflet-popup .lm-iw__soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(99,200,205,.5) !important;
	color: #63C8CD !important;
	background: rgba(99,200,205,.08) !important;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.lm-leaflet-popup .lm-iw__soc:hover { background: #63C8CD !important; color: #0B1416 !important; transform: translateY(-1px); }
.lm-leaflet-popup .lm-iw__soc svg { width: 15px; height: 15px; fill: currentColor !important; }

/* ---- Desktop: lock height so the map fills the full box (no grey gap) --- */
@media (min-width: 861px) {
	.lm-locator { height: var(--lm-h, 600px); }
	.lm-locator__map { height: 100%; }
	.lm-locator__list { max-height: none; }
}

/* ---- Responsive: stack list over map ----------------------------------- */
@media (max-width: 860px) {
	.lm-locator { grid-template-columns: 1fr; }
	.lm-locator__list { max-height: 360px; }
	.lm-locator__map { min-height: 360px; }
	/* center everything when the locator stacks on mobile */
	.lm-locator__filters { justify-content: center; }
	.lm-store__head { text-align: center; align-items: center; }
	.lm-store__actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.lm-chip, .lm-store, .lm-store__btn { transition: none !important; }
	.lm-store__btn:hover { transform: none !important; }
	.lm-locator__near.is-loading svg { animation: none !important; }
}

/* ---- Opening soon + description (sidebar) -------------------------------- */
.lm-store--soon { background: linear-gradient(90deg, rgba(217,164,65,.07), transparent 60%); }
.lm-store__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: var(--lm-radius-pill, 999px);
	background: rgba(217,164,65,.16);
	color: #E7BC6A;
	font-family: var(--lm-font-heading, sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}
.lm-store__desc {
	display: block;
	margin-top: 4px;
	color: var(--lmL-muted);
	font-size: 12.5px;
	line-height: 1.45;
}

/* ---- Opening soon + description (map info window) ------------------------ */
.lm-iw__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #F4E2C2;
	color: #7A5A1E;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	vertical-align: middle;
}
.lm-iw__desc {
	margin-top: 4px;
	color: #9FB9BD;
	font-size: 12.5px;
	line-height: 1.45;
}

/* ---- Store photo (Elfsight-style banner) --------------------------------- */
.lm-store__photo {
	position: relative;
	margin: 0 0 4px;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}
.lm-store__photo img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
}
.lm-store__photo-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(217,164,65,.92);
	color: #1c1304;
	font-family: var(--lm-font-heading, sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* info window photo */
.lm-iw__photo {
	margin: 0 0 8px;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
}
.lm-iw__photo img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}