/* ==========================================================================
   Dafa — main stylesheet
   ========================================================================== */

:root {
	--color-primary: #384bff;
	--color-primary-dark: #2438e6;
	--color-accent: #ff5a1f;
	--color-accent-dark: #ea4a0f;
	--color-text: #0f172a;
	--color-muted: #64748b;
	--color-border: #e2e8f0;
	--color-bg: #ffffff;
	--color-bg-soft: #f8fafc;
	--color-topbar-bg: #140f33;
	--color-topbar-text: rgba(255, 255, 255, 0.88);

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: "Playfair Display", Georgia, serif;
	--font-script: "Yellowtail", "Segoe Script", cursive;
	--radius: 8px;
	--shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.2);
	--container: 1440px;
	--topbar-height: 44px;
	--header-height: 100px;
	--dafa-offset: calc(var(--topbar-height) + var(--header-height));
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 20px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	clip: auto;
	width: auto;
	height: auto;
	top: 8px;
	left: 8px;
	z-index: 10000;
	padding: 10px 16px;
	background: var(--color-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

html.has-open-drawer {
	overflow: hidden;
}

/* Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--radius);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn svg {
	width: 18px;
	height: 18px;
}

.btn--primary {
	height: 46px;
	padding: 0 20px;
	font-size: 16px;
	color: #fff;
	background: var(--color-primary);
	border-radius: 9px;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn--primary:hover {
	background: var(--color-primary-dark);
	transform: translateY(-1px);
}

.btn--primary:active {
	transform: translateY(0);
}

.btn--block {
	width: 100%;
}

/* Top bar
   ========================================================================== */

.topbar {
	position: relative;
	z-index: 90;
	font-size: 14px;
	color: var(--color-topbar-text);
	background: var(--color-topbar-bg);
}

/* While the language menu is open, lift the top bar above the header
   (z-index 100) so the menu is not hidden behind it. */
.topbar:has(.lang-switch[open]) {
	z-index: 110;
}

.topbar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: var(--topbar-height);
}

.topbar__contact {
	display: flex;
	justify-self: start;
	align-items: center;
	gap: 8px 16px;
}

.topbar__item {
	transition: color 0.2s var(--ease);
}

.topbar__item:hover {
	color: #fff;
}

.topbar__divider {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.35);
}

.topbar__offer {
	margin: 0;
	justify-self: center;
	font-weight: 600;
	color: #fff;
}

.topbar__lang {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
}

.topbar__lang svg {
	width: 16px;
	height: 16px;
}

/* Language switcher (TranslatePress) ------------------------------------- */

.lang-switch {
	position: relative;
}

.lang-switch--topbar {
	justify-self: end;
}

.lang-switch__current {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 2px;
	font-weight: 600;
	color: #fff;
	list-style: none;
	cursor: pointer;
}

.lang-switch__current::-webkit-details-marker {
	display: none;
}

.lang-switch__current svg {
	width: 15px;
	height: 15px;
}

.lang-switch__current svg:last-child {
	transition: transform 0.2s var(--ease);
}

.lang-switch[open] .lang-switch__current svg:last-child {
	transform: rotate(180deg);
}

.lang-switch__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 200;
	min-width: 160px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 40px -16px rgba(9, 6, 30, 0.45);
}

.lang-switch__list a {
	display: block;
	padding: 8px 12px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
}

.lang-switch__list a:hover {
	background: var(--color-bg-soft);
}

.lang-switch__list a.is-current {
	font-weight: 700;
	color: var(--color-primary);
}

/* Mobile menu: an open list of languages under the account button. */
.lang-switch--drawer {
	margin-top: 4px;
}

.lang-switch--drawer .lang-switch__current {
	width: 100%;
	padding: 12px 14px;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 10px;
}

.lang-switch--drawer .lang-switch__current span {
	flex: 1;
}

.lang-switch--drawer .lang-switch__list {
	position: static;
	margin-top: 6px;
	box-shadow: none;
	border: 1px solid var(--color-border);
}

/* Shared by the mobile drawer. */
.contact-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color 0.2s var(--ease);
}

.contact-item svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.social-links {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links a {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.social-links svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-topbar-bg);
	padding-block: 10px;
	transition: padding 0.4s var(--ease), background-color 0.4s var(--ease);
}

/* Front page: the hero photo continues behind the header, so the chrome is
   transparent until the page is scrolled, then a solid band slides in. */
.dafa-header-overlay .site-header {
	background: transparent;
}

.dafa-header-overlay .topbar {
	background: transparent;
}

.admin-bar .site-header {
	top: 32px;
}

/* Floating white pill that holds logo, nav and actions. */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* The pill is the .container itself, whose gutter its padding replaces:
	   keep 20px from the screen edges below the container width. */
	width: calc(100% - 40px);
	height: calc(var(--header-height) - 20px);
	padding-inline: 28px;
	background: #fff;
	/* Half the pill height (not 999px) so the radius animates smoothly to 0. */
	border-radius: calc((var(--header-height) - 20px) / 2);
	box-shadow: 0 24px 45px -22px rgba(9, 6, 30, 0.55);
	transition:
		width 0.4s var(--ease),
		max-width 0.4s var(--ease),
		height 0.4s var(--ease),
		padding 0.4s var(--ease),
		border-radius 0.4s var(--ease),
		box-shadow 0.4s var(--ease);
}

/* Sticky state: the pill expands into a full-width, square-cornered bar.
   Header padding moves into the bar's height so the page doesn't shift;
   inline padding keeps the content aligned with the page container. */
.site-header.is-scrolled {
	padding-block: 0;
}

.site-header.is-scrolled .site-header__inner {
	width: 100%;
	max-width: 100%;
	height: var(--header-height);
	padding-inline: max(28px, calc((100% - var(--container)) / 2 + 28px));
	border-radius: 0;
	box-shadow: 0 12px 30px -18px rgba(9, 6, 30, 0.45);
}

/* Pages other than home: always the stretched bar, never animated. */
.site-header.is-static,
.site-header.is-static .site-header__inner {
	transition: none;
}

.primary-nav {
	justify-self: center;
	align-self: stretch;
}

.site-branding {
	justify-self: start;
}

.site-branding img {
	display: block;
	width: auto;
	max-height: 54px;
}

.site-title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.header-actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 12px;
}

.header-account {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.header-account svg {
	width: 20px;
	height: 20px;
}

.header-account:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.header-book {
	height: 52px;
	border-radius: 999px;
	background: var(--color-accent);
}

.header-book:hover {
	background: var(--color-accent-dark);
}

.menu-toggle,
.mobile-nav__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
	transition: background-color 0.2s var(--ease);
}

