/* Xinalani UI v1 · October 2026. Reference: assets/Xinalani_Website_UI_Design_System.pdf.
 * Shared content and explicitly mapped menu CTAs; no layout resets.
 * Existing CTA/card classes below are adapters for the PHP templates.
 * New components: x-btn [x-btn--secondary|x-btn--compact|x-btn--on-dark],
 * x-actions, x-link, x-card [x-card--link], x-card__media, x-card__body.
 * A single-destination card is an anchor; its visual x-link is a span.
 * Multi-action cards are articles, with separate links/buttons inside.
 * Disabled anchors must have no href and tabindex="-1", plus aria-disabled="true".
 */
:root {
	--x-terracotta: #A4441E;
	--x-terracotta-dark: #8A3816;
	--x-terracotta-deep: #742E12;
	--x-terracotta-soft: #DEAF8F;
	--x-olive: #757438;
	--x-olive-text: #6E6D35;
	--x-white: #fff;
	--x-sand: #F7F2EC;
	--x-sand-deep: #EFE7DD;
	--x-line: #E6DCD1;
	--x-ink: #2B2622;
	--x-ink-soft: #6B625A;
	--x-disabled-bg: #ECE6DE;
	--x-disabled-text: #8C8178;
	--x-font-ui: 'Karla', 'Helvetica Neue', Arial, sans-serif;
	--x-font-head: 'Prata', Georgia, serif;
	--x-ease-organic: cubic-bezier(.22,.61,.36,1);
	--x-ease-soft: cubic-bezier(.45,0,.25,1);
	--x-ease-press: cubic-bezier(.3,0,.5,1);
	--x-dur-press: 90ms;
	--x-dur-fast: 160ms;
	--x-dur-base: 240ms;
	--x-dur-line: 320ms;
	--x-dur-slow: 420ms;
	--x-dur-image: 700ms;
	--x-btn-h: 52px;
	--x-btn-px: 32px;
	--x-btn-fs: 14px;
	--x-btn-minw: 200px;
	--x-btn-gap: 16px;
	--x-radius-pill: 999px;
	--x-radius-card: 4px;
	--x-card-padding: 32px;
	--x-card-title: 28px;
	--x-card-gutter: 32px;
}

/* Keep existing body colors and heading sizes; share the font families/weights.
 * The PDF flags body color as a proposal. Card copy uses its explicit ink token.
 * The Home retreats carousel retains its original typography and link styles.
 * Do not style generic spans: the theme uses icon fonts on them. */
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) {
	font-family: var(--x-font-ui);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(p, li, label, input, textarea, select):not(:where(.home-retreats-slider *)) {
	font-family: var(--x-font-ui);
	font-weight: 400;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .section-title):not(:where(.home-retreats-slider *)),
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(h1, h2, h3, h4, h5, h6) a:not(:where(.home-retreats-slider *)) {
	font-family: var(--x-font-head);
	font-weight: 400;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.xr-eyebrow, .spa-eyebrow, .xr-room-label, .spa-treatment-tag) {
	font: 600 12px/1.2 var(--x-font-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Buttons: aliases cover content, booking and menu CTAs; exclude icon controls.
 * Important colors bridge older !important rules and inline booking button colors. */
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn, .btn, .s-orange, .orange-button, .xr-btn, .spa-btn, .menu-button, .xrf-btn, .xr-nav-cta) {
	--x-btn-bg: var(--x-terracotta);
	--x-btn-color: var(--x-white);
	--x-btn-border: var(--x-terracotta);
	--x-btn-hover: var(--x-terracotta-dark);
	--x-btn-hover-color: var(--x-white);
	--x-btn-pressed: var(--x-terracotta-deep);
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	min-width: min(var(--x-btn-minw), 100%);
	min-height: var(--x-btn-h);
	height: auto;
	padding: 12px var(--x-btn-px);
	border: 1px solid var(--x-btn-border);
	border-radius: var(--x-radius-pill);
	background: var(--x-btn-bg) !important;
	color: var(--x-btn-color) !important;
	font: 600 var(--x-btn-fs)/1.2 var(--x-font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
	box-shadow: none;
	transform: none;
	transition: background-color var(--x-dur-base) var(--x-ease-organic), border-color var(--x-dur-base) var(--x-ease-organic), color var(--x-dur-base) var(--x-ease-organic), box-shadow var(--x-dur-base) var(--x-ease-organic), transform var(--x-dur-base) var(--x-ease-organic);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn, .btn, .s-orange, .orange-button, .xr-btn, .spa-btn, .menu-button, .xrf-btn, .xr-nav-cta) > span {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn--secondary, .xr-btn--line, .xr-btn--outline, .spa-btn-outline, .btn.s-green) {
	--x-btn-bg: transparent;
	--x-btn-color: var(--x-terracotta);
	--x-btn-hover: var(--x-terracotta);
	--x-btn-pressed: var(--x-terracotta-dark);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn--on-dark, .btn.s-white) {
	--x-btn-bg: transparent;
	--x-btn-color: var(--x-white);
	--x-btn-border: var(--x-white);
	--x-btn-hover: var(--x-white);
	--x-btn-hover-color: var(--x-terracotta);
	--x-btn-pressed: var(--x-sand);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn--compact, .xr-nav-cta, .xr-rcard-actions .xr-btn, .xr-room-actions .xr-btn, .spa-card .spa-btn, .x-card .x-btn) {
	min-height: 44px;
	min-width: 0;
	padding: 10px 24px;
	font-size: 13px;
	flex: 0 1 auto;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-actions, .xr-stay-actions, .spa-actions) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--x-btn-gap);
}

/* Tertiary links: the underline spans the label, not the entire card. */
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *))) {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 44px;
	max-width: 100%;
	padding: 10px 0;
	border: 0;
	background: transparent;
	color: var(--x-terracotta) !important;
	font: 600 13px/1.5 var(--x-font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	overflow-wrap: anywhere;
	transform: none;
	transition: color var(--x-dur-base) var(--x-ease-organic), transform var(--x-dur-base) var(--x-ease-organic);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *)))::before,
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *)))::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	height: 1px;
	margin: 0;
	background: var(--x-terracotta-soft);
	pointer-events: none;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *)))::after {
	background: var(--x-olive);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--x-dur-line) var(--x-ease-organic);
}

