/**
 * Rental Cars NZ Theme Styles
 *
 * @package Rental_Cars_NZ
 * @author liquidweb.co.nz
 * @since 1.0.0
 *
 * Modern, high-performance CSS with dark theme aesthetic.
 * Optimized for Core Web Vitals and responsive design.
 */

/* =========================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================= */

:root {
	/* Color Palette - Based on design screenshots */
	--color-bg-main: #121212;
	--color-bg-alt: #1A1A1A;
	--color-bg-card: #1A1A1A;
	--color-primary: #27B3BF;
	--color-primary-hover: #00ADB5;
	--color-primary-dark: #008C9E;
	--color-text-main: #FFFFFF;
	--color-text-muted: #B0B0B0;
	--color-text-secondary: #B5BDC9;
	--color-border: #303030;
	--color-border-light: rgba(255, 255, 255, 0.05);
	
	/* Spacing Scale */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-xl: 6rem;
	
	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 25px;
	--radius-full: 9999px;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
	
	/* Typography */
	--font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	
	/* Layout */
	--container-width: 1200px;
	--container-max-width: 1200px;
	--header-height: 120px;
	
	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
}

/* =========================================================
   RESET & BASE STYLES
   ========================================================= */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-main);
	background-color: var(--color-bg-main);
	color: var(--color-text-main);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	padding-top: var(--header-height);
}

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

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

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

ul {
	list-style: none;
}

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

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	color: var(--color-text-main);
	margin-bottom: var(--spacing-sm);
}

h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -0.01em;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

/* Override for sidebar titles to ensure proper alignment */
.page-sidebar__popular-title,
.page-sidebar__popular-title h4 {
	margin: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	line-height: 1.4;
}

p {
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-sm);
}

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */

.container {
	width: 90%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--spacing-sm);
	box-sizing: border-box;
}

@media (min-width: 900px) {
	.container {
		width: 100%;
		max-width: var(--container-width);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
		box-sizing: border-box;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-weight: var(--font-weight-semibold);
	border-radius: var(--radius-full);
	transition: all var(--transition-fast);
	font-size: 1rem;
	cursor: pointer;
	border: none;
}

.btn--primary {
	background-color: var(--color-primary);
	color: #FFFFFF;
	font-weight: var(--font-weight-semibold);
}

.btn--primary:hover,
.btn--primary:focus {
	background-color: var(--color-primary-hover);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.btn--secondary {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--color-text-main);
	backdrop-filter: blur(4px);
}

.btn--secondary:hover,
.btn--secondary:focus {
	background-color: rgba(255, 255, 255, 0.2);
}

.btn--black {
	background-color: var(--color-bg-main);
	color: var(--color-text-main);
}

.btn--black:hover,
.btn--black:focus {
	background-color: #000;
}

/* =========================================================
   HEADER
   ========================================================= */

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	width: 100%;
}

/* Top utility bar */
.header-top {
	background-color: var(--color-primary);
	color: var(--color-text-main);
	padding: var(--spacing-xs) 0;
}

.header-top__container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.75rem;
	font-size: 0.85rem;
}

.header-top__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-text-main);
	transition: opacity var(--transition-fast);
}

.header-top__item:hover,
.header-top__item:focus {
	opacity: 0.8;
}

.header-top__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Main nav bar */
.header-main {
	background-color: rgba(18, 18, 18, 0.95);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-border-light);
	padding: 0.9rem 0;
	position: relative;
	z-index: 1001;
}

.header__container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
}

/* Logo */
.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: var(--font-weight-bold);
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	color: var(--color-text-main);
}

.logo__img {
	height: 48px;
	width: auto;
	object-fit: contain;
}

.logo__icon {
	width: 42px;
	height: 42px;
	fill: currentColor;
}

.logo__text {
	display: block;
}

/* Main navigation */
.header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.nav__list {
	display: flex;
	gap: 2.2rem;
	flex-wrap: nowrap;
	align-items: center;
	position: relative;
}

.nav__list > li {
	position: relative;
}

.nav__list > li.menu-item-has-children {
	position: relative;
}

.nav__list > li > a,
.nav__link {
	white-space: nowrap;
	font-size: 0.95rem;
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.nav__list > li > a:hover,
.nav__list > li > a:focus,
.nav__link:hover,
.nav__link:focus {
	color: var(--color-text-main);
}

/* Dropdown indicator */
.nav__list > li.menu-item-has-children > a::after {
	content: "⌄";
	font-size: 0.8rem;
	display: inline-block;
	transition: transform var(--transition-fast);
}

.nav__list > li.menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
}

/* Desktop dropdown submenu */
.nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	background-color: var(--color-bg-main);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	min-width: 200px;
	padding: var(--spacing-sm) 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease 0.3s, visibility 0.3s ease 0.3s, transform 0.3s ease 0.3s;
	z-index: 1002;
	display: block;
	list-style: none;
	pointer-events: none;
}

/* Show dropdown on hover - parent li */
.nav__list > li.menu-item-has-children:hover > .sub-menu,
.nav__list > li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

/* Keep dropdown visible when hovering over submenu */
.nav__list > li.menu-item-has-children .sub-menu:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

/* Keep parent hovered when submenu is hovered */
.nav__list > li.menu-item-has-children:has(.sub-menu:hover) > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

/* Keep parent hovered when submenu is hovered */
.nav__list > li.menu-item-has-children .sub-menu:hover ~ a,
.nav__list > li.menu-item-has-children:has(.sub-menu:hover) {
	/* Keep parent link highlighted */
}

/* Add invisible bridge to prevent dropdown from closing when moving mouse */
.nav__list > li.menu-item-has-children::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.5rem;
	background: transparent;
	z-index: 1001;
	pointer-events: auto;
}

.nav__list .sub-menu li {
	position: relative;
	margin: 0;
	padding: 0;
}

.nav__list .sub-menu a {
	display: block;
	padding: 0.75rem var(--spacing-md);
	color: var(--color-text-main);
	font-size: 0.9rem;
	font-weight: var(--font-weight-normal);
	white-space: nowrap;
	transition: background-color var(--transition-fast), color var(--transition-fast);
	text-decoration: none;
	width: 100%;
}

.nav__list .sub-menu a:hover,
.nav__list .sub-menu a:focus {
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--color-primary);
}

/* Multi-column dropdown support (for nested submenus if needed) */
.nav__list .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-top: 0;
	margin-left: var(--spacing-xs);
}

/* Mobile menu toggle */
.header__actions {
	display: flex;
	align-items: center;
}

.header__toggle {
	display: none;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
	width: 32px;
	height: 32px;
	position: relative;
	flex-shrink: 0;
}

.header__toggle-icon {
	display: block;
	width: 24px;
	height: 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--color-text-main);
	transition: all var(--transition-base);
}

.header__toggle-icon::before,
.header__toggle-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-text-main);
	transition: all var(--transition-base);
}

.header__toggle-icon::before {
	top: -8px;
}

.header__toggle-icon::after {
	top: 8px;
}

.header__toggle:hover .header__toggle-icon,
.header__toggle:hover .header__toggle-icon::before,
.header__toggle:hover .header__toggle-icon::after {
	background-color: var(--color-primary);
}

/* Mobile Nav overlay */
.mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--color-bg-main);
	z-index: 999;
	padding: 5rem var(--spacing-md) var(--spacing-md);
	transform: translateX(100%);
	transition: transform var(--transition-base);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

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

.mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	font-size: 1.3rem;
	text-align: center;
}

.mobile-nav__list > li > a {
	display: block;
	padding: 0.75rem 0;
	color: var(--color-text-main);
	transition: color var(--transition-fast);
}

.mobile-nav__list > li > a:hover,
.mobile-nav__list > li > a:focus {
	color: var(--color-primary);
}

.mobile-nav__label {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	margin-bottom: -1rem;
}

.mobile-nav__divider {
	height: 1px;
	background-color: var(--color-border);
	margin: var(--spacing-sm) 0;
}

/* Mobile submenu */
.mobile-nav__list .sub-menu {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-base);
	margin-top: 0;
	padding-left: 1.5rem;
	text-align: left;
}

.mobile-nav__list .menu-item-has-children.active > .sub-menu {
	max-height: 500px;
}

.mobile-nav__list .sub-menu li {
	padding: 0.5rem 0;
}

.mobile-nav__list .sub-menu a {
	font-size: 1.1rem;
	color: var(--color-text-muted);
}

.mobile-nav__list .sub-menu a:hover,
.mobile-nav__list .sub-menu a:focus {
	color: var(--color-primary);
}

.mobile-nav__list .menu-item-has-children > a {
	position: relative;
	padding-right: 2rem;
}

.mobile-nav__list .menu-item-has-children > a::after {
	content: "⌄";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
	transition: transform var(--transition-base);
	color: var(--color-text-muted);
}

.mobile-nav__list .menu-item-has-children.active > a::after {
	transform: translateY(-50%) rotate(180deg);
	color: var(--color-primary);
}

/* =========================================================
   HERO SECTION
   ========================================================= */

.hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xl) 0;
	overflow: hidden;
}

.hero--inner {
	min-height: 70vh;
	padding-top: calc(var(--header-height) + var(--spacing-lg));
}

/* Compact hero for booking & checkout – minimal, content-first */
.hero--compact {
	min-height: 0;
	padding: var(--spacing-sm) 0 var(--spacing-md);
	padding-top: calc(var(--header-height) + var(--spacing-sm));
}
.hero--compact .hero__content {
	margin-bottom: var(--spacing-sm);
}
.hero--compact .hero__title {
	font-size: 1.5rem;
	margin-bottom: 0.25rem;
}
.hero--compact .hero__subtitle {
	font-size: 0.95rem;
	opacity: 0.9;
}
@media (max-width: 768px) {
	.hero--compact {
		padding: 0.5rem 0 var(--spacing-sm);
		padding-top: calc(var(--header-height) + 0.5rem);
	}
	.hero--compact .hero__title {
		font-size: 1.25rem;
	}
	.hero--compact .hero__subtitle {
		font-size: 0.875rem;
	}
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

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

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(18, 18, 18, 0.4) 0%, rgba(18, 18, 18, 0.8) 100%);
	z-index: -1;
}

.hero .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	z-index: 1;
}

.hero__content {
	text-align: center;
	max-width: 800px;
	width: 100%;
	margin: 0 auto var(--spacing-lg);
	z-index: 1;
}

.hero__title {
	margin-bottom: var(--spacing-sm);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero__subtitle {
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.9);
}

/* Booking Widget */
.booking-widget__error {
	background: rgba(200, 50, 50, 0.2);
	color: #fff;
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-sm);
	font-size: 0.9rem;
}

.booking-widget .required {
	color: #ffcccc;
}

.booking-widget {
	background-color: var(--color-text-main);
	padding: 1.5rem;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	align-items: flex-end;
	color: var(--color-bg-main);
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	min-width: 140px;
}

.form-group label {
	font-size: 0.8rem;
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
}

.form-control {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: var(--radius-sm);
	font-size: 0.95rem;
	width: 100%;
	background-color: #fff;
	color: #333;
	font-family: inherit;
}

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

/* =========================================================
   TRUST STRIP
   ========================================================= */

.trust-strip {
	background-color: var(--color-bg-alt);
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid var(--color-border);
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: var(--spacing-md);
	align-items: center;
	text-align: center;
}

.trust-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--color-text-muted);
	font-weight: 500;
}

.trust-item i {
	font-style: normal;
	font-size: 1.1rem;
	color: var(--color-primary);
}

.trust-item:nth-child(1) i::before { content: "★"; }
.trust-item:nth-child(2) i::before { content: "G"; }
.trust-item:nth-child(3) i::before { content: "★"; }
.trust-item:nth-child(4) i::before { content: "◆"; }
.trust-item:nth-child(5) i::before { content: "♣"; }

.trust-item--trustpilot a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.trust-item--trustpilot a:hover {
	color: var(--color-primary);
}

/* =========================================================
   SUBSCRIBE SECTION
   ========================================================= */

.subscribe {
	background-color: var(--color-primary);
	padding: var(--spacing-lg) 0;
	color: var(--color-text-main);
	text-align: center;
}

.subscribe__content h2 {
	margin-bottom: var(--spacing-sm);
	color: var(--color-text-main);
}

.subscribe__content p {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--spacing-md);
}

.subscribe__form {
	display: flex;
	justify-content: center;
	gap: var(--spacing-sm);
	max-width: 500px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.subscribe__input {
	flex: 1;
	min-width: 250px;
	padding: 12px 20px;
	border-radius: var(--radius-full);
	border: none;
	font-size: 1rem;
	font-family: inherit;
}

.subscribe__input:focus {
	outline: 2px solid var(--color-bg-main);
	outline-offset: 2px;
}

.subscribe__btn {
	background-color: var(--color-bg-main);
	color: var(--color-text-main);
	padding: 12px 32px;
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.subscribe__btn:hover,
.subscribe__btn:focus {
	background-color: #000;
	transform: translateY(-1px);
}

.subscribe__message {
	margin-top: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	font-size: 0.9rem;
	text-align: center;
}

.subscribe__message.success {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--color-text-main);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.subscribe__message.error {
	background-color: rgba(255, 0, 0, 0.2);
	color: var(--color-text-main);
	border: 1px solid rgba(255, 0, 0, 0.3);
}

/* =========================================================
   PAGE CONTENT SECTION
   ========================================================= */

.page-content-section {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
	position: relative;
	z-index: 1;
}

.page-content-section__inner {
	max-width: 800px;
	margin: 0 auto;
	color: var(--color-text-muted);
	line-height: 1.8;
}

.page-content-section__inner h2,
.page-content-section__inner h3,
.page-content-section__inner h4 {
	color: var(--color-text-main);
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.page-content-section__inner a {
	color: var(--color-primary);
	text-decoration: underline;
}

.page-content-section__inner a:hover,
.page-content-section__inner a:focus {
	color: var(--color-primary-hover);
}

/* =========================================================
   DEALS CAROUSEL SECTION
   ========================================================= */

.deals-carousel {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
	position: relative;
	z-index: 1;
}

.deals-carousel__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
}

.deals-carousel__title {
	margin: 0;
	font-size: 2rem;
}

.deals-carousel__view-all {
	color: var(--color-text-main);
	text-decoration: underline;
	font-size: 0.9rem;
	transition: color var(--transition-fast);
}

.deals-carousel__view-all:hover,
.deals-carousel__view-all:focus {
	color: var(--color-primary);
}

.deals-carousel__wrapper {
	position: relative;
	overflow: hidden;
	padding: 0 60px;
	margin-bottom: var(--spacing-md);
}

.deals-carousel__wrapper .deals-carousel__container {
	overflow-x: auto;
	overflow-y: visible;
}

.deals-carousel__container {
	display: flex;
	gap: var(--spacing-md);
	overflow-x: auto;
	overflow-y: visible;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 1rem;
	-webkit-overflow-scrolling: touch;
}

.deals-carousel__container::-webkit-scrollbar {
	display: none;
}

.deals-carousel__item {
	flex: 0 0 calc(33.333% - 1.33rem);
	min-width: 300px;
	max-width: 400px;
	background-color: var(--color-bg-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	overflow: hidden;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.deals-carousel__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.deals-carousel__image {
	width: 100%;
	height: 200px;
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

.deals-carousel__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.deals-carousel__item:hover .deals-carousel__image img {
	transform: scale(1.05);
}

.deals-carousel__image--placeholder {
	background-color: var(--color-bg-alt);
}

.deals-carousel__content {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.deals-carousel__badge {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-xs);
}

.deals-carousel__title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-semibold);
}

.deals-carousel__title a {
	color: var(--color-text-main);
	transition: color var(--transition-fast);
}

.deals-carousel__title a:hover,
.deals-carousel__title a:focus {
	color: var(--color-primary);
}

.deals-carousel__excerpt {
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-sm);
	font-size: 0.95rem;
	line-height: 1.6;
	flex: 1;
}

.deals-carousel__link {
	color: var(--color-text-main);
	text-decoration: underline;
	font-size: 0.9rem;
	transition: color var(--transition-fast);
	display: inline-block;
	margin-top: auto;
}

.deals-carousel__link:hover,
.deals-carousel__link:focus {
	color: var(--color-primary);
}

.deals-carousel__prev,
.deals-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(18, 18, 18, 0.8);
	border: 1px solid var(--color-border);
	color: var(--color-text-main);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
	z-index: 10;
	border: none;
}

.deals-carousel__prev {
	left: 0;
}

.deals-carousel__next {
	right: 0;
}

.deals-carousel__prev:hover,
.deals-carousel__next:hover,
.deals-carousel__prev:focus,
.deals-carousel__next:focus {
	background-color: var(--color-primary);
	transform: translateY(-50%) scale(1.1);
}

.deals-carousel__prev svg,
.deals-carousel__next svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

.deals-carousel__prev:disabled,
.deals-carousel__next:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.deals-carousel__cta {
	text-align: center;
	margin-top: var(--spacing-lg);
}

.testimonials__cta {
	text-align: center;
	margin-top: var(--spacing-lg);
}

.faq__cta {
	text-align: center;
	margin-top: var(--spacing-lg);
}

/* =========================================================
   TESTIMONIALS SECTION
   ========================================================= */

.testimonials {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.testimonials__title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.testimonial-card {
	background-color: var(--color-bg-card);
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.testimonial-card__quote {
	color: var(--color-text-main);
	margin-bottom: var(--spacing-sm);
	font-style: italic;
}

.testimonial-card__author {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.testimonials__link {
	display: inline-block;
	color: var(--color-text-main);
	text-decoration: underline;
	margin-top: var(--spacing-sm);
}

/* =========================================================
   FAQ / ACCORDION SECTION
   ========================================================= */

.faq {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.faq__title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

.accordion {
	max-width: 800px;
	margin: 0 auto;
}

.accordion-item {
	border-bottom: 1px solid var(--color-border);
}

.accordion-header {
	width: 100%;
	padding: var(--spacing-md) 0;
	text-align: left;
	color: var(--color-text-main);
	font-size: 1.1rem;
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-sm);
	transition: color var(--transition-fast);
}

.accordion-header:hover,
.accordion-header:focus {
	color: var(--color-primary);
}

.accordion-header::after {
	content: "⌄";
	font-size: 1.2rem;
	transition: transform var(--transition-base);
	flex-shrink: 0;
}

.accordion-item.active .accordion-header::after {
	transform: rotate(180deg);
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-base);
}

.accordion-content__inner {
	padding: 0 0 var(--spacing-md);
	color: var(--color-text-muted);
}

/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-section {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.about-section__grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--spacing-xl);
	align-items: center;
}

.about-section__image {
	width: 100%;
}

.about-section__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	object-fit: cover;
}

.about-section__placeholder {
	width: 100%;
	aspect-ratio: 3/4;
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	padding: var(--spacing-md);
	text-align: center;
}

.about-section__placeholder svg {
	width: 80px;
	height: 80px;
	margin-bottom: var(--spacing-sm);
	opacity: 0.5;
}

.about-section__placeholder p {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.about-section__content {
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 1.05rem;
}

.about-section__title {
	color: var(--color-text-main);
	margin-bottom: var(--spacing-md);
	font-size: 2rem;
}

.about-section__content h2,
.about-section__content h3,
.about-section__content h4 {
	color: var(--color-text-main);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
}

.about-section__content p {
	margin-bottom: var(--spacing-md);
}

.about-section__content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.about-section__content a:hover,
.about-section__content a:focus {
	color: var(--color-primary-hover);
}

.about-section__cta {
	margin-top: var(--spacing-md);
}

.about-section__cta .btn--primary {
	color: #FFFFFF;
	text-decoration: none;
}

.about-section__cta .btn--primary:hover,
.about-section__cta .btn--primary:focus {
	color: #FFFFFF;
}

@media (max-width: 768px) {
	.about-section__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.about-section__image {
		order: 1;
	}

	.about-section__content {
		order: 2;
	}
}

/* =========================================================
   TRIP IDEAS / ARTICLE CARDS
   ========================================================= */

.trip-ideas {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.trip-ideas__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
}

.trip-ideas__title {
	margin-bottom: 0;
}

.trip-ideas__link {
	color: var(--color-text-main);
	text-decoration: underline;
}

.trip-ideas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-md);
}