.menu-toggle:hover,
.mobile-nav__close:hover {
	background: var(--color-bg-soft);
}

.menu-toggle {
	display: none;
}

/* Desktop navigation
   ========================================================================== */

.primary-nav {
	align-self: stretch;
}

.primary-nav .menu,
.primary-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav .menu {
	display: flex;
	height: 100%;
	gap: 4px;
}

.primary-nav li {
	position: relative;
	display: flex;
	align-items: center;
}

.primary-nav .menu > li > a {
	padding: 8px 12px;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: var(--radius);
	transition: color 0.2s var(--ease);
}

.primary-nav .menu > li.menu-item-has-children > a {
	padding-right: 0;
}

.primary-nav .menu > li > a:hover,
.primary-nav .menu > li:hover > a,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a {
	color: var(--color-primary);
}

.primary-nav .submenu-toggle {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-right: 4px;
	border-radius: 4px;
	color: var(--color-muted);
}

.primary-nav .submenu-toggle svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--ease);
}

.primary-nav li:hover > .submenu-toggle svg,
.primary-nav li.is-open > .submenu-toggle svg {
	transform: rotate(180deg);
}

/* Dropdowns */
.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 230px;
	padding: 8px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.primary-nav li:hover > .sub-menu,
.primary-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu li {
	justify-content: space-between;
}

.primary-nav .sub-menu a {
	flex: 1;
	padding: 9px 12px;
	font-size: 14px;
	border-radius: 6px;
	transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.primary-nav .sub-menu li:hover > a,
.primary-nav .sub-menu .current-menu-item > a {
	color: var(--color-primary);
	background: var(--color-bg-soft);
}

/* Nested flyouts open to the side */
.primary-nav .sub-menu .sub-menu {
	top: -9px;
	left: calc(100% + 8px);
	transform: translateX(-8px);
}

.primary-nav .sub-menu li:hover > .sub-menu,
.primary-nav .sub-menu li.is-open > .sub-menu {
	transform: translateX(0);
}

.primary-nav .sub-menu .submenu-toggle svg {
	transform: rotate(-90deg);
}

.primary-nav .sub-menu li:hover > .submenu-toggle svg,
.primary-nav .sub-menu li.is-open > .submenu-toggle svg {
	transform: rotate(-90deg);
}

/* Invisible bridge so hover isn't lost crossing the gap to a flyout */
.primary-nav .sub-menu .sub-menu::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -10px;
	width: 10px;
}

/* Flip when there's no room on the right (set by JS) */
.primary-nav .menu > li.open-left > .sub-menu {
	left: auto;
	right: 0;
}

.primary-nav .sub-menu li.open-left > .sub-menu {
	left: auto;
	right: calc(100% + 8px);
	transform: translateX(8px);
}

.primary-nav .sub-menu li.open-left > .sub-menu::before {
	left: auto;
	right: -10px;
}

.primary-nav .sub-menu li.open-left > .submenu-toggle svg {
	transform: rotate(90deg);
}

/* Mobile drawer
   ========================================================================== */

.mobile-nav {
	position: fixed;
	inset: 0;
	/* Above the WordPress admin bar (99999), which would hide the close button. */
	z-index: 100000;
	visibility: hidden;
	transition: visibility 0.3s;
}

.mobile-nav.is-open {
	visibility: visible;
}

.mobile-nav__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.mobile-nav.is-open .mobile-nav__overlay {
	opacity: 1;
}

.mobile-nav__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(380px, 88vw);
	background: var(--color-bg);
	box-shadow: var(--shadow);
	transform: translateX(100%);
	transition: transform 0.3s var(--ease);
}

.mobile-nav.is-open .mobile-nav__panel {
	transform: translateX(0);
}

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--header-height);
	padding: 0 12px 0 20px;
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav__menu {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 12px;
}

.mobile-nav__menu .menu,
.mobile-nav__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav__menu li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mobile-nav__menu a {
	flex: 1;
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: 8px;
	font-weight: 500;
	border-radius: 6px;
}

.mobile-nav__menu .menu > li {
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav__menu .menu > li:last-child {
	border-bottom: 0;
}

.mobile-nav__menu .current-menu-item > a,
.mobile-nav__menu .current-menu-ancestor > a {
	color: var(--color-primary);
}

.mobile-nav__menu .submenu-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	color: var(--color-muted);
}

.mobile-nav__menu .submenu-toggle:hover {
	background: var(--color-bg-soft);
}

.mobile-nav__menu .submenu-toggle svg {
	width: 20px;
	height: 20px;
	transition: transform 0.25s var(--ease);
}

.mobile-nav__menu li.is-open > .submenu-toggle {
	color: var(--color-primary);
}

.mobile-nav__menu li.is-open > .submenu-toggle svg {
	transform: rotate(180deg);
}

/* Accordion: height is animated by main.js */
.mobile-nav__menu .sub-menu {
	flex-basis: 100%;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: height 0.25s var(--ease), visibility 0.25s;
}

.mobile-nav__menu li.is-open > .sub-menu {
	visibility: visible;
}

.mobile-nav__menu .sub-menu > li:last-child {
	margin-bottom: 8px;
}

.mobile-nav__menu .sub-menu {
	padding-left: 12px;
	margin-left: 8px;
	border-left: 2px solid var(--color-border);
}

.mobile-nav__menu .sub-menu a {
	min-height: 42px;
	font-size: 15px;
	font-weight: 400;
	color: var(--color-muted);
}

.mobile-nav__menu .sub-menu .current-menu-item > a {
	color: var(--color-primary);
}

.mobile-nav__footer {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	border-top: 1px solid var(--color-border);
	background: var(--color-bg-soft);
}

.mobile-nav__contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	color: var(--color-muted);
}

.mobile-nav__contact .contact-item svg {
	color: var(--color-primary);
}

.mobile-nav__footer .social-links a {
	color: var(--color-muted);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}

.mobile-nav__footer .social-links a:hover {
	color: var(--color-primary);
}

.mobile-nav__contact:empty {
	display: none;
}

/* Hero
   ========================================================================== */

/* Front page: the header is transparent over the photo, so the hero slides
   up behind it. Content padding keeps everything below the floating pill. */
.dafa-header-overlay .hero {
	margin-top: calc(-1 * var(--dafa-offset));
}

.dafa-header-overlay .hero__inner {
	padding-top: calc(var(--dafa-offset) + clamp(30px, 6vh, 70px));
}

.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: max(780px, calc(100dvh - var(--dafa-offset)));
	color: #fff;
	background: #140f33;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -4;
	background-image: var(--hero-image);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Muted looping video replacing the still photo. */
