/* Product gallery lightbox — built/toggled in main.js, injected once into
   <body> on any product page that has a .tour-gallery. */
.knt-language-welcome[hidden] {
	display: none;
}

.knt-language-welcome {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 20px;
}

.knt-language-welcome__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 46, 51, 0.72);
	backdrop-filter: blur(6px);
}

.knt-language-welcome__dialog {
	position: relative;
	width: min(100%, 560px);
	padding: 36px;
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	text-align: center;
}

.knt-language-welcome__eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
}

.knt-language-welcome__dialog h2 {
	margin: 0;
	color: var(--color-primary-dark);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.knt-language-welcome__dialog > p {
	margin: 10px 0 0;
	color: var(--color-text-light);
}

.knt-language-welcome__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 26px;
}

.knt-language-welcome__choice {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 700;
	text-align: left;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.knt-language-welcome__choice:hover,
.knt-language-welcome__choice:focus-visible,
.knt-language-welcome__choice.is-current {
	border-color: var(--color-primary);
	background: rgba(14, 124, 134, 0.07);
	color: var(--color-primary-dark);
	transform: translateY(-1px);
}

.knt-language-welcome__code {
	display: inline-grid;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	place-items: center;
	border-radius: 50%;
	background: var(--color-primary-dark);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.knt-language-welcome__hint {
	font-size: 0.75rem;
}

body.language-welcome-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.knt-language-welcome__dialog {
		padding: 28px 20px;
	}

	.knt-language-welcome__choices {
		grid-template-columns: 1fr;
	}
}

.knt-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	padding: 60px 60px 20px;
	background: rgba(9, 20, 23, 0.92);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
@media (max-width: 600px) {
	/* Klook-style "Tất cả hình ảnh" full scrollable page — the centered
	   popup+arrows below reads as small/cramped on a phone; this
	   swaps out the desktop popup's elements for the mobile-only ones
	   main.js always builds alongside them (.knt-lightbox-mobile-head/-list,
	   hidden by default in the non-media rule above). */
	.knt-lightbox {
		padding: 0;
		align-items: stretch;
		justify-content: flex-start;
		overflow-y: auto;
		/* Same "drag past the top/bottom of this element's own scroll
		   chains into the page behind it" issue as .knt-modal — this
		   element wasn't scrollable at all before the mobile redesign, so
		   it never needed this. */
		overscroll-behavior: contain;
		gap: 0;
		background: var(--color-bg);
	}
}

.knt-lightbox.is-open {
	display: flex;
}

/* Klook-style ≤600px "Tất cả hình ảnh" full scrollable page — hidden here,
   turned on (and the centered-popup elements below turned off) inside
   main.css's own ≤600px block. Default-hidden at every OTHER width so
   these two never show up on desktop. */
.knt-lightbox-mobile-head,
.knt-lightbox-mobile-list {
	display: none;
}
@media (max-width: 600px) {
	.knt-lightbox-mobile-head {
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
		z-index: 1;
		/* .knt-lightbox is display:flex (column) and its combined content
		   (this bar + the full scrollable photo list) is always taller than
		   the fixed viewport — flex items default to flex-shrink:1, so
		   WITHOUT this, the browser silently shrinks this bar down toward
		   its own content's natural min-height instead of actually
		   respecting the `height` below, no matter what that number is set
		   to (a value close to the natural floor won't show a visible
		   difference, which is why this is easy to miss). flex-shrink:0 forces
		   .knt-lightbox's own overflow-y:auto to handle the excess content
		   by scrolling, which is what should happen, instead of the flex
		   algorithm shrinking items to avoid needing to scroll at all. */
		flex-shrink: 0;
		/* Back to Material Design's own standard mobile top-app-bar height
		   (48-56dp spec — https://m3.material.io/components/app-bars/specs)
		   now that flex-shrink:0 above actually makes any height stick.
		   Decoupled from the real site header on purpose (tying it to
		   var(--header-height) meant the fallback px value here was
		   basically never visible in practice, since JS sets the real var
		   almost immediately on load). */
		height: 56px;
		padding: 0 12px;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
	}
}
@media (max-width: 600px) {
	.knt-lightbox-mobile-list {
		display: flex;
		flex-direction: column;
		/* Same flex-shrink:0 reasoning as .knt-lightbox-mobile-head above —
		   without it, this list (the OTHER flex child sharing the same
		   flex-shrink:1 default) could itself get squeezed shorter than
		   its own photos actually need, instead of .knt-lightbox's
		   overflow-y:auto just scrolling past the excess like it should. */
		flex-shrink: 0;
		gap: 16px;
		padding: 16px;
	}
}

.knt-lightbox-img {
	/* Capped well under the available space (not just constrained to
	   100%/100%) so the photo reads as "sized to fit", with visible dark
	   backdrop around it on every side, rather than a full-viewport
	   takeover — `flex: 1 1 auto` used to force it to grow and fill
	   whatever space was left, which is exactly what made it feel
	   full-size regardless of the image's own resolution. */
	max-width: min(1100px, 100%);
	max-height: 75vh;
	object-fit: contain;
	border-radius: var(--radius-lg);
	/* Flex items default to min-height:auto, which refuses to shrink below
	   the image's own intrinsic size. Without this, a tall photo could push
	   the thumbnail strip below the viewport instead of leaving room for it. */
	flex: 0 1 auto;
	min-height: 0;
}

.knt-lightbox-video {
	max-width: min(1100px, 100%);
	max-height: 75vh;
	object-fit: contain;
	border-radius: var(--radius-lg);
	flex: 0 1 auto;
	min-height: 0;
}

/* Tapping the native video controls' own fullscreen button puts the
   <video> element itself into the browser's real Fullscreen API state —
   but our own max-width/max-height/border-radius above are AUTHOR CSS,
   which still wins over the browser's default fullscreen sizing (that
   default isn't `!important`), so without this override the video stays
   capped at its normal windowed box — rounded corners and all, with the
   dimmed lightbox visible around it — even once fullscreen has genuinely
   engaged. Reset every constraint that fights true edge-to-edge sizing
   once `:fullscreen` is actually active; same fix applies to the ≤600px
   mobile list's own <video controls>. */
.knt-lightbox-video:fullscreen,
.knt-lightbox-video:-webkit-full-screen,
.knt-lightbox-mobile-item video:fullscreen,
.knt-lightbox-mobile-item video:-webkit-full-screen {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	border-radius: 0;
}

.knt-lightbox-close,
.knt-lightbox-prev,
.knt-lightbox-next {
	position: absolute;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.knt-lightbox-close {
	top: 20px;
	right: 20px;
}
@media (max-width: 600px) {
	/* Replaced by .knt-lightbox-mobile-close (a real child of the sticky
	   head bar, styled above) — this element is the desktop popup's OWN
	   close button, which only ever fought this width's layout (it needed
	   position:fixed to stop it scrolling away, then hand-picked `top`
	   math to center against a bar it wasn't even part of). */
	.knt-lightbox-close {
		display: none;
	}
}

.knt-lightbox-prev,
.knt-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
}

.knt-lightbox-prev {
	left: 20px;
}

.knt-lightbox-next {
	right: 20px;
}

/* CSS-drawn triangle caret (same border technique as .products-nav-icon) —
   avoids text glyphs like &lsaquo;/&rsaquo;, which render inconsistently
   across font stacks. */
.knt-lightbox-nav-icon {
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}

.knt-lightbox-nav-icon-prev {
	border-right: 9px solid #fff;
	margin-right: 2px;
}

.knt-lightbox-nav-icon-next {
	border-left: 9px solid #fff;
	margin-left: 2px;
}

.knt-lightbox-counter {
	/* Top-left, not bottom-center — bottom-center is now the thumbnail
	   strip's spot (below). */
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Thumbnail strip along the bottom — lets a visitor jump straight to any
   photo instead of only stepping one-at-a-time via prev/next. Only
   populated (main.js) when there's more than 1 photo; empty otherwise, so
   :empty hides it rather than leaving a dead gap. */
.knt-lightbox-thumbs {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
	max-width: 100%;
	overflow-x: auto;
	padding: 4px 2px;
}
@media (max-width: 600px) {
	/* The centered-popup desktop elements — replaced by the mobile head/list
	   above at this width, not just resized. */
	.knt-lightbox-img,
	.knt-lightbox-video,
	.knt-lightbox-prev,
	.knt-lightbox-next,
	.knt-lightbox-counter,
	.knt-lightbox-thumbs {
		display: none;
	}
}

.knt-lightbox-thumbs:empty {
	display: none;
}

.knt-lightbox-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 0;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.55;
}

.knt-lightbox-thumb img,
.knt-lightbox-thumb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.knt-lightbox-thumb.is-active {
	border-color: #fff;
	opacity: 1;
}

.knt-lightbox-thumb-video {
	position: relative;
}

.knt-lightbox-thumb-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid #fff;
	transform: translate(-35%, -50%);
	pointer-events: none;
}

