/**
 * Pricing widget — Style 1, "Plan Switch".
 *
 * A centred heading, a monthly/yearly segmented switch, and a row of plan cards
 * whose price tag hangs off the photo rather than sitting above it.
 *
 * The switch is CSS, not JavaScript. Two radio inputs carry the state and every
 * yearly rule hangs off `:has()`, so the prices swap, the thumb slides and the
 * "billed yearly" line appears on a page where the script never loads. The JS
 * mirrors the same state onto `.goxom-pr--yearly` for browsers without `:has()`
 * — which is why each of those selectors is written as `:is(class, :has(...))`:
 * `:is()` is forgiving, so the half a browser cannot parse is dropped instead of
 * taking the whole rule down with it.
 *
 * Colour and type resolve through component tokens declared on `.goxom-pr`,
 * each pointing at a theme global first with a literal fallback for the
 * Elementor editor, where the theme stylesheet is not always loaded.
 */

.goxom-pr {
	/* Brand */
	--pr-primary: var(--color-primary, #1273C4);
	--pr-primary-dark: var(--color-primary-dark, #0B5596);

	/* Ink */
	--pr-title: var(--color-black, #0C2338);
	--pr-body: var(--color-body, #5A7387);
	--pr-white: var(--color-white, #ffffff);

	/* Surface */
	--pr-tint: var(--color-tint, #F0F6FC);
	--pr-line: var(--color-border, #D5E3EF);
	--pr-dark: var(--color-dark, #061726);

	/* Type */
	--pr-font-title: var(--font-title, inherit);
	--pr-font-body: var(--font-body, inherit);

	/* Per-card, overridden by the accent control on each repeater item. */
	--pr-accent: var(--pr-primary);

	/* The label sitting on the switch's thumb. A token rather than a literal so
	   the Label Color control — which targets `.goxom-pr__opt` and would
	   otherwise repaint the selected side into its own background — has
	   something separate to leave alone. */
	--pr-on: var(--pr-white);

	--pr-ease: cubic-bezier(.22, .61, .36, 1);

	position: relative;
	overflow: hidden;
	padding: 100px 20px;
	font-family: var(--pr-font-body);
}

.goxom-pr__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin-inline: auto;
}

/* Two soft blooms rather than a flat wash: they give the white cards something
   to sit on without putting a second colour under the whole section. */
.goxom-pr__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(520px circle at 12% 8%, color-mix(in srgb, var(--pr-primary) 13%, transparent), transparent 62%),
		radial-gradient(620px circle at 88% 78%, color-mix(in srgb, var(--pr-primary-dark) 11%, transparent), transparent 64%);
}

/* ================================================================== heading */

.goxom-pr__head {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.goxom-pr--left .goxom-pr__head {
	margin-inline: 0;
	text-align: left;
}

.goxom-pr__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 14px;
	font-family: var(--pr-font-title);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pr-primary);
}

.goxom-pr__spark {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
}

.goxom-pr__title {
	margin: 0 0 18px;
	font-family: var(--pr-font-title);
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.16;
	font-weight: 700;
	color: var(--pr-title);
}

/* Word masking for the title animation — the JS injects these, so with no JS
   the heading stays plain text. */
.goxom-pr__title .goxom-pr__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.goxom-pr__title .goxom-pr__w > span {
	display: inline-block;
	will-change: transform;
}

.goxom-pr__desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--pr-body);
}

/* =================================================================== switch */

.goxom-pr__switch-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 52px;
}

.goxom-pr--left .goxom-pr__switch-wrap {
	justify-content: flex-start;
}

/* A grid, not inline-flex: at auto width, flex sizes each option to its own
   label, so "Yearly + Save 24%" came out wider than "Monthly" and the
   half-width thumb ran over the yearly label. Two `1fr` tracks in an auto-
   sized grid both take the wider label's width, which is exactly what the
   thumb assumes. (The thumb is absolutely positioned, so it takes no cell.) */
.goxom-pr__switch {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	padding: 5px;
	border-radius: 999px;
	border: 1px solid var(--pr-line);
	background-color: var(--pr-white);
	box-shadow: 0 16px 34px -26px color-mix(in srgb, var(--pr-title) 60%, transparent);
}

/* The thumb is exactly half the track minus the padding, so `translateX(100%)`
   — its own width — lands it flush against the right edge at any track size. */
.goxom-pr__thumb {
	position: absolute;
	z-index: 0;
	top: 5px;
	bottom: 5px;
	left: 5px;
	width: calc(50% - 5px);
	border-radius: 999px;
	background-color: var(--pr-primary);
	transition: transform .45s var(--pr-ease);
}

.goxom-pr__opt {
	position: relative;
	z-index: 1;
	/* Equal halves come from the switch's grid tracks. */
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 26px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	font-family: var(--pr-font-title);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pr-body);
	transition: color .35s var(--pr-ease);
	-webkit-tap-highlight-color: transparent;
}

/* Offscreen, never `display: none`: the radios are the control, and a hidden
   input is not focusable, not tabbable and not announced. The widget ships its
   own copy rather than leaning on the theme's `.screen-reader-text`, which is
   not guaranteed to be on the page. */
.goxom-pr__sr,
.goxom-pr__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.goxom-pr__radio:focus-visible ~ .goxom-pr__opt-label {
	outline: 2px solid var(--pr-primary-dark);
	outline-offset: 5px;
	border-radius: 4px;
}

.goxom-pr__save {
	padding: 4px 9px;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--pr-primary) 16%, transparent);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.2;
	color: var(--pr-primary-dark);
	transition: background-color .35s var(--pr-ease), color .35s var(--pr-ease);
}

