/* Osool Map widget ----------------------------------------------------------
 * Desktop matches the 1440px design: map stage 1061 × 714, card 320 × 384.
 * The stage scales with the page; pins and city names scale with the stage
 * (container query units), the card keeps its size.
 */
.omap {
	--omap-bg: #f7f7f7;
	--omap-grid: rgba(100, 100, 100, 0.1);
	--omap-ink: #1c1c1c;
	--omap-muted: #646464;
	--omap-navy: #1b1d38;
	--omap-blue: #0088d3;
	--omap-line: #cdcdcd;
	--omap-chip: #ede9e9;
	--omap-cell: 62.9px;
	position: relative;
	isolation: isolate;
	padding: 80px 24px;
	background-color: var(--omap-bg);
	background-image:
		linear-gradient(to right, var(--omap-grid) 2px, transparent 2px),
		linear-gradient(to bottom, var(--omap-grid) 2px, transparent 2px);
	background-size: var(--omap-cell) var(--omap-cell);
	background-position: calc(50% - 1px) 0;
	color: var(--omap-ink);
	font-family: inherit;
}

/* Background (with its grid) running to the screen edges. */
.omap--bleed {
	background: none;
}

.omap--bleed::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc(50% - 50vw);
	background-color: var(--omap-bg);
	background-image:
		linear-gradient(to right, var(--omap-grid) 2px, transparent 2px),
		linear-gradient(to bottom, var(--omap-grid) 2px, transparent 2px);
	background-size: var(--omap-cell) var(--omap-cell);
	background-position: calc(50% - 1px) 0;
}

.omap-hide-grid-yes .omap,
.omap-hide-grid-yes .omap--bleed::before {
	background-image: none;
}

.omap *,
.omap *::before,
.omap *::after {
	box-sizing: border-box;
}

.omap [hidden] {
	display: none !important;
}

