/*
 * Cruising Routes box on the yacht page.
 * File: rentalhive-child/assets/cruising-routes.css
 * Loaded only on yacht pages that have routes (see inc/cruising-routes.php).
 * The accordion heading reuses the site's .custom-accordion-title look.
 */

.ekmar-routes-section {
	--ekmar-r-navy: #001647;
	--ekmar-r-gold: #d1ad10;
	--ekmar-r-gold-hi: #f2d65a;
	--ekmar-r-gold-lo: #997b08;
	--ekmar-r-orange: #ff7700;
	--ekmar-r-ink: #1d1d1f;
	--ekmar-r-ink-soft: #475569;
	--ekmar-r-muted: #6e6e73;
	--ekmar-r-line: #e6e1d4;
	--ekmar-r-sea: #bfe6f6;
	--ekmar-r-sea-deep: #8fd0ec;
	--ekmar-r-land: #f3eee2;
	--ekmar-r-land-edge: #c9bb9c;
	--ekmar-r-head: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--ekmar-r-body: Inter, "Helvetica Neue", Arial, sans-serif;
	/* Same card as Pricing Notes and Important Disclaimer (.custom-charter-accordion in functions.php) */
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 12px 16px;
	background: #f8fafc;
	/* Seasonal Rates already leaves 20px below it; pull up so the gap matches the 10px between the two cards */
	margin: -10px 0 20px;
}

/* ---------- Accordion heading: compass icon, title, chevron (like the Pricing Notes summary) ---------- */
.ekmar-routes-section .ekmar-routes-section__title {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: #1e293b;
	letter-spacing: normal;
	text-transform: none;
}
.ekmar-routes-section__title::after {
	content: none;
}
.ekmar-routes-section__toggle {
	all: unset;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	cursor: pointer;
	font: inherit;
	color: inherit;
	box-sizing: border-box;
}
.ekmar-routes-section__label {
	line-height: 1.5;
}
.ekmar-routes-section__label .hp-icon {
	margin-right: 6px;
	font-size: 16px;
}
.ekmar-routes-section__chevron {
	font-size: 12px;
	color: #64748b;
	transition: transform .2s ease;
}
.ekmar-routes-section__title.is-open .ekmar-routes-section__chevron {
	transform: rotate(180deg);
}
.ekmar-routes-section__toggle:focus-visible {
	outline: 2px solid var(--ekmar-r-gold);
	outline-offset: 3px;
	border-radius: 3px;
}
.ekmar-routes-section__body.is-open {
	margin-top: 12px;
	padding-top: 0;
	padding-bottom: 4px;
}
/* With the map running, the open box fills the card edge to edge (like the Enquire Availability form),
   with one thin line under the heading instead of a second frame */
.ekmar-routes-section--js {
	overflow: hidden;
}
.ekmar-routes-section--js .ekmar-routes-section__body.is-open {
	margin: 12px -16px -12px;
	padding: 0;
}
.ekmar-routes-section--js .ekmar-routes__app {
	margin-bottom: 0;
}
.ekmar-routes-section--js .ekmar-routes {
	border: 0;
	border-top: 1px solid #e2e8f0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- Plain itinerary (no JavaScript, or the map could not load) ---------- */
.ekmar-routes-section--js .ekmar-routes__fallback {
	display: none;
}
.ekmar-routes__fallback-route + .ekmar-routes__fallback-route {
	margin-top: 18px;
}
.ekmar-routes__fallback h4 {
	margin: 0 0 2px;
	font-size: 17px;
	color: var(--ekmar-r-navy);
}
.ekmar-routes__fallback-meta {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--ekmar-r-muted);
}
.ekmar-routes__fallback-days {
	margin: 0;
	padding-left: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
}
.ekmar-routes__fallback-days li {
	padding: 3px 0;
}
.ekmar-routes__fallback-extra,
.ekmar-routes__fallback-note {
	display: block;
	font-size: 13px;
	color: var(--ekmar-r-muted);
}
.ekmar-routes__sample-note {
	margin: 12px 0 0;
	font-size: 12px;
	font-style: italic;
	color: var(--ekmar-r-muted);
}