body.knt-lightbox-open {
	overflow: hidden;
}

/* Generic modal (native <dialog>, wired in main.js via
   [data-knt-modal-open]/[data-knt-modal-close]) — used for "Xem tất cả N
   điểm nổi bật" and any future popup need. Centering, the dimmed backdrop
   and Escape-to-close are all free from showModal()/::backdrop — nothing
   to replicate here the way .knt-lightbox above (a plain toggled <div>)
   has to. Body-scroll locking, though, is NOT free (this comment used to
   claim it was) — see body.knt-modal-open below and main.js's matching
   'close' listener. overscroll-behavior:contain stops a drag that reaches
   the TOP/BOTTOM of this element's own `overflow-y: auto` scroll from
   chaining into whatever's behind it — without it, scrolling to the end of
   a long package sheet's "Chi Tiết" tab keeps going and scrolls the page
   underneath. */
.knt-modal {
	width: min(560px, calc(100vw - 40px));
	max-height: min(80vh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: auto;
	border: none;
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-lg);
	color: var(--color-text);
	/* Thin, subtle scrollbar instead of the browser's default — the default
	   full-width OS scrollbar butting right up against .knt-modal's own
	   rounded corner looks visually heavy/crude. Firefox via scrollbar-width/-color,
	   every Chromium/WebKit browser via the ::-webkit-scrollbar-* rules
	   below (there's no unprefixed standard for those yet). */
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

.knt-modal::-webkit-scrollbar {
	width: 6px;
}

.knt-modal::-webkit-scrollbar-track {
	background: transparent;
}

.knt-modal::-webkit-scrollbar-thumb {
	background-color: var(--color-border);
	border-radius: 999px;
}

/* Locks the page underneath while ANY .knt-modal is open (main.js toggles
   this on document.body) — same pattern as body.nav-open/.shop-filter-open
   elsewhere in this file. */
body.knt-modal-open {
	overflow: hidden;
}

.knt-modal::backdrop {
	background: rgba(9, 20, 23, 0.55);
}

.knt-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.knt-modal-title {
	margin: 0;
}

.knt-modal-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 999px;
	background: var(--color-bg-alt);
	color: var(--color-text-light);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.knt-modal-close:hover {
	color: var(--color-text);
}

/* Package "Chọn" sheet — 2 tabs (Chi Tiết / Lựa Chọn). Base .knt-modal
   styling (centered popup) covers desktop; becomes a full-width sheet
   pinned to the bottom of the screen on phone widths, overriding
   showModal()'s own centering (position/inset/margin) rather than
   fighting it. */
/* Header (title+tabs) truly fixed + only the body scrolls, via flexbox —
   NOT overflow-y:auto directly on the <dialog> itself, which renders its
   native scrollbar OUTSIDE .knt-package-sheet's own rounded corner, on the
   dark backdrop: a native <dialog>'s scrollbar doesn't reliably respect
   border-radius clipping the way a plain scrolling <div> does. Fix: the
   DIALOG no longer scrolls at all (overflow: hidden) — it's a flex column
   with the header as a fixed-size item and .knt-package-sheet-body (new
   wrapper, see PHP) as the one `flex: 1` item that actually scrolls,
   respecting .knt-package-sheet's own padding/radius normally, same as any
   ordinary <div>. */
.knt-package-sheet {
	max-height: min(85vh, 720px);
}

/* display:flex must be scoped to [open] — a plain `.knt-package-sheet {
   display: flex }` is an AUTHOR rule and beats the browser's own default
   `dialog { display: none }`, even though that default only applies via
   `:not([open])` — author styles win over UA styles regardless, so an
   unscoped rule here makes every package's popup render inline, permanently
   visible in the page flow instead of hidden until showModal(). `<dialog>`
   toggles the `open` HTML attribute itself on show()/showModal()/close(),
   so this selector needs no JS changes. */
.knt-package-sheet[open] {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 28px 0;
}

.knt-package-sheet .knt-modal-head,
.knt-package-sheet .knt-package-sheet-tabs {
	padding: 0 28px;
	flex-shrink: 0;
}

.knt-package-sheet-body {
	flex: 1 1 auto;
	/* Without min-height:0, a flex item refuses to shrink below its own
	   content's height, so it would just keep growing the dialog instead of
	   ever triggering its own overflow-y:auto. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 28px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

.knt-package-sheet-body::-webkit-scrollbar {
	width: 6px;
}

.knt-package-sheet-body::-webkit-scrollbar-track {
	background: transparent;
}

.knt-package-sheet-body::-webkit-scrollbar-thumb {
	background-color: var(--color-border);
	border-radius: 999px;
}

@media (max-width: 600px) {
	.knt-package-sheet {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		max-width: none;
		max-height: 85vh;
		margin: 0;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}
}

.knt-package-sheet-tabs {
	display: flex;
	gap: 24px;
	margin: 4px 0 20px;
	border-bottom: 1px solid var(--color-border);
}

.knt-package-sheet-tab {
	margin-bottom: -1px;
	padding: 0 0 12px;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	font: inherit;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-text-light);
	cursor: pointer;
}

.knt-package-sheet-tab.is-active {
	border-bottom-color: var(--color-primary);
	color: var(--color-primary-dark);
}

/* The "Lựa Chọn" tab's content reuses .ticket-tiers-qty/.ticket-tiers-total
   as-is — same bordered-box/highlighted-total-bar look the sidebar booking
   card already gave them, no extra spacing rules needed here (main.js's
   ".knt-package-sheet-select" block just gives each sheet its own
   self-contained total instead of one page-wide total element). */
.knt-package-sheet-cta {
	display: block;
	width: 100%;
	text-align: center;
}

/* "Xem chi tiết" trigger — opens the structured .knt-modal-package popup
   (knt_store_render_package_detail_modal(), functions.php) instead of an
   inline-expanding <details>/.ticket-package-desc blob. Plain <button>, so
   the site-wide button:active tap-feedback rule (top of this file) already
   covers it. */
/* Both trigger the package's "Chọn" sheet (see .knt-package-sheet below) —
   "Xem chi tiết" opens straight to its "Chi Tiết" tab, "Chọn" to "Lựa
   Chọn". Sit in one row, "Chọn" pushed to the right whether or not "Xem
   chi tiết" is present (a package with no extra detail fields renders no
   "Xem chi tiết" button at all). */
.ticket-package-card-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-top: 1px solid var(--color-border);
}

.ticket-package-details-btn {
	border: none;
	background: none;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--color-primary-dark);
}