/* The monthly side is lit by default; the yearly rules below take over. Three
   classes deep to outrank the Label Color control, which lands at two. */
.goxom-pr .goxom-pr__switch .goxom-pr__opt--month {
	color: var(--pr-on);
}

/* ------------------------------------------------------------ yearly state */

.goxom-pr:is(.goxom-pr--yearly, :has(.goxom-pr__radio--year:checked)) .goxom-pr__thumb {
	transform: translateX(100%);
}

.goxom-pr:is(.goxom-pr--yearly, :has(.goxom-pr__radio--year:checked)) .goxom-pr__opt--month {
	color: var(--pr-body);
}

.goxom-pr:is(.goxom-pr--yearly, :has(.goxom-pr__radio--year:checked)) .goxom-pr__opt--year {
	color: var(--pr-on);
}

.goxom-pr:is(.goxom-pr--yearly, :has(.goxom-pr__radio--year:checked)) .goxom-pr__save {
	background-color: color-mix(in srgb, #fff 22%, transparent);
	color: var(--pr-on);
}

.goxom-pr:is(.goxom-pr--yearly, :has(.goxom-pr__radio--year:checked)) .goxom-pr__amount--month {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-90%);
}

.goxom-pr:is(.goxom-pr--yearly, :has(.goxom-pr__radio--year:checked)) .goxom-pr__amount--year {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.goxom-pr:is(.goxom-pr--yearly, :has(.goxom-pr__radio--year:checked)) .goxom-pr__equiv {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* ==================================================================== grid */

.goxom-pr__grid {
	--pr-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--pr-cols), minmax(0, 1fr));
	gap: 30px;
	/* Start, not stretch: the featured card is scaled, and a stretched row
	   would hand every card the tallest one's height and hide the difference. */
	align-items: start;
}

/* ==================================================================== card */

.goxom-pr__card {
	--pr-lift: 1;
	position: relative;
	/* The ribbon sits over the top edge, so the card cannot clip — the photo
	   inside does its own clipping instead. */
	overflow: visible;
	display: flex;
	flex-direction: column;
	padding: 18px 18px 26px;
	border-radius: 26px;
	border: 1px solid var(--pr-line);
	background-color: var(--pr-white);
	transform: scale(var(--pr-lift));
	transition: transform .5s var(--pr-ease), box-shadow .5s var(--pr-ease), border-color .5s var(--pr-ease);
	isolation: isolate;
}

/* A glow that follows the cursor. `--pr-mx/--pr-my` are written by the JS on
   pointer move and default to the card's top centre, so the untouched state is
   still a deliberate one. */