.article-card {
	background-color: var(--color-bg-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	overflow: hidden;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.article-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.article-card__image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	background-color: var(--color-bg-alt);
}

.article-card__content {
	padding: var(--spacing-md);
}

.article-card__category {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-xs);
}

.article-card__title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-xs);
}

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

.article-card__title a:hover,
.article-card__title a:focus {
	color: var(--color-primary);
}

.article-card__excerpt {
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-sm);
	font-size: 0.95rem;
}

.article-card__link {
	color: var(--color-text-main);
	text-decoration: underline;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color var(--transition-fast);
}

.article-card__link:hover {
	color: var(--color-primary);
}

.article-card__link svg {
	transition: transform var(--transition-fast);
}

.article-card__link:hover svg {
	transform: translateX(4px);
}

/* Enhanced Article Card Styles */
.article-card--enhanced {
	display: flex;
	flex-direction: column;
}

.article-card__image-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.article-card__image-wrapper a {
	display: block;
}

.article-card__image--placeholder {
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.article-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.article-card__meta > span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.article-card__meta svg {
	flex-shrink: 0;
}

.article-card__category a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 600;
	transition: color var(--transition-fast);
}

.article-card__category a:hover {
	color: var(--color-primary-hover);
}

.article-card__date,
.article-card__reading-time,
.article-card__views {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.article-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
	font-size: 0.875rem;
}

.article-card__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.article-card__author-link {
	color: var(--color-text-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	transition: color var(--transition-fast);
}

.article-card__author-link:hover {
	color: var(--color-primary);
}

.article-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.article-card__tag {
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.article-card__tag:hover {
	background-color: var(--color-primary);
	color: var(--color-text-main);
}

/* Trip Ideas Section */
.trip-ideas-section {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.trip-ideas-section:nth-child(even) {
	background-color: var(--color-bg-alt);
}

.trip-ideas-section__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
}

.trip-ideas-section__title {
	font-size: 2rem;
	margin-bottom: 0;
}

.trip-ideas-section__link {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-fast);
}

.trip-ideas-section__link:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.trip-ideas-section__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-md);
}

/* Horizontal scrollable container for trip ideas */
.trip-ideas-section__scrollable {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary) var(--color-bg-alt);
	padding-bottom: var(--spacing-sm);
}

.trip-ideas-section__scrollable::-webkit-scrollbar {
	height: 8px;
}

.trip-ideas-section__scrollable::-webkit-scrollbar-track {
	background: var(--color-bg-alt);
	border-radius: var(--radius-sm);
}

.trip-ideas-section__scrollable::-webkit-scrollbar-thumb {
	background: var(--color-primary);
	border-radius: var(--radius-sm);
}

.trip-ideas-section__scrollable::-webkit-scrollbar-thumb:hover {
	background: var(--color-primary-hover);
}

.trip-ideas-section__container {
	display: flex;
	gap: var(--spacing-md);
	min-width: min-content;
}

.trip-ideas-section__container .article-card {
	flex: 0 0 320px;
	min-width: 0;
	max-width: 100%;
}

/* Blog Filters */
.blog-filters {
	padding: var(--spacing-lg) 0;
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}

.blog-filters__wrapper {
	background-color: var(--color-bg-main);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
}

.blog-filters__title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.blog-filters__form {
	width: 100%;
}

.blog-filters__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--spacing-md);
	align-items: flex-end;
}

.blog-filters__group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.blog-filters__group--actions {
	flex-direction: row;
	gap: var(--spacing-sm);
	justify-content: flex-end;
}

.blog-filters__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-main);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.blog-filters__label svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.blog-filters__select {
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-bg-alt);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-main);
	font-size: 1rem;
	cursor: pointer;
	transition: all var(--transition-fast);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-sm) center;
	padding-right: calc(var(--spacing-md) * 2.5);
}

.blog-filters__select:hover {
	border-color: var(--color-primary);
	background-color: var(--color-bg-main);
}

.blog-filters__select:focus {
	border-color: var(--color-primary);
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	background-color: var(--color-bg-main);
}

.blog-filters__group--actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

/* Blog Posts */
.blog-posts {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.blog-posts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-md);
}

/* Load More pagination (Show more button) */
.load-more-pagination {
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-lg);
	display: flex;
	justify-content: center;
	align-items: center;
	clear: both;
}

.btn--load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-primary);
	color: #FFFFFF;
	border: none;
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-fast, 0.2s ease);
}

.btn--load-more:hover,
.btn--load-more:focus {
	background-color: var(--color-primary-hover);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(39, 179, 191, 0.3);
}

.btn--load-more svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.btn--load-more:hover svg,
.btn--load-more:focus svg {
	transform: translateY(2px);
}

.btn--load-more.is-loading {
	pointer-events: none;
	opacity: 0.8;
}

.blog-posts__load-more,
.page-search__load-more {
	margin-top: var(--spacing-lg);
}

.blog-posts__pagination {
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
	display: flex;
	justify-content: center;
	align-items: center;
}

.blog-posts__pagination-list {
	display: flex;
	gap: var(--spacing-xs);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.blog-posts__pagination-item {
	margin: 0;
	display: flex;
	align-items: center;
}

.blog-posts__pagination-item a,
.blog-posts__pagination-item span,
.blog-posts__pagination-item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	min-width: 44px;
	height: 44px;
	padding: 0 var(--spacing-sm);
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-main);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-fast);
	cursor: pointer;
	line-height: 1;
}

.blog-posts__pagination-item a:hover,
.blog-posts__pagination-item a:focus,
.blog-posts__pagination-item .page-numbers:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-main);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(39, 179, 191, 0.2);
}

.blog-posts__pagination-item a:hover svg,
.blog-posts__pagination-item a:focus svg,
.blog-posts__pagination-item .page-numbers:hover svg {
	transform: scale(1.1);
}

.blog-posts__pagination-item .current,
.blog-posts__pagination-item span.current,
.blog-posts__pagination-item .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-main);
	cursor: default;
	pointer-events: none;
}

.blog-posts__pagination-item .dots,
.blog-posts__pagination-item span.dots,
.blog-posts__pagination-item .page-numbers.dots {
	background-color: transparent;
	border: none;
	color: var(--color-text-muted);
	cursor: default;
	min-width: auto;
	padding: 0 var(--spacing-xs);
}

.blog-posts__pagination-item .dots:hover,
.blog-posts__pagination-item span.dots:hover,
.blog-posts__pagination-item .page-numbers.dots:hover {
	background-color: transparent;
	transform: none;
	box-shadow: none;
}

.blog-posts__pagination-item a svg,
.blog-posts__pagination-item span svg,
.blog-posts__pagination-item .page-numbers svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.blog-posts__pagination-item a span,
.blog-posts__pagination-item span span,
.blog-posts__pagination-item .page-numbers span {
	display: inline;
	min-width: auto;
	height: auto;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	transform: none;
}

/* Previous/Next button specific styling */
.blog-posts__pagination-item .prev,
.blog-posts__pagination-item .next,
.blog-posts__pagination-item .page-numbers.prev,
.blog-posts__pagination-item .page-numbers.next {
	padding: 0 var(--spacing-md);
	font-weight: var(--font-weight-semibold);
}

.blog-posts__pagination-item .prev:hover,
.blog-posts__pagination-item .next:hover,
.blog-posts__pagination-item .page-numbers.prev:hover,
.blog-posts__pagination-item .page-numbers.next:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

@media (max-width: 768px) {
	.blog-posts__pagination {
		margin-top: var(--spacing-md);
		padding-top: var(--spacing-md);
	}
	
	.blog-posts__pagination-list {
		gap: calc(var(--spacing-xs) / 2);
	}
	
	.blog-posts__pagination-item a,
	.blog-posts__pagination-item span {
		min-width: 40px;
		height: 40px;
		padding: 0 var(--spacing-xs);
		font-size: 0.875rem;
	}
	
	.blog-posts__pagination-item .prev,
	.blog-posts__pagination-item .next,
	.blog-posts__pagination-item .page-numbers.prev,
	.blog-posts__pagination-item .page-numbers.next {
		padding: 0 var(--spacing-sm);
	}
	
	.blog-posts__pagination-item .prev span,
	.blog-posts__pagination-item .next span,
	.blog-posts__pagination-item .page-numbers.prev span,
	.blog-posts__pagination-item .page-numbers.next span {
		display: none;
	}
	
	.blog-posts__pagination-item .prev svg,
	.blog-posts__pagination-item .next svg,
	.blog-posts__pagination-item .page-numbers.prev svg,
	.blog-posts__pagination-item .page-numbers.next svg {
		margin: 0;
	}
}

/* =========================================================
   AUTHOR PAGE
   ========================================================= */

.page-author {
	padding-top: calc(var(--header-height) + var(--spacing-md));
	background-color: var(--color-bg-main);
	min-height: calc(100vh - var(--header-height));
}

.page-author__header {
	padding: var(--spacing-lg) 0;
	background-color: var(--color-bg-card);
	border-bottom: 1px solid var(--color-border);
}

.page-author__profile {
	display: flex;
	gap: var(--spacing-lg);
	align-items: flex-start;
}

.page-author__avatar {
	flex-shrink: 0;
}

.page-author__avatar-img {
	width: 200px;
	height: 200px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 3px solid var(--color-primary);
	box-shadow: var(--shadow-lg);
}

.page-author__info {
	flex: 1;
}

.page-author__name {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--spacing-sm);
	color: var(--color-text-main);
}

.page-author__bio {
	color: var(--color-text-muted);
	font-size: 1.1rem;
	line-height: 1.7;
	margin-bottom: var(--spacing-md);
	max-width: 800px;
}

.page-author__bio p {
	margin-bottom: var(--spacing-sm);
}

.page-author__bio p:last-child {
	margin-bottom: 0;
}

.page-author__stats {
	display: flex;
	gap: var(--spacing-lg);
	flex-wrap: wrap;
}

.page-author__stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	min-width: 120px;
	transition: all var(--transition-fast);
}

.page-author__stat-item:hover {
	border-color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(39, 179, 191, 0.15);
}

.page-author__stat-item svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.page-author__stat-value {
	font-size: 1.5rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-text-main);
	line-height: 1;
}

.page-author__stat-label {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.page-author__content {
	padding: var(--spacing-lg) 0;
	background-color: var(--color-bg-main);
}

.page-author__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}

.page-author__main {
	width: 100%;
}

.page-author__section-title {
	font-size: 2rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
	padding-bottom: var(--spacing-sm);
	border-bottom: 2px solid var(--color-primary);
}

.page-author__empty {
	padding: var(--spacing-lg);
	text-align: center;
	color: var(--color-text-muted);
	font-style: italic;
}

.page-author__sidebar {
	width: 100%;
}

.page-author__sidebar-widget {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	position: sticky;
	top: calc(var(--header-height) + var(--spacing-md));
}

.page-author__sidebar-title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--color-border);
}

.page-author__comments {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.page-author__comment-item {
	display: block;
	padding: var(--spacing-sm);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.page-author__comment-item:hover,
.page-author__comment-item:focus {
	border-color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(39, 179, 191, 0.15);
	transform: translateY(-2px);
	text-decoration: none;
}

.page-author__comment-post-title {
	font-size: 0.9rem;
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-xs);
	color: var(--color-primary);
	line-height: 1.4;
}

.page-author__comment-item:hover .page-author__comment-post-title,
.page-author__comment-item:focus .page-author__comment-post-title {
	color: var(--color-primary-hover);
}

.page-author__comment-content {
	color: var(--color-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: var(--spacing-xs);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.page-author__comment-date {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	opacity: 0.7;
}

.page-author__comments-more {
	margin-top: var(--spacing-md);
	text-align: center;
}

/* 2-Column Layout for Wide Screens */
@media (min-width: 1024px) {
	.page-author__layout {
		grid-template-columns: 1fr 320px;
		gap: var(--spacing-xl);
		align-items: start;
	}
}

@media (max-width: 768px) {
	.page-author {
		padding-top: calc(var(--header-height) + var(--spacing-sm));
	}
	
	.page-author__header {
		padding: var(--spacing-md) 0;
	}
	
	.page-author__profile {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--spacing-md);
	}
	
	.page-author__avatar-img {
		width: 150px;
		height: 150px;
	}
	
	.page-author__stats {
		justify-content: center;
		width: 100%;
	}
	
	.page-author__stat-item {
		flex: 1;
		min-width: 100px;
	}
	
	.page-author__content {
		padding: var(--spacing-md) 0;
	}
	
	.page-author__section-title {
		font-size: 1.5rem;
	}
	
	.page-author__sidebar-widget {
		position: static;
	}
}

.page-trip-ideas__content {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

@media (max-width: 768px) {
	.trip-ideas-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}
	
	.trip-ideas-section__title {
		font-size: 1.5rem;
	}
	
	.trip-ideas-section__grid,
	.blog-posts__grid {
		grid-template-columns: 1fr;
	}
	
	/* On mobile, trip ideas sections show one by one (no horizontal scroll) */
	.trip-ideas-section__scrollable {
		overflow-x: visible;
		overflow-y: visible;
	}
	
	.trip-ideas-section__container {
		flex-direction: column;
	}
	
	.trip-ideas-section__container .article-card {
		flex: 1 1 100%;
		max-width: 100%;
	}
	
	.blog-filters__row {
		grid-template-columns: 1fr;
	}
	
	.blog-filters__group--actions {
		flex-direction: column;
		width: 100%;
	}
	
	.blog-filters__group--actions .btn {
		width: 100%;
		justify-content: center;
	}
	
	.article-card__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-xs);
	}
	
	.article-card__meta {
		font-size: 0.7rem;
	}
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
	background-color: #000;
	padding: var(--spacing-xl) 0 var(--spacing-md);
	color: var(--color-text-main);
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}

.footer__col h4 {
	margin-bottom: var(--spacing-sm);
	font-size: 1.1rem;
}

.footer__description {
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-sm);
	font-size: 0.9rem;
}

.footer__social {
	display: flex;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
}

.footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	transition: background-color var(--transition-fast);
}

.footer__social a:hover,
.footer__social a:focus {
	background-color: var(--color-primary);
}

.footer__social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer__links--stacked {
	margin-top: var(--spacing-sm);
}

.footer__links a {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	transition: color var(--transition-fast);
}

.footer__links a:hover,
.footer__links a:focus {
	color: var(--color-text-main);
}

/* Footer Subscribe Section */
.footer__subscribe {
	background-color: var(--color-bg-alt);
	padding: var(--spacing-lg) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	margin: var(--spacing-lg) 0;
}

.footer__subscribe-content {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.footer__subscribe-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-xs);
	color: var(--color-text-main);
}

.footer__subscribe-text {
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-md);
	font-size: 0.95rem;
}

.footer__subscribe-form {
	display: flex;
	justify-content: center;
	gap: var(--spacing-sm);
	max-width: 500px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.footer__subscribe-input {
	flex: 1;
	min-width: 250px;
	padding: 12px 20px;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg-main);
	color: var(--color-text-main);
	font-size: 1rem;
	font-family: inherit;
	transition: border-color var(--transition-fast);
}

.footer__subscribe-input::placeholder {
	color: var(--color-text-muted);
}

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

