/* ==========================================================================
   Detail page (Lovable): location page, resources/views/pages/locations/show.blade.php
   Prefix dp-*. Font sizes in em (a11y text-size menu), see design.css tokens.
   ========================================================================== */

.dp {
	color: var(--ds-foreground);
}

/* Space between the last section and the newsletter banner that follows the article */
.dp > article {
	padding-bottom: 3rem;
}

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

.dp ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp p {
	margin: 0;
}

.dp-top {
	padding-top: 1.25rem;
}

@media (min-width: 768px) {
	.dp > article {
		padding-bottom: 4rem;
	}

	.dp-top {
		padding-top: 1.75rem;
	}
}

/* Lucide icon via mask; colour = currentColor */
.dp-ico {
	display: inline-block;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--dp-ico) center / contain no-repeat;
	mask: var(--dp-ico) center / contain no-repeat;
}

.dp-ico--arrow-left { --dp-ico: url(../img/lucide/arrow-left.svg); }
.dp-ico--arrow-right { --dp-ico: url(../img/lucide/arrow-right.svg); }
.dp-ico--images { --dp-ico: url(../img/lucide/images.svg); }
.dp-ico--headphones { --dp-ico: url(../img/lucide/headphones.svg); }
.dp-ico--map-pin { --dp-ico: url(../img/lucide/map-pin.svg); }
.dp-ico--clock { --dp-ico: url(../img/lucide/clock-3.svg); }
.dp-ico--phone { --dp-ico: url(../img/lucide/phone.svg); }
.dp-ico--mail { --dp-ico: url(../img/lucide/mail.svg); }
.dp-ico--globe { --dp-ico: url(../img/lucide/globe.svg); }
.dp-ico--external { --dp-ico: url(../img/lucide/external-link.svg); }
.dp-ico--instagram { --dp-ico: url(../img/lucide/instagram.svg); }
.dp-ico--facebook { --dp-ico: url(../img/lucide/facebook.svg); }
.dp-ico--navigation { --dp-ico: url(../img/lucide/navigation.svg); }
.dp-ico--arrow-up-right { --dp-ico: url(../img/lucide/arrow-up-right.svg); }
.dp-ico--compass { --dp-ico: url(../img/lucide/compass.svg); }
.dp-ico--check { --dp-ico: url(../img/lucide/check.svg); }
.dp-ico--car { --dp-ico: url(../img/lucide/car.svg); }
.dp-ico--bike { --dp-ico: url(../img/lucide/bike.svg); }
.dp-ico--footprints { --dp-ico: url(../img/lucide/footprints.svg); }
.dp-ico--route { --dp-ico: url(../img/lucide/route.svg); }
.dp-ico--star { --dp-ico: url(../img/lucide/star.svg); }
.dp-ico--star-filled { --dp-ico: url(../img/lucide/star-filled.svg); }
.dp-ico--x { --dp-ico: url(../img/lucide/x.svg); }
.dp-ico--message { --dp-ico: url(../img/lucide/message-circle.svg); }
.dp-ico--calendar { --dp-ico: url(../img/lucide/calendar-days.svg); }
.dp-ico--calendar-plus { --dp-ico: url(../img/lucide/calendar-plus.svg); }
.dp-ico--info { --dp-ico: url(../img/lucide/info.svg); }
.dp-ico--eye { --dp-ico: url(../img/lucide/eye.svg); }
.dp-ico--share { --dp-ico: url(../img/lucide/share-2.svg); }
.dp-ico--ticket { --dp-ico: url(../img/lucide/ticket.svg); }
.dp-ico--printer { --dp-ico: url(../img/lucide/printer.svg); }
.dp-ico--languages { --dp-ico: url(../img/lucide/languages.svg); }
.dp-ico--users { --dp-ico: url(../img/lucide/users.svg); }

/* ---------- Back link ---------- */

.dp-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
	color: var(--ds-primary);
	text-decoration: none;
}

.dp-back:hover {
	color: var(--ds-primary);
	text-decoration: underline;
}

/* ---------- Gallery: big photo + up to 3 small, "All photos" opens the lightbox ---------- */

.dp-gallery {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 6px;
	aspect-ratio: 4 / 3;
	margin-top: 1.25rem;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
}

.dp-gallery__item {
	display: block;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.dp-gallery__item picture,
.dp-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
}

.dp-gallery__item img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dp-gallery__item:hover img {
	transform: scale(1.03);
}

.dp-gallery__item:first-child {
	grid-row: span 2;
}

.dp-gallery__item:first-child:hover img {
	transform: scale(1.02);
}

/* Phones show 3 photos; the 4th is in the lightbox */
.dp-gallery--4 .dp-gallery__item:nth-child(4) {
	display: none;
}

.dp-gallery--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.dp-gallery--1 .dp-gallery__item:first-child,
.dp-gallery--2 .dp-gallery__item:first-child {
	grid-row: auto;
}

.dp-gallery--2 {
	grid-template-rows: 1fr;
}

.dp-gallery__all {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 36px;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-secondary);
	color: #262d38;
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	white-space: nowrap;
	box-shadow: var(--ds-shadow-card);
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.dp-gallery__all:hover {
	background-color: #e9e6dd;
}

/* Phones: smaller badge so it doesn't cover the small photos */
@media (max-width: 767px) {
	.dp-gallery__all {
		right: 0.625rem;
		bottom: 0.625rem;
		gap: 0.375rem;
		min-height: 28px;
		padding: 0.25rem 0.625rem;
		font-size: 0.75em;
	}

	.dp-gallery__all .dp-ico {
		width: 0.875rem;
		height: 0.875rem;
	}
}

@media (min-width: 768px) {
	.dp-gallery {
		grid-template-columns: 2fr 1fr 1fr;
		aspect-ratio: 2.25 / 1;
		margin-top: 1.75rem;
	}

	.dp-gallery--4 .dp-gallery__item:nth-child(2) {
		grid-column: span 2;
	}

	.dp-gallery--4 .dp-gallery__item:nth-child(4) {
		display: block;
	}

	/* 2 photos: equal halves; 3 photos: big one on the left (half, as in the 4-photo layout), 2 stacked on the right */
	.dp-gallery--2,
	.dp-gallery--3 {
		grid-template-columns: 1fr 1fr;
	}

	.dp-gallery--1 {
		grid-template-columns: 1fr;
	}
}

/* ---------- Photo viewer (assets/js/detail.js) ---------- */

html.dp-lock {
	overflow: hidden;
}

.dp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: grid;
	/* minmax(0, 1fr): the track must not grow to the thumbnail strip's full width, the strip scrolls instead */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	/* phones: room above the photo for the close button */
	padding: 3.5rem 1rem 1rem;
	background-color: rgba(18, 32, 70, 0.95);
}

.dp-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: transparent;
	color: var(--ds-primary-foreground);
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.dp-lightbox__close:hover,
.dp-lightbox__close:focus-visible {
	outline: none;
	background-color: rgba(255, 255, 255, 0.1);
}

.dp-lightbox__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	width: 100%;
	max-width: 72rem;
	min-width: 0;
	min-height: 0;
	margin-inline: auto;
}

.dp-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 72vh;
	/* never taller than what is left after paddings, thumbnails and the counter */
	max-height: min(72vh, calc(100dvh - 13rem));
	border-radius: var(--ds-radius);
	object-fit: contain;
	user-select: none;
}

.dp-lightbox__thumbs {
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
	max-width: 100%;
	overscroll-behavior-x: contain;
	padding-bottom: 0.5rem;
	overflow-x: auto;
}

.dp-lightbox__thumb {
	flex-shrink: 0;
	width: 6rem;
	height: 4rem;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--ds-radius-md);
	background: none;
	opacity: 0.65;
	cursor: pointer;
	transition: opacity var(--ds-transition), border-color var(--ds-transition);
}

.dp-lightbox__thumb:hover,
.dp-lightbox__thumb:focus-visible {
	outline: none;
	opacity: 1;
}

.dp-lightbox__thumb.is-active {
	border-color: var(--ds-gold);
	opacity: 1;
}

.dp-lightbox__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dp .dp-lightbox__count {
	font-size: 0.875em;
	line-height: 1.43;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
	.dp-lightbox {
		padding: 2rem;
	}

	.dp-lightbox__img {
		max-height: min(72vh, calc(100dvh - 12rem));
	}

	.dp-lightbox__close {
		top: 2rem;
		right: 2rem;
	}
}

/* ---------- Header: category, region, title, lead, audio guide ---------- */

.dp-head {
	padding-block: 2rem;
	border-bottom: 1px solid var(--ds-border);
}

.dp-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.dp-tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
}

.dp-head__region {
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}

.dp-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--ds-gold);
}

.dp-stars .dp-ico--star {
	color: var(--ds-border);
}

.dp .dp-title {
	margin: 1rem 0 0;
	font-size: 1.875em;
	font-weight: 600;
	line-height: 1.2;
}

.dp-lead {
	max-width: 48rem;
	margin-top: 1rem;
	font-size: 1em;
	line-height: 1.75;
	color: var(--ds-ink-soft);
}

.dp .dp-lead p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.dp .dp-lead p + p {
	margin-top: 0.75rem;
}

.dp-audio {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.75rem;
	padding: 1rem;
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
}

.dp-audio__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-accent);
	color: var(--ds-primary);
}

.dp-audio__icon .dp-ico {
	width: 1.25rem;
	height: 1.25rem;
}

.dp-audio__text {
	flex: 1;
	min-width: 0;
}

.dp-audio__eyebrow {
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	text-transform: uppercase;
	color: var(--ds-primary);
}

.dp .dp-audio__title {
	margin-top: 2px;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-foreground);
}

.dp-audio__player {
	width: 100%;
	height: 44px;
}

@media (min-width: 576px) {
	.dp-audio {
		flex-direction: row;
		align-items: center;
	}

	.dp-audio__player {
		width: 26rem;
		flex-shrink: 0;
	}
}

@media (min-width: 768px) {
	.dp-head {
		padding-block: 2.5rem;
	}

	.dp .dp-title {
		font-size: 3em;
		line-height: 1;
	}

	.dp-lead {
		font-size: 1.125em;
		line-height: 1.78;
	}

	.dp-audio {
		padding: 1.25rem;
	}
}

/* ---------- Layout: content + sticky info card ---------- */

.dp-layout {
	display: flex;
	flex-direction: column;
	padding-top: 2.25rem;
}

.dp-layout__side {
	order: 2;
	margin-top: 3rem;
}

.dp-layout__side > :not(.dp-info) {
	margin-top: 1.5rem;
}

.dp-layout__main {
	order: 1;
	min-width: 0;
}

@media (min-width: 992px) {
	.dp-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: start;
		gap: 3.5rem;
	}

	.dp-layout__side {
		order: 0;
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: 6rem;
		margin-top: 0;
	}

	.dp-layout__main {
		order: 0;
		grid-column: 1;
		grid-row: 1;
	}
}

/* Section titles */
.dp .dp-h2 {
	margin: 0;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.33;
}