.goxom-pr__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	background-image: radial-gradient(
		340px circle at var(--pr-mx, 50%) var(--pr-my, 0%),
		color-mix(in srgb, var(--pr-accent) 15%, transparent),
		transparent 68%
	);
	transition: opacity .45s var(--pr-ease);
}

.goxom-pr__card > * {
	position: relative;
	z-index: 1;
}

.goxom-pr--spot .goxom-pr__card:hover::after,
.goxom-pr--spot .goxom-pr__card:focus-within::after {
	opacity: 1;
}

.goxom-pr__card:hover,
.goxom-pr__card.is-hold,
.goxom-pr__card:focus-within {
	border-color: color-mix(in srgb, var(--pr-accent) 40%, var(--pr-line));
	transform: translateY(-8px) scale(var(--pr-lift));
	box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--pr-title) 65%, transparent);
}

.goxom-pr__card--featured {
	--pr-lift: 1.035;
	border-color: color-mix(in srgb, var(--pr-accent) 45%, var(--pr-line));
	box-shadow: 0 34px 64px -42px color-mix(in srgb, var(--pr-accent) 85%, transparent);
}

.goxom-pr__ribbon {
	position: absolute;
	z-index: 3;
	top: -14px;
	right: 24px;
	padding: 7px 15px;
	border-radius: 999px;
	background-color: var(--pr-accent);
	color: var(--pr-white);
	font-family: var(--pr-font-title);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--pr-accent) 90%, transparent);
}

/* ------------------------------------------------------------------- media */

/* The tag and the round photo both hang below the photo's edge, so the gap
   under the media has to clear the deeper of the two. */
.goxom-pr__media {
	position: relative;
	margin: 0 0 30px;
}

.goxom-pr__photo {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 1.42;
	border-radius: 20px;
	background-color: var(--pr-tint);
}

/* The parent class is in this selector to win a specificity fight, not for
   readability: Elementor ships `.elementor img { height: auto }` at (0,1,1),
   which outranks a lone `.goxom-pr__img` at (0,1,0) — and `height: auto` on an
   absolutely positioned replaced element resolves to the file's intrinsic
   height and ignores `bottom`, leaving a strip of background beneath it. */
.goxom-pr__photo .goxom-pr__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--pr-ease);
}

.goxom-pr__card:hover .goxom-pr__img {
	transform: scale(1.06);
}

.goxom-pr__avatar {
	position: absolute;
	z-index: 2;
	left: 16px;
	bottom: -20px;
	width: 64px;
	height: 64px;
}

.goxom-pr__avatar .goxom-pr__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	border: 4px solid var(--pr-white);
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--pr-tint);
	box-shadow: 0 16px 28px -18px color-mix(in srgb, var(--pr-title) 70%, transparent);
}

/* --------------------------------------------------------------- price tag */

/* Anchored to the photo instead of stacked above it: the number then belongs to
   the trip you are looking at, and the card's first line can be its name. */
.goxom-pr__tag {
	position: absolute;
	z-index: 2;
	right: 14px;
	bottom: -18px;
	padding: 12px 18px;
	border-radius: 16px;
	background-color: var(--pr-white);
	box-shadow: 0 24px 44px -26px color-mix(in srgb, var(--pr-title) 70%, transparent);
	text-align: right;
}

.goxom-pr__card--featured .goxom-pr__tag {
	background-color: var(--pr-accent);
}

/* Both prices occupy one grid cell and the box clips: the outgoing number
   leaves through the top while the incoming one arrives from below. */
.goxom-pr__roll {
	display: grid;
	overflow: hidden;
}

.goxom-pr__amount {
	grid-area: 1 / 1;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 1px;
	margin: 0;
	font-family: var(--pr-font-title);
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	/* Tabular figures so 99 and 990 do not shuffle the tag sideways. */
	font-variant-numeric: tabular-nums;
	color: var(--pr-title);
	/* `visibility` earns its place beside opacity: both prices stay in the DOM
	   in both states, and an opacity of 0 alone would leave the inactive one in
	   the accessibility tree for a screen reader to read out as a second price.
	   It is a discrete property, so it flips mid-transition and never clips the
	   roll. */
	visibility: visible;
	transition: opacity .4s var(--pr-ease), transform .5s var(--pr-ease), visibility .4s var(--pr-ease);
}

