/**
 * Branches Map widget — layout and structure only.
 *
 * Branch name tabs on one side; the map with the selected branch's details
 * below it on the other. Colors and typography come from the widget's Style
 * controls (Elementor Global Colors / Fonts by default). The controls set the
 * custom properties below; the defaults here are neutral (white surfaces,
 * translucent black hairlines and shadows). Logical properties keep RTL working.
 */

.dns-branches {
	--dns-branches-gap: 24px;
	--dns-branches-tabs-width: 32%;
	--dns-branches-card-gap: 12px;
	--dns-branches-content-gap: 24px;
	/* Elementor's Accent control sets this; the fallback is a system color
	 * (not `currentColor`, which would resolve to the button's own text color). */
	--dns-branches-indicator: var(--e-global-color-primary, CanvasText);
	--dns-branches-divider: rgba(0, 0, 0, 0.08);
	--dns-branches-details-spacing: 18px;
	--dns-branches-map-height: 480px;
	--dns-branches-logo-offset: 16px;
	--dns-branches-shadow-map: 0 14px 36px rgba(0, 0, 0, 0.08);
	--dns-branches-button-bg: var(--dns-branches-indicator);
	--dns-branches-button-color: #fff;
	--dns-branches-directions-size: 48px;
	--dns-branches-directions-icon-size: 24px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--dns-branches-gap);
	align-items: start;
}

@media (min-width: 768px) {
	.dns-branches {
		grid-template-columns: minmax(0, var(--dns-branches-tabs-width)) minmax(0, 1fr);
	}
}

/* Tabs ------------------------------------------------------------------- */

.dns-branches__list {
	display: flex;
	flex-direction: column;
	gap: var(--dns-branches-card-gap);
	min-width: 0;
}

/* Pin colors per state. Kept at low specificity so the Style controls,
 * which set the same properties on the tab, always win. */
.dns-branches__tab {
	--dns-branches-marker-color: var(--dns-branches-indicator);
	--dns-branches-marker-bg: color-mix(in srgb, var(--dns-branches-indicator) 12%, transparent);
}

.dns-branches__tab[aria-selected="true"] {
	--dns-branches-marker-color: var(--dns-branches-tab-bg, #fff);
	--dns-branches-marker-bg: var(--dns-branches-indicator);
}

/* The tab is a `div[role=tab]`, not a `<button>`, so theme / kit / snippet
 * button rules never reach it. Plain (0,2,0) rules are enough; the widget's
 * {{WRAPPER}} controls (0,4,0) win. Colors come from custom properties the
 * Style controls set on the tab itself (Normal / Hover / Active). */
.dns-branches .dns-branches__tab {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--dns-branches-tab-border, rgba(0, 0, 0, 0.08));
	border-radius: 16px;
	background-color: var(--dns-branches-tab-bg, #fff);
	color: var(--dns-branches-tab-color, inherit);
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}

.dns-branches .dns-branches__tab:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.dns-branches .dns-branches__tab[aria-selected="true"] {
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1);
}

.dns-branches .dns-branches__tab:focus {
	outline: none;
}

.dns-branches .dns-branches__tab:focus-visible {
	outline: 2px solid var(--dns-branches-indicator);
	outline-offset: 2px;
}

.dns-branches__marker {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--dns-branches-marker-bg);
	color: var(--dns-branches-marker-color);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dns-branches__marker svg {
	display: block;
	width: 20px;
	height: 20px;
}

.dns-branches__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Map + details column ----------------------------------------------------- */

.dns-branches__content {
	display: flex;
	flex-direction: column;
	gap: var(--dns-branches-content-gap);
	min-width: 0;
}

/* Details panel (under the map) -------------------------------------------- */

.dns-branches__panel {
	display: flex;
	flex-direction: column;
	gap: var(--dns-branches-details-spacing);
	padding: 0;
}

.dns-branches__panel[hidden] {
	display: none;
}

/* Re-runs each time a panel is shown (display: none → flex). */
.dns-branches__panel:not([hidden]) {
	animation: dns-branches-fade 0.28s ease both;
}

.dns-branches__panel:focus {
	outline: none;
}

.dns-branches__panel:focus-visible {
	outline: 2px solid var(--dns-branches-indicator);
	outline-offset: 4px;
}

