/* ==========================================================================
   Wild East Oman — design system
   Tokens match the original site: Outfit/Inter, terracotta #c05621,
   gold #d69e2e, warm light #fdfbf7, ink #1a202c, glassmorphism navbar.
   ========================================================================== */

:root {
	--color-primary: #c05621;
	--color-primary-dark: #9c4221;
	--color-primary-hover: #d56631;
	--color-secondary: #2f855a;
	--color-secondary-dark: #276749;
	--color-accent: #d69e2e;
	--color-accent-hover: #fab436;
	--color-bg-light: #fdfbf7;
	--color-bg-warm: #f0efe9;
	--color-text-main: #2d3748;
	--color-text-muted: #718096;
	--color-black: #1a202c;
	--color-white: #fff;
	--color-danger: #e53e3e;
	--color-whatsapp: #25d366;
	--color-whatsapp-dark: #128c7e;

	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-xl: 8rem;

	--font-heading: "Outfit", sans-serif;
	--font-body: "Inter", sans-serif;

	--radius-card: 16px;
	--radius-input: 10px;
	--radius-modal: 20px;

	--shadow-card: 0 10px 30px -12px rgba(26, 32, 44, 0.18);
	--shadow-card-hover: 0 25px 50px -12px rgba(26, 32, 44, 0.3);
	--shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.4);

	--transition-fast: 0.2s ease;
	--transition-medium: 0.4s ease-out;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-main);
	background: var(--color-bg-light);
	-webkit-font-smoothing: antialiased;
}

body.nav-open,
body.modal-open {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-black);
	margin: 0 0 0.6em;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary-dark);
}

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

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
}

.container {
	width: min(1200px, 92vw);
	margin: 0 auto;
}

/* Anchored sections land below the fixed navbar when linked from other pages. */
section[id] {
	scroll-margin-top: 90px;
}

.screen-reader-text,
.skip-link {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   Buttons — pill, uppercase, letter-spaced (as on the original site)
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.9rem;
	border-radius: 50px;
	border: 2px solid transparent;
	font-family: var(--font-heading);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--transition-fast);
	line-height: 1.4;
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 6px 18px -6px rgba(192, 86, 33, 0.6);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--color-primary-hover);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -6px rgba(192, 86, 33, 0.7);
}

.btn-outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-outline:hover {
	background: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
}

.btn-glass {
	background: rgba(255, 255, 255, 0.14);
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.btn-glass:hover {
	background: rgba(255, 255, 255, 0.28);
	color: var(--color-white);
	transform: translateY(-2px);
}

.btn-custom {
	background: var(--color-accent);
	color: var(--color-black);
	border-radius: 4px;
}

.btn-custom:hover {
	background: var(--color-accent-hover);
	transform: translateY(-2px);
	color: var(--color-black);
}

.btn-whatsapp {
	background: var(--color-whatsapp);
	color: var(--color-white);
}

.btn-whatsapp:hover {
	background: var(--color-whatsapp-dark);
	color: var(--color-white);
	transform: translateY(-2px);
}

.btn-block {
	width: 100%;
	margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   Top contact bar (white) — phone, email, socials, Book Now
   -------------------------------------------------------------------------- */

.top-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	height: 60px;
	background: var(--color-white);
	border-bottom: 1px solid #eee7db;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.top-bar-inner {
	width: min(1280px, 95vw);
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
}

.top-contact {
	display: flex;
	align-items: center;
	gap: 1.4rem;
}

.top-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--color-primary);
	font-size: 0.88rem;
	font-weight: 500;
}

.top-contact a:hover {
	color: var(--color-accent);
}

.top-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

