/*!
 * UBH Starter Kit — design system
 * Tokens and components ported from the Ultimate Bali Holidays prototype,
 * mapped onto Elementor markup. Every component is opt-in via a CSS class
 * (Advanced → CSS Classes). Settings made in a widget's Style tab override
 * these defaults because Elementor's per-element CSS is more specific.
 *
 * Breakpoints follow Elementor: tablet ≤ 1024px, mobile ≤ 767px.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	/* Brand palette */
	--ubh-navy-900: #092a46;
	--ubh-charcoal-900: #202a33;
	--ubh-orange-500: #ff5a1f;
	--ubh-orange-600: #d4400c;
	--ubh-orange-700: #b8360a;
	--ubh-orange-ink: #c93c0a;
	--ubh-turquoise-500: #19b8b2;
	--ubh-turquoise-ink: #0f7c77;
	--ubh-sky-500: #19a9d8;
	--ubh-sky-ink: #0b6f93;
	--ubh-gold-500: #f5a623;
	--ubh-band-blue: #0f4a7c;
	--ubh-grey-50: #f3f5f7;
	--ubh-grey-200: #dce1e6;
	--ubh-grey-500: #7d8893;
	--ubh-grey-700: #5b6670;
	--ubh-white: #fff;

	/* Semantic */
	--color-bg: var(--ubh-white);
	--color-surface: var(--ubh-grey-50);
	--color-surface-inverse: var(--ubh-navy-900);
	--color-text: var(--ubh-charcoal-900);
	--color-text-heading: var(--ubh-navy-900);
	--color-text-muted: var(--ubh-grey-700);
	--color-text-inverse: var(--ubh-white);
	--color-border: var(--ubh-grey-200);
	--color-border-input: var(--ubh-grey-500);
	--color-action-bg: var(--ubh-orange-600);
	--color-action-bg-hover: var(--ubh-orange-700);
	--color-link: var(--ubh-sky-ink);
	--color-member: var(--ubh-turquoise-ink);
	--color-member-tint: #e6f7f6;
	--color-savings: var(--ubh-orange-ink);
	--color-savings-tint: #fff1ea;
	--color-accent-rule: var(--ubh-orange-500);
	--color-success: #15803d;
	--color-success-tint: #ecfdf3;
	--color-warning: #b54708;
	--color-warning-tint: #fffaeb;
	--color-danger: #b42318;
	--color-danger-tint: #fef3f2;
	--color-info-tint: #e7f3f8;
	--color-focus: var(--ubh-sky-ink);

	/* Type */
	--font-display: "Jost", Arial, Helvetica, sans-serif;
	--font-body: "Roboto", Arial, Helvetica, sans-serif;
	--fs-display: clamp(2.6rem, 1.7rem + 4vw, 5rem);
	--fs-h1: clamp(2.375rem, 1.95rem + 1.8vw, 3.5rem);
	--fs-h2: clamp(1.875rem, 1.65rem + 0.95vw, 2.5rem);
	--fs-h3: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
	--fs-h4: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
	--fs-body-lg: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-meta: 0.8125rem;
	--fs-price: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);
	--lh-heading: 1.15;
	--lh-ui: 1.25;
	--lh-body: 1.55;
	--lh-small: 1.4;
	--tracking-caps: 0.12em;
	--measure: 68ch;

	/* Space & layout */
	--space-0-5: 0.25rem;
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-6: 3rem;
	--space-8: 4rem;
	--section-gap: clamp(3rem, 2rem + 4vw, 6rem);
	--gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
	--header-height: 4rem;
	--tap-target: 2.75rem;
	--container-wide: 90rem;
	--container-content: 80rem;
	--container-narrow: 47.5rem;

	/* Shape & depth */
	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1rem;
	--radius-pill: 999px;
	--shadow-1: 0 1px 2px #092a460f, 0 1px 1px #092a460a;
	--shadow-2: 0 8px 24px #092a461a;
	--shadow-3: 0 24px 48px #092a462e;
	--shadow-card: 0 2px 10px rgba(9, 42, 70, 0.1);
	--shadow-header: 0 1px 0 var(--ubh-grey-200);
	--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

	/* Motion */
	--dur-fast: 0.12s;
	--dur-base: 0.2s;
	--dur-slow: 0.32s;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);

	/* Overlays */
	--overlay-hero: linear-gradient(90deg, rgba(9, 42, 70, 0.82) 0%, rgba(9, 42, 70, 0.5) 38%, rgba(9, 42, 70, 0.05) 70%), linear-gradient(rgba(9, 42, 70, 0) 60%, rgba(9, 42, 70, 0.5) 100%);
	--overlay-tile: linear-gradient(rgba(9, 42, 70, 0) 30%, rgba(9, 42, 70, 0.45) 58%, rgba(9, 42, 70, 0.92) 100%);
	--gradient-band: linear-gradient(100deg, #0b3156 0%, #0f4a7c 60%, #12609a 100%);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html {
	scroll-padding-top: calc(var(--header-height) + var(--space-2));
}