.dp .dp-h2--eyebrow {
	margin-top: 0.75rem;
}

.dp-h2__count {
	color: var(--ds-ink-soft);
}

@media (min-width: 768px) {
	.dp .dp-h2 {
		font-size: 1.875em;
		line-height: 1.2;
	}
}

/* ---------- Info card ---------- */

.dp-info {
	padding: 1.5rem;
	border-radius: var(--ds-radius);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	box-shadow: var(--ds-shadow-card);
}

.dp .dp-info__title {
	margin: 0;
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.55;
	color: var(--ds-primary-foreground);
}

.dp-info__list {
	display: grid;
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding-block: 1.25rem;
	border-block: 1px solid rgba(255, 255, 255, 0.2);
}

.dp-info__row {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: 0.75rem;
}

.dp-info__row > .dp-ico {
	margin-top: 2px;
	color: var(--ds-gold);
}

.dp-info dt {
	font-size: 0.75em;
	font-weight: 400;
	line-height: 1.33;
	color: rgba(255, 255, 255, 0.65);
}

.dp-info dd {
	margin: 2px 0 0;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	color: var(--ds-primary-foreground);
	overflow-wrap: anywhere;
}

.dp-info dd a {
	color: var(--ds-primary-foreground);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--ds-transition);
}

.dp-info dd a:hover {
	color: var(--ds-primary-foreground);
	text-decoration-color: var(--ds-primary-foreground);
}

.dp-info__ext .dp-ico {
	width: 0.875rem;
	height: 0.875rem;
	margin-left: 0.375rem;
	vertical-align: -2px;
}

.dp-info__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}

.dp-info__actions {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

@media (min-width: 576px) and (max-width: 991px) {
	.dp-info__actions {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Buttons ---------- */

.dp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 36px;
	padding: 0.5rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--ds-radius-md);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ds-transition), border-color var(--ds-transition), color var(--ds-transition);
}

.dp-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dp-btn--gold {
	width: 100%;
	background-color: var(--ds-gold);
	color: #262d38;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dp-btn--gold:hover {
	background-color: #eeca69;
	color: #262d38;
}

.dp-btn--ghost {
	width: 100%;
	border-color: rgba(255, 255, 255, 0.35);
	background-color: transparent;
	color: var(--ds-primary-foreground);
}

.dp-btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--ds-primary-foreground);
}

.dp-btn--primary {
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dp-btn--primary:hover {
	background-color: var(--ds-primary-hover);
	color: var(--ds-primary-foreground);
}

.dp-btn--outline {
	border-color: var(--ds-border);
	background-color: var(--ds-background);
	color: var(--ds-foreground);
}

.dp-btn--outline:hover {
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

/* Save: heart outline -> filled, label swaps (script.js toggles .in-wishlist) */
.dp-save__icon {
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/heart.svg) center / contain no-repeat;
	mask: url(../img/lucide/heart.svg) center / contain no-repeat;
}

.dp-save.in-wishlist .dp-save__icon {
	-webkit-mask-image: url(../img/lucide/heart-filled.svg);
	mask-image: url(../img/lucide/heart-filled.svg);
}

.dp-save__on,
.dp-save.in-wishlist .dp-save__off {
	display: none;
}

.dp-save.in-wishlist .dp-save__on {
	display: inline;
}

/* ---------- About ---------- */

.dp-about {
	max-width: 48rem;
}

.dp-prose {
	margin-top: 1.25rem;
	font-size: 1em;
	line-height: 2;
	color: var(--ds-ink-soft);
}

/* Typography only: spacing comes from the block rules below (a margin here would outrank them) */
.dp .dp-prose p,
.dp .dp-prose li {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Lovable space-y-5: 1.25rem between blocks (also overrides style.css .page-content p margins) */
.dp .dp-prose > *,
.dp .dp-prose li p {
	margin: 0;
}

.dp .dp-prose > * + * {
	margin-top: 1.25rem;
}

.dp .dp-prose li {
	margin: 0;
}

.dp .dp-prose ul,
.dp .dp-prose ol {
	padding-left: 1.25rem;
}

.dp .dp-prose ul {
	list-style: disc;
}

.dp .dp-prose li + li {
	margin-top: 0.5rem;
}

.dp .dp-prose h2,
.dp .dp-prose h3 {
	margin-bottom: 0;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ds-ink);
}

.dp .dp-prose a {
	color: var(--ds-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dp .dp-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ds-radius);
}

@media (min-width: 768px) {
	.dp-prose {
		font-size: 1.125em;
		line-height: 1.78;
	}
}

/* ---------- Blocks inside the content column ---------- */

.dp-block {
	margin-top: 3.5rem;
}

.dp-layout__main > :first-child {
	margin-top: 0;
}

/* Trips with this place */
.dp .dp-trips {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.75rem;
}

@media (min-width: 576px) {
	.dp .dp-trips {
		grid-template-columns: 1fr 1fr;
	}
}

.dp-trip {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card);
	color: var(--ds-foreground);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dp-trip:hover {
	transform: translateY(-2px);
	box-shadow: var(--ds-shadow-card-hover);
	color: var(--ds-foreground);
}

.dp-trip__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 9rem;
	object-fit: cover;
}

.dp-trip__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1rem;
}

.dp-trip__mode {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	color: var(--ds-primary);
}

.dp-trip__mode .dp-ico,
.dp-trip__meta .dp-ico {
	width: 0.875rem;
	height: 0.875rem;
}

.dp .dp-trip__title {
	margin: 0.5rem 0 0;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.375;
	transition: color var(--ds-transition);
}

.dp-trip:hover .dp-trip__title {
	color: var(--ds-primary);
}

.dp .dp-trip__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: 0.75em;
	line-height: 1.33;
	color: var(--ds-ink-soft);
}

.dp-trip__meta > span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

/* ---------- Reviews ---------- */

.dp .dp-reviews {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ds-border);
}

.dp-layout__main > .dp-reviews:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.dp-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.dp-reviews__list {
	margin-top: 2rem;
	border-block: 1px solid var(--ds-border);
}

.dp-review {
	display: grid;
	gap: 1rem;
	padding-block: 1.5rem;
}

.dp-review + .dp-review {
	border-top: 1px solid var(--ds-border);
}

@media (min-width: 576px) {
	.dp-review {
		grid-template-columns: 3rem minmax(0, 1fr);
	}
}

/* Phones: small avatar next to the review instead of on its own row; review buttons full width */
@media (max-width: 575px) {
	.dp-review {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: 0.75rem;
	}

	.dp-review > .dp-avatar {
		width: 2.5rem;
		height: 2.5rem;
	}

	.dp-reviews__head > .dp-btn,
	.dp .dp-reviews__more {
		width: 100%;
	}
}

.dp-avatar {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-accent);
	color: var(--ds-primary);
	font-size: 1em;
	font-weight: 600;
}

.dp-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dp-avatar--sm {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	font-size: 0.875em;
}

.dp-review__body {
	min-width: 0;
}

.dp-review__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.dp .dp-review__name {
	margin: 0;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.0625em;
	font-weight: 600;
	line-height: 1.12;
	color: var(--ds-ink);
}

.dp .dp-review__date {
	margin-top: 0.25rem;
	font-size: 0.75em;
	line-height: 1.33;
	color: var(--ds-ink-soft);
}

.dp .dp-review__text {
	margin-top: 1rem;
	font-size: 1em;
	line-height: 1.75;
	color: var(--ds-ink-soft);
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.dp-review__reply {
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ds-primary);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 600;
	cursor: pointer;
}

.dp-review__reply:hover {
	text-decoration: underline;
}

.dp-replies {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.25rem;
	padding-left: 1rem;
	border-left: 2px solid var(--ds-border);
}

.dp-reply {
	display: flex;
	gap: 0.75rem;
}

.dp .dp-reply .dp-review__text {
	margin-top: 0.5rem;
}

.dp-reviews__more {
	margin-top: 1.5rem;
}

/* Empty state: dashed box */
.dp-reviews__empty {
	margin-top: 1.75rem;
	padding: 2.5rem 1.5rem;
	border: 1px dashed var(--ds-border);
	border-radius: var(--ds-radius);
	text-align: center;
}

.dp-reviews__empty .dp-ico {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--ds-primary);
}

.dp .dp-reviews__empty-title {
	margin-top: 0.75rem;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-foreground);
}

.dp .dp-reviews__empty-text,
.dp .dp-review-sent__text {
	margin-top: 0.25rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}

/* Review form (Lovable) */
.dp-review-form,
.dp-review-sent {
	margin-top: 1.75rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
}

.dp-review-form {
	padding: 1.25rem;
}

.dp-review-sent {
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.dp-review-form {
		padding: 1.75rem;
	}
}

.dp .dp-review-form__title {
	margin: 0;
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.55;
}

.dp .dp-review-sent__title {
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-foreground);
}

.dp-review-form__label {
	display: block;
	margin: 1.25rem 0 0;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	color: var(--ds-foreground);
}

.dp-review-form .dp-textarea {
	margin-top: 0.5rem;
}

.dp-review-form__submit {
	margin-top: 1rem;
}

/* Reply form: compact, opened by "Відповісти" (script.js toggles .open-form) */
.dp-review-form--reply {
	display: none;
	justify-items: start;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 1rem;
}

.comments-item.open-form .dp-review-form--reply {
	display: grid;
}

.dp-textarea {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-background);
	color: var(--ds-foreground);
	font-family: var(--ds-font-sans);
	font-size: 1em;
	line-height: 1.5;
	resize: vertical;
	transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.dp-textarea::placeholder {
	color: var(--ds-muted-foreground);
}

.dp-textarea:focus {
	outline: none;
	border-color: var(--ds-primary);
	box-shadow: 0 0 0 2px rgba(21, 54, 196, 0.2);
}

/* Star rating: 36px buttons, outline grey star -> filled gold up to the choice */
.dp-rate {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
}

.dp-rate legend {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	color: var(--ds-foreground);
}

.dp-rate__stars {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 0.25rem;
	margin-top: 0.5rem;
}

.dp-rate__stars input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.dp-rate__stars label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	border-radius: var(--ds-radius-md);
	color: var(--ds-muted-foreground);
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.dp-rate__stars label::before {
	content: '';
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/star.svg) center / contain no-repeat;
	mask: url(../img/lucide/star.svg) center / contain no-repeat;
}

.dp-rate__stars label:hover {
	background-color: var(--ds-accent);
}

.dp-rate__stars input:checked ~ label {
	color: var(--ds-gold);
}

.dp-rate__stars input:checked ~ label::before {
	-webkit-mask-image: url(../img/lucide/star-filled.svg);
	mask-image: url(../img/lucide/star-filled.svg);
}

.dp-rate__stars input:focus-visible + label {
	box-shadow: 0 0 0 1px var(--ds-primary);
}

.dp-alert {
	margin-top: 1.5rem;
	padding: 0.75rem 1rem;
	border-radius: var(--ds-radius-md);
	font-size: 0.875em;
}

.dp-alert--success {
	background-color: #e8f5ec;
	color: #1d6b38;
}