.top-socials {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.top-socials a {
	color: var(--color-primary);
	display: inline-flex;
}

.top-socials a:hover {
	color: var(--color-accent);
}

.top-divider {
	color: #d8d2c6;
}

.top-login {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
}

.top-login:hover {
	color: var(--color-accent);
}

body.nav-scrolled .top-bar {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

.d-none-mobile {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   Navbar — floating glass pill over the hero, solid bar when scrolled
   -------------------------------------------------------------------------- */

.navbar {
	position: absolute;
	top: 76px;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	max-width: 1280px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	padding: 0.7rem 1.6rem;
	background: rgba(20, 20, 20, 0.6);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	transition: all var(--transition-medium);
}

.navbar.nav-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transform: none;
	width: 100%;
	max-width: none;
	background: #000;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	padding: 1rem 2rem;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.navbar.nav-scrolled .nav-menu {
	margin-right: 0;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 0.06em;
}

.logo:hover {
	color: var(--color-accent-hover);
}

.logo-icon {
	width: 30px;
	height: 30px;
	flex: none;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.nav-links > li > a {
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--font-heading);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	transition: color var(--transition-fast);
}

.nav-links > li > a:hover {
	color: var(--color-accent-hover);
}

.nav-has-dropdown {
	position: relative;
}

.nav-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.nav-chevron {
	width: 15px;
	height: 15px;
	transition: transform var(--transition-fast);
}

.dropdown-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 230px;
	background: rgba(20, 20, 20, 0.94);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 0.6rem;
	opacity: 0;
	visibility: hidden;
	transition: all var(--transition-fast);
	text-align: left;
}

.nav-has-dropdown:hover .dropdown-menu,
.nav-has-dropdown:focus-within .dropdown-menu,
.nav-has-dropdown.dropdown-open .dropdown-menu {
	opacity: 1;
	visibility: visible;
}

.nav-has-dropdown.dropdown-open .nav-chevron {
	transform: rotate(180deg);
}

.dropdown-menu a {
	display: block;
	padding: 0.5rem 0.85rem;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
}

.dropdown-menu a:hover {
	background: rgba(214, 158, 46, 0.18);
	color: var(--color-accent-hover);
}

.nav-socials {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nav-socials a {
	color: rgba(255, 255, 255, 0.8);
	display: inline-flex;
	transition: color var(--transition-fast);
}

.nav-socials a:hover {
	color: var(--color-accent-hover);
}

.nav-socials svg {
	width: 18px;
	height: 18px;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--color-white);
}

.nav-toggle svg {
	width: 26px;
	height: 26px;
}

.nav-close {
	display: none;
}

/* --------------------------------------------------------------------------
   Hero — full-screen image, center title, glass side cards, search strip
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	height: 100vh;
	min-height: 700px;
	padding-top: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-black);
	color: var(--color-white);
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
}

.hero-content-wrapper,
.hero-search-wrapper {
	position: relative;
	z-index: 2;
}

.hero-content-wrapper {
	width: min(1280px, 95vw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr minmax(300px, 600px) 1fr;
	gap: var(--spacing-md);
	align-items: center;
	padding: 0 0 90px;
}

.hero-side-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	align-items: center;
}

.hero-center-text {
	text-align: center;
	animation: fadeInUp 1s ease-out both;
}

.hero-subtitle {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(0.85rem, 1.6vw, 1.05rem);
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--spacing-sm);
}

.hero-title {
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	font-weight: 800;
	color: var(--color-white);
	line-height: 1.15;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
	margin: 0;
}

.hero-content-wrapper .glass-card {
	width: 240px;
	background: rgba(30, 30, 30, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 16px;
	text-decoration: none;
}

.hero-content-wrapper .glass-card:hover {
	transform: translateY(-5px);
	background: rgba(30, 30, 30, 0.55);
}

.hero-content-wrapper .card-icon svg {
	width: 28px;
	height: 28px;
	color: var(--color-accent);
}

.hero-content-wrapper .card-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.05rem;
}

.hero-content-wrapper .card-sub {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.5;
}

.glass-card h3 {
	color: var(--color-white);
	font-size: 1.05rem;
	margin: 0 0 0.3rem;
}

.glass-card p {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.5;
	margin: 0;
}

.glass-card .card-icon {
	color: var(--color-accent);
}

/* --- Bottom search strip --- */

.hero-search-wrapper {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: min(800px, 92vw);
	z-index: 2;
}

.glass-search-bar {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: 0.7rem 0.8rem;
	background: rgba(20, 20, 20, 0.8);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 100px;
}

.glass-search-bar .search-icon {
	color: rgba(255, 255, 255, 0.7);
	display: inline-flex;
}

.glass-search-bar .search-icon svg {
	width: 24px;
	height: 24px;
}

.search-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	min-width: 0;
}

.search-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--color-accent);
	white-space: nowrap;
}

.adventure-dropdown {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 0.95rem;
	padding: 0.4rem 0.2rem;
	cursor: pointer;
}

.adventure-dropdown:focus {
	outline: none;
}

.adventure-dropdown option {
	color: var(--color-text-main);
	background: var(--color-black);
}

.btn-search {
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: 100px;
	padding: 0.65rem 1.5rem;
	border: 0;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	transition: background var(--transition-fast);
	white-space: nowrap;
}

.btn-search:hover {
	background: var(--color-primary-hover);
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.fade-in-left {
	animation: fadeInLeft 0.9s ease-out both;
}

.fade-in-right {
	animation: fadeInRight 0.9s ease-out both;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.tours-section,
.gallery-section,
.rentals-section,
.reviews-section,
.solo-section {
	padding: var(--spacing-lg) 0;
}

.section-header {
	text-align: center;
	margin-bottom: var(--spacing-md);
}

.section-subtitle {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 0.4rem;
}

.section-header h2 {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	margin: 0;
}

.section-intro {
	max-width: 68ch;
	margin: 0 auto var(--spacing-md);
	text-align: center;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Tour cards
   -------------------------------------------------------------------------- */

.tours-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-md);
}

.tours-grid-1 {
	grid-template-columns: 1fr;
	max-width: 460px;
	margin: 0 auto;
}

.tours-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.tour-card {
	background: var(--color-white);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-medium), box-shadow var(--transition-medium);
	display: flex;
	flex-direction: column;
}

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

.tour-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg-warm);
}

.tour-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-medium);
}

.tour-card:hover .tour-card-media img {
	transform: scale(1.05);
}

.tour-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 3rem;
	opacity: 0.4;
}

.tour-duration {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background: rgba(20, 20, 20, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.8rem;
	border-radius: 50px;
}

.tour-card-body {
	padding: var(--spacing-sm) var(--spacing-sm) calc(var(--spacing-sm) + 0.25rem);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tour-title {
	font-size: 1.2rem;
	margin-bottom: 0.4rem;
}

.tour-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin-bottom: 0.6rem;
}

.tour-meta-lg {
	font-size: 1rem;
	gap: 0.5rem 1.5rem;
	margin-bottom: var(--spacing-md);
}

.tour-excerpt {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	flex: 1;
}

.tour-pricing {
	border-top: 1px dashed #e2e0da;
	padding-top: 0.75rem;
	margin-bottom: 0.9rem;
}

.tour-pricing li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.2rem 0;
	font-size: 0.9rem;
}

.tour-price-label {
	color: var(--color-text-muted);
}

.tour-price-main {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
	white-space: nowrap;
}

.tour-price-main-lg {
	font-size: 1.6rem;
	margin: 0 0 0.2rem;
}

.tour-pricing-fixed {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.tour-price-note {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.tour-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.tour-actions .btn {
	padding: 0.6rem 1.3rem;
	font-size: 0.76rem;
}

.btn-tour-book {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-sm);
}

.gallery-item {
	position: relative;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.gallery-link {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-warm);
}

.gallery-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-medium);
}

.gallery-item:hover .gallery-link img {
	transform: scale(1.05);
}

.gallery-item figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.45rem 0.8rem 0.55rem;
	background: linear-gradient(180deg, transparent, rgba(10, 12, 16, 0.85));
	color: var(--color-white);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.03em;
}

