/**
 * Properties List Shortcode Styles - Grid View
 * HHB-48.2: Responsive CSS Grid layout for property cards
 * @package HolidayHomeBooking
 */

/* ==========================================================================
   CSS Custom Properties (Variables) - Reuse existing HHB variables
   ========================================================================== */

:root {
	/* Colors - Reusing existing HHB variables */
	--hhb-primary: #2563eb;
	--hhb-primary-hover: #1d4ed8;
	--hhb-text-primary: #1f2937;
	--hhb-text-secondary: #6b7280;
	--hhb-border: #e5e7eb;
	--hhb-border-dark: #d1d5db;
	--hhb-bg-white: #ffffff;
	--hhb-bg-light: #f9fafb;
	
	/* Spacing */
	--hhb-spacing-xs: 0.5rem;   /* 8px */
	--hhb-spacing-sm: 0.75rem;  /* 12px */
	--hhb-spacing-md: 1rem;     /* 16px */
	--hhb-spacing-lg: 1.5rem;   /* 24px */
	--hhb-spacing-xl: 2rem;     /* 32px */
	
	/* Border Radius */
	--hhb-radius-sm: 0.25rem;  /* 4px */
	--hhb-radius-md: 0.5rem;   /* 8px */
	--hhb-radius-lg: 0.75rem;  /* 12px */
	
	/* Shadows */
	--hhb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--hhb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--hhb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--hhb-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Grid View Layout - HHB-48.2
   ========================================================================== */

/* Grid Container */
.hhb-properties-list.hhb-view-grid {
	display: grid;
	gap: var(--hhb-spacing-lg); /* 24px gap between cards */
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Mobile: 1 column (default - mobile first) */
.hhb-properties-list.hhb-view-grid {
	grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
	.hhb-properties-list.hhb-view-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
	.hhb-properties-list.hhb-view-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Grid Card - HHB-48.5 Redesign
   Rich vertical card layout with gallery, features, map, and CTA
   ========================================================================== */

/* Grid Card Container */
.hhb-grid-card {
	display: flex;
	flex-direction: column;
	background: var(--hhb-bg-white);
	border: 1px solid #E5E7EB; /* Darker border for better contrast (matches list view) */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* More visible shadow (matches list view) */
	transition: box-shadow 0.2s ease;
}

.hhb-grid-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.1); /* Enhanced hover shadow (matches list view) */
	border-color: #3498db; /* Blue border on hover */
}

/* 1. Featured Image Wrapper */
.hhb-grid-card__image-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}

.hhb-grid-card__featured-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s ease;
}

.hhb-grid-card:hover .hhb-grid-card__featured-image {
	transform: scale(1.05);
}

.hhb-grid-card__no-image {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hhb-bg-light);
}

.hhb-grid-card__no-image p {
	margin: 0;
	color: var(--hhb-text-secondary);
	font-size: 0.875rem;
}

/* Price Badge */
.hhb-grid-card__price-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: #ffffff;
	color: #111827; /* Darker for better readability */
	padding: 6px 14px;
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 600; /* Bolder for better readability */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}

/* 2. Thumbnail Strip */
.hhb-grid-card__thumbnails-wrapper {
	position: relative;
	background: var(--hhb-bg-white);
}

.hhb-grid-card__thumbnails {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	padding: 8px;
	background: var(--hhb-bg-white);
}

.hhb-grid-card__thumb {
	position: relative;
	aspect-ratio: 3/2;
	border-radius: 4px;
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--hhb-bg-light);
	cursor: pointer;
	padding: 0;
	transition: opacity 0.2s ease, outline 0.2s ease;
	opacity: 0.6;
}

.hhb-grid-card__thumb:hover {
	opacity: 1;
}

.hhb-grid-card__thumb.active {
	outline: 2px solid #3b82f6;
	opacity: 1;
}

.hhb-grid-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* HHB-48.3.1.5: Carousel navigation controls thumbnail visibility via JavaScript */
/* Initial state: hide thumbnails 7+ (JavaScript will manage visibility during pagination) */
.hhb-grid-card__thumbnails > .hhb-grid-card__thumb:nth-child(n+7) {
	display: none;
}

/* HHB-48.3.1.5: Carousel navigation arrows for grid view */
.hhb-grid-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 0;
}

.hhb-grid-carousel-arrow:hover:not(:disabled) {
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-50%) scale(1.05);
}

.hhb-grid-carousel-arrow:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.hhb-grid-carousel-arrow .hhb-arrow {
	font-size: 20px;
	line-height: 1;
	color: #1e293b;
	font-weight: 300;
	display: block;
}

.hhb-grid-carousel-prev {
	left: 4px;
}

.hhb-grid-carousel-next {
	right: 4px;
}