.dp-alert--error {
	background-color: #fdecec;
	color: #a1131a;
}

/* ---------- Related places (similar / where to eat / where to stay) ---------- */

.dp-related {
	margin-top: 5rem;
}

@media (min-width: 768px) {
	.dp-related {
		margin-top: 6rem;
	}
}

.dp-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
}

.dp-related__head .ds-section-link {
	flex-shrink: 0;
}

.dp .dp-tiles {
	display: grid;
	gap: 1.5rem;
	margin-top: 2rem;
}

@media (min-width: 576px) {
	.dp .dp-tiles {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 992px) {
	.dp .dp-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.dp-tile__link {
	display: block;
	color: var(--ds-foreground);
	text-decoration: none;
}

.dp-tile__link:hover {
	color: var(--ds-foreground);
}

.dp-tile__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
}

.dp-tile__media picture,
.dp-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.dp-tile__media img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dp-tile__link:hover .dp-tile__media img {
	transform: scale(1.03);
}

.dp .dp-tile__cat {
	margin-top: 1rem;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	color: var(--ds-primary);
}

.dp .dp-tile__title {
	margin: 0.5rem 0 0;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
	transition: color var(--ds-transition);
}

.dp-tile__link:hover .dp-tile__title {
	color: var(--ds-primary);
}

.dp .dp-tile__place {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}

.dp-tile__place .dp-ico {
	color: var(--ds-primary);
}


/* ==========================================================================
   Event page: resources/views/pages/events/show.blade.php
   ========================================================================== */

/* Header: poster + category, title, date / time / place */
.dp-ev-head {
	display: grid;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.25rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--ds-border);
}

@media (min-width: 768px) {
	.dp-ev-head {
		grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
		gap: 2rem;
	}
}

@media (min-width: 1024px) {
	.dp-ev-head {
		gap: 3rem;
	}
}

.dp-poster {
	position: relative;
	aspect-ratio: 3 / 2;
	margin: 0;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
	box-shadow: var(--ds-shadow-card);
}

.dp-poster__link,
.dp-poster img {
	display: block;
	width: 100%;
	height: 100%;
}

.dp-poster img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dp-poster__link:hover img {
	transform: scale(1.02);
}

.dp-ev-head__body {
	min-width: 0;
	padding-block: 0.25rem;
}

.dp-ev-head__meta .dp-tag,
.dp-ev-head__meta .dp-head__region {
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
}

.dp .dp-ev-title {
	font-size: 1.875em;
	line-height: 1.25;
}

@media (min-width: 768px) {
	.dp .dp-ev-title {
		font-size: 2.25em;
		line-height: 1.25;
	}
}

@media (min-width: 1024px) {
	.dp .dp-ev-title {
		font-size: 3em;
		line-height: 1.25;
	}
}

/* Facts: 2 columns on wide phones and desktops, 1 next to the poster on tablets */
.dp-facts {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

@media (min-width: 576px) {
	.dp-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dp-fact--wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {
	.dp-facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1024px) {
	.dp-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.dp-fact {
	display: flex;
	gap: 0.75rem;
	min-width: 0;
}

.dp-fact > .dp-ico {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 2px;
	color: var(--ds-primary);
}

.dp-fact > div {
	min-width: 0;
}

.dp-fact dt {
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	text-transform: uppercase;
	color: var(--ds-ink-soft);
}

.dp-fact dd {
	margin: 0.25rem 0 0;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ds-ink);
	overflow-wrap: anywhere;
}

.dp-fact dd a {
	color: var(--ds-ink);
	text-decoration: none;
}

.dp-fact dd a:hover {
	color: var(--ds-primary);
	text-decoration: underline;
}

/* Layout: description, ticket card, reviews.
   Phones: description -> card -> reviews; desktop: card sticky on the right of both. */
.dp-ev-layout {
	display: grid;
	gap: 2.5rem;
	padding-top: 1.75rem;
}

.dp-ev-main {
	order: 1;
	min-width: 0;
}

.dp-ev-side {
	order: 2;
}

.dp-ev-reviews {
	order: 3;
	min-width: 0;
}

.dp .dp-ev-reviews .dp-reviews {
	margin-top: 0;
}

@media (min-width: 1024px) {
	.dp-ev-layout {
		grid-template-columns: minmax(0, 1fr) 21rem;
		column-gap: 4rem;
		row-gap: 0;
	}

	.dp-ev-main,
	.dp-ev-reviews,
	.dp-ev-side {
		order: 0;
	}

	.dp-ev-main {
		grid-column: 1;
		grid-row: 1;
	}

	.dp-ev-reviews {
		grid-column: 1;
		grid-row: 2;
	}

	.dp-ev-side {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		position: sticky;
		top: 6rem;
	}

	.dp .dp-ev-reviews .dp-reviews {
		margin-top: 4rem;
	}
}

/* Lovable space-y-6 in the event description; bold text in ink */
.dp .dp-prose--event > * + * {
	margin-top: 1.5rem;
}

.dp .dp-prose strong {
	color: var(--ds-ink);
}

.dp .dp-note {
	display: flex;
	gap: 0.75rem;
	margin-top: 2.5rem;
	padding: 1rem;
	border-radius: var(--ds-radius);
	background-color: rgba(252, 239, 207, 0.6);
	font-size: 0.875em;
	line-height: 1.71;
	color: var(--ds-ink-soft);
}

.dp-note > .dp-ico {
	margin-top: 0.25rem;
	color: var(--ds-primary);
}

/* Ticket card (blue, like the location info card) */
.dp .dp-ticket__label {
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.dp .dp-ticket__price {
	margin-top: 0.5rem;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.875em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ds-primary-foreground);
}

.dp .dp-ticket__price + .dp-ticket__stats {
	margin-top: 1rem;
}

.dp .dp-ticket__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: rgba(255, 255, 255, 0.8);
}

.dp-ticket__stats > span {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.dp-ticket__actions {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.dp-ticket__icons {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0.5rem;
}

.dp-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--ds-primary-foreground);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.dp-icon-btn:hover,
.dp-icon-btn:focus-visible {
	outline: none;
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--ds-primary-foreground);
}

/* "You may also like" */
.dp-related.dp-related--event {
	margin-top: 5rem;
}

.dp-related__all {
	flex-shrink: 0;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
	color: var(--ds-primary);
	text-decoration: none;
}

.dp-related__all:hover {
	color: var(--ds-primary);
	text-decoration: underline;
}

.dp .dp-tiles--event {
	gap: 2rem;
}

.dp-tile--event .dp-tile__media {
	aspect-ratio: 3 / 2;
}

.dp .dp-tile--event .dp-tile__title {
	font-size: 1.125em;
	line-height: 1.55;
}

.dp .dp-tile__sub {
	margin-top: 0.25rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}


/* ==========================================================================
   Trip page: resources/views/pages/trips/show.blade.php (+ assets/js/trip.js)
   Left column (40rem / 44rem) + sticky full-height map; on phones the map sits under the actions.
   ========================================================================== */

.tr-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.tr-main,
.tr-rest {
	min-width: 0;
}

.tr-map-col {
	position: relative;
	height: 22rem;
	background-color: var(--ds-muted);
}

@media (min-width: 1024px) {
	.tr-layout {
		grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
	}

	.tr-main {
		grid-column: 1;
		grid-row: 1;
	}

	.tr-rest {
		grid-column: 1;
		grid-row: 2;
	}

	.tr-main,
	.tr-rest {
		border-right: 1px solid var(--ds-border);
	}

	.tr-map-col {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: var(--tr-header, 80px);
		align-self: start;
		height: calc(100vh - var(--tr-header, 80px));
	}
}

@media (min-width: 1280px) {
	.tr-layout {
		grid-template-columns: minmax(0, 44rem) minmax(0, 1fr);
	}
}

/* Head: breadcrumbs, title, lead, author */
.tr-head {
	padding: 1.5rem 1.25rem 0;
}

@media (min-width: 640px) {
	.tr-head {
		padding-inline: 2rem;
	}
}

@media (min-width: 768px) {
	.tr-head {
		padding-top: 2rem;
	}
}

.tr-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875em;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}

.tr-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.tr-crumbs li + li::before {
	content: '';
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/chevron-right.svg) center / contain no-repeat;
	mask: url(../img/lucide/chevron-right.svg) center / contain no-repeat;
}

.tr-crumbs a {
	color: var(--ds-ink-soft);
	text-decoration: none;
}

.tr-crumbs a:hover {
	color: var(--ds-primary);
}

.dp .tr-title {
	margin: 1rem 0 0;
	font-size: 1.875em;
	font-weight: 600;
	line-height: 1.25;
}

@media (min-width: 768px) {
	.dp .tr-title {
		font-size: 2.25em;
	}
}

.tr-lead {
	margin-top: 1rem;
	font-size: 1em;
	line-height: 1.75;
	color: var(--ds-ink-soft);
}

.dp .tr-lead p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.dp .tr-lead p + p {
	margin-top: 0.75rem;
}

@media (min-width: 768px) {
	.tr-lead {
		font-size: 1.125em;
		line-height: 1.78;
	}
}

.dp .tr-author {
	margin-top: 1rem;
	font-size: 0.875em;
	color: var(--ds-ink-soft);
}

.tr-author a,
.tr-author strong {
	font-weight: 600;
	color: var(--ds-ink);
	text-decoration: none;
}

.tr-author a:hover {
	color: var(--ds-primary);
}

/* Stats: 3 cells with dividers */
.tr-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 1.75rem 0 0;
	border-block: 1px solid var(--ds-border);
}

.tr-stats > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	padding: 1rem 0.5rem;
	text-align: center;
}

.tr-stats > div + div {
	border-left: 1px solid var(--ds-border);
}

.tr-stats .dp-ico {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--ds-primary);
}

.tr-stats dt {
	font-size: 0.75em;
	font-weight: 400;
	line-height: 1.33;
	color: var(--ds-ink-soft);
}

.tr-stats dd {
	margin: 0;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-ink);
}

@media (min-width: 768px) {
	.tr-stats dd {
		font-size: 1.125em;
	}
}

/* Action bar (blue): "Поїхали!" + ghost buttons */
.tr-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background-color: var(--ds-primary);
}

@media (min-width: 640px) {
	.tr-actions {
		padding-inline: 2rem;
	}
}

.dp .tr-actions__go {
	width: auto;
}

/* Phones: "Поїхали!" across the bar, the other actions in two equal columns */
@media (max-width: 639px) {
	.tr-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dp .tr-actions__go {
		grid-column: 1 / -1;
		width: 100%;
	}

	.tr-actions .tr-action {
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.08);
	}
}

.tr-action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 36px;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background: none;
	color: var(--ds-primary-foreground);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.tr-action:hover,
.tr-action:focus-visible {
	outline: none;
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--ds-primary-foreground);
}

/* Map */
.tr-map {
	width: 100%;
	height: 100%;
}

.tr-modes {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: flex;
	padding: 0.25rem;
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card);
}

