/**
 * PB Modal — content-agnostic modal foundation (native <dialog>).
 * No 360-specific styling lives here; keep it reusable/extraction-ready.
 *
 * Expected markup:
 *   <dialog class="pb-modal" data-pb-modal-id="…" data-pb-modal-size="default|immersive">
 *     <div class="pb-modal__panel">
 *       <button class="pb-modal__close" data-pb-modal-close aria-label="Close"></button>
 *       <div class="pb-modal__content"> … </div>
 *     </div>
 *   </dialog>
 */

dialog.pb-modal {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: 100vw;
	max-height: 100dvh;
	margin: 0;
	padding: 16px;
	overflow: hidden;
	color: inherit;
	background: transparent;
	border: 0;
}

dialog.pb-modal:not([open]) {
	display: none;
}

dialog.pb-modal[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

dialog.pb-modal::backdrop {
	background: rgba(20, 22, 30, 0.72);
}

.pb-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(550px, 100%);
	max-height: 100%;
	overflow: hidden;
	background: #fefefe;
	border-radius: 16px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
}

.pb-modal__content {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* --- Immersive variant (used by the 360 tour): near-fullscreen dark panel. --- */
dialog.pb-modal[data-pb-modal-size="immersive"] {
	padding: 24px;
}

dialog.pb-modal[data-pb-modal-size="immersive"] .pb-modal__panel {
	width: min(1600px, 95vw);
	height: 90dvh;
	max-height: 100%;
	background: #0b0d12;
	border-radius: 14px;
}

dialog.pb-modal[data-pb-modal-size="immersive"] .pb-modal__content {
	overflow: hidden;
}

/* --- Close button: always visible, overlaid top-right (guaranteed exit even for cross-origin iframes). --- */
dialog.pb-modal .pb-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	/* !important shields the brand look from kit/theme global button styling —
	   same defence the legacy booking modal uses. */
	padding: 0 !important;
	color: #242a38 !important; /* Pure Boats primary (navy) — the X paints with currentcolor */
	cursor: pointer;
	background: #fff !important;
	border: 0;
	border-radius: 50%;
	/* Soft shadow so the white button stays visible over bright tour imagery. */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: background-color 140ms ease;
}

dialog.pb-modal .pb-modal__close:hover {
	background: #eceff3 !important;
}

/* The X is the Pure Boats menu-close icon (SVG mask, painted with currentcolor). */
dialog.pb-modal .pb-modal__close::before {
	width: 20px;
	height: 15px;
	content: '';
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15'%3E%3Cpath d='M16.999 0.918945L10.918 6.99902L17.3535 13.4346L16.4336 14.3535L9.99902 7.91895L3.56445 14.3535L2.64453 13.4346L9.0791 6.99902L2.99902 0.918945L3.91797 0L9.99902 6.08008L16.0801 0L16.999 0.918945Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15'%3E%3Cpath d='M16.999 0.918945L10.918 6.99902L17.3535 13.4346L16.4336 14.3535L9.99902 7.91895L3.56445 14.3535L2.64453 13.4346L9.0791 6.99902L2.99902 0.918945L3.91797 0L9.99902 6.08008L16.0801 0L16.999 0.918945Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

dialog.pb-modal .pb-modal__close:focus {
	outline: none;
}

.pb-keyboard-user dialog.pb-modal .pb-modal__close:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
	/* White ring + navy inner ring stays visible on both dark and light content. */
	box-shadow: 0 0 0 4px rgba(36, 42, 56, 0.6);
}

/* --- Background scroll lock (position-preserving; robust on iOS). --- */
body.pb-modal-scroll-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* While locked, no scroll may animate — smooth-scroll themes would turn any
   programmatic restore into a visible glide. */
html:has(body.pb-modal-scroll-locked) {
	scroll-behavior: auto !important;
	overscroll-behavior: none;
}

/* --- Touch / small screens: bottom sheet (default) and full-screen (immersive) with safe areas. --- */
@media (max-width: 767px) {
	dialog.pb-modal {
		padding: 0;
	}

	dialog.pb-modal[open] {
		align-items: flex-end;
	}

	.pb-modal__panel {
		width: 100vw;
		max-height: 92dvh;
		border-radius: 20px 20px 0 0;
	}

	dialog.pb-modal .pb-modal__close {
		top: max(10px, env(safe-area-inset-top, 0px));
		right: max(10px, env(safe-area-inset-right, 0px));
	}
}

/* --- Immersive on touch devices: bottom sheet like the booking modal. ---
   Capability-based (matches the JS branch), not width-based, so wide coarse-pointer
   tablets get the sheet too. ~95% height keeps a sliver of page visible behind. */
@media (hover: none), (pointer: coarse) {
	dialog.pb-modal[data-pb-modal-size="immersive"] {
		padding: 0;
	}

	dialog.pb-modal[data-pb-modal-size="immersive"][open] {
		align-items: flex-end;
		justify-content: stretch;
	}

	dialog.pb-modal[data-pb-modal-size="immersive"] .pb-modal__panel {
		width: 100vw;
		height: 98vh;
		height: 98dvh;
		max-height: 98dvh;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #0b0d12;
		border-radius: 36px 36px 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@media (hover: none), (pointer: coarse) {
		dialog.pb-modal[data-pb-modal-size="immersive"][open] .pb-modal__panel {
			animation: pbm-slide-up 280ms ease-out both;
		}
	}
}

/* --- Entrance animation (respecting reduced motion). ---
   Keyframes live at top level so every media-gated animation rule can reach them. */
@keyframes pbm-fade-in {
	from {
		transform: translateY(12px);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes pbm-slide-up {
	from {
		transform: translateY(32px);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	dialog.pb-modal[open] .pb-modal__panel {
		animation: pbm-fade-in 240ms ease-out both;
	}

	@media (max-width: 767px) {
		dialog.pb-modal[open] .pb-modal__panel {
			animation: pbm-slide-up 280ms ease-out both;
		}
	}
}