/* 3. Content Area */
.hhb-grid-card__content {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Name */
.hhb-grid-card__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700; /* Bolder for better prominence (matches list view) */
	color: #111827; /* Darker for better contrast (matches list view) */
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tagline */
.hhb-grid-card__tagline {
	margin: 0;
	font-size: 0.75rem;
	color: #4b5563;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Location */
.hhb-grid-card__location {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	color: #6b7280;
	margin-top: 6px;
}

.hhb-grid-card__location svg {
	flex-shrink: 0;
}

/* Description */
.hhb-grid-card__description {
	margin: 0;
	font-size: 0.75rem;
	color: #4B5563; /* Darker for better readability (matches list view) */
	line-height: 1.6; /* Improved readability (matches list view) */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Features Grid */
.hhb-grid-card__features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 8px 0;
}

.hhb-grid-card__feature {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	color: #1F2937; /* Darker for better contrast (matches list view) */
	font-weight: 500; /* Medium weight for better readability (matches list view) */
}

.hhb-grid-card__feature svg {
	flex-shrink: 0;
	color: #2563eb;
}

/* Map */
.hhb-grid-card__map {
	min-height: 280px; /* Ensure sufficient height for map content */
	max-height: 420px; /* Match default map embed height */
	border-radius: 8px;
	overflow: hidden;
	background: #f3f4f6;
	margin-top: 8px;
}

/* Support for hhb-map-embed wrapper from hhb_render_property_map_embed() */
.hhb-grid-card__map .hhb-map-embed {
	width: 100%;
	height: 100%;
	min-height: 280px; /* Match parent min-height */
	margin: 0;
	border-radius: 0; /* Parent handles border-radius */
}

.hhb-grid-card__map .hhb-map-embed iframe,
.hhb-grid-card__map iframe {
	width: 100%;
	height: 100%;
	min-height: 280px; /* Ensure iframe has sufficient height */
	display: block;
}

.hhb-grid-card__map-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	color: #9ca3af;
}

/* CTA Button */
.hhb-grid-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 0;
	background: #2563eb;
	color: #ffffff;
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background 0.2s ease;
	margin-top: 8px;
}

.hhb-grid-card__cta:hover {
	background: #1d4ed8;
	color: #ffffff;
}

.hhb-grid-card__cta svg {
	flex-shrink: 0;
}

/* ==========================================================================
   No Properties Message
   ========================================================================== */

.hhb-properties-list.hhb-no-properties {
	padding: var(--hhb-spacing-xl);
	text-align: center;
	background: var(--hhb-bg-light);
	border: 1px solid var(--hhb-border);
	border-radius: var(--hhb-radius-md);
}

.hhb-properties-list.hhb-no-properties p {
	margin: 0;
	color: var(--hhb-text-secondary);
	font-size: 1rem;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus styles for keyboard navigation */
.hhb-property-card:focus {
	outline: 2px solid var(--hhb-primary);
	outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.hhb-property-card,
	.hhb-property-card-image img {
		transition: none;
	}
	
	.hhb-property-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.hhb-properties-list.hhb-view-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	
	.hhb-property-card {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #000;
	}
	
	.hhb-property-card:hover {
		box-shadow: none;
		transform: none;
	}
}

/* ==========================================================================
   List View Layout - HHB-48.3.1.1
   Horizontal card layout with Gallery | Property Details | Booking Widget | 2-Month Calendar
   VISUAL POLISH & RESPONSIVE FIXES
   ========================================================================== */

/* List View Container - High specificity to override theme styles */
.hhb-properties-list.hhb-view-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

/* ==========================================================================
   List Card - Horizontal Layout
   Main grid: [1fr 2fr] = Gallery 33% | Main content 67%
   HHB-48.3.1.1: Increased specificity, vibrant colors, better shadows
   ========================================================================== */

.hhb-properties-list .hhb-list-card {
	background: #FFFFFF !important; /* True white, not grey */
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important; /* More visible shadow */
	border: 1px solid #E5E7EB !important; /* Darker border for contrast */
	padding: 20px !important; /* Slightly more generous padding */
	display: grid !important;
	grid-template-columns: 1fr 2fr !important;
	gap: 20px !important;
	align-items: stretch !important; /* Equal heights for gallery and right section */
	transition: box-shadow 0.3s ease !important;
}

.hhb-properties-list .hhb-list-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.1) !important; /* Enhanced hover shadow */
}