a {
	text-underline-offset: 0.18em;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   3. Text utilities
   ========================================================================== */
.ubh-accent { color: var(--ubh-orange-500); }
.ubh-measure { max-width: var(--measure); }
.ubh-measure .elementor-heading-title,
.ubh-measure p { max-width: var(--measure); }
.ubh-muted,
.ubh-muted .elementor-heading-title { color: var(--color-text-muted); }

.ubh-inverse,
.ubh-inverse .elementor-heading-title,
.ubh-inverse .elementor-widget-heading .elementor-heading-title,
.ubh-inverse .elementor-widget-text-editor { color: var(--color-text-inverse); }

.ubh-kicker .elementor-heading-title,
.ubh-kicker > p {
	font-family: var(--font-display);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	line-height: 1.4;
}
.ubh-kicker .elementor-heading-title::after,
.ubh-kicker > p::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: var(--space-1);
	background: var(--color-accent-rule);
}
.ubh-kicker--inverse .elementor-heading-title { color: var(--color-text-inverse); }
.ubh-kicker--center .elementor-heading-title::after { margin-inline: auto; }

/* ==========================================================================
   4. Buttons — primary styling comes from Site Settings → Buttons.
   Variants below sit on the Button widget wrapper.
   ========================================================================== */
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.elementor-button .elementor-button-content-wrapper { align-items: center; gap: var(--space-1); }
.elementor-button .elementor-button-icon { transition: transform var(--dur-base) var(--ease-standard); }
.elementor-button .elementor-button-icon svg { width: 1em; height: 1em; fill: currentColor; }
.elementor-button:hover .elementor-button-icon { transform: translateX(3px); }

.elementor-widget-button.ubh-btn--secondary .elementor-button {
	background-color: var(--color-bg);
	color: var(--color-text-heading);
	border: 1.5px solid var(--color-text-heading);
	text-transform: none;
}
.elementor-widget-button.ubh-btn--secondary .elementor-button:hover { background-color: var(--color-surface); color: var(--color-text-heading); }

.elementor-widget-button.ubh-btn--secondary-inverse .elementor-button {
	background-color: transparent;
	color: var(--color-text-inverse);
	border: 1.5px solid var(--color-text-inverse);
	text-transform: none;
}
.elementor-widget-button.ubh-btn--secondary-inverse .elementor-button:hover { background-color: rgba(255, 255, 255, 0.12); color: var(--color-text-inverse); }

.elementor-widget-button.ubh-btn--tertiary .elementor-button {
	background-color: transparent;
	color: var(--color-link);
	padding: 0 var(--space-0-5);
	min-height: var(--tap-target);
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}
.elementor-widget-button.ubh-btn--tertiary .elementor-button:hover { background-color: transparent; color: var(--color-link); }
.elementor-widget-button.ubh-btn--tertiary .elementor-button:hover .elementor-button-text { text-decoration: underline; }

.elementor-widget-button.ubh-btn--text .elementor-button {
	background-color: transparent;
	color: inherit;
	padding: 0 var(--space-1);
	min-height: var(--tap-target);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}
.elementor-widget-button.ubh-btn--text .elementor-button:hover { background-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; }

.elementor-widget-button.ubh-btn--sm .elementor-button {
	min-height: 2.5rem;
	padding: 0.625rem var(--space-2);
	font-size: var(--fs-small);
}

.elementor-widget-button.ubh-btn--hero .elementor-button {
	min-height: 3.5rem;
	padding: 0 var(--space-8);
	font-size: var(--fs-body-lg);
	border-radius: var(--radius-md);
}
@media (min-width: 1025px) {
	.elementor-widget-button.ubh-btn--hero .elementor-button { min-width: 16rem; min-height: 4rem; font-size: 1.25rem; }
}

.elementor-widget-button.ubh-btn--block .elementor-button { width: 100%; }

/* ==========================================================================
   5. Badges, fields, price (used by shortcodes and in Text Editor HTML)
   ========================================================================== */
