/* =============================================================================
   HT Tour UI — Enquire Bar · Scroll-to-Top · Lantern lift coordination
   Enquire bar: mobile (≤767px), tour single pages only (PHP gate + CSS).
   Scroll-to-top: all pages, all breakpoints.
   Lantern lift: synced via JS class toggle when bar is visible (mobile only).
   ============================================================================= */

:root {
	--ht-bar-h:   56px;  /* enquire bar height — keep in sync with JS BAR_H */
	--ht-bar-gap:  8px;  /* gap above bar for lifted elements */
}

/* Suppress parent theme's sticky "Book Now" button — replaced by enquire bar */
#fixedTourBookingBtnBox { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   ENQUIRE BAR
   Full-width fixed strip. Mobile only. Slides up after 3× viewport scroll.
   ═══════════════════════════════════════════════════════════════════════════ */

.ht-enquire-bar {
	display: none; /* desktop: never shown */
}

@media (max-width: 767px) {

	.ht-enquire-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: var(--ht-bar-h);
		align-items: center;
		padding: 0 16px;
		gap: 12px;
		background: linear-gradient(
			90deg,
			rgba(1, 22, 8, 0.94) 0%,
			rgba(0, 10, 4, 0.90) 100%
		);
		backdrop-filter: blur(14px) saturate(1.5);
		-webkit-backdrop-filter: blur(14px) saturate(1.5);
		border-top: 1px solid rgba(1, 163, 71, 0.28);
		z-index: 999;
		/* hidden state — transitions to is-visible via JS */
		opacity: 0;
		transform: translateY(100%);
		transition: opacity 0.26s ease, transform 0.26s ease;
		pointer-events: none;
		will-change: transform, opacity;
	}

	.ht-enquire-bar.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* ── Price (left side) ── */
	.ht-enquire-bar__price {
		flex: 1;
		min-width: 0;
		line-height: 1;
	}

	.ht-enquire-bar__amount {
		display: block;
		font-family: 'Karla', Arial, sans-serif;
		font-size: 18px;
		font-weight: 700;
		color: #ffffff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* WooCommerce injects nested spans — inherit so price reads cleanly */
	.ht-enquire-bar__amount .woocommerce-Price-amount,
	.ht-enquire-bar__amount .amount,
	.ht-enquire-bar__amount bdi {
		font-size: inherit;
		font-weight: inherit;
		color: inherit;
	}

	.ht-enquire-bar__label {
		display: block;
		font-family: 'Karla', Arial, sans-serif;
		font-size: 10px;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.50);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		margin-top: 3px;
		white-space: nowrap;
	}

	/* ── Split action button (scroll-up | enquire) ── */
	.ht-enquire-bar__actions {
		display: flex;
		align-items: stretch;
		flex: 0 0 auto;
		height: 40px;
		border-radius: 5px;
		overflow: hidden;
	}

	/* Left section: scroll-to-top */
	.ht-enquire-bar__scroll-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		background: #01A347;
		border: none;
		border-right: 1px solid rgba(255, 255, 255, 0.22);
		color: #ffffff;
		cursor: pointer;
		flex-shrink: 0;
		-webkit-tap-highlight-color: transparent;
		outline: none;
		transition: background 0.16s ease;
	}

	.ht-enquire-bar__scroll-btn:active {
		background: #018a3c;
	}

	.ht-enquire-bar__scroll-btn svg {
		width: 14px;
		height: 14px;
		stroke: rgba(255, 255, 255, 0.92);
	}

	/* Right section: enquire */
	.ht-enquire-bar__cta {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 0 18px;
		background: #01A347;
		color: #ffffff;
		font-family: 'Karla', Arial, sans-serif;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		border: none;
		border-radius: 0;
		cursor: pointer;
		white-space: nowrap;
		transition: background 0.16s ease;
		-webkit-tap-highlight-color: transparent;
		outline: none;
	}

	.ht-enquire-bar__cta:active {
		background: #018a3c;
	}

	.ht-enquire-bar__cta svg {
		width: 13px;
		height: 13px;
		flex-shrink: 0;
	}

	/* ── Lantern: add bottom to transition so lift is smooth ── */
	.ht-lantern {
		transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.26s ease;
	}

	/* ── Lantern + scroll-to-top lift when bar is visible ── */
	.ht-lantern--lifted {
		bottom: calc(var(--ht-bar-h) + 1.25rem + var(--ht-bar-gap)) !important;
	}

	.ht-scroll-top--bar-lifted {
		bottom: calc(var(--ht-bar-h) + 1.25rem + var(--ht-bar-gap));
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL TO TOP
   Ghost circle. Mobile: bottom-left. Desktop: left of Lantern (bottom-right).
   Appears after 4× viewport (mobile) / 700px (desktop). Fades in with lift.
   ═══════════════════════════════════════════════════════════════════════════ */

.ht-scroll-top {
	position: fixed;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.55);
	backdrop-filter: blur(8px) saturate(1.2);
	-webkit-backdrop-filter: blur(8px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow:
		0 2px 14px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1000;
	padding: 0;
	/* hidden state */
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition:
		opacity   0.22s ease,
		transform 0.22s ease,
		background 0.16s ease,
		bottom    0.26s ease;
	will-change: opacity, transform;
}

.ht-scroll-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.ht-scroll-top:hover,
.ht-scroll-top:focus-visible {
	background: rgba(10, 10, 10, 0.78);
	outline: none;
}

.ht-scroll-top svg {
	width: 18px;
	height: 18px;
	color: rgba(230, 230, 230, 0.92);
	transition: color 0.16s ease;
	display: block;
}

.ht-scroll-top:hover svg,
.ht-scroll-top:focus-visible svg {
	color: rgba(255, 255, 255, 1);
}

/* Mobile: left side (avoids Lantern on non-tour pages) */
@media (max-width: 767px) {
	.ht-scroll-top {
		bottom: 1.25rem;
		left: 1rem;
	}
	/* Tour pages: scroll-up is inside the enquire bar — circle not needed */
	body.single-product .ht-scroll-top {
		display: none;
	}
}

/* Desktop: bottom-right, immediately left of Lantern (52px wide + gap) */
@media (min-width: 768px) {
	.ht-scroll-top {
		bottom: 1.75rem;
		right: calc(1.5rem + 52px + 10px);
	}
}