.footer__subscribe-btn {
	background-color: var(--color-primary);
	color: #FFFFFF;
	padding: 12px 32px;
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all var(--transition-fast);
	border: none;
	font-size: 1rem;
}

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

.footer__subscribe-message {
	margin-top: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	font-size: 0.9rem;
	text-align: center;
}

.footer__subscribe-message.success {
	background-color: rgba(39, 179, 191, 0.2);
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

.footer__subscribe-message.error {
	background-color: rgba(255, 0, 0, 0.1);
	color: #ff6b6b;
	border: 1px solid #ff6b6b;
}

.footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
	margin-bottom: var(--spacing-md);
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.footer__copy {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin: 0;
}

.footer__meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.footer__meta a {
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
}

.footer__meta a:hover,
.footer__meta a:focus {
	color: var(--color-text-main);
}

.footer__note {
	text-align: center;
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

.footer__note p {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin: 0;
}

.footer__note a {
	color: var(--color-text-muted);
	text-decoration: underline;
}

.footer__note a:hover,
.footer__note a:focus {
	color: var(--color-primary);
}

/* =========================================================
   BLOG / ARTICLE CARDS
   ========================================================= */

.blog-card,
.article-card {
	background-color: var(--color-bg-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	overflow: hidden;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	display: flex;
	flex-direction: column;
}

.blog-card:hover,
.article-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.blog-card__image,
.article-card__image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	background-color: var(--color-bg-alt);
	display: block;
}

.blog-card__placeholder {
	width: 100%;
	height: 200px;
	background-color: var(--color-bg-alt);
}

.blog-card__content,
.article-card__content {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-cat,
.article-card__category {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-medium);
}

.blog-title,
.article-card__title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-semibold);
}

.blog-title a,
.article-card__title a {
	color: var(--color-text-main);
	transition: color var(--transition-fast);
}

.blog-title a:hover,
.blog-title a:focus,
.article-card__title a:hover,
.article-card__title a:focus {
	color: var(--color-primary);
}

.blog-excerpt,
.article-card__excerpt {
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-sm);
	font-size: 0.95rem;
	line-height: 1.6;
	flex: 1;
}

.blog-link,
.article-card__link {
	color: var(--color-text-main);
	text-decoration: underline;
	font-size: 0.9rem;
	transition: color var(--transition-fast);
}

.blog-link:hover,
.blog-link:focus,
.article-card__link:hover,
.article-card__link:focus {
	color: var(--color-primary);
}

.blog__header,
.trip-ideas__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
}

.blog__view-all,
.trip-ideas__link {
	color: var(--color-text-main);
	text-decoration: underline;
	font-size: 0.9rem;
}

.blog__grid,
.trip-ideas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-md);
}

/* =========================================================
   PAGE SECTIONS
   ========================================================= */

.page-section {
	padding: var(--spacing-xl) 0;
}

.page-section__content,
.page-standard__content {
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 1.05rem;
}

.page-section__content h2,
.page-section__content h3,
.page-section__content h4,
.page-standard__content h2,
.page-standard__content h3,
.page-standard__content h4 {
	color: var(--color-text-main);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
}

.page-section__content a,
.page-standard__content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.page-section__content a:hover,
.page-section__content a:focus,
.page-standard__content a:hover,
.page-standard__content a:focus {
	color: var(--color-primary-hover);
}

/* =========================================================
   CONTENT AREAS
   ========================================================= */

.site-main {
	padding: var(--spacing-lg) 0;
}

/* Remove top padding on front page so hero sits flush under header */
.home .site-main {
	padding-top: 0;
}

/* Apply consistent content styling to all page content areas */
.site-main .entry-content,
.site-main .page-section__content,
.site-main .page-standard__content {
	font-size: 1.05rem;
}

.site-main .entry-content h2,
.site-main .entry-content h3,
.site-main .entry-content h4,
.site-main .page-section__content h2,
.site-main .page-section__content h3,
.site-main .page-section__content h4,
.site-main .page-standard__content h2,
.site-main .page-standard__content h3,
.site-main .page-standard__content h4 {
	color: var(--color-text-main);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
}

.entry-header {
	margin-bottom: var(--spacing-md);
}

.entry-title {
	margin-bottom: var(--spacing-sm);
}

.entry-title a {
	color: var(--color-text-main);
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--color-primary);
}

.entry-thumbnail {
	margin-bottom: var(--spacing-md);
}

.entry-content {
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 1.05rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--color-text-main);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
}

.entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.entry-content a:hover,
.entry-content a:focus {
	color: var(--color-primary-hover);
}

.entry-footer {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.page-links {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 768px) {
	:root {
		--header-height: 100px;
	}

	.header-top__container {
		font-size: 0.75rem;
		gap: 1rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	.header-top__item--desktop {
		display: none !important;
	}

	.header__container {
		flex-wrap: wrap;
	}

	.header__nav {
		display: none;
	}

	.header__toggle {
		display: block;
	}

	.logo__text {
		display: none;
	}

	/* Hide desktop dropdowns on mobile */
	.nav__list .sub-menu {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}

	.hero {
		min-height: 70vh;
		padding: var(--spacing-lg) 0;
	}

	.booking-widget {
		flex-direction: column;
	}

	.form-group {
		width: 100%;
	}

	.subscribe__form {
		flex-direction: column;
	}

	.subscribe__input {
		width: 100%;
	}

	.testimonials__grid,
	.trip-ideas__grid {
		grid-template-columns: 1fr;
	}

	.footer__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

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

	.footer__subscribe-input {
		width: 100%;
		min-width: 100%;
	}

	.footer__subscribe-btn {
		width: 100%;
	}

	.footer__bottom {
		flex-direction: column;
		text-align: center;
	}

	.trip-ideas__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	.deals-carousel__item {
		flex: 0 0 calc(50% - 0.75rem);
		min-width: 280px;
	}

	.deals-carousel__wrapper {
		padding: 0;
	}

	.deals-carousel__prev,
	.deals-carousel__next {
		display: none;
	}

	.deals-carousel__item {
		flex: 0 0 calc(50% - 0.75rem);
		min-width: 280px;
	}
}

@media (min-width: 900px) {
	.deals-carousel__wrapper {
		padding: 0 60px;
	}

	.deals-carousel__prev,
	.deals-carousel__next {
		display: flex;
	}
}

@media (max-width: 480px) {
	body {
		font-size: 14px;
	}

	.container {
		padding: 0 var(--spacing-xs);
	}

	.hero__content {
		padding: 0 var(--spacing-sm);
	}

	.booking-widget {
		padding: var(--spacing-sm);
	}
}

/* =========================================================
   WHATSAPP BUTTON (Mobile Only)
   ========================================================= */

.whatsapp-button {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 60px;
	height: 60px;
	background-color: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
	z-index: 999;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	text-decoration: none;
	color: var(--color-text-main);
}

.whatsapp-button:hover,
.whatsapp-button:focus {
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(37, 211, 102, 0.5);
	color: var(--color-text-main);
}

.whatsapp-button svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}

/* Hide WhatsApp button on desktop */
@media (min-width: 769px) {
	.whatsapp-button {
		display: none;
	}
}

/* =========================================================
   LOCATIONS MAP SECTION
   ========================================================= */

.locations-map {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-alt);
}

.locations-map__title {
	text-align: center;
	margin-bottom: var(--spacing-sm);
}

.locations-map__subtitle {
	text-align: center;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-lg);
}

.locations-map__wrapper {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--spacing-lg);
	align-items: start;
}

.locations-map__image-container {
	position: relative;
	width: 100%;
	background-color: var(--color-bg-main);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.locations-map__image {
	width: 100%;
	height: auto;
	display: block;
}

.locations-map__placeholder {
	padding: var(--spacing-xl);
	text-align: center;
	color: var(--color-text-muted);
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.locations-map__pins-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.locations-map__pin {
	position: absolute;
	transform: translate(-50%, -50%);
	cursor: pointer;
	pointer-events: all;
	transition: transform 0.2s ease, opacity 0.2s ease;
	z-index: 10;
}

.locations-map__pin:hover,
.locations-map__pin.is-hovered {
	transform: translate(-50%, -50%) scale(1.2);
	z-index: 20;
}

.locations-map__pin-marker {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--color-primary);
	border: 3px solid var(--color-text-main);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: all 0.2s ease;
}

.locations-map__pin--airport .locations-map__pin-marker {
	background-color: var(--color-primary);
}

.locations-map__pin:hover .locations-map__pin-marker,
.locations-map__pin.is-hovered .locations-map__pin-marker {
	width: 20px;
	height: 20px;
	box-shadow: 0 4px 12px rgba(39, 179, 191, 0.6);
}

.locations-map__pin-label {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(26, 29, 36, 0.95);
	color: var(--color-text-main);
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	border: 1px solid var(--color-border);
}

.locations-map__pin:hover .locations-map__pin-label,
.locations-map__pin.is-hovered .locations-map__pin-label {
	opacity: 1;
}

.locations-map__list {
	background-color: var(--color-bg-main);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
}

.locations-map__list-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.locations-map__locations {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.locations-map__location-item {
	margin: 0;
}

.locations-map__location-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-alt);
	transition: background-color 0.2s ease, transform 0.2s ease;
	color: var(--color-text-main);
}

.locations-map__location-link:hover {
	background-color: var(--color-primary);
	transform: translateX(4px);
	color: var(--color-text-main);
}

.locations-map__location-name {
	font-weight: 500;
}

.locations-map__location-badge {
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.page-locations__content {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

/* =========================================================
   LOCATION INFO SECTION
   ========================================================= */

.location-info {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.location-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	align-items: start;
}

/* On desktop: Map on left, Details on right */
/* Map is first in HTML, so it appears on left in grid */
.location-info__details {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
}

.location-info__title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.location-info__item {
	display: flex;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--color-border);
}

.location-info__item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.location-info__icon {
	flex-shrink: 0;
	color: var(--color-primary);
	margin-top: 0.25rem;
}

.location-info__content {
	flex: 1;
}

.location-info__label {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-muted);
	margin-bottom: 0.25rem;
}

.location-info__value {
	color: var(--color-text-main);
	margin: 0;
	line-height: 1.6;
}

.location-info__value a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.location-info__value a:hover {
	color: var(--color-primary-hover);
}

.location-info__map {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.location-info__map-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* 4:3 aspect ratio */
	overflow: hidden;
}

.location-info__map-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 1024px) {
	.location-info__grid {
		grid-template-columns: 1fr;
	}
	
	/* On mobile: Map first, Details second (natural HTML order) */
	
	.location-info__map-wrapper {
		padding-bottom: 56.25%; /* 16:9 aspect ratio on mobile */
		min-height: 300px;
	}
	
	.locations-map__wrapper {
		grid-template-columns: 1fr;
	}
	
	.locations-map__image-container {
		max-height: 500px;
		overflow: hidden;
	}
	
	.locations-map__image {
		object-fit: cover;
		height: 100%;
	}
}

@media (max-width: 768px) {
	.location-info {
		padding: var(--spacing-lg) 0;
	}
	
	.location-info__details {
		padding: var(--spacing-sm);
	}
	
	.location-info__title {
		font-size: 1.25rem;
	}
	
	.locations-map__image-container {
		max-height: 400px;
	}
	
	.locations-map__pin-marker {
		width: 14px;
		height: 14px;
	}
	
	.locations-map__pin-label {
		font-size: 0.7rem;
		padding: 0.2rem 0.4rem;
	}
}

/* =========================================================
   PLACE PAGE (tag.php - Places taxonomy)
   ========================================================= */

.page-place .hero__meta--distance {
	font-size: 0.95rem;
	opacity: 0.9;
	margin-top: 0.5rem;
}

.place-info {
	margin-bottom: var(--spacing-md);
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--color-border);
}

.place-info__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-xs);
}

.place-info__link {
	color: var(--color-primary);
	text-decoration: none;
	font-size: 0.9rem;
}

.place-info__link:hover {
	text-decoration: underline;
}

.place-info__address {
	font-size: 0.95rem;
	color: var(--color-text-muted);
	margin: 0.25rem 0;
}

.place-info__rating {
	font-size: 0.95rem;
	margin: 0.25rem 0;
}

.place-info--business {
	margin-top: var(--spacing-sm);
}

.place-info__hours ul {
	list-style: none;
	margin: 0.25rem 0;
	padding: 0;
}

.place-info__hours li {
	font-size: 0.9rem;
}

.place-info__website,
.place-info__phone {
	margin: 0.5rem 0;
}

.place-info__masked {
	opacity: 0.7;
	filter: blur(2px);
	user-select: none;
	letter-spacing: 0.05em;
}

.place-info__masked:hover {
	opacity: 1;
	filter: none;
	user-select: text;
}

.place-routes {
	margin: var(--spacing-md) 0;
}

.place-routes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--spacing-sm);
	margin: var(--spacing-sm) 0;
}

.place-routes__card {
	display: block;
	padding: var(--spacing-sm);
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text-main);
	transition: background var(--transition-fast);
}

.place-routes__card:hover {
	background: var(--color-bg-card);
}

.place-routes__card-title {
	display: block;
	font-weight: var(--font-weight-medium);
}

.place-routes__card-meta {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.place-nearby {
	margin: var(--spacing-md) 0;
}

.place-nearby__grid {
	display: grid;
	gap: var(--spacing-sm);
	margin: var(--spacing-sm) 0;
}

.place-nearby__item {
	padding: var(--spacing-xs) 0;
	border-bottom: 1px solid var(--color-border-light);
}

.place-nearby__item:last-child {
	border-bottom: none;
}

.place-nearby__dist,
.place-nearby__rating {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-left: 0.5rem;
}

.place-nearby__maps {
	font-size: 0.85rem;
	margin-left: 0.5rem;
}

.place-nearby__list {
	list-style: none;
	margin: var(--spacing-xs) 0;
	padding: 0;
}

.place-nearby__list li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--color-border-light);
}

.place-nearby__list li a {
	color: var(--color-primary);
	margin-left: 0.5rem;
}

/* Place actions (Save to My Routes, Claim business) */
.route-saved-routes__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
}

.route-saved-routes__actions .btn {
	margin: 0;
}

.rcnz-claim-business-btn {
	background-color: #27b3bf !important;
	color: #fff !important;
	border-color: #27b3bf !important;
}

.rcnz-claim-business-btn:hover {
	background-color: #1f9aa3 !important;
	color: #fff !important;
	border-color: #1f9aa3 !important;
}

/* Place claim modal */
.place-claim-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-md);
}

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

.place-claim-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.place-claim-modal__content {
	position: relative;
	background: var(--color-bg-main);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.place-claim-modal__close {
	position: absolute;
	top: var(--spacing-sm);
	right: var(--spacing-sm);
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text-muted);
	padding: 0.25rem;
}

.place-claim-modal__close:hover {
	color: var(--color-text-main);
}

.place-claim-modal__desc {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-bottom: var(--spacing-md);
}

.place-claim-form label {
	display: block;
	font-weight: var(--font-weight-medium);
	margin-bottom: 0.25rem;
}

.place-claim-form label .required {
	color: var(--color-error, #c00);
}

.place-claim-form input,
.place-claim-form textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	margin-bottom: var(--spacing-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.place-claim-form__actions {
	margin-top: var(--spacing-md);
}

/* Place gallery */
.place-gallery {
	margin: var(--spacing-md) 0;
}

.place-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
}

.place-gallery__item {
	display: block;
	aspect-ratio: 4/3;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.place-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Place best time to visit */
.place-best-time {
	margin: var(--spacing-md) 0;
	padding: var(--spacing-sm) 0;
	border-top: 1px solid var(--color-border);
}

/* Place drive times from major cities */
.place-drive-times {
	margin: var(--spacing-md) 0;
}

.place-drive-times__list {
	list-style: none;
	margin: var(--spacing-sm) 0;
	padding: 0;
}

.place-drive-times__list li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--color-border-light);
}

.place-drive-times__list li:last-child {
	border-bottom: none;
}

/* Place FAQ */
.place-faq {
	margin: var(--spacing-md) 0;
}

.place-faq__list {
	margin-top: var(--spacing-sm);
}

.place-faq__item {
	margin-bottom: var(--spacing-xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.place-faq__item summary {
	padding: var(--spacing-sm) var(--spacing-md);
	cursor: pointer;
	font-weight: var(--font-weight-medium);
	background: var(--color-bg-alt);
}

.place-faq__item summary:hover {
	background: var(--color-bg-card);
}

.place-faq__answer {
	padding: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

/* =========================================================
   VEHICLES GRID SECTION
   ========================================================= */

.vehicles-grid {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-alt);
}

.vehicles-grid__wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-md);
}

.vehicle-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-bg-main);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vehicle-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.vehicle-card__link {
	display: block;
	text-decoration: none;
	color: var(--color-text-main);
}

.vehicle-card__image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* 4:3 aspect ratio */
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

.vehicle-card__image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.vehicle-card:hover .vehicle-card__image img {
	transform: scale(1.05);
}

.vehicle-card__image--placeholder {
	background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg-main) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vehicle-card__image--placeholder::before {
	content: '🚗';
	font-size: 3rem;
	opacity: 0.3;
}

.vehicle-card__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.vehicle-card:hover .vehicle-card__overlay {
	opacity: 0.8;
}

.vehicle-card__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--spacing-md);
	z-index: 2;
}

.vehicle-card__title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
	color: var(--color-text-main);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.vehicle-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease;
}

.vehicle-card:hover .vehicle-card__cta {
	transform: translateX(4px);
}

.vehicle-card__cta svg {
	transition: transform 0.2s ease;
}

.vehicle-card:hover .vehicle-card__cta svg {
	transform: translateX(2px);
}