/* Tablet: Stack vertically */
@media (max-width: 1023px) {
	.hhb-properties-list .hhb-list-card {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* ==========================================================================
   LEFT SECTION: Gallery (33%)
   HHB-48.3.1.1: Enhanced visual hierarchy and contrast
   ========================================================================== */

.hhb-properties-list .hhb-list-card__gallery {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important; /* Fill parent height */
}

/* Gallery Container */
.hhb-properties-list .hhb-list-gallery {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	height: 100% !important; /* Fill parent height */
}

/* Featured Image */
.hhb-properties-list .hhb-list-gallery__featured {
	aspect-ratio: 4/3 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #F3F4F6 !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important; /* Subtle shadow for depth */
	border: 1px solid #E5E7EB !important; /* Subtle border */
}

.hhb-properties-list .hhb-list-gallery__featured img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Thumbnail Grid */
.hhb-properties-list .hhb-list-gallery__thumbs-wrapper {
	position: relative !important;
	margin-top: 0 !important;
}

.hhb-properties-list .hhb-list-gallery__thumbs {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 8px !important;
	margin-top: 0 !important;
}

.hhb-properties-list .hhb-list-gallery__thumb {
	aspect-ratio: 3/2 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	opacity: 0.65 !important;
	transition: all 0.25s ease !important;
	border: 3px solid transparent !important; /* Thicker border for active state */
	background: none !important;
	padding: 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
}

.hhb-properties-list .hhb-list-gallery__thumb:hover {
	opacity: 0.9 !important;
	transform: scale(1.02) !important; /* Slight zoom on hover */
}

.hhb-properties-list .hhb-list-gallery__thumb.active {
	opacity: 1 !important;
	border-color: #2563EB !important; /* Vibrant blue */
	box-shadow: 0 0 0 1px #2563EB, 0 2px 4px rgba(37, 99, 235, 0.2) !important; /* Ring effect */
}

.hhb-properties-list .hhb-list-gallery__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* HHB-48.3.1.5: Carousel navigation arrows for list view */
.hhb-properties-list .hhb-list-carousel-arrow {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 10 !important;
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	padding: 0 !important;
}

.hhb-properties-list .hhb-list-carousel-arrow:hover:not(:disabled) {
	background: #fff !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	transform: translateY(-50%) scale(1.05) !important;
}

.hhb-properties-list .hhb-list-carousel-arrow:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

.hhb-properties-list .hhb-list-carousel-arrow .hhb-arrow {
	font-size: 24px !important;
	line-height: 1 !important;
	color: #1e293b !important;
	font-weight: 300 !important;
	display: block !important;
}

.hhb-properties-list .hhb-list-carousel-prev {
	left: -16px !important;
}

.hhb-properties-list .hhb-list-carousel-next {
	right: -16px !important;
}

.hhb-properties-list .hhb-list-gallery-no-image {
	aspect-ratio: 4/3 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #F3F4F6 !important;
	border-radius: 10px !important;
	color: #6B7280 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* ==========================================================================
   RIGHT SECTION: Three Columns (67%)
   Property Details | Booking Widget | 2-Month Calendar
   HHB-48.3.1.1: Responsive cohesion and proper scaling
   ========================================================================== */

.hhb-properties-list .hhb-list-card__main {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	min-width: 0 !important; /* Prevent overflow */
	align-items: stretch !important; /* Equal heights for all 3 columns */
	height: 100% !important; /* Fill parent height */
}

/* Larger desktop: Better spacing */
@media (min-width: 1400px) {
	.hhb-properties-list .hhb-list-card__main {
		gap: 24px !important;
	}
}

/* Tablet: 2 columns */
@media (max-width: 1200px) {
	.hhb-properties-list .hhb-list-card__main {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}
	
	.hhb-properties-list .hhb-list-card__calendar {
		grid-column: 1 / -1 !important;
	}
}

/* Mobile: 1 column */
@media (max-width: 767px) {
	.hhb-properties-list .hhb-list-card__main {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* ==========================================================================
   Column 1: Property Details
   HHB-48.3.1.1: Enhanced typography and visual hierarchy
   ========================================================================== */

.hhb-properties-list .hhb-list-card__details {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	height: 100% !important; /* Fill parent height */
}

/* Name - Make it bold and prominent */
.hhb-properties-list .hhb-list-card__name {
	font-size: 18px !important; /* Larger */
	font-weight: 600 !important; /* Bolder */
	line-height: 1.3 !important;
	margin: 0 0 2px 0 !important;
	color: #111827 !important; /* Darker for better contrast */
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important; /* Allow 2 lines */
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Tagline */
.hhb-properties-list .hhb-list-card__tagline {
	font-size: 13px !important;
	color: #6B7280 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 1 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Location */
.hhb-properties-list .hhb-list-card__location {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #6B7280 !important;
	font-size: 13px !important;
	margin-top: 2px !important;
}

.hhb-properties-list .hhb-list-card__location svg {
	flex-shrink: 0 !important;
	color: #9CA3AF !important;
}

/* Description */
.hhb-properties-list .hhb-list-card__description {
	font-size: 13px !important;
	color: #4B5563 !important; /* Darker for readability */
	line-height: 1.6 !important;
	margin: 8px 0 0 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 4 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Features */
.hhb-properties-list .hhb-list-card__features {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 10px !important;
}

.hhb-properties-list .hhb-list-card__feature {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: #1F2937 !important;
	font-weight: 500 !important; /* Medium weight */
}

.hhb-properties-list .hhb-list-card__feature svg {
	flex-shrink: 0 !important;
	color: #2563EB !important; /* Vibrant blue */
}

/* Map Section */
.hhb-properties-list .hhb-list-card__map-section {
	margin-top: 12px !important;
}

.hhb-properties-list .hhb-list-card__map-label {
	font-size: 13px !important;
	font-weight: 600 !important; /* Bolder */
	margin: 0 0 8px 0 !important;
	color: #111827 !important;
}

.hhb-properties-list .hhb-list-card__map {
	min-height: 280px !important; /* Ensure sufficient height for map content */
	max-height: 420px !important; /* Match default map embed height */
	border-radius: 8px !important;
	overflow: hidden !important;
	background: #F3F4F6 !important;
	border: 1px solid #E5E7EB !important;
}

/* Support for hhb-map-embed wrapper from hhb_render_property_map_embed() */
.hhb-properties-list .hhb-list-card__map .hhb-map-embed {
	width: 100% !important;
	height: 100% !important;
	min-height: 280px !important; /* Match parent min-height */
	margin: 0 !important;
	border-radius: 0 !important; /* Parent handles border-radius */
}

.hhb-properties-list .hhb-list-card__map .hhb-map-embed iframe,
.hhb-properties-list .hhb-list-card__map iframe {
	width: 100% !important;
	height: 100% !important;
	min-height: 280px !important; /* Ensure iframe has sufficient height */
	border: 0 !important;
	display: block !important;
}

.hhb-properties-list .hhb-list-card__map-placeholder {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
	font-size: 13px !important;
	color: #9CA3AF !important;
	font-weight: 500 !important;
}

/* ==========================================================================
   Column 2: Booking Widget (VISUAL ONLY - static inputs)
   HHB-48.3.1.1: Enhanced contrast, clearer borders, vibrant CTA
   ========================================================================== */

.hhb-properties-list .hhb-list-booking-widget {
	background: #F3F4F6 !important; /* Darker grey for better contrast */
	border-radius: 10px !important;
	padding: 16px !important; /* More padding */
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	border: 1px solid #E5E7EB !important; /* Subtle border */
	height: 100% !important; /* Fill parent height */
}

/* Price - Make it stand out */
.hhb-properties-list .hhb-list-booking-widget__price {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	padding-bottom: 12px !important;
	border-bottom: 2px solid #E5E7EB !important; /* Separator */
}

.hhb-properties-list .hhb-list-booking-widget__price-label {
	font-size: 12px !important;
	color: #6B7280 !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.hhb-properties-list .hhb-list-booking-widget__price-amount {
	font-size: 28px !important; /* Larger */
	font-weight: 700 !important; /* Bolder */
	color: #111827 !important; /* Darker */
	line-height: 1 !important;
}

.hhb-properties-list .hhb-list-booking-widget__price-unit {
	font-size: 14px !important;
	color: #6B7280 !important;
	font-weight: 500 !important;
}

/* Form Fields - Clearer borders */
.hhb-properties-list .hhb-list-booking-widget__field {
	border: 2px solid #D1D5DB !important; /* Thicker border */
	border-radius: 8px !important;
	padding: 10px 12px !important;
	background: #FFFFFF !important; /* True white */
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.hhb-properties-list .hhb-list-booking-widget__field:focus-within {
	border-color: #2563EB !important; /* Blue on focus */
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; /* Focus ring */
}

.hhb-properties-list .hhb-list-booking-widget__label {
	display: block !important;
	font-size: 12px !important;
	color: #4B5563 !important; /* Darker */
	margin-bottom: 4px !important;
	font-weight: 600 !important; /* Bolder */
}

.hhb-properties-list .hhb-list-booking-widget__input {
	width: 100% !important;
	font-size: 14px !important;
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	outline: none !important;
	font-family: inherit !important;
	color: #111827 !important; /* Darker text */
	font-weight: 500 !important;
}

/* CTA Button - Vibrant and bold */
.hhb-properties-list .hhb-list-booking-widget__cta {
	width: 100% !important;
	background: #2563EB !important; /* Vibrant blue */
	color: #FFFFFF !important;
	padding: 12px 16px !important;
	border-radius: 8px !important;
	text-align: center !important;
	font-size: 14px !important;
	font-weight: 600 !important; /* Bolder */
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	border: 0 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important; /* Button shadow */
	display: block !important;
}

.hhb-properties-list .hhb-list-booking-widget__cta:hover:not(:disabled) {
	background: #1D4ED8 !important; /* Darker blue on hover */
	box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3) !important; /* Enhanced hover shadow */
	transform: translateY(-1px) !important; /* Subtle lift */
}

.hhb-properties-list .hhb-list-booking-widget__cta:active:not(:disabled) {
	transform: translateY(0) !important;
}

/* Disabled button state - HHB-48.8 */
.hhb-properties-list .hhb-list-booking-widget__cta:disabled,
.hhb-properties-list .hhb-list-booking-widget__cta.hhb-list-btn-disabled {
	background: #9CA3AF !important; /* Grey */
	color: #E5E7EB !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
	opacity: 0.6 !important;
}

/* Enabled button state - HHB-48.8 */
.hhb-properties-list .hhb-list-booking-widget__cta.hhb-list-btn-enabled {
	background: #2563EB !important;
	cursor: pointer !important;
	opacity: 1 !important;
}

/* Status messages - HHB-48.8 */
.hhb-properties-list .hhb-list-booking-widget__status {
	padding: 8px 12px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	margin: 8px 0 !important;
}

.hhb-list-status-loading {
	color: #3B82F6 !important;
}

.hhb-list-status-error {
	color: #DC2626 !important;
}

.hhb-list-status-success {
	color: #059669 !important;
}

/* Price Breakdown - Better readability */
.hhb-properties-list .hhb-list-booking-widget__breakdown {
	padding-top: 12px !important;
	border-top: 2px solid #D1D5DB !important; /* Thicker separator */
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	font-size: 13px !important;
	margin-top: auto !important; /* Push to bottom */
}


.hhb-properties-list .hhb-list-booking-widget__breakdown-line {
	display: flex !important;
	justify-content: space-between !important;
	color: #4B5563 !important; /* Darker for readability */
	font-weight: 500 !important;
}

.hhb-properties-list .hhb-list-booking-widget__breakdown-total {
	display: flex !important;
	justify-content: space-between !important;
	font-weight: 700 !important; /* Bolder */
	color: #111827 !important; /* Very dark */
	padding-top: 8px !important;
	border-top: 2px solid #111827 !important; /* Dark separator */
	margin-top: 4px !important;
	font-size: 16px !important; /* Larger */
}

/* ==========================================================================
   Column 3: 2-Month Calendar
   HHB-48.3.1.1: Visible borders, bold today highlight, clear states
   ========================================================================== */

.hhb-properties-list .hhb-list-calendar {
	background: #FFFFFF !important; /* True white */
	border: 2px solid #D1D5DB !important; /* Thicker, visible border */
	border-radius: 10px !important;
	padding: 12px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	height: 100% !important; /* Fill parent height */
}

/* Header with navigation */
.hhb-properties-list .hhb-list-calendar__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 8px !important;
}

.hhb-properties-list .hhb-list-calendar__title {
	font-size: 12px !important;
	font-weight: 600 !important; /* Bolder */
	color: #111827 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.hhb-properties-list .hhb-list-calendar__nav {
	display: flex !important;
	gap: 4px !important;
}

.hhb-properties-list .hhb-list-calendar__nav-btn {
	padding: 4px !important;
	background: #F3F4F6 !important; /* Light grey background */
	border: 1px solid #D1D5DB !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #4B5563 !important;
	transition: all 0.2s ease !important;
}

.hhb-properties-list .hhb-list-calendar__nav-btn:hover {
	background: #E5E7EB !important;
	color: #111827 !important;
	border-color: #9CA3AF !important;
}

.hhb-properties-list .hhb-list-calendar__nav-btn svg {
	display: block !important;
}

/* Months container */
.hhb-properties-list .hhb-list-calendar__months {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	flex-grow: 1 !important; /* Expand to fill available space */
}

/* Single month */
.hhb-properties-list .hhb-list-calendar__month {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.hhb-properties-list .hhb-list-calendar__month-name {
	font-size: 11px !important;
	font-weight: 600 !important; /* Bolder */
	color: #111827 !important;
	margin-bottom: 4px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
}

/* Day headers */
.hhb-properties-list .hhb-list-calendar__day-headers {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 2px !important;
	margin-bottom: 4px !important;
}

.hhb-properties-list .hhb-list-calendar__day-header {
	text-align: center !important;
	font-size: 10px !important;
	color: #6B7280 !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
}

/* Days grid */
.hhb-properties-list .hhb-list-calendar__days {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 2px !important;
}

.hhb-properties-list .hhb-list-calendar__day {
	aspect-ratio: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 11px !important;
	border-radius: 6px !important;
	color: #374151 !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
}

.hhb-properties-list .hhb-list-calendar__day--empty {
	visibility: hidden !important;
}

/* Clickable days - add cursor pointer and hover state */
.hhb-properties-list .hhb-list-calendar__day--clickable {
	cursor: pointer !important;
}

.hhb-properties-list .hhb-list-calendar__day--clickable:hover {
	background: #F3F4F6 !important;
	color: #111827 !important;
}

.hhb-properties-list .hhb-list-calendar__day--today {
	background: #2563EB !important; /* Vibrant blue */
	color: #FFFFFF !important;
	font-weight: 700 !important; /* Bolder */
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3) !important;
}

/* Selected check-in date */
.hhb-properties-list .hhb-list-calendar__day--checkin {
	background: #10B981 !important; /* Green for check-in */
	color: #FFFFFF !important;
	font-weight: 700 !important;
	box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
}

/* Selected check-out date */
.hhb-properties-list .hhb-list-calendar__day--checkout {
	background: #EF4444 !important; /* Red for check-out */
	color: #FFFFFF !important;
	font-weight: 700 !important;
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

/* Dates in selected range */
.hhb-properties-list .hhb-list-calendar__day--in-range {
	background: #DBEAFE !important; /* Light blue for range */
	color: #1E40AF !important;
	font-weight: 600 !important;
}

/* Today overrides - keep today styling when selected */
.hhb-properties-list .hhb-list-calendar__day--today.hhb-list-calendar__day--checkin,
.hhb-properties-list .hhb-list-calendar__day--today.hhb-list-calendar__day--checkout {
	/* Keep the check-in/check-out colors even for today */
}

.hhb-properties-list .hhb-list-calendar__day--booked {
	background: #E5E7EB !important;
	color: #6B7280 !important;
	text-decoration: line-through !important;
	font-weight: 500 !important;
	cursor: not-allowed !important;
}

/* Legend - More prominent */
.hhb-properties-list .hhb-list-calendar__legend {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-size: 10px !important;
	color: #4B5563 !important;
	margin-top: 8px !important;
	padding-top: 8px !important;
	border-top: 2px solid #E5E7EB !important;
}

.hhb-properties-list .hhb-list-calendar__legend-item {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.hhb-properties-list .hhb-list-calendar__legend-dot {
	width: 10px !important;
	height: 10px !important;
	border-radius: 3px !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.hhb-properties-list .hhb-list-calendar__legend-dot--today {
	background: #2563EB !important;
}

.hhb-properties-list .hhb-list-calendar__legend-dot--booked {
	background: #E5E7EB !important;
}

.hhb-properties-list .hhb-list-calendar__legend-text {
	font-size: 10px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
}

/* ==========================================================================
   OLD LIST VIEW STYLES (HHB-48.3) - DEPRECATED
   Keep for backwards compatibility during migration
   ========================================================================== */
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Thumbnail Grid (2 rows x 3 cols) */
.hhb-list-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hhb-spacing-xs); /* 8px */
}

.hhb-list-gallery-thumb {
	position: relative;
	width: 100%;
	padding-top: 66.67%; /* 3:2 aspect ratio */
	overflow: hidden;
	background-color: var(--hhb-bg-light);
	border-radius: var(--hhb-radius-sm); /* 4px */
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.2s ease;
}

.hhb-list-gallery-thumb.active {
	border-color: var(--hhb-primary);
}

.hhb-list-gallery-thumb:hover {
	border-color: var(--hhb-primary-hover);
}

.hhb-list-gallery-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* HHB-48.3: Carousel wrapper and navigation arrows */
.hhb-list-gallery-thumbs-wrapper {
	position: relative;
}

.hhb-list-gallery-container .hhb-pp-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	outline: none;
}

.hhb-list-gallery-container .hhb-pp-carousel-arrow:hover:not(:disabled) {
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-50%) scale(1.05);
}

.hhb-list-gallery-container .hhb-pp-carousel-arrow:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.hhb-list-gallery-container .hhb-pp-carousel-arrow .hhb-arrow {
	font-size: 32px;
	line-height: 1;
	color: #1e293b;
	font-weight: 300;
	display: block;
}

.hhb-list-gallery-container .hhb-pp-carousel-prev {
	left: -20px;
}

.hhb-list-gallery-container .hhb-pp-carousel-next {
	right: -20px;
}

/* ==========================================================================
   Property Header - List View (Full-Width)
   REUSES: .hhb-pp-price class from composite-layouts.css for price display
   ========================================================================== */

.hhb-property-list-name {
	margin: 0;
	font-size: 1.75rem; /* 28px */
	font-weight: 600;
	color: var(--hhb-text-primary);
	line-height: 1.3;
}

.hhb-property-list-mini-desc {
	margin: 0;
	font-size: 0.9375rem; /* 15px */
	color: var(--hhb-text-secondary);
	line-height: 1.5;
}

/* Price styling - main price uses .hhb-pp-price from composite-layouts.css */
.hhb-property-list-price {
	font-size: 1.125rem; /* 18px */
	font-weight: 600;
	color: var(--hhb-primary);
}

/* ==========================================================================
   Features Section - List View (Full-Width Footer)
   REUSES: .hhb-pp-facilities-chips and .hhb-chip classes from composite-layouts.css
   ========================================================================== */

/* Wrapper for features section in list view */
.hhb-property-list-features {
	/* Container styling - actual chips styled by composite-layouts.css */
}

/* FALLBACK: Legacy grid styles (only used if composite-layouts function unavailable) */
.hhb-list-features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hhb-spacing-md); /* 16px */
}

/* Tablet: 3 columns */
@media (max-width: 1023px) {
	.hhb-list-features-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile: 2 columns */
@media (max-width: 767px) {
	.hhb-list-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.hhb-list-feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--hhb-spacing-sm); /* 12px */
	background: var(--hhb-bg-light);
	border-radius: var(--hhb-radius-sm); /* 4px */
	font-size: 0.875rem; /* 14px */
	color: var(--hhb-text-secondary);
}

.hhb-list-feature-icon {
	font-size: 1.25rem; /* 20px */
	margin-bottom: var(--hhb-spacing-xs); /* 8px */
}

.hhb-list-feature-label {
	font-size: 0.8125rem; /* 13px */
	line-height: 1.3;
}

/* ==========================================================================
   Actions Section - List View (Full-Width Footer)
   ========================================================================== */

.hhb-property-list-actions {
	display: flex;
	justify-content: flex-end;
}

/* Button Styles */
.hhb-button {
	display: inline-block;
	padding: var(--hhb-spacing-sm) var(--hhb-spacing-lg); /* 12px 24px */
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	border-radius: var(--hhb-radius-sm); /* 4px */
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	border: none;
}

.hhb-button-primary {
	background-color: var(--hhb-primary);
	color: #ffffff;
}

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

.hhb-button:focus {
	outline: 2px solid var(--hhb-primary);
	outline-offset: 2px;
}

/* Mobile: Full width button */
@media (max-width: 767px) {
	.hhb-property-list-actions {
		justify-content: stretch;
	}
	
	.hhb-button {
		width: 100%;
	}
}

/* ==========================================================================
   List View - No Image Placeholder
   ========================================================================== */

.hhb-list-gallery-container .hhb-no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 300px;
	background-color: var(--hhb-bg-light);
	border-radius: var(--hhb-radius-sm);
}

.hhb-list-gallery-container .hhb-no-image p {
	margin: 0;
	color: var(--hhb-text-secondary);
	font-size: 0.875rem;
}

/* ==========================================================================
   View Switcher Toolbar - HHB-48.4
   ========================================================================== */

/* Wrapper for entire properties section */
.hhb-properties-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--hhb-spacing-lg); /* 24px gap between toolbar and container */
}

/* Toolbar container */
.hhb-properties-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--hhb-spacing-md); /* 16px */
	background: var(--hhb-bg-white);
	border: 1px solid var(--hhb-border);
	border-radius: var(--hhb-radius-sm); /* 4px */
	gap: var(--hhb-spacing-md);
}