/* Cards: retain the page's grids and Rooms' video/gallery composition. */
body.xinalani-ui .main .home-retreats-slider {
	font-family: 'karla', sans-serif;
	-webkit-font-smoothing: auto;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-card, .spa-card, .xr-sig-card, .xr-exp-card, .activity-card, .upgrade-card) {
	box-sizing: border-box;
	min-width: 0;
	border-radius: var(--x-radius-card);
	background: var(--x-sand);
	color: var(--x-ink);
	text-decoration: none;
	transform: none;
	transition: box-shadow var(--x-dur-slow) var(--x-ease-organic), transform var(--x-dur-press) var(--x-ease-press);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-card__media, .activity-image, .xr-sig-photo, .xr-rcard-video, .xr-slider-track) {
	overflow: hidden;
	border-radius: var(--x-radius-card);
	background: var(--x-sand-deep);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-card__media, .activity-image, .xr-sig-photo) img {
	display: block;
	width: 100%;
	object-fit: cover;
	transform: none;
	transition: transform var(--x-dur-image) var(--x-ease-organic);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) .spa-card .x-card__media img { aspect-ratio: 4 / 5; }
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-card__body, .spa-card .spa-treatment-content, .xr-sig-body, .xr-rcard-body) {
	padding: var(--x-card-padding);
	background: var(--x-sand);
	border-radius: var(--x-radius-card);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-card, .spa-card, .xr-rcard, .xr-sig-card, .xr-exp-card, .activity-card) :is(h3, .xr-rcard-title) {
	font: 400 var(--x-card-title)/1.2 var(--x-font-head);
	color: var(--x-ink);
	text-transform: none;
	letter-spacing: 0;
	transition: color var(--x-dur-base) var(--x-ease-organic);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.spa-card .spa-treatment-description, .spa-card .spa-treatment-description p, .xr-room-text, .x-card__body p) {
	font: 400 16px/1.6 var(--x-font-ui);
	color: var(--x-ink-soft);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.xr-rcard-actions, .spa-card .spa-booking-links) { gap: 12px 24px; }
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.spa-cards, .xr-signature-grid, .xr-exp-grid) { gap: var(--x-card-gutter); }
/* Only pointer devices get hover motion. Neutralize legacy :hover on touch too. */
@media (hover:hover) and (pointer:fine) {
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn, .btn, .s-orange, .orange-button, .xr-btn, .spa-btn, .menu-button, .xrf-btn, .xr-nav-cta):hover {
		background: var(--x-btn-hover) !important;
		border-color: var(--x-btn-hover);
		color: var(--x-btn-hover-color) !important;
		transform: translateY(-2px);
		box-shadow: 0 8px 18px -8px rgba(138,56,22,.55);
	}
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *))):hover,
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) .x-card--link:hover .x-link { color: var(--x-olive-text) !important; transform: translateY(-2px); }
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *))):hover::after,
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) .x-card--link:hover .x-link::after { transform: scaleX(1); }
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-card, .spa-card, .xr-sig-card, .xr-exp-card, .activity-card, .upgrade-card):hover { box-shadow: 0 18px 40px -24px rgba(43,38,34,.35); transform: none; }
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-card, .spa-card, .activity-card, .xr-sig-card):hover :is(.x-card__media, .image-container, .activity-image, .xr-sig-photo) img { transform: scale(1.04); }
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) .x-card--link:hover h3 { color: var(--x-terracotta); }
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn, .btn, .s-orange, .orange-button, .xr-btn, .spa-btn, .menu-button, .xrf-btn, .xr-nav-cta):active {
	background: var(--x-btn-pressed) !important;
	border-color: var(--x-btn-pressed);
	color: var(--x-btn-hover-color) !important;
	transform: translateY(0) scale(.98);
	box-shadow: none;
	transition-duration: var(--x-dur-press);
	transition-timing-function: var(--x-ease-press);
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *))):active { opacity: .8; transform: none; }
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) .x-card--link:active { transform: scale(.99); }
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn, .btn, .s-orange, .orange-button, .xr-btn, .spa-btn, .menu-button, .xrf-btn, .xr-nav-cta, .x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *)), .x-card--link):focus-visible {
	outline: 2px solid var(--x-ink);
	outline-offset: 3px;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn, .btn, .s-orange, .orange-button, .xr-btn, .spa-btn, .menu-button, .xrf-btn, .xr-nav-cta):is(:disabled, [aria-disabled="true"]) {
	background: var(--x-disabled-bg) !important;
	border-color: var(--x-line);
	color: var(--x-disabled-text) !important;
	transform: none;
	box-shadow: none;
	cursor: not-allowed;
	transition: none;
}
body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn--secondary, .xr-btn--line, .xr-btn--outline, .spa-btn-outline, .btn.s-green):is(:disabled, [aria-disabled="true"]) {
	background: transparent !important;
}

