/**
 * Booking plugin skin — byteflows-travel-hotel-booking (JourneyLoom).
 *
 * Re-skins the plugin's own pages — single trip, single hotel, the trip and
 * hotel archives, taxonomy listings, search results, checkout, confirmation and
 * My Bookings — so they read as part of this theme rather than as a plugin
 * bolted onto it.
 *
 * WHY IT IS AN OVERRIDE AND NOT AN EDIT
 *
 * The plugin ships 81KB of `public.css` and updates it. Editing that file, or
 * copying its templates into the theme, means re-doing this work on every
 * release and silently losing any markup the plugin changes in between. This
 * file is loaded after `wptm-public` (declared as a dependency, so the order is
 * guaranteed) and overrides it from outside.
 *
 * WHY IT IS MOSTLY A TOKEN REMAP
 *
 * The plugin is properly tokenised: 30 custom properties on `:root` feed almost
 * every rule it has. Remapping those onto the theme's own tokens re-skins the
 * lot in one block — and keeps working when the plugin adds new components,
 * because those will use the same tokens. The section after it exists only for
 * the eighteen places where the plugin hardcoded its brand orange instead of
 * reaching for `var(--wptm-primary)`; each is restated here against the token,
 * so if the plugin tidies those up later this file simply agrees with it.
 *
 * WHAT IS DELIBERATELY LEFT ALONE
 *
 * `--wptm-success` and `--wptm-danger`. Those are state colours — a booking
 * confirmed, a payment failed — and a traveller reads green and red faster than
 * they read a brand. Rebranding them would cost more than it gained.
 */

/* ================================================================== tokens */

