/* Reset any theme/Elementor global image rules from leaking in */
.dn-block img,
.dn-modal img {
	max-width: none;
	height: auto;
}

.dn-block {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	font-family: inherit;
	max-width: 760px;
	margin: 0 auto;
	border-radius: 4px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	/* If this card ends up nested inside an ancestor flex/grid container
	   (common with Elementor's newer flex-based sections), that ancestor
	   can force it to shrink to a specific height regardless of its own
	   content - and the overflow:hidden above (needed to clip the
	   decorative layers to the rounded corners) would then silently clip
	   whatever doesn't fit. These opt the card out of being resized by
	   an ancestor's layout: it always sizes to its own content instead. */
	height: auto;
	min-height: -webkit-min-content;
	min-height: min-content;
	flex-shrink: 0;
	align-self: flex-start;
}

/* These two layers together tile the whole card and share the exact same
   diagonal edge as the red line below, so there's no separate straight
   seam behind the diagonal stroke. Coordinates must match .dn-diagonal's
   <line> x1/x2 values (in percent of card width, top and bottom). */
.dn-bg-left,
.dn-bg-right {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dn-bg-left {
	background: #f3f3f3;
	clip-path: polygon(0 0, 43% 0, 38% 100%, 0 100%);
}

.dn-bg-right {
	background: #eaeaea;
	clip-path: polygon(43% 0, 100% 0, 100% 100%, 38% 100%);
}

.dn-left,
.dn-right {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}

.dn-left {
	flex: 0 0 38%;
	max-width: 38%;
	padding: 30px 32px 30px 28px;
}

.dn-right {
	flex: 0 0 62%;
	max-width: 62%;
	padding: 0;
	/* Trims the top-left corner so the map content itself follows the same
	   diagonal as .dn-bg-right/the red line, instead of the flat column
	   edge bleeding past the stripe near the top. (43% - 38%) / 62% column width. */
	clip-path: polygon(8.1% 0, 100% 0, 100% 100%, 0 100%);
}

/* Diagonal red divider - SVG scales correctly regardless of card size,
   unlike a skewed div, whose skew angle exaggerates at odd aspect ratios. */
.dn-diagonal {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.dn-diagonal line {
	stroke: #e2231a;
	stroke-width: 3px;
}

.dn-eyebrow {
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #888;
	font-size: 11px;
	margin: 0 0 6px;
}

.dn-country-title {
	font-size: 26px;
	line-height: 1.15;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 4px;
	letter-spacing: 0.5px;
}

.dn-country-title span {
	color: #e2231a;
}

.dn-dealer-name {
	font-size: 13px;
	font-weight: 600;
	color: #555;
	margin: 0 0 14px;
}

.dn-intro {
	font-size: 13px;
	line-height: 1.55;
	margin: 0 0 12px;
}

.dn-contact-line {
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 16px;
}

.dn-people-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 14px;
}

.dn-contact-photo {
	width: 84px !important;
	height: 100px !important;
	object-fit: cover;
	display: block;
	flex: 0 0 auto;
}

.dn-logo-and-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 130px;
}

.dn-logo {
	width: auto !important;
	max-width: 110px !important;
	max-height: 60px;
	object-fit: contain;
}

.dn-contact-btn {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e2231a;
	color: #e2231a;
	background: transparent;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}

.dn-contact-btn:hover {
	background: #e2231a;
	color: #fff;
}

.dn-map {
	width: 100%;
	/* Fills the column's full height (matching whichever side - text or
	   map - ends up taller) rather than a fixed px value, so there's
	   never a leftover blank gap below it when there's no "other
	   dealers" section to fill that space. min-height keeps it from
	   going oddly short if the text column is unusually brief. */
	height: 100%;
	min-height: 200px;
	/* Locked, static display only - this is the small per-dealer card map
	   (the explorer's own big map, .dn-explorer-map, is unaffected and
	   stays fully interactive). pointer-events blocks all interaction at
	   the browser level, regardless of what the map library itself does
	   internally, so this holds even if its JS options don't. */
	pointer-events: none;
}

.dn-map-fallback {
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 13px;
	text-align: center;
}

/* No right panel at all (no map) - let the left column fill the row. */
.dn-block--solo .dn-left {
	flex: 0 0 100%;
	max-width: 100%;
}

/* No map to overlay - "Other dealers" falls back to normal, in-flow
   stacking instead of floating (position:absolute would collapse to
   zero height here, since .dn-right would have no other in-flow
   content to size itself against). */
.dn-right--no-map {
	position: relative;
	min-height: 1px;
}

.dn-right--no-map .dn-others {
	position: static;
	margin: 20px 0 0;
}

.dn-others {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 16px 14px;
	background: #fff;
	padding: 10px 14px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	border-radius: 3px;
	z-index: 2;
}