.ubh-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	max-width: 100%;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-meta);
	font-weight: 500;
	line-height: 1.2;
	background: var(--color-surface);
	color: var(--color-text-heading);
}
.ubh-badge--member { background: var(--color-member-tint); color: var(--color-member); }
.ubh-badge--savings { background: var(--color-savings-tint); color: var(--color-savings); }
.ubh-badge--success { background: var(--color-success-tint); color: var(--color-success); }
.ubh-badge--warning { background: var(--color-warning-tint); color: var(--color-warning); }
.ubh-badge--danger { background: var(--color-danger-tint); color: var(--color-danger); }
.ubh-badge--info { background: var(--color-info-tint); color: var(--color-link); }
.ubh-badge--deal {
	border-radius: 4px;
	padding: 0.15rem 0.5rem;
	background: var(--color-action-bg);
	color: #fff;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ubh-field { display: grid; gap: var(--space-1); }
.ubh-field__label { font-size: var(--fs-small); font-weight: 500; color: var(--color-text-heading); line-height: var(--lh-ui); }
.ubh-field__required { color: var(--color-danger); }
.ubh-field__hint { font-size: var(--fs-meta); color: var(--color-text-muted); line-height: var(--lh-small); }
.ubh-field__error { font-size: var(--fs-small); color: var(--color-danger); line-height: var(--lh-small); }
body .ubh-field .ubh-field__input:not([type="button"]):not([type="submit"]) {
	width: 100%;
	min-height: 3rem;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-body);
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.ubh-field__input::placeholder { color: var(--color-text-muted); opacity: 1; }
body .ubh-field .ubh-field__input:not([type="button"]):not([type="submit"]):hover { border-color: var(--color-text-heading); }
body .ubh-field .ubh-field__input:not([type="button"]):not([type="submit"]):focus-visible { border-color: var(--color-focus); box-shadow: 0 0 0 3px rgba(11, 111, 147, 0.25); }
body .ubh-field .ubh-field__input:not([type="button"]):not([type="submit"])[aria-invalid="true"] { border: 2px solid var(--color-danger); }
.ubh-field--invalid .ubh-field__label { color: var(--color-danger); }

/* Elementor Pro form fields pick up the focus ring too */
.elementor-form .elementor-field:focus-visible { border-color: var(--color-focus); box-shadow: 0 0 0 3px rgba(11, 111, 147, 0.25); }

.ubh-price { display: grid; justify-items: start; gap: 0.125rem; }
.ubh-price__compare { font-size: var(--fs-small); color: var(--color-text-muted); }
.ubh-price__member { display: inline-flex; gap: 0.25rem; font-size: var(--fs-meta); font-weight: 500; color: var(--color-member); }
.ubh-price__amount {
	font-family: var(--font-display);
	font-size: var(--fs-price);
	font-weight: 600;
	color: var(--color-text-heading);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	white-space: nowrap;
}
.ubh-price__meta { font-size: var(--fs-meta); color: var(--color-text-muted); }
.ubh-price__saving { margin-top: 0.25rem; font-size: var(--fs-small); font-weight: 500; color: var(--color-savings); }

/* ==========================================================================
   6. Layout & surfaces (Container classes; padding via Elementor's vars so
      the Layout/Advanced panels still override them)
   ========================================================================== */
.ubh-gutter,
.ubh-section {
	--padding-left: var(--gutter);
	--padding-right: var(--gutter);
}
.ubh-section {
	--padding-top: var(--section-gap);
	--padding-bottom: 0px;
}
.ubh-section--both { --padding-bottom: var(--section-gap); }

.ubh-surface { background-color: var(--color-surface); }
.ubh-surface-inverse { background-color: var(--color-surface-inverse); color: var(--color-text-inverse); }
.ubh-surface-inverse .elementor-heading-title { color: var(--color-text-inverse); }

.ubh-card {
	background-color: var(--color-bg);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(9, 42, 70, 0.06), 0 4px 14px rgba(9, 42, 70, 0.07);
	transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.ubh-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(9, 42, 70, 0.16); }

.ubh-section-head {
	--gap: var(--space-1) var(--space-3);
	--row-gap: var(--space-1);
	--column-gap: var(--space-3);
	--justify-content: space-between;
	--align-items: flex-end;
	--flex-wrap: wrap;
	--margin-bottom: var(--space-4);
}

.ubh-grid-offers {
	gap: var(--space-3);
}

.ubh-note,
.ubh-note .elementor-widget-container,
.ubh-note p { font-size: var(--fs-meta); color: var(--color-text-muted); }

/* ==========================================================================
   7. Header (Theme Builder header template)
   ========================================================================== */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 200;
}
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .elementor-location-header { top: 0; } }