.tr-modes__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: var(--ds-radius-md);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	color: var(--ds-ink-soft);
	text-decoration: none;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.tr-modes__btn:hover {
	color: var(--ds-primary);
}

.tr-modes__btn.is-active {
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
}

.tr-modes__label {
	display: none;
}

@media (min-width: 640px) {
	.tr-modes__label {
		display: inline;
	}
}

/* Numbered markers (Lovable .trip-marker). The button is positioned by MapLibre (`transform` on every frame,
   never transitioned); the visible circle is the inner dot, which alone is enlarged on hover / when active. */
.trip-marker {
	display: block;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.trip-marker:hover,
.trip-marker.is-active {
	z-index: 2;
}

.trip-marker__dot {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border: 3px solid var(--ds-background);
	border-radius: var(--ds-radius-full);
	background: var(--ds-primary);
	color: var(--ds-primary-foreground);
	font-family: var(--ds-font-sans);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
	box-shadow: var(--ds-shadow-card);
	transition: transform 0.15s, background-color 0.15s, color 0.15s;
}

.trip-marker:hover .trip-marker__dot,
.trip-marker.is-active .trip-marker__dot {
	background: var(--ds-gold);
	color: var(--ds-ink);
	transform: scale(1.25);
}

.trip-marker:focus-visible {
	outline: none;
}

.trip-marker:focus-visible .trip-marker__dot {
	box-shadow: 0 0 0 2px var(--ds-primary), var(--ds-shadow-card);
}

/* Sections of the left column */
.tr-section {
	padding: 2rem 1.25rem;
	scroll-margin-top: 6rem;
}

@media (min-width: 640px) {
	.tr-section {
		padding-inline: 2rem;
	}
}

@media (min-width: 768px) {
	.tr-section {
		padding-block: 2.5rem;
	}
}

.tr-section--border {
	border-top: 1px solid var(--ds-border);
}

.dp .tr-h2 {
	margin: 0;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.dp .tr-h2 {
		font-size: 1.5em;
	}
}

.dp .tr-about {
	margin-top: 1rem;
	font-size: 1em;
	line-height: 1.75;
}

.dp .tr-about > * + * {
	margin-top: 1rem;
}

/* Reviews: the shared block without its own top spacing (the section has it) */
.dp .tr-reviews .dp-reviews {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	scroll-margin-top: 6rem;
}

.dp .dp-reviews__avg {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
	font-size: 0.875em;
	color: var(--ds-ink-soft);
}

.dp-reviews__avg .dp-ico {
	color: var(--ds-gold);
}

.dp-reviews__avg strong {
	font-weight: 600;
	color: var(--ds-ink);
}

/* Stops: number on a dashed line + card */
.dp .tr-stops {
	margin: 1.5rem 0 0;
	/* <ol>: no browser indent / numbers, the stops have their own number circles */
	padding: 0;
	list-style: none;
}

.tr-stop {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: 1rem;
	padding-bottom: 1rem;
}

.tr-stop:last-child {
	padding-bottom: 0;
}

.tr-stop:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 2.5rem;
	bottom: 0;
	left: 1.125rem;
	border-left: 2px dashed var(--ds-border);
	transform: translateX(-50%);
}

.tr-stop__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.tr-stop.is-active .tr-stop__num {
	background-color: var(--ds-gold);
	color: var(--ds-ink);
}

.tr-stop__card {
	display: flex;
	gap: 1rem;
	padding: 0.75rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	color: var(--ds-foreground);
	text-decoration: none;
	transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.tr-stop__card:hover {
	border-color: rgba(21, 54, 196, 0.4);
	color: var(--ds-foreground);
}

.tr-stop.is-active .tr-stop__card {
	border-color: var(--ds-primary);
	box-shadow: var(--ds-shadow-card);
}

.tr-stop__img {
	flex-shrink: 0;
	width: 6rem;
	height: 6rem;
	overflow: hidden;
	border-radius: var(--ds-radius-md);
}

.tr-stop__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 640px) {
	.tr-stop__img {
		width: 9rem;
		height: 7rem;
	}
}

/* Phones: narrower number column and card gaps, so the text next to the photo gets more room */
@media (max-width: 639px) {
	.tr-stop {
		grid-template-columns: 1.75rem minmax(0, 1fr);
		gap: 0.625rem;
	}

	.tr-stop:not(:last-child)::before {
		top: 2.25rem;
		left: 0.875rem;
	}

	.tr-stop__num {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.8125em;
	}

	.tr-stop__card {
		gap: 0.75rem;
		padding: 0.625rem;
	}

	.tr-stop__img {
		width: 5rem;
		height: 5rem;
	}
}

.tr-stop__body {
	min-width: 0;
	padding-block: 0.25rem;
}

.dp .tr-stop__cat {
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.33;
	color: var(--ds-primary);
}

.dp .tr-stop__title {
	margin: 0.25rem 0 0;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.375;
}

.dp .tr-stop__place {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	margin-top: 0.5rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}

.tr-stop__place .dp-ico {
	margin-top: 2px;
	color: var(--ds-gold);
}

/* Details panel over the left column (position set by trip.js) */
.tr-panel {
	position: fixed;
	bottom: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card-hover);
}

.tr-panel[hidden] {
	display: none !important;
}

.tr-panel__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid var(--ds-border);
}

.dp .tr-panel__title {
	min-width: 0;
	overflow: hidden;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ds-ink);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tr-panel__icon-btn {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-card);
	color: var(--ds-ink);
	cursor: pointer;
	transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.tr-panel__icon-btn::before {
	content: '';
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/arrow-left.svg) center / contain no-repeat;
	mask: url(../img/lucide/arrow-left.svg) center / contain no-repeat;
}

.tr-panel__prev::before {
	-webkit-mask-image: url(../img/lucide/chevron-left.svg);
	mask-image: url(../img/lucide/chevron-left.svg);
}

.tr-panel__next::before {
	-webkit-mask-image: url(../img/lucide/chevron-right.svg);
	mask-image: url(../img/lucide/chevron-right.svg);
}

.tr-panel__icon-btn:hover:not(:disabled),
.tr-panel__icon-btn:focus-visible {
	outline: none;
	border-color: var(--ds-primary);
	background-color: var(--ds-accent);
}

.tr-panel__icon-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.tr-panel__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tr-panel__loader {
	width: 2rem;
	height: 2rem;
	margin: 3rem auto;
	border: 3px solid var(--ds-border);
	border-top-color: var(--ds-primary);
	border-radius: var(--ds-radius-full);
	animation: tr-spin 0.8s linear infinite;
}

.tr-panel__loader[hidden] {
	display: none;
}

@keyframes tr-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Photos: one 3:2 photo, several scroll sideways */
.tr-panel__photos {
	display: flex;
	gap: 0.5rem;
	padding: 1.25rem 1.25rem 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* snap photos to the padded edge, not to the very edge of the strip */
	scroll-padding-inline: 1.25rem;
	overscroll-behavior-x: contain;
}

.tr-panel__photo {
	flex: 0 0 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
	scroll-snap-align: start;
}

.tr-panel__photos--many .tr-panel__photo {
	flex-basis: 88%;
}

.tr-panel__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tr-panel__content {
	padding: 1.25rem;
}

.dp .tr-panel__name {
	margin: 0.75rem 0 0;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.25;
}

.tr-panel__content > .tr-panel__name:first-child {
	margin-top: 0;
}

.dp .tr-panel__desc {
	margin-top: 0.75rem;
	font-size: 1em;
	line-height: 1.75;
}

.tr-panel__info {
	display: grid;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ds-border);
}

.tr-panel__info > div {
	display: flex;
	gap: 0.75rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: var(--ds-ink);
}

.tr-panel__info .dp-ico {
	margin-top: 2px;
	color: var(--ds-primary);
}

.tr-panel__info dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.tr-panel__info a {
	color: var(--ds-primary);
}

.dp .tr-panel__more {
	margin-top: 1.5rem;
}

@media (max-width: 639px) {
	.dp .tr-panel__more {
		width: 100%;
	}
}

.tr-panel__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--ds-border);
	font-size: 0.875em;
	font-weight: 600;
	color: var(--ds-ink-soft);
}

.tr-panel__arrows {
	display: flex;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.tr-panel__head,
	.tr-panel__content,
	.tr-panel__nav,
	.tr-panel__photos {
		padding-inline: 2rem;
	}

	.tr-panel__photos {
		scroll-padding-inline: 2rem;
	}
}

/* "Схожі маршрути" under the split layout: shared trip cards (components.css), 1 / 2 / 3 columns */
.tr-related {
	padding-bottom: 3rem;
}

@media (min-width: 768px) {
	.tr-related {
		padding-bottom: 4rem;
	}
}

.tr-related__list {
	display: grid;
	gap: 2rem 1.25rem;
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.tr-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.tr-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Several phones in the trip panel: one per line */
.tr-panel__phones {
	display: grid;
	gap: 0.25rem;
}


/* ==========================================================================
   Guide page: resources/views/pages/guides/show.blade.php
   Top bar, header band (photo + name + facts), content + sticky dark contact card.
   ========================================================================== */

.gp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
}

@media (min-width: 768px) {
	.gp-topbar {
		padding-block: 1.75rem;
	}
}

.gp-topbar__actions {
	display: flex;
	gap: 0.25rem;
}

.gp-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 36px;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background: none;
	color: var(--ds-ink-soft);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.gp-ghost:hover,
.gp-ghost:focus-visible {
	outline: none;
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

.gp-ghost.dp-save.in-wishlist {
	color: var(--ds-primary);
}

/* Phones: icon-only buttons (Lovable hidden sm:inline); from 640px the save label toggles as everywhere (.dp-save) */
@media (max-width: 639px) {
	.gp-ghost .gp-ghost__label {
		display: none !important;
	}
}

/* Header band */
.gp-head {
	border-block: 1px solid var(--ds-border);
	background-color: var(--ds-surface);
}

.gp-head__grid {
	display: grid;
	align-items: center;
	gap: 1.75rem;
	padding-block: 2.25rem;
}

@media (min-width: 768px) {
	.gp-head__grid {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 3rem;
		padding-block: 3rem;
	}
}

.gp-head__photo {
	width: 12rem;
	height: 12rem;
	margin-inline: auto;
	overflow: hidden;
	border: 4px solid var(--ds-background);
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card);
}

@media (min-width: 768px) {
	.gp-head__photo {
		width: 15rem;
		height: 15rem;
	}
}

.gp-head__photo picture,
.gp-head__photo img {
	display: block;
	width: 100%;
	height: 100%;
}

.gp-head__photo img {
	object-fit: cover;
}

.gp-head__body {
	min-width: 0;
}

.dp .gp-title {
	margin: 0;
	font-size: 1.875em;
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.dp .gp-title {
		font-size: 3em;
		line-height: 1.1;
	}
}

.gp-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}

.gp-head__place {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}

.gp-head__place .dp-ico {
	color: var(--ds-primary);
}

.dp .gp-motto {
	max-width: 42rem;
	margin-top: 1.25rem;
	padding-left: 1.25rem;
	border-left: 2px solid var(--ds-gold);
	font-size: 1.125em;
	line-height: 1.78;
	color: var(--ds-ink-soft);
}