/* ---------- The interactive box ---------- */
.ekmar-routes__app {
	container-type: inline-size;
	margin-bottom: 10px;
}
.ekmar-routes__app[hidden] {
	display: none !important;
}
.ekmar-routes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: #fff;
	border: 1px solid var(--ekmar-r-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(0, 22, 71, .07);
	font-family: var(--ekmar-r-body);
	color: var(--ekmar-r-ink);
	line-height: 1.45;
	text-align: left;
}
.ekmar-routes *,
.ekmar-routes *::before,
.ekmar-routes *::after {
	box-sizing: border-box;
}
.ekmar-routes button {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
	line-height: 1.25;
}

/* Tabs above the map: sea areas (only with routes in more than one) and routes */
.ekmar-routes__head {
	background: #fcfbf8;
	border-bottom: 1px solid #ece7da;
	padding: 12px 14px 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}
.ekmar-routes__head[hidden] {
	display: none;
}
.ekmar-routes__areas {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 3px;
	background: #f1eee5;
	border-radius: 999px;
	justify-self: start;
}
.ekmar-routes .ekmar-routes__area-tab {
	font: 600 11px var(--ekmar-r-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ekmar-r-ink-soft);
	border: 0;
	background: transparent;
	padding: 6px 12px;
	margin: 0;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ekmar-routes__area-tab span {
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ekmar-r-muted);
}
.ekmar-routes .ekmar-routes__area-tab[aria-selected="true"] {
	background: var(--ekmar-r-navy);
	color: #fff;
	box-shadow: 0 0 0 1px var(--ekmar-r-gold) inset;
}
.ekmar-routes__area-tab[aria-selected="true"] span {
	color: rgba(255, 255, 255, .7);
}
.ekmar-routes__area-tab:focus-visible,
.ekmar-routes__tab:focus-visible {
	outline: 2px solid var(--ekmar-r-gold);
	outline-offset: 2px;
}
.ekmar-routes__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 22px;
}
.ekmar-routes .ekmar-routes__tab {
	font: 500 14px var(--ekmar-r-body);
	color: var(--ekmar-r-ink-soft);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: 6px 0 11px;
	margin: 0;
	position: relative;
	text-align: left;
	line-height: 1.25;
}
.ekmar-routes__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: transparent;
	transition: background .2s;
}
.ekmar-routes .ekmar-routes__tab:hover {
	color: var(--ekmar-r-navy);
	background: transparent;
}
.ekmar-routes .ekmar-routes__tab[aria-selected="true"] {
	color: var(--ekmar-r-navy);
	font-weight: 600;
}
.ekmar-routes__tab[aria-selected="true"]::after {
	background: linear-gradient(90deg, var(--ekmar-r-gold-lo), var(--ekmar-r-gold) 30%, var(--ekmar-r-gold-hi) 55%, var(--ekmar-r-gold) 80%, var(--ekmar-r-gold-lo));
}