.weo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 12, 16, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-fast);
}

.weo-lightbox.open {
	opacity: 1;
	visibility: visible;
}

.weo-lightbox img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: var(--shadow-modal);
}

.weo-lightbox-close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.14);
	color: var(--color-white);
	font-size: 1.5rem;
	cursor: pointer;
	transition: transform var(--transition-fast);
}

.weo-lightbox-close:hover {
	transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Rentals + add-ons — original two-column layout
   -------------------------------------------------------------------------- */

.rentals-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
	align-items: start;
}

.rentals-photos {
	display: grid;
	gap: var(--spacing-sm);
}

.rental-photo {
	display: block;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.rental-photo img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	transition: transform var(--transition-medium);
}

.rental-photo:hover img {
	transform: scale(1.03);
}

.rentals-options h3 {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-sm);
}

.rental-options-list {
	margin-bottom: var(--spacing-md);
}

.rental-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-sm);
	padding: 0.7rem 0;
	border-bottom: 1px solid #eee7db;
}

.rental-option .option-text,
.addon-option .option-text {
	font-weight: 500;
}

.rental-option .option-price,
.addon-option .option-price {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-primary);
	white-space: nowrap;
}

.addons-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.2rem;
	margin-bottom: var(--spacing-sm);
}

.addons-heading svg {
	color: var(--color-accent);
}

.addons-list {
	margin-bottom: var(--spacing-sm);
}

.addon-option {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.45rem 0;
}

.addon-check {
	width: 18px;
	height: 18px;
	flex: none;
	border: 2px solid var(--color-accent);
	border-radius: 4px;
	background: rgba(214, 158, 46, 0.12);
}

.rental-note {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	font-style: italic;
	margin-bottom: var(--spacing-sm);
}

.rentals-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-md);
}

.rental-card {
	background: var(--color-white);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-medium), box-shadow var(--transition-medium);
	display: flex;
	flex-direction: column;
}

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

.rental-media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg-warm);
}

.rental-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rental-body {
	padding: var(--spacing-sm);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.rental-body h3 {
	font-size: 1.1rem;
	margin-bottom: 0.4rem;
}

.rental-body p {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	flex: 1;
}

.rental-price {
	margin-bottom: 0.4rem;
}

.rental-price-value {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-primary);
}

.addons-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--spacing-sm);
}

.addon-card {
	background: var(--color-white);
	border: 1px solid #ece9e2;
	border-radius: 12px;
	padding: var(--spacing-sm);
	text-align: center;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-fast);
}

.addon-card:hover {
	transform: translateY(-4px);
}

.addon-card h3 {
	font-size: 1rem;
	margin-bottom: 0.3rem;
}

/* --------------------------------------------------------------------------
   Traveling solo — dark glass section
   -------------------------------------------------------------------------- */

.solo-section {
	background:
		linear-gradient(135deg, rgba(26, 32, 44, 0.96), rgba(45, 55, 72, 0.92)),
		var(--color-black);
	color: var(--color-white);
	padding: var(--spacing-lg) 0;
}

.solo-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--spacing-lg);
	align-items: center;
}

.solo-copy h2 {
	color: var(--color-white);
	font-size: clamp(1.6rem, 3.5vw, 2.3rem);
	margin-bottom: 0.4rem;
}

.solo-copy p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.05rem;
	margin: 0;
}

.solo-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-sm);
}

.glass-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: var(--spacing-md) var(--spacing-sm);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-card);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--color-white);
	cursor: pointer;
	text-align: left;
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.glass-card:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateY(-4px);
}

.card-icon {
	font-size: 1.8rem;
	line-height: 1;
}

.card-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.05rem;
}

.card-sub {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-md);
}

.review-card {
	margin: 0;
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: var(--spacing-md) var(--spacing-sm);
	box-shadow: var(--shadow-card);
}

.review-stars {
	color: #e2ddd2;
	font-size: 1.1rem;
	letter-spacing: 0.15em;
	margin-bottom: 0.6rem;
}

.star-full {
	color: var(--color-accent);
}

.review-card blockquote {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	color: var(--color-text-main);
}

.review-card figcaption {
	font-size: 0.88rem;
	color: var(--color-text-muted);
}

.review-country::before {
	content: " · ";
}

.review-tour {
	display: block;
	margin-top: 0.15rem;
	font-style: italic;
}

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

.footer {
	background: var(--color-black);
	color: rgba(255, 255, 255, 0.75);
	padding: var(--spacing-lg) 0 0;
}

.footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
}

.footer h3 {
	color: var(--color-white);
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.footer .logo {
	font-size: 1.15rem;
}

.footer-tagline {
	max-width: 34ch;
}

.footer-social {
	display: flex;
	gap: 1rem;
	margin-top: 0.8rem;
}

.footer-social a {
	color: var(--color-accent);
	font-weight: 500;
}

.footer-social a:hover {
	color: var(--color-accent-hover);
}

.footer-links li {
	margin-bottom: 0.55rem;
}

.footer-links a,
.footer-contact a {
	color: rgba(255, 255, 255, 0.75);
}

.footer-links a:hover,
.footer-contact a:hover {
	color: var(--color-accent-hover);
}

.footer-contact li {
	margin-bottom: 0.8rem;
}

.footer-contact-label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 1.1rem 0;
	text-align: center;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Floating WhatsApp button
   -------------------------------------------------------------------------- */

.whatsapp-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 1500;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-whatsapp);
	color: var(--color-white);
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
	animation: pulse-whatsapp 2.4s infinite;
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.whatsapp-float:hover {
	background: var(--color-whatsapp-dark);
	color: var(--color-white);
	transform: scale(1.06);
}

