/**
 * Mapa de distribuidores (lv-distributor-map).
 *
 * Los valores configurables llegan como custom properties --lv-dm-* que los
 * controles del widget sobrescriben. Los botones usan selector compuesto
 * (.lv-distributor-map .lv-dm-type) porque el kit de Elementor estiliza
 * `button` con .elementor-kit-N button (0,1,1) y le ganaría a una clase sola.
 */
/* `overflow: hidden` es lo que hace que el radio del borde recorte los tiles
   del mapa, que son opacos. El precio es que también recorta un InfoWindow
   anclado justo en el borde superior; en la práctica no pasa porque el
   fitBounds del JS deja 32px de holgura alrededor de los marcadores. */
.lv-distributor-map {
	display: grid;
	grid-template-columns: var(--lv-dm-sidebar-width, 320px) 1fr;
	overflow: hidden;
}

.lv-dm-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	min-width: 0;
}

/* --- Botones de tipo --- */

.lv-dm-types {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lv-distributor-map .lv-dm-type {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 20px;
	border: none;
	border-radius: var(--lv-dm-btn-radius, 999px);
	background: var(--lv-dm-btn-bg, #e9e9e9);
	color: var(--lv-dm-btn-color, #9b9b9b);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lv-distributor-map .lv-dm-type:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.lv-distributor-map .lv-dm-type:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lv-distributor-map .lv-dm-type[aria-pressed='true'] {
	background: var(--lv-dm-btn-active-bg, var(--lv-dm-marker-color, #d32027));
	color: var(--lv-dm-btn-active-color, #ffffff);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.lv-dm-type__icon {
	display: inline-flex;
	font-size: var(--lv-dm-btn-icon-size, 1.25em);
}

/* 1em y no 1.25em: el font-size del padre ya escala al hijo, así que con
   1.25em en los dos el svg salía a 1.5625em y el control de tamaño valdría
   el doble de lo que dice. */
.lv-dm-type__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* --- Campos --- */

.lv-dm-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lv-dm-field > label {
	font-weight: 700;
}

.lv-distributor-map .lv-dm-search,
.lv-distributor-map .lv-dm-city {
	width: 100%;
	padding: var(--lv-dm-field-padding, 10px 14px);
	border: 1px solid var(--lv-dm-field-border, #cccccc);
	border-radius: var(--lv-dm-field-radius, 8px);
	background: var(--lv-dm-field-bg, #ffffff);
	color: var(--lv-dm-field-color, inherit);
	font: inherit;
}

.lv-distributor-map .lv-dm-search:focus-visible,
.lv-distributor-map .lv-dm-city:focus-visible {
	outline: 2px solid var(--lv-dm-marker-color, #d32027);
	outline-offset: 1px;
}

/* La atenuación va también en una variable: el control de color pone
   --lv-dm-status-opacity a 1 junto con el color, para que el tono elegido
   salga tal cual y no lavado por el 0.75 de por defecto. */
.lv-dm-status {
	min-height: 1.2em;
	font-size: 0.875em;
	color: var(--lv-dm-status-color, inherit);
	opacity: var(--lv-dm-status-opacity, 0.75);
}

.lv-dm-info {
	margin-top: auto;
}

/* --- Mapa --- */

.lv-dm-map {
	position: relative;
	height: var(--lv-dm-height, 560px);
	min-height: var(--lv-dm-map-min-height, 320px);
	background: var(--lv-dm-map-bg, #e8e6e1);
}

.lv-dm-map__nokey {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	opacity: 0.6;
}

/* Pin propio (SVG inline vía AdvancedMarkerElement como fallback visual). */
.lv-dm-pin {
	color: var(--lv-dm-marker-color, #d32027);
	line-height: 0;
}

/* --- Tarjeta del popup (InfoWindow) --- */

.lv-dm-card {
	max-width: var(--lv-dm-card-width, 240px);
	font-family: inherit;
	color: var(--lv-dm-card-text-color, #4a4a4a);
}

.lv-dm-card__img {
	display: block;
	width: 100%;
	height: var(--lv-dm-card-img-height, 110px);
	object-fit: cover;
	border-radius: var(--lv-dm-card-img-radius, 8px);
	margin-bottom: 10px;
}

/* El color cae al del marcador activo, que el JS reescribe inline en el
   wrapper con cada clic de tipo; por eso el control tiene variable propia. */
.lv-dm-card__icon {
	display: inline-flex;
	font-size: var(--lv-dm-card-icon-size, 1.4em);
	color: var(--lv-dm-card-icon-color, var(--lv-dm-marker-color, #d32027));
	margin-bottom: 4px;
}

/* 1em por lo mismo que en .lv-dm-type__icon svg: el padre ya escala. */
.lv-dm-card__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lv-dm-card__title {
	margin: 0 0 2px;
	font-size: 1em;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--lv-dm-card-title-color, #1a1a1a);
}

.lv-dm-card__city {
	margin: 0;
	text-transform: uppercase;
	font-size: 0.8em;
}

.lv-dm-card__address {
	margin: 0 0 10px;
	font-size: 0.8em;
}

.lv-dm-card__actions {
	display: flex;
	align-items: center;
	gap: var(--lv-dm-card-actions-gap, 8px);
}

.lv-dm-card .lv-dm-card__call {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--lv-dm-call-padding, 6px 16px);
	border-radius: var(--lv-dm-call-radius, 999px);
	background: var(--lv-dm-card-btn-bg, var(--lv-dm-marker-color, #d32027));
	color: var(--lv-dm-card-btn-color, #ffffff);
	font-weight: 700;
	font-size: 0.8em;
	text-decoration: none;
}

.lv-dm-card .lv-dm-card__share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lv-dm-share-size, 30px);
	height: var(--lv-dm-share-size, 30px);
	padding: 0;
	border: var(--lv-dm-share-border-width, 1px) solid
		var(--lv-dm-share-border-color, var(--lv-dm-field-border, #cccccc));
	border-radius: var(--lv-dm-share-radius, 50%);
	background: var(--lv-dm-share-bg, #ffffff);
	color: var(--lv-dm-share-color, var(--lv-dm-card-text-color, #4a4a4a));
	cursor: pointer;
	line-height: 0;
}

.lv-dm-card__copied {
	font-size: 0.75em;
	opacity: 0.75;
}

/* El fondo, el radio y el relleno de la burbuja van aquí y no en .lv-dm-card:
   el chrome (la punta, la sombra, la aspa de cerrar) es de Google y vive en
   .gm-style-iw-c, así que estilar solo la tarjeta dejaría un marco blanco. */
.lv-distributor-map .gm-style .gm-style-iw-c {
	border-radius: var(--lv-dm-card-radius, 12px);
	padding: var(--lv-dm-card-padding, 12px);
	background: var(--lv-dm-card-bg, #ffffff);
}

/* Google fija max-width y overflow en línea sobre .gm-style-iw-d; sin esto
   un ancho de tarjeta mayor que el suyo no se vería. */
.lv-distributor-map .gm-style .gm-style-iw-d {
	overflow: auto !important;
	max-width: none !important;
}

/* La punta de la burbuja se queda blanca si solo se recolorea .gm-style-iw-c. */
.lv-distributor-map .gm-style .gm-style-iw-tc::after {
	background: var(--lv-dm-card-bg, #ffffff);
}

/* --- Responsive: sidebar arriba, mapa abajo ---
 * El punto en el que se apila es un ajuste por widget (control «Apilar
 * sidebar sobre el mapa»), así que no puede ser una media query fija de esta
 * hoja: la imprime render() en un <style> inline por instancia, igual que
 * lv-tip-box, lv-product-filter y lv-index. */