.ticket-package-details-btn:hover {
	text-decoration: underline;
}

/* Hidden by default (desktop) — quantity/total for a package is picked
   directly in the sticky sidebar there (.booking-card-package-tiers below),
   so a second, disconnected picker inside this button's "Lựa Chọn" sheet
   tab would just be confusing. Both re-shown at <=900px, where the sidebar
   goes position:static and the sheet takes over instead — see the long
   comment above .booking-card-package-tiers in single-knt-shell.php. */
.ticket-package-choose-btn,
.knt-package-sheet-tab-select {
	display: none;
}
@media (max-width: 900px) {
	.knt-package-sheet-tab-select {
		display: block;
	}
}

.ticket-package-choose-btn {
	margin-left: auto;
	padding: 8px 22px;
	font-size: 0.875rem;
}
@media (max-width: 900px) {
	.ticket-package-choose-btn {
		display: inline-flex;
	}
}

/* Content INSIDE a package/room-type detail popup. */
.knt-modal-package-desc {
	font-size: 0.9375rem;
	color: var(--color-text-light);
	margin-bottom: 8px;
}

/* Reuses .knt-modal-package-desc's look for a 2+-package card's own "Mô tả
   ngắn", shown directly on the card above "Xem chi tiết" instead of only
   inside the popup — this modifier just adds the spacing needed against
   the card head above it, which the popup context doesn't need
   (.knt-modal-head already provides that spacing there). */