/* Property count label */
.hhb-properties-count {
	font-size: 0.9375rem; /* 15px */
	font-weight: 500;
	color: var(--hhb-text-primary);
}

/* View switcher button group */
.hhb-view-switcher {
	display: flex;
	gap: var(--hhb-spacing-xs); /* 8px between buttons */
	align-items: center;
}

/* Individual toggle button */
.hhb-view-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--hhb-bg-light);
	border: 1px solid var(--hhb-border);
	border-radius: var(--hhb-radius-sm); /* 4px */
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--hhb-text-secondary);
}

.hhb-view-toggle:hover {
	background: var(--hhb-bg-white);
	border-color: var(--hhb-border-dark);
	color: var(--hhb-text-primary);
}

/* Active toggle button */
.hhb-view-toggle.active {
	background: var(--hhb-primary);
	border-color: var(--hhb-primary);
	color: #ffffff;
	box-shadow: var(--hhb-shadow-sm);
}

.hhb-view-toggle.active:hover {
	background: var(--hhb-primary-hover);
	border-color: var(--hhb-primary-hover);
}

/* Focus state for accessibility */
.hhb-view-toggle:focus {
	outline: 2px solid var(--hhb-primary);
	outline-offset: 2px;
}

/* SVG icons inside buttons */
.hhb-view-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: currentColor;
}