.vehicle-card__price {
	font-size: 0.9rem;
	color: var(--color-text-main);
	margin-bottom: var(--spacing-xs);
	opacity: 0.95;
}

/* Vehicle emissions label (fuel, CO2, economy, safety) */
.vehicle-emissions-label {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-xs);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.9);
}

.vehicle-card .vehicle-emissions-label {
	margin-bottom: var(--spacing-xs);
	font-size: 0.75rem;
}

.vehicle-emissions-label__item {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.vehicle-emissions-label__label {
	opacity: 0.85;
	margin-right: 0.15rem;
}

.vehicle-emissions-label__stars {
	letter-spacing: 0.05em;
}

.vehicle-emissions-label__star {
	color: rgba(255, 255, 255, 0.35);
}

.vehicle-emissions-label__star--filled {
	color: #f1c40f;
}

.vehicle-emissions-label__value {
	font-weight: 500;
}

.vehicle-emissions-label__safety-year {
	display: block;
	font-size: 0.7em;
	opacity: 0.8;
}

.vehicle-emissions-label__safety-year--compact {
	display: inline;
	margin-left: 0.25rem;
}

/* Full-page emissions section (single car model) */
.page-vehicle-model .vehicle-emissions-label {
	flex-direction: row;
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-main);
}

.page-vehicle-model .vehicle-emissions-label__star {
	color: var(--color-border);
}

.page-vehicle-model .vehicle-emissions-label__star--filled {
	color: #f1c40f;
}

.page-vehicle__models {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.page-vehicle__models-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.page-vehicles__content {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

/* Booking page */
.page-booking__results {
	padding: var(--spacing-xl) 0;
}

/* Booking tabs: Cars | Equipment */
.booking-tabs {
	display: flex;
	gap: 0;
	margin-bottom: var(--spacing-md);
	border-bottom: 2px solid var(--color-border);
}

.booking-tabs__tab {
	position: relative;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-muted);
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.booking-tabs__tab:hover {
	color: var(--color-text-main);
}

.booking-tabs__tab.is-active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

.booking-tabs__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--color-primary);
	border-radius: var(--radius-sm);
	vertical-align: middle;
}

.booking-panel {
	display: none;
}

.booking-panel.is-active {
	display: block;
}

.booking-results--equipment {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--spacing-md);
}

.equipment-card {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-card);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.equipment-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
}

.equipment-card__title {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
}

.equipment-card__description {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-sm);
	flex: 1;
}

.equipment-card__price {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
}

.equipment-card__actions .btn {
	width: 100%;
}

.booking-results__loading {
	color: var(--color-text-muted);
}

.booking-results__empty {
	color: var(--color-text-muted);
}

.booking-result-card {
	display: flex;
	gap: var(--spacing-lg);
	padding: var(--spacing-lg) 0;
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
	border-radius: var(--radius-lg);
	margin-bottom: var(--spacing-sm);
	padding: var(--spacing-lg);
	border: 2px solid transparent;
}

.booking-result-card:hover {
	border-color: var(--color-border);
}

.booking-result-card--selected {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
}

.booking-result-card__image {
	flex: 0 0 220px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-alt);
}

.booking-result-card__image img {
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.booking-result-card__content {
	flex: 1;
	min-width: 0;
}

.booking-result-card__category {
	display: inline-block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-primary);
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
}

.booking-result-card__title {
	font-size: 1.35rem;
	font-weight: 700;
	margin-bottom: var(--spacing-xs);
	letter-spacing: -0.02em;
}

.booking-result-card__short-info {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-md);
	line-height: 1.5;
}

.booking-result-card__variants {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.booking-result-card__variant {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	border: 2px solid var(--color-border);
	background: var(--color-bg-main);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.booking-result-card__variant:hover:not(.variant--unavailable) {
	border-color: var(--color-primary);
	background: rgba(39, 179, 191, 0.06);
}

.booking-result-card__variant--selected {
	border-color: var(--color-primary);
	background: rgba(39, 179, 191, 0.12);
	color: var(--color-primary);
}

.booking-result-card__variant--selected .booking-result-card__variant-price {
	color: var(--color-primary);
}

.booking-result-card__variant-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
	margin: 0;
}

/* Checkout: make inputs clickable but visually hidden */
.page-booking-checkout .booking-result-card__variant-input {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	pointer-events: auto; /* Input must be clickable for label association */
	z-index: 1;
}

/* Ensure labels are fully clickable */
.page-booking-checkout .booking-result-card__variant {
	cursor: pointer;
	position: relative;
}

/* Make sure label content doesn't block clicks */
.page-booking-checkout .booking-result-card__variant .booking-result-card__variant-label,
.page-booking-checkout .booking-result-card__variant .booking-result-card__variant-price {
	position: relative;
	z-index: 0;
	pointer-events: none; /* Content doesn't intercept clicks */
}

.booking-result-card__variant.variant--unavailable {
	opacity: 0.6;
	cursor: not-allowed;
	color: var(--color-text-muted);
	border-style: dashed;
}

.booking-result-card__variant.variant--unavailable:hover {
	border-color: var(--color-border);
	background: var(--color-bg-main);
}

.booking-result-card__variant-label {
	font-weight: 500;
	font-size: 0.9rem;
}

.booking-result-card__variant-price {
	font-weight: 700;
	color: var(--color-primary);
	font-size: 0.95rem;
}

.booking-result-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-md);
	margin-top: var(--spacing-md);
}

.booking-result-card__show-avail {
	font-size: 0.875rem;
}

.booking-result-card__continue {
	display: inline-block;
	font-weight: 600;
}

@media (max-width: 640px) {
	.booking-result-card {
		flex-direction: column;
		padding: var(--spacing-md);
	}
	.booking-result-card__image {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
	.booking-result-card__image img {
		height: 180px;
	}
}

.booking-result-card__calendar {
	margin-top: var(--spacing-md);
	padding: var(--spacing-sm);
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	max-width: 100%;
	overflow: visible;
	/* Dark background: labels white, dates by state (gray/white/theme) */
	color: #fff;
}

/* Cap width: 2 months in a line, never wider than needed */
.booking-result-card__calendar {
	max-width: 280px;
}

.booking-calendar--compact .booking-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-xs);
}

.booking-calendar--compact .booking-calendar__nav {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	padding: 0 4px;
	color: #fff;
}

.booking-calendar--compact .booking-calendar__header-title,
.booking-calendar--compact .booking-calendar__title {
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0;
	color: #fff;
}

/* Always 2 months in a single line, never stacked in a column */
.booking-calendar__months {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-xs);
}

.booking-calendar__month {
	flex: 0 0 auto;
	min-width: 0;
}

.booking-calendar__month .booking-calendar__title {
	margin-bottom: 2px;
}

.booking-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	font-size: 0.65rem;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 2px;
}

.booking-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
}

/* Unavailable dates: gray */
.booking-calendar__cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	border-radius: 3px;
	border: none;
	background: transparent;
	cursor: default;
	min-width: 20px;
	min-height: 20px;
	color: rgba(255, 255, 255, 0.35);
}

.booking-calendar__cell--empty {
	visibility: hidden;
}

/* Available dates: white */
.booking-calendar__cell--available {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	cursor: pointer;
}

.booking-calendar__cell--available:hover {
	background: rgba(255, 255, 255, 0.35);
}

/* Chosen (selected) dates: theme color */
.booking-calendar__cell--selected {
	background: var(--color-primary);
	color: #fff;
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

.booking-calendar__cell--available.booking-calendar__cell--selected {
	background: var(--color-primary);
	color: #fff;
}

.booking-calendar__hint {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.85);
	margin: var(--spacing-xs) 0 0;
}

.booking-calendar__actions {
	margin: var(--spacing-sm) 0 0;
}

.booking-calendar__update {
	width: 100%;
	font-size: 0.8rem;
	padding: var(--spacing-xs) var(--spacing-sm);
}

.booking-calendar__error {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.9rem;
}

.page-booking-checkout__content {
	padding: var(--spacing-lg) 0 var(--spacing-xl);
}

.booking-checkout__error {
	margin-bottom: var(--spacing-md);
}

/* Two-column layout: main form + sticky sidebar */
.booking-checkout__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
	align-items: start;
}
@media (min-width: 900px) {
	.booking-checkout__layout {
		grid-template-columns: 1fr 320px;
	}
	.booking-checkout__sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--spacing-sm));
	}
}

.booking-checkout__summary-card {
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
}

.booking-checkout__summary-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-sm);
}

.booking-checkout__summary-car {
	font-weight: 600;
	font-size: 1.1rem;
	margin-bottom: 0.25rem;
}

.booking-checkout__car-image {
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--spacing-sm);
}

.booking-checkout__car-image img {
	width: 100%;
	height: 120px;
	object-fit: cover;
}

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

.booking-checkout__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem var(--spacing-sm);
	font-size: 0.9rem;
	margin-top: var(--spacing-sm);
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
}

.booking-checkout__meta dt {
	font-weight: 500;
	color: var(--color-text-muted);
}

.booking-checkout__meta dd {
	margin: 0;
}

.booking-checkout__summary-rental,
.booking-checkout__summary-extras,
.booking-checkout__summary-insurance,
.booking-checkout__summary-discount {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--spacing-sm);
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
	font-size: 0.95rem;
}

.booking-checkout__summary-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.25rem;
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
	font-size: 1rem;
	font-weight: 600;
}

.booking-checkout__section-title {
	font-size: 1.1rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.booking-checkout__form {
	padding: 0;
}

/* Add-ons: optional extras with clear value copy */
.booking-checkout__addons {
	border: none;
	margin: var(--spacing-lg) 0;
	padding: 0;
}

.booking-checkout__addons-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	padding: 0;
}

.booking-checkout__addons-intro {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.5;
	margin-bottom: var(--spacing-md);
	max-width: 52ch;
}

.booking-checkout__addons-list {
	display: grid;
	gap: var(--spacing-sm);
	list-style: none;
	margin: 0 0 var(--spacing-md);
	padding: 0;
}

.booking-checkout__addon-card {
	margin: 0;
}

.booking-checkout__addon-label {
	display: block;
	cursor: pointer;
	margin: 0;
}

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

.booking-checkout__addon-card-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.booking-checkout__addon-label:hover .booking-checkout__addon-card-inner {
	border-color: var(--color-primary-dark);
}

.booking-checkout__addon-input:focus-visible + .booking-checkout__addon-card-inner {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.booking-checkout__addon-input:checked + .booking-checkout__addon-card-inner {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
}

.booking-checkout__addon-card-inner::before {
	content: '';
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.booking-checkout__addon-input:checked + .booking-checkout__addon-card-inner::before {
	background: var(--color-primary);
	border-color: var(--color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	background-size: 0.75rem;
	background-position: center;
}

.booking-checkout__addon-name {
	font-weight: 500;
	flex: 1 1 auto;
}

.booking-checkout__addon-items {
	width: 100%;
	font-size: 0.8rem;
	color: var(--color-text-muted);
	order: 2;
}

.booking-checkout__addon-desc {
	width: 100%;
	font-size: 0.875rem;
	color: var(--color-text-muted);
	order: 3;
}

.booking-checkout__addon-price {
	font-weight: 600;
	color: var(--color-primary);
	white-space: nowrap;
}

.booking-checkout__totals {
	margin-top: var(--spacing-md);
	padding: var(--spacing-sm) 0;
	border-top: 1px solid var(--color-border);
}

.booking-checkout__totals-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.95rem;
}
.booking-checkout__totals-row--addons {
	color: var(--color-text-muted);
	margin-bottom: 0.25rem;
}
.booking-checkout__totals-row--grand {
	font-size: 1.15rem;
	font-weight: 600;
	margin-top: 0.25rem;
}

.booking-checkout__form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
}

.booking-checkout__form .form-group {
	margin-bottom: var(--spacing-md);
}

.booking-checkout__checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	cursor: pointer;
	font-weight: normal;
}

.booking-checkout__checkbox input {
	margin-top: 4px;
}

.booking-checkout__form-error {
	color: #c00;
	margin-bottom: var(--spacing-md);
}
.booking-checkout__form-error--server {
	background: rgba(200, 50, 50, 0.08);
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
}

.booking-checkout__form-actions {
	display: flex;
	gap: var(--spacing-md);
	margin-top: var(--spacing-lg);
}

.booking-checkout__success {
	padding: var(--spacing-xl);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	margin-top: var(--spacing-xl);
}

.booking-checkout__success p {
	margin-bottom: var(--spacing-md);
}

.booking-checkout__back {
	margin-top: var(--spacing-lg);
}

.booking-checkout__form .required {
	color: var(--color-primary);
}

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

@media (max-width: 768px) {
	.vehicles-grid {
		padding: var(--spacing-lg) 0;
	}
	
	.vehicles-grid__wrapper {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}
	
	.vehicle-card__title {
		font-size: 1.25rem;
	}
}

/* =========================================================
   SERVICES GRID SECTION
   ========================================================= */

.services-grid {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-alt);
}

.services-grid__wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-md);
}

.service-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-bg-main);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.service-card__link {
	display: block;
	text-decoration: none;
	color: var(--color-text-main);
}

.service-card__image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* 4:3 aspect ratio */
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

.service-card__image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.service-card:hover .service-card__image img {
	transform: scale(1.05);
}

.service-card__image--placeholder {
	background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg-main) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-card__image--placeholder::before {
	content: '🚙';
	font-size: 3rem;
	opacity: 0.3;
}

.service-card__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.service-card:hover .service-card__overlay {
	opacity: 0.8;
}

.service-card__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--spacing-md);
	z-index: 2;
}

.service-card__title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
	color: var(--color-text-main);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.service-card__excerpt {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-xs);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	line-height: 1.5;
}

.service-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease;
}

.service-card:hover .service-card__cta {
	transform: translateX(4px);
}

.service-card__cta svg {
	transition: transform 0.2s ease;
}

.service-card:hover .service-card__cta svg {
	transform: translateX(2px);
}

.page-services__content {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

@media (max-width: 768px) {
	.services-grid {
		padding: var(--spacing-lg) 0;
	}
	
	.services-grid__wrapper {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}
	
	.service-card__title {
		font-size: 1.25rem;
	}
	
	.service-card__excerpt {
		font-size: 0.8rem;
	}
}

/* =========================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================= */

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

/* Focus styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--color-primary);
	color: var(--color-text-main);
	padding: 8px 16px;
	z-index: 10000;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

/* =========================================================
   HELP STAGES (INFOGRAPHIC)
   ========================================================= */

.help-stages {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
	position: relative;
}

.help-stages__title {
	text-align: center;
	margin-bottom: var(--spacing-xl);
	font-size: 2rem;
	font-weight: var(--font-weight-bold);
}

.help-stages__flow {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	padding: var(--spacing-md) var(--spacing-lg);
}

/* Stage positioning - all stages in vertical flow */
.help-stage--before_you_book,
.help-stage--before_pickup,
.help-stage--driving_in_nz,
.help-stage--after_your_trip {
	width: 100%;
	margin: 0 auto;
}

/* Arrow positioning - vertical arrows between stages */
.help-stage__arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60px;
	margin: var(--spacing-sm) 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.6;
	transition: opacity var(--transition-base);
}

.help-stage__arrow:hover {
	opacity: 1;
}

.help-stage__arrow-svg {
	width: 4px;
	height: 60px;
	overflow: visible;
}

.help-stage {
	background-color: var(--color-bg-card);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	text-align: left;
	transition: all var(--transition-base);
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

.help-stage:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-primary);
}

.help-stage:hover .help-stage__highlight {
	opacity: 1;
	transform: scale(1.1);
}

.help-stage__link {
	text-decoration: none;
	color: inherit;
	display: block;
	position: relative;
	z-index: 1;
}

.help-stage__highlight {
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	background: radial-gradient(circle, rgba(39, 179, 191, 0.1) 0%, transparent 70%);
	border-radius: var(--radius-lg);
	opacity: 0;
	transition: all var(--transition-base);
	pointer-events: none;
	z-index: 0;
}

.help-stage__content {
	position: relative;
	z-index: 1;
}

.help-stage__icon {
	color: var(--color-primary);
	margin-bottom: var(--spacing-md);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	transition: transform var(--transition-base);
}

.help-stage:hover .help-stage__icon {
	transform: scale(1.05);
}

.help-stage__icon svg {
	width: 56px;
	height: 56px;
}

.help-stage__title {
	font-size: 1.5rem;
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.help-stage__description {
	margin-bottom: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.help-stage__description-item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	background-color: var(--color-bg-alt);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

.help-stage__description-item:hover {
	background-color: rgba(39, 179, 191, 0.05);
	border-left-color: var(--color-primary-hover);
	transform: translateX(4px);
}

.help-stage__description-icon {
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.help-stage__description-icon svg {
	width: 20px;
	height: 20px;
}

.help-stage__description-text {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.7;
	flex: 1;
}

.help-stage__description-text p {
	margin: 0;
}

.help-stage__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-primary);
	font-weight: var(--font-weight-medium);
	margin-top: var(--spacing-sm);
	transition: transform var(--transition-fast), color var(--transition-fast);
	font-size: 0.9rem;
	align-self: flex-start;
}

.help-stage:hover .help-stage__cta {
	transform: translateX(4px);
	color: var(--color-primary-hover);
}

/* Wide screen adjustments */
@media (min-width: 1200px) {
	.help-stages__flow {
		max-width: 1100px;
	}
	
	.help-stage {
		padding: var(--spacing-lg) var(--spacing-xl);
	}
}

@media (min-width: 1400px) {
	.help-stages__flow {
		max-width: 1200px;
	}
}

/* =========================================================
   FAQ FILTERS
   ========================================================= */

.faq-filters {
	padding: var(--spacing-md) 0;
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}

.faq-filters__wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-sm);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.faq-filters__label {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-main);
	white-space: nowrap;
}