/* Transparent header floats over the hero on the front page */
body:not(.elementor-editor-active) .elementor-location-header:has(.ubh-header--transparent) {
	position: fixed;
	left: 0;
	right: 0;
}

.ubh-header {
	--ubh-header-fg: var(--color-text-heading);
	--min-height: var(--header-height);
	--padding-left: var(--gutter);
	--padding-right: var(--gutter);
	color: var(--ubh-header-fg);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-header);
	transition: background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), color var(--dur-base);
}
.ubh-header--transparent {
	--ubh-header-fg: var(--color-text-inverse);
	background: linear-gradient(rgba(9, 42, 70, 0.45), rgba(9, 42, 70, 0));
	box-shadow: none;
}
.ubh-header--transparent.is-scrolled {
	--ubh-header-fg: var(--color-text-heading);
	background: var(--color-bg);
	box-shadow: var(--shadow-header);
}
/* In the editor there is no hero behind it, so give it the navy it sits on */
.elementor-editor-active .ubh-header--transparent { background: var(--ubh-navy-900); }

/* Logo swap: colour logo on white, reversed logo on the transparent state */
.ubh-header__logo { display: grid; flex: 0 0 auto; }
.ubh-header__logo > .elementor-element { grid-area: 1 / 1; }
.ubh-logo img { height: 2.75rem; width: auto; max-width: none; display: block; }
@media (min-width: 1025px) { .ubh-logo img { height: 3.25rem; } }
.ubh-header .ubh-logo--reversed { visibility: hidden; }
.ubh-header--transparent:not(.is-scrolled) .ubh-logo--reversed { visibility: visible; }
.ubh-header--transparent:not(.is-scrolled) .ubh-logo--colour { visibility: hidden; }

/* Nav Menu widget (Elementor Pro) */
.ubh-header .ubh-header__nav { flex: 1 1 auto; }
.ubh-header .ubh-header__utility { --width: auto; flex: 0 0 auto; margin-left: auto; }
.ubh-header .ubh-header__nav .elementor-nav-menu--main .elementor-item {
	position: relative;
	min-height: var(--tap-target);
	padding: 0 var(--space-2);
	display: inline-flex;
	align-items: center;
	color: var(--ubh-header-fg) !important;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
}
.ubh-header .ubh-header__nav .elementor-nav-menu--main .elementor-item::after {
	content: "";
	position: absolute;
	left: var(--space-2);
	right: var(--space-2);
	bottom: 6px;
	height: 2px;
	background: var(--color-accent-rule);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--dur-base) var(--ease-standard);
	opacity: 1;
}
.ubh-header .ubh-header__nav .elementor-nav-menu--main .elementor-item:hover::after,
.ubh-header .ubh-header__nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after { transform: scaleX(1); }

.ubh-header .elementor-menu-toggle {
	color: var(--ubh-header-fg) !important;
	background: transparent !important;
	font-size: 1.5rem;
}
.ubh-header .elementor-menu-toggle svg { fill: currentColor; }