.hero__video {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Indigo tint blended over the photo or video, heavier on the text side. */
.hero__tint {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__tint::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(24, 18, 63, 0.9) 0%, rgba(38, 32, 104, 0.78) 34%, rgba(66, 58, 158, 0.55) 68%, rgba(72, 64, 170, 0.5) 100%);
}

.hero__tint::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 6, 30, 0.55) 0%, rgba(9, 6, 30, 0.12) 42%, rgba(9, 6, 30, 0.72) 100%);
}

/* White wave image that masks the straight hero bottom edge. */
.hero__shape {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: -1;
	height: clamp(36px, 3.6vw, 69px);
	background: url(../img/shape-1.png) bottom center / 100% 100% no-repeat;
	pointer-events: none;
}

.hero__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-block: clamp(50px, 13vh, 140px) 0;
}

.hero__content {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.hero__eyebrow {
	margin: 0 0 clamp(12px, 2vh, 26px);
	font-family: var(--font-script);
	font-size: clamp(28px, 2.2vw, 40px);
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 2px 18px rgba(20, 14, 60, 0.45);
}

.hero__title {
	max-width: 7em;
	margin: 0 auto;
	font-size: clamp(40px, 4.4vw, 84px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 3px 26px rgba(9, 6, 30, 0.45);
	text-wrap: balance;
}

.btn--ghost {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(6px);
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.24);
}

/* Hero search panel
   ========================================================================== */

.hero-search {
	align-self: center;
	width: min(970px, 100%);
	margin-top: auto;
	margin-bottom: -26px;
}

/* Tabs ---------------------------------------------------------------------- */

.hero-search__tabs-wrap {
	position: relative;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

.hero-search__tabs {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	padding: 5px;
	background: #fff;
	border-radius: 14px 14px 0 0;
}

.hero-search__tabs::-webkit-scrollbar {
	display: none;
}

.hero-tab {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: #131a2c;
	white-space: nowrap;
	border-radius: 10px;
	transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.hero-tab svg {
	width: 18px;
	height: 18px;
	color: var(--color-primary);
	transition: color 0.2s var(--ease);
}

.hero-tab:hover {
	color: var(--color-primary);
}

.hero-tab.is-active {
	color: #fff;
	background: var(--color-primary);
}

.hero-tab.is-active svg,
.hero-tab.is-active:hover {
	color: #fff;
}

.hero-tab.is-active:hover {
	cursor: default;
}

/* Card --------------------------------------------------------------------- */

.hero-search__form {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	/* Same spacing as between the fields, so the button never touches them. */
	gap: 14px;
	min-height: 142px;
	padding: 26px 14px 28px 30px;
	color: var(--color-text);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 46px -24px rgba(9, 6, 30, 0.45);
}

.hero-search__fields {
	display: flex;
	gap: 14px;
	min-width: 0;
	flex: 1 1 auto;
}

.hero-field {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	flex: 1 1 0;
}

.hero-field:first-child {
	flex-grow: 1.35;
}

.hero-field__head {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.hero-field__badge {
	display: grid;
	place-items: center;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	color: #171f36;
	background: #eef0f5;
	border-radius: 50%;
}

.hero-field__badge svg {
	width: 13px;
	height: 13px;
}

.hero-field__label {
	font-size: 16px;
	font-weight: 600;
	color: #131a2c;
	cursor: inherit;
}

.hero-field__box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	height: 46px;
	padding: 0 13px;
	color: #9aa1b4;
	background: #fff;
	border: 1px solid #e4e7ee;
	border-radius: 9px;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* The dual date/time boxes toggle through the hidden attribute, but the
   display:flex above would otherwise win over the UA stylesheet. */
.hero-field__box[hidden] {
	display: none;
}

.hero-field__box:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(56, 75, 255, 0.14);
}

.hero-field__boxicon {
	display: inline-flex;
	flex: 0 0 auto;
	color: #a7aec2;
}

.hero-field__boxicon svg {
	width: 16px;
	height: 16px;
}

.hero-field__value {
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #9aa1b4;
}

.hero-field__value.is-filled {
	color: #131a2c;
	font-weight: 600;
}

.hero-field__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: #131a2c;
	background: none;
	border: 0;
	outline: none;
}

.hero-field__input::placeholder {
	color: #9aa1b4;
	opacity: 1;
	font-weight: 500;
}

.hero-field__tail {
	display: inline-flex;
	flex: 0 0 auto;
	color: #a7aec2;
	pointer-events: none;
}

.hero-field__tail svg {
	width: 16px;
	height: 16px;
}

.hero-field__select {
	padding: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: #131a2c;
	background: none;
	border: 0;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: none;
}

/* Invisible native date/time input that fills the whole box. */
.hero-field__native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	color: transparent;
	background: none;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.hero-field__native:focus-visible,
.hero-field__input:focus-visible {
	outline: none;
}

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

.hero-search__submit {
	flex: 0 0 auto;
	height: 46px;
	min-width: 118px;
}

/* Keep the overhanging card clear of whatever follows the front page. */
.site-main:has(.hero-search) {
	padding-bottom: 44px;
}

@media (max-width: 900px) {
	/* Tabs float as their own rounded bar above the card. */
	.hero-search__tabs {
		margin-bottom: 10px;
		border-radius: 14px;
	}

	.hero-search__tabs-wrap {
		width: 100%;
	}

	.hero-search__tabs-wrap.has-more-tabs::after {
		content: "";
		position: absolute;
		z-index: 2;
		top: 5px;
		right: 0;
		bottom: 5px;
		width: 38px;
		border-radius: 0 12px 12px 0;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 82%);
		pointer-events: none;
	}

	.hero-search__form {
		flex-wrap: wrap;
		gap: 14px;
		padding: 18px 16px 20px;
	}

	.hero-search__fields {
		flex-wrap: wrap;
	}

	.hero-field,
	.hero-field:first-child {
		flex: 1 1 calc(50% - 14px);
	}

	.hero-search__submit {
		flex: 1 1 100%;
		width: 100%;
	}

	.hero-tab {
		padding: 12px 15px;
		font-size: 14px;
	}

	.hero-tab svg {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 600px) {
	.hero-field,
	.hero-field:first-child {
		/* Two columns keep the search card shorter so more of the hero photo
		   stays visible on phones while keeping every field easy to reach. */
		flex: 1 1 calc(50% - 7px);
	}
}

.dafa-no-topbar {
	--dafa-offset: var(--header-height);
}

/* Top Destinations
   ========================================================================== */

.destinations {
	padding-block: clamp(48px, 8vh, 88px) clamp(56px, 9vh, 96px);
}

.destinations__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(22px, 3.5vh, 36px);
}

.destinations__title {
	margin: 0;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.destinations__more {
	min-width: 138px;
}

/* Expandable horizontal cards ---------------------------------------------- */

.destinations__track {
	display: flex;
	gap: 16px;
	height: clamp(320px, 40vw, 480px);
}

.destination {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: 16px;
	transition: flex-grow 0.55s var(--ease);
}

/* The most recently hovered card (plus the first card on load) stays expanded. */
.destination.is-active {
	flex-grow: 2.6;
}

.destination img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.7s var(--ease);
}

.destination.is-active img {
	transform: scale(1.045);
}

/* Subtle bottom gradient so the names stay readable. */
.destination::after {
	content: "";
	position: absolute;
	inset: 55% 0 0;
	background: linear-gradient(180deg, rgba(10, 12, 26, 0) 0%, rgba(10, 12, 26, 0.62) 100%);
	pointer-events: none;
}

.destination__meta {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: #fff;
}

.destination__name {
	font-size: clamp(17px, 1.6vw, 23px);
	font-weight: 700;
	font-family: var(--font-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.destination__country {
	font-size: clamp(12px, 1.1vw, 15px);
	font-weight: 500;
	white-space: nowrap;
	opacity: 0.82;
}

/* Mobile / tablet: show destination cards in a compact two-column grid. */
@media (max-width: 700px) {
	.destinations__track {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto;
	}

	.destination,
	.destination.is-active {
		flex: none;
		height: 190px;
	}

	/* Keep an odd final card balanced across the full grid width. */
	.destination:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.destinations__head {
		flex-wrap: wrap;
	}

	.destination,
	.destination.is-active {
		height: 170px;
	}
}

/* Recommended for You
   ========================================================================== */

.recommended {
	padding-block: clamp(56px, 9vh, 96px);
	background: #f5f7fc;
}

.recommended__title {
	margin: 0;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--color-text);
}

/* Category tabs ------------------------------------------------------------- */

.recommended__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: clamp(20px, 3vh, 30px) auto clamp(24px, 4vh, 38px);
	max-width: 100%;
}

.recommended__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #131a2c;
	background: #fff;
	border: 1px solid #e6e9f3;
	border-radius: 10px;
	transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.recommended__tab svg {
	width: 17px;
	height: 17px;
	color: var(--color-primary);
	transition: color 0.2s var(--ease);
}

.recommended__tab:hover {
	color: var(--color-primary);
	border-color: rgba(56, 75, 255, 0.4);
}

.recommended__tab.is-active {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.recommended__tab.is-active svg,
.recommended__tab.is-active:hover {
	color: #fff;
}

/* Listings grid -------------------------------------------------------------- */

.recommended__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/* Hidden panels are switched with the hidden attribute. */
.recommended__grid[hidden] {
	display: none;
}

.listing-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--color-text);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 6px 24px -20px rgba(15, 23, 42, 0.35);
}