.gp-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: 1.5rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: var(--ds-ink-soft);
}

.gp-facts > span,
.gp-facts > a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.gp-facts .dp-ico {
	color: var(--ds-primary);
}

.gp-facts .dp-ico--star-filled {
	color: var(--ds-gold);
}

.gp-facts__reviews {
	color: var(--ds-ink-soft);
	text-decoration: none;
	transition: color var(--ds-transition);
}

.gp-facts__reviews:hover {
	color: var(--ds-primary);
}

/* Content + contact card; on phones the card comes first */
.gp-layout {
	display: grid;
	align-items: start;
	gap: 2.5rem;
	padding-block: 3rem;
}

@media (min-width: 768px) {
	.gp-layout {
		padding-block: 4rem;
	}
}

.gp-main {
	min-width: 0;
}

.gp-side > :not(.gp-contact) {
	margin-top: 1.5rem;
}

@media (min-width: 1024px) {
	.gp-layout {
		grid-template-columns: minmax(0, 1fr) 21rem;
		gap: 4rem;
	}

	.gp-main {
		grid-column: 1;
		grid-row: 1;
	}

	.gp-side {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: 6rem;
	}
}

.gp-contact {
	padding: 1.5rem;
	border-radius: var(--ds-radius);
	background-color: var(--ds-ink);
	color: var(--ds-primary-foreground);
}

@media (min-width: 768px) {
	.gp-contact {
		padding: 1.75rem;
	}
}

.dp .gp-contact__eyebrow {
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
	color: var(--ds-gold);
}

.dp .gp-contact__title {
	margin: 0.75rem 0 0;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.33;
	color: var(--ds-primary-foreground);
}

.gp-contact__price {
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--ds-radius-md);
	background-color: rgba(255, 255, 255, 0.1);
}

.dp .gp-contact__price-label {
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.dp .gp-contact__price-value {
	margin-top: 0.25rem;
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.55;
	color: var(--ds-primary-foreground);
}

.gp-contact__list {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.gp-contact__list a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1em;
	line-height: 1.5;
	color: var(--ds-primary-foreground);
	text-decoration: none;
	transition: color var(--ds-transition);
}

.gp-contact__list a.gp-contact__small {
	align-items: flex-start;
	font-size: 0.875em;
}

.gp-contact__list a:hover {
	color: var(--ds-gold);
}

.gp-contact__list .dp-ico {
	color: var(--ds-gold);
}

.gp-contact__small .dp-ico {
	margin-top: 0.2em;
}

.gp-contact__break {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Sections of the main column */
.gp-section + .gp-section {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--ds-border);
}

.dp .gp-prose {
	margin-top: 1rem;
	font-size: 1em;
	line-height: 1.625;
}

.dp .gp-prose > * + * {
	margin-top: 1rem;
}

/* Bio with its own sections (<h2>/<h3> "Про себе", "Я вам покажу" in one field): headings look like the page's
   section titles, every section after the first is separated by a line, as in Lovable */
.dp .gp-prose--sections {
	margin-top: 0;
}

.dp .gp-prose--sections h2,
.dp .gp-prose--sections h3 {
	margin: 0;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.33;
	color: var(--ds-ink);
}

.dp .gp-prose--sections > :is(h2, h3):not(:first-child) {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--ds-border);
}

.dp .gp-prose--sections > :is(h2, h3) + * {
	margin-top: 1rem;
}

@media (min-width: 768px) {
	.dp .gp-prose--sections h2,
	.dp .gp-prose--sections h3 {
		font-size: 1.875em;
		line-height: 1.2;
	}
}

/* Gallery: square thumbnails, open in the shared lightbox */
.gp-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 1.25rem;
}

@media (min-width: 640px) {
	.gp-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gp-gallery__item {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
}

.gp-gallery__item picture,
.gp-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
}

.gp-gallery__item img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.gp-gallery__item:hover img {
	transform: scale(1.04);
}

/* Reviews: the shared block, spacing comes from .gp-section */
.dp .gp-reviews .dp-reviews {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	scroll-margin-top: 6rem;
}

.gp-section + .gp-reviews {
	scroll-margin-top: 6rem;
}

/* "Інші гіди" before the newsletter. No top margin of its own: the content above already ends with
   .gp-layout's bottom padding (3rem / 4rem), the usual dp-related 5–6rem on top of it was a double gap */
.dp-related.gp-related {
	margin-top: 0;
}

.gp-related {
	padding-bottom: 3rem;
}

@media (min-width: 768px) {
	.gp-related {
		padding-bottom: 4rem;
	}
}


/* ==========================================================================
   Tour page: resources/views/pages/tours/show.blade.php
   Reuses the guide page's top bar, layout and dark card (gp-*); tour-specific parts below.
   ========================================================================== */

/* Hero: photo + place / title / tags / coordinator */
.to-hero {
	display: grid;
	gap: 2rem;
	padding-bottom: 3rem;
}

@media (min-width: 1024px) {
	.to-hero {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 3rem;
	}
}

.to-hero__photo {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
}

.to-hero__photo picture,
.to-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
}

.to-hero__photo img {
	object-fit: cover;
}

.to-hero__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dp .to-hero__place {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
	color: var(--ds-primary);
}

.dp .to-title {
	margin: 0.75rem 0 0;
	font-size: 1.875em;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.dp .to-title {
		font-size: 2.25em;
	}
}

.to-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.to-coord {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	color: var(--ds-foreground);
	text-decoration: none;
}

@media (min-width: 1024px) {
	.to-coord {
		margin-top: 2rem;
	}
}

.to-coord__logo {
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0.25rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-background);
	object-fit: contain;
}

.to-coord__label {
	display: block;
	font-size: 0.75em;
	line-height: 1.33;
	color: var(--ds-ink-soft);
}

.to-coord__name {
	display: block;
	margin-top: 0.125rem;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ds-ink);
	transition: color var(--ds-transition);
}

.to-coord:hover .to-coord__name {
	color: var(--ds-primary);
}

/* Content + booking card */
.to-body {
	border-top: 1px solid var(--ds-border);
}

/* The content block ends with its own padding, and other tours / reviews follow (not the newsletter), so the
   article's bottom space would double it */
.dp.to-page > article {
	padding-bottom: 0;
}

.dp .to-from {
	margin-right: 0.375rem;
	font-size: 0.875em;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
}

/* Lovable: all facts in the card in small text */
.to-facts > a,
.to-facts > span {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875em;
	line-height: 1.43;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.to-facts > .gp-contact__small {
	align-items: flex-start;
}

.to-facts > a:hover {
	color: var(--ds-gold);
}

.to-facts .dp-ico {
	color: var(--ds-gold);
}

.dp .to-book {
	margin-top: 1.5rem;
}

/* Photos under "Про тур" */
.to-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 2rem;
}

@media (min-width: 768px) {
	.to-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.to-gallery__item {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
}

.to-gallery__item picture,
.to-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
}

.to-gallery__item img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.to-gallery__item:hover img {
	transform: scale(1.03);
}

/* "Локації туру": start point + numbered route points */
.dp .to-start {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.25rem;
	font-size: 1em;
	line-height: 1.75;
	color: var(--ds-ink-soft);
}

.to-start .dp-ico {
	margin-top: 0.35em;
	color: var(--ds-primary);
}

.to-start strong {
	font-weight: 600;
	color: var(--ds-ink);
}

.to-start a {
	color: var(--ds-primary);
}

.dp .to-points {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.to-points li {
	display: flex;
	gap: 0.75rem;
	font-size: 1em;
	line-height: 1.75;
	color: var(--ds-ink-soft);
}

.to-points li + li {
	margin-top: 0.75rem;
}

.to-points__num {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.125rem;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	font-size: 0.75em;
	font-weight: 600;
}

/* Dates */
.dp .to-dates {
	display: grid;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.to-dates__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
}

.to-dates__day {
	font-size: 0.9375em;
	font-weight: 600;
	color: var(--ds-ink);
}

.to-dates__times {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.to-dates__time {
	padding: 0.125rem 0.625rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-card);
	font-size: 0.8125em;
	color: var(--ds-foreground);
}

.to-guide {
	max-width: 24rem;
	margin-top: 1.25rem;
}

/* "Інші тури від …" on the surface band, then reviews */
.to-related {
	padding-block: 3rem;
	border-top: 1px solid var(--ds-border);
	background-color: var(--ds-surface);
}

.to-reviews {
	padding-block: 3rem;
}

@media (min-width: 768px) {
	.to-related,
	.to-reviews {
		padding-block: 4rem;
	}
}

.dp .to-reviews .dp-reviews {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	scroll-margin-top: 6rem;
}

/* Booking modal: same look as the share / login popups */
.bk-modal {
	position: fixed;
	inset: 0;
	z-index: 1500;
	display: flex;
	padding: 1.25rem;
	overflow-y: auto;
	background: rgba(18, 32, 70, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.bk-modal[hidden] {
	display: none;
}

.bk-modal__card {
	position: relative;
	width: 100%;
	max-width: 32rem;
	margin: auto;
	padding: 2rem;
	border-radius: var(--ds-radius-xl);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card-hover);
}

@media (max-width: 575px) {
	.bk-modal__card {
		padding: 1.5rem;
	}
}

.dp .bk-modal__title {
	padding-right: 2.5rem;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.33;
	color: var(--ds-ink);
}

.dp .bk-modal__lead {
	margin-top: 0.5rem;
	font-size: 0.9375em;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

.bk-form {
	display: grid;
	gap: 0.875rem;
	margin-top: 1.25rem;
}

.bk-field {
	display: grid;
	gap: 0.375rem;
	margin: 0;
}

.bk-field[hidden] {
	display: none;
}

.bk-field > span {
	font-size: 0.875em;
	font-weight: 500;
	color: var(--ds-foreground);
}

.bk-field input,
.bk-field select,
.bk-field textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-card);
	font-family: var(--ds-font-sans);
	font-size: 1em;
	line-height: 1.5;
	color: var(--ds-foreground);
	transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.bk-field textarea {
	resize: vertical;
}

.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
	outline: none;
	border-color: var(--ds-primary);
	box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

.dp .bk-message {
	padding: 0.75rem 1rem;
	border-radius: var(--ds-radius-md);
	background-color: #e8f5ec;
	font-size: 0.875em;
	color: #1d6b38;
}

.dp .bk-message.is-error {
	background-color: #fdecec;
	color: #a1131a;
}

.dp .bk-message[hidden] {
	display: none;
}

.dp .bk-submit {
	width: 100%;
	min-height: 44px;
	font-size: 0.9375em;
	font-weight: 600;
}

/* "У вартість включено / не входить / Додатково оплачується" lists inside the description (mark_tour_lists helper):
   heading + round marker per item, as in Lovable */
.dp .dp-prose .to-incl__title {
	font-size: 1.125em;
	line-height: 1.55;
}

.dp .dp-prose > .to-incl__title:not(:first-child) {
	margin-top: 2.5rem;
}

.dp .dp-prose > .to-incl__title + .to-incl {
	margin-top: 1rem;
}

.dp .dp-prose ul.to-incl {
	padding-left: 0;
	list-style: none;
}

.dp .dp-prose .to-incl li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.75;
	color: var(--ds-foreground);
}

.dp .dp-prose .to-incl li + li {
	margin-top: 0.75rem;
}

.to-incl li::before,
.to-incl li::after {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 1.25rem;
	height: 1.25rem;
}

.to-incl li::before {
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-accent);
}