.faq-filters__select {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-main);
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-family: var(--font-main);
	cursor: pointer;
	transition: border-color var(--transition-fast);
	flex: 1;
	max-width: 300px;
}

.faq-filters__select:hover,
.faq-filters__select:focus {
	border-color: var(--color-primary);
	outline: none;
}

.faq-filters__select option {
	background-color: var(--color-bg-card);
	color: var(--color-text-main);
}

/* =========================================================
   FAQ ENHANCEMENTS
   ========================================================= */

.faq__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.faq__view-all {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
	transition: color var(--transition-fast);
}

.faq__view-all:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.faq__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-sm);
}

.faq__category-badge {
	display: inline-block;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.faq__empty {
	text-align: center;
	padding: var(--spacing-xl) 0;
	color: var(--color-text-muted);
}

.accordion-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.accordion-icon::before {
	content: "⌄";
	font-size: 1.2rem;
	transition: transform var(--transition-base);
}

.accordion-item.active .accordion-icon::before {
	transform: rotate(180deg);
}

/* =========================================================
   RESPONSIVE: HELP STAGES & FAQ
   ========================================================= */

@media (max-width: 768px) {
	.help-stages__flow {
		padding: var(--spacing-sm);
		gap: var(--spacing-sm);
	}

	.help-stage {
		padding: var(--spacing-md);
		text-align: left;
	}

	.help-stage__icon {
		justify-content: center;
	}

	.help-stage__title {
		text-align: center;
		font-size: 1.25rem;
	}

	.help-stage__arrow {
		height: 40px;
		margin: var(--spacing-xs) 0;
	}

	.help-stage__arrow-svg {
		height: 40px;
	}

	.help-stages__title {
		font-size: 1.5rem;
		margin-bottom: var(--spacing-md);
	}

	.help-stage__description-item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-xs);
	}

	.help-stage__description-icon {
		align-self: flex-start;
	}

	.faq-filters__wrapper {
		flex-direction: column;
		align-items: stretch;
	}

	.faq-filters__select {
		max-width: 100%;
	}

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

/* =========================================================
   TIMELINE SECTION
   ========================================================= */

.timeline-section {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.timeline-section__title {
	text-align: center;
	margin-bottom: var(--spacing-xl);
	font-size: 2rem;
	font-weight: var(--font-weight-bold);
}

.timeline {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	padding: var(--spacing-md) 0;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 30px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-primary);
	opacity: 0.3;
}

.timeline__item {
	position: relative;
	padding-left: 80px;
	margin-bottom: var(--spacing-lg);
}

.timeline__item:last-child {
	margin-bottom: 0;
}

.timeline__marker {
	position: absolute;
	left: 0;
	top: 0;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timeline__dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--color-primary);
	border: 4px solid var(--color-bg-main);
	box-shadow: 0 0 0 4px var(--color-primary);
	transition: all var(--transition-base);
}

.timeline__item:hover .timeline__dot {
	transform: scale(1.2);
	box-shadow: 0 0 0 4px var(--color-primary), 0 0 20px rgba(39, 179, 191, 0.5);
}

/* Current/Highlighted timeline item */
.timeline__item--current .timeline__dot {
	background-color: var(--color-primary);
	border-color: var(--color-bg-main);
	box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 8px rgba(39, 179, 191, 0.2), 0 0 25px rgba(39, 179, 191, 0.6);
	animation: timeline-pulse 2s ease-in-out infinite;
	transform: scale(1.1);
}

.timeline__item--current .timeline__content {
	background-color: var(--color-bg-card);
	border: 2px solid var(--color-primary);
	box-shadow: var(--shadow-md), 0 0 20px rgba(39, 179, 191, 0.3);
	position: relative;
}

.timeline__item--current .timeline__content::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	border-radius: var(--radius-md);
	z-index: -1;
	opacity: 0.1;
}

.timeline__item--current .timeline__date {
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	font-size: 1rem;
}

.timeline__item--current .timeline__event {
	color: var(--color-text-main);
	font-weight: var(--font-weight-medium);
}

@keyframes timeline-pulse {
	0%, 100% {
		box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 8px rgba(39, 179, 191, 0.2), 0 0 25px rgba(39, 179, 191, 0.6);
	}
	50% {
		box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 12px rgba(39, 179, 191, 0.1), 0 0 35px rgba(39, 179, 191, 0.8);
	}
}

.timeline__content {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	transition: all var(--transition-base);
}

.timeline__item:hover .timeline__content {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateX(4px);
}

.timeline__date {
	font-size: 0.9rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	margin-bottom: var(--spacing-xs);
}

.timeline__event {
	font-size: 1rem;
	color: var(--color-text-main);
	line-height: 1.6;
}

/* =========================================================
   WHY CHOOSE US SECTION
   ========================================================= */

.why-choose-us {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-alt);
}

.why-choose-us__title {
	text-align: center;
	margin-bottom: var(--spacing-xl);
	font-size: 2rem;
	font-weight: var(--font-weight-bold);
}

.why-choose-us__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-md);
	max-width: 1200px;
	margin: 0 auto;
}

.why-choose-us__item {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	text-align: center;
	transition: all var(--transition-base);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
}

.why-choose-us__item:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.why-choose-us__icon {
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-base);
}

.why-choose-us__item:hover .why-choose-us__icon {
	transform: scale(1.1) rotate(5deg);
}

.why-choose-us__icon svg {
	width: 48px;
	height: 48px;
}

.why-choose-us__item-title {
	font-size: 1.1rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-main);
	margin: 0;
}

/* =========================================================
   CONTACT SECTION
   ========================================================= */

.contact-section {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.contact-section__title {
	text-align: center;
	margin-bottom: var(--spacing-xl);
	font-size: 2rem;
	font-weight: var(--font-weight-bold);
}

.contact-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-xl);
	max-width: 1200px;
	margin: 0 auto;
}

.contact-section__form {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
}

.contact-form .form-group {
	margin-bottom: var(--spacing-md);
}

.contact-form label {
	display: block;
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-main);
}

.contact-form .required {
	color: var(--color-primary);
}

.contact-form .form-control {
	width: 100%;
	padding: 0.75rem;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-main);
	font-family: var(--font-main);
	font-size: 1rem;
	transition: border-color var(--transition-fast);
}

.contact-form .form-control:focus {
	outline: none;
	border-color: var(--color-primary);
}

.contact-form textarea.form-control {
	resize: vertical;
	min-height: 120px;
}

.contact-section__details {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
}

.contact-details__item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--color-border);
}

.contact-details__item:last-child {
	border-bottom: none;
}

.contact-details__icon {
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

.contact-details__content {
	flex: 1;
}

.contact-details__label {
	margin: 0 0 var(--spacing-xs) 0;
	font-size: 0.9rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-main);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.contact-details__value {
	margin: 0;
	color: var(--color-text-muted);
	line-height: 1.6;
}

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

.contact-details__value a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* =========================================================
   RESPONSIVE: ABOUT US PAGE
   ========================================================= */

@media (max-width: 768px) {
	.timeline::before {
		left: 15px;
	}

	.timeline__item {
		padding-left: 50px;
	}

	.timeline__marker {
		width: 30px;
		height: 30px;
	}

	.timeline__dot {
		width: 16px;
		height: 16px;
		border-width: 3px;
		box-shadow: 0 0 0 3px var(--color-primary);
	}

	.why-choose-us__grid {
		grid-template-columns: 1fr;
	}

	.contact-section__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.timeline-section__title,
	.why-choose-us__title,
	.contact-section__title {
		font-size: 1.5rem;
	}
}

/* =========================================================
   SINGLE POST TEMPLATE
   ========================================================= */

.single-post {
	padding-top: 0;
}

.single-post__content-section {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.single-post__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
	.single-post__layout {
		grid-template-columns: 1fr 320px;
		gap: var(--spacing-xl);
	}
}

/* Post Meta at Top */
.single-post__meta-top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	align-items: center;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--color-border);
}

.single-post__meta-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.single-post__meta-item svg {
	flex-shrink: 0;
	color: var(--color-primary);
}

.single-post__author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

.single-post__author-link {
	color: var(--color-text-main);
	transition: color var(--transition-fast);
}

.single-post__author-link:hover,
.single-post__author-link:focus {
	color: var(--color-primary);
}

/* Post Content */
.single-post__main {
	width: 100%;
}

.single-post__article {
	margin-bottom: var(--spacing-xl);
}

.single-post__content {
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 1.05rem;
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
	color: var(--color-text-main);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
}

.single-post__content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.single-post__content a:hover,
.single-post__content a:focus {
	color: var(--color-primary-hover);
}

/* =========================================================
   POST RATINGS (1–5 STARS)
   ========================================================= */

.single-post__meta-item--rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.single-post__meta-item--rating .rcnz-star-icon {
	color: var(--color-primary);
	flex-shrink: 0;
}

.rcnz-rating-block {
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid var(--color-border);
}

.rcnz-rating-block__your {
	margin: 0 0 var(--spacing-sm);
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.rcnz-rating-block__login {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.rcnz-rating-block__login a {
	color: var(--color-primary);
	text-decoration: underline;
}

.rcnz-rating-block__login a:hover,
.rcnz-rating-block__login a:focus {
	color: var(--color-primary-hover);
}

.rcnz-star-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-sm);
}

.rcnz-star-rating__label {
	display: block;
	width: 100%;
	margin: 0 0 0.25rem;
	color: var(--color-text-muted);
	font-size: 0.9rem;
	font-weight: 500;
}

.rcnz-star-rating__stars {
	display: flex;
	align-items: center;
	gap: 0.15rem;
}

.rcnz-star-rating__star {
	display: inline-flex;
	cursor: pointer;
	margin: 0;
}

.rcnz-star-rating__star input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.rcnz-star-rating__star-icon {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-border);
	transition: color var(--transition-fast);
}

.rcnz-star-rating__star:hover .rcnz-star-rating__star-icon,
.rcnz-star-rating__star input:focus-visible + .rcnz-star-rating__star-icon {
	color: var(--color-primary);
}

.rcnz-star-rating__star input:checked + .rcnz-star-rating__star-icon {
	color: var(--color-primary);
}

/* Fill stars 1..N for selected rating (data-selected); hover (data-hover) overrides when present */
.rcnz-star-rating__stars:not([data-hover])[data-selected="1"] .rcnz-star-rating__star:nth-child(-n+1) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars:not([data-hover])[data-selected="2"] .rcnz-star-rating__star:nth-child(-n+2) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars:not([data-hover])[data-selected="3"] .rcnz-star-rating__star:nth-child(-n+3) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars:not([data-hover])[data-selected="4"] .rcnz-star-rating__star:nth-child(-n+4) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars:not([data-hover])[data-selected="5"] .rcnz-star-rating__star:nth-child(-n+5) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars[data-hover="1"] .rcnz-star-rating__star:nth-child(-n+1) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars[data-hover="2"] .rcnz-star-rating__star:nth-child(-n+2) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars[data-hover="3"] .rcnz-star-rating__star:nth-child(-n+3) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars[data-hover="4"] .rcnz-star-rating__star:nth-child(-n+4) .rcnz-star-rating__star-icon,
.rcnz-star-rating__stars[data-hover="5"] .rcnz-star-rating__star:nth-child(-n+5) .rcnz-star-rating__star-icon {
	color: var(--color-primary);
}

.rcnz-star-rating__submit {
	margin-left: 0;
}

@media (min-width: 769px) {
	.rcnz-star-rating__label {
		width: auto;
		margin: 0;
	}
}

/* =========================================================
   ROUTE RELATED GUIDES (Blog-style cards)
   ========================================================= */

.rcnz-route-related-guides {
	margin: var(--spacing-lg) 0;
}

.rcnz-route-related-guides h2 {
	margin-bottom: var(--spacing-md);
	font-size: 1.5rem;
}

.rcnz-related-guides-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--spacing-md);
}

.rcnz-related-guides-card {
	background: var(--color-bg-card);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.rcnz-related-guides-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.rcnz-related-guides-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.rcnz-related-guides-card__image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.rcnz-related-guides-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rcnz-related-guides-card__content {
	padding: var(--spacing-sm);
}

.rcnz-related-guides-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
}

.rcnz-related-guides-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: 0.5rem;
}

.rcnz-related-guides-card__rating {
	color: var(--color-primary);
}

.rcnz-related-guides-card__excerpt {
	margin: 0;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

/* =========================================================
   RECENT UPDATES BLOCK (Content Refresher Agent)
   ========================================================= */

.recent-updates-block {
	background-color: var(--color-bg-alt);
	border-left: 4px solid var(--color-primary);
	padding: var(--spacing-md);
	margin: var(--spacing-md) 0 var(--spacing-lg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.recent-updates-content {
	color: var(--color-text-muted);
	line-height: 1.7;
	font-size: 0.95rem;
}

.recent-updates-content h3,
.recent-updates-content h4 {
	margin-top: 0;
	color: var(--color-primary);
	font-size: 1.1em;
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-sm);
}

.recent-updates-content h3:first-child,
.recent-updates-content h4:first-child {
	margin-top: 0;
}

.recent-updates-content p {
	margin-bottom: var(--spacing-sm);
}

.recent-updates-content p:last-child {
	margin-bottom: 0;
}

.recent-updates-content ul {
	margin: var(--spacing-sm) 0;
	padding-left: 1.5rem;
	list-style: disc;
}

.recent-updates-content ul li {
	margin-bottom: 0.5rem;
	line-height: 1.6;
	padding-left: 0.5rem;
}

.recent-updates-content ul li::before {
	display: none; /* Override theme's emoji bullet points */
}

.recent-updates-content ol {
	margin: var(--spacing-sm) 0;
	padding-left: 1.5rem;
	list-style: decimal;
}

.recent-updates-content ol li {
	margin-bottom: 0.5rem;
	line-height: 1.6;
	padding-left: 0.5rem;
}

.recent-updates-content ol li::before {
	display: none; /* Override theme's custom numbering */
}

.recent-updates-content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.recent-updates-content a:hover,
.recent-updates-content a:focus {
	color: var(--color-primary-hover);
}

.recent-updates-meta {
	margin-top: var(--spacing-sm);
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-border);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}

.recent-updates-meta time {
	font-style: italic;
}

/* Single Post Meta - Updated Date Styling */
.single-post__meta-separator {
	margin: 0 var(--spacing-xs);
	color: var(--color-text-muted);
}

.single-post__meta-modified {
	color: var(--color-text-muted);
	font-size: 0.95em;
}

/* Mobile Responsiveness for Recent Updates */
@media (max-width: 768px) {
	.recent-updates-block {
		padding: var(--spacing-sm);
		margin: var(--spacing-sm) 0 var(--spacing-md);
		border-left-width: 3px;
	}

	.recent-updates-content {
		font-size: 0.9rem;
	}

	.recent-updates-content ul,
	.recent-updates-content ol {
		padding-left: 1.25rem;
	}
}

/* Styled Lists with Emojis - Apply to all content areas */
.single-post__content ul,
.entry-content ul,
.page-section__content ul,
.about-section__content ul,
.page-standard__content ul,
.page-section ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion):not(.trip-ideas__grid):not(.blog__grid),
.page-section ol:not(.comment-list),
.about-section ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion),
.about-section ol:not(.comment-list),
.site-main ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion):not(.trip-ideas__grid):not(.blog__grid),
.site-main ol:not(.comment-list) {
	list-style: none;
	padding-left: 0;
	margin: var(--spacing-md) 0;
}

.single-post__content ul li,
.entry-content ul li,
.page-section__content ul li,
.about-section__content ul li,
.page-standard__content ul li,
.page-section ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion):not(.trip-ideas__grid):not(.blog__grid) li,
.page-section ol:not(.comment-list) li,
.about-section ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion) li,
.about-section ol:not(.comment-list) li,
.site-main ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion):not(.trip-ideas__grid):not(.blog__grid) li,
.site-main ol:not(.comment-list) li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: var(--spacing-sm);
	line-height: 1.8;
}

.single-post__content ul li::before,
.entry-content ul li::before,
.page-section__content ul li::before,
.about-section__content ul li::before,
.page-standard__content ul li::before,
.page-section ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion):not(.trip-ideas__grid):not(.blog__grid) li::before,
.about-section ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion) li::before,
.site-main ul:not(.nav__list):not(.mobile-nav__list):not(.sub-menu):not(.comment-list):not(.accordion):not(.trip-ideas__grid):not(.blog__grid) li::before {
	content: "✨";
	position: absolute;
	left: 0;
	top: 0.2em;
	font-size: 1.1em;
}

.single-post__content ol,
.entry-content ol,
.page-section__content ol,
.about-section__content ol,
.page-standard__content ol,
.page-section ol:not(.comment-list),
.about-section ol:not(.comment-list),
.site-main ol:not(.comment-list) {
	counter-reset: list-counter;
	list-style: none;
	padding-left: 0;
	margin: var(--spacing-md) 0;
}

.single-post__content ol li,
.entry-content ol li,
.page-section__content ol li,
.about-section__content ol li,
.page-standard__content ol li,
.page-section ol:not(.comment-list) li,
.about-section ol:not(.comment-list) li,
.site-main ol:not(.comment-list) li {
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: var(--spacing-sm);
	line-height: 1.8;
	counter-increment: list-counter;
}

.single-post__content ol li::before,
.entry-content ol li::before,
.page-section__content ol li::before,
.about-section__content ol li::before,
.page-standard__content ol li::before,
.page-section ol:not(.comment-list) li::before,
.about-section ol:not(.comment-list) li::before,
.site-main ol:not(.comment-list) li::before {
	content: counter(list-counter) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1em;
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
}