.dn-others-header {
	color: #e2231a;
	font-weight: 700;
	font-size: 12px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.dn-others-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dn-others-track {
	display: flex;
	gap: 16px;
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

.dn-other-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	line-height: 1.3;
	min-width: 120px;
}

.dn-other-card strong {
	font-size: 12px;
}

.dn-other-card--clickable {
	cursor: pointer;
	padding: 6px;
	margin: -6px;
	border-radius: 4px;
	transition: background 0.15s;
}

.dn-other-card--clickable:hover {
	background: #f5f5f5;
}

.dn-other-card a {
	color: inherit;
	text-decoration: none;
}

.dn-others-prev,
.dn-others-next {
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	color: #333;
	flex: 0 0 auto;
	padding: 0 4px;
}

.dn-others-prev:disabled,
.dn-others-next:disabled {
	opacity: 0.25;
	cursor: default;
}

@media (max-width: 560px) {
	.dn-top {
		flex-wrap: wrap;
		background: #f3f3f3;
	}
	.dn-left,
	.dn-right {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.dn-diagonal,
	.dn-bg-left,
	.dn-bg-right {
		display: none;
	}
	.dn-right {
		background: #eaeaea;
		clip-path: none;
	}
}

/* ---------- Popup / modal mode ---------- */

.dn-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.dn-modal-overlay.is-open {
	display: flex;
}

.dn-modal {
	position: relative;
	max-width: 800px;
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 6px;
}

.dn-modal .dn-block {
	box-shadow: none;
	border-radius: 0;
	margin: 0;
	max-width: 100%;
}

.dn-modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 28px;
	height: 28px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	appearance: none;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #333;
	font-family: inherit;
}

/* ---------- Interactive map explorer ---------- */

.dn-explorer-map {
	width: 100%;
	height: 460px;
	background: #f7f7f7;
	border-radius: 4px;
	margin-bottom: 20px;
}

.dn-explorer-card-slot {
	max-width: 760px;
	margin: 0 auto;
}

.dn-explorer-hint,
.dn-explorer-empty {
	text-align: center;
	color: #777;
	font-size: 14px;
	padding: 30px 10px;
}

.dn-explorer-hidden {
	display: none !important;
}

/* --- Overlay mode: card floats over the map instead of sitting below it ---
   The slot (.dn-explorer-card-slot) carries the .dn-explorer--overlay and
   .dn-explorer--overlay-<position> classes directly on itself (not just
   inherited via an ancestor) because JS relocates it to be a direct child
   of <body> at runtime (see .dn-explorer-slot--portal below and
   dealer-network.js) - so these can't be ordinary descendant selectors
   scoped to the old wrapper; they have to match the slot's own classes,
   since after the move it's no longer nested inside that wrapper at all. */

.dn-explorer--overlay {
	position: relative;
}

.dn-explorer--overlay .dn-explorer-map {
	margin-bottom: 0;
}

.dn-explorer-card-slot.dn-explorer--overlay {
	/* position: fixed, not absolute - anchored to the viewport, not to the
	   map's own box. Combined with being moved to a direct child of
	   <body> in JS, this card is now completely immune to any ancestor's
	   overflow:hidden, transform, or other CSS that could otherwise clip
	   or reposition a fixed-position descendant - the same technique
	   React portals/Bootstrap modals use for exactly this reason. */
	position: fixed;
	width: 640px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
	z-index: 100000;
}

.dn-explorer-card-slot.dn-explorer--overlay-bottom-left {
	left: 16px;
	bottom: 16px;
}

.dn-explorer-card-slot.dn-explorer--overlay-bottom-right {
	right: 16px;
	bottom: 16px;
}

.dn-explorer-card-slot.dn-explorer--overlay-top-left {
	left: 16px;
	top: 16px;
}

.dn-explorer-card-slot.dn-explorer--overlay-top-right {
	right: 16px;
	top: 16px;
}

.dn-explorer-card-slot.dn-explorer--overlay-center {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.dn-explorer-card-slot.dn-explorer--overlay .dn-explorer-hint {
	padding: 20px;
	font-size: 13px;
}

.dn-explorer-card-slot.dn-explorer--overlay .dn-block {
	box-shadow: none;
}

/* Below 480px the overlay panel is narrower than the two-column layout
   can comfortably fit, so it falls back to the same stacked treatment
   used generally on small screens (see the mobile breakpoint below). */
@media (max-width: 480px) {
	.dn-explorer-card-slot.dn-explorer--overlay .dn-top {
		flex-wrap: wrap;
	}

	.dn-explorer-card-slot.dn-explorer--overlay .dn-block {
		border-radius: 6px;
	}

	.dn-explorer-card-slot.dn-explorer--overlay .dn-left,
	.dn-explorer-card-slot.dn-explorer--overlay .dn-right {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.dn-explorer-card-slot.dn-explorer--overlay .dn-diagonal,
	.dn-explorer-card-slot.dn-explorer--overlay .dn-bg-left,
	.dn-explorer-card-slot.dn-explorer--overlay .dn-bg-right {
		display: none;
	}

	.dn-explorer-card-slot.dn-explorer--overlay .dn-left {
		background: #fff;
		padding: 20px 20px 16px;
	}

	.dn-explorer-card-slot.dn-explorer--overlay .dn-right {
		background: #f0f0f0;
		clip-path: none;
	}

	.dn-explorer-card-slot.dn-explorer--overlay .dn-map {
		height: 220px;
	}
}

.dn-explorer-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 6;
	width: 28px;
	height: 28px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	appearance: none;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #333;
	font-family: inherit;
}