@keyframes pulse-whatsapp {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	70% {
		box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

/* --------------------------------------------------------------------------
   Booking modal
   -------------------------------------------------------------------------- */

.booking-modal {
	position: fixed;
	inset: 0;
	z-index: 2500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
}

.booking-modal[hidden] {
	display: none;
}

.booking-overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 16, 0.72);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.booking-card {
	position: relative;
	width: min(680px, 100%);
	max-height: 92vh;
	overflow: auto;
	background: var(--color-white);
	border-radius: var(--radius-modal);
	padding: calc(var(--spacing-sm) + 0.5rem);
	box-shadow: var(--shadow-modal);
	animation: slide-up 0.35s ease-out;
}

@keyframes slide-up {
	from {
		opacity: 0;
		transform: translateY(36px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.booking-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--color-bg-warm);
	color: var(--color-text-main);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--transition-fast), background var(--transition-fast);
}

.booking-close:hover {
	transform: rotate(90deg);
	background: #e6e3da;
}

.booking-card h2 {
	margin-bottom: 0.2rem;
}

.booking-subtitle {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	margin-bottom: var(--spacing-sm);
}

.booking-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem 1rem;
}

.booking-field {
	margin-bottom: 0.9rem;
}

.booking-field label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: 0.3rem;
}

.booking-field input,
.booking-field select,
.booking-field textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1.5px solid #ddd9d0;
	border-radius: var(--radius-input);
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-text-main);
	background: #f8f9fa;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(192, 86, 33, 0.15);
	background: var(--color-white);
}

.booking-error {
	display: block;
	color: var(--color-danger);
	font-size: 0.8rem;
	min-height: 1em;
	margin-top: 0.2rem;
}

.booking-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.booking-actions {
	margin-top: 0.4rem;
}

.booking-form-error {
	background: rgba(229, 62, 62, 0.08);
	border: 1px solid rgba(229, 62, 62, 0.35);
	border-radius: var(--radius-input);
	color: var(--color-danger);
	padding: 0.6rem 0.9rem;
	font-size: 0.88rem;
}

.booking-success {
	text-align: center;
	padding: var(--spacing-md) var(--spacing-sm);
}

.booking-success[hidden] {
	display: none;
}

#booking-form[hidden] {
	display: none;
}

.booking-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 0.8rem;
	border-radius: 50%;
	background: rgba(47, 133, 90, 0.12);
	color: var(--color-secondary);
	font-size: 2rem;
	font-weight: 700;
}

.booking-success p {
	color: var(--color-text-muted);
	margin-bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
   Tour single
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Tour single — full-bleed image hero with overlaid title
   -------------------------------------------------------------------------- */

.tour-single-hero {
	position: relative;
	height: 62vh;
	min-height: 480px;
	background-size: cover;
	background-position: center 38%;
	background-color: var(--color-black);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.tour-single-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.45) 100%);
}