.goxom-pr__card--featured .goxom-pr__amount {
	color: var(--pr-white);
}

.goxom-pr__amount--year {
	opacity: 0;
	visibility: hidden;
	transform: translateY(90%);
}

.goxom-pr__cur {
	align-self: flex-start;
	margin-right: 1px;
	font-size: .55em;
	font-weight: 700;
	line-height: 1.6;
}

.goxom-pr__per {
	font-size: .42em;
	font-weight: 600;
	letter-spacing: 0;
	opacity: .72;
}

/* A row that grows into place rather than appearing: `grid-template-rows` is
   animatable where `height: auto` is not, so the tag expands to explain itself
   the moment the yearly price needs explaining. */
.goxom-pr__equiv {
	display: grid;
	grid-template-rows: 0fr;
	margin: 0;
	opacity: 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--pr-body);
	transition: grid-template-rows .45s var(--pr-ease), opacity .35s var(--pr-ease);
}

/* The spacing lives on the inner row, not as a margin on the grid: a margin
   would hold the gap open while the row is still collapsed to 0fr. */
.goxom-pr__equiv > span {
	overflow: hidden;
	min-height: 0;
	padding-top: 5px;
}

.goxom-pr__card--featured .goxom-pr__equiv {
	color: color-mix(in srgb, #fff 82%, transparent);
}

/* -------------------------------------------------------------------- body */

.goxom-pr__name {
	margin: 0 0 8px;
	font-family: var(--pr-font-title);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--pr-title);
}

.goxom-pr__text {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pr-body);
}

.goxom-pr__metas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	padding: 0;
	list-style: none;
}

.goxom-pr__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: 9px;
	background-color: var(--pr-tint);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pr-body);
}

.goxom-pr__meta-ico {
	display: inline-flex;
	font-size: 14px;
	line-height: 1;
	color: var(--pr-accent);
}

.goxom-pr__meta-ico svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ---------------------------------------------------------------- features */

.goxom-pr__feats {
	display: grid;
	gap: 14px;
	margin: 0 0 26px;
	padding: 22px 0 0;
	border-top: 1px solid var(--pr-line);
	list-style: none;
}

.goxom-pr__feat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 11px;
	align-items: start;
}

.goxom-pr__feat-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--pr-accent) 14%, transparent);
	color: var(--pr-accent);
}

.goxom-pr__feat-ico svg {
	display: block;
	width: 12px;
	height: 12px;
}

.goxom-pr__feat-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pr-title);
}

/* An excluded line is greyed and struck through rather than dropped: knowing
   what a plan leaves out is most of what a pricing table is read for. */
.goxom-pr__feat--off .goxom-pr__feat-ico {
	background-color: var(--pr-tint);
	color: var(--pr-body);
}

.goxom-pr__feat--off .goxom-pr__feat-text {
	color: var(--pr-body);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--pr-body) 55%, transparent);
}

/* ------------------------------------------------------------------ button */

.goxom-pr__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* Pushed to the bottom so buttons line up across cards of unequal height. */
	margin-top: auto;
	padding: 16px 26px;
	border-radius: 999px;
	background-color: var(--pr-dark);
	color: var(--pr-white);
	font-family: var(--pr-font-title);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color .35s var(--pr-ease), transform .35s var(--pr-ease), box-shadow .35s var(--pr-ease);
}

.goxom-pr__card--featured .goxom-pr__btn {
	background-color: var(--pr-accent);
}

.goxom-pr__btn:hover,
.goxom-pr__btn:focus-visible {
	color: var(--pr-white);
	background-color: var(--pr-accent);
	transform: translateY(-2px);
	box-shadow: 0 20px 36px -18px color-mix(in srgb, var(--pr-accent) 88%, transparent);
}

