/* ── Dealer Map ── */
.dm-wrapper {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	color: #333;
	border: 1px solid #e2e2e4;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

/* ── Controls bar ── */
.dm-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 14px 18px;
	background: #fff;
	border-bottom: 1px solid #ececec;
}
.dm-controls input[type="text"],
.dm-controls select {
	padding: 9px 16px;
	border: 1px solid #e2e2e4;
	border-radius: 20px;
	font-size: 13px;
	background: #fff;
	outline: none;
	color: #333;
}
.dm-controls input[type="text"] { flex: 0 1 300px; min-width: 200px; }
.dm-controls input[type="text"]::placeholder { color: #9a9a9a; }
.dm-controls input[type="text"]:focus,
.dm-controls select:focus { border-color: #bbb; }
.dm-controls select { min-width: 140px; border-radius: 6px; }
.dm-check-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	color: #555;
}
.dm-reset {
	padding: 8px 14px;
	background: #fff;
	border: 1px solid #e2e2e4;
	border-radius: 20px;
	cursor: pointer;
	font-size: 12px;
	color: #777;
	white-space: nowrap;
}
.dm-reset:hover { background: #f5f5f5; color: #333; }
/* Tras el clic el botón se queda con foco y el tema pinta ahí su color de
   :focus por defecto (rosa/morado, ajeno al diseño del mapa). Lo devolvemos
   a su aspecto normal. */
.dm-wrapper .dm-reset:focus,
.dm-wrapper .dm-reset:focus-visible,
.dm-wrapper .dm-reset:active {
	background: #fff !important;
	color: #777 !important;
	border-color: #e2e2e4 !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ── Country pill filter ── */
.dm-country-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.dm-country-pill {
	padding: 9px 18px;
	border: 1px solid #e2e2e4;
	border-radius: 20px;
	background: #fff;
	color: #333;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* !important porque el tema pinta sus propios estilos de :hover en botones
   (se veía un rosa/morado ajeno al diseño del mapa, no venía de aquí). */
.dm-wrapper .dm-country-pill:hover {
	background: #d4eded !important;
	border-color: #d4eded !important;
	color: #0a3c3c !important;
}
.dm-country-pill.dm-active {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}
.dm-wrapper .dm-country-pill.dm-active:hover {
	background: #1a1a1a !important;
	border-color: #1a1a1a !important;
	color: #fff !important;
}

/* ── Body (sidebar + map) ── */
.dm-body {
	display: flex;
	height: 540px;
}

/* ── Sidebar ── */
.dm-sidebar {
	width: 320px;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #ececec;
	background: #fff;
}
.dm-count {
	padding: 14px 18px 8px;
	font-size: 12px;
	color: #9a9a9a;
}
.dm-list {
	flex: 1;
	overflow-y: auto;
}
.dm-list-item {
	padding: 14px 18px;
	border-bottom: 1px solid #f1f1f1;
	cursor: pointer;
	transition: background 0.15s;
}
.dm-list-item:hover { background: #fafafa; }
.dm-list-item.dm-active {
	background: #eaf5f2;
	border: 1px solid #cfe6df;
	border-radius: 12px;
	box-shadow: none;
	margin: 6px 10px;
}
.dm-list-item.dm-active:hover { background: #eaf5f2; }
.dm-list-item .dm-item-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.dm-list-item .dm-item-name {
	font-weight: 600;
	font-size: 14px;
	color: #1a1a1a;
	line-height: 1.35;
}
.dm-badge {
	flex: none;
	background: #d4eded;
	color: #0a3c3c;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 10px;
	white-space: nowrap;
}
.dm-list-item .dm-item-street {
	font-size: 12px;
	color: #777;
	margin-top: 3px;
}
.dm-list-item .dm-item-meta {
	font-size: 12.5px;
	color: #888;
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.dm-list-item .dm-item-meta .dm-pin {
	flex: none;
	width: 12px;
	height: 12px;
	opacity: 0.6;
}
.dm-no-results {
	padding: 24px 18px;
	color: #999;
	font-size: 13px;
	text-align: center;
}

/* ── Tarjeta expandida (dentro del elemento activo de la lista) ── */
.dm-item-details {
	margin-top: 10px;
}
.dm-card-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #444;
	margin-bottom: 7px;
}
.dm-card-row:last-of-type { margin-bottom: 0; }
.dm-card-row.dm-card-row-plain { color: #333; }
.dm-card-icon {
	flex: none;
	width: 15px;
	height: 15px;
	min-width: 15px;
	opacity: 0.65;
}
.dm-card-cta-wrap { margin-top: 12px; }
/* Especificidad extra (.dm-wrapper …) y !important en color/decoración para
   que el tema de WordPress no pinte el enlace con su color de link por
   defecto (se vio pasar a azul/morado en producción). */
.dm-wrapper a.dm-card-cta,
.dm-wrapper button.dm-card-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 16px;
	background: #142e29;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: 999px;
	text-decoration: none !important;
	box-sizing: border-box;
	cursor: pointer;
	transition: background 0.15s;
}
.dm-wrapper a.dm-card-cta:hover,
.dm-wrapper a.dm-card-cta:visited,
.dm-wrapper a.dm-card-cta:active,
.dm-wrapper button.dm-card-cta:hover {
	color: #fff !important;
	text-decoration: none !important;
}
.dm-wrapper a.dm-card-cta:hover,
.dm-wrapper button.dm-card-cta:hover { background: #0a1d19; }
.dm-wrapper button.dm-card-cta:disabled { opacity: 0.65; cursor: default; }

/* ── Formulario "Pedir cita" (Gravity Forms, insertado por AJAX) ── */
.dm-card-form-slot { margin-top: 10px; }
.dm-card-form-error {
	font-size: 12.5px;
	color: #b42318;
	background: #fef3f2;
	border: 1px solid #fda29b;
	border-radius: 6px;
	padding: 8px 10px;
}

/* Botón "Enviar" de Gravity Forms: el tema del propio formulario (Orbital)
   fija su color mediante variables CSS con bastante prioridad, así que
   forzamos el nuestro con !important. Se apunta tanto al ID del formulario
   configurado ahora (10) como a la clase genérica, para que siga
   funcionando si el ID cambia más adelante. */
.dm-card-form-slot .gform_button,
.dm-card-popup .gform_button,
#gform_submit_button_10 {
	background: #132e29 !important;
	border-color: #132e29 !important;
	color: #fff !important;
}
.dm-card-form-slot .gform_button:hover,
.dm-card-popup .gform_button:hover,
#gform_submit_button_10:hover {
	background: #0a1d19 !important;
	border-color: #0a1d19 !important;
}

/* ── Tarjeta flotante sobre el mapa (layout "Solo mapa") ── */
.dm-card-popup {
	position: absolute;
	transform: translate(-50%, calc(-100% - 18px));
	width: 260px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	padding: 16px 18px;
	z-index: 20;
}
.dm-card-popup::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: translateX(-50%) rotate(45deg);
}
.dm-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.dm-card-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	font-weight: 600;
	font-size: 14px;
	color: #1a1a1a;
	line-height: 1.35;
}
.dm-card-close {
	flex: none;
	border: none;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: #aaa;
	cursor: pointer;
	padding: 0;
}
.dm-card-close:hover { color: #1a1a1a; }

/* ── Map ── */
.dm-map-wrap {
	position: relative;
	flex: 1;
	overflow: hidden;
}
.dm-map {
	width: 100%;
	height: 100%;
}
.dm-map-disclaimer {
	position: absolute;
	right: 12px;
	bottom: 10px;
	z-index: 5;
	background: rgba(255, 255, 255, 0.82);
	color: #8b8b8b;
	font-size: 11px;
	padding: 4px 9px;
	border-radius: 4px;
	pointer-events: none;
	white-space: nowrap;
}

/* ── Custom marker (label + dot) ── */
.dm-marker-pin {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translate(-50%, -100%);
	cursor: pointer;
	pointer-events: auto;
	user-select: none;
}
.dm-marker-label {
	background: #1c1c1e;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 11px;
	border-radius: 7px;
	white-space: nowrap;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	transition: background 0.15s;
}
.dm-marker-dot {
	width: 6px;
	height: 6px;
	margin-top: 4px;
	border-radius: 50%;
	background: #1c1c1e;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.dm-marker-pin:hover .dm-marker-label,
.dm-marker-pin.dm-marker-active .dm-marker-label {
	background: #000;
}

/* ── Layout: map-top ── */
.dm-wrapper.dm-layout-map-top .dm-body {
	flex-direction: column;
	height: auto;
}
.dm-wrapper.dm-layout-map-top .dm-sidebar {
	width: 100%;
	border-right: none;
	border-top: 1px solid #ececec;
	height: 280px;
}
.dm-wrapper.dm-layout-map-top .dm-map-wrap {
	height: 400px;
	flex: none;
}

/* ── Layout: overlay ── */
.dm-wrapper.dm-layout-overlay .dm-body { position: relative; }
.dm-wrapper.dm-layout-overlay .dm-map-wrap { width: 100%; }
.dm-wrapper.dm-layout-overlay .dm-sidebar {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	z-index: 10;
	box-shadow: 2px 0 8px rgba(0,0,0,0.15);
	transform: translateX(0);
	transition: transform 0.25s ease;
}
.dm-wrapper.dm-layout-overlay .dm-sidebar.dm-collapsed {
	transform: translateX(-100%);
}
.dm-toggle-btn {
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 11;
	padding: 7px 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	font-size: 13px;
}
.dm-wrapper.dm-layout-overlay .dm-toggle-btn { display: block; }

/* ── Responsive ── */
@media (max-width: 640px) {
	.dm-body { flex-direction: column; height: auto; }
	.dm-sidebar { width: 100%; border-right: none; border-top: 1px solid #ececec; height: 260px; }
	.dm-map-wrap { height: 320px; }
	.dm-country-pills {
		margin-left: 0;
		width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.dm-country-pills::-webkit-scrollbar { display: none; }
	.dm-country-pill { flex: none; }
	.dm-wrapper.dm-layout-overlay .dm-sidebar {
		position: static;
		transform: none;
		box-shadow: none;
	}
	.dm-wrapper.dm-layout-overlay .dm-toggle-btn { display: none; }
}