.to-incl li::after {
	background-color: var(--ds-primary);
	-webkit-mask: var(--to-mark) center / 0.75rem no-repeat;
	mask: var(--to-mark) center / 0.75rem no-repeat;
}

.to-incl--yes li { --to-mark: url(../img/lucide/check.svg); }
.to-incl--no li { --to-mark: url(../img/lucide/x.svg); }

.to-incl--no li::before {
	background-color: var(--ds-muted);
}

.to-incl--no li::after {
	background-color: var(--ds-ink-soft);
}

.to-incl--extra li::before {
	background-color: rgba(236, 196, 88, 0.25);
}

.to-incl--extra li::after {
	content: "+";
	display: grid;
	place-items: center;
	background: none;
	-webkit-mask: none;
	mask: none;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	color: var(--ds-foreground);
}

/* "Тур підходить для: …" */
.dp .dp-prose .to-suits {
	padding: 1.25rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
	font-size: 0.875em;
	line-height: 1.7;
	color: var(--ds-foreground);
}

.to-suits__label {
	font-weight: 600;
}

/* Numbered lists in the tour description: number in a blue circle, like "Локації туру" (to-points) */
.dp .to-body .dp-prose ol {
	padding-left: 0;
	list-style: none;
	counter-reset: dp-ol;
}

.dp .to-body .dp-prose ol[start] {
	counter-reset: dp-ol calc(attr(start integer, 1) - 1);
}

.dp .to-body .dp-prose ol > li {
	position: relative;
	padding-left: 2.25rem;
	counter-increment: dp-ol;
}

.dp .to-body .dp-prose ol > li + li {
	margin-top: 0.75rem;
}

.dp .to-body .dp-prose ol > li::before {
	content: counter(dp-ol);
	position: absolute;
	top: 0.25em;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1;
}


/* ==========================================================================
   Article page: resources/views/pages/blog/show.blade.php (cards: bl-* in catalog.css)
   Top bar, ad, rubric + title + meta, cover, sticky "Зміст" + text, comments, latest articles
   ========================================================================== */

.ar-page .bl-ad {
	margin-block: 0 0.5rem;
}

.ar-head {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.ar-head {
		padding-top: 2rem;
		padding-bottom: 2.5rem;
	}
}

.dp .ar-head__rubric {
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
	color: var(--ds-primary);
	text-decoration: none;
}

.dp .ar-head__rubric:hover {
	text-decoration: underline;
}

.dp .ar-head__title {
	max-width: 64rem;
	margin: 1rem 0 0;
	font-family: var(--ds-font-display);
	font-size: 1.875em;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: var(--ds-heading-tracking);
	color: var(--ds-ink);
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.dp .ar-head__title {
		font-size: 3em;
		line-height: 1.15;
	}
}

.ar-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: 1.5rem;
	font-size: 0.75em;
	line-height: 1.33;
	color: var(--ds-ink-soft);
}

@media (min-width: 768px) {
	.ar-meta {
		font-size: 0.875em;
	}
}

.ar-meta__author {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	color: var(--ds-ink);
}

.ar-meta__avatar {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	overflow: hidden;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-surface);
	font-size: 0.875em;
	font-weight: 600;
	color: var(--ds-primary);
}

.ar-meta__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ar-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.dp .ar-meta__link {
	color: inherit;
	text-decoration: none;
}

.dp .ar-meta__link:hover {
	color: var(--ds-primary);
}

/* Cover photo */
.ar-cover {
	margin-block: 0;
}

.ar-cover__frame {
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-muted);
}

.ar-cover__frame picture,
.ar-cover__frame img {
	display: block;
	width: 100%;
}

.ar-cover__frame img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* "Зміст" (sticky on wide screens) + text */
.ar-layout {
	display: grid;
	align-items: start;
	gap: 2.5rem;
	margin-top: 2.25rem;
}

@media (min-width: 1024px) {
	.ar-layout {
		grid-template-columns: 280px minmax(0, 1fr);
		margin-top: 3rem;
	}

	.ar-layout--no-toc {
		grid-template-columns: minmax(0, 52rem);
		justify-content: center;
	}

	.ar-toc {
		position: sticky;
		top: 6rem;
	}
}

@media (min-width: 1280px) {
	.ar-layout {
		gap: 4rem;
	}
}

.ar-toc {
	min-width: 0;
}

.ar-toc nav {
	padding-block: 1.25rem;
	border-block: 1px solid var(--ds-border);
}

.dp .ar-toc__title {
	font-family: var(--ds-font-display);
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ds-ink);
}

.dp .ar-toc__list {
	display: grid;
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.dp .ar-toc__list {
		max-height: calc(100dvh - 12rem);
		padding-right: 0.75rem;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.dp .ar-toc__list a {
	display: block;
	font-size: 1em;
	line-height: 1.625;
	color: var(--ds-ink-soft);
	text-decoration: none;
	transition: color var(--ds-transition);
}

@media (min-width: 1024px) {
	.dp .ar-toc__list a {
		font-size: 1.125em;
	}
}

.dp .ar-toc__list a:hover {
	color: var(--ds-primary);
}

.ar-main {
	min-width: 0;
}

/* Article text: 1.5rem between blocks, larger type from 768px */
.dp .ar-prose {
	font-size: 1em;
	line-height: 1.625;
	color: var(--ds-ink);
	overflow-wrap: break-word;
}

@media (min-width: 768px) {
	.dp .ar-prose {
		font-size: 1.125em;
		line-height: 1.78;
	}
}

.dp .ar-prose > * {
	margin: 0;
}

.dp .ar-prose > * + * {
	margin-top: 1.5rem;
}

.dp .ar-prose p,
.dp .ar-prose li {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.dp .ar-prose .ar-prose__lead {
	font-weight: 500;
}

.dp .ar-prose h2 {
	padding-top: 0.5rem;
	font-family: var(--ds-font-display);
	font-size: 1.22em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--ds-heading-tracking);
	color: var(--ds-ink);
	scroll-margin-top: 7rem;
}

@media (min-width: 768px) {
	.dp .ar-prose h2 {
		font-size: 1.33em;
	}
}

.dp .ar-prose h3,
.dp .ar-prose h4 {
	padding-top: 0.75rem;
	font-family: var(--ds-font-display);
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ds-ink);
}

@media (min-width: 768px) {
	.dp .ar-prose h3,
	.dp .ar-prose h4 {
		font-size: 1.11em;
	}
}

.dp .ar-prose a {
	color: var(--ds-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dp .ar-prose strong,
.dp .ar-prose b {
	font-weight: 600;
}

.dp .ar-prose ul,
.dp .ar-prose ol {
	padding-left: 1.5rem;
}

.dp .ar-prose ul {
	list-style: disc;
}

.dp .ar-prose ol {
	list-style: decimal;
}

.dp .ar-prose li + li {
	margin-top: 0.25rem;
}

.dp .ar-prose li::marker {
	color: var(--ds-primary);
}

.dp .ar-prose ol > li::marker {
	font-weight: 600;
}

.dp .ar-prose blockquote {
	margin-block: 2rem;
	padding: 1.5rem;
	border-left: 4px solid var(--ds-gold);
	background-color: var(--ds-surface);
	font-style: normal;
}

.dp .ar-prose blockquote > * + * {
	margin-top: 0.75rem;
}

.dp .ar-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ds-radius);
}

.dp .ar-prose figure {
	margin-block: 2rem;
}

.dp .ar-prose figcaption {
	margin-top: 0.5rem;
	font-size: 0.667em;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

.dp .ar-prose iframe {
	max-width: 100%;
	border: 0;
	border-radius: var(--ds-radius);
}

/* Tables: framed, scroll sideways on phones */
.dp .ar-prose .ar-table {
	max-width: 100%;
	margin-block: 2rem;
	overflow-x: auto;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

.dp .ar-table table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 0.78em;
	line-height: 1.6;
	text-align: left;
}

.dp .ar-table th,
.dp .ar-table td {
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--ds-border);
	vertical-align: top;
}

.dp .ar-table tr:first-child > * {
	border-top: 0;
}

.dp .ar-table th,
.dp .ar-table thead td {
	background-color: var(--ds-surface);
	font-weight: 600;
	color: var(--ds-ink);
}

/* Shortcodes inside the text (base look: style.css "Shortcode: gallery-*"): in an article a single photo is cropped
   16:10, a photo plate is 2 columns with the first photo across (Lovable "Карпати у фотографіях") */
.dp .ar-prose .gallery-image__frame img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.dp .ar-prose .gallery-image__caption,
.dp .ar-prose .gallery-plate__caption {
	font-size: 0.667em;
}

.dp .ar-prose .gallery-plate {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 0.75rem;
}

.dp .ar-prose .gallery-plate__item:first-child {
	grid-column: 1 / -1;
}

.dp .ar-prose .gallery-plate__item:first-child .gallery-plate__thumb {
	aspect-ratio: 16 / 10;
}

.dp .ar-prose .video-container {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-block: 2rem;
	overflow: hidden;
	border-radius: var(--ds-radius);
}

.dp .ar-prose .video-container iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Photos of the post (admin gallery) under the text */
.ar-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 2rem;
}

.ar-gallery__item {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-muted);
}

.ar-gallery__item--wide {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}

.ar-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ar-gallery__item:hover img {
	transform: scale(1.025);
}

/* Comments: the shared reviews block without stars */
.dp .ar-comments .dp-reviews {
	margin-top: 3.5rem;
	scroll-margin-top: 6rem;
}

/* Latest articles */
.ar-latest {
	margin-top: 4rem;
	padding-top: 2.5rem;
	padding-bottom: 3rem;
	border-top: 1px solid var(--ds-border);
}

@media (min-width: 768px) {
	.ar-latest {
		padding-bottom: 4rem;
	}
}

.ar-latest__grid {
	margin-top: 2rem;
}

/* "Останні статті" brings its own top space */
.dp.ar-page > article.ar-article--with-latest {
	padding-bottom: 0;
}


/* ---------- Article with a map ("Стаття з картою", pages/blog/show-map): new look of the old layout ---------- */

/* Marker popup */
.ar-map-popup img {
	display: block;
	width: 100%;
	height: 7rem;
	margin-bottom: 0.625rem;
	border-radius: var(--ds-radius-md);
	object-fit: cover;
}

.ds .ar-map-popup__title {
	margin: 0;
	font-family: var(--ds-font-display);
	font-size: 0.9375em;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ds-ink);
}

.ds .ar-map-popup__address {
	margin: 0.25rem 0 0;
	font-size: 0.8125em;
	line-height: 1.45;
	color: var(--ds-ink-soft);
}