.ubh-header .elementor-nav-menu--dropdown {
	background: var(--color-bg);
	box-shadow: var(--shadow-2);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.ubh-header .elementor-nav-menu--dropdown .elementor-item {
	color: var(--color-text-heading) !important;
	background: transparent !important;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 500;
	padding: 0.875rem var(--gutter) !important;
	border-bottom: 1px solid var(--color-border);
}
.ubh-header .elementor-nav-menu--dropdown .elementor-item:hover,
.ubh-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { color: var(--color-savings) !important; }

@media (max-width: 1024px) {
	.ubh-header .ubh-header__nav { order: 3; flex: 0 0 auto; }
}

.ubh-header .ubh-header__icon .elementor-icon {
	color: var(--ubh-header-fg) !important;
	fill: var(--ubh-header-fg) !important;
	font-size: 1.25rem;
	width: var(--tap-target);
	height: var(--tap-target);
	display: grid;
	place-items: center;
}
.ubh-header .ubh-header__icon .elementor-icon svg { fill: currentColor; width: 1.25rem; height: 1.25rem; }
.ubh-header .ubh-btn--text .elementor-button,
.ubh-header .ubh-btn--text .elementor-button:hover { color: var(--ubh-header-fg); font-family: var(--font-display); }

@media (max-width: 767px) {
	.ubh-header .ubh-btn--header .elementor-button { min-height: 2.5rem; padding: 0.625rem var(--space-2); font-size: var(--fs-small); }
}

/* ==========================================================================
   8. Hero
   ========================================================================== */
.ubh-hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	background-color: var(--ubh-navy-900);
	background-size: cover;
	background-position: center 55%;
	--justify-content: flex-end;
	--padding-left: var(--gutter);
	--padding-right: var(--gutter);
	--padding-top: calc(var(--header-height) + var(--space-6));
	--padding-bottom: var(--space-6);
	--min-height: 24rem;
}
.ubh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--overlay-hero);
	pointer-events: none;
	opacity: 1;
	mix-blend-mode: normal;
}
.ubh-hero--home {
	--min-height: min(46rem, 86svh);
	--padding-top: calc(var(--header-height) + var(--space-8));
	--padding-bottom: var(--space-8);
}
/* Inner pages sit under the solid (in-flow) header, so no header offset */
.ubh-hero--page {
	--padding-top: var(--space-8);
}
.ubh-hero--compact {
	--min-height: 16rem;
	--padding-top: var(--space-6);
	--padding-bottom: var(--space-4);
}
.ubh-hero .elementor-widget-heading .elementor-heading-title,
.ubh-hero .elementor-widget-text-editor { color: #fff; }

.ubh-hero__title .elementor-heading-title {
	max-width: 16ch;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(9, 42, 70, 0.35);
}
.ubh-hero__title--page .elementor-heading-title { max-width: 18ch; }
.ubh-hero__lead,
.ubh-hero__lead p {
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.94) !important;
	font-size: var(--fs-body-lg);
}
.ubh-hero__note,
.ubh-hero__note p {
	font-size: var(--fs-small);
	color: rgba(255, 255, 255, 0.92) !important;
	padding-left: var(--space-4);
}
@media (min-width: 1025px) { .ubh-hero__note { padding-left: var(--space-6); } }
.ubh-hero__tag .elementor-heading-title {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-sm);
	background: var(--color-action-bg);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Search bar overlapping the bottom edge of the hero */
.ubh-hero--overlap {
	--overflow: visible;
	overflow: visible;
	--margin-bottom: 3.5rem;
	--padding-bottom: calc(var(--space-8) + 2rem);
}
@media (min-width: 1025px) {
	.ubh-hero__overlap {
		position: absolute !important;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		transform: translateY(50%);
		--padding-left: var(--gutter);
		--padding-right: var(--gutter);
	}
}
/* Tablet & phone: the search stacks, so it sits inside the hero instead of overlapping */
@media (max-width: 1024px) {
	.ubh-hero--overlap {
		--margin-bottom: 0px;
		--padding-bottom: var(--space-4);
	}
	.ubh-hero__overlap {
		--margin-top: var(--space-2);
	}
}