.ticket-package-desc-inline {
	margin-top: 10px;
	padding: 0 14px;
}

/* Up to 3 "Bao Gồm" lines shown directly on the card (see the PHP-side cap
   in template-parts/single-knt-shell.php — capped there, not here, so this
   is purely a display rule, never a clipping/truncation hack). */
.ticket-package-includes-preview {
	list-style: none;
	margin: 10px 0 0;
	padding: 0 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ticket-package-includes-preview li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--color-text-light);
}

.ticket-package-includes-preview .icon {
	width: 15px;
	height: 15px;
	margin-top: 2px;
	flex-shrink: 0;
	color: #059669;
}

.knt-modal-package-desc p {
	margin: 0 0 0.6em;
}

.knt-modal-package-desc p:last-child {
	margin-bottom: 0;
}

.knt-modal-package-section {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}

.knt-modal-package-section:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.knt-modal-package-section h4 {
	margin: 0 0 12px;
	font-size: 1rem;
}

.knt-modal-package-subhead {
	margin: 16px 0 8px;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--color-text-light);
}

.knt-modal-package-subhead:first-of-type {
	margin-top: 0;
}

.knt-modal-package-bullets {
	list-style: disc;
	padding-left: 1.2em;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.9375rem;
}

.knt-modal-package-usage {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.knt-modal-package-usage dt {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--color-text-light);
}

.knt-modal-package-usage dd {
	margin: 2px 0 0;
	font-size: 0.9375rem;
}