/* Properties container with loading state */
.hhb-properties-container {
	position: relative;
	transition: opacity 0.2s ease;
}

.hhb-properties-container.hhb-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Error message styling */
.hhb-view-switch-error {
	padding: var(--hhb-spacing-md);
	margin-bottom: var(--hhb-spacing-md);
	background: #fee;
	border: 1px solid #fcc;
	border-radius: var(--hhb-radius-sm);
	color: #c00;
	font-size: 0.9375rem;
}

/* Mobile responsive toolbar */
@media (max-width: 767px) {
	.hhb-properties-toolbar {
		padding: var(--hhb-spacing-sm); /* 12px on mobile */
	}
	
	.hhb-properties-count {
		font-size: 0.875rem; /* 14px on mobile */
	}
	
	.hhb-view-toggle {
		width: 36px;
		height: 36px;
	}
	
	.hhb-view-toggle svg {
		width: 18px;
		height: 18px;
	}
}

/* ==========================================================================
   Accessibility - List View
   ========================================================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.hhb-list-gallery-thumb,
	.hhb-button {
		transition: none;
	}
	
	.hhb-button-primary:hover {
		transform: none;
	}
}

/* ==========================================================================
   Print Styles - List View
   ========================================================================== */

@media print {
	.hhb-properties-list.hhb-view-list {
		gap: 1.5rem;
	}
	
	.hhb-property-item-list {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #000;
		page-break-inside: avoid;
	}
	
	.hhb-list-map-container,
	.hhb-property-list-booking {
		display: none; /* Hide maps and booking forms in print */
	}
}