.tour-single-back {
	position: absolute;
	top: 104px;
	left: 4vw;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.2rem;
	border-radius: 50px;
	background: rgba(20, 20, 20, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--color-white);
	font-size: 0.85rem;
	font-weight: 500;
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.tour-single-back:hover {
	background: rgba(20, 20, 20, 0.78);
	color: var(--color-white);
	transform: translateX(-3px);
}

.tour-single-hero-content {
	position: relative;
	z-index: 1;
	width: min(1200px, 92vw);
	margin: 0 auto calc(var(--spacing-md) + 0.5rem);
	color: var(--color-white);
}

.tour-single-eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.tour-single-hero-content h1 {
	font-size: clamp(1.9rem, 4.5vw, 3.1rem);
	color: var(--color-white);
	max-width: 22ch;
	margin: 0 0 0.8rem;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

.tour-meta-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tour-meta-hero li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.95rem;
	border-radius: 50px;
	background: rgba(20, 20, 20, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.82rem;
	white-space: nowrap;
}

.tour-single {
	padding-bottom: var(--spacing-lg);
}

.tour-single-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr;
	gap: var(--spacing-md);
	align-items: start;
}

.tour-single-content {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: var(--spacing-md) var(--spacing-sm);
	box-shadow: var(--shadow-card);
}

.tour-single-content h2 {
	margin-top: 0;
}

.tour-single-content strong {
	color: var(--color-black);
}

.tour-single-box {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
	box-shadow: var(--shadow-card);
	position: sticky;
	top: 90px;
}

.tour-single-box h3 {
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Default pages
   -------------------------------------------------------------------------- */

.weo-page {
	padding: calc(var(--spacing-lg) + 1rem) 0 var(--spacing-lg);
}

.weo-default-post {
	padding: var(--spacing-md) 0;
}

/* --------------------------------------------------------------------------
   Reveal animation
   -------------------------------------------------------------------------- */

.fade-up {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.fade-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.whatsapp-float {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.rentals-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.addons-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.rentals-split {
		grid-template-columns: 1fr;
	}
	.hero-content-wrapper {
		grid-template-columns: 1fr 1fr;
	}
	.hero-center-text {
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: var(--spacing-md);
	}
	.hero-side-col {
		flex-direction: row;
		justify-content: center;
	}
	.hero-content-wrapper .glass-card {
		width: min(240px, 46%);
	}
}

@media (max-width: 900px) {
	.tours-grid,
	.tours-grid-3,
	.tours-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.reviews-grid {
		grid-template-columns: 1fr 1fr;
	}
	.solo-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}
	.tour-single-grid {
		grid-template-columns: 1fr;
	}
	.tour-single-box {
		position: static;
	}
	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 760px) {
	.top-bar {
		position: fixed;
		z-index: 1200;
		height: 40px;
	}
	.top-contact a {
		font-size: 0.78rem;
	}
	.d-none-mobile {
		display: none !important;
	}
	/* Plain fixed bar below the top bar (matches the original mobile header).
	   Resetting the desktop pill transform is essential: a transformed navbar
	   becomes the containing block for the fixed nav-menu and its off-canvas
	   slide would widen the page (horizontal scrollbar). */
	.navbar {
		position: fixed;
		top: 40px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		transform: none;
		background: #2d3748;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		padding: 0.7rem 1.1rem;
		z-index: 1100;
	}
	.nav-toggle {
		display: flex;
	}
	.nav-menu {
		position: fixed;
		inset: 0;
		z-index: 2000;
		width: 100vw;
		height: 100dvh;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 110px var(--spacing-md) var(--spacing-md);
		background: linear-gradient(135deg, rgba(15, 15, 20, 0.98), rgba(30, 25, 35, 0.98));
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		transform: translateX(100%);
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.nav-menu.active {
		transform: translateX(0);
	}
	.nav-menu::before {
		content: "WILD EAST OMAN";
		position: absolute;
		top: 55px;
		left: 2rem;
		color: var(--color-accent);
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: 1.1rem;
		letter-spacing: 0.1em;
	}
	.nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 24px;
		right: 24px;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		border: 0;
		background: var(--color-white);
		color: #2d2d34;
		cursor: pointer;
		transition: transform var(--transition-fast);
	}
	.nav-close:hover {
		transform: rotate(90deg);
	}
	.nav-close svg {
		width: 26px;
		height: 26px;
	}
	.nav-links {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
		width: 100%;
	}
	.nav-links > li {
		width: 100%;
	}
	.dropdown-menu {
		position: static;
		opacity: 1;
		visibility: hidden;
		transform: none;
		display: none;
		background: transparent;
		border: 0;
		border-left: 3px solid var(--color-accent);
		border-radius: 0;
		box-shadow: none;
		padding: 0.3rem 0 0.3rem 0.8rem;
		min-width: 0;
		margin-top: 0.4rem;
	}
	.nav-has-dropdown.dropdown-open .dropdown-menu {
		display: block;
		visibility: visible;
	}
	.nav-has-dropdown.dropdown-open {
		border-left: 3px solid var(--color-accent);
		padding-left: 0.6rem;
	}
	.nav-socials {
		margin-top: var(--spacing-sm);
	}
	.tour-single-hero {
		height: 58vh;
		min-height: 440px;
		background-position: center 30%;
	}
	.tour-single-back {
		top: 120px;
		left: 4vw;
		font-size: 0.8rem;
		padding: 0.45rem 1rem;
	}
	.tour-single-hero-content {
		margin-bottom: var(--spacing-sm);
	}
	.tour-meta-hero li {
		font-size: 0.75rem;
		padding: 0.3rem 0.8rem;
	}
	.hero {
		height: auto;
		min-height: 100vh;
		align-items: flex-start;
		padding-bottom: 170px;
	}
	.hero-content-wrapper {
		grid-template-columns: 1fr;
		padding-top: 60px;
		padding-bottom: 130px;
	}
	.hero-center-text {
		grid-row: auto;
		order: -1;
		margin-bottom: var(--spacing-sm);
	}
	/* Original mobile hero: the 4 glass cards form a 2 x 2 grid. */
	.hero-side-col {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.6rem;
		width: 100%;
	}
	.hero-content-wrapper .glass-card {
		width: calc(50% - 0.35rem);
		min-width: 0;
		padding: 0.8rem 0.7rem;
	}
	.hero-content-wrapper .glass-card h3 {
		font-size: 0.92rem;
	}
	.hero-content-wrapper .glass-card p {
		font-size: 0.72rem;
	}
	.hero-content-wrapper .card-icon svg {
		width: 22px;
		height: 22px;
	}
	.hero-search-wrapper {
		bottom: 24px;
	}
	.glass-search-bar {
		border-radius: 24px;
		flex-wrap: wrap;
	}
	.search-field {
		width: 100%;
		order: 2;
	}
	.glass-search-bar .search-icon {
		order: 1;
	}
	.btn-search {
		order: 3;
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 620px) {
	.tours-grid,
	.tours-grid-3,
	.tours-grid-2 {
		grid-template-columns: 1fr;
	}
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.rentals-grid,
	.addons-grid,
	.reviews-grid,
	.solo-cards,
	.booking-grid {
		grid-template-columns: 1fr;
	}
	.booking-field-wide {
		grid-column: 1 / -1;
	}
	.footer-inner {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}
}

/* --------------------------------------------------------------------------
   React parity overrides — values copied from the React app (index.css)
   so the WordPress render matches the React site 1:1.
   -------------------------------------------------------------------------- */

.container {
	max-width: 1280px;
	width: auto;
	padding: 0 1rem;
}

/* Section rhythm */
.section,
.tours-section,
.gallery-section,
.rentals-section {
	padding: 8rem 0;
}

.rentals-addons,
.solo-section {
	padding: 4rem 0;
}

.section-header {
	text-align: center;
	margin-bottom: 4rem;
}

.title-sm,
.section-subtitle {
	display: block;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
}

.title-lg,
.section-header h2 {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--color-black);
	margin: 0;
	line-height: 1.2;
}

.section-desc {
	color: #666;
	max-width: 600px;
	margin: 1rem auto 0;
}

/* Buttons (React .btn) */
.btn {
	padding: 1rem 2rem;
	border-radius: 50px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.2;
	border: none;
}

/* Tours grid (React .grid grid-cols-N) */
.grid {
	display: grid;
	gap: 2rem;
}

.grid-cols-2,
.grid-cols-3,
.tours-grid,
.tours-grid-3,
.tours-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

.grid-cols-1,
.tours-grid-1 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
	max-width: none;
}

.tours-grid-1 .tour-card {
	max-width: 450px;
	width: 100%;
}

/* Tour card (React markup: .tour-image + .tour-details) */
.tour-card {
	background: var(--color-white);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	transition: var(--transition-medium);
	position: relative;
	cursor: pointer;
	display: block;
}

.tour-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

.tour-image {
	height: 250px;
	width: 100%;
	overflow: hidden;
	position: relative;
	cursor: zoom-in;
	background: var(--color-bg-warm);
}

.tour-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.tour-card:hover .tour-image img {
	transform: scale(1.05);
}

.tour-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 3rem;
	opacity: 0.4;
}

