.elementor-890 .elementor-element.elementor-element-dlocse{padding:44px 18px 64px 18px;}.elementor-890 .elementor-element.elementor-element-dlocce > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-890 .elementor-element.elementor-element-dlocet{text-align:start;}.elementor-890 .elementor-element.elementor-element-dlocet .elementor-heading-title{font-size:28px;font-weight:600;text-transform:uppercase;color:var( --e-global-color-diwanblue );}@media(max-width:767px){.elementor-890 .elementor-element.elementor-element-dlocse{padding:30px 18px 44px 18px;}}/* Start custom CSS *//* ==================== Diwan Core · locations.css ==================== */

/**
 * The branch finder.
 *
 * Two columns on a desktop: the branches on the near side, the map beside them.
 * The list is what the page is for — a reader who wants a telephone number
 * should not have to touch the map to get one — so the list keeps the better
 * half of the room at the sizes where both fit, and the map is the part that
 * goes when there is not enough.
 */

.diwan-locations {
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius, 8px);
	overflow: hidden;
}

/* ----------------------------------------------------------------- the row */

.diwan-locations__bar {
	align-items: center;
	background: var(--diwan-surface-alt, #fafaf8);
	border-block-end: 1px solid var(--diwan-border, #e6e6e6);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px;
}

.diwan-locations__search {
	align-items: center;
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	display: flex;
	flex: 1 1 260px;
	gap: 8px;
	min-inline-size: 200px;
	padding-inline: 12px;
}

.diwan-locations__search .diwan-icon {
	color: var(--diwan-text-muted, #6e6e6e);
	flex: none;
}

/* One step deeper than the theme's own input rule: the box around it is the
   border, so the field inside has none of its own. */
.diwan-locations .diwan-locations__search input[type="search"] {
	background: transparent;
	border: 0;
	color: var(--diwan-text, #000);
	font-size: 14px;
	inline-size: 100%;
	min-inline-size: 0;
	outline: 0;
	padding-block: 11px;
}

.diwan-locations .diwan-locations__near {
	align-items: center;
	background: var(--diwan-btn-bg, #000);
	border: 1px solid var(--diwan-btn-border, #000);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-btn-text, #fff);
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.04em;
	padding: 12px 18px;
	text-transform: uppercase;
	white-space: nowrap;
}

.diwan-locations .diwan-locations__near:hover {
	background: var(--diwan-blue, #246b8f);
	border-color: var(--diwan-blue, #246b8f);
	color: var(--diwan-white, #fff);
}

/* While the browser is asking the reader where they are. */
.diwan-locations .diwan-locations__near.is-asking {
	cursor: progress;
	opacity: 0.6;
}

.diwan-locations .diwan-locations__near.is-done {
	background: var(--diwan-blue, #246b8f);
	border-color: var(--diwan-blue, #246b8f);
}

/* ---------------------------------------------------------- the two columns */

.diwan-locations__body {
	display: flex;
	max-block-size: 620px;
}

.diwan-locations__list {
	display: flex;
	flex: 0 0 42%;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
	padding: 14px;
}

/* With no script there is no map, so the list has the page to itself rather
   than sitting in half of it beside a grey rectangle. */
.diwan-locations__map {
	background: var(--diwan-surface-sunken, #f4f3f1);
	display: none;
	flex: 1 1 auto;
	/* Leaflet stacks its tiles and controls from 400 to 1000, which put the
	   map over the stuck header as the page scrolled. A layer of its own keeps
	   all of that inside the map. */
	isolation: isolate;
	min-block-size: 420px;
	position: relative;
	z-index: 0;
}

.diwan-locations__map.is-ready {
	display: block;
}

.diwan-locations.is-listonly .diwan-locations__list,
.diwan-locations__body:not(:has(.is-ready)) .diwan-locations__list {
	flex-basis: 100%;
}

/* --------------------------------------------------------------- one branch */

.diwan-locations__card {
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius, 8px);
	cursor: pointer;
	padding: 16px 18px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.diwan-locations__card:hover {
	border-color: var(--diwan-black, #000);
	box-shadow: var(--diwan-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06));
}

/* The one being looked at on the map. */
.diwan-locations__card.is-open {
	border-color: var(--diwan-blue, #246b8f);
	box-shadow: inset 3px 0 0 var(--diwan-blue, #246b8f);
}

[dir="rtl"] .diwan-locations__card.is-open {
	box-shadow: inset -3px 0 0 var(--diwan-blue, #246b8f);
}

.diwan-locations__name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.diwan-locations__address,
.diwan-locations__phone,
.diwan-locations__hours {
	align-items: flex-start;
	color: var(--diwan-text-soft, #444);
	display: flex;
	font-size: 14px;
	gap: 8px;
	line-height: 1.5;
	margin: 0 0 6px;
}

.diwan-locations__address .diwan-icon,
.diwan-locations__phone .diwan-icon,
.diwan-locations__hours .diwan-icon {
	color: var(--diwan-blue, #246b8f);
	flex: none;
	margin-block-start: 2px;
}

.diwan-locations__phone a {
	color: var(--diwan-link, #000);
	text-decoration: none;
}

.diwan-locations__phone a:hover {
	color: var(--diwan-link-hover, #246b8f);
	text-decoration: underline;
}

.diwan-locations__foot {
	align-items: center;
	border-block-start: 1px dashed var(--diwan-border, #e6e6e6);
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-block-start: 12px;
	padding-block-start: 12px;
}

/* How far away, once the reader has said where they are. */
.diwan-locations__away {
	background: var(--diwan-surface-sunken, #f4f3f1);
	border-radius: 999px;
	color: var(--diwan-text-soft, #444);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px;
}

.diwan-locations__directions {
	color: var(--diwan-blue, #246b8f);
	font-size: 13px;
	font-weight: 600;
	margin-inline-start: auto;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.diwan-locations__directions:hover {
	color: var(--diwan-black, #000);
}

.diwan-locations__empty {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 14px;
	margin: 0;
	padding: 24px;
	text-align: center;
}

/* ----------------------------------------------------------------- the map */

/* The brand's pin: a black drop with a hole in it, which is the same shape the
   icon set draws and the same colour everything else on this page is. */
.diwan-locations__pin span {
	background: var(--diwan-black, #000);
	block-size: 22px;
	border: 2px solid var(--diwan-white, #fff);
	border-radius: 50% 50% 50% 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	display: block;
	inline-size: 22px;
	transform: rotate(-45deg);
}

.diwan-locations__pin span::after {
	background: var(--diwan-white, #fff);
	block-size: 7px;
	border-radius: 50%;
	content: "";
	display: block;
	inline-size: 7px;
	margin: 6px auto 0;
}

.diwan-locations__popup {
	display: grid;
	gap: 4px;
	font-size: 13px;
	min-inline-size: 170px;
}

.diwan-locations__popup strong {
	font-size: 14px;
	text-transform: uppercase;
}

.diwan-locations__popup a {
	color: var(--diwan-blue, #246b8f);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Leaflet paints its own controls; these two are the only ones the page shows
   and they should look like the site's buttons, not like a demo. */
.diwan-locations .leaflet-bar a {
	color: var(--diwan-black, #000);
}

.diwan-locations .leaflet-bar a:hover {
	color: var(--diwan-blue, #246b8f);
}

.diwan-locations .leaflet-container {
	font: inherit;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 900px) {
	/* The map goes under the list rather than beside it, and both get a height
	   of their own: two scrolling columns on a phone is a page nobody can use. */
	.diwan-locations__body {
		display: block;
		max-block-size: none;
	}

	.diwan-locations__list {
		max-block-size: none;
		overflow: visible;
	}

	.diwan-locations__map {
		block-size: 320px;
		min-block-size: 0;
	}

	/* With the script running, one branch at a time: chosen from the list
	   above, its card under the map, the map on screen with its pin. */
	.diwan-locations.has-picker .diwan-locations__body {
		display: flex;
		flex-direction: column;
	}

	.diwan-locations.has-picker .diwan-locations__map {
		order: -1;
	}

	.diwan-locations.has-picker .diwan-locations__card:not(.is-picked) {
		display: none;
	}

	.diwan-locations.has-picker .diwan-locations__search,
	.diwan-locations.has-picker .diwan-locations__near {
		display: none;
	}

	.diwan-locations.has-picker .diwan-locations__bar {
		display: none;
	}
}

/* The list to choose from: only on the small screens, and only once the
   script is there to act on the choice. */
.diwan-locations__picker {
	display: none;
}

@media (max-width: 900px) {
	.diwan-locations.has-picker .diwan-locations__picker {
		align-items: stretch;
		background: var(--diwan-surface-alt, #fafaf8);
		border-block-end: 1px solid var(--diwan-border, #e6e6e6);
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 12px 14px;
	}

	.diwan-locations__picker label {
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.diwan-locations .diwan-locations__picker select {
		background: var(--diwan-surface, #fff);
		border: 1px solid var(--diwan-black, #000);
		border-radius: var(--diwan-radius-sm, 4px);
		color: var(--diwan-text, #000);
		font: inherit;
		font-size: 15px;
		min-block-size: 44px;
		padding: 8px 12px;
	}
}/* End custom CSS */