/* ==========================================================================
   Booking Modal - HHB-48.5
   ========================================================================== */

/* Modal Overlay */
.hhb-booking-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}

.hhb-booking-modal-overlay.hhb-modal-open {
opacity: 1;
}

/* Modal Container */
.hhb-booking-modal {
background: white;
border-radius: 16px;
max-width: 640px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transform: scale(0.95);
transition: transform 0.2s ease-in-out;
}

.hhb-modal-open .hhb-booking-modal {
transform: scale(1);
}

/* Modal Header */
.hhb-booking-modal__header {
position: sticky;
top: 0;
background: white;
border-bottom: 1px solid #e5e7eb;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
border-radius: 16px 16px 0 0;
}

.hhb-booking-modal__title {
font-size: 20px;
font-weight: 600;
margin: 0;
color: #111827;
line-height: 1.3;
}

.hhb-booking-modal__location {
font-size: 14px;
color: #6b7280;
margin: 4px 0 0 0;
line-height: 1.4;
}

.hhb-booking-modal__close {
background: none;
border: none;
font-size: 32px;
line-height: 1;
cursor: pointer;
padding: 8px;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
flex-shrink: 0;
margin-left: 16px;
transition: background-color 0.15s ease;
}

.hhb-booking-modal__close:hover {
background: #f3f4f6;
color: #111827;
}