.omap button {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Title ------------------------------------------------------------------- */
.omap__head {
	max-width: 1100px;
	margin: 0 auto 48px;
	text-align: center;
}

.omap .omap__title {
	margin: 0;
	color: var(--omap-ink);
	font-family: inherit;
	font-size: 48px;
	font-weight: 500;
	line-height: 1.2;
}

.omap .omap__sub {
	max-width: 900px;
	margin: 20px auto 0;
	color: var(--omap-ink);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
}

/* Map stage --------------------------------------------------------------- */
.omap__stage {
	position: relative;
	direction: ltr; /* the map isn't mirrored in Arabic (the card sets its own direction) */
	max-width: 1061px;
	margin: 0 auto;
}

.omap__canvas {
	position: relative;
	aspect-ratio: 1061 / 714;
	container-type: inline-size;
}

.omap .omap__map {
	position: absolute;
	top: 0;
	left: 5.16%;
	width: 79.08%;
	max-width: none;
	height: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	pointer-events: none;
	user-select: none;
}

/* City: the name sits at (--x, --y); the small dot to its left, the large
   marker above it when selected. */
.omap .omap__city {
	position: absolute;
	top: var(--y);
	left: var(--x);
	display: flex;
	align-items: center;
	padding: 4px 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #fff;
	transform: translateY(-50%);
}

.omap .omap__city:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.omap .omap__city-name {
	color: #fff;
	font-size: clamp(9px, 1.15cqi, 12px);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	/* Keeps names legible where they run past the map edge onto the light
	   background (e.g. Ad Dammam); invisible over the dark blue map. */
	text-shadow: 0 0 1px #00507f, 0 0 2px #00507f, 0 0 3px #00507f, 0 0 5px rgba(0, 80, 127, 0.8);
}

.omap .omap__city.is-active .omap__city-name {
	font-size: clamp(10px, 1.3cqi, 14px);
}

/* The capital is written in capitals, like on the map artwork. */
.omap .omap__city--capital .omap__city-name {
	text-transform: uppercase;
}

.omap__pin {
	position: absolute;
	display: block;
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.omap__pin--dot {
	right: calc(100% + clamp(3px, 0.45cqi, 5px));
	top: 50%;
	width: clamp(5px, 0.75cqi, 8px);
	height: clamp(5px, 0.75cqi, 8px);
	color: #9ac7e5;
	transform: translateY(-50%);
}

.omap__pin--active {
	bottom: calc(100% - 3px);
	left: 50%;
	width: clamp(18px, 3.2cqi, 34px);
	height: clamp(18px, 3.2cqi, 34px);
	opacity: 0;
	transform: translate(-50%, 6px) scale(0.6);
	transform-origin: 50% 100%;
}

.omap__city:hover .omap__pin--dot {
	color: #fff;
}

.omap__city.is-active .omap__pin--dot {
	opacity: 0;
}

.omap__city.is-active .omap__pin--active {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

/* Card -------------------------------------------------------------------- */
.omap .omap__card {
	position: absolute;
	z-index: 2;
	top: var(--card-y, 0);
	left: var(--card-x, 0);
	width: 320px;
	padding: 60px 19px 19px;
	border: 1px solid var(--omap-line);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	color: var(--omap-ink);
	text-align: start;
	transform-origin: var(--card-origin, 0 60%);
	animation: omap-card-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes omap-card-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
}

.omap .omap__close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--omap-ink);
	transition: background-color 0.15s ease;
}

.omap__card[dir="rtl"] .omap__close {
	right: auto;
	left: 20px;
}

.omap .omap__close:hover {
	background: #f2f2f2;
}

.omap .omap__card-img {
	display: block;
	width: 100%;
	height: 160px;
	max-width: none;
	margin: 0;
	border-radius: 24px;
	object-fit: cover;
	background: #eef1f4;
}

.omap .omap__card-cat {
	margin: 15px 0 0;
	color: var(--omap-ink);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
}

.omap .omap__card-title {
	margin: 4px 0 0;
	color: var(--omap-ink);
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.omap .omap__card-loc {
	margin: 2px 0 0;
	color: var(--omap-muted);
	font-size: 14px;
	line-height: 1.4;
}

.omap .omap__card-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 48px;
	margin-top: 16px;
	padding: 0 16px;
	border-radius: 24px;
	background: var(--omap-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.omap .omap__card-btn:hover,
.omap .omap__card-btn:focus-visible {
	background: #0074b4;
	color: #fff;
}

.omap__card-btn svg {
	flex: none;
}

.omap__card[dir="rtl"] .omap__card-btn svg {
	transform: scaleX(-1);
}

/* Chips ------------------------------------------------------------------- */
.omap__chips {
	max-width: 1240px;
	margin: 48px auto 0;
}

.omap__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

.omap__row + .omap__row {
	margin-top: 18px;
}

.omap .omap__cat,
.omap .omap__asset {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 16px;
	border: 1px solid var(--omap-line);
	color: var(--omap-ink);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.omap .omap__cat {
	height: 56px;
	padding: 0 22px;
	border-radius: 28px;
	background: var(--omap-chip);
}

.omap .omap__cat:hover {
	border-color: var(--omap-navy);
}

.omap .omap__cat[aria-pressed="true"] {
	border-color: var(--omap-navy);
	background: var(--omap-navy);
	color: #fff;
}

.omap .omap__asset {
	height: 42px;
	padding: 0 24px;
	border-radius: 21px;
	background: #fff;
}

.omap .omap__asset:hover {
	border-color: var(--omap-navy);
}

.omap .omap__asset[aria-pressed="true"] {
	padding-inline-start: 28px;
	border-color: var(--omap-navy);
	background: transparent;
}

.omap__check {
	display: none;
	flex: none;
	margin-inline-start: -4px;
}

.omap__asset[aria-pressed="true"] .omap__check {
	display: block;
}

.omap .omap__cat:focus-visible,
.omap .omap__asset:focus-visible,
.omap .omap__close:focus-visible,
.omap .omap__card-btn:focus-visible {
	outline: 2px solid var(--omap-blue);
	outline-offset: 2px;
}

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.omap .omap__title {
		font-size: 36px;
	}

	.omap .omap__sub {
		font-size: 16px;
	}
}

/* Phones (393px design): title aligned to the start, the map runs edge to edge
   and is zoomed in on the western coast → Riyadh → Dammam band, the card opens
   over the map, and the chips wrap onto several lines. ---------------------- */
@media (max-width: 767px) {
	.omap {
		padding: 56px 16px;
		--omap-cell: 40px;
	}

	.omap__head {
		margin-bottom: 32px;
		text-align: start;
	}

	.omap .omap__title {
		font-size: 28px;
		line-height: 1.3;
	}

	.omap .omap__sub {
		margin: 16px 0 0;
		font-size: 16px;
		line-height: 1.45;
	}

	/* Unselected cities: the small marker sits above the name, centred, like
	   the selected marker does. */
	.omap__pin--dot {
		top: auto;
		right: auto;
		bottom: calc(100% - 1px);
		left: 50%;
		width: 8px;
		height: 8px;
		transform: translateX(-50%);
	}

	/* The map is the same as on desktop, scaled to the width of its container
	   (pins and names scale with it). The card is too big to sit on the small
	   map, so it opens right below it, inside the stage. */
	.omap .omap__card {
		position: relative;
		top: auto;
		left: auto;
		width: min(320px, 100%);
		margin: 24px auto 0;
		padding-top: 56px;
	}

	.omap .omap__card-img {
		height: auto;
		aspect-ratio: 280 / 160;
	}

	.omap__chips {
		margin-top: 40px;
	}

	.omap__row {
		justify-content: flex-start;
		gap: 12px;
	}

	.omap__row + .omap__row {
		margin-top: 24px;
	}

	.omap .omap__cat {
		height: auto;
		min-height: 52px;
		padding: 8px 22px;
		border-radius: 26px;
		font-size: 16px;
		font-weight: 500;
	}

	.omap .omap__asset,
	.omap .omap__cat {
		max-width: 100%;
		white-space: normal; /* very long names wrap inside the chip */
		text-align: start;
	}

	.omap .omap__asset {
		height: auto;
		min-height: 42px;
		padding: 8px 18px;
		font-size: 16px;
		font-weight: 500;
		gap: 10px;
	}

	.omap .omap__asset[aria-pressed="true"] {
		padding-inline-start: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.omap .omap__card {
		animation: none;
	}

	.omap__pin {
		transition: none;
	}
}

.omap .omap__city:disabled {
	cursor: default;
}