.goxom-pr__card--featured .goxom-pr__btn:hover {
	background-color: var(--pr-dark);
}

.goxom-pr__btn svg {
	flex: 0 0 auto;
	transition: transform .35s var(--pr-ease);
}

.goxom-pr__btn:hover svg {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------- note */

.goxom-pr__note {
	margin: 34px 0 0;
	text-align: center;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pr-body);
}

.goxom-pr--left .goxom-pr__note {
	text-align: left;
}

/* ================================================================== reveals */

/* Only hide things once JS has confirmed it will animate them. */
.goxom-pr--js .goxom-pr__eyebrow,
.goxom-pr--js .goxom-pr__desc,
.goxom-pr--js .goxom-pr__switch-wrap,
.goxom-pr--js .goxom-pr__card,
.goxom-pr--js .goxom-pr__note {
	opacity: 0;
}

/* =============================================================== breakpoints */

@media (max-width: 1200px) {
	.goxom-pr__grid {
		--pr-cols: 2;
	}
}

@media (max-width: 991px) {
	.goxom-pr__grid {
		gap: 24px;
	}

	/* The scale is a desktop flourish; at two columns it only crowds the gap. */
	.goxom-pr__card--featured {
		--pr-lift: 1;
	}
}

@media (max-width: 767px) {
	.goxom-pr {
		padding: 64px 16px;
	}

	.goxom-pr__grid {
		--pr-cols: 1;
	}

	.goxom-pr__switch-wrap {
		margin-bottom: 36px;
	}

	.goxom-pr__switch {
		width: 100%;
	}

	.goxom-pr__opt {
		padding: 12px 14px;
		font-size: 14px;
	}

	.goxom-pr__save {
		padding: 3px 7px;
		font-size: 10.5px;
	}

	.goxom-pr__tag {
		right: 12px;
		padding: 10px 15px;
	}
}

/* color-mix is recent enough that a couple of shipping browsers still miss it;
   without these the glow, the tints and the shadows render transparent. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.goxom-pr__glow {
		background-image: none;
	}

	.goxom-pr__card::after {
		background-image: none;
	}

	.goxom-pr__card:hover {
		border-color: var(--pr-accent);
		box-shadow: 0 40px 70px -40px rgba(12, 35, 56, .65);
	}

	.goxom-pr__card--featured {
		border-color: var(--pr-accent);
		box-shadow: 0 34px 64px -42px rgba(12, 35, 56, .5);
	}

	.goxom-pr__save {
		background-color: var(--pr-tint);
	}

	.goxom-pr:is(.goxom-pr--yearly, :has(.goxom-pr__radio--year:checked)) .goxom-pr__save {
		background-color: rgba(255, 255, 255, .22);
	}

	.goxom-pr__feat-ico {
		background-color: var(--pr-tint);
	}

	.goxom-pr__tag,
	.goxom-pr__avatar .goxom-pr__avatar-img,
	.goxom-pr__ribbon,
	.goxom-pr__switch {
		box-shadow: 0 24px 44px -26px rgba(12, 35, 56, .7);
	}

	.goxom-pr__btn:hover {
		box-shadow: 0 20px 36px -18px rgba(12, 35, 56, .8);
	}

	.goxom-pr__feat--off .goxom-pr__feat-text {
		text-decoration-color: currentColor;
	}
}

@media (prefers-reduced-motion: reduce) {
	.goxom-pr__card,
	.goxom-pr__card::after,
	.goxom-pr__img,
	.goxom-pr__btn,
	.goxom-pr__btn svg,
	.goxom-pr__thumb,
	.goxom-pr__opt,
	.goxom-pr__save,
	.goxom-pr__amount,
	.goxom-pr__equiv {
		transition: none !important;
	}

	.goxom-pr--js .goxom-pr__eyebrow,
	.goxom-pr--js .goxom-pr__desc,
	.goxom-pr--js .goxom-pr__switch-wrap,
	.goxom-pr--js .goxom-pr__card,
	.goxom-pr--js .goxom-pr__note {
		opacity: 1 !important;
		transform: scale(var(--pr-lift, 1)) !important;
	}
}