.listing-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.listing-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

/* Listing without a photo. */
.listing-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #cbd5e1;
	background: var(--color-bg-soft);
}

.listing-card__placeholder svg {
	width: 40px;
	height: 40px;
}

.listing-card:hover .listing-card__media img {
	transform: scale(1.03);
}

.listing-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #16a34a;
	border-radius: 999px;
}

.listing-card__badge svg {
	width: 12px;
	height: 12px;
}

.listing-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1 1 auto;
	padding: 14px 16px 16px;
}

.listing-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.listing-card__place {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--color-muted);
}

.listing-card__place svg {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	color: var(--color-primary);
}

.listing-card__fave {
	display: grid;
	place-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	color: #a8afc0;
	background: #fff;
	border: 1px solid #e7eaf2;
	border-radius: 50%;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.listing-card__fave svg {
	width: 16px;
	height: 16px;
}

.listing-card__fave:hover {
	color: #e11d48;
	border-color: rgba(225, 29, 72, 0.35);
}

.listing-card__fave.is-faved {
	color: #e11d48;
	border-color: rgba(225, 29, 72, 0.35);
}

.listing-card__fave.is-faved svg {
	fill: currentColor;
}

.listing-card__name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.listing-card__name a {
	color: inherit;
	text-decoration: none;
}

.listing-card__name a:hover {
	color: var(--color-primary);
}

.listing-card__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.listing-card__price {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
}

.listing-card__price strong {
	font-size: 19px;
	font-weight: 700;
	color: #131a2c;
}

.listing-card__price em {
	font-size: 13px;
	font-style: normal;
	color: var(--color-muted);
}

.listing-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	background: var(--color-primary);
	border-radius: 9px;
	transition: background-color 0.2s var(--ease);
}

.listing-card__cta:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

@media (max-width: 1023px) {
	.recommended__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.recommended__grid {
		grid-template-columns: 1fr;
	}

	.recommended__tab {
		padding: 10px 14px;
		font-size: 14px;
	}
}

/* Client Testimonial
   ========================================================================== */

.testimonials {
	padding-block: clamp(64px, 10vh, 110px);
	background: #fff;
}

.testimonials__title {
	margin: 0;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--color-text);
}

.testimonials__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 760px;
	margin: clamp(40px, 7vh, 72px) auto 0;
	text-align: center;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}

.testimonials__stage.is-leaving {
	opacity: 0;
	transform: translateY(6px);
}

/* Portrait + overlapping blue quotation badge */
.testimonials__figure {
	position: relative;
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
}

.testimonials__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Reviews have no photo: the traveller's initial in a soft circle. */
.testimonials__avatar--initial {
	display: grid;
	place-items: center;
	font-size: 46px;
	font-weight: 700;
	color: var(--color-primary);
	background: #eef0ff;
}

.testimonials__stars {
	margin: 22px 0 0;
	font-size: 20px;
}

.testimonials__all {
	margin: 24px 0 0;
	text-align: center;
}

.testimonials__all a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--color-primary);
}

.testimonials__all svg {
	width: 18px;
	height: 18px;
}

.testimonials__vquote {
	position: absolute;
	right: -2px;
	bottom: -4px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: #fff;
	background: var(--color-primary);
	border: 3px solid #fff;
	border-radius: 50%;
}

.testimonials__vquote svg {
	width: 16px;
	height: 16px;
}

/* Quote */
.testimonials__quote {
	margin: 30px 0 0;
	max-width: 620px;
}

.testimonials__quote p {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.78;
	color: #4a5568;
}

/* Who */
.testimonials__name {
	margin: 26px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
}

.testimonials__role {
	margin: 5px 0 0;
	font-size: 14px;
	color: var(--color-muted);
}

/* Circular arrows */
.testimonials__nav {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 34px;
}