/* Mobile: Ensure numbered lists display correctly */
@media (max-width: 768px) {
	.single-post__content ol li,
	.entry-content ol li,
	.page-section__content ol li,
	.about-section__content ol li,
	.page-standard__content ol li,
	.page-section ol:not(.comment-list) li,
	.about-section ol:not(.comment-list) li,
	.site-main ol:not(.comment-list) li {
		padding-left: 2rem;
	}
	
	.single-post__content ol li::before,
	.entry-content ol li::before,
	.page-section__content ol li::before,
	.about-section__content ol li::before,
	.page-standard__content ol li::before,
	.page-section ol:not(.comment-list) li::before,
	.about-section ol:not(.comment-list) li::before,
	.site-main ol:not(.comment-list) li::before {
		content: counter(list-counter) ".";
		font-size: 0.95em;
		left: 0.25rem;
	}
}

/* =========================================================
   TABLE STYLES (All Content Areas)
   ========================================================= */

/* Tables in all content areas */
.entry-content table,
.page-section__content table,
.page-standard__content table,
.page-helps__content table,
.page-location__content table,
.page-service__content table,
.page-vehicle__content table,
.page-layout__main table,
.site-main table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--spacing-md) 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-bg-card);
}

.entry-content table th,
.entry-content table td,
.page-section__content table th,
.page-section__content table td,
.page-standard__content table th,
.page-standard__content table td,
.page-helps__content table th,
.page-helps__content table td,
.page-location__content table th,
.page-location__content table td,
.page-service__content table th,
.page-service__content table td,
.page-vehicle__content table th,
.page-vehicle__content table td,
.page-layout__main table th,
.page-layout__main table td,
.site-main table th,
.site-main table td {
	padding: var(--spacing-sm);
	border: 1px solid var(--color-border);
	text-align: left;
}

.entry-content table th,
.page-section__content table th,
.page-standard__content table th,
.page-helps__content table th,
.page-location__content table th,
.page-service__content table th,
.page-vehicle__content table th,
.page-layout__main table th,
.site-main table th {
	background-color: var(--color-primary);
	color: var(--color-text-main);
	font-weight: var(--font-weight-semibold);
	text-align: left;
}

.entry-content table td,
.page-section__content table td,
.page-standard__content table td,
.page-helps__content table td,
.page-location__content table td,
.page-service__content table td,
.page-vehicle__content table td,
.page-layout__main table td,
.site-main table td {
	background-color: var(--color-bg-card);
	color: var(--color-text-muted);
}

/* Alternating row colors for better readability */
.entry-content table tbody tr:nth-child(even) td,
.page-section__content table tbody tr:nth-child(even) td,
.page-standard__content table tbody tr:nth-child(even) td,
.page-helps__content table tbody tr:nth-child(even) td,
.page-location__content table tbody tr:nth-child(even) td,
.page-service__content table tbody tr:nth-child(even) td,
.page-vehicle__content table tbody tr:nth-child(even) td,
.page-layout__main table tbody tr:nth-child(even) td,
.site-main table tbody tr:nth-child(even) td {
	background-color: var(--color-bg-alt);
}

/* Hover effect on rows */
.entry-content table tbody tr:hover td,
.page-section__content table tbody tr:hover td,
.page-standard__content table tbody tr:hover td,
.page-helps__content table tbody tr:hover td,
.page-location__content table tbody tr:hover td,
.page-service__content table tbody tr:hover td,
.page-vehicle__content table tbody tr:hover td,
.page-layout__main table tbody tr:hover td,
.site-main table tbody tr:hover td {
	background-color: rgba(39, 179, 191, 0.1);
}

/* Table links */
.entry-content table a,
.page-section__content table a,
.page-standard__content table a,
.page-helps__content table a,
.page-location__content table a,
.page-service__content table a,
.page-vehicle__content table a,
.page-layout__main table a,
.site-main table a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.entry-content table a:hover,
.entry-content table a:focus,
.page-section__content table a:hover,
.page-section__content table a:focus,
.page-standard__content table a:hover,
.page-standard__content table a:focus,
.page-helps__content table a:hover,
.page-helps__content table a:focus,
.page-location__content table a:hover,
.page-location__content table a:focus,
.page-service__content table a:hover,
.page-service__content table a:focus,
.page-vehicle__content table a:hover,
.page-vehicle__content table a:focus,
.page-layout__main table a:hover,
.page-layout__main table a:focus,
.site-main table a:hover,
.site-main table a:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Responsive tables */
@media (max-width: 768px) {
	/* Make tables visible and scrollable on mobile */
	.entry-content table,
	.page-section__content table,
	.page-standard__content table,
	.page-helps__content table,
	.page-location__content table,
	.page-service__content table,
	.page-vehicle__content table,
	.page-layout__main table,
	.site-main table,
	.single-post__content table {
		display: table !important;
		width: 100%;
		font-size: 0.9rem;
		table-layout: auto;
		min-width: 100%;
		max-width: 100%;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Wrap tables in scrollable container - use parent wrapper */
	.entry-content,
	.page-section__content,
	.page-standard__content,
	.page-helps__content,
	.page-location__content,
	.page-service__content,
	.page-vehicle__content,
	.page-layout__main,
	.site-main,
	.single-post__content {
		position: relative;
	}
	
	/* Direct child tables get scrollable wrapper effect */
	.entry-content > table,
	.page-section__content > table,
	.page-standard__content > table,
	.page-helps__content > table,
	.page-location__content > table,
	.page-service__content > table,
	.page-vehicle__content > table,
	.page-layout__main > table,
	.site-main > table,
	.single-post__content > table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		max-width: 100%;
	}
	
	.entry-content > table thead,
	.entry-content > table tbody,
	.entry-content > table tfoot,
	.page-section__content > table thead,
	.page-section__content > table tbody,
	.page-section__content > table tfoot,
	.page-standard__content > table thead,
	.page-standard__content > table tbody,
	.page-standard__content > table tfoot,
	.page-helps__content > table thead,
	.page-helps__content > table tbody,
	.page-helps__content > table tfoot,
	.page-location__content > table thead,
	.page-location__content > table tbody,
	.page-location__content > table tfoot,
	.page-service__content > table thead,
	.page-service__content > table tbody,
	.page-service__content > table tfoot,
	.page-vehicle__content > table thead,
	.page-vehicle__content > table tbody,
	.page-vehicle__content > table tfoot,
	.page-layout__main > table thead,
	.page-layout__main > table tbody,
	.page-layout__main > table tfoot,
	.site-main > table thead,
	.site-main > table tbody,
	.site-main > table tfoot,
	.single-post__content > table thead,
	.single-post__content > table tbody,
	.single-post__content > table tfoot {
		display: table;
		width: 100%;
		table-layout: auto;
	}
	
	/* Table cells */
	.entry-content table th,
	.entry-content table td,
	.page-section__content table th,
	.page-section__content table td,
	.page-standard__content table th,
	.page-standard__content table td,
	.page-helps__content table th,
	.page-helps__content table td,
	.page-location__content table th,
	.page-location__content table td,
	.page-service__content table th,
	.page-service__content table td,
	.page-vehicle__content table th,
	.page-vehicle__content table td,
	.page-layout__main table th,
	.page-layout__main table td,
	.site-main table th,
	.site-main table td,
	.single-post__content table th,
	.single-post__content table td {
		padding: 0.5rem;
		font-size: 0.85rem;
		min-width: 80px;
	}
	
	/* Allow text wrapping in cells */
	.entry-content table td,
	.page-section__content table td,
	.page-standard__content table td,
	.page-helps__content table td,
	.page-location__content table td,
	.page-service__content table td,
	.page-vehicle__content table td,
	.page-layout__main table td,
	.site-main table td,
	.single-post__content table td {
		white-space: normal;
		word-break: break-word;
	}
	
	/* Keep headers from wrapping */
	.entry-content table th,
	.page-section__content table th,
	.page-standard__content table th,
	.page-helps__content table th,
	.page-location__content table th,
	.page-service__content table th,
	.page-vehicle__content table th,
	.page-layout__main table th,
	.site-main table th,
	.single-post__content table th {
		white-space: nowrap;
	}
}

/* Car Model single page */
.page-vehicle-model__breadcrumb {
	padding: var(--spacing-sm) 0;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	background-color: var(--color-bg-alt);
}

.page-vehicle-model__breadcrumb .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
}

.page-vehicle-model__breadcrumb a {
	color: var(--color-primary);
	text-decoration: none;
}

.page-vehicle-model__breadcrumb a:hover,
.page-vehicle-model__breadcrumb a:focus {
	text-decoration: underline;
}

.page-vehicle-model__breadcrumb-sep {
	margin: 0 0.25rem;
	user-select: none;
}

.page-vehicle-model__breadcrumb-current {
	color: var(--color-text-main);
	font-weight: var(--font-weight-medium);
}

/* Car Model: Key specs strip (after hero) – compact inline bar */
.vehicle-model__key-specs {
	background-color: var(--color-bg-alt);
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--color-border);
}

.vehicle-model__key-specs-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	row-gap: 0.375rem;
}

.vehicle-model__key-spec {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0;
	white-space: nowrap;
}

.vehicle-model__key-spec-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-primary);
}

.vehicle-model__key-spec-icon svg {
	width: 14px;
	height: 14px;
}

.vehicle-model__key-spec--rating .vehicle-model__key-spec-icon {
	color: #f59e0b;
}

.vehicle-model__key-spec-label {
	font-size: 0.7rem;
	color: var(--color-text-muted);
	font-weight: 500;
}

.vehicle-model__key-spec-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-main);
}

.vehicle-model__key-spec--rating .vehicle-model__key-spec-value {
	color: #f59e0b;
}

.vehicle-model__key-spec--price .vehicle-model__key-spec-value {
	color: var(--color-primary);
}

@media (max-width: 380px) {
	.vehicle-model__key-specs-inner {
		gap: 0.35rem 0.65rem;
	}

	.vehicle-model__key-spec-icon svg {
		width: 12px;
		height: 12px;
	}

	.vehicle-model__key-spec-label {
		font-size: 0.65rem;
	}

	.vehicle-model__key-spec-value {
		font-size: 0.7rem;
	}
}

@media (min-width: 600px) {
	.vehicle-model__key-specs-inner {
		justify-content: flex-start;
		gap: 0.5rem 1.25rem;
	}

	.vehicle-model__key-spec-icon svg {
		width: 16px;
		height: 16px;
	}

	.vehicle-model__key-spec-label {
		font-size: 0.72rem;
	}

	.vehicle-model__key-spec-value {
		font-size: 0.8rem;
	}
}

/* Car Model: Offers section (Schema-friendly) */
.page-vehicle-model__offers {
	background-color: var(--color-bg-alt);
	padding: var(--spacing-lg) 0;
	border-top: 1px solid var(--color-border);
}

.page-vehicle-model__offers-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.page-vehicle-model__offers-from {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-md);
}

.page-vehicle-model__offers-price {
	font-size: 1.75rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
}

.page-vehicle-model__offers-note {
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.page-vehicle-model__offers-valid {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-top: 0.25rem;
}

.page-vehicle-model__offers-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--spacing-sm);
}

.page-vehicle-model__offer-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.page-vehicle-model__offer-label {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-main);
}

.page-vehicle-model__offer-price {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

/* Car Model: Similar cars */
.vehicle-model__similar {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.vehicle-model__similar-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.vehicles-grid--similar .vehicles-grid__wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--spacing-md);
}

/* Car Model: Upgrade / Downgrade */
.vehicle-model__upgrade-downgrade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.vehicle-model__tier {
	padding: var(--spacing-md);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.vehicle-model__tier-title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-xs);
	color: var(--color-text-main);
}

.vehicle-model__tier-desc {
	font-size: 0.95rem;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-md);
}

.vehicle-model__tier .btn {
	margin-top: var(--spacing-xs);
}

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

/* Car Model: Services with this car */
.vehicle-model__services {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.vehicle-model__services-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.vehicle-model__services-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-md);
	display: grid;
	gap: var(--spacing-xs);
}

.vehicle-model__service-item a {
	color: var(--color-primary);
	text-decoration: none;
}

.vehicle-model__service-item a:hover,
.vehicle-model__service-item a:focus {
	text-decoration: underline;
}

/* Car Model: Reviews (same as blog post rating block) */
.vehicle-model__reviews {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.vehicle-model__reviews-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.vehicle-model__reviews-aggregate {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.vehicle-model__reviews-aggregate .rcnz-star-icon {
	color: var(--color-primary);
}

.page-vehicle-model__content .page-layout__main {
	/* Align with page-vehicle content area */
}

/* Car Model: Specifications */
.vehicle-model__specs {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.vehicle-model__specs-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.vehicle-model__specs-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-bg-card);
}

.vehicle-model__spec-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
	align-items: baseline;
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 1px solid var(--color-border);
	margin: 0;
}

.vehicle-model__spec-item:last-child {
	border-bottom: none;
}

.vehicle-model__spec-label {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
	margin: 0;
}

.vehicle-model__spec-value {
	margin: 0;
	color: var(--color-text-main);
}

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

/* Car Model: Trip ideas (main content) */
.vehicle-model__trip-ideas {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.vehicle-model__trip-ideas-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.vehicle-model__trip-ideas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.vehicle-model__trip-card {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.vehicle-model__trip-card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vehicle-model__trip-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.vehicle-model__trip-card-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

.vehicle-model__trip-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vehicle-model__trip-card-content {
	padding: var(--spacing-md);
}

.vehicle-model__trip-card-title {
	font-size: 1.1rem;
	margin: 0 0 var(--spacing-xs);
	color: var(--color-text-main);
}

.vehicle-model__trip-card-excerpt {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	margin: 0 0 var(--spacing-xs);
	line-height: 1.4;
}

.vehicle-model__trip-card-meta {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.vehicle-model__variants {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

.vehicle-model__variants-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.vehicle-model__variants-table-wrap {
	overflow-x: auto;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}

.vehicle-model__variants-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-bg-card);
}

.vehicle-model__variants-table th,
.vehicle-model__variants-table td {
	padding: var(--spacing-sm);
	border: 1px solid var(--color-border);
	text-align: left;
}

.vehicle-model__variants-table th {
	background-color: var(--color-primary);
	color: var(--color-text-main);
	font-weight: var(--font-weight-semibold);
}

.vehicle-model__variants-table td {
	background-color: var(--color-bg-card);
	color: var(--color-text-muted);
}

.vehicle-model__variants-table tbody tr.variant-row:nth-child(even) td {
	background-color: var(--color-bg-alt);
}

.vehicle-model__variants-table tbody tr.variant-row:hover td {
	background-color: rgba(39, 179, 191, 0.1);
}

@media (max-width: 768px) {
	.vehicle-model__variants-table thead {
		display: none;
	}

	.vehicle-model__variants-table tr.variant-row {
		display: block;
		margin-bottom: var(--spacing-md);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		overflow: hidden;
	}

	.vehicle-model__variants-table tr.variant-row td {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--spacing-sm);
		border: none;
		border-bottom: 1px solid var(--color-border);
	}

	.vehicle-model__variants-table tr.variant-row td:last-child {
		border-bottom: none;
	}

	.vehicle-model__variants-table tr.variant-row td::before {
		content: attr(data-label);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-main);
		flex-shrink: 0;
	}
}

/* Post Footer (Tags) */
.single-post__footer {
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

.single-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	align-items: center;
}

.single-post__tags-label {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-right: var(--spacing-xs);
}

.single-post__tags a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background-color: var(--color-bg-alt);
	color: var(--color-text-main);
	border-radius: var(--radius-full);
	font-size: 0.85rem;
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.single-post__tags a:hover,
.single-post__tags a:focus {
	background-color: var(--color-primary);
	color: #FFFFFF;
}

/* Comments Section */
.single-post__comments {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--color-border);
}

.single-post__comments-title {
	margin-bottom: var(--spacing-lg);
}

.single-post__recent-comments {
	margin-bottom: var(--spacing-lg);
}

.single-post__recent-comments-title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.single-post__comments-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	width: 100%;
}

.single-post__comments-list > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-post__comment-item {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.single-post__comment-wrapper {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
	width: 100%;
}

.single-post__comment-avatar {
	flex-shrink: 0;
}

.single-post__comment-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.single-post__comment-content {
	flex: 1;
}

.single-post__comment-author {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-main);
}

.single-post__comment-date {
	font-size: 0.85rem;
	font-weight: var(--font-weight-normal);
	color: var(--color-text-muted);
}

.single-post__comment-text {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.single-post__comment-text p {
	margin-bottom: var(--spacing-xs);
}

.single-post__comments-view-all {
	margin-top: var(--spacing-md);
	text-align: center;
}

/* Reply button styling */
.single-post__comment-reply {
	margin-top: var(--spacing-xs);
}

.single-post__comment-reply .comment-reply-link {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: 0.8rem;
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.single-post__comment-reply .comment-reply-link:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	text-decoration: none;
}

/* Threaded comments - children container */
.single-post__comments-list .children {
	margin-top: var(--spacing-md);
	margin-left: 40px;
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	width: calc(100% - 40px);
}

.single-post__comments-list .children > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Threaded comment indentation - additional levels */
.single-post__comments-list .children .children {
	margin-left: 30px;
	width: calc(100% - 30px);
}

/* Ensure proper spacing for nested comments */
.single-post__comments-list .children .single-post__comment-item {
	margin-top: 0;
	width: 100%;
}

/* Mobile: Ensure comments stay nested vertically in single column */
@media (max-width: 768px) {
	.single-post__comments-list {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md);
	}
	
	.single-post__comments-list .children {
		margin-left: 20px;
		width: calc(100% - 20px);
	}
	
	.single-post__comments-list .children .children {
		margin-left: 15px;
		width: calc(100% - 15px);
	}
	
	/* Stack avatar above content - single column layout per comment */
	.single-post__comment-wrapper {
		flex-direction: column;
		padding: var(--spacing-xs);
		gap: var(--spacing-xs);
	}
	
	.single-post__comment-avatar img {
		width: 32px;
		height: 32px;
	}
	
	.single-post__comment-content {
		flex: 1;
		min-width: 0;
	}
	
	.single-post__comment-author {
		flex-wrap: wrap;
		gap: 0.25rem;
	}
	
	.single-post__comment-date {
		font-size: 0.75rem;
	}
	
	.single-post__comment-text {
		font-size: 0.9rem;
	}
	
	.single-post__comment-reply .comment-reply-link {
		padding: 0.2rem 0.5rem;
		font-size: 0.75rem;
	}
}