.tour-details {
	padding: 1.5rem;
}

.tour-meta {
	display: flex;
	gap: 1rem;
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin-bottom: 0.8rem;
}

.tour-meta span {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.tour-meta svg {
	flex-shrink: 0;
}

.tour-schedule {
	font-size: 0.85rem;
	color: #555;
	margin-bottom: 0.8rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tour-schedule svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.tour-title {
	font-size: 1.4rem;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.tour-desc {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

/* Pricing option radios (React) */
.pricing-options-container {
	background: #f8f9fa;
	padding: 0.5rem;
	border-radius: 8px;
	border: 1px solid #eee;
	margin-bottom: 1rem;
}

.pricing-option-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s;
	margin-bottom: 2px;
}

.pricing-option-label:hover {
	background-color: #e2e8f0;
}

.pricing-option-label input[type="radio"],
.pricing-option-label input[type="checkbox"] {
	margin-right: 0.8rem;
	accent-color: var(--color-primary);
	transform: scale(1.2);
	flex-shrink: 0;
}

.pricing-option-label.selected {
	background-color: rgba(192, 86, 33, 0.1);
	border: 1px solid rgba(192, 86, 33, 0.2);
}

.option-text {
	font-size: 0.85rem;
	color: #333;
	flex: 1;
}

.option-price {
	font-weight: 700;
	color: var(--color-primary);
	font-size: 0.9rem;
}

.option-price-unit {
	font-size: 0.8rem;
	font-weight: 400;
}

/* Fixed price box (React inline style) */
.tour-fixed-price {
	background: #f8f9fa;
	padding: 0.8rem;
	border-radius: 8px;
	font-size: 0.85rem;
	border: 1px solid #eee;
	margin-bottom: 1rem;
}

.tour-fixed-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tour-fixed-price-value {
	font-weight: 700;
	color: var(--color-primary);
	font-size: 1.1rem;
}

.tour-fixed-price-note {
	font-size: 0.75rem;
	color: #888;
	margin: 4px 0 0;
}

/* Card book button (React: full width, margin-top 1.5rem) */
.tour-details .btn-tour-book {
	margin-top: 1.5rem;
	width: 100%;
}

/* Zoom indicator (React) */
.zoom-indicator {
	position: absolute;
	top: 15px;
	right: 15px;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease;
	transform: scale(0.8);
	pointer-events: none;
	z-index: 1;
}

.tour-image:hover .zoom-indicator,
.rental-image-wrap:hover .zoom-indicator,
.vh-item:hover .zoom-indicator {
	opacity: 1;
	transform: scale(1);
}

/* Rentals (React markup) */
.rentals-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-bottom: 3rem;
	align-items: start;
}

.rental-images {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rental-image-wrap {
	position: relative;
	height: 300px;
	border-radius: 12px;
	overflow: hidden;
	cursor: zoom-in;
}

.rental-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rental-info .rental-options-title {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.rental-info .rental-options-list {
	margin-bottom: 2rem;
}

.rental-addons {
	margin-bottom: 2rem;
}

.addons-heading {
	margin-bottom: 0.8rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.addons-heading svg {
	color: var(--color-primary);
}

.rental-note {
	font-size: 0.8rem;
	color: #888;
	margin-top: 0.2rem;
}

.rental-info .btn-block {
	margin-top: 2rem;
	width: 100%;
}

/* Visual highlights gallery (React markup) */
.visual-highlights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.vh-item {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	cursor: zoom-in;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	margin: 0;
}

.vh-item:hover {
	transform: scale(1.03);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.vh-item img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.vh-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.75rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Hero / header parity (React values) */
.top-bar {
	height: auto;
	padding: 0.5rem 0;
}

.navbar {
	top: 60px;
	padding: 0.8rem 2rem;
}

.logo-text,
.navbar .logo span {
	font-family: var(--font-heading);
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--color-white);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-subtitle {
	font-size: 1rem;
	font-weight: 700;
}

.hero-title {
	font-size: 4.5rem;
	line-height: 1;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.hero-content-wrapper .glass-card {
	padding: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.hero-content-wrapper .card-icon {
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
}

.hero-content-wrapper .card-icon svg {
	width: 24px;
	height: 24px;
	color: var(--color-white);
}

.hero-content-wrapper .card-title,
.glass-card h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
	color: var(--color-white);
}

.hero-content-wrapper .card-sub,
.glass-card p {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.4;
}

.hero-content-wrapper {
	padding: 0 2rem 4rem;
	max-width: 1400px;
	width: 100%;
}

/* Mobile hero parity (React behaviour) */
@media (max-width: 1024px) {
	.hero-content-wrapper {
		display: flex;
		flex-direction: column;
		padding: 2rem 2rem 4rem;
		margin-top: 2rem;
		gap: 2rem;
	}
	.hero-center-text {
		order: -1;
	}
	.hero-side-col {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		width: 100%;
		gap: 1rem;
	}
	.hero-content-wrapper .glass-card {
		width: 100%;
		max-width: 160px;
		padding: 1rem;
	}
	.hero-title {
		font-size: 3rem;
	}
}

@media (max-width: 768px) {
	.hero-side-col {
		display: none !important;
	}
	.hero-title {
		font-size: 2.5rem;
	}
	.hero {
		height: 100vh;
		min-height: 700px;
		padding-bottom: 0;
	}
	.hero-content-wrapper {
		padding: 0 2rem 4rem;
	}
	.hero-search-wrapper {
		bottom: 20px;
		width: 95%;
	}
	.glass-search-bar {
		flex-direction: column;
		align-items: stretch;
		border-radius: 20px;
		padding: 1rem;
		gap: 1rem;
	}
	.btn-search {
		width: 100%;
		justify-content: center;
	}
	.search-field {
		width: 100%;
		order: 2;
	}
	.glass-search-bar .search-icon {
		order: 1;
	}
}

/* Navbar / menu parity (React values) */
.navbar {
	padding: 0.8rem 2rem;
}

.logo {
	gap: 10px;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-icon {
	width: 32px;
	height: 32px;
}

.nav-menu,
.nav-links {
	gap: 2rem;
}

.nav-links {
	list-style: none;
}

.nav-item {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

.nav-link,
.nav-links > li > a {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: capitalize;
	color: var(--color-white);
	display: flex;
	align-items: center;
	gap: 4px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-links > li > a:hover {
	color: var(--color-accent);
}

.nav-chevron {
	width: 16px;
	height: 16px;
}

/* Dropdown (React style: left-aligned, full-width rows with separators) */
.dropdown-menu {
	top: 100%;
	left: 0;
	transform: translateY(15px);
	min-width: 260px;
	padding: 0.8rem 0;
	background: rgba(15, 15, 15, 0.95);
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.nav-has-dropdown:hover .dropdown-menu,
.nav-has-dropdown:focus-within .dropdown-menu,
.nav-has-dropdown.dropdown-open .dropdown-menu {
	transform: translateY(0);
	pointer-events: auto;
}

.dropdown-menu a {
	display: block;
	padding: 0.9rem 1.5rem;
	border-radius: 0;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 500;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.2s ease;
}

.dropdown-menu li:last-child a,
.dropdown-menu a:last-child {
	border-bottom: none;
}

.dropdown-menu a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-accent);
	padding-left: 1.8rem;
}

/* Keep the mobile off-canvas dropdown working after the nav parity block */
@media (max-width: 760px) {
	.dropdown-menu {
		position: static;
		transform: none;
		min-width: 0;
		padding: 0.3rem 0 0.3rem 0.8rem;
		background: transparent;
		border: 0;
		border-left: 3px solid var(--color-accent);
		border-radius: 0;
		box-shadow: none;
		pointer-events: auto;
	}
	.nav-has-dropdown:hover .dropdown-menu {
		transform: none;
	}
	.dropdown-menu a,
	.dropdown-menu a:hover {
		padding: 0.6rem 0.8rem;
		border-bottom: 0;
		background: transparent;
	}
}

/* Live-site mobile hero layout: content vertically centered,
   search strip pinned to the bottom of the 100vh hero. */
@media (max-width: 768px) {
	.hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		min-height: 700px;
		padding: 100px 0 120px;
	}
	.hero-content-wrapper {
		padding: 0 1.5rem;
		margin-top: 0;
	}
	.hero-center-text {
		order: -1;
	}
	.hero-search-wrapper {
		bottom: 24px;
		width: 92%;
	}
}

/* React mobile details: hero title offset + off-canvas menu item style */
@media (max-width: 768px) {
	.hero-title {
		margin-top: 5rem;
		padding-top: 2rem;
	}
}

@media (max-width: 760px) {
	.nav-links > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.nav-links > li:last-child {
		border-bottom: none;
	}
	.nav-link,
	.nav-links > li > a {
		font-size: 1.1rem;
		font-weight: 500;
		letter-spacing: 0.5px;
		padding: 1.2rem 0;
		justify-content: space-between;
		width: 100%;
	}
	.nav-link:hover,
	.nav-links > li > a:hover {
		padding-left: 10px;
	}
}

/* Mobile header parity (React values: 40px top bar, navbar at 40px, small logo) */
@media (max-width: 760px) {
	.top-bar {
		height: 40px;
		padding: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	}
	.top-bar-inner {
		width: 100%;
		padding: 0 0.8rem;
	}
	.top-contact {
		font-size: 0.78rem;
		font-weight: 500;
	}
	.navbar {
		top: 40px;
		transform: none;
		padding: 0.8rem 1rem;
		width: 100%;
		max-width: none;
	}
	.logo {
		white-space: nowrap;
	}
	.logo-text,
	.navbar .logo span {
		font-size: 1.1rem;
	}
	.logo-icon {
		width: 24px;
		height: 24px;
	}
}

/* Mobile top bar: single line — phone | socials | Login / Sign Up */
@media (max-width: 760px) {
	.top-contact,
	.top-socials {
		gap: 0.9rem;
	}
	.top-contact a,
	.top-socials a,
	.top-socials span,
	.top-login {
		white-space: nowrap;
	}
	.top-contact a,
	.top-login {
		font-size: 0.78rem;
	}
	.top-login {
		gap: 0.3rem;
	}
	.top-login .top-icon {
		width: 13px;
		height: 13px;
	}
	.top-divider {
		display: none;
	}
}

/* Header never changes on scroll: fixed top bar + fixed glass navbar */
.top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.navbar {
	position: fixed;
	top: 60px;
}

body.nav-scrolled .top-bar {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 760px) {
	.navbar {
		top: 40px;
	}
	.navbar.nav-scrolled {
		top: 40px;
	}
}

/* Booking modal parity (React design) */
.booking-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
}

.booking-label-highlight {
	color: var(--color-primary);
	font-weight: 700;
}

.tour-name-input {
	width: 100%;
	padding: 0.86rem;
	border-radius: 8px;
	border: 1px solid #ddd;
	font-family: inherit;
	font-size: 1rem;
	background: #faf7f2;
	color: var(--color-text-main);
	font-weight: 600;
}

.booking-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.booking-actions .btn-primary {
	width: 100%;
	margin-top: 1rem;
}

.btn-whatsapp-outline {
	width: 100%;
	margin-top: 0;
	border: 2px solid var(--color-whatsapp);
	color: var(--color-whatsapp);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.btn-whatsapp-outline:hover {
	background: var(--color-whatsapp);
	color: #fff;
}

/* Booking modal exact values (live site) */
.booking-card {
	max-width: 600px;
	border-radius: 16px;
	padding: 2.5rem;
}

.booking-card h2,
.booking-modal h2 {
	font-family: var(--font-heading);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
}

.booking-card .booking-subtitle {
	margin-bottom: 2rem;
}

.booking-card .booking-close {
	color: var(--color-text-muted);
	background: transparent;
}

.booking-label-highlight {
	color: #000 !important;
	font-weight: 600 !important;
}

.tour-name-input {
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	font-weight: 700;
	border: none !important;
	font-size: 1.1rem !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	padding: 0.8rem 1rem;
}

/* Modal fits like the live site on small screens: 24px padding keeps the
   title and tour name on one line */
@media (max-width: 600px) {
	.booking-card {
		padding: 1.5rem;
	}
}

/* =============================================
   AUTH (LOGIN) MODAL — React parity
   ============================================= */
.auth-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.auth-modal[hidden] { display: none; }
.auth-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
}
.auth-card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 400px;
	width: 100%;
	padding: 2.5rem 2rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	animation: authCardIn 0.25s ease;
}
@keyframes authCardIn {
	from { opacity: 0; transform: translateY(20px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	cursor: pointer;
	color: #666;
	padding: 0.25rem;
	line-height: 0;
	transition: color 0.2s ease;
}
.auth-close:hover { color: #000; }
.auth-close svg { width: 24px; height: 24px; }

.auth-header { text-align: center; margin-bottom: 1.5rem; }
.auth-header h2 {
	font-family: 'Outfit', sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: #111;
	margin: 0;
}
.auth-header p {
	font-size: 0.9rem;
	color: #666;
	margin-top: 0.5rem;
}

#auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-group label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #111;
	margin-bottom: 0.25rem;
	display: block;
}
.auth-label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.25rem;
}
.auth-label-row label { margin-bottom: 0; }
.auth-forgot {
	font-size: 0.75rem;
	font-family: inherit;
	color: var(--color-primary);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
}
.auth-forgot:hover { text-decoration: underline; }
.auth-input-wrap { position: relative; }
.auth-input-wrap svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: #a0aec0;
	pointer-events: none;
}
.auth-input-wrap input {
	width: 100%;
	padding: 0.75rem 0.9rem;
	padding-left: 38px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: 'Inter', sans-serif;
	color: #111;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-input-wrap input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(196, 88, 28, 0.12);
}
.auth-submit {
	width: 100%;
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.auth-error {
	color: #dc2626;
	font-size: 0.8rem;
	text-align: center;
	margin: 0;
}
.auth-success {
	color: #15803d;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	font-size: 0.8rem;
	text-align: center;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	margin: 0;
}

.auth-divider {
	margin: 1.5rem 0;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.auth-divider > span:first-child,
.auth-divider > span:last-child {
	flex: 1;
	height: 1px;
	background: #e2e8f0;
}
.auth-divider-text {
	font-size: 0.75rem;
	color: #a0aec0;
	font-weight: 600;
	white-space: nowrap;
}

.auth-social {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	align-items: center;
}
.auth-google {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	color: #3c4043;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
.auth-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25); }
.auth-apple {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	padding: 0.6rem;
}

.auth-footer {
	text-align: center;
	margin-top: 1.5rem;
	font-size: 0.9rem;
	color: #666;
}
.auth-footer a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.auth-card { padding: 1.5rem 1.25rem; }
}

/* Apple outline button: restore outline over the late borderless .btn rule */
.auth-apple {
	background: #fff;
	color: #111;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	text-transform: none;
	letter-spacing: 0;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.auth-apple:hover {
	background: #f8f9fa;
	border-color: #cbd5e0;
	color: #111;
	transform: none;
}
/* Sign In button keeps normal case inside the auth modal */
.auth-submit {
	text-transform: none;
	letter-spacing: 0.3px;
}

/* Sign-up pane (React "Create Account") */
.auth-name-row { display: flex; gap: 1rem; }
.auth-name-row .auth-group { flex: 1; }
.auth-group > input[type="text"],
.auth-group > input[type="email"],
.auth-group > input[type="password"] {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: 'Inter', sans-serif;
	color: #111;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-group > input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(192, 86, 33, 0.12);
}
.auth-link {
	color: var(--color-primary);
	font-weight: 600;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
}
.auth-link:hover { text-decoration: underline; }
@media (max-width: 480px) {
	.auth-name-row { flex-direction: column; gap: 1rem; }
}

/* My Account modal (logged-in users) */
.account-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}
.account-password-toggle { text-align: right; margin-top: -0.25rem; }
.account-pw-fields .auth-group + .auth-group { margin-top: 1rem; }
.account-success {
	color: #16a34a;
	font-size: 0.8rem;
	text-align: center;
	margin: 0;
}
.account-bookings { margin-top: 1.75rem; }
.account-bookings h3 {
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e2e8f0;
}
.account-booking-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid #f1f5f9;
}
.account-booking-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #111;
}
.account-booking-meta {
	font-size: 0.8rem;
	color: #666;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.account-booking-status {
	background: #fef3ec;
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.7rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	text-transform: capitalize;
}
.account-footer { margin-top: 1.5rem; }
.account-logout { width: 100%; }

/* Month dropdown: white text when an item is selected (React parity) */
.adventure-dropdown {
	font-weight: 700;
	font-size: 1.1rem;
	color: #fff;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%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%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.2rem;
	padding-right: 2.5rem;
}
.adventure-dropdown option {
	background: #2d3748;
	color: #fff;
	padding: 10px;
}

/* Hide Google/Apple buttons and the OR CONTINUE WITH divider (no OAuth configured) */
.auth-divider,
.auth-social {
	display: none !important;
}