.testimonials__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--color-text);
	background: #fff;
	border: 1px solid #e4e7ee;
	border-radius: 50%;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.testimonials__arrow svg {
	width: 18px;
	height: 18px;
}

.testimonials__arrow:hover {
	color: var(--color-primary);
	border-color: rgba(56, 75, 255, 0.35);
}

/* Wide screens: arrows sit on the left and right of the content. */
@media (min-width: 1081px) {
	.testimonials {
		position: relative;
	}

	.testimonials__stage {
		max-width: 640px;
	}

	.testimonials__nav {
		position: absolute;
		top: 55%;
		right: 0;
		left: 0;
		gap: 0;
		justify-content: space-between;
		max-width: min(810px, 100%);
		margin: 0 auto;
		padding-inline: 44px;
		pointer-events: none;
	}

	.testimonials__arrow {
		pointer-events: auto;
	}
}

@media (max-width: 480px) {
	.testimonials__quote {
		max-width: 100%;
	}

	.testimonials__quote p {
		font-size: 16px;
	}
}

/* Blog & Articles
   ========================================================================== */

/* Scoped to the section: WordPress also adds a "blog" class to <body>. */

.blog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(24px, 4vh, 40px);
}

.blog__title {
	margin: 0;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.blog__nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.blog__all {
	margin-right: 8px;
	font-weight: 600;
	color: var(--color-primary);
}

.blog-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--color-primary);
	background: #eef0ff;
}

.blog-card__placeholder svg {
	width: 40px;
	height: 40px;
	opacity: 0.6;
}

.blog__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	color: var(--color-text);
	background: #fff;
	border: 1px solid #e4e7ee;
	border-radius: 50%;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.blog__arrow svg {
	width: 18px;
	height: 18px;
}

.blog__arrow:hover {
	color: var(--color-primary);
	border-color: rgba(56, 75, 255, 0.35);
}

/* Track + viewport ---------------------------------------------------------- */

.blog__viewport {
	/* Bottom room lets each card's white box hang over the image edge and
	   keeps its drop shadow clear of the clipping edge. */
	overflow: hidden;
	padding-bottom: 46px;
	touch-action: pan-y;
}

.blog__track {
	display: flex;
	gap: 24px;
	transform: translateX(0);
	transition: transform 0.6s var(--ease);
	will-change: transform;
}

/* Card ---------------------------------------------------------------------- */

.blog-card {
	position: relative;
	display: block;
	flex: 0 0 calc((100% - 48px) / 3);
	min-width: 0;
	color: var(--color-text);
}

.blog-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px;
}

.blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.blog-card:hover .blog-card__media img {
	transform: scale(1.04);
}

/* White content box overlapping the image's bottom-left corner. */
.blog-card__box {
	position: absolute;
	left: 16px;
	bottom: -24px;
	width: calc(100% - 32px);
	padding: 14px 18px 15px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.45);
	transition: transform 0.3s var(--ease);
}

.blog-card:hover .blog-card__box {
	transform: translateY(-3px);
}

.blog-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var(--color-muted);
}

.blog-card__dot {
	font-size: 11px;
	line-height: 1;
}

.blog-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 7px 0 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.blog-card__title a {
	color: inherit;
	text-decoration: none;
}

.blog-card__title a:hover {
	color: var(--color-primary);
}

@media (max-width: 1023px) {
	.blog-card {
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (max-width: 700px) {
	.blog-card {
		flex-basis: 100%;
	}

	.blog__head {
		flex-wrap: wrap;
	}
}

/* Site Footer
   ========================================================================== */

/* Top social strip ------------------------------------------------------------ */

.footer-social {
	display: grid;
	grid-template-columns: repeat(var(--social-count, 5), 1fr);
}

.footer-social__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px;
	padding: 10px 8px;
	font-size: 15px;
	font-weight: 600;
	transition: filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.footer-social__tab svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.footer-social__tab--facebook {
	color: #1877f2;
	background: #e7ebff;
}

.footer-social__tab--x {
	color: #15181d;
	background: #eff0f2;
}

.footer-social__tab--linkedin {
	color: #0a66c2;
	background: #e2f2fd;
}

.footer-social__tab--instagram {
	color: #d6249f;
	background: #fde9f2;
}

.footer-social__tab--pinterest {
	color: #bd081c;
	background: #fdeaec;
}

.footer-social__tab--youtube {
	color: #ff0000;
	background: #ffeaea;
}

.footer-social__tab--tiktok {
	color: #010101;
	background: #eef1f3;
}

.footer-social__tab--whatsapp {
	color: #128c4b;
	background: #e3f7ec;
}

.footer-social__tab:hover {
	filter: brightness(0.95);
	box-shadow: inset 0 -2px 0 0 currentColor;
}

.footer-social__tab.is-active {
	box-shadow: inset 0 -3px 0 0 var(--color-primary);
}

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

.footer-main {
	padding-block: clamp(44px, 7vh, 72px);
	color: #9a9aa2;
	background: #1a1a1a;
}

.footer-main__grid {
	display: grid;
	grid-template-columns: 1.25fr 1.05fr 0.95fr 1.15fr;
	align-items: start;
	gap: clamp(28px, 4vw, 56px);
}

.footer-col__title {
	margin: 0 0 18px;
	font-size: 17px;
	font-weight: 600;
	color: #fff;
}

/* Column 1: brand logo + description */
.footer-brand {
	margin-bottom: 18px;
}

.footer-brand .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

/* The header logo is dark artwork, so invert it to read on the dark footer. */
.footer-brand img {
	display: block;
	width: auto;
	max-height: 46px;
	filter: brightness(0) invert(1);
}

.footer-brand .site-title {
	display: inline-block;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

.footer-desc {
	margin: 0 0 18px;
	max-width: 320px;
	font-size: 14px;
	line-height: 1.7;
	word-wrap: break-word;
}

/* Column 2: office */
.footer-office {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-office li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.6;
}

.footer-office svg {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: var(--color-primary);
}

.footer-office a {
	color: #9a9aa2;
	text-decoration: none;
}

.footer-office a:hover {
	color: #fff;
}

/* Column 3: company links */
.footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 0;
	font-size: 14px;
	color: #9a9aa2;
	text-decoration: none;
	transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.footer-links svg {
	width: 14px;
	height: 14px;
	color: var(--color-primary);
	transition: transform 0.2s var(--ease);
}

.footer-links a:hover {
	color: #fff;
	transform: translateX(3px);
}

/* Column 4: newsletter */
/* Bottom bar ------------------------------------------------------------------ */

.footer-bar {
	padding-block: 17px;
	color: #9a9aa2;
	background: #000;
	font-size: 13px;
}

.footer-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-copy {
	margin: 0;
}

/* Payment methods switched on in the booking settings. */
.footer-payments {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-payments li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #c4c4cc;
}

.footer-payments svg {
	width: 16px;
	height: 16px;
}

/* Back-to-top with scroll-progress ring --------------------------------------- */

.footer-top__btn {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--color-text);
	background: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.25s var(--ease), transform 0.2s var(--ease);
}

.footer-top__btn.is-idle {
	opacity: 0.55;
}

.footer-top__btn:hover {
	opacity: 1;
}

.footer-top__btn:active {
	transform: scale(0.95);
}

/* Direct child only: the arrow glyph is nested and must stay in flow. */
.footer-top__btn > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.footer-top__track {
	stroke: #e7e9f2;
}

.footer-top__ring {
	stroke: var(--color-primary);
}

.footer-top__glyph {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
}

.footer-top__glyph svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* Footer responsive ------------------------------------------------------------- */

@media (max-width: 920px) {
	.footer-main__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.footer-social__label {
		display: none;
	}

	.footer-social__tab svg {
		width: 24px;
		height: 24px;
	}
}

@media (max-width: 600px) {
	.footer-main__grid {
		grid-template-columns: 1fr;
	}

	.footer-top__btn {
		right: 18px;
		bottom: 18px;
	}
}

/* Trust strip
   ========================================================================== */

/* Top padding clears the search card that overhangs the hero. */
.trust {
	padding-block: 76px 20px;
}

.trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trust__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.trust__icon {
	display: grid;
	place-items: center;
	width: 70px;
	height: 70px;
	margin-bottom: 22px;
	color: #1f2433;
	background: #f1f1f2;
	border-radius: 50%;
}

.trust__icon svg {
	width: 30px;
	height: 30px;
	stroke-width: 1.4;
}

.trust__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--color-text);
}