.ds .ar-map-popup__link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--ds-primary);
}

.bm-page .maplibregl-popup-content {
	padding: 0.75rem;
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow-card-hover);
	font-family: var(--ds-font-sans);
}

/* [location ID] card inside article text: photo + name/address, actions below; number = marker number */
.dp .ar-prose .location-card {
	position: relative;
	margin-block: 1.75rem;
	padding: 0.75rem;
	overflow: visible;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: none;
	transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.dp .ar-prose .location-card.is-active {
	border-color: var(--ds-primary);
	box-shadow: var(--ds-shadow-card);
}

.dp .ar-prose .location-card .location-card__media {
	display: flex;
	align-items: center;
	gap: 1rem;
	aspect-ratio: auto;
	overflow: visible;
	color: var(--ds-ink);
	text-decoration: none;
}

.dp .ar-prose .location-card .location-card__media picture,
.dp .ar-prose .location-card .location-card__media > img {
	flex-shrink: 0;
	width: 6.5rem;
	height: 5rem;
}

.dp .ar-prose .location-card .location-card__media img {
	width: 100%;
	height: 100%;
	border-radius: var(--ds-radius-md);
	object-fit: cover;
}

@media (min-width: 640px) {
	.dp .ar-prose .location-card .location-card__media picture,
	.dp .ar-prose .location-card .location-card__media > img {
		width: 9rem;
		height: 6.5rem;
	}
}

.dp .ar-prose .location-card .location-card__overlay {
	position: static;
	min-width: 0;
	padding: 0;
	background: none;
	color: inherit;
}

.dp .ar-prose .location-card .location-card__overlay .location-card__title {
	margin: 0;
	font-family: var(--ds-font-display);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ds-ink);
	transition: color var(--ds-transition);
}

.dp .ar-prose .location-card .location-card__media:hover .location-card__title {
	color: var(--ds-primary);
}

.dp .ar-prose .location-card .location-card__overlay .location-card__address {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	margin-top: 0.375rem;
	font-size: 0.8125em;
	line-height: 1.45;
	color: var(--ds-ink-soft);
	opacity: 1;
}

.dp .ar-prose .location-card .location-card__overlay .location-card__address::before {
	width: 14px;
	min-width: 14px;
	height: 14px;
	margin: 0.15em 0 0;
	background: var(--ds-gold);
	-webkit-mask: url(../img/lucide/map-pin.svg) center / contain no-repeat;
	mask: url(../img/lucide/map-pin.svg) center / contain no-repeat;
}

.dp .ar-prose .location-card .location-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--ds-border);
}

.dp .ar-prose .location-card .location-card__actions .location-card__btn {
	flex: 0 0 auto;
	gap: 0.375rem;
	min-height: 36px;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-card);
	font-size: 0.78em;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ds-foreground);
	text-decoration: none;
}

.dp .ar-prose .location-card .location-card__actions .location-card__btn::before {
	width: 15px;
	min-width: 15px;
	height: 15px;
	margin: 0;
	background-color: var(--ds-primary);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.dp .ar-prose .location-card .location-card__actions .location-card__btn--route::before {
	-webkit-mask-image: url(../img/lucide/navigation.svg);
	mask-image: url(../img/lucide/navigation.svg);
}

.dp .ar-prose .location-card .location-card__actions .location-card__btn--share::before {
	-webkit-mask-image: url(../img/lucide/share-2.svg);
	mask-image: url(../img/lucide/share-2.svg);
}

.dp .ar-prose .location-card .location-card__actions .location-card__btn--map::before {
	-webkit-mask-image: url(../img/lucide/map-pin.svg);
	mask-image: url(../img/lucide/map-pin.svg);
}

.dp .ar-prose .location-card .location-card__actions .location-card__btn:hover {
	border-color: var(--ds-primary);
	background-color: var(--ds-card);
	color: var(--ds-primary);
}

.dp .ar-prose .location-card .location-card__actions .location-card__btn:hover::before {
	background-color: var(--ds-primary);
}

/* Phones: the three actions share the row */
@media (max-width: 639px) {
	.dp .ar-prose .location-card .location-card__actions {
		gap: 0.375rem;
	}

	.dp .ar-prose .location-card .location-card__actions .location-card__btn {
		flex: 1 1 auto;
		justify-content: center;
		gap: 0.25rem;
		padding-inline: 0.5rem;
		white-space: nowrap;
	}
}

.ar-prose--map .location-card {
	margin-left: 0.875rem;
}

.location-card__num {
	position: absolute;
	top: -0.75rem;
	left: -0.875rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 2px solid var(--ds-card);
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.location-card.is-active .location-card__num {
	background-color: var(--ds-gold);
	color: var(--ds-ink);
}

/* Map article: the old layout (style.css .blog-map*) with the new design on top */

/* Cover: darker veil for legibility, label / title / meta in the new type */
.bm-page .blog-map__head .blog-map__head-caption {
	background: linear-gradient(180deg, rgba(18, 32, 70, 0.35) 0%, rgba(18, 32, 70, 0.55) 60%, rgba(18, 32, 70, 0.75) 100%);
}

.bm-page .blog-map__head .blog-map__head-wrap {
	min-height: calc(100svh - 64px);
	padding-inline: var(--ds-gutter, 1rem);
}

@media (min-width: 992px) {
	.bm-page .blog-map__head .blog-map__head-wrap {
		min-height: calc(100svh - 80px);
	}
}

.bm-page .blog-map__head .blog-map__head-wrap .tag-wrap {
	margin-bottom: 1.25rem;
}

.bm-page .blog-map__head .blog-map__head-wrap .tag-wrap .tag-link {
	padding: 0.375rem 0.875rem;
	border-radius: var(--ds-radius-full);
	background-color: rgba(255, 255, 255, 0.92);
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
	color: var(--ds-primary);
	transition: background-color var(--ds-transition);
}

.bm-page .blog-map__head .blog-map__head-wrap .tag-wrap .tag-link:hover {
	background-color: #fff;
}

.bm-page .blog-map__head .blog-map__head-wrap .blog-map__title {
	max-width: 56rem;
	font-family: var(--ds-font-display);
	font-size: 2.25em;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: var(--ds-heading-tracking);
	color: #fff;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.bm-page .blog-map__head .blog-map__head-wrap .blog-map__title {
		font-size: 3.5em;
	}
}

.bm-page .blog-map__head .blog-map__head-wrap .meta {
	gap: 0.75rem 1.5rem;
	max-width: none;
	margin-top: 1.25rem;
	padding: 0;
	font-size: 0.875em;
	line-height: 1.43;
	color: rgba(255, 255, 255, 0.85);
}

.bm-views {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.bm-page .blog-map__head .blog-map__head-wrap .go-to-content {
	bottom: 1.5rem;
	width: 2.75rem;
	min-width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--ds-radius-full);
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color var(--ds-transition);
}

.bm-page .blog-map__head .blog-map__head-wrap .go-to-content::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #fff;
	-webkit-mask: url(../img/lucide/chevron-down.svg) center / 1.25rem no-repeat;
	mask: url(../img/lucide/chevron-down.svg) center / 1.25rem no-repeat;
}

.bm-page .blog-map__head .blog-map__head-wrap .go-to-content:hover {
	background-color: rgba(255, 255, 255, 0.28);
}

/* Text column */
.bm-page .blog-map__layout .blog-map__content .blog-map__article {
	padding: 2.5rem 1.25rem 4rem;
	background-color: var(--ds-background);
}

@media (min-width: 801px) {
	.bm-page .blog-map__layout .blog-map__content .blog-map__article {
		padding: 3rem 2.5rem 5rem;
	}
}

.bm-page .blog-map__article > .bl-ad {
	margin-block: 0 2.5rem;
}

/* Map: right part of the screen under the site header; on phones it slides over the text */
.bm-page .blog-map__layout .blog-map__aside {
	top: 64px;
}

@media (min-width: 992px) {
	.bm-page .blog-map__layout .blog-map__aside {
		top: 80px;
	}
}

.bm-page .blog-map__layout .blog-map__aside .blog-map__sticky {
	border-left: 1px solid var(--ds-border);
	background-color: var(--ds-surface);
}

@media (max-width: 800px) {
	.bm-page .blog-map__layout .blog-map__aside {
		bottom: 4rem;
		transition: right 0.3s ease;
	}

	.bm-page .blog-map__layout .blog-map__aside .blog-map__sticky {
		border-left: 0;
	}
}

/* "Читати / Показати на карті" (phones): bar at the bottom of the screen */
.bm-switcher.map-wrap-switcher {
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--ds-border);
	background-color: var(--ds-card);
	box-shadow: 0 -8px 24px -16px rgba(25, 32, 45, 0.35);
}

@media (max-width: 800px) {
	.bm-switcher.map-wrap-switcher {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}
}

.bm-switcher > button {
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-card);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 600;
	color: var(--ds-foreground);
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition), border-color var(--ds-transition);
}

.bm-switcher > button.active {
	border-color: var(--ds-primary);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
}

/* the bar must not cover the end of the text */
@media (max-width: 800px) {
	.bm-page .blog-map__layout .blog-map__content .blog-map__article {
		padding-bottom: 6rem;
	}
}

/* the "up" button sits above the switcher bar */
@media (max-width: 800px) {
	body:has(.bm-switcher) .scroll-top-btn {
		bottom: 5rem;
	}
}


/* ==========================================================================
   Virtual tour of a region: pages/virtual-tours/show (Lovable, vtp-*) and show-classic (old layout, vtc-*);
   switching places: assets/js/virtual-tour.js
   ========================================================================== */

/* ---------- Lovable: dark header (list hero without the list min-height) ---------- */
.ct-hero.ct-hero--detail {
	min-height: 0;
	justify-content: flex-start;
	padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
	.ct-hero.ct-hero--detail {
		min-height: 0;
		padding-bottom: 3.5rem;
	}
}

.ds .vtp-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color var(--ds-transition);
}

.ds .vtp-back:hover {
	color: #fff;
}

.vtp-back__icon {
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/arrow-left.svg) center / contain no-repeat;
	mask: url(../img/lucide/arrow-left.svg) center / contain no-repeat;
}

.ds .vtp-eyebrow {
	margin-top: 1.5rem;
}

/* the page is .dp (detail styles), whose "p { margin: 0 }" would drop the list hero's space above the lead */
.vtp-page .ct-hero__lead {
	margin-top: 1rem;
}

.ds .vtp-note {
	display: inline-flex;
	margin: 1rem 0 0;
	padding: 0.375rem 0.75rem;
	border-radius: var(--ds-radius-sm, 4px);
	background-color: rgba(255, 255, 255, 0.1);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

.vtp-ad {
	padding-top: 2rem;
}

.vtp-ad .bl-ad {
	margin-block: 0;
}

@media (min-width: 768px) {
	.vtp-ad {
		padding-top: 2.5rem;
	}
}

.vtp-ad:not(:has(.bl-ad)) {
	display: none;
}

/* ---------- Lovable: panorama + place text | "Місця туру" ---------- */
.vtp-layout {
	display: grid;
	gap: 2rem;
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}

@media (min-width: 768px) {
	.vtp-layout {
		padding-bottom: 4rem;
	}
}

@media (min-width: 1024px) {
	.vtp-layout {
		grid-template-columns: minmax(0, 1fr) 22rem;
		gap: 2.5rem;
	}
}

.vtp-main {
	min-width: 0;
}

.vtp-viewer {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-muted);
	scroll-margin-top: 6rem;
}

