/**
 * [experience_booking] shortcode styles.
 *
 * Loaded by inc/shortcode/experience-booking.php when the shortcode renders.
 * See process/experience-booking.md for behavior.
 */

/* min-height anchors the widget so the dynamic-cap script can measure
   scrollHeight on first paint before the third-party widget populates. */
.experience-booking__widget { min-height: 1px; padding-bottom: 8px; }

.experience-booking__attribution {
	margin: 10px 0 0;
	font-size: 12px;
	color: #6b7280;
	text-align: center;
}
.experience-booking__attribution a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.experience-booking__attribution a:hover { color: #111827; }

.experience-booking__fh {
	position: relative;
	border-radius: var(--radius-md);
}
/* Reserve FH's typical calendar height ONLY while loading so the page
   doesn't jump when the iframe paints. Once .is-loading is removed the
   wrapper collapses to whatever FH actually rendered — keeps short/empty
   states (e.g. sold-out, error) from leaving a tall blank box. */
.experience-booking__fh.is-loading { min-height: 628px; }

/* FareHarbor's Lightframe ships as a full-viewport iframe with no chrome —
   we restyle it as a centered modal: dim overlay + constrained card.
   DOM (FH-controlled, learned by inspecting): host has 3 sibling children:
     #fareharbor-lightframe-shade   (FH's own dim layer, redundant now)
     #fareharbor-lightframe-loading (loader)
     #fareharbor-lightframe-iframe  (the actual booking content)
   We use the host as the centering flex container with the dim background,
   target the iframe directly as the card, and hide FH's redundant shade.
   Scoped via :has(...book...) so smaller popups (cancellation policy, etc.)
   that reuse the same host stay native. */
#fareharbor-lightframe.fareharbor-is-showing:has(iframe[src*="/embeds/book/"]) {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(0, 0, 0, .55) !important;
	z-index: 2147483640 !important;
	padding: 24px !important;
	box-sizing: border-box !important;
}
/* Hide FH's native shade — our host bg already provides the backdrop. */
#fareharbor-lightframe.fareharbor-is-showing:has(iframe[src*="/embeds/book/"]) > #fareharbor-lightframe-shade {
	display: none !important;
}
/* The iframe IS the card. */
#fareharbor-lightframe.fareharbor-is-showing:has(iframe[src*="/embeds/book/"]) > iframe {
	position: relative !important;
	width: 100% !important;
	max-width: 720px !important;
	height: 100% !important;
	max-height: 90vh !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--radius-md) !important;
	background: var(--surface, #fff) !important;
	box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .35) !important;
	display: block !important;
}
@media (max-width: 600px) {
	#fareharbor-lightframe.fareharbor-is-showing:has(iframe[src*="/embeds/book/"]) { padding: 0 !important; }
	#fareharbor-lightframe.fareharbor-is-showing:has(iframe[src*="/embeds/book/"]) > iframe {
		max-width: none !important;
		max-height: none !important;
		border-radius: 0 !important;
	}
}