.trust__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-muted);
}

@media (max-width: 1023px) {
	.trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* When to go
   ========================================================================== */

.when {
	--when-best: #34d399;
	--when-good: #a3e635;
	--when-hot: #fbbf24;
	--when-avoid: #f87171;

	padding-block: clamp(56px, 9vh, 96px);
	color: #fff;
	background: var(--color-topbar-bg);
}

.when__head {
	max-width: 680px;
	margin: 0 auto 36px;
	text-align: center;
}

.when__title {
	margin: 0;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}

.when__intro {
	margin: 12px 0 0;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.72);
}

/* Month strip: bar height follows the daytime temperature. */
.when__months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 8px;
	align-items: end;
	margin-bottom: 20px;
}

.when__month {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 4px 8px;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid transparent;
	border-radius: 12px;
	font: inherit;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.when__month:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.when__month.is-active {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.35);
}

.when__month:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.when__month-name {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.when__month-temp {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.when__month-bar {
	width: 100%;
	max-width: 30px;
	height: calc(var(--temp, 25) * 2px);
	border-radius: 6px 6px 3px 3px;
	background: var(--when-good);
}

.when__month--best .when__month-bar {
	background: var(--when-best);
}

.when__month--hot .when__month-bar {
	background: var(--when-hot);
}

.when__month--avoid .when__month-bar {
	background: var(--when-avoid);
}

.when__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 12px 40px;
	align-items: center;
	padding: 28px 32px;
	color: var(--color-text);
	background: #fff;
	border-radius: 16px;
}

.when__panel[hidden] {
	display: none;
}

.when__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	grid-column: 1;
}

.when__name {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.when__verdict {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: #0f172a;
	background: var(--when-good);
}

.when__verdict--best {
	background: var(--when-best);
}

.when__verdict--hot {
	background: var(--when-hot);
}

.when__verdict--avoid {
	background: var(--when-avoid);
}

.when__temps {
	display: flex;
	gap: 28px;
	grid-column: 1;
	margin: 0;
}

.when__temps dt {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 13px;
	color: var(--color-muted);
}

.when__temps dt svg {
	width: 16px;
	height: 16px;
}

.when__temps dd {
	margin: 2px 0 0;
	font-size: 26px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.when__note {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: #334155;
}

.when__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: center;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.72);
}

.when__legend-item {
	display: inline-flex;
	gap: 7px;
	align-items: center;
}

.when__legend-item::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--when-good);
}

.when__legend-item--best::before {
	background: var(--when-best);
}

.when__legend-item--hot::before {
	background: var(--when-hot);
}

.when__legend-item--avoid::before {
	background: var(--when-avoid);
}

/* Trip planner
   ========================================================================== */

.planner {
	padding-block: clamp(56px, 9vh, 96px);
	background: #f5f7fc;
}

.planner__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
	gap: 48px;
	align-items: center;
}

.planner__title {
	margin: 0 0 14px;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-text);
}

.planner__intro p {
	margin: 0 0 12px;
	font-size: 17px;
	color: var(--color-muted);
}

.planner__intro .planner__who-replies {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-weight: 600;
	color: var(--color-text);
}

.planner__who-replies svg {
	width: 18px;
	height: 18px;
	color: #25d366;
}

.planner__form {
	padding: 28px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 50px -34px rgba(15, 23, 42, 0.45);
}

.planner__steps {
	display: none;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.planner__form.is-ready .planner__steps {
	display: flex;
}

.planner__steps li {
	flex: 1;
	padding-top: 10px;
	border-top: 3px solid var(--color-border);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.planner__steps li.is-active,
.planner__steps li.is-done {
	border-color: var(--color-primary);
	color: var(--color-text);
}

.planner__step {
	min-width: 0;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.planner__question {
	margin-bottom: 14px;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
}

.planner__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.planner__choice {
	position: relative;
	cursor: pointer;
}

.planner__choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.planner__choice span {
	display: flex;
	align-items: center;
	min-height: 54px;
	padding: 12px 16px;
	border: 1.5px solid var(--color-border);
	border-radius: 12px;
	font-weight: 600;
	color: var(--color-text);
	transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.planner__choice:hover span {
	border-color: #a5b4fc;
}

.planner__choice input:checked + span {
	border-color: var(--color-primary);
	background: #eef0ff;
}

.planner__choice input:focus-visible + span {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Tick for the multi-choice step. */
.planner__choice input[type="checkbox"]:checked + span::after {
	content: "✓";
	margin-inline-start: auto;
	padding-inline-start: 10px;
	color: var(--color-primary);
}

.planner__fields {
	display: grid;
	gap: 14px;
}

.planner__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
}

.planner__field input,
.planner__field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--color-border);
	border-radius: 10px;
	font: inherit;
	font-weight: 400;
}

.planner__field input:focus,
.planner__field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
}

.planner__preview {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #f5f7fc;
	font-size: 14px;
	line-height: 1.6;
	color: #334155;
	white-space: pre-line;
}

.planner__preview:empty {
	display: none;
}

.planner__error {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: #dc2626;
}

.planner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	align-items: center;
	justify-content: flex-end;
}

