/*
 * Structural/desktop styling for .pcs-booking-panel - see
 * class-pcs-booking-panel.php for what this wraps and why. Mobile
 * bottom-bar/drawer behavior is added in a later phase via additional
 * rules in this same file, gated behind @media (max-width: 767px) to match
 * this project's established breakpoint convention (confirmed in
 * pcs-homepage-redesign.php and siblings - NOT the older scattered
 * breakpoints in Additional CSS).
 *
 * Token names below are the real global custom properties defined in
 * wp-content/mu-plugins/pcs-design-tokens/tokens.css (enqueued site-wide
 * by wp-content/mu-plugins/pcs-design-tokens.php) - confirmed by reading
 * that file directly rather than guessing:
 *   --pcs-white   #FFFFFF
 *   --pcs-border  #E4DED3
 * There is no "--pcs-radius-lg" token. The closest real match for a
 * panel-level container is --radius-panel (16px) - used below instead of
 * inventing an unverified token name.
 */
.pcs-booking-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	margin: 20px 0;
	background: var(--pcs-white, #ffffff);
	border: 1px solid var(--pcs-border, #E4DED3);
	border-radius: var(--radius-panel, 16px);
}

/* Mobile bar + drawer - only active below the project's established mobile
 * breakpoint (767px, matching pcs-homepage-redesign.php and siblings).
 * Desktop is completely unaffected: .pcs-mobile-booking-bar stays
 * display:none, and .pcs-booking-panel keeps its normal static-in-flow
 * desktop styling untouched above this breakpoint. */
.pcs-mobile-booking-bar {
	display: none;
}

.pcs-booking-panel-close {
	display: none;
}

@media (max-width: 767px) {
	.pcs-mobile-booking-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 72px; /* clears the WhatsApp widget. Re-measured live at 390px on 2026-08-16: the mobile icon is 44px wide sitting 8px from the right edge, so it needs 52px, not the ~96px reserved when this was first written against the larger desktop-sized icon. 72px = 52px + 20px breathing room, verified non-overlapping. The 24px reclaimed is what lets the CTA label fit on one line - see the nowrap note below. */
		bottom: 0;
		z-index: 9999; /* below WhatsApp's z-index: 99999999, well above normal page content */
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		background: var(--pcs-white, #ffffff);
		border-top: 1px solid var(--pcs-border, #E4DED3);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
	}

	/* nowrap here too: once the CTA stopped wrapping it took the space it
	 * needed and the price wrapped instead, which grew the bar by exactly
	 * the same amount. Both children must refuse to wrap for the bar's
	 * height to be label-independent. */
	.pcs-mobile-booking-bar-total {
		font-weight: 700;
		color: var(--pcs-text, #1E2933);
		white-space: nowrap;
	}

	/* LOAD-BEARING: white-space:nowrap is what keeps this bar a thin bar.
	 * The CTA label is set by booking-cta-state.js and varies: "Select a
	 * Date", "Continue", "Book Now", "Check Availability",
	 * "Checking Availability...". Without nowrap the longer ones wrapped to
	 * two lines at 390px, which grew the bar from 75.4px to 101.8px and
	 * pushed it past the 96px body padding below, covering the footer.
	 * Measured at a true 390px viewport on 2026-08-16.
	 * Horizontal padding is 16px (was 24px) to buy back room for the label.
	 * min-width/overflow/ellipsis are a guard, not the mechanism: with the
	 * 72px right offset every label fits on one line except the transient
	 * "Checking Availability...", which ellipsises rather than wrapping.
	 * Height must stay independent of label text - check that before
	 * changing any label string or this rule. */
	.pcs-mobile-booking-bar-cta {
		background: linear-gradient(135deg, #C97824, #A1601D);
		color: #fff;
		border: none;
		border-radius: 8px;
		padding: 12px 16px;
		font-weight: 700;
		cursor: pointer;
		white-space: nowrap;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* The full panel becomes an off-screen drawer on mobile, slid up when
	 * .pcs-drawer-open is toggled by booking-panel.js. Height compensation
	 * for the fixed bar covering page content below it (footer, related
	 * products) is handled separately - see body padding rule below. */
	.pcs-booking-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 85dvh;
		overflow-y: auto;
		overscroll-behavior-y: contain; /* real-device bug (Samsung, ATV page): without this, scrolling to the end of the drawer's content chains into the page behind it, which visibly moves. Contains the scroll to this element instead of bubbling to the next scrollable ancestor. */
		background: var(--pcs-white, #ffffff);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 10000; /* above the mobile bar, still below WhatsApp */
	}

	.pcs-booking-panel.pcs-drawer-open {
		transform: translateY(0);
	}

	/* Compensate for the fixed mobile bar covering page content (footer,
	 * related products) - real elements confirmed present on this page,
	 * not a hypothetical.
	 * Re-verified 2026-08-16 at a true 390px viewport: the bar measures
	 * 75.39px for EVERY CTA label now that neither child wraps, so this
	 * 96px keeps 20.6px of headroom. Before the nowrap fix the bar hit
	 * 101.78px with "Select a Date", i.e. 5.78px MORE than this padding,
	 * and the footer was being covered again.
	 * If a CTA label is ever allowed to wrap, re-measure this. */
	body.single-product {
		padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	}

	.pcs-booking-panel-close {
		display: block;
		position: sticky;
		top: 0;
		margin-left: auto;
		background: var(--pcs-white, #ffffff);
		border: none;
		border-radius: 50%;
		width: 36px;
		height: 36px;
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
		z-index: 1; /* stack above the drawer's own scrolling content, still inside the drawer's own containing block */
	}

	/* Backdrop behind the drawer - needed for the inert-background pattern
	 * to read correctly to sighted users too (without it, background
	 * content would be inert but still visibly present and apparently
	 * interactive, which is confusing). Click closes the drawer. */
	.pcs-booking-panel-backdrop {
		display: none;
	}
	.pcs-booking-panel-backdrop.pcs-drawer-open {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9998; /* below the drawer (10000) and mobile bar (9999); the drawer covers it visually anyway when open */
	}
}

/* Background scroll lock while the drawer is open - toggled on <body> by
 * booking-panel.js (openDrawer/closeDrawer), not scoped to the 767px
 * media query on purpose: the class is only ever added while the mobile
 * drawer markup is in its open state, so it's inert outside that context
 * regardless of viewport width. `inert` on the sibling elements (see the
 * JS) stops focus/interaction and hides them from the accessibility tree,
 * but does not by itself stop touch-driven scroll chaining on a real
 * device - this rule is the actual scroll lock, confirmed missing when a
 * real Samsung device showed the page behind the drawer visibly move
 * once the drawer's own content finished scrolling. */
body.pcs-drawer-scroll-lock {
	overflow: hidden;
}