/* Map */
.ekmar-routes__map {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: radial-gradient(120% 90% at 30% 20%, var(--ekmar-r-sea), var(--ekmar-r-sea-deep));
}
.ekmar-routes__loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 13px;
	color: rgba(0, 22, 71, .6);
}
.ekmar-routes__fade {
	position: absolute;
	inset: 0;
	transition: opacity .22s ease;
}
.ekmar-routes__fade.is-fading {
	opacity: 0;
}
.ekmar-routes__world {
	position: absolute;
	inset: 0;
	transition: transform .75s cubic-bezier(.45, 0, .2, 1);
	will-change: transform;
}
.ekmar-routes__world > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}
.ekmar-routes__land {
	fill: var(--ekmar-r-land);
	stroke: var(--ekmar-r-land-edge);
	stroke-width: 1;
	stroke-linejoin: round;
}
.ekmar-routes__grat {
	stroke: rgba(255, 255, 255, .35);
	stroke-width: 1;
	fill: none;
}
.ekmar-routes__line {
	fill: none;
	stroke: var(--ekmar-r-navy);
	stroke-opacity: .5;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: .1 7;
}
.ekmar-routes__area-name {
	position: absolute;
	left: 10px;
	bottom: 7px;
	font: 600 10.5px var(--ekmar-r-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(0, 22, 71, .55);
	pointer-events: none;
	z-index: 3;
}
.ekmar-routes__connector {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
	overflow: visible;
}
.ekmar-routes__connector path {
	fill: none;
	stroke: var(--ekmar-r-navy);
	stroke-opacity: .55;
	stroke-width: 1.3;
}
.ekmar-routes__connector circle {
	fill: var(--ekmar-r-navy);
	fill-opacity: .7;
}
.ekmar-routes__connector g {
	transition: opacity .3s ease .55s;
}


/* Place names beside single day stops (right, left or below, wherever there is room) */
.ekmar-routes__lbl {
	position: absolute;
	white-space: nowrap;
	font: 600 11px/14px var(--ekmar-r-body);
	color: var(--ekmar-r-navy);
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
	pointer-events: none;
}
.ekmar-routes__lbl--off { display: none; }
@keyframes ekmar-routes-flag-up {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

/* Info box: top-left corner of the map */
.ekmar-routes__card {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 6;
	width: 228px;
	background: #fff;
	border-radius: 10px;
	border: 1px solid var(--ekmar-r-line);
	box-shadow: 0 10px 28px rgba(0, 22, 71, .22);
	overflow: hidden;
	animation: ekmar-routes-card-in .28s ease both;
}
@keyframes ekmar-routes-card-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
.ekmar-routes__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #cfe9f5;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ekmar-routes__media::-webkit-scrollbar {
	display: none;
}
.ekmar-routes__media img,
.ekmar-routes__media video {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;
	display: block;
	margin: 0;
	border-radius: 0;
}
.ekmar-routes__card-body {
	padding: 9px 12px 12px;
	display: grid;
	gap: 5px;
	border-top: 3px solid var(--ekmar-r-orange);
}
.ekmar-routes__card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-right: 22px;
}
.ekmar-routes__num {
	flex: none;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #d96500, #ff7700 45%, #e06c00 70%, #9e3f00);
	color: #fff;
	font: 700 11px/1 var(--ekmar-r-body);
	white-space: nowrap;
}
.ekmar-routes .ekmar-routes__card-title {
	margin: 0;
	padding: 0;
	font: 600 14.5px/1.25 var(--ekmar-r-head);
	color: var(--ekmar-r-navy);
	text-transform: none;
	letter-spacing: 0;
}
.ekmar-routes__where {
	display: flex;
	align-items: center;
	gap: 5px;
	font: 600 10.5px var(--ekmar-r-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ekmar-r-muted);
}
.ekmar-routes__where svg,
.ekmar-routes__dialog-where svg {
	width: 16px;
	height: 11px;
	border-radius: 2px;
	box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25);
	flex: none;
}
.ekmar-routes .ekmar-routes__card-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ekmar-r-ink-soft);
}
.ekmar-routes .ekmar-routes__more {
	justify-self: start;
	margin: 2px 0 0;
	padding: 5px 12px;
	font: 600 12px var(--ekmar-r-body);
	color: #fff;
	cursor: pointer;
	border: 1px solid var(--ekmar-r-gold);
	border-top-color: var(--ekmar-r-gold-hi);
	border-bottom-color: var(--ekmar-r-gold-lo);
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 58, 138, .92) 45%, rgba(37, 99, 235, .88) 70%, rgba(15, 23, 42, .95));
}
.ekmar-routes .ekmar-routes__more:hover,
.ekmar-routes .ekmar-routes__more:focus-visible {
	filter: brightness(1.12);
	outline: none;
}
.ekmar-routes .ekmar-routes__close {
	position: absolute;
	right: 6px;
	top: 6px;
	z-index: 2;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, .92);
	color: var(--ekmar-r-navy);
	font: 400 17px/26px var(--ekmar-r-body);
	text-align: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.ekmar-routes__close:focus-visible {
	outline: 2px solid var(--ekmar-r-orange);
}
/* Compact info box on small maps (phones): picture as a thumbnail on the left */
.ekmar-routes__card--compact {
	right: 8px;
	left: 8px;
	top: 8px;
	width: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.ekmar-routes__card--compact.has-media {
	grid-template-columns: 84px minmax(0, 1fr);
}
.ekmar-routes__card--compact .ekmar-routes__media {
	aspect-ratio: auto;
	height: 100%;
	min-height: 84px;
}
.ekmar-routes__card--compact .ekmar-routes__card-body {
	border-top: 0;
	border-left: 3px solid var(--ekmar-r-orange);
	padding: 8px 34px 9px 10px;
	gap: 3px;
}
.ekmar-routes__card--compact .ekmar-routes__card-title {
	font-size: 13.5px;
}
.ekmar-routes__card--compact .ekmar-routes__card-text {
	font-size: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ekmar-routes__card--compact .ekmar-routes__close {
	width: 24px;
	height: 24px;
	font-size: 15px;
	line-height: 24px;
}

/* Itinerary under the map */
.ekmar-routes__info {
	padding: 14px 16px 16px;
	display: grid;
	gap: 10px;
	border-top: 1px solid #ece7da;
}
.ekmar-routes__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}
.ekmar-routes .ekmar-routes__title h4 {
	margin: 0;
	padding: 0;
	font: 600 16px/1.3 var(--ekmar-r-head);
	color: var(--ekmar-r-navy);
}
.ekmar-routes__title span {
	font-size: 13px;
	color: var(--ekmar-r-muted);
}
.ekmar-routes .ekmar-routes__days {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.ekmar-routes .ekmar-routes__day {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 8px;
	align-items: start;
	margin: 0;
	padding: 0;
}
.ekmar-routes__day-num {
	font: 600 11px/24px var(--ekmar-r-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ekmar-r-muted);
	white-space: nowrap;
}
.ekmar-routes__day-stops {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 4px;
}
.ekmar-routes__sep {
	color: var(--ekmar-r-gold-lo);
	font-size: 12px;
}
.ekmar-routes .ekmar-routes__stop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 13px/1.3 var(--ekmar-r-body);
	color: var(--ekmar-r-ink);
	background: #f4f2ec;
	border: 1px solid var(--ekmar-r-line);
	border-radius: 999px;
	padding: 2px 10px 2px 2px;
	margin: 0;
	cursor: pointer;
	text-align: left;
}
.ekmar-routes__stop b {
	flex: none;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border-radius: 10px;
	background: var(--ekmar-r-navy);
	color: #fff;
	font-size: 10.5px;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--ekmar-r-gold);
}
.ekmar-routes .ekmar-routes__stop:hover,
.ekmar-routes .ekmar-routes__stop:focus-visible {
	border-color: var(--ekmar-r-gold);
	background: #f4f2ec;
	color: var(--ekmar-r-ink);
	outline: none;
}
.ekmar-routes .ekmar-routes__stop.is-on {
	border-color: var(--ekmar-r-orange);
	background: #fff4ea;
}
.ekmar-routes__stop.is-on b {
	background: linear-gradient(135deg, #d96500, #ff7700 45%, #9e3f00);
}
.ekmar-routes__day-meta {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--ekmar-r-muted);
}
.ekmar-routes .ekmar-routes__sample-note {
	margin: 2px 0 0;
}
/* Map key under the itinerary: the same small pictures as on the map, in plain words */
.ekmar-routes .ekmar-routes__tip {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--ekmar-r-ink-soft);
}
.ekmar-routes .ekmar-routes__legend {
	list-style: none;
	margin: 0;
	padding: 10px 12px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 8px 18px;
	background: #fcfbf8;
	border: 1px solid #ece7da;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--ekmar-r-muted);
}
.ekmar-routes .ekmar-routes__legend li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.ekmar-routes__legend b {
	display: block;
	font-weight: 600;
	color: var(--ekmar-r-navy);
}
.ekmar-routes__lg-icon {
	flex: none;
	width: 34px;
	height: 28px;
	display: grid;
	place-items: center;
}
.ekmar-routes__lg-icon svg {
	width: 34px;
	height: 28px;
	display: block;
	overflow: visible;
}
.ekmar-routes__lg-icon text {
	font-family: var(--ekmar-r-body);
}
.ekmar-routes__lg-btn {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	border: 1.2px solid var(--ekmar-r-gold);
	background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,58,138,.95) 45%, rgba(37,99,235,.9) 70%, rgba(15,23,42,.97));
}
.ekmar-routes__lg-icon .ekmar-routes__lg-btn svg {
	width: 16px;
	height: 16px;
}