/* Value chips (Icon Box widgets) */
.ubh-value-chips {
	--gap: var(--space-2) var(--space-4);
	--row-gap: var(--space-2);
	--column-gap: var(--space-4);
	--flex-wrap: wrap;
}
@media (min-width: 1025px) {
	.ubh-value-chips { --gap: var(--space-3) var(--space-6); --row-gap: var(--space-3); --column-gap: var(--space-6); }
}
.ubh-value-chip .elementor-icon-box-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: var(--space-1);
	text-align: start !important;
}
.ubh-value-chip .elementor-icon-box-icon { margin: 0 !important; flex: 0 0 auto; display: flex; }
.ubh-value-chip .elementor-icon {
	width: 2.9rem;
	height: 2.9rem;
	padding: 0 !important;
	display: grid !important;
	place-items: center;
	border-radius: var(--radius-sm) !important;
	font-size: 1.375rem !important;
}
.ubh-value-chip .elementor-icon svg { width: 1.375rem; height: 1.375rem; }
.ubh-value-chip .elementor-icon-box-title,
.ubh-value-chip .elementor-icon-box-description {
	margin: 0 !important;
	color: #fff !important;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.35;
}
@media (min-width: 1025px) {
	.ubh-value-chip .elementor-icon { width: 3.6rem; height: 3.6rem; border-radius: var(--radius-md) !important; font-size: 1.75rem !important; }
	.ubh-value-chip .elementor-icon svg { width: 1.75rem; height: 1.75rem; }
	.ubh-value-chip .elementor-icon-box-title,
	.ubh-value-chip .elementor-icon-box-description { font-size: var(--fs-body-lg); }
}
.ubh-value-chip--orange .elementor-icon { background-color: var(--ubh-orange-500); color: #fff; fill: #fff; }
.ubh-value-chip--sky .elementor-icon { background-color: var(--ubh-sky-500); color: #fff; fill: #fff; }
.ubh-value-chip--white .elementor-icon { background-color: #fff; color: var(--ubh-navy-900); fill: var(--ubh-navy-900); }

/* ==========================================================================
   9. Search bar — [ubh_search]
   ========================================================================== */
.ubh-search {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) auto;
	align-items: stretch;
	padding: var(--space-1);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-heading);
	font-family: var(--font-body);
}
.ubh-search--hero { box-shadow: var(--shadow-2); border-color: transparent; }
.ubh-search__cell {
	position: relative;
	display: grid;
	align-content: center;
	min-height: 4rem;
	padding: var(--space-1) var(--space-2);
	min-width: 0;
}
.ubh-search__cell + .ubh-search__cell { border-left: 1px solid var(--color-border); }
.ubh-search__label {
	display: block;
	margin-bottom: 2px;
	padding-left: calc(20px + var(--space-1));
	font-size: var(--fs-meta);
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-text-muted);
}
.ubh-search__control {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 2.25rem;
	min-width: 0;
}
.ubh-search__control > svg { flex: 0 0 auto; color: var(--color-text-heading); }
.ubh-search .ubh-search__cell .ubh-search__control .ubh-search__input {
	flex: 1 1 0;
	min-width: 0;
	min-height: 2.25rem;
	padding: 0 1.25rem 0 0;
	border: 0;
	border-radius: var(--radius-sm);
	background-color: transparent;
	box-shadow: none;
	color: var(--color-text-heading);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.2;
	text-overflow: ellipsis;
}
.ubh-search .ubh-search__cell .ubh-search__control select.ubh-search__input {
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23092A46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
}
.ubh-search .ubh-search__cell .ubh-search__control .ubh-search__input--auto { flex: 0 1 auto; }
.ubh-search .ubh-search__cell .ubh-search__control .ubh-search__date { padding-right: 0; font-size: var(--fs-small); }
.ubh-search .ubh-search__cell .ubh-search__control .ubh-search__input:focus-visible { box-shadow: var(--focus-ring); }
.ubh-search__sep { color: var(--color-text-muted); }
.ubh-search__submit { display: grid; padding-left: var(--space-1); }
.ubh-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	height: 100%;
	min-height: 3rem;
	padding: 0 var(--space-4);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-action-bg);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.ubh-search__button:hover,