/* Modal Content */
.hhb-booking-modal__content {
padding: 24px;
}

/* Booking Widget */
.hhb-booking-modal__widget {
background: #f9fafb;
border-radius: 12px;
border: 1px solid #e5e7eb;
padding: 24px;
margin-bottom: 24px;
}

.hhb-booking-modal__price-display {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e7eb;
}

.hhb-booking-modal__price-label {
font-size: 14px;
color: #6b7280;
}

.hhb-booking-modal__price-value {
font-size: 28px;
font-weight: 700;
color: #111827;
}

.hhb-booking-modal__price-unit {
font-size: 14px;
color: #6b7280;
}

/* Form Fields */
.hhb-booking-modal__fields {
margin-bottom: 20px;
}

.hhb-booking-modal__field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}

.hhb-booking-modal__field label {
display: block;
font-size: 14px;
font-weight: 500;
color: #374151;
margin-bottom: 6px;
}

.hhb-booking-modal__field input,
.hhb-booking-modal__field select {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
color: #111827;
background: white;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hhb-booking-modal__field input:focus,
.hhb-booking-modal__field select:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* CTA Button */
.hhb-booking-modal__cta {
display: block;
width: 100%;
padding: 14px 20px;
background: #2563eb;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
margin-bottom: 16px;
}

.hhb-booking-modal__cta:hover {
background: #1d4ed8;
transform: translateY(-1px);
}

.hhb-booking-modal__cta:active {
transform: translateY(0);
}

/* Status Message (HHB-48.x) */
.hhb-booking-modal__status {
margin-bottom: 16px;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
}

.hhb-modal-status-loading {
color: #1f2937;
display: flex;
align-items: center;
}

.hhb-modal-status-loading::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
border: 2px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: hhb-spin 0.6s linear infinite;
}