@media (max-width: 1023px) {
	:root { --x-btn-h: 48px; --x-btn-px: 28px; --x-btn-minw: 180px; --x-card-padding: 24px; --x-card-title: 24px; --x-card-gutter: 24px; }
}
@media (max-width: 599px) {
	:root { --x-btn-fs: 13px; --x-btn-px: 24px; --x-btn-gap: 12px; --x-card-padding: 20px; --x-card-title: 22px; --x-card-gutter: 16px; }
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-actions, .xr-stay-actions, .spa-actions) { flex-direction: column; align-items: stretch; }
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-actions, .xr-stay-actions, .spa-actions) > :is(.x-btn, .btn, .s-orange, .orange-button, .xr-btn, .spa-btn, .menu-button, .xrf-btn, .xr-nav-cta) { width: 100%; min-width: 0; }
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.xr-rcard-actions, .spa-card .spa-booking-links) { gap: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui, .new-menu-right, .xr-nav) :is(.x-btn, .btn, .s-orange, .orange-button, .xr-btn, .spa-btn, .menu-button, .xrf-btn, .xr-nav-cta, .x-link, .xr-room-link, .xr-review-link, .xr-link, .spa-booking-links a, .xr-sig-body > a, a.more:not(:where(.home-retreats-slider *)), .x-card, .spa-card, .activity-card, .xr-sig-card, .xr-exp-card, .upgrade-card),
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) :is(.x-card, .spa-card, .activity-card, .xr-sig-card) img {
		transform: none !important;
		transition: none !important;
	}
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) ::before,
	body.xinalani-ui :is(.main, #main, main, #main-page-container, .xr-page, #contenedor-cuerpo-principal, .x-ui) ::after { transition-duration: 0s !important; }
}

/* Menu CTAs retain their existing actions and share the content button system. */
body.xinalani-ui .new-menu-right .buttons {
    display: flex;
    flex-direction: column;
    gap: var(--x-btn-gap);
}
body.xinalani-ui .new-menu-right .buttons .menu-button {
    width: 100%;
    margin-bottom: 0;
}