/* Read more popup */
.ekmar-routes__dialog {
	width: min(560px, calc(100vw - 24px));
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	padding: 0;
	border: 1px solid var(--ekmar-r-line);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 22, 71, .35);
	background: #fff;
	color: var(--ekmar-r-ink);
	font-family: var(--ekmar-r-body);
	overflow: hidden;
}
.ekmar-routes__dialog:not([open]) {
	display: none;
}
.ekmar-routes__dialog[open] {
	display: flex;
	flex-direction: column;
}
.ekmar-routes__dialog::backdrop {
	background: rgba(0, 22, 71, .55);
}
.ekmar-routes__dialog.is-fallback-open {
	position: fixed;
	inset: 0;
	margin: auto;
	z-index: 100000;
	height: fit-content;
}
.ekmar-routes__dialog-scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ekmar-routes__dialog .ekmar-routes__media {
	aspect-ratio: 16 / 9;
}
.ekmar-routes__dialog-body {
	padding: 16px 20px 20px;
	display: grid;
	gap: 10px;
	border-top: 3px solid var(--ekmar-r-orange);
}
.ekmar-routes__dialog-where {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 600 11px var(--ekmar-r-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ekmar-r-muted);
}
.ekmar-routes__dialog .ekmar-routes__dialog-title {
	margin: 0;
	padding: 0 30px 0 0;
	font: 600 21px/1.25 var(--ekmar-r-head);
	color: var(--ekmar-r-navy);
}
.ekmar-routes__dialog .ekmar-routes__dialog-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ekmar-r-ink-soft);
}
.ekmar-routes__dialog .ekmar-routes__dialog-link {
	justify-self: start;
	font-weight: 600;
	color: var(--ekmar-r-navy);
	text-decoration: underline;
	text-decoration-color: var(--ekmar-r-gold);
	text-underline-offset: 3px;
}
.ekmar-routes__dialog .ekmar-routes__close {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, .95);
	color: var(--ekmar-r-navy);
	font: 400 20px/32px var(--ekmar-r-body);
	text-align: center;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
	z-index: 2;
}