.ubh-search__button:focus { background: var(--color-action-bg-hover); color: #fff; }

@media (max-width: 1024px) {
	.ubh-search { grid-template-columns: 1fr 1fr; gap: 0; }
	.ubh-search__cell--dest { grid-column: 1 / -1; border-bottom: 1px solid var(--color-border); }
	.ubh-search__cell--dates { border-left: 0 !important; }
	.ubh-search__submit { grid-column: 1 / -1; padding: var(--space-1) 0 0; }
}
@media (max-width: 767px) {
	.ubh-search { grid-template-columns: 1fr; }
	.ubh-search__cell { min-height: 3.5rem; border-left: 0 !important; }
	.ubh-search__cell + .ubh-search__cell { border-top: 1px solid var(--color-border); }
	.ubh-search__cell--dest { border-bottom: 0; }
}

/* ==========================================================================
   10. Category tiles
   ========================================================================== */
.ubh-tile {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-1);
	background-color: var(--ubh-navy-900);
	background-size: cover;
	background-position: center;
	--min-height: 15.5rem;
	--justify-content: flex-end;
	--padding-top: var(--space-2);
	--padding-right: var(--space-3);
	--padding-bottom: var(--space-2);
	--padding-left: var(--space-3);
	--gap: var(--space-0-5);
	--row-gap: var(--space-0-5);
	transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ubh-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--overlay-tile);
	opacity: 1;
	mix-blend-mode: normal;
}
.ubh-tile::after {
	content: "";
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-2);
	width: 1.5rem;
	height: 1.5rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--dur-base) var(--ease-standard);
}
.ubh-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: #fff; }
.ubh-tile:hover::after { transform: translateX(3px); }
.ubh-tile .elementor-heading-title { color: #fff; }
.ubh-tile__copy,
.ubh-tile__copy p {
	margin: 0;
	padding-right: 2.5rem;
	color: #fff;
	font-size: var(--fs-body-lg);
	line-height: 1.35;
}

/* ==========================================================================
   11. Offer card
   ========================================================================== */
.ubh-offer-card {
	background-color: var(--color-bg);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	--gap: 0px;
	--row-gap: 0px;
	--padding-bottom: var(--space-1);
	transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ubh-offer-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(9, 42, 70, 0.16); }
.ubh-offer-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
.ubh-offer-card__body {
	--padding-top: var(--space-2);
	--padding-right: var(--space-2);
	--padding-bottom: var(--space-1);
	--padding-left: var(--space-2);
	--gap: 0.15rem;
	--row-gap: 0.15rem;
	flex-grow: 1;
}
.ubh-offer-card__body > .elementor-element { margin: 0; }
.ubh-offer-card__loc .elementor-icon-list-item { font-size: var(--fs-meta); color: var(--color-text); }
.ubh-offer-card__loc .elementor-icon-list-icon { color: var(--color-text-heading); }
.ubh-offer-card__loc .elementor-icon-list-icon svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.ubh-offer-card__name .elementor-heading-title { line-height: 1.2; }
.ubh-offer-card__nights,
.ubh-offer-card__nights p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.ubh-offer-card__was,
.ubh-offer-card__was p { margin: var(--space-0-5) 0 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.ubh-offer-card__label,
.ubh-offer-card__label p { margin: var(--space-0-5) 0 0; font-size: var(--fs-small); color: var(--color-savings); }
.ubh-offer-card__price .elementor-heading-title {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.ubh-offer-card__bar { padding: var(--space-1) var(--space-1) 0; }
.ubh-offer-card__bar .elementor-button {
	width: 100%;
	min-height: 2.9rem;
	padding: 0 var(--space-2);
	justify-content: space-between;
	font-size: var(--fs-body-lg);
}
.ubh-offer-card__bar .elementor-button-content-wrapper { width: 100%; justify-content: space-between; }

/* ==========================================================================
   12. Membership band
   ========================================================================== */
.ubh-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	border-radius: var(--radius-md);
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}
/* Gradient lives on a pseudo-element so Elementor's background lazy-load
   (which blanks background-image until the section scrolls into view) can't hide it. */
.ubh-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gradient-band);
	opacity: 1;
	mix-blend-mode: normal;
}
.ubh-band__media {
	--min-height: 13rem;
	background-size: cover;
	background-position: center;
}
.ubh-band__copy {
	--padding-top: var(--space-4);
	--padding-bottom: var(--space-4);
	--padding-left: var(--space-3);
	--padding-right: var(--space-3);
	--gap: var(--space-2);
	--row-gap: var(--space-2);
	--justify-content: center;
}
@media (min-width: 768px) {
	.ubh-band { --min-height: 17rem; }
	.ubh-band > /* Gradient lives on a pseudo-element so Elementor's background lazy-load
   (which blanks background-image until the section scrolls into view) can't hide it. */
.ubh-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gradient-band);
	opacity: 1;
	mix-blend-mode: normal;
}
.ubh-band__media { --width: 52.4%; }
	.ubh-band > .ubh-band__copy { --width: 47.6%; --padding-left: var(--space-6); --padding-right: var(--space-6); }
}
.ubh-band .elementor-widget-heading .elementor-heading-title { color: #fff; }
.ubh-band__lead,
.ubh-band__lead p { max-width: 44ch; color: rgba(255, 255, 255, 0.9) !important; }
.ubh-band__note,
.ubh-band__note p { padding-left: var(--space-2); font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85) !important; }
.ubh-band__cta { --gap: var(--space-1); --row-gap: var(--space-1); --align-items: flex-start; }

/* ==========================================================================
   13. Footer (Theme Builder footer template)
   ========================================================================== */