.planner__back {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-inline-end: auto;
	padding: 8px 4px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--color-muted);
	cursor: pointer;
}

.planner__back svg {
	width: 18px;
	height: 18px;
}

.planner__send {
	background: #25d366;
}

.planner__send:hover {
	background: #1ebe5b;
}

.planner__email {
	font-weight: 600;
	color: var(--color-primary);
}

/* Steps are switched with the hidden attribute. */
.planner [hidden] {
	display: none !important;
}

@media (max-width: 900px) {
	.planner__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.when__panel {
		grid-template-columns: 1fr;
		padding: 22px;
	}

	.when__note {
		grid-column: 1;
		grid-row: auto;
		font-size: 16px;
	}
}

@media (max-width: 700px) {
	/* Show every month at once in two compact chart rows on phones. */
	.when__months {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 6px;
	}

	.when__month {
		min-width: 0;
		padding: 8px 2px 6px;
		border-radius: 8px;
	}

	.when__month-name,
	.when__month-temp {
		font-size: 11px;
	}

	.when__month-bar {
		max-width: 18px;
	}

	/* Phones: icon beside the text, one claim per row. */
	.trust {
		padding-block: 60px 8px;
	}

	.trust__list {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.trust__item {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
	}

	.trust__icon {
		grid-row: span 2;
		width: 56px;
		height: 56px;
		margin-bottom: 0;
	}

	.trust__icon svg {
		width: 24px;
		height: 24px;
	}

	.trust__title {
		margin: 4px 0 4px;
		font-size: 17px;
	}

	.trust__text {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.planner__form {
		padding: 20px 16px;
	}

	.planner__choices {
		grid-template-columns: 1fr;
	}

	.planner__actions .btn {
		flex: 1 1 100%;
	}
}

/* Responsive
   ========================================================================== */

@media (max-width: 1023px) {
	.topbar,
	.primary-nav,
	.header-book,
	.header-account {
		display: none;
	}

	.menu-toggle {
		display: grid;
	}

	:root {
		--header-height: 78px;
		--dafa-offset: var(--header-height);
	}

	.site-header {
		padding-block: 8px;
	}

	/* Inset pill: equal gutters on both sides, and a radius derived from its
	   own height so it always reads as a perfect pill. */
	.site-header__inner {
		display: flex;
		justify-content: space-between;
		/* The pill is the .container itself, so its padding replaces the
		   container gutter: inset it with margins instead. */
		width: auto;
		height: calc(var(--header-height) - 16px);
		margin-inline: 12px;
		padding-inline: 14px 8px;
		border-radius: calc((var(--header-height) - 16px) / 2);
		transition:
			margin 0.4s var(--ease),
			height 0.4s var(--ease),
			padding 0.4s var(--ease),
			border-radius 0.4s var(--ease),
			box-shadow 0.4s var(--ease);
	}

	/* Keep the logo clear of the pill's rounded corners. */
	.site-branding img {
		max-height: 42px;
	}

	.site-header.is-scrolled .site-header__inner {
		height: var(--header-height);
		margin-inline: 0;
		padding-inline: 20px 12px;
	}
}

@media (min-width: 1024px) {
	.mobile-nav {
		display: none;
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

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

/* Site pages (About, Contact, FAQ, guides, legal)
   ========================================================================== */

.btn--light {
	height: 46px;
	padding: 0 20px;
	font-size: 16px;
	color: var(--color-text);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 9px;
}

.btn--light:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.page-hero {
	padding-block: 40px 44px;
	background: #f5f7fc;
	border-bottom: 1px solid var(--color-border);
}

.page-hero__inner {
	text-align: center;
}

.page-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 14px;
	color: var(--color-muted);
}

.page-hero__crumbs a {
	color: var(--color-muted);
}

.page-hero__crumbs a:hover {
	color: var(--color-primary);
}

.page-hero__title {
	margin: 0;
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.page-body {
	padding-block: 48px 64px;
}

.page-body--tight {
	padding-bottom: 0;
}

.page-body--split,
.page-body--aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: 56px;
	align-items: start;
}

.page-body--aside {
	grid-template-columns: minmax(0, 1fr) 280px;
}

.page-body__intro {
	margin-bottom: 32px;
}

.page-photo {
	margin: 0;
}

.page-photo img,
.page-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	object-fit: cover;
}

.page-banner {
	margin-block: 32px 0;
}

.page-banner img {
	max-height: 460px;
}

/* Long-form text */
.prose {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.75;
	color: #334155;
}

.prose > :first-child {
	margin-top: 0;
}

.prose h2 {
	margin: 2em 0 0.6em;
	font-size: 26px;
	line-height: 1.25;
	color: var(--color-text);
}

.prose h3 {
	margin: 1.6em 0 0.5em;
	font-size: 20px;
	color: var(--color-text);
}

.prose p,
.prose ul,
.prose ol {
	margin: 0 0 1.1em;
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
}

.prose li {
	margin-bottom: 0.35em;
}

.prose a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose strong {
	color: var(--color-text);
}

.prose mark {
	padding: 1px 4px;
	background: #fff3c4;
	border-radius: 4px;
}

.prose--small {
	font-size: 16px;
	margin-bottom: 24px;
}

.page-updated {
	margin-top: 40px;
	font-size: 14px;
	color: var(--color-muted);
}

/* FAQ: Details blocks */
.prose details {
	margin: 0 0 12px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	transition: border-color 0.2s var(--ease);
}

.prose details[open] {
	border-color: #c7cdfd;
}

.prose summary {
	position: relative;
	padding: 18px 52px 18px 20px;
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	list-style: none;
}

.prose summary::-webkit-details-marker {
	display: none;
}

.prose summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 20px;
	font-size: 22px;
	font-weight: 400;
	color: var(--color-primary);
	transform: translateY(-50%);
}

.prose details[open] summary::after {
	content: "\2212";
}

.prose details > :not(summary) {
	margin: 0;
	padding: 0 20px 16px;
}

/* Call to action */
.page-cta {
	padding-block: 8px 72px;
}

.page-cta__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	flex-wrap: wrap;
	padding: 36px 40px;
	background: #f5f7fc;
	border-radius: 20px;
}

.page-cta__title {
	margin: 0 0 6px;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.2;
}

.page-cta__text {
	margin: 0;
	color: var(--color-muted);
}

.page-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.page--about .trust {
	padding-block: 0 72px;
}

/* Contact */
.contact {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 48px;
	align-items: start;
}