/* ---------- Map background, pennants, country flag, zoom (design agreed 2026-10-29) ---------- */
/* With the relief pictures the coastline is a line only; without them (map file missing) the land keeps a flat colour. */
.ekmar-routes__map.has-relief { background: #c9e6f3; }
.ekmar-routes__map.has-relief .ekmar-routes__land { fill: none; stroke: #a8987a; stroke-width: .8; stroke-opacity: .75; }
.ekmar-routes__line { stroke-opacity: .6; }
.ekmar-routes__line--land { stroke-dasharray: 3 4; stroke-width: 1.4; stroke-opacity: .45; stroke-linecap: butt; }
.ekmar-routes__town { position: absolute; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; white-space: nowrap;
  font: italic 500 10px/1 var(--ekmar-r-body); letter-spacing: .02em; color: #6a6350; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
.ekmar-routes__credit { position: absolute; right: 60px; bottom: 6px; z-index: 3; font: 400 8.5px var(--ekmar-r-body); color: rgba(0, 22, 71, .5); pointer-events: none; }
@container (max-width: 600px) { .ekmar-routes__credit { right: 58px; bottom: 4px; font-size: 8px; } .ekmar-routes__area-name { bottom: 16px; } }
.ekmar-routes__world.is-gliding { transition: transform .65s cubic-bezier(.45, 0, .2, 1); }
.ekmar-routes__world.is-gliding .ekmar-mk { opacity: 0; transition: opacity .15s; }

/* A marker group: a base on the spot, one or more masts, a numbered pennant on each */
.ekmar-mk { position: absolute; z-index: 2; width: 0; height: 0; }
.ekmar-mk.is-front { z-index: 4; }
.ekmar-mk svg.ekmar-mk__masts { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.ekmar-mk__masts line { stroke: #8a6d07; stroke-width: 2; stroke-linecap: round; }
.ekmar-mk--extra .ekmar-mk__masts line { stroke: var(--ekmar-r-navy); stroke-width: 1.3; }
.ekmar-routes .ekmar-mk__base { position: absolute; min-width: 0; min-height: 0; line-height: 0; left: 0; top: 0; width: 13px; height: 13px; transform: translate(-50%, -50%); border-radius: 50%; padding: 0; margin: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--ekmar-r-gold-hi), var(--ekmar-r-gold) 60%, var(--ekmar-r-gold-lo)); border: 1.5px solid var(--ekmar-r-navy); box-shadow: 0 1px 3px rgba(0,22,71,.35); }
.ekmar-routes .ekmar-mk--extra .ekmar-mk__base { width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--ekmar-r-navy); }
.ekmar-mk__base:focus-visible, .ekmar-mk__pen:focus-visible { outline: 2px solid var(--ekmar-r-orange); outline-offset: 2px; }

/* Pennants are drawn as small SVG shapes so their outline is closed all round, notch included */
.ekmar-routes .ekmar-mk__pen { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-width: 0; min-height: 0; width: auto; height: auto; cursor: pointer; display: block; line-height: 0; }
.ekmar-mk__pen svg { display: block; overflow: visible; }
.ekmar-mk__pen.is-r { transform-origin: 0 0; }
.ekmar-mk__pen.is-l { transform-origin: 100% 0; }
.ekmar-mk__pen .pen-shape { fill: #0f2257; stroke: var(--ekmar-r-gold); stroke-width: 1.4; stroke-linejoin: round; }
.ekmar-mk__pen .pen-num { fill: #fff; font: 700 9.5px var(--ekmar-r-body); }
.ekmar-mk--extra .ekmar-mk__pen .pen-shape { fill: #fff; stroke: var(--ekmar-r-navy); stroke-width: 1.3; }
.ekmar-mk--extra .ekmar-mk__pen .pen-num { fill: var(--ekmar-r-navy); font-size: 8.5px; }
.ekmar-mk__pen.is-hl .pen-shape { fill: #1e3a8a; }
.ekmar-mk__pen:focus-visible { outline: none; }
.ekmar-mk__pen:focus-visible .pen-shape { stroke: var(--ekmar-r-orange); stroke-width: 2; }
/* Selected day: orange pennant and a soft orange ring on its base */
.ekmar-mk__pen.is-sel .pen-shape { fill: #f07000; stroke: #ffc98a; }
.ekmar-mk--extra .ekmar-mk__pen.is-sel .pen-shape { fill: #fff; stroke: #ff7700; stroke-width: 1.8; }
.ekmar-mk--extra .ekmar-mk__pen.is-sel .pen-num { fill: #c55a00; }
.ekmar-routes .ekmar-mk__base.is-sel { box-shadow: 0 0 0 3px rgba(255, 119, 0, .55), 0 1px 3px rgba(0,22,71,.35); }

/* The map's country flag: one waving flag on the land of the selected stop, changes with the stop's country */
.ekmar-routes__ensign { position: absolute; width: 40px; height: 48px; z-index: 3; pointer-events: none; transition: opacity .2s ease; }
.ekmar-routes__ensign.is-hidden { opacity: 0; visibility: hidden; }
.ekmar-routes__ensign svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 1px 100%; transition: transform .28s ease-in; }
.ekmar-routes__ensign.is-down svg { transform: scaleY(0); }
.ekmar-routes__ensign.is-up svg { animation: ekmar-routes-flag-up .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.ekmar-routes__ensign::after { content: ""; position: absolute; left: -3px; bottom: -2px; width: 8px; height: 4px; border-radius: 50%; background: rgba(0, 22, 71, .25); }

/* Zoom button: always there, bottom right; + zooms in, − zooms back out */
.ekmar-routes .ekmar-routes__zoombtn { position: absolute; right: 10px; bottom: 10px; z-index: 7; width: 42px; height: 42px; padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; border: 1.5px solid var(--ekmar-r-gold); border-top-color: var(--ekmar-r-gold-hi); border-bottom-color: var(--ekmar-r-gold-lo);
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,58,138,.95) 45%, rgba(37,99,235,.9) 70%, rgba(15,23,42,.97)); box-shadow: 0 3px 10px rgba(0,22,71,.35); }
.ekmar-routes__zoombtn svg { width: 24px; height: 24px; display: block; }
.ekmar-routes__zoombtn:hover { filter: brightness(1.12); }
.ekmar-routes__zoombtn:focus-visible { outline: 2px solid var(--ekmar-r-orange); outline-offset: 2px; }

.ekmar-mk .ekmar-routes__lbl { pointer-events: none; }
.ekmar-mk .ekmar-routes__lbl--r { left: 10px; top: 0; transform: translateY(-50%); }
.ekmar-mk .ekmar-routes__lbl--l { right: 10px; top: 0; transform: translateY(-50%); }
.ekmar-mk .ekmar-routes__lbl--b { top: 9px; left: 0; transform: translateX(-50%); }
.ekmar-mk--extra .ekmar-routes__lbl { font-weight: 500; font-size: 10.5px; color: var(--ekmar-r-ink-soft); }

/* Info box: excursion / also today / show on map */
.ekmar-routes__extra { display: grid; gap: 4px; margin-top: 2px; }
.ekmar-routes__extra-lbl { font: 600 10px var(--ekmar-r-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ekmar-r-muted); }
.ekmar-routes__extra-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ekmar-routes .ekmar-routes__xchip { font: 500 12px/1.2 var(--ekmar-r-body); color: var(--ekmar-r-navy); background: #f4f2ec; border: 1px solid var(--ekmar-r-line); border-radius: 999px; padding: 3px 9px; cursor: pointer; margin: 0; }
.ekmar-routes .ekmar-routes__xchip:hover, .ekmar-routes .ekmar-routes__xchip:focus-visible { border-color: var(--ekmar-r-gold); outline: none; }
.ekmar-routes__xsep { color: var(--ekmar-r-gold-lo); font-size: 12px; }
.ekmar-routes__card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 2px; }
.ekmar-routes .ekmar-routes__back, .ekmar-routes .ekmar-routes__showmap { font: 600 12px var(--ekmar-r-body); color: var(--ekmar-r-navy); background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--ekmar-r-gold); text-underline-offset: 3px; }
.ekmar-routes .ekmar-routes__more { margin: 0; }
.ekmar-routes__card--compact .ekmar-routes__extra { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; }

/* Day list: main stop strong, the rest lighter */
.ekmar-routes__day-extra { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12.5px; color: var(--ekmar-r-muted); }
.ekmar-routes .ekmar-routes__xlink { font: 400 12.5px/1.3 var(--ekmar-r-body); color: var(--ekmar-r-ink-soft); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ekmar-routes .ekmar-routes__xlink:hover, .ekmar-routes .ekmar-routes__xlink:focus-visible { color: var(--ekmar-r-navy); outline: none; }
.ekmar-routes__extag { font: 600 9.5px var(--ekmar-r-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ekmar-r-gold-lo); }
@container (max-width: 600px) {
  .ekmar-mk .ekmar-routes__lbl { display: none; }
  .ekmar-mk.is-hl .ekmar-routes__lbl, .ekmar-mk.is-sel .ekmar-routes__lbl { display: block; }
}
.ekmar-routes__map .ekmar-routes__loading { z-index: 8; }

/* Narrow column (phone): routes become a two-column grid of buttons */
@container (max-width: 600px) {
	.ekmar-routes__head {
		padding: 10px;
		gap: 8px;
	}
	.ekmar-routes__areas {
		justify-self: stretch;
		display: flex;
		border-radius: 14px;
	}
	.ekmar-routes .ekmar-routes__area-tab {
		flex: 1 1 auto;
		justify-content: center;
		padding: 6px 8px;
		font-size: 10px;
	}
	.ekmar-routes__area-tab span {
		display: none;
	}
	.ekmar-routes__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	.ekmar-routes .ekmar-routes__tab {
		font-size: 12.5px;
		padding: 8px 10px;
		border: 1px solid var(--ekmar-r-line);
		border-radius: 8px;
		background: #fff;
		text-align: center;
		min-width: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}
	.ekmar-routes__tab::after {
		display: none;
	}
	.ekmar-routes .ekmar-routes__tab[aria-selected="true"],
	.ekmar-routes .ekmar-routes__tab[aria-selected="true"]:hover {
		color: #fff;
		border-color: var(--ekmar-r-gold);
		border-top-color: var(--ekmar-r-gold-hi);
		border-bottom-color: var(--ekmar-r-gold-lo);
		background: linear-gradient(135deg, rgba(15, 23, 42, .88), rgba(30, 58, 138, .9) 45%, rgba(37, 99, 235, .85) 70%, rgba(15, 23, 42, .92));
	}
	.ekmar-routes__tab:only-child,
	.ekmar-routes__tab:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.ekmar-routes__map {
		aspect-ratio: 4 / 5.2;
	}
	.ekmar-routes__info {
		padding: 12px;
	}
	.ekmar-routes__day {
		grid-template-columns: 42px minmax(0, 1fr);
	}
	.ekmar-routes .ekmar-routes__stop {
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ekmar-routes *,
	.ekmar-routes__dialog {
		transition: none !important;
		animation: none !important;
	}
}