@keyframes hhb-spin {
to { transform: rotate(360deg); }
}

.hhb-modal-status-error {
color: #991b1b;
display: block;
}

.hhb-booking-modal__status:has(.hhb-modal-status-error) {
background: #fef2f2;
border: 1px solid #fecaca;
}

.hhb-booking-modal__status:has(.hhb-modal-status-loading) {
background: #f9fafb;
border: 1px solid #e5e7eb;
}

/* Price Breakdown */
.hhb-booking-modal__breakdown {
font-size: 14px;
color: #111827; /* Dark text for better readability - matching list view */
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}

.hhb-booking-modal__breakdown-line {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
color: #4B5563; /* Darker for readability - matching list view */
font-weight: 500;
}

.hhb-booking-modal__breakdown-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
color: #4B5563; /* Darker for readability - matching list view */
font-weight: 500;
}

.hhb-booking-modal__breakdown-total {
display: flex;
justify-content: space-between;
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid #e5e7eb;
font-size: 16px;
font-weight: 600;
color: #111827; /* Very dark - matching list view */
}

/* Calendar */
.hhb-booking-modal__calendar {
margin-bottom: 24px;
}

.hhb-calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 16px;
}

.hhb-calendar-nav {
background: white;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #374151;
transition: background-color 0.15s ease, border-color 0.15s ease;
flex-shrink: 0;
}

.hhb-calendar-nav:hover {
background: #f9fafb;
border-color: #9ca3af;
}

.hhb-calendar-nav svg {
display: block;
}

.hhb-calendar-months-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
color: #111827;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}

.hhb-calendar-separator {
color: #9ca3af;
}

.hhb-calendar-months {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}

.hhb-calendar-month {
min-width: 0;
}

.hhb-calendar-day-names {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
}

.hhb-calendar-day-name {
text-align: center;
font-size: 12px;
font-weight: 600;
color: #6b7280;
padding: 8px 4px;
}

.hhb-calendar-days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}

.hhb-calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease;
}

.hhb-calendar-day:not(.hhb-calendar-day--empty):not(.hhb-calendar-day--past):hover {
background: #f3f4f6;
}

.hhb-calendar-day--empty {
cursor: default;
}

.hhb-calendar-day--today {
background: #2563eb;
color: white;
font-weight: 600;
}

.hhb-calendar-day--past {
color: #d1d5db;
cursor: not-allowed;
}

/* Footer Text */
.hhb-booking-modal__footer-text {
font-size: 14px;
color: #6b7280;
text-align: center;
margin: 0;
line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
.hhb-booking-modal {
max-width: 100%;
max-height: 95vh;
border-radius: 16px 16px 0 0;
margin-top: auto;
}

.hhb-booking-modal__header {
padding: 12px 16px;
}

.hhb-booking-modal__title {
font-size: 18px;
}

.hhb-booking-modal__content {
padding: 16px;
}

.hhb-booking-modal__widget {
padding: 16px;
}

.hhb-calendar-months {
grid-template-columns: 1fr;
gap: 20px;
}

.hhb-calendar-months-title {
flex-direction: column;
gap: 4px;
}

.hhb-calendar-separator {
display: none;
}

.hhb-booking-modal__field-row {
grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {
.hhb-booking-modal__price-value {
font-size: 24px;
}

.hhb-calendar-day {
font-size: 13px;
}

.hhb-calendar-day-name {
font-size: 11px;
padding: 6px 2px;
}
}

/* ==========================================================================
   HHB-48.9: Price on request styling
   ========================================================================== */

.hhb-price-on-request {
	color: #6b7280;
	font-style: italic;
}