.ubh-footer {
	background-color: var(--color-surface-inverse);
	color: rgba(255, 255, 255, 0.86);
	--padding-top: var(--space-6);
	--padding-bottom: var(--space-3);
	--padding-left: var(--gutter);
	--padding-right: var(--gutter);
}
.ubh-footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.ubh-footer a:hover { color: #fff; text-decoration: underline; }
.ubh-footer .elementor-widget-heading .elementor-heading-title { color: #fff; }
.ubh-footer .elementor-widget-text-editor { color: rgba(255, 255, 255, 0.86); }
.ubh-footer__tagline .elementor-heading-title { font-size: var(--fs-body-lg); font-weight: 500; }
.ubh-footer__title .elementor-heading-title { font-size: var(--fs-body); }

.ubh-footer__support .elementor-icon-list-item,
.ubh-footer__support .elementor-icon-list-item a { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.86); }
.ubh-footer__support .elementor-icon-list-icon { color: var(--ubh-turquoise-500); }
.ubh-footer__support .elementor-icon-list-icon svg { fill: var(--ubh-turquoise-500); width: 1rem; height: 1rem; }
.ubh-footer__support .elementor-icon-list-icon i { color: var(--ubh-turquoise-500); }

.ubh-footer__links .elementor-icon-list-item a,
.ubh-footer__links .elementor-icon-list-text { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.86); }
.ubh-footer__links .elementor-icon-list-item a { min-height: 2.25rem; display: inline-flex; align-items: center; }
.ubh-footer__links .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #fff; text-decoration: underline; }

.ubh-footer__news-text,
.ubh-footer__news-text p { font-size: var(--fs-small); margin: 0; }

.ubh-footer__bottom {
	--margin-top: var(--space-4);
	--padding-top: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	--gap: 0.25rem;
	--row-gap: 0.25rem;
}
.ubh-footer__bottom,
.ubh-footer__bottom p { font-size: var(--fs-meta); color: rgba(255, 255, 255, 0.7); margin: 0; }

@media (max-width: 1024px) {
	.ubh-footer__col { border-bottom: 1px solid rgba(255, 255, 255, 0.14); --padding-bottom: var(--space-2); }
}

/* Newsletter (Elementor Pro Form with one email field) */
.ubh-newsletter .elementor-form-fields-wrapper { flex-wrap: nowrap; margin: 0 !important; }
.ubh-newsletter .elementor-field-group { padding: 0 !important; margin: 0 !important; }
.ubh-newsletter .elementor-field-type-email { flex: 1 1 auto; width: auto !important; max-width: none !important; }
.ubh-newsletter .elementor-field-type-submit { flex: 0 0 auto; width: auto !important; }
.ubh-newsletter .elementor-form .elementor-field-group .elementor-field {
	min-height: 3rem;
	padding: 0 var(--space-2);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-right: 0;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	background: transparent;
	color: #fff;
}
.ubh-newsletter .elementor-field::placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; }
.ubh-newsletter .elementor-form .elementor-field-group .elementor-field:focus-visible { border-color: #fff; box-shadow: 0 0 0 2px var(--ubh-sky-500); }
.ubh-newsletter .elementor-form .elementor-field-group .elementor-button {
	width: 3rem;
	min-height: 3rem;
	padding: 0;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ubh-newsletter .elementor-button .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ubh-newsletter .elementor-message { font-size: var(--fs-small); color: #fff; }

/* ==========================================================================
   14. Long-form content (legal, guide articles)
   ========================================================================== */
.ubh-prose { --content-width: var(--container-narrow); }
.ubh-prose .elementor-widget-text-editor { font-size: var(--fs-body); line-height: var(--lh-body); }
.ubh-prose .elementor-widget-text-editor h2 { margin: 2.5rem 0 0.75rem; }
.ubh-prose .elementor-widget-text-editor h3 { margin: 2rem 0 0.5rem; }
.ubh-prose .elementor-widget-text-editor p { margin: 0 0 1em; }
.ubh-prose .elementor-widget-text-editor ul,
.ubh-prose .elementor-widget-text-editor ol { margin: 0 0 1em; padding-left: 1.25em; }
.ubh-prose .elementor-widget-text-editor li { margin-bottom: 0.4em; }
.ubh-prose .elementor-widget-text-editor > *:first-child { margin-top: 0; }

/* ==========================================================================
   15. Style guide helpers — [ubh_style_guide]
   ========================================================================== */
.ubh-sg-swatches { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.ubh-sg-swatch { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.ubh-sg-swatch__chip { display: block; height: 4.5rem; border-bottom: 1px solid var(--color-border); }
.ubh-sg-swatch figcaption { display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; font-size: var(--fs-meta); color: var(--color-text-muted); }
.ubh-sg-swatch strong { color: var(--color-text-heading); font-size: var(--fs-small); font-weight: 500; }
.ubh-sg-swatch code { font-size: 0.75rem; background: none; padding: 0; }
.ubh-sg-row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ubh-sg-fields { display: grid; gap: var(--space-3); max-width: 30rem; }