.eversoul-fh-close {
	/* Fixed-position so we can align it with the iframe's top-right corner
	   without nesting inside the cross-origin iframe. Math: the iframe is
	   centered, max-width 720px → its right edge sits at (100vw - 720) / 2
	   from the right. Falls back to 12px on narrow screens.
	   Secondary button style: surface-alt bg + primary text + neutral border.
	   !important is used liberally because FH's button reset (loaded after
	   our CSS) sets bg/color/border on plain <button> elements. */
	position: fixed !important;
	top: max(12px, calc((100vh - 90vh) / 2 + 10px)) !important;
	right: max(12px, calc((100vw - 720px) / 2 + 10px)) !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 2147483647 !important;
	box-sizing: border-box !important;
	width: 40px !important;
	height: 40px !important;
	border: 1px solid var(--border-strong, #D4D4D4) !important;
	border-radius: 50% !important;
	background: var(--surface, #fff) !important;
	background-image: none !important;
	color: var(--text-primary, #171717) !important;
	font: 400 26px/1 system-ui, -apple-system, sans-serif !important;
	cursor: pointer !important;
	display: none;
	place-items: center !important;
	padding: 0 !important;
	margin: 0 !important;
	text-transform: none !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important;
	filter: none !important;
	transition: background-color .15s ease, color .15s ease !important;
}
.eversoul-fh-close:hover,
.eversoul-fh-close:focus-visible {
	background: var(--surface-alt, #fafafa) !important;
	outline: none !important;
}
.eversoul-fh-close::before {
	content: "\00d7" !important;
	display: block !important;
	line-height: 1 !important;
	transform: translateY(-2px) !important;
}
.eversoul-fh-close::before {
	content: "\00d7";
	display: block;
	line-height: 1;
	transform: translateY(-1px);
}
.eversoul-fh-close:hover,
.eversoul-fh-close:focus-visible { background: rgba(0, 0, 0, .8); outline: none; }
#fareharbor-lightframe.fareharbor-is-showing:has(iframe[src*="/embeds/book/"]) .eversoul-fh-close { display: grid; }
/* FareHarbor injects its iframe with inline style; matching specificity isn't
   enough because the script runs after our stylesheet, so !important stays. */
.experience-booking__fh iframe {
	display: block !important;
	filter: hue-rotate(-105deg) saturate(2.6);
}

@media (min-width: 768px) {
	.experience-booking__fh,
	.experience-booking--tourdesk .experience-booking__widget {
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: var(--radius-md);
	}
}

/* TourDesk calendar fixes:
   1. Day cells had explicit width 35.2px x 7 = 246px overflowing the 233px
      container, and react-datepicker__month had margin:0.4em pushing day rows
      6.4px right of the day-names header. Force flex layout with width:100%
      so cells size to 1/7 of the container and align between header and grid.
   2. When only the next-month chevron is rendered (no earlier month available),
      inject a disabled-looking phantom previous-chevron that mirrors the next
      button box. */
.experience-booking--tourdesk .react-datepicker { position: relative; }
.experience-booking--tourdesk .td-widget-calendar-wrapper .react-datepicker { padding: 0; }
.experience-booking--tourdesk .react-datepicker__month-container,
.experience-booking--tourdesk .react-datepicker__header { width: 100%; }
.experience-booking--tourdesk .react-datepicker__month { width: 100%; margin: 0; padding: 0; }
.experience-booking--tourdesk .react-datepicker__day-names,
.experience-booking--tourdesk .react-datepicker__week { display: flex; width: 100%; }
.experience-booking--tourdesk .react-datepicker__day-name,
.experience-booking--tourdesk .react-datepicker__day {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}
.experience-booking--tourdesk .react-datepicker__day {
	font-size: 14px;
	line-height: 24px;
	padding: 3px 4px;
}
/* TourDesk ships a high-specificity :hover/.open rule for .td-button that
   sets border-radius back to 0; bumping ours with !important is the cleanest
   override without chaining 5+ class selectors. */
.experience-booking--tourdesk .td-styles-wrapper .td-button,
.experience-booking--tourdesk .td-styles-wrapper .td-button.colored,
.experience-booking--tourdesk .td-styles-wrapper .td-button:hover,
.experience-booking--tourdesk .td-styles-wrapper .td-button.open,
.experience-booking--tourdesk .td-styles-wrapper .td-button.colored:hover,
.experience-booking--tourdesk .td-styles-wrapper .td-button.colored.open,
.experience-booking--tourdesk .td-widget-calendar-wrapper .react-datepicker__navigation { border-radius: var(--radius-md) !important; }
/* Unify hover background across all accent-filled TourDesk buttons with the
   theme's button-hover token. !important needed because TourDesk's :hover
   rule wins on cascade order. */
.experience-booking--tourdesk .td-styles-wrapper .td-button.colored:hover,
.experience-booking--tourdesk .td-styles-wrapper .td-button.colored.open,
.experience-booking--tourdesk .td-widget-calendar-wrapper .react-datepicker__navigation:hover {
	background: var(--accent-fill-hover) !important;
	border-color: var(--accent-fill-hover) !important;
}
/* TourDesk's selected-day rule chains multiple classes and ships AFTER ours,
   so the cascade wins on equal specificity. !important is the cleanest fix
   without making the selector chain brittle. */
.experience-booking--tourdesk .react-datepicker__day--selected,
.experience-booking--tourdesk .react-datepicker__day--keyboard-selected { border-radius: var(--radius-md) !important; }
.experience-booking--tourdesk .td-widget-checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin-bottom: 4px;
	white-space: nowrap;
}
.experience-booking--tourdesk #td-btn-express-checkout { padding: 10px 16px !important; }
.experience-booking--tourdesk .td-widget-section-title {
	font-size: 16px;
	padding-bottom: 0;
	margin-bottom: 0;
	font-weight: 600;
	line-height: 1.1;
	color: var(--text-primary);
}
/* Hide the redundant first "Choose Date of Travel" section title; the calendar
   itself is self-explanatory in our compact layout. */
.experience-booking--tourdesk td-booking-widget > div > div:first-child > .td-widget-section-title { display: none; }
.experience-booking--tourdesk .td-availability { padding: 0; }
.experience-booking--tourdesk .td-widget-availability-start-time-title { margin-top: 12px; }
.experience-booking--tourdesk .td-widget-calendar-wrapper { padding: 0; }
.experience-booking--tourdesk .td-styles-wrapper hr {
	border: 0;
	border-top: 1px solid var(--border-strong);
	background: transparent;
	padding-bottom: 4px;
	margin-bottom: 8px;
}

.experience-booking--tourdesk .td-widget-calendar-wrapper .react-datepicker__navigation { top: 0; }

/* Quantity +/- buttons in the passenger picker. TourDesk uses CSS modules with
   hashed class suffixes (e.g. __Qp-mn) that can change between builds, so
   match on the stable prefix via [class*=]. The native text glyphs ("-"/"+")
   don't share the same optical centerline in most fonts (hyphen-minus sits
   noticeably high), so we hide the text and draw both symbols with pseudo
   elements that are pixel-centered. Parent layout is always:
     <wrapper><div>-</div><input/><div>+</div></wrapper>
   so :first-of-type / :last-of-type cleanly map to minus / plus. */
.experience-booking--tourdesk [class*="QuantityInput-module_QuantityButton"] {
	position: relative;
	width: 30px;
	height: 30px;
	background: var(--accent-fill);
	color: transparent;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color .15s ease;
	user-select: none;
}
.experience-booking--tourdesk [class*="QuantityInput-module_QuantityButton"]::before,
.experience-booking--tourdesk [class*="QuantityInput-module_QuantityButton"]:last-of-type::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--text-on-accent);
	border-radius: 1px;
}
/* Horizontal bar — present on both minus and plus. */
.experience-booking--tourdesk [class*="QuantityInput-module_QuantityButton"]::before {
	width: 12px;
	height: 2px;
	transform: translate(-50%, -50%);
}
/* Vertical bar — only on the plus button (last of its sibling <div>s). */
.experience-booking--tourdesk [class*="QuantityInput-module_QuantityButton"]:last-of-type::after {
	width: 2px;
	height: 12px;
	transform: translate(-50%, -50%);
}
.experience-booking--tourdesk [class*="QuantityInput-module_QuantityButton"]:hover {
	background: var(--accent-fill-hover);
}
.experience-booking--tourdesk [class*="QuantityInput-module_QuantityButton"][disabled],
.experience-booking--tourdesk [class*="QuantityInput-module_QuantityButton"].disabled {
	opacity: .4;
	cursor: not-allowed;
}
.experience-booking--tourdesk .react-datepicker__navigation--previous { left: 4px; }
.experience-booking--tourdesk .react-datepicker__navigation--next { right: 4px; }
.experience-booking--tourdesk .react-datepicker__navigation-icon--next { left: 1px; }
.experience-booking--tourdesk .react-datepicker__navigation-icon--previous { right: 1px; }
.experience-booking--tourdesk .react-datepicker__year-read-view--down-arrow,
.experience-booking--tourdesk .react-datepicker__month-read-view--down-arrow,
.experience-booking--tourdesk .react-datepicker__month-year-read-view--down-arrow,
.experience-booking--tourdesk .react-datepicker__navigation-icon::before {
	border-color: var(--text-on-accent);
}


/* FareHarbor loading shimmer */
.experience-booking__fh > *:not(.experience-booking__fh__loader) {
	transition: opacity .25s ease;
}
.experience-booking__fh.is-loading {
	background: linear-gradient(90deg, #f1f3f5 0%, #e9ecef 50%, #f1f3f5 100%);
	background-size: 200% 100%;
	animation: eversoul-fh-shimmer 1.4s ease-in-out infinite;
	border-radius: var(--radius-md);
}
.experience-booking__fh.is-loading > *:not(.experience-booking__fh__loader) {
	opacity: 0;
}
.experience-booking__fh__loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	pointer-events: none;
}
.experience-booking__fh__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(0, 0, 0, .08);
	border-top-color: rgba(0, 0, 0, .45);
	border-radius: 50%;
	animation: eversoul-fh-spin .8s linear infinite;
}
.experience-booking__fh__label {
	font-size: 13px;
	color: #6b7280;
	letter-spacing: .01em;
}
.experience-booking__fh:not(.is-loading) .experience-booking__fh__loader { display: none; }

/* Demoted sticky ancestor — JS toggles this class on the parent when the
   form's natural height would overflow the viewport (clipping field labels
   and dropdowns isn't acceptable for inline forms). */
.eversoul-sticky-disabled { position: static !important; }

/* LatePoint inline form — used when an experience falls back to the default
   Elementor form template wrapping a LatePoint widget. Tighten the per-row
   vertical rhythm. */
.latepoint-w.latepoint-inline-form .latepoint-booking-form-element { padding: 4px 0; }

@keyframes eversoul-fh-spin {
	to { transform: rotate(360deg); }
}
@keyframes eversoul-fh-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}