.contact-cards {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-card {
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
}

.contact-card > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.contact-card a {
	color: var(--color-primary);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.contact-card small {
	color: var(--color-muted);
}

.contact-card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--color-primary);
	background: #eef0ff;
	border-radius: 50%;
}

.contact-card__icon svg {
	width: 20px;
	height: 20px;
}

.contact-card--whatsapp .contact-card__icon {
	color: #128c4b;
	background: #e3f7ec;
}

.contact-form-wrap {
	padding: 32px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	box-shadow: var(--shadow);
	scroll-margin-top: 140px;
}

.contact-form-wrap__title {
	margin: 0 0 20px;
	font-size: 24px;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.field label {
	font-size: 14px;
	font-weight: 600;
}

.field input,
.field textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	color: var(--color-text);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
}

.field input:focus,
.field textarea:focus {
	border-color: var(--color-primary);
	outline: 3px solid rgba(56, 75, 255, 0.15);
}

.field textarea {
	resize: vertical;
}

.contact-form__trap {
	position: absolute;
	left: -9999px;
}

.contact-form__privacy {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--color-muted);
}

.contact-form__privacy a {
	color: var(--color-primary);
}

.form-notice {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 10px;
}

.form-notice--success {
	color: #0f5132;
	background: #e3f7ec;
}

.form-notice--error {
	color: #842029;
	background: #fde8ea;
}

.contact-map {
	position: relative;
	padding-bottom: 72px;
}

.contact-map iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
	border-radius: 18px;
}

.contact-map__link {
	position: absolute;
	right: 36px;
	bottom: 92px;
	box-shadow: var(--shadow);
}

/* Reviews */
.stars {
	display: inline-flex;
	gap: 2px;
	color: #d6dae3;
}

.stars__star.is-on {
	color: #f5a524;
}

.reviews-summary {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
}

.reviews-summary__score {
	font-size: 48px;
	line-height: 1;
}

.reviews-summary > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 20px;
}

.reviews-summary__count {
	font-size: 15px;
	color: var(--color-muted);
}

.reviews-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.review-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
}

.review-card__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--color-muted);
}

.review-card__text {
	margin: 0;
	color: #334155;
}

.review-card__text p {
	margin: 0 0 0.6em;
}

.review-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: auto 0 0;
	font-size: 14px;
}

.review-card__meta a {
	color: var(--color-primary);
}

.page-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 56px 24px;
	text-align: center;
	color: var(--color-muted);
	background: #f8fafc;
	border-radius: 18px;
}

.page-empty svg {
	width: 36px;
	height: 36px;
	color: var(--color-primary);
}

.page-empty p {
	max-width: 520px;
	margin: 0;
}

.page-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}

.page-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
}

.page-pager .page-numbers.current {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
}

/* Travel guides */
.guide-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.guide-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.guide-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.guide-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: #eef0ff;
}

.guide-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guide-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--color-primary);
}

.guide-card__placeholder svg {
	width: 40px;
	height: 40px;
	opacity: 0.6;
}

.guide-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 22px;
}

.guide-card__title {
	margin: 0;
	font-size: 21px;
}

.guide-card__text {
	margin: 0;
	color: var(--color-muted);
}

.guide-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	font-weight: 600;
	color: var(--color-primary);
}

.guide-card__more svg {
	width: 18px;
	height: 18px;
}

.page-aside {
	position: sticky;
	top: 140px;
	padding: 22px;
	background: #f8fafc;
	border-radius: 16px;
}

.page-aside__title {
	margin: 0 0 12px;
	font-size: 17px;
}

.page-aside__links {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-aside__links a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	color: var(--color-text);
}

.page-aside__links a:hover {
	color: var(--color-primary);
}

.page-aside__links svg {
	width: 16px;
	height: 16px;
	color: var(--color-primary);
}

.guide-offers {
	padding-bottom: 64px;
}

.guide-offers__title {
	margin: 0 0 20px;
	font-size: 26px;
}

/* Footer legal links */
.footer-legal__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-legal a {
	color: #c4c4cc;
}

.footer-legal a:hover {
	color: #fff;
}

@media (max-width: 1023px) {
	.page-body--split,
	.page-body--aside,
	.contact {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.page-aside {
		position: static;
	}
}

@media (max-width: 640px) {
	.page-hero {
		padding-block: 28px 32px;
	}

	.page-body {
		padding-block: 32px 48px;
	}

	.prose {
		font-size: 16px;
	}

	.prose h2 {
		font-size: 22px;
	}

	.contact-form-wrap {
		padding: 22px 18px;
	}

	.contact-form__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.page-cta__box {
		padding: 26px 22px;
	}

	.page-cta__actions,
	.page-cta__actions .btn {
		width: 100%;
	}

	.contact-map iframe {
		height: 300px;
	}

	.contact-map__link {
		position: static;
		margin-top: 12px;
		box-shadow: none;
	}

	.reviews-list,
	.guide-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Footer: plan a trip
   ========================================================================== */

.footer-plan {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.footer-plan__whatsapp {
	height: 46px;
	padding: 0 18px;
	font-size: 15px;
	color: #fff;
	background: #128c4b;
	border-radius: 9px;
}

.footer-plan__whatsapp:hover {
	background: #0e7a40;
}

.footer-plan__whatsapp svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Blog lists, posts, search and 404
   ========================================================================== */

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 56px 24px;
	padding-bottom: 32px;
}

.post-grid .blog-card {
	flex: none;
}

.result-card {
	padding: 22px 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
}

.result-card__title {
	margin: 0 0 8px;
	font-size: 19px;
}

.result-card__title a {
	color: var(--color-text);
}

.result-card__title a:hover {
	color: var(--color-primary);
}

.result-card__text {
	margin: 0;
	color: var(--color-muted);
}

.post {
	max-width: 760px;
	margin-inline: auto;
}

.post__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--color-muted);
}

.post__meta a {
	color: var(--color-primary);
}

.post__image {
	margin: 0 0 32px;
}

.post__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.post .prose img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	max-width: 760px;
	margin: 48px auto 0;
	padding-top: 24px;
	font-weight: 600;
	border-top: 1px solid var(--color-border);
}

.post-nav a {
	color: var(--color-primary);
}

.post-nav__next {
	margin-left: auto;
	text-align: right;
}

.search-form {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin: 0 auto 36px;
}

.search-form label {
	flex: 1;
}

.search-form .search-field {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	font: inherit;
	border: 1px solid var(--color-border);
	border-radius: 10px;
}

.search-form .search-submit {
	height: 48px;
	padding: 0 20px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

.page-empty__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}

@media (max-width: 640px) {
	.post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.search-form {
		flex-direction: column;
	}
}