/**
 * UV Booking — tour-page template styles.
 *
 * Layout for a single-tour page: wide content column + a narrow booking box
 * that stays sticky while scrolling on desktop, and collapses into a fixed
 * "Book" bar pinned to the bottom of the screen on mobile.
 *
 * Additive only — does NOT touch the existing .uv-tour-card / grid styles in
 * booking-modal.css. Design tokens (--uv-*) come from that file's :root.
 *
 * Header offset: set --uv-sticky-top on .uv-book-box (or a parent) to match
 * the site's fixed header height, e.g. style="--uv-sticky-top:120px".
 */

/* ---------- optional two-column layout helper (used by the plain-HTML demo;
   in Elementor the columns come from the section, this is just a fallback) -- */
.uv-tour-layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr); /* ~70 / 30 */
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: stretch;   /* the booking column must fill the row height so
	                           position:sticky inside it has room to travel */
	max-width: 1200px;
	margin-inline: auto;
}
.uv-tour-layout__content > * + * { margin-top: 1.25rem; }

/* ---------- Composite "UV Tour Page" widget: whole page from one widget ---------- */
.uv-tour-page {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	color: var(--uv-fg, #15121f);
}
.uv-tour-page__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 1.5rem;
}
.uv-tour-page .uv-tour-page__title {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	color: var(--uv-fg, #15121f);
}
/* Segmented EN/RO toggle. */
.uv-tour-page__lang {
	flex: none;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	margin-top: 4px;
	background: var(--uv-bg-soft, #f3eede);
	border: 1px solid var(--uv-border, #e6dfcd);
	border-radius: 999px;
}
.uv-tour-page__lang .uv-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0.34em 0.8em;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--uv-muted, #6c6478);
	font: 600 0.8rem/1 "Plus Jakarta Sans", system-ui, sans-serif;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--uv-transition, 200ms ease), color var(--uv-transition, 200ms ease);
}
.uv-tour-page__lang .uv-lang-btn.is-active {
	background: #fff;
	color: var(--uv-fg, #15121f);
	box-shadow: 0 1px 2px rgba(12, 10, 20, 0.10);
}
.uv-lang-flag { font-size: 1.05em; line-height: 1; }
.uv-tour-page.is-loading { opacity: 0.55; transition: opacity 120ms ease; pointer-events: none; }

@media (max-width: 600px) {
	.uv-tour-page__head { flex-wrap: wrap; }
}
.uv-tour-page__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: stretch; /* aside cell stretches → the sticky booking box can travel */
}
.uv-tour-page__main { min-width: 0; }
.uv-tour-page__aside { min-width: 0; }
@media (max-width: 1024px) {
	.uv-tour-page__layout { grid-template-columns: 1fr; }
	.uv-tour-page__aside .uv-book-box { position: static; top: auto; }
}

/* On the live site the box is an Elementor "Shortcode" widget inside the right
   column (CSS class uv-tour-layout__aside). Two things must hold for the inner
   .uv-book-box to be able to travel with position:sticky:
     1. the column must stretch to the section's full height, and
     2. every wrapper between the column and the box must pass that height down.
   Elementor columns don't reliably stretch and its widget wrappers hug their
   content, so we force both here. */
/* Stretch the column to the section height. IMPORTANT: do not give the column
   itself a `height` — a specified height (even height:100%) disables flexbox
   stretch, so the column would collapse back to its content height. */
.uv-tour-layout__aside.elementor-column {
	align-self: stretch;
}
/* The wrappers now have a definite-height parent, so height:100% cascades the
   stretched column height down to the box, giving position:sticky room. */
.uv-tour-layout__aside .elementor-column-wrap,
.uv-tour-layout__aside .elementor-widget-wrap,
.uv-tour-layout__aside .elementor-widget,
.uv-tour-layout__aside .elementor-widget-container,
.uv-tour-layout__aside .elementor-shortcode {
	height: 100%;
}

/* ---------- booking box (desktop = sticky) ------------------------------- */
.uv-book-box {
	position: -webkit-sticky;
	position: sticky;
	top: var(--uv-sticky-top, 96px);
	z-index: 5;
}
.uv-book-box__inner {
	background: var(--uv-bg, #fbf9f3);
	border: 1px solid var(--uv-border, #e6dfcd);
	border-radius: var(--uv-radius, 14px);
	box-shadow: var(--uv-shadow-soft, 0 1px 3px rgba(12, 10, 20, .06));
	padding: 1.25rem 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	overflow: hidden;
}
.uv-book-box__media {
	margin: -1.25rem -1.25rem 0;
	aspect-ratio: 16 / 10;
	background: var(--uv-border-soft, #efe9da);
}
.uv-book-box__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.uv-book-box__title {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 1.3rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--uv-fg, #15121f);
	margin: 0;
}
.uv-book-box__price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.uv-book-box__from {
	font-size: 0.8rem;
	color: var(--uv-muted, #6c6478);
}
.uv-book-box__amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--uv-fg, #15121f);
}
.uv-book-box__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.uv-book-box__facts .uv-tour-card__meta-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--uv-muted, #6c6478);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.uv-book-box__facts .ph {
	font-size: 1.05rem;
	color: var(--uv-accent, #5965ed);
}
.uv-book-box .uv-book-btn {
	width: 100%;
	justify-content: center;
}
.uv-book-box__note {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--uv-muted, #6c6478);
	text-align: center;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.uv-book-box__note i.ph {
	flex: none;
	color: var(--uv-success, #15803d);
	font-size: 1.15em;
}

/* ---------- mobile: drop sticky, show a fixed bottom Book bar ------------- */
.uv-book-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;            /* under the booking modal (99999) */
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
	background: var(--uv-bg, #fbf9f3);
	border-top: 1px solid var(--uv-border, #e6dfcd);
	box-shadow: 0 -8px 24px -16px rgba(12, 10, 20, .35);
	transform: translateY(110%);
	transition: transform var(--uv-transition, 300ms cubic-bezier(.4, 0, .2, 1));
}
.uv-book-bar.is-visible {
	transform: translateY(0);
}
.uv-book-bar__price {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.uv-book-bar__from {
	font-size: 0.7rem;
	color: var(--uv-muted, #6c6478);
}
.uv-book-bar__amount {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--uv-fg, #15121f);
}
.uv-book-bar .uv-book-btn {
	flex: 1 1 auto;
	justify-content: center;
	margin: 0;
}

/* Tablet / phone: single column. The box flows inline near the top (so the
   user sees it first), then the fixed bottom bar takes over once scrolled past. */
@media (max-width: 1024px) {
	.uv-tour-layout {
		grid-template-columns: 1fr;
	}
	.uv-tour-layout__aside {
		order: -1;        /* booking box above the long content on mobile */
		height: auto;
	}
	.uv-book-box {
		position: static;
		top: auto;
	}
}

/* Mobile: reclaim the column's wide inner padding (Elementor's populated wrap
   adds ~30px each side) so both the content and the booking box use more of the
   screen. Applies to the content column and the booking (aside) column alike. */
@media (max-width: 768px) {
	.uv-tour-layout__content.elementor-column > .elementor-widget-wrap,
	.uv-tour-layout__content.elementor-column > .elementor-column-wrap > .elementor-widget-wrap,
	.uv-tour-layout__aside.elementor-column > .elementor-widget-wrap,
	.uv-tour-layout__aside.elementor-column > .elementor-column-wrap > .elementor-widget-wrap {
		padding: 4px !important;
	}
	/* Pull the stacked booking column up tight under the content. */
	.uv-tour-layout__aside.elementor-column { margin-top: 0 !important; }
	.uv-tour-layout__content.elementor-column { margin-bottom: 0 !important; }
}

/* The fixed bar is a mobile-only affordance. */
@media (min-width: 1025px) {
	.uv-book-bar {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Tour CPT single (uv_tour): the theme narrows ".content" to the with-sidebar
   width for post types it doesn't know about, leaving the tour layout squeezed
   into the left half. Let it use the full content column. Scoped to the single
   so it never affects other pages. !important overrides the theme's higher-
   specificity width rule.
   --------------------------------------------------------------------------- */
body.single-uv_tour [class*="content_wrap"] > .content {
	width: 100% !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* The auto tour page already centers itself; give it a comfortable max width. */
body.single-uv_tour .uv-tour-page {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}