/* ============================================================
   LS Price Card — widget styles
   Reproduces the sticky booking panel from the tour pages (label,
   price, checklist, CTA button, note). Scoped entirely under
   .ls-price-card so it never collides with the theme or other
   widgets.
   ============================================================ */

.ls-price-card {
	background: #0B1622;
	border: 1px solid rgba(244, 246, 245, .14);
	border-radius: 3px;
	padding: 34px;
}

.ls-price-card__label {
	font-family: var(--ls-font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(244, 246, 245, .38);
}

.ls-price-card__price {
	font-family: var(--ls-font-display, "Fraunces", Georgia, "Times New Roman", serif);
	font-size: 40px;
	font-weight: 500;
	color: #FFFFFF;
	margin-top: 8px;
}

.ls-price-card__price span {
	font-family: var(--ls-font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 11px;
	font-style: normal;
	color: rgba(244, 246, 245, .38);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-left: 6px;
}

.ls-price-card__features {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 26px 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(244, 246, 245, .14);
	list-style: none;
}

.ls-price-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(244, 246, 245, .62);
	font-weight: 300;
}

.ls-price-card__features li svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
	color: #1E9C8F;
}

.ls-price-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 16px 28px;
	border-radius: 2px;
	border: 1px solid transparent;
	text-decoration: none;
	box-sizing: border-box;
	transition: transform .35s cubic-bezier(.22, .88, .3, 1), background .3s, color .3s, border-color .3s, filter .3s;
}

.ls-price-card__button--filled {
	background: #1A73E8;
	color: #FFFFFF;
}

.ls-price-card__button--filled:hover {
	background: #3384f2;
	transform: translateY(-3px);
}

.ls-price-card__button--outline {
	border-color: rgba(244, 246, 245, .35);
	color: #FFFFFF;
}

.ls-price-card__button--outline:hover {
	border-color: #FFFFFF;
	background: rgba(244, 246, 245, .06);
	transform: translateY(-3px);
}

.ls-price-card__note {
	margin-top: 16px;
	font-size: 11.5px;
	color: rgba(244, 246, 245, .38);
	text-align: center;
}

/* ---------- sticky-while-scrolling (opt-in) ---------- */
/* Only useful when this widget sits in a column next to other, taller
   content — e.g. an Elementor two-column layout with the tour's main
   copy in one column and this card in the other, exactly like the
   original tour page. Below the tablet breakpoint, columns typically
   stack (one on top of the other), where "sticky" would just pin the
   card oddly against its own, now much shorter, column — so it's
   switched back to a normal in-flow block there automatically. */
.ls-price-card--sticky {
	--ls-price-card-sticky-top: 110px;
	position: sticky;
	top: var(--ls-price-card-sticky-top);
}

@media (max-width: 1024px) {
	.ls-price-card--sticky {
		position: static;
	}
}

/* A sticky element can only stick within its own containing block's
   height — but Elementor nests every widget several plain-block divs
   deep (.elementor-widget-wrap > .elementor-widget > .elementor-widget-
   container) before this widget's own markup starts. Left alone, those
   wrapper divs shrink-wrap to this card's own (short) height, giving
   the sticky card nowhere to actually stick — it would just scroll
   away immediately instead of pinning in place. Stretching that
   wrapper chain to match the column's real height (only where it
   contains a sticky Price Card — this is a no-op everywhere else)
   is what gives it room to stick through the column's full height,
   matching the original tour page's sticky sidebar. Degrades safely
   in the rare browser without :has() support: the card simply stops
   sticking and behaves as a normal in-flow block instead. */
.elementor-column:has(> .elementor-widget-wrap .ls-price-card--sticky) {
	/* deliberately NOT setting height here — an explicit height (even
	   100%) stops the flex/grid default stretch from ever applying,
	   since stretch only kicks in while height computes to auto. This
	   just makes sure stretch isn't switched off if a theme or an
	   Elementor "vertical align" column setting already turned it off. */
	align-self: stretch;
}

.elementor-widget-wrap:has(> .elementor-widget-ls_price_card .ls-price-card--sticky),
.elementor-widget-ls_price_card:has(.ls-price-card--sticky),
.elementor-widget-ls_price_card:has(.ls-price-card--sticky) > .elementor-widget-container {
	/* these three are plain block boxes, not flex/grid items, so they
	   don't get a free stretch — each needs height:100% to pass the
	   column's (now real, stretched) height on down to this widget. */
	height: 100%;
}

/* ---------- scroll-in reveal ---------- */
/* JS toggles .in once the card enters the viewport; without JS or
   IntersectionObserver support the card is simply visible from the
   start (see script.js fallback). */
.ls-price-card.ls-price-card--animate {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s cubic-bezier(.22, .88, .3, 1), transform .8s cubic-bezier(.22, .88, .3, 1);
}

.ls-price-card.ls-price-card--animate.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ls-price-card.ls-price-card--animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}