/* Sidebar - Most Popular */
.single-post__sidebar {
	width: 100%;
}

@media (min-width: 1024px) {
	.single-post__sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--spacing-md));
		align-self: start;
		max-height: calc(100vh - var(--header-height) - var(--spacing-md));
		overflow-y: auto;
	}
}

.single-post__sidebar-widget {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
}

.single-post__sidebar-title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.single-post__popular-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.single-post__popular-item {
	display: flex;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

.single-post__popular-item:hover {
	background-color: var(--color-bg-alt);
}

.single-post__popular-image {
	flex-shrink: 0;
	width: 80px;
	height: 60px;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.single-post__popular-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-post__popular-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.single-post__popular-title {
	font-size: 0.9rem;
	font-weight: var(--font-weight-medium);
	margin: 0;
	line-height: 1.4;
}

.single-post__popular-title a {
	color: var(--color-text-main);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.single-post__popular-title a:hover,
.single-post__popular-title a:focus {
	color: var(--color-primary);
}

.single-post__popular-meta {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

/* Accordion Icon Fix */
.accordion-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	position: relative;
	flex-shrink: 0;
}

.accordion-icon::before {
	content: "⌄";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.2rem;
	transition: transform var(--transition-base);
}

.accordion-item.active .accordion-icon::before {
	transform: translate(-50%, -50%) rotate(180deg);
}

/* Responsive: Single Post */
@media (max-width: 768px) {
	.single-post__meta-top {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.5rem;
		overflow: hidden;
		width: 100%;
		max-width: 100%;
	}
	
	.single-post__meta-item {
		font-size: 0.8rem;
		white-space: nowrap;
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
	}
	
	/* Prioritize showing: author, date, reading time, views, categories (in that order) */
	.single-post__meta-item--author {
		order: 1;
		flex-shrink: 0;
	}
	
	.single-post__meta-item--date {
		order: 2;
		flex-shrink: 1;
	}
	
	.single-post__meta-item--reading-time {
		order: 3;
		flex-shrink: 1;
	}
	
	.single-post__meta-item--views {
		order: 4;
		flex-shrink: 2;
	}
	
	.single-post__meta-item--rating {
		order: 5;
		flex-shrink: 1;
	}
	
	.single-post__meta-item--categories {
		order: 6;
		display: none; /* Hide categories on mobile to save space */
	}
	
	/* Hide items that don't fit - progressive enhancement */
	/* On very small screens, hide views */
	@media (max-width: 480px) {
		.single-post__meta-item--views {
			display: none;
		}
		
		.single-post__meta-item--reading-time {
			flex-shrink: 1;
		}
	}
	
	/* Truncate text in meta items if needed */
	.single-post__meta-item span,
	.single-post__meta-item a,
	.single-post__meta-item time {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
		display: inline-block;
	}
	
	.single-post__meta-item svg {
		width: 14px;
		height: 14px;
		flex-shrink: 0;
	}
	
	.single-post__author-avatar {
		width: 24px;
		height: 24px;
		flex-shrink: 0;
	}
	
	.single-post__content {
		font-size: 1rem;
	}
	
	.single-post__sidebar {
		margin-top: var(--spacing-lg);
	}
	
	.single-post__popular-item {
		flex-direction: column;
	}
	
	.single-post__popular-image {
		width: 100%;
		height: 150px;
	}
}

/* =========================================================
   PAGE LAYOUT (Location, Service, Vehicle, Helps)
   ========================================================= */

.page-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
	.page-layout {
		grid-template-columns: 1fr 320px;
		gap: var(--spacing-xl);
		align-items: start;
	}
}

.page-layout__main {
	width: 100%;
}

.page-layout__sidebar {
	width: 100%;
}

@media (min-width: 1024px) {
	.page-layout__sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--spacing-md));
		align-self: start;
		max-height: calc(100vh - var(--header-height) - var(--spacing-md));
		overflow-y: auto;
	}
}

/* Page Sidebar Widgets */
.page-sidebar {
	width: 100%;
}

.page-sidebar__widget {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.page-sidebar__widget:last-child {
	margin-bottom: 0;
}

.page-sidebar__title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--color-border);
}

.page-sidebar__link {
	display: inline-block;
	margin-top: var(--spacing-md);
	color: var(--color-primary);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: var(--font-weight-medium);
	transition: color var(--transition-fast);
}

.page-sidebar__link:hover,
.page-sidebar__link:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.page-sidebar__popular-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.page-sidebar__popular-item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

.page-sidebar__popular-item:hover {
	background-color: var(--color-bg-alt);
}

.page-sidebar__popular-image {
	flex-shrink: 0;
	width: 80px;
	height: 60px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	display: block;
	line-height: 0;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

.page-sidebar__popular-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

.page-sidebar__popular-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.page-sidebar__popular-title {
	font-size: 0.9rem;
	font-weight: var(--font-weight-medium);
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4;
	display: block;
}

.page-sidebar__popular-title a {
	color: var(--color-text-main);
	text-decoration: none;
	transition: color var(--transition-fast);
	display: block;
	margin: 0;
	padding: 0;
}

.page-sidebar__popular-title a:hover,
.page-sidebar__popular-title a:focus {
	color: var(--color-primary);
}

.page-sidebar__popular-meta {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

/* Help Stages in Sidebar */
.help-stages__flow--sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.help-stages__flow--sidebar .help-stage {
	margin-bottom: 0;
}

.help-stages__flow--sidebar .help-stage__icon {
	width: 40px;
	height: 40px;
}

.help-stages__flow--sidebar .help-stage__title {
	font-size: 1rem;
	margin-top: var(--spacing-xs);
}

.help-stages__flow--sidebar .help-stage__description {
	display: none; /* Hide detailed description in sidebar */
}

/* Widescreen-only sidebar (for trip-ideas) */
.page-layout__sidebar--widescreen-only {
	display: none;
}

@media (min-width: 1024px) {
	.page-layout__sidebar--widescreen-only {
		display: block;
	}
}

/* Dual Sidebar Layout (for helps page) */
.page-helps__dual-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
	.page-helps__dual-sidebar {
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-xl);
	}
}

.page-helps__sidebar-left,
.page-helps__sidebar-right {
	width: 100%;
}

@media (min-width: 1024px) {
	.page-helps__sidebar-left,
	.page-helps__sidebar-right {
		position: sticky;
		top: calc(var(--header-height) + var(--spacing-md));
		align-self: start;
		max-height: calc(100vh - var(--header-height) - var(--spacing-md));
		overflow-y: auto;
	}
}

/* Responsive: Page Layout */
@media (max-width: 1023px) {
	.page-layout__sidebar {
		margin-top: var(--spacing-lg);
	}
	
	.page-sidebar__popular-item {
		flex-direction: column;
	}
	
	.page-sidebar__popular-image {
		width: 100%;
		height: auto;
	}
	
	.page-helps__sidebar-left,
	.page-helps__sidebar-right {
		margin-top: var(--spacing-lg);
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

/* =========================================================
   COMMENTS SECTION
   ========================================================= */

.comments-area {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--color-border);
}

.comments-title {
	font-size: 1.75rem;
	margin-bottom: var(--spacing-lg);
	color: var(--color-text-main);
}

.comments-title span {
	color: var(--color-primary);
}

/* Comment List */
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-lg);
}

.comment-list .comment,
.comment-list .pingback {
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid var(--color-border);
}

.comment-list .comment:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.comment-body {
	display: flex;
	gap: var(--spacing-md);
}

.comment-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
}

.comment-meta {
	margin-bottom: var(--spacing-sm);
}

.comment-author {
	display: flex;
	gap: var(--spacing-sm);
	align-items: flex-start;
}

.comment-author-info {
	flex: 1;
}

.comment-author .fn {
	font-style: normal;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-main);
	display: block;
	margin-bottom: 0.25rem;
}

.comment-author .fn a {
	color: var(--color-text-main);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.comment-author .fn a:hover,
.comment-author .fn a:focus {
	color: var(--color-primary);
}

.comment-date {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.comment-date a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.comment-date a:hover,
.comment-date a:focus {
	color: var(--color-primary);
}

.comment-content {
	color: var(--color-text-muted);
	line-height: 1.8;
	margin-top: var(--spacing-sm);
}

.comment-content p {
	margin-bottom: var(--spacing-sm);
}

.comment-content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.comment-content a:hover,
.comment-content a:focus {
	color: var(--color-primary-hover);
}

.comment-awaiting-moderation {
	display: block;
	color: var(--color-primary);
	font-style: italic;
	font-size: 0.9rem;
	margin-bottom: var(--spacing-sm);
	padding: var(--spacing-xs) var(--spacing-sm);
	background-color: rgba(39, 179, 191, 0.1);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-sm);
}

/* Comment Reply */
.reply {
	margin-top: var(--spacing-sm);
}

.reply a {
	display: inline-block;
	padding: 0.5rem 1rem;
	background-color: var(--color-bg-alt);
	color: var(--color-text-main);
	border-radius: var(--radius-sm);
	font-size: 0.85rem;
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.reply a:hover,
.reply a:focus {
	background-color: var(--color-primary);
	color: #FFFFFF;
}

/* Nested Comments */
.comment-list .children {
	list-style: none;
	margin: var(--spacing-md) 0 0 var(--spacing-lg);
	padding-left: var(--spacing-md);
	border-left: 2px solid var(--color-border);
}

.comment-list .children .comment {
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-md);
}

/* Comment Navigation */
.comment-navigation {
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-md) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

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

.nav-previous a,
.nav-next a {
	color: var(--color-text-main);
	text-decoration: none;
	padding: 0.5rem 1rem;
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-previous a:hover,
.nav-previous a:focus,
.nav-next a:hover,
.nav-next a:focus {
	background-color: var(--color-primary);
	color: #FFFFFF;
}

/* Comment Form */
.comment-form {
	margin-top: var(--spacing-xl);
}

.comment-form-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
}

.comment-form-comment label {
	display: block;
	margin-bottom: var(--spacing-xs);
	color: var(--color-text-main);
	font-weight: var(--font-weight-medium);
}

.comment-form-comment textarea {
	width: 100%;
	padding: var(--spacing-sm);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-main);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
	resize: vertical;
	transition: border-color var(--transition-fast);
}

.comment-form-comment textarea:focus {
	outline: none;
	border-color: var(--color-primary);
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
	margin-bottom: var(--spacing-md);
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-comment label {
	display: block;
	margin-bottom: var(--spacing-xs);
	color: var(--color-text-main);
	font-weight: var(--font-weight-medium);
	font-size: 0.9rem;
}

.comment-form-author label .required,
.comment-form-email label .required,
.comment-form-comment label .required {
	color: var(--color-primary);
	margin-left: 0.25rem;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
	width: 100%;
	padding: 0.75rem;
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-main);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color var(--transition-fast);
}

.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
	outline: none;
	border-color: var(--color-primary);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-md);
}

.comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.comment-form-cookies-consent label {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	cursor: pointer;
	line-height: 1.5;
}

.comment-form-cookies-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--color-primary);
}

.form-submit {
	margin-top: var(--spacing-md);
}

.form-submit input[type="submit"] {
	padding: 0.75rem 2rem;
	background-color: var(--color-primary);
	color: #FFFFFF;
	border: none;
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-semibold);
	font-size: 1rem;
	cursor: pointer;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.form-submit input[type="submit"]:hover,
.form-submit input[type="submit"]:focus {
	background-color: var(--color-primary-hover);
	transform: translateY(-1px);
}

.no-comments {
	color: var(--color-text-muted);
	font-style: italic;
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-md);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
	text-align: center;
}

/* Responsive: Comments */
@media (max-width: 768px) {
	/* Comment form: ensure all fields stack in single column */
	.comment-form .comment-form-author,
	.comment-form .comment-form-email,
	.comment-form .comment-form-url {
		display: block;
		width: 100%;
	}
	
	.comment-body {
		flex-direction: column;
	}
	
	.comment-avatar {
		width: 40px;
		height: 40px;
	}
	
	.comment-list .children {
		margin-left: var(--spacing-sm);
		padding-left: var(--spacing-sm);
	}
	
	.nav-links {
		flex-direction: column;
		align-items: stretch;
	}
	
	.nav-previous,
	.nav-next {
		width: 100%;
	}
	
	.nav-previous a,
	.nav-next a {
		display: block;
		text-align: center;
	}
}

/* =========================================================
   LEGAL PAGE TEMPLATE
   ========================================================= */

.page-legal {
	padding-top: calc(var(--header-height) + var(--spacing-lg));
	background-color: var(--color-bg-main);
	min-height: calc(100vh - var(--header-height));
}

.page-legal__header {
	padding: var(--spacing-xl) 0 var(--spacing-lg);
	background-color: var(--color-bg-main);
	border-bottom: 1px solid var(--color-border);
}

.page-legal__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--spacing-sm);
	color: var(--color-text-main);
	text-align: center;
}

.page-legal__subtitle {
	font-size: 1.1rem;
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--spacing-sm);
}

.page-legal__content {
	padding: var(--spacing-xl) 0;
	background-color: var(--color-bg-main);
}

.page-legal__wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.page-legal__article {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-xl);
}

.page-legal__text {
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 1.05rem;
}

.page-legal__text h2,
.page-legal__text h3,
.page-legal__text h4 {
	color: var(--color-text-main);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
	font-weight: var(--font-weight-semibold);
}

.page-legal__text h2 {
	font-size: 1.75rem;
	border-bottom: 2px solid var(--color-border);
	padding-bottom: var(--spacing-xs);
	margin-top: var(--spacing-xl);
}

.page-legal__text h3 {
	font-size: 1.5rem;
	margin-top: var(--spacing-lg);
}

.page-legal__text h4 {
	font-size: 1.25rem;
}

.page-legal__text p {
	margin-bottom: var(--spacing-md);
}

.page-legal__text a {
	color: var(--color-primary);
	text-decoration: underline;
}

.page-legal__text a:hover,
.page-legal__text a:focus {
	color: var(--color-primary-hover);
}

.page-legal__text strong {
	color: var(--color-text-main);
	font-weight: var(--font-weight-semibold);
}

.page-legal__text blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--spacing-md);
	margin: var(--spacing-md) 0;
	color: var(--color-text-muted);
	font-style: italic;
}

.page-legal__text table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--spacing-md) 0;
}

.page-legal__text table th,
.page-legal__text table td {
	padding: var(--spacing-sm);
	border: 1px solid var(--color-border);
	text-align: left;
}

.page-legal__text table th {
	background-color: var(--color-bg-alt);
	color: var(--color-text-main);
	font-weight: var(--font-weight-semibold);
}

.page-legal__text table td {
	color: var(--color-text-muted);
}

.page-legal__footer {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

.page-legal__last-updated {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	text-align: center;
	font-style: italic;
}

/* Responsive: Legal Page */
@media (max-width: 768px) {
	.page-legal {
		padding-top: calc(var(--header-height) + var(--spacing-md));
	}
	
	.page-legal__header {
		padding: var(--spacing-lg) 0 var(--spacing-md);
	}
	
	.page-legal__article {
		padding: var(--spacing-md);
		border-radius: var(--radius-md);
	}
	
	.page-legal__text {
		font-size: 1rem;
	}
	
	.page-legal__text h2 {
		font-size: 1.5rem;
	}
	
	.page-legal__text h3 {
		font-size: 1.25rem;
	}
	
	.page-legal__text h4 {
		font-size: 1.1rem;
	}
	
	.page-legal__text table {
		font-size: 0.9rem;
	}
	
	.page-legal__text table th,
	.page-legal__text table td {
		padding: var(--spacing-xs);
	}
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */

.page-login {
	padding-top: calc(var(--header-height) + var(--spacing-md));
	background-color: var(--color-bg-main);
	min-height: calc(100vh - var(--header-height));
}

.page-login__header {
	padding: var(--spacing-md) 0 var(--spacing-sm);
	background-color: var(--color-bg-main);
	border-bottom: 1px solid var(--color-border);
}

.page-login__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--spacing-sm);
	color: var(--color-text-main);
	text-align: center;
}

.page-login__subtitle {
	font-size: 1.1rem;
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--spacing-sm);
}

.page-login__content {
	padding: var(--spacing-md) 0;
	background-color: var(--color-bg-main);
}

.page-login__wrapper {
	max-width: 480px;
	margin: 0 auto;
}

.page-login__form-wrapper {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
}

.page-login__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.page-login__form .form-group {
	margin-bottom: 0;
}

.page-login__form .form-group label {
	color: var(--color-text-main);
	font-size: 0.9rem;
	font-weight: var(--font-weight-medium);
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: var(--spacing-xs);
}

.page-login__form .form-control {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	color: var(--color-text-main);
	padding: 0.875rem 1rem;
	font-size: 1rem;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.page-login__form .form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(39, 179, 191, 0.1);
}

.page-login__form .form-control::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}