.dns-branches__block {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.dns-branches__block + .dns-branches__block {
	padding-block-start: var(--dns-branches-details-spacing);
	border-block-start: 1px solid var(--dns-branches-divider);
}

/* Address on the start side, directions button at the end. */
.dns-branches__block--address {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.dns-branches__block-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.dns-branches__label,
.dns-branches__address {
	margin: 0;
}

.dns-branches__label {
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dns-branches__address {
	overflow-wrap: anywhere;
}

.dns-branches__services {
	--dns-branches-check: var(--dns-branches-indicator);

	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dns-branches__services li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
}

/* Check icon: an SVG mask filled with the bullet color. */
.dns-branches__services li::before {
	content: "";
	flex: none;
	width: 1.125em;
	height: 1.125em;
	margin-block-start: 0.15em;
	background-color: var(--dns-branches-check);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.3 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.3 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Directions button (round icon) ------------------------------------------ */

/* Layout reset (0,3,1): beats theme / kit link rules, while the widget's
 * {{WRAPPER}} controls (0,4,0) still win. */
.dns-branches .dns-branches__panel a.dns-branches__directions {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--dns-branches-directions-size);
	height: var(--dns-branches-directions-size);
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0 solid transparent;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Paint for every state. The values come only from custom properties the
 * Style controls set, so `!important` never blocks a control — it only stops
 * theme or kit link rules from painting over the button. */
.dns-branches .dns-branches__panel a.dns-branches__directions,
.dns-branches .dns-branches__panel a.dns-branches__directions:hover,
.dns-branches .dns-branches__panel a.dns-branches__directions:focus,
.dns-branches .dns-branches__panel a.dns-branches__directions:active {
	background-image: none !important;
	background-color: var(--dns-branches-button-bg) !important;
	color: var(--dns-branches-button-color) !important;
	text-decoration: none !important;
}

.dns-branches .dns-branches__directions:hover {
	transform: translateY(-2px);
}

.dns-branches .dns-branches__directions:active {
	transform: translateY(0);
}

.dns-branches .dns-branches__directions:focus-visible {
	outline: 2px solid var(--dns-branches-indicator);
	outline-offset: 3px;
}

/* A map symbol, not a reading-direction arrow: not mirrored in RTL. */
.dns-branches__directions-icon {
	display: block;
	flex: none;
	width: var(--dns-branches-directions-icon-size);
	height: var(--dns-branches-directions-icon-size);
}

/* Map ------------------------------------------------------------------- */

.dns-branches__map {
	position: relative;
	height: var(--dns-branches-map-height);
	overflow: hidden;
	border-radius: 16px;
	background-color: rgba(0, 0, 0, 0.04);
	box-shadow: var(--dns-branches-shadow-map);
}

.dns-branches__map-frame {
	position: absolute;
	inset: 0;
}

.dns-branches__map-frame[hidden] {
	display: none;
}

.dns-branches__map-frame:not([hidden]) {
	animation: dns-branches-fade 0.3s ease both;
}

.dns-branches__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.dns-branches__map-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	padding: 24px;
	text-align: center;
}

.dns-branches__placeholder-title,
.dns-branches__placeholder-text {
	margin: 0;
	max-width: 36ch;
}

.dns-branches__placeholder-title {
	font-weight: 600;
}

/* Logo badge — sits above the map, never blocks map clicks. */
.dns-branches__logo {
	position: absolute;
	z-index: 1;
	inset-block-start: var(--dns-branches-logo-offset);
	inset-inline-end: var(--dns-branches-logo-offset);
	width: 96px;
	max-width: 40%;
	padding: 10px 12px;
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	pointer-events: none;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.dns-branches__logo {
		background-color: rgba(255, 255, 255, 0.78);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

.dns-branches-logo--top-start .dns-branches__logo {
	inset-inline-start: var(--dns-branches-logo-offset);
	inset-inline-end: auto;
}

.dns-branches-logo--bottom-start .dns-branches__logo {
	inset-block-start: auto;
	inset-block-end: var(--dns-branches-logo-offset);
	inset-inline-start: var(--dns-branches-logo-offset);
	inset-inline-end: auto;
}

.dns-branches-logo--bottom-end .dns-branches__logo {
	inset-block-start: auto;
	inset-block-end: var(--dns-branches-logo-offset);
}

.dns-branches__logo-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Utilities --------------------------------------------------------------- */

.dns-branches__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Editor-only empty state. */
.dns-branches-empty {
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 16px;
	text-align: center;
}

.dns-branches-empty__title,
.dns-branches-empty__text {
	margin: 0;
}

.dns-branches-empty__title {
	margin-block-end: 4px;
	font-weight: 600;
}

@keyframes dns-branches-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dns-branches__marker,
	.dns-branches .dns-branches__tab,
	.dns-branches .dns-branches__panel a.dns-branches__directions {
		transition: none;
	}

	.dns-branches__panel:not([hidden]),
	.dns-branches__map-frame:not([hidden]) {
		animation: none;
	}

	.dns-branches .dns-branches__directions:hover {
		transform: none;
	}
}