:root {
	/* Brand */
	--wptm-primary: var(--color-primary, #1273C4);
	--wptm-primary-hover: var(--color-primary-dark, #0B5596);
	--wptm-primary-light: var(--color-primary-light, #3E9BE8);
	--wptm-secondary: var(--color-secondary, #0E9BA8);
	--wptm-accent: var(--color-accent, #F0A93B);
	--wptm-gradient: var(--color-gradient, linear-gradient(115deg, #3E9BE8 0%, #1273C4 60%, #0B5596 100%));
	--wptm-primary-soft: color-mix(in srgb, var(--color-primary, #1273C4) 8%, transparent);
	--wptm-primary-ring: color-mix(in srgb, var(--color-primary, #1273C4) 18%, transparent);
	--wptm-ribbon-featured: var(--color-accent, #F0A93B);

	/* Ink */
	--wptm-dark: var(--color-black, #0C2338);
	--wptm-text: var(--color-body, #5A7387);
	--wptm-muted: var(--color-gray, #92A6B6);
	--wptm-white: var(--color-white, #ffffff);

	/* Surface */
	--wptm-border: var(--color-border, #D5E3EF);
	--wptm-bg: var(--color-tint, #F0F6FC);

	/* Type — the plugin ships Inter; the theme's families take over, and the
	   Inter request is dropped in PHP rather than left to download unused. */
	--wptm-font: var(--font-body, inherit);
	--wptm-font-display: var(--font-title, inherit);

	/* Shape */
	--wptm-radius: var(--border-radius-xl, 20px);
	--wptm-radius-sm: var(--border-radius-lg, 15px);

	/* Shadows, retinted off warm brown onto the navy ink so they sit on the
	   theme's grounds instead of floating a shade above them. */
	--wptm-shadow: 0 4px 6px -1px rgba(12, 35, 56, .07), 0 2px 4px -2px rgba(12, 35, 56, .05);
	--wptm-shadow-lg: 0 24px 40px -12px rgba(12, 35, 56, .16), 0 8px 16px -8px rgba(12, 35, 56, .08);
	--wptm-shadow-brand: 0 12px 28px color-mix(in srgb, var(--color-primary, #1273C4) 30%, transparent);
}

/* ===================================================== hardcoded leftovers */

/* Focus rings. Every one of these was `rgba(253,70,33,.1)` — the brand orange,
   written out by hand. Restated against the ring token so they follow the
   palette, and kept at the plugin's own specificity so source order decides. */
.wptm-search-field input:focus,
.wptm-search-field select:focus,
.wptm-filter-field input:focus,
.wptm-filter-field select:focus,
.wptm-booking-form .wptm-form-group input:focus,
.wptm-booking-form .wptm-form-group select:focus,
.wptm-booking-form .wptm-form-group textarea:focus,
.wptm-enquiry-form input:focus,
.wptm-enquiry-form select:focus,
.wptm-enquiry-form textarea:focus,
.wptm-ai-recommend input[type="text"]:focus {
	border-color: var(--wptm-primary);
	box-shadow: 0 0 0 3px var(--wptm-primary-ring);
}

/* Brand gradients that never reached for the token. */
.wptm-destination-card__placeholder,
.wptm-card-fallback,
.wptm-archive-hero--trip {
	background: var(--wptm-gradient);
}

.wptm-card-fallback--hotel,
.wptm-archive-hero--hotel {
	background: linear-gradient(135deg, var(--wptm-primary-hover), var(--wptm-primary));
}

.wptm-ai-chat__toggle {
	background: var(--wptm-gradient);
	box-shadow: var(--wptm-shadow-brand);
}

.wptm-btn--primary {
	background: var(--wptm-gradient);
}

.wptm-btn--primary:hover {
	box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--wptm-primary) 45%, transparent);
}

/* Soft tints and hairlines mixed from the orange by hand. */
.wptm-itinerary__daynum,
.wptm-ai-rec__score {
	background: var(--wptm-primary-soft);
}

.wptm-tag {
	border-color: color-mix(in srgb, var(--wptm-primary) 16%, transparent);
}

.wptm-hero-audio-btn.is-playing {
	border-color: color-mix(in srgb, var(--wptm-primary) 35%, transparent);
}

.wptm-fact:hover,
.wptm-room-card:hover {
	border-color: color-mix(in srgb, var(--wptm-primary) 26%, transparent);
}

/* =========================================================== theme fitting */

/* The plugin centres its pages at 1200px and the theme at 1320. Matching them
   is what stops a booking page from looking narrower than every other page on
   the site.

   Checkout is left out on purpose: the plugin holds it at 1000px, and a
   checkout column that wide is a form people lose their place in. Narrow is
   correct there. */
.wptm-single-content,
.wptm-archive-body,
.wptm-related__inner,
.wptm-single-hero__inner {
	max-width: 1320px;
}

/* ========================================================= listing pages */

/* One banner, not two. The theme's banner above already carries the title,
   a tagline, the result count and the breadcrumb, so the plugin's own hero on
   the trip / hotel archives and taxonomy pages is dropped — but only when the
   theme banner is actually on the page, so turning that off brings it back. */
body:has(.gp-breadcrumb-wrap) .wptm-archive-hero {
	display: none;
}

/* The filter card rises over the banner's lower edge. */
body:has(.gp-breadcrumb-wrap--listing) .wptm-archive-body .wptm-filter-bar {
	margin-top: clamp(-92px, -8vw, -70px);
}

.wptm-archive-body .wptm-filter-bar {
	position: relative;
	z-index: 3;
	margin-bottom: 40px;
	padding: 22px 24px 24px;
	border: 1px solid color-mix(in srgb, var(--wptm-border) 70%, transparent);
	border-radius: 24px;
	background-color: var(--wptm-white);
	box-shadow: 0 34px 70px -38px rgba(12, 35, 56, .42), 0 2px 8px rgba(12, 35, 56, .04);
}

/* Head: title left; the live count and Reset sit together on the right.
   Reset is positioned up here from its own row at the foot, which left it
   floating under the fields. */
.wptm-archive-body .wptm-filter-bar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	padding: 0 128px 16px 0;
	border-bottom: 1px solid var(--wptm-border);
}

.wptm-archive-body .wptm-filter-bar__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wptm-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--wptm-dark);
}

.wptm-archive-body .wptm-filter-bar__title svg {
	box-sizing: content-box;
	padding: 8px;
	border-radius: 50%;
	background-color: var(--wptm-primary-soft);
	color: var(--wptm-primary);
}

.wptm-archive-body .wptm-filter-count {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wptm-text);
}

.wptm-archive-body .wptm-filter-bar__actions {
	position: absolute;
	top: 22px;
	right: 24px;
	margin: 0;
}

.wptm-archive-body .wptm-filter-reset {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border: 1px solid var(--wptm-border);
	border-radius: 999px;
	background: var(--wptm-white);
	font-size: 13px;
	font-weight: 700;
	color: var(--wptm-dark);
	transition: border-color .2s, color .2s, background-color .2s;
}

.wptm-archive-body .wptm-filter-reset:hover,
.wptm-archive-body .wptm-filter-reset:focus-visible {
	border-color: var(--wptm-primary);
	background: var(--wptm-primary-soft);
	color: var(--wptm-primary);
}

/* Four even columns: keyword + two filters on the first row, the rest and
   Sort on the second — no lone field stranded on a row of its own. */
.wptm-archive-body .wptm-filter-bar__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.wptm-archive-body .wptm-filter-field--search {
	grid-column: span 2;
}

.wptm-archive-body .wptm-filter-field label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wptm-text);
}

.wptm-archive-body .wptm-filter-field select,
.wptm-archive-body .wptm-filter-field input {
	height: 48px;
	padding: 0 14px;
	border-radius: 14px;
	border-color: var(--wptm-border);
	background-color: var(--wptm-bg);
	font-size: 14.5px;
	color: var(--wptm-dark);
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.wptm-archive-body .wptm-filter-field select {
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%235A7387' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.wptm-archive-body .wptm-filter-field select:hover,
.wptm-archive-body .wptm-filter-field input:hover {
	border-color: color-mix(in srgb, var(--wptm-primary) 35%, var(--wptm-border));
}

.wptm-archive-body .wptm-filter-field select:focus,
.wptm-archive-body .wptm-filter-field input:focus {
	background-color: var(--wptm-white);
}

.wptm-archive-body .wptm-filter-search {
	position: relative;
}

.wptm-archive-body .wptm-filter-search svg {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	color: var(--wptm-text);
	pointer-events: none;
}

.wptm-archive-body .wptm-filter-search input {
	padding-left: 42px;
}

.wptm-archive-body .wptm-filter-price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wptm-archive-body .wptm-filter-price span {
	color: var(--wptm-muted);
}

@media (max-width: 991px) {
	.wptm-archive-body .wptm-filter-bar__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.wptm-archive-body .wptm-filter-bar {
		padding: 18px 16px 20px;
		border-radius: 20px;
	}

	.wptm-archive-body .wptm-filter-bar__head {
		padding-right: 96px;
	}

	.wptm-archive-body .wptm-filter-bar__actions {
		top: 18px;
		right: 16px;
	}

	.wptm-archive-body .wptm-filter-bar__grid {
		gap: 12px;
	}

	.wptm-archive-body .wptm-filter-field--search,
	.wptm-archive-body .wptm-filter-field--price {
		grid-column: 1 / -1;
	}
}

/* Section headings carry the theme's display face and weight; the plugin's
   underline becomes the theme's own hairline. */
.wptm-section__title {
	font-family: var(--wptm-font-display);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--wptm-dark);
	border-bottom-color: var(--wptm-border);
}

/* Buttons take the theme's pill shape rather than the plugin's soft rectangle,
   which is the single most visible difference between the two. */
.wptm-btn,
.wptm-btn--primary,
.wptm-btn--outline,
.wptm-btn--sm,
.wptm-btn--lg {
	border-radius: 999px;
	font-family: var(--wptm-font-display);
	font-weight: 700;
	letter-spacing: .01em;
}

/* The hero title on a single trip is the page's `h1`; give it the theme's
   display face so it matches every other page's headline. */
.wptm-single-hero__title {
	font-family: var(--wptm-font-display);
	letter-spacing: -.02em;
}

/* Cards: the theme's shadow language is a wide, low, tinted drop rather than
   the plugin's tighter one. */
.wptm-trip-card,
.wptm-hotel-card {
	border-radius: var(--wptm-radius);
}

.wptm-trip-card:hover,
.wptm-hotel-card:hover {
	box-shadow: 0 28px 50px -20px rgba(12, 35, 56, .28);
}

/* The rating stars pick up the palette's gold, which is the colour the rest of
   the site already uses for them. */
.wptm-rating,
.wptm-stars {
	color: var(--color-star, #F0A93B);
}

/* ============================================================ term cards */

/* [wptm_destinations] / [wptm_terms] — the Hotel Types, Activities, Trip Types
   pages. Most terms have no image, and the plugin fills those with one flat
   gradient and a centred icon, so a row of them reads as six identical blue
   blocks. Here each card gets its own tone from the palette, the icon moves
   into a glass badge in the corner, the count becomes a pill and a hover arrow
   says the card is a link. Cards with a real image keep it full-bleed under a
   dark scrim. */
.wptm-destinations-grid {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 24px;
}

.wptm-destination-card {
	--gx-tone: linear-gradient(145deg, #3E9BE8 0%, #1273C4 55%, #0B5596 100%);
	isolation: isolate;
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	background: var(--wptm-dark);
	box-shadow: 0 18px 36px -22px rgba(12, 35, 56, .45);
	transform: translateZ(0);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}

.wptm-destination-card:nth-child(6n + 2) { --gx-tone: linear-gradient(145deg, #2EC4CF 0%, #0E9BA8 55%, #09656F 100%); }
.wptm-destination-card:nth-child(6n + 3) { --gx-tone: linear-gradient(145deg, #2F6B9E 0%, #173F63 55%, #0C2338 100%); }
.wptm-destination-card:nth-child(6n + 4) { --gx-tone: linear-gradient(145deg, #F4BC5E 0%, #E08A2A 55%, #A9560F 100%); }
.wptm-destination-card:nth-child(6n + 5) { --gx-tone: linear-gradient(145deg, #5AA9F0 0%, #0E9BA8 100%); }
.wptm-destination-card:nth-child(6n + 6) { --gx-tone: linear-gradient(145deg, #1273C4 0%, #0B5596 50%, #0C2338 100%); }

.wptm-destination-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 50px -22px rgba(12, 35, 56, .55);
}

.wptm-destination-card:focus-visible {
	outline: 3px solid var(--wptm-primary-ring);
	outline-offset: 3px;
}

/* The no-image fill: tone, a soft light bloom and a faint dot grid. */
.wptm-destinations-grid .wptm-destination-card__placeholder {
	position: relative;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 20px;
	background: var(--gx-tone);
	transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.wptm-destination-card__placeholder::before,
.wptm-destination-card__placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wptm-destination-card__placeholder::before {
	background:
		radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .32), transparent 42%),
		radial-gradient(circle at 10% 110%, rgba(255, 255, 255, .14), transparent 45%);
}

.wptm-destination-card__placeholder::after {
	background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.4px);
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
	mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
}

.wptm-destinations-grid .wptm-destination-card__placeholder .wptm-icon,
.wptm-destinations-grid .wptm-destination-card__placeholder svg {
	position: relative;
	z-index: 1;
	box-sizing: content-box;
	width: 26px;
	height: 26px;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 18px;
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
	color: #fff;
	opacity: 1;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

/* The plugin scales the whole fill on hover, which drags the badge with it and
   blurs it. Only the badge moves now. */
.wptm-destinations-grid .wptm-destination-card:hover .wptm-destination-card__placeholder {
	transform: none;
}

.wptm-destinations-grid .wptm-destination-card:hover .wptm-destination-card__placeholder svg {
	transform: translateY(-2px) rotate(-6deg);
}

.wptm-destination-card img {
	transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.wptm-destination-card:hover img {
	transform: scale(1.06);
}

/* Name and count. A scrim only where there's a photo to read over; on the
   gradients the text is already on a known ground. */
.wptm-destination-overlay {
	z-index: 2;
	padding: 20px 20px 22px;
	background: linear-gradient(180deg, transparent, rgba(12, 35, 56, .35));
}

.wptm-destination-card:has(img) .wptm-destination-overlay {
	padding-top: 60px;
	background: linear-gradient(180deg, transparent, rgba(12, 35, 56, .82));
}

.wptm-destinations-grid .wptm-destination-overlay h3 {
	margin: 0 0 10px;
	font-family: var(--wptm-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #fff;
	text-shadow: 0 1px 12px rgba(12, 35, 56, .25);
}

.wptm-destinations-grid .wptm-destination-overlay span {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 11px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
	opacity: 1;
}

/* Hover arrow, top right. */
.wptm-destination-card::after {
	content: "";
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='%230C2338' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
	box-shadow: 0 8px 20px -6px rgba(12, 35, 56, .4);
	opacity: 0;
	transform: translate(-6px, 6px) scale(.85);
	transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.wptm-destination-card:hover::after,
.wptm-destination-card:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (max-width: 575px) {
	.wptm-destinations-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.wptm-destination-card {
		border-radius: 20px;
	}

	.wptm-destinations-grid .wptm-destination-card__placeholder {
		padding: 14px;
	}

	.wptm-destinations-grid .wptm-destination-card__placeholder svg {
		width: 22px;
		height: 22px;
		padding: 11px;
		border-radius: 15px;
	}

	.wptm-destination-overlay {
		padding: 14px 14px 16px;
	}

	.wptm-destinations-grid .wptm-destination-overlay h3 {
		font-size: 16px;
		margin-bottom: 8px;
	}

	/* No hover on touch; the arrow would only ever show mid-tap. */
	.wptm-destination-card::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wptm-destination-card,
	.wptm-destination-card img,
	.wptm-destination-card::after,
	.wptm-destinations-grid .wptm-destination-card__placeholder svg {
		transition: none;
	}

	.wptm-destination-card:hover,
	.wptm-destination-card:hover img,
	.wptm-destinations-grid .wptm-destination-card:hover .wptm-destination-card__placeholder svg {
		transform: none;
	}
}

/* =============================================================== fallbacks */

/* color-mix is recent enough that a couple of shipping browsers still miss it;
   without these the tints and rings resolve to transparent. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--wptm-primary-soft: rgba(18, 115, 196, .08);
		--wptm-primary-ring: rgba(18, 115, 196, .18);
		--wptm-shadow-brand: 0 12px 28px rgba(18, 115, 196, .3);
	}

	.wptm-tag {
		border-color: rgba(18, 115, 196, .16);
	}

	.wptm-hero-audio-btn.is-playing {
		border-color: rgba(18, 115, 196, .35);
	}

	.wptm-fact:hover,
	.wptm-room-card:hover {
		border-color: rgba(18, 115, 196, .26);
	}

	.wptm-btn--primary:hover {
		box-shadow: 0 10px 24px -6px rgba(18, 115, 196, .45);
	}
}