.form-group--checkbox {
	flex-direction: row;
	align-items: center;
}

.form-checkbox {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	cursor: pointer;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.form-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--color-primary);
}

.form-checkbox span {
	user-select: none;
}

.form-group--submit {
	margin-top: var(--spacing-sm);
}

.btn--full {
	width: 100%;
	justify-content: center;
	padding: 0.875rem 2rem;
	font-size: 1rem;
}

.page-login__links {
	margin-top: var(--spacing-md);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.page-login__link {
	color: var(--color-primary);
	font-size: 0.9rem;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.page-login__link:hover,
.page-login__link:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.page-login__links-separator {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin: 0 var(--spacing-xs);
}

.page-login__divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: var(--spacing-md) 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.page-login__divider::before,
.page-login__divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid var(--color-border);
}

.page-login__divider span {
	padding: 0 var(--spacing-sm);
}

.page-login__google-signin {
	margin-top: var(--spacing-sm);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Google Sign-In Button Styles */
.page-login__google-signin-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
}

/* Google button container and iframe */
.page-login__google-signin-wrapper #google-signin-button {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 50px;
}

.page-login__google-signin-wrapper .S9gUrf-YoZ4jf {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 auto !important;
}

.page-login__google-signin-wrapper .S9gUrf-YoZ4jf > div {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.page-login__google-signin-wrapper iframe,
.page-login__google-signin-wrapper .L5Fo6c-PQbLGe {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	display: block !important;
}

/* One Tap prompt styling - center only on mobile/small screens */
body > div[data-credential-picker-container],
body > div[id*="credential_picker"],
body > div[id*="gsi_"]:not(.page-login__google-signin-wrapper *) {
	z-index: 1000001 !important;
}

@media (max-width: 768px) {
	body > div[data-credential-picker-container],
	body > div[id*="credential_picker"],
	body > div[id*="gsi_"]:not(.page-login__google-signin-wrapper *) {
		left: 50% !important;
		transform: translateX(-50%) !important;
		right: auto !important;
		margin-left: 0 !important;
	}
}

/* Google One Tap prompt container - center horizontally on mobile */
div[data-credential-picker-container],
div[id*="credential_picker_container"] {
	position: fixed !important;
	z-index: 1000001 !important;
}

@media (max-width: 768px) {
	div[data-credential-picker-container],
	div[id*="credential_picker_container"] {
		left: 50% !important;
		transform: translateX(-50%) !important;
		margin-left: 0 !important;
	}
}

/* Ensure One Tap iframe is centered */
div[data-credential-picker-container] iframe,
div[id*="credential_picker"] iframe {
	margin: 0 auto !important;
	display: block !important;
}

.page-login__google-signin-wrapper button,
.page-login__google-signin-wrapper .gsi-button,
.page-login__google-signin-wrapper #gsi-button,
.page-login__google-signin-wrapper [id*="google"] {
	width: 100% !important;
	max-width: 100% !important;
}

/* Site Kit Google Sign-In specific styles */
.page-login__google-signin-wrapper .googlesitekit-login__button,
.page-login__google-signin-wrapper .googlesitekit-sign-in-button {
	width: 100% !important;
}

/* Placeholder for Google Sign-In if empty */
.page-login__google-placeholder {
	width: 100%;
	text-align: center;
}

/* Login Messages */
.page-login__message {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
	font-size: 0.9rem;
}

.page-login__message--error {
	background-color: rgba(220, 53, 69, 0.1);
	border: 1px solid rgba(220, 53, 69, 0.3);
	color: #f8d7da;
}

.page-login__message--success {
	background-color: rgba(40, 167, 69, 0.1);
	border: 1px solid rgba(40, 167, 69, 0.3);
	color: #d4edda;
}

.page-login__message--info {
	background-color: rgba(39, 179, 191, 0.1);
	border: 1px solid rgba(39, 179, 191, 0.3);
	color: var(--color-primary);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-xs);
}

.page-login__message-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	width: 100%;
}

.page-login__register-actions {
	display: flex;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.page-login__message-icon {
	flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.page-login {
		padding-top: calc(var(--header-height) + var(--spacing-sm));
	}
	
	.page-login__header {
		padding: var(--spacing-sm) 0;
	}
	
	.page-login__form-wrapper {
		padding: var(--spacing-sm);
		border-radius: var(--radius-md);
	}
	
	.page-login__content {
		padding: var(--spacing-sm) 0;
	}
}

/* =========================================================
   FORGOT PASSWORD PAGE
   ========================================================= */

.page-forgot-password {
	padding-top: calc(var(--header-height) + var(--spacing-md));
	background-color: var(--color-bg-main);
	min-height: calc(100vh - var(--header-height));
}

.page-forgot-password__header {
	padding: var(--spacing-md) 0 var(--spacing-sm);
	background-color: var(--color-bg-main);
	border-bottom: 1px solid var(--color-border);
}

.page-forgot-password__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--spacing-sm);
	color: var(--color-text-main);
	text-align: center;
}

.page-forgot-password__subtitle {
	font-size: 1.1rem;
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--spacing-sm);
}

.page-forgot-password__content {
	padding: var(--spacing-md) 0;
	background-color: var(--color-bg-main);
}

.page-forgot-password__wrapper {
	max-width: 480px;
	margin: 0 auto;
}

.page-forgot-password__form-wrapper {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
}

.page-forgot-password__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.page-forgot-password__form .form-group {
	margin-bottom: 0;
}

.page-forgot-password__form .form-group label {
	color: var(--color-text-main);
	font-size: 0.9rem;
	font-weight: var(--font-weight-medium);
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: var(--spacing-xs);
}

.page-forgot-password__form .form-control {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	color: var(--color-text-main);
	padding: 0.875rem 1rem;
	font-size: 1rem;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.page-forgot-password__form .form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(39, 179, 191, 0.1);
}

.page-forgot-password__form .form-control::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}

.form-group--submit {
	margin-top: var(--spacing-sm);
}

.page-forgot-password__links {
	margin-top: var(--spacing-md);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.page-forgot-password__link {
	color: var(--color-primary);
	font-size: 0.9rem;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.page-forgot-password__link:hover,
.page-forgot-password__link:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.page-forgot-password__links-separator {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin: 0 var(--spacing-xs);
}

/* Forgot Password Messages */
.page-forgot-password__message {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
	font-size: 0.9rem;
}

.page-forgot-password__message--error {
	background-color: rgba(220, 53, 69, 0.1);
	border: 1px solid rgba(220, 53, 69, 0.3);
	color: #f8d7da;
}

.page-forgot-password__message--success {
	background-color: rgba(40, 167, 69, 0.1);
	border: 1px solid rgba(40, 167, 69, 0.3);
	color: #d4edda;
}

.page-forgot-password__message-icon {
	flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.page-forgot-password {
		padding-top: calc(var(--header-height) + var(--spacing-sm));
	}
	
	.page-forgot-password__header {
		padding: var(--spacing-sm) 0;
	}
	
	.page-forgot-password__form-wrapper {
		padding: var(--spacing-sm);
		border-radius: var(--radius-md);
	}
	
	.page-forgot-password__content {
		padding: var(--spacing-sm) 0;
	}
}

/* =========================================================
   SIGN UP PAGE
   ========================================================= */

.page-sign-up {
	padding-top: calc(var(--header-height) + var(--spacing-md));
	background-color: var(--color-bg-main);
	min-height: calc(100vh - var(--header-height));
}

.page-sign-up__header {
	padding: var(--spacing-md) 0 var(--spacing-sm);
	background-color: var(--color-bg-main);
	border-bottom: 1px solid var(--color-border);
}

.page-sign-up__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--spacing-sm);
	color: var(--color-text-main);
	text-align: center;
}

.page-sign-up__subtitle {
	font-size: 1.1rem;
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--spacing-sm);
}

.page-sign-up__content {
	padding: var(--spacing-md) 0;
	background-color: var(--color-bg-main);
}

.page-sign-up__wrapper {
	max-width: 480px;
	margin: 0 auto;
}

.page-sign-up__form-wrapper {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
}

.page-sign-up__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.page-sign-up__form .form-group {
	margin-bottom: 0;
}

.page-sign-up__form .form-group label {
	color: var(--color-text-main);
	font-size: 0.9rem;
	font-weight: var(--font-weight-medium);
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: var(--spacing-xs);
}

.page-sign-up__form .form-control {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	color: var(--color-text-main);
	padding: 0.875rem 1rem;
	font-size: 1rem;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.page-sign-up__form .form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(39, 179, 191, 0.1);
}

.page-sign-up__form .form-control::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}

.form-help-text {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.page-sign-up__links {
	margin-top: var(--spacing-md);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.page-sign-up__link {
	color: var(--color-primary);
	font-size: 0.9rem;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.page-sign-up__link:hover,
.page-sign-up__link:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.page-sign-up__divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: var(--spacing-md) 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.page-sign-up__divider::before,
.page-sign-up__divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid var(--color-border);
}

.page-sign-up__divider span {
	padding: 0 var(--spacing-sm);
}

.page-sign-up__google-signin {
	margin-top: var(--spacing-sm);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Sign Up Messages */
.page-sign-up__message {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
	font-size: 0.9rem;
}

.page-sign-up__message--error {
	background-color: rgba(220, 53, 69, 0.1);
	border: 1px solid rgba(220, 53, 69, 0.3);
	color: #f8d7da;
}

.page-sign-up__message--success {
	background-color: rgba(40, 167, 69, 0.1);
	border: 1px solid rgba(40, 167, 69, 0.3);
	color: #d4edda;
}

.page-sign-up__message-icon {
	flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.page-sign-up {
		padding-top: calc(var(--header-height) + var(--spacing-sm));
	}
	
	.page-sign-up__header {
		padding: var(--spacing-sm) 0;
	}
	
	.page-sign-up__form-wrapper {
		padding: var(--spacing-sm);
		border-radius: var(--radius-md);
	}
	
	.page-sign-up__content {
		padding: var(--spacing-sm) 0;
	}
}

.section-padding {
    padding: var(--spacing-lg) 0;
}

/* =========================================================
   404 PAGE STYLES
   ========================================================= */

.page-404 {
    background-color: var(--color-bg-main);
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
}

.page-404__hero {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-bg-alt);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.page-404__hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.page-404__error-code {
    font-size: 8rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--color-primary), #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.page-404__title {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-main);
}

.page-404__subtitle {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.page-404__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.page-404__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    max-width: 900px;
    margin: 0 auto;
}

.page-404__search-box h3,
.page-404__links-box h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

.page-404__search-box p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

.page-404__links {
    list-style: none;
    padding: 0;
}

.page-404__links li {
    margin-bottom: var(--spacing-xs);
}

.page-404__links a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
}

.page-404__links a::before {
    content: '→';
    margin-right: 10px;
    color: var(--color-primary);
}

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

@media (max-width: 768px) {
    .page-404__error-code {
        font-size: 5rem;
    }
    
    .page-404__title {
        font-size: 1.75rem;
    }
    
    .page-404__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .page-404__actions .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .page-404__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

.hero__title-prefix {
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
}

/* =========================================================
   SEARCH PAGE STYLES
   ========================================================= */

.page-search {
    background-color: var(--color-bg-main);
    min-height: 80vh;
}

.page-search__hero {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.page-search__hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.page-search__title {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-main);
}

.search-query-text {
    color: var(--color-primary);
    font-style: italic;
}

.page-search__count {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
}

.page-search__form-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

.page-search__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.page-search__no-results {
    text-align: center;
    padding: var(--spacing-xl) 0;
    max-width: 600px;
    margin: 0 auto;
}

.page-search__no-results-icon {
    color: var(--color-border);
    margin-bottom: var(--spacing-md);
}

.page-search__no-results h3 {
    font-size: 1.75rem;
    margin-bottom: var(--spacing-sm);
}

.page-search__no-results p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.page-search__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.page-search__pagination {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
}

.page-search__pagination .nav-links {
    display: flex;
    gap: var(--spacing-xs);
}

.page-search__pagination .page-numbers {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-main);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.page-search__pagination a.page-numbers:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.page-search__pagination .page-numbers.current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

@media (max-width: 768px) {
    .page-search__title {
        font-size: 1.75rem;
    }
    
    .page-search__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .page-search__actions .btn {
        width: 100%;
    }
}

/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

.page-account {
	padding-top: calc(var(--header-height) + var(--spacing-md));
	background-color: var(--color-bg-main);
	min-height: calc(100vh - var(--header-height));
}

.page-account__header {
	padding: var(--spacing-md) 0 var(--spacing-sm);
	background-color: var(--color-bg-main);
	border-bottom: 1px solid var(--color-border);
}

.page-account__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--spacing-xs);
	color: var(--color-text-main);
	text-align: center;
}

.page-account__subtitle {
	font-size: 1.1rem;
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--spacing-xs);
}

.page-account__content {
	padding: var(--spacing-md) 0 var(--spacing-lg);
	background-color: var(--color-bg-main);
}

.page-account__wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-md);
}

.page-account__column {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.page-account__section {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
}

.page-account__section-title {
	font-size: 1.5rem;
	margin-bottom: var(--spacing-md);
	color: var(--color-text-main);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--color-border);
}

.page-account__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.page-account__form .form-group {
	margin-bottom: 0;
}

.page-account__form .form-label {
	color: var(--color-text-main);
	font-size: 0.9rem;
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--spacing-xs);
	display: block;
}

.page-account__form .form-control {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	color: var(--color-text-main);
	padding: 0.875rem 1rem;
	font-size: 1rem;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	width: 100%;
	font-family: inherit;
}

.page-account__form .form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(39, 179, 191, 0.1);
}

.page-account__form .form-control::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}

.page-account__form textarea.form-control {
	resize: vertical;
	min-height: 100px;
}

.form-help-text {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-xs);
	margin-top: calc(var(--spacing-xs) * -1);
}

.form-group--profile-picture {
	margin-bottom: var(--spacing-sm);
}

.profile-picture-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-sm);
}

.profile-picture-preview {
	width: 120px;
	height: 120px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 2px solid var(--color-border);
}

.profile-picture-upload {
	display: flex;
	align-items: center;
}

.profile-picture-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.profile-picture-upload label {
	cursor: pointer;
}

.form-group--submit {
	margin-top: var(--spacing-sm);
}

.page-account__message {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
	font-size: 0.9rem;
}

.page-account__message--success {
	background-color: rgba(39, 179, 191, 0.1);
	border: 1px solid rgba(39, 179, 191, 0.3);
	color: var(--color-primary);
}

.page-account__message--error {
	background-color: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #ef4444;
}

.page-account__message-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.page-account__comments-subsection {
	margin-bottom: var(--spacing-md);
}

.page-account__comments-subsection:last-child {
	margin-bottom: 0;
}

.page-account__comments-subtitle {
	font-size: 1rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-main);
	margin-bottom: var(--spacing-sm);
	padding-bottom: var(--spacing-xs);
	border-bottom: 1px solid var(--color-border);
}

.page-account__comments {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.page-account__comment-item {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.page-account__comment-item:hover,
.page-account__comment-item:focus {
	border-color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(39, 179, 191, 0.15);
	transform: translateY(-2px);
	text-decoration: none;
}

.page-account__comment-item--pending {
	border-left: 3px solid #f59e0b;
	opacity: 0.85;
}

.page-account__comment-item--pending:hover,
.page-account__comment-item--pending:focus {
	opacity: 1;
	border-left-color: #f59e0b;
}

.page-account__comment-post-title {
	font-size: 0.95rem;
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-xs);
	color: var(--color-primary);
	line-height: 1.4;
}

.page-account__comment-item:hover .page-account__comment-post-title,
.page-account__comment-item:focus .page-account__comment-post-title {
	color: var(--color-primary-hover);
}

.page-account__comment-content {
	color: var(--color-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.page-account__empty {
	padding: var(--spacing-md);
	text-align: center;
	color: var(--color-text-muted);
	font-style: italic;
}

/* 2-Column Layout for Wide Screens */
@media (min-width: 1024px) {
	.page-account__wrapper {
		grid-template-columns: 1.2fr 1fr;
		gap: var(--spacing-lg);
		align-items: start;
	}
	
	.page-account__column--left {
		position: sticky;
		top: calc(var(--header-height) + var(--spacing-md));
	}
	
	.page-account__section {
		padding: var(--spacing-lg);
	}
}

@media (max-width: 768px) {
	.page-account {
		padding-top: calc(var(--header-height) + var(--spacing-sm));
	}
	
	.page-account__header {
		padding: var(--spacing-sm) 0;
	}
	
	.page-account__content {
		padding: var(--spacing-sm) 0 var(--spacing-md);
	}
	
	.page-account__wrapper {
		gap: var(--spacing-sm);
	}
	
	.page-account__section {
		padding: var(--spacing-sm);
	}
	
	.page-account__section-title {
		font-size: 1.25rem;
	}
	
	.profile-picture-wrapper {
		align-items: center;
	}
}

/* =========================================================
   COMMENT FORM REGISTRATION MESSAGE
   ========================================================= */

.comment-form-register {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	margin-top: var(--spacing-md);
	text-align: center;
}

.comment-form-register__message {
	margin-bottom: var(--spacing-md);
}

.comment-form-register__message p {
	color: var(--color-text-main);
	font-size: 1rem;
	margin-bottom: 0;
}

.comment-form-register__actions {
	display: flex;
	gap: var(--spacing-sm);
	justify-content: center;
	flex-wrap: wrap;
}

.comment-form-register__actions .btn {
	min-width: 160px;
}

@media (max-width: 768px) {
	.comment-form-register {
		padding: var(--spacing-sm);
	}
	
	.comment-form-register__actions {
		flex-direction: column;
	}
	
	.comment-form-register__actions .btn {
		width: 100%;
	}
}