@media (min-width: 640px) {
	.vtp-viewer {
		aspect-ratio: 16 / 9;
	}
}

.vtp-viewer__frame,
.vtp-viewer__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vtp-viewer__empty,
.vtc__empty {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 1.5rem;
	font-size: 0.875em;
	text-align: center;
	color: var(--ds-ink-soft);
}

.vtp-place {
	margin-top: 1.5rem;
}

.dp .vtp-place__counter {
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.43;
	color: var(--ds-primary);
}

.dp .vtp-place__title {
	margin: 0.25rem 0 0;
	font-family: var(--ds-font-display);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--ds-heading-tracking);
	color: var(--ds-ink);
}

@media (min-width: 768px) {
	.dp .vtp-place__title {
		font-size: 1.875em;
		line-height: 1.25;
	}
}

.vtp-place__text {
	max-width: 48rem;
	margin-top: 0.75rem;
	font-size: 1em;
	line-height: 1.625;
	color: var(--ds-ink-soft);
}

@media (min-width: 768px) {
	.vtp-place__text {
		font-size: 1.125em;
	}
}

.vtp-place__text > * + * {
	margin-top: 0.75rem;
}

.dp .vtp-place__text p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* long text: 4 lines, "Детальніше" opens the rest */
.vtp-place__text.is-clamped:not(.is-open) {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.vtp-place__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.vtp-place__actions [hidden] {
	display: none;
}

/* "Місця туру" */
@media (min-width: 1024px) {
	.vtp-places {
		position: sticky;
		top: 6rem;
		align-self: start;
	}
}

.dp .vtp-places__title {
	margin: 0 0 0.75rem;
	font-family: var(--ds-font-display);
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.55;
	color: var(--ds-ink);
}

.dp .vtp-places__list {
	display: grid;
	gap: 0.25rem;
	max-height: 32rem;
	margin: 0;
	padding: 0 0.25rem 0 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

@media (min-width: 1024px) {
	.dp .vtp-places__list {
		max-height: calc(100vh - 9rem);
	}
}

.vtp-places__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background: none;
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	line-height: 1.4;
	text-align: left;
	color: var(--ds-foreground);
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.vtp-places__item:hover {
	background-color: var(--ds-surface);
}

.vtp-places__item:focus-visible {
	outline: 2px solid var(--ds-primary);
	outline-offset: 1px;
}

.vtp-places__item.is-active {
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
}

.vtp-places__num {
	flex-shrink: 0;
	min-width: 1.5em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ds-ink-soft);
}

.vtp-places__item.is-active .vtp-places__num {
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- Classic: full-screen panorama, round buttons, text card, places strip ---------- */
.vtc {
	position: relative;
	height: calc(100svh - 64px);
	min-height: 32rem;
	overflow: hidden;
	background-color: var(--ds-ink);
}

@media (min-width: 992px) {
	.vtc {
		height: calc(100svh - 80px);
	}
}

.vtc__frame,
.vtc__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vtc__frame iframe {
	position: static;
}

.vtc__empty {
	color: rgba(255, 255, 255, 0.7);
}

.vtc__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.75rem;
	padding: 1rem;
	background: linear-gradient(180deg, rgba(18, 32, 70, 0.75) 0%, rgba(18, 32, 70, 0) 100%);
	pointer-events: none;
}

.vtc__top > * {
	pointer-events: auto;
}

.vtc__heading {
	min-width: 0;
	text-align: center;
	pointer-events: none;
}

.dp .vtc__eyebrow {
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-gold);
}

.dp .vtc__title {
	margin: 0.125rem 0 0;
	font-family: var(--ds-font-display);
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: var(--ds-heading-tracking);
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
	.dp .vtc__title {
		font-size: 1.75em;
	}
}

.vtc__actions {
	display: flex;
	gap: 0.5rem;
}

.vtc__btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--ds-radius-full);
	background-color: rgba(18, 32, 70, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--ds-transition), border-color var(--ds-transition);
}

.vtc__btn:hover {
	background-color: rgba(18, 32, 70, 0.8);
}

.vtc__btn.is-active {
	border-color: var(--ds-primary);
	background-color: var(--ds-primary);
}

.vtc__icon {
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--vtc-icon) center / contain no-repeat;
	mask: var(--vtc-icon) center / contain no-repeat;
}

.vtc__icon--back { --vtc-icon: url(../img/lucide/arrow-left.svg); }
.vtc__icon--info { --vtc-icon: url(../img/lucide/info.svg); }
.vtc__icon--share { --vtc-icon: url(../img/lucide/share-2.svg); }
.vtc__icon--list { --vtc-icon: url(../img/lucide/list.svg); }

/* Text of the place: card on the left */
.vtc__info {
	position: absolute;
	top: 5.5rem;
	left: 1rem;
	z-index: 2;
	width: min(24rem, calc(100% - 2rem));
	max-height: calc(100% - 15rem);
	padding: 1.25rem;
	overflow-y: auto;
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card-hover);
}

.vtc__info.is-hidden,
.vtc__strip.is-hidden {
	display: none;
}

.dp .vtc__info-title {
	margin: 0;
	font-family: var(--ds-font-display);
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ds-ink);
}

.vtc__info-text {
	margin-top: 0.5rem;
	font-size: 0.875em;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

.vtc__info-text > * + * {
	margin-top: 0.5rem;
}

.dp .vtc__info-text p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.dp .vtc__go {
	margin-top: 1rem;
}

.dp .vtc__go + .vtc__go {
	margin-left: 0.5rem;
}

.vtc__go[hidden] {
	display: none;
}

/* Places strip at the bottom */
.vtc__strip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 2.5rem 1rem 1rem;
	background: linear-gradient(0deg, rgba(18, 32, 70, 0.85) 0%, rgba(18, 32, 70, 0) 100%);
}

.dp .vtc__places {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0 0 0.25rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	list-style: none;
	scrollbar-width: thin;
}

.vtc__places > li {
	flex: 0 0 11rem;
	scroll-snap-align: start;
}

.vtc__place {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ds-font-sans);
	text-align: left;
	color: #fff;
	cursor: pointer;
}

.vtc__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--ds-radius-md);
	background-color: rgba(255, 255, 255, 0.1);
	transition: border-color var(--ds-transition);
}

.vtc__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vtc__place:hover .vtc__thumb {
	border-color: rgba(255, 255, 255, 0.6);
}

.vtc__place.is-active .vtc__thumb {
	border-color: var(--ds-gold);
}

.vtc__place:focus-visible {
	outline: 2px solid var(--ds-gold);
	outline-offset: 2px;
}

.vtc__place-name {
	display: -webkit-box;
	margin-top: 0.375rem;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: 0.8125em;
	font-weight: 600;
	line-height: 1.35;
}

.vtc__place-num {
	margin-right: 0.375rem;
	color: var(--ds-gold);
}

/* Phones: smaller strip cards, the text card is shorter */
@media (max-width: 639px) {
	.vtc__top {
		padding: 0.75rem;
	}

	.vtc__btn {
		width: 2.5rem;
		height: 2.5rem;
	}

	.vtc__info {
		top: 4.75rem;
		left: 0.75rem;
		width: calc(100% - 1.5rem);
		max-height: 38%;
	}

	.vtc__places > li {
		flex-basis: 8.5rem;
	}
}


/* ==========================================================================
   Audioguide / online quest page: resources/views/pages/exhibits/show.blade.php
   Event page layout (dp-ev-*); own parts: format tag, address under the place, "Доступ до …", modals
   ========================================================================== */

.ex-format {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.ex-format .dp-ico {
	width: 14px;
	height: 14px;
}

.dp .ex-address {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.875em;
	font-weight: 400;
	color: var(--ds-ink-soft);
}

/* no reviews block: the side card sits beside the description on wide screens */
.dp .ex-layout {
	padding-bottom: 0;
}

.dp .ex-access {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: var(--ds-radius-md);
	background-color: rgba(255, 255, 255, 0.1);
	font-size: 0.8125em;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

.ex-access .dp-ico {
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--ds-gold);
}

/* Purchase / thank-you modals (Bootstrap mechanics): the look of the site's new popups */
.ex-modal .modal-dialog {
	max-width: 30rem;
	padding: 0 1rem;
}

.ex-modal .modal-content {
	position: relative;
	padding: 2rem;
	border: 0;
	border-radius: var(--ds-radius-xl, 16px);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card-hover);
	color: var(--ds-foreground);
}

@media (max-width: 575px) {
	.ex-modal .modal-content {
		padding: 1.5rem;
	}
}

.ex-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-surface);
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.ex-modal__close::before {
	content: '';
	width: 16px;
	height: 16px;
	background-color: var(--ds-ink);
	-webkit-mask: url(../img/lucide/x.svg) center / contain no-repeat;
	mask: url(../img/lucide/x.svg) center / contain no-repeat;
}

.ex-modal__close:hover {
	background-color: var(--ds-muted);
}

.ds .ex-modal__eyebrow {
	margin: 0;
	padding-right: 2.5rem;
	font-size: 0.8125em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ds-primary);
}

.ds .ex-modal__title {
	margin: 0.25rem 0 0;
	padding-right: 2.5rem;
	font-family: var(--ds-font-display);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--ds-heading-tracking);
	color: var(--ds-ink);
}

.ds .ex-modal__lead {
	margin: 0.5rem 0 0;
	font-size: 0.9375em;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

.ex-modal__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
}

.ex-modal__price-label {
	font-size: 0.875em;
	color: var(--ds-ink-soft);
}

.ex-modal__price-value {
	font-family: var(--ds-font-display);
	font-size: 1.5em;
	font-weight: 600;
	color: var(--ds-ink);
}

.ds .ex-modal__error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--ds-radius-md);
	background-color: #fdecec;
	font-size: 0.875em;
	color: #a1131a;
}

.ex-modal__error[hidden] {
	display: none;
}

.ds .ex-modal__btn {
	width: 100%;
	min-height: 44px;
	margin-top: 1.25rem;
	font-size: 0.9375em;
	font-weight: 600;
}

.ex-modal__price + .ex-modal__error + form .ex-modal__btn,
.ex-modal__price + form .ex-modal__btn {
	margin-top: 0;
}

/* thank-you: check mark in a gold circle */
.ex-modal__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-accent);
}

.ex-modal__icon::before {
	content: '';
	width: 22px;
	height: 22px;
	background-color: var(--ds-primary);
	-webkit-mask: url(../img/lucide/check.svg) center / contain no-repeat;
	mask: url(../img/lucide/check.svg) center / contain no-repeat;
}