/**
 * 3-Step Booking Flow Styles - Modern SaaS UI
 * @fs_premium_only
 */

/* Design System Variables - scoped to .hhb-ui */
.hhb-ui {
	/* Color Palette */
	--hhb-color-primary: #2563eb;
	--hhb-color-primary-hover: #1d4ed8;
	--hhb-color-primary-light: #eff6ff;
	--hhb-color-success: #10b981;
	--hhb-color-success-bg: #d1fae5;
	--hhb-color-error: #ef4444;
	--hhb-color-error-bg: #fee2e2;
	--hhb-color-border: #e5e7eb;
	--hhb-color-border-focus: var(--hhb-color-primary);
	--hhb-color-text-primary: #1f2937;
	--hhb-color-text-secondary: #6b7280;
	--hhb-color-text-muted: #9ca3af;
	--hhb-color-bg-card: #ffffff;
	--hhb-color-bg-subtle: #f9fafb;
	--hhb-color-bg-hover: #f3f4f6;
	
	/* Border Radius */
	--hhb-radius-sm: 8px;
	--hhb-radius-md: 12px;
	--hhb-radius-lg: 16px;
	--hhb-radius-btn: 14px;
	
	/* Shadows */
	--hhb-shadow-sm: 0 1px 2px 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);
	
	/* Spacing Scale */
	--hhb-space-xs: 8px;
	--hhb-space-sm: 12px;
	--hhb-space-md: 16px;
	--hhb-space-lg: 24px;
	--hhb-space-xl: 32px;
	--hhb-space-2xl: 48px;
	
	/* Typography */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hhb-color-text-primary);
}

/* Container - Centered, mobile-first */
.hhb-ui .hhb-booking-step {
	max-width: 900px;
	margin: var(--hhb-space-lg) auto;
	padding: var(--hhb-space-xl);
	background: var(--hhb-color-bg-card);
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-lg);
	box-shadow: var(--hhb-shadow-md);
}

@media (max-width: 768px) {
	.hhb-ui .hhb-booking-step {
		margin: var(--hhb-space-md);
		padding: var(--hhb-space-lg);
		border-radius: var(--hhb-radius-md);
	}
}

/* Step Header */
.hhb-ui .hhb-step-header {
	margin-bottom: var(--hhb-space-xl);
	padding-bottom: var(--hhb-space-lg);
	border-bottom: 1px solid var(--hhb-color-border);
}

.hhb-ui .hhb-step-header h2 {
	margin: 0 0 var(--hhb-space-sm) 0;
	font-size: 28px;
	font-weight: 700;
	color: var(--hhb-color-text-primary);
	line-height: 1.3;
}

.hhb-ui .hhb-step-helper {
	margin: 0 0 var(--hhb-space-md) 0;
	font-size: 16px;
	color: var(--hhb-color-text-secondary);
	line-height: 1.5;
}

.hhb-ui .hhb-step-indicator {
	color: var(--hhb-color-text-secondary);
	font-size: 14px;
	font-weight: 500;
}

.hhb-ui .hhb-step-number {
	display: inline-flex;
	align-items: center;
	padding: var(--hhb-space-xs) var(--hhb-space-md);
	background: var(--hhb-color-bg-subtle);
	border-radius: 100px;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.hhb-ui .hhb-step-number.active {
	background: var(--hhb-color-primary);
	color: #fff;
}

/* Form Fields - Large tap targets, clear labels */
.hhb-ui .hhb-form-field {
	margin-bottom: var(--hhb-space-lg);
}

.hhb-ui .hhb-form-field label {
	display: block;
	margin-bottom: var(--hhb-space-sm);
	font-weight: 600;
	font-size: 15px;
	color: var(--hhb-color-text-primary);
}

.hhb-ui .hhb-form-field .required {
	color: var(--hhb-color-error);
	margin-left: 2px;
}

.hhb-ui .hhb-form-field input[type="text"],
.hhb-ui .hhb-form-field input[type="email"],
.hhb-ui .hhb-form-field input[type="tel"],
.hhb-ui .hhb-form-field input[type="number"],
.hhb-ui .hhb-form-field select,
.hhb-ui .hhb-form-field textarea {
	width: 100%;
	padding: var(--hhb-space-md);
	font-size: 16px;
	line-height: 1.5;
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-sm);
	background: var(--hhb-color-bg-card);
	color: var(--hhb-color-text-primary);
	transition: all 0.2s ease;
	min-height: 48px;
	box-sizing: border-box;
}

.hhb-ui .hhb-form-field input:focus,
.hhb-ui .hhb-form-field select:focus,
.hhb-ui .hhb-form-field textarea:focus {
	outline: none;
	border-color: var(--hhb-color-border-focus);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.hhb-ui .hhb-form-field textarea {
	min-height: 120px;
	resize: vertical;
}

/* Date Inputs - Two columns on desktop, stacked on mobile */
.hhb-ui .hhb-date-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hhb-space-md);
	margin-bottom: var(--hhb-space-md);
}

@media (max-width: 600px) {
	.hhb-ui .hhb-date-inputs {
		grid-template-columns: 1fr;
	}
}

.hhb-ui .hhb-nights-display {
	padding: var(--hhb-space-md);
	background: var(--hhb-color-primary-light);
	border-radius: var(--hhb-radius-sm);
	text-align: center;
	border: 1px solid rgba(0, 115, 170, 0.2);
}

.hhb-ui .hhb-nights-label {
	font-weight: 600;
	margin-right: var(--hhb-space-xs);
	color: var(--hhb-color-text-primary);
}

.hhb-ui .hhb-nights-value {
	color: var(--hhb-color-primary);
	font-weight: 700;
	font-size: 20px;
}

/* Guest Counter - Styled as row with minus/plus circular buttons */
.hhb-ui .hhb-guest-counter {
	display: flex;
	align-items: center;
	gap: var(--hhb-space-md);
	padding: var(--hhb-space-md);
	background: var(--hhb-color-bg-subtle);
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-sm);
}

.hhb-ui .hhb-guest-counter-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--hhb-color-primary);
	background: var(--hhb-color-bg-card);
	color: var(--hhb-color-primary);
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.hhb-ui .hhb-guest-counter-btn:hover {
	background: var(--hhb-color-primary);
	color: #fff;
}

.hhb-ui .hhb-guest-counter-btn:active {
	transform: scale(0.95);
}

.hhb-ui .hhb-guest-counter input {
	flex: 1;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	border: none;
	background: transparent;
	min-height: auto;
	padding: 0;
}

.hhb-ui .hhb-guest-counter input:focus {
	box-shadow: none;
	border: none;
}

/* Price Display - Card style */
.hhb-ui .hhb-price-display {
	margin: var(--hhb-space-lg) 0;
	padding: var(--hhb-space-lg);
	background: var(--hhb-color-primary-light);
	border: 2px solid var(--hhb-color-primary);
	border-radius: var(--hhb-radius-md);
	text-align: center;
}

.hhb-ui .hhb-price-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--hhb-color-text-secondary);
	margin-bottom: var(--hhb-space-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.hhb-ui .hhb-price-value {
	font-size: 36px;
	font-weight: 700;
	color: var(--hhb-color-primary);
	margin-bottom: var(--hhb-space-xs);
	line-height: 1.2;
}

.hhb-ui .hhb-price-note {
	font-size: 13px;
	color: var(--hhb-color-text-secondary);
	font-style: normal;
}

/* Availability Status */
.hhb-ui .hhb-availability-status {
	margin: var(--hhb-space-md) 0;
	padding: var(--hhb-space-md);
	border-radius: var(--hhb-radius-sm);
	text-align: center;
	font-weight: 600;
	font-size: 15px;
}

.hhb-ui .hhb-availability-status.available {
	background: var(--hhb-color-success-bg);
	color: var(--hhb-color-success);
	border: 1px solid var(--hhb-color-success);
}

.hhb-ui .hhb-availability-status.unavailable {
	background: var(--hhb-color-error-bg);
	color: var(--hhb-color-error);
	border: 1px solid var(--hhb-color-error);
}

/* Booking Summary */
.hhb-ui .hhb-booking-summary,
.hhb-ui .hhb-checkout-summary {
	margin-bottom: var(--hhb-space-xl);
	padding: var(--hhb-space-lg);
	background: var(--hhb-color-bg-subtle);
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-md);
}

/* Step 2: Make booking summary visually quieter/secondary */
.hhb-ui .hhb-booking-step-2 .hhb-booking-summary {
	padding: var(--hhb-space-md);
	background: var(--hhb-color-bg-subtle);
	border: 1px solid rgba(229, 231, 235, 0.5); /* Lighter border for less prominence */
	font-size: 14px;
	box-shadow: none; /* Remove any shadow */
}

.hhb-ui .hhb-booking-summary h3,
.hhb-ui .hhb-checkout-summary h3 {
	margin: 0 0 var(--hhb-space-lg) 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--hhb-color-text-primary);
}

/* Step 2: Smaller heading for summary */
.hhb-ui .hhb-booking-step-2 .hhb-booking-summary h3 {
	font-size: 15px;
	font-weight: 600;
	color: var(--hhb-color-text-secondary);
	margin-bottom: var(--hhb-space-sm);
}

.hhb-ui .hhb-summary-section {
	margin-bottom: var(--hhb-space-xl);
}

.hhb-ui .hhb-summary-section:last-child {
	margin-bottom: 0;
}

.hhb-ui .hhb-summary-section h4 {
	margin: 0 0 var(--hhb-space-md) 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--hhb-color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.hhb-ui .hhb-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--hhb-space-sm) 0;
	border-bottom: 1px solid var(--hhb-color-border);
}

.hhb-ui .hhb-summary-row:last-child {
	border-bottom: none;
}

.hhb-ui .hhb-summary-label {
	color: var(--hhb-color-text-secondary);
	font-size: 15px;
}

.hhb-ui .hhb-summary-value {
	font-weight: 600;
	color: var(--hhb-color-text-primary);
	font-size: 15px;
}

/* Step 2: Compact summary rows */
.hhb-ui .hhb-booking-step-2 .hhb-summary-row {
	padding: 6px 0;
	font-size: 13px;
}

.hhb-ui .hhb-booking-step-2 .hhb-summary-label {
	font-size: 13px;
	color: var(--hhb-color-text-muted);
}

.hhb-ui .hhb-booking-step-2 .hhb-summary-value {
	font-size: 13px;
	font-weight: 500;
}

.hhb-ui .hhb-summary-total {
	margin-top: var(--hhb-space-md);
	padding-top: var(--hhb-space-md);
	border-top: 2px solid var(--hhb-color-border);
	font-size: 18px;
}

.hhb-ui .hhb-summary-total .hhb-summary-value {
	color: var(--hhb-color-primary);
	font-weight: 700;
	font-size: 18px;
}

/* Step 2: Even more compact total in summary */
.hhb-ui .hhb-booking-step-2 .hhb-summary-total {
	margin-top: var(--hhb-space-sm);
	padding-top: var(--hhb-space-sm);
	font-size: 14px;
}

.hhb-ui .hhb-booking-step-2 .hhb-summary-total .hhb-summary-value {
	font-size: 14px;
}

/* Fees/Add-ons Section - HERO CONTENT AREA with subtle background plane */
.hhb-ui .hhb-fees-section {
	margin-bottom: var(--hhb-space-xl);
	padding: var(--hhb-space-xl);
	background: linear-gradient(to bottom, rgba(37, 99, 235, 0.02), rgba(37, 99, 235, 0.01)); /* Subtle tint plane */
	border-radius: var(--hhb-radius-lg);
	position: relative;
}

.hhb-ui .hhb-fees-section h3 {
	margin: 0 0 var(--hhb-space-lg) 0;
	font-size: 22px; /* Slightly larger for hero emphasis */
	font-weight: 700;
	color: var(--hhb-color-text-primary);
}

/**
 * CAPACITY-AWARE RESPONSIVE GRID LAYOUT
 * 
 * When there are multiple add-ons:
 * - Mobile (< 768px): 1 column
 * - Desktop (>= 768px): 2 columns
 * 
 * When there is exactly ONE add-on:
 * - CSS :only-child selector makes it span full width
 * - Creates a prominent "feature card" presentation
 * - No JavaScript or PHP conditional logic needed
 */
.hhb-ui .hhb-fees-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hhb-space-md);
}

@media (min-width: 768px) {
	.hhb-ui .hhb-fees-list {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/**
	 * SINGLE ADD-ON FULL-WIDTH FEATURE CARD
	 * When there's only one fee-item child, span both columns
	 * to create a prominent, centered feature card presentation
	 */
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child {
		grid-column: 1 / -1;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	
	/**
	 * FEATURED SINGLE ADD-ON PREMIUM STYLING
	 * Enhance the single add-on to feel like a premium featured upsell
	 */
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child {
		padding: var(--hhb-space-xl); /* More generous padding */
		min-height: 140px; /* Taller for featured feel */
		box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12); /* Stronger base shadow */
	}
	
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child:hover {
		box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2); /* Premium lift on hover */
		transform: translateY(-3px); /* More pronounced lift */
	}
	
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child .hhb-fee-icon {
		width: 64px; /* Larger icon block for featured card */
		height: 64px;
		font-size: 32px;
	}
	
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child .hhb-fee-name {
		font-size: 20px; /* Larger title for featured presentation */
		margin-bottom: var(--hhb-space-sm);
	}
	
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child .hhb-fee-description {
		font-size: 15px; /* Slightly larger description */
		line-height: 1.6; /* More breathing room */
		margin-bottom: var(--hhb-space-sm);
	}
	
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child .hhb-fee-amount {
		font-size: 18px; /* Larger price chip for featured card */
		padding: 10px 20px;
	}
}

/* Each add-on is a premium selectable card with subtle shadow and tappable feel */
.hhb-ui .hhb-fee-item {
	position: relative;
	display: flex;
	align-items: start;
	gap: var(--hhb-space-md);
	padding: var(--hhb-space-md) var(--hhb-space-lg); /* Slightly reduced vertical padding for density */
	border: 2px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-md);
	background: var(--hhb-color-bg-card);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle base shadow for depth */
	transition: all 0.2s ease;
	cursor: pointer;
	min-height: 90px; /* Slightly reduced for better density */
}

.hhb-ui .hhb-fee-item:hover {
	border-color: var(--hhb-color-primary);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); /* Premium lift shadow on hover */
	transform: translateY(-2px); /* Subtle lift effect */
}

.hhb-ui .hhb-fee-item:focus-within {
	border-color: var(--hhb-color-primary);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); /* Clear focus ring for keyboard users */
	outline: none;
}

/* Selected state - refined with premium feel */
.hhb-ui .hhb-fee-item.hhb-fee-selected {
	border-color: var(--hhb-color-primary);
	border-width: 2px;
	background: linear-gradient(to bottom, rgba(239, 246, 255, 1), rgba(239, 246, 255, 0.8)); /* Richer gradient tint */
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); /* Stronger selected shadow */
}

/* Checkmark indicator - refined positioning and styling */
.hhb-ui .hhb-fee-item.hhb-fee-selected::before {
	content: "✓";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hhb-color-primary);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3); /* Shadow on checkmark for depth */
}

/* Required fee styling */
.hhb-ui .hhb-fee-item.hhb-fee-required {
	background: var(--hhb-color-bg-subtle);
	cursor: default;
	border-color: var(--hhb-color-border);
}

.hhb-ui .hhb-fee-item.hhb-fee-required:hover {
	border-color: var(--hhb-color-border);
	box-shadow: none;
}

.hhb-ui .hhb-fee-item.hhb-fee-required::before {
	content: "✓";
	position: absolute;
	top: var(--hhb-space-sm);
	right: var(--hhb-space-sm);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hhb-color-text-muted);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

/* Hide checkbox visually but keep accessible */
.hhb-ui .hhb-fee-checkbox {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.hhb-ui .hhb-fee-required .hhb-fee-checkbox {
	cursor: not-allowed;
}

/* Icon slot (optional) - soft square on left */
.hhb-ui .hhb-fee-icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hhb-color-bg-subtle);
	border-radius: var(--hhb-radius-sm);
	font-size: 24px;
}

/* Middle section: name + description */
.hhb-ui .hhb-fee-details {
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.hhb-ui .hhb-fee-required .hhb-fee-details {
	cursor: default;
}

.hhb-ui .hhb-fee-name {
	font-weight: 700;
	font-size: 16px;
	color: var(--hhb-color-text-primary);
	margin-bottom: var(--hhb-space-xs);
	line-height: 1.3;
	padding-right: 32px; /* Space for checkmark */
}

.hhb-ui .hhb-fee-description {
	font-size: 14px;
	color: var(--hhb-color-text-secondary);
	margin-bottom: var(--hhb-space-xs);
	line-height: 1.5;
}

.hhb-ui .hhb-fee-mode {
	font-size: 13px;
	color: var(--hhb-color-text-muted);
	font-style: italic;
}

/**
 * PREMIUM PRICE CHIP/BADGE
 * Visually distinct pill-style badge for pricing
 * Consistently placed at bottom of details section for scanability
 */
.hhb-ui .hhb-fee-amount {
	align-self: flex-start;
	font-weight: 700;
	color: #ffffff; /* White text for contrast */
	font-size: 16px;
	white-space: nowrap;
	padding: 8px 16px;
	background: linear-gradient(135deg, var(--hhb-color-primary), #1d4ed8); /* Premium gradient */
	border-radius: 100px;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25); /* Subtle shadow for depth */
	letter-spacing: 0.3px;
}

.hhb-ui .hhb-no-fees {
	padding: var(--hhb-space-xl);
	text-align: center;
	color: var(--hhb-color-text-muted);
	font-style: italic;
}

/* Mobile: stack price below, maintain chip styling */
@media (max-width: 600px) {
	.hhb-ui .hhb-fee-item {
		flex-wrap: wrap;
	}
	
	.hhb-ui .hhb-fee-amount {
		width: auto; /* Allow badge to size naturally */
		text-align: center;
		margin-top: var(--hhb-space-sm);
	}
	
	/* Featured single add-on mobile adjustments */
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child {
		padding: var(--hhb-space-lg); /* Reduce padding on mobile */
	}
	
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child .hhb-fee-icon {
		width: 56px; /* Slightly smaller icon on mobile */
		height: 56px;
		font-size: 28px;
	}
	
	.hhb-ui .hhb-fees-list .hhb-fee-item:only-child .hhb-fee-name {
		font-size: 18px; /* Slightly smaller title on mobile */
	}
}

/* Totals Display - Prominent but refined, grand total is the hero */
.hhb-ui .hhb-total-display {
	margin: var(--hhb-space-xl) 0;
	padding: var(--hhb-space-xl);
	background: var(--hhb-color-bg-card);
	border: 1px solid rgba(37, 99, 235, 0.2); /* Softer border, less boxy */
	border-radius: var(--hhb-radius-md);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08); /* Soft shadow instead of heavy border */
}

.hhb-ui .hhb-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--hhb-space-sm) 0;
	border-bottom: 1px solid rgba(229, 231, 235, 0.5); /* Lighter dividers */
}

.hhb-ui .hhb-total-row:last-child {
	border-bottom: none;
}

.hhb-ui .hhb-grand-total-row {
	margin-top: var(--hhb-space-lg);
	padding-top: var(--hhb-space-lg);
	border-top: 2px solid rgba(37, 99, 235, 0.15); /* Subtle top separator */
}

/* Line items - quieter styling */
.hhb-ui .hhb-subtotal-row .hhb-total-label,
.hhb-ui .hhb-fees-row .hhb-total-label {
	color: var(--hhb-color-text-muted); /* Muted for less emphasis */
	font-size: 14px;
}

.hhb-ui .hhb-subtotal-row .hhb-total-value,
.hhb-ui .hhb-fees-row .hhb-total-value {
	color: var(--hhb-color-text-secondary); /* Quieter values */
	font-weight: 600;
	font-size: 14px;
}

/* Grand total - THE HERO */
.hhb-ui .hhb-grand-total-row .hhb-total-label {
	font-weight: 700;
	color: var(--hhb-color-text-primary);
	font-size: 18px;
}

.hhb-ui .hhb-grand-total-row .hhb-total-value {
	font-size: 32px; /* Large, prominent hero pricing */
	font-weight: 800;
	color: var(--hhb-color-primary);
	letter-spacing: -0.5px;
}

/* Guest Details - Grouped sections */
.hhb-ui .hhb-guest-details {
	margin-bottom: var(--hhb-space-xl);
}

.hhb-ui .hhb-guest-details h3 {
	margin: 0 0 var(--hhb-space-lg) 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--hhb-color-text-primary);
}

.hhb-ui .hhb-guest-details-section {
	margin-bottom: var(--hhb-space-xl);
	padding: var(--hhb-space-lg);
	background: var(--hhb-color-bg-subtle);
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-md);
}

.hhb-ui .hhb-guest-details-section:last-child {
	margin-bottom: 0;
}

.hhb-ui .hhb-guest-details-section h4 {
	margin: 0 0 var(--hhb-space-lg) 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hhb-color-text-primary);
}

/* Property Info */
.hhb-ui .hhb-property-info {
	margin-bottom: var(--hhb-space-lg);
	padding: var(--hhb-space-lg);
	background: var(--hhb-color-bg-subtle);
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-md);
}

.hhb-ui .hhb-property-info h3 {
	margin: 0 0 var(--hhb-space-xs) 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--hhb-color-text-primary);
}

.hhb-ui .hhb-property-info p {
	margin: 0;
	color: var(--hhb-color-text-secondary);
	font-size: 15px;
}

/* Buttons - Primary: full width on mobile, strong color, 48px height */
.hhb-ui .hhb-form-actions {
	display: flex;
	gap: var(--hhb-space-md);
	justify-content: flex-end;
	margin-top: var(--hhb-space-xl);
	padding-top: var(--hhb-space-lg);
	border-top: 1px solid var(--hhb-color-border);
}

/* Mobile: sticky footer action bar */
@media (max-width: 768px) {
	.hhb-ui .hhb-booking-step {
		padding-bottom: 80px; /* Space for sticky bar */
	}
	
	.hhb-ui .hhb-form-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: var(--hhb-color-bg-card);
		border-top: 2px solid var(--hhb-color-border);
		box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
		padding: var(--hhb-space-md);
		margin: 0;
		flex-direction: row;
	}
}

.hhb-ui .hhb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hhb-space-sm);
	padding: 0 var(--hhb-space-xl);
	min-height: 48px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	border-radius: var(--hhb-radius-btn);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	white-space: nowrap;
	box-sizing: border-box;
}

.hhb-ui .hhb-btn-primary {
	background: var(--hhb-color-primary);
	color: #fff;
	flex: 1;
}

.hhb-ui .hhb-btn-primary:hover {
	background: var(--hhb-color-primary-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--hhb-shadow-md);
}

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

.hhb-ui .hhb-btn-secondary {
	background: var(--hhb-color-bg-card);
	color: var(--hhb-color-text-primary);
	border: 2px solid var(--hhb-color-border);
}

.hhb-ui .hhb-btn-secondary:hover {
	background: var(--hhb-color-bg-hover);
	color: var(--hhb-color-text-primary);
	border-color: var(--hhb-color-text-primary);
}

.hhb-ui .hhb-btn-large {
	min-height: 56px;
	font-size: 18px;
	padding: 0 var(--hhb-space-2xl);
}

.hhb-ui .hhb-btn:disabled,
.hhb-ui .hhb-btn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

.hhb-ui .hhb-btn:disabled:hover,
.hhb-ui .hhb-btn.disabled:hover {
	transform: none !important;
	box-shadow: none !important;
}

.hhb-ui .hhb-btn-arrow {
	font-size: 18px;
	line-height: 1;
}

/* Mobile: full width buttons */
@media (max-width: 768px) {
	.hhb-ui .hhb-btn {
		flex: 1;
		min-width: 0;
	}
	
	.hhb-ui .hhb-btn-secondary {
		flex: 0 0 auto;
		padding: 0 var(--hhb-space-lg);
	}
}

/* Loading State */
.hhb-ui .hhb-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.hhb-ui .hhb-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hhb-spin 0.8s linear infinite;
}

@keyframes hhb-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Error Messages */
.hhb-ui .hhb-error {
	padding: var(--hhb-space-md);
	background: var(--hhb-color-error-bg);
	color: var(--hhb-color-error);
	border: 1px solid var(--hhb-color-error);
	border-radius: var(--hhb-radius-sm);
	margin-bottom: var(--hhb-space-lg);
	font-size: 15px;
	font-weight: 500;
}

/* Payment Option Cards - Large selectable cards */
.hhb-ui .hhb-payment-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hhb-space-md);
	margin-bottom: var(--hhb-space-xl);
}

@media (min-width: 768px) {
	.hhb-ui .hhb-payment-options {
		grid-template-columns: 1fr 1fr;
	}
}

.hhb-ui .hhb-payment-option {
	position: relative;
	padding: var(--hhb-space-lg);
	border: 2px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-md);
	background: var(--hhb-color-bg-card);
	cursor: pointer;
	transition: all 0.2s ease;
}

.hhb-ui .hhb-payment-option:hover {
	border-color: var(--hhb-color-primary);
	box-shadow: var(--hhb-shadow-md);
}

.hhb-ui .hhb-payment-option.selected {
	border-color: var(--hhb-color-primary);
	background: var(--hhb-color-primary-light);
	box-shadow: var(--hhb-shadow-md);
}

.hhb-ui .hhb-payment-option.selected::before {
	content: "✓";
	position: absolute;
	top: var(--hhb-space-sm);
	right: var(--hhb-space-sm);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hhb-color-primary);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.hhb-ui .hhb-payment-option-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--hhb-color-text-primary);
	margin-bottom: var(--hhb-space-xs);
}

.hhb-ui .hhb-payment-option-amount {
	font-size: 24px;
	font-weight: 700;
	color: var(--hhb-color-primary);
	margin-bottom: var(--hhb-space-xs);
}

.hhb-ui .hhb-payment-option-description {
	font-size: 14px;
	color: var(--hhb-color-text-secondary);
}

/* Confirmation page - Clean summary sections + two actions */
.hhb-ui .hhb-confirmation-actions {
	display: flex;
	flex-direction: column;
	gap: var(--hhb-space-md);
	margin-top: var(--hhb-space-xl);
}

@media (min-width: 768px) {
	.hhb-ui .hhb-confirmation-actions {
		flex-direction: row;
		justify-content: center;
	}
}

/* Selected add-ons summary line */
.hhb-ui .hhb-selected-addons-summary {
	margin-top: var(--hhb-space-lg);
	padding: var(--hhb-space-md);
	background: var(--hhb-color-primary-light);
	border-radius: var(--hhb-radius-sm);
	font-size: 14px;
	color: var(--hhb-color-text-secondary);
}

.hhb-ui .hhb-selected-addons-summary strong {
	color: var(--hhb-color-text-primary);
	font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.hhb-ui .hhb-booking-step {
		margin: var(--hhb-space-sm);
		padding: var(--hhb-space-md);
	}
	
	.hhb-ui .hhb-step-header h2 {
		font-size: 24px;
	}
	
	.hhb-ui .hhb-price-value {
		font-size: 28px;
	}
}

/* ========================================================================
   DATES & GUESTS RECOMPOSED LAYOUT - Single Decision Screen
   ======================================================================== */

/* Primary Booking Card - Contains all selection inputs */
.hhb-ui .hhb-booking-card {
	background: var(--hhb-color-bg-card);
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-lg);
	padding: var(--hhb-space-xl);
	margin-bottom: var(--hhb-space-xl);
	box-shadow: var(--hhb-shadow-sm);
}

@media (max-width: 768px) {
	.hhb-ui .hhb-booking-card {
		padding: var(--hhb-space-lg);
	}
}

/* Booking Section - Groups related inputs with clear hierarchy */
.hhb-ui .hhb-booking-section {
	padding: var(--hhb-space-lg) 0;
	border-bottom: 1px solid var(--hhb-color-border);
}

.hhb-ui .hhb-booking-section:first-child {
	padding-top: 0;
}

.hhb-ui .hhb-booking-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* Section Title - Hierarchy marker, not field label */
.hhb-ui .hhb-section-title {
	margin: 0 0 var(--hhb-space-md) 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--hhb-color-text-primary);
	letter-spacing: -0.01em;
}

/* Date Section - Check-in + Check-out paired as one choice */
.hhb-ui .hhb-section-dates .hhb-date-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hhb-space-md);
}

@media (max-width: 600px) {
	.hhb-ui .hhb-section-dates .hhb-date-inputs {
		grid-template-columns: 1fr;
		gap: var(--hhb-space-sm);
	}
}

.hhb-ui .hhb-section-dates .hhb-date-input label {
	font-size: 14px;
	font-weight: 600;
	color: var(--hhb-color-text-secondary);
	margin-bottom: var(--hhb-space-xs);
}

.hhb-ui .hhb-section-dates .hhb-date-input input {
	font-size: 16px;
	font-weight: 500;
}

/* Guest Section - Clean number input */
.hhb-ui .hhb-section-guests .hhb-guest-input-wrapper {
	display: flex;
	align-items: center;
	gap: var(--hhb-space-md);
}

.hhb-ui .hhb-section-guests .hhb-guest-label {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--hhb-color-text-primary);
	margin: 0;
}

.hhb-ui .hhb-section-guests input[type="number"] {
	flex: 1;
	max-width: 120px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 600px) {
	.hhb-ui .hhb-section-guests .hhb-guest-input-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: var(--hhb-space-sm);
	}
	
	.hhb-ui .hhb-section-guests input[type="number"] {
		max-width: none;
	}
}

/* Booking Feedback Panel - Visually separated from inputs */
.hhb-ui .hhb-booking-feedback {
	display: flex;
	flex-direction: column;
	gap: var(--hhb-space-md);
	margin-bottom: var(--hhb-space-xl);
}

/* Nights display within feedback panel */
.hhb-ui .hhb-booking-feedback .hhb-nights-display {
	padding: var(--hhb-space-md);
	background: var(--hhb-color-bg-subtle);
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-radius-sm);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--hhb-space-xs);
}

.hhb-ui .hhb-booking-feedback .hhb-nights-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--hhb-color-text-secondary);
}

.hhb-ui .hhb-booking-feedback .hhb-nights-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--hhb-color-primary);
}

/* Price display within feedback panel - more prominent */
.hhb-ui .hhb-booking-feedback .hhb-price-display {
	padding: var(--hhb-space-xl);
	background: linear-gradient(135deg, var(--hhb-color-primary-light) 0%, rgba(37, 99, 235, 0.05) 100%);
	border: 2px solid var(--hhb-color-primary);
	border-radius: var(--hhb-radius-md);
	text-align: center;
}

.hhb-ui .hhb-booking-feedback .hhb-price-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--hhb-color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--hhb-space-xs);
}

.hhb-ui .hhb-booking-feedback .hhb-price-value {
	font-size: 42px;
	font-weight: 700;
	color: var(--hhb-color-primary);
	line-height: 1.1;
	margin-bottom: var(--hhb-space-sm);
}

.hhb-ui .hhb-booking-feedback .hhb-price-note {
	font-size: 13px;
	color: var(--hhb-color-text-muted);
}

@media (max-width: 600px) {
	.hhb-ui .hhb-booking-feedback .hhb-price-value {
		font-size: 36px;
	}
}

/* Availability status within feedback panel */
.hhb-ui .hhb-booking-feedback .hhb-availability-status {
	padding: var(--hhb-space-md);
	border-radius: var(--hhb-radius-sm);
	text-align: center;
	font-size: 15px;
	font-weight: 600;
}

.hhb-ui .hhb-booking-feedback .hhb-availability-status.available {
	background: var(--hhb-color-success-bg);
	border: 1px solid var(--hhb-color-success);
	color: var(--hhb-color-success);
}

.hhb-ui .hhb-booking-feedback .hhb-availability-status.unavailable {
	background: var(--hhb-color-error-bg);
	border: 1px solid var(--hhb-color-error);
	color: var(--hhb-color-error);
}

/* Action Area - Dominant CTA */
.hhb-ui .hhb-booking-step-1 .hhb-form-actions {
	margin-top: var(--hhb-space-xl);
	padding-top: 0;
	border-top: none;
	display: flex;
	justify-content: center;
}

.hhb-ui .hhb-booking-step-1 .hhb-btn-primary {
	min-width: 280px;
	min-height: 56px;
	font-size: 18px;
	font-weight: 700;
	box-shadow: var(--hhb-shadow-md);
}

.hhb-ui .hhb-booking-step-1 .hhb-btn-primary:hover {
	box-shadow: var(--hhb-shadow-lg);
}

@media (max-width: 768px) {
	.hhb-ui .hhb-booking-step-1 .hhb-form-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: var(--hhb-color-bg-card);
		border-top: 2px solid var(--hhb-color-border);
		box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
		padding: var(--hhb-space-md);
		margin: 0;
	}
	
	.hhb-ui .hhb-booking-step-1 {
		padding-bottom: 90px; /* Space for sticky footer */
	}
	
	.hhb-ui .hhb-booking-step-1 .hhb-btn-primary {
		width: 100%;
		min-width: 0;
	}
}

/* HHB-46.3: Itemized Price Breakdown Styles */
.hhb-ui .hhb-price-breakdown {
	margin-bottom: var(--hhb-space-md);
}

.hhb-ui .hhb-price-breakdown .hhb-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--hhb-space-sm) 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hhb-ui .hhb-price-breakdown .hhb-price-row:last-child {
	border-bottom: none;
}

.hhb-ui .hhb-price-breakdown .hhb-price-row.hhb-price-total {
	padding-top: var(--hhb-space-md);
	margin-top: var(--hhb-space-sm);
	border-top: 2px solid rgba(0, 0, 0, 0.15);
	border-bottom: none;
	font-size: 1.1em;
}

.hhb-ui .hhb-price-breakdown .hhb-price-label {
	font-size: 14px;
	color: var(--hhb-color-text);
}

.hhb-ui .hhb-price-breakdown .hhb-price-value {
	font-size: 16px;
	font-weight: 600;
	color: var(--hhb-color-primary);
}

/* Field helper text */
.hhb-ui .hhb-field-helper {
	margin: var(--hhb-space-xs) 0 0;
	font-size: 12px;
	color: #6b7280;
	font-style: italic;
}

/* Visual Polish - Reduce borders, increase spacing */
.hhb-ui .hhb-booking-step-1 .hhb-form-field input,
.hhb-ui .hhb-booking-step-1 .hhb-form-field select {
	border-width: 1px;
	transition: all 0.2s ease;
}

.hhb-ui .hhb-booking-step-1 .hhb-form-field input:focus,
.hhb-ui .hhb-booking-step-1 .hhb-form-field select:focus {
	border-width: 2px;
	padding: calc(var(--hhb-space-md) - 1px);
}

/* Component feel - inputs as interactive elements */
.hhb-ui .hhb-booking-step-1 .hhb-date-input,
.hhb-ui .hhb-booking-step-1 .hhb-guest-input-wrapper {
	position: relative;
}

.hhb-ui .hhb-booking-step-1 input.hhb-datepicker {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--hhb-space-md) center;
	padding-right: 48px;
}

/* Strong vertical rhythm throughout */
.hhb-ui .hhb-booking-step-1 .hhb-booking-card,
.hhb-ui .hhb-booking-step-1 .hhb-booking-feedback,
.hhb-ui .hhb-booking-step-1 .hhb-form-actions {
	animation: hhb-fade-in 0.3s ease-out;
}

@keyframes hhb-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/**
 * HHB-46.4.5: Property Page Embedded Booking Container Styles
 * HHB-46.4.6: Enhanced with CSS Container Queries for container-width responsive behavior
 * HHB-46.4.7: Neutralize nested wrapper width loss for wider, less inset appearance
 * Scoped to .hhb-embedded-booking-container to avoid affecting global /hhb-book/ pages
 */

/* HHB-46.4.6: Enable container queries on the embedded wrapper */
.hhb-embedded-booking-container {
	container-type: inline-size;
	container-name: hhb-embedded;
	overflow-x: hidden;
	max-width: 100%;
}

/* Embedded container: reduce padding further, maximize usable width */
.hhb-embedded-booking-container .hhb-booking-step {
	margin: 0;
	/* HHB-46.4.7: Further reduced padding for more usable width */
	padding: clamp(8px, 1.4vw, 12px);
	max-width: 100%; /* Use full available width */
	box-sizing: border-box;
	/* HHB-46.4.7: Remove nested card appearance */
	border: none;
	box-shadow: none;
	background: transparent;
}

/* HHB-46.4.7: Neutralize nested wrapper width loss */
/* Remove padding, borders, shadows from inner wrappers that create "card inside card" */
.hhb-embedded-booking-container .hhb-booking-card {
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
	background: transparent;
	width: 100%;
	max-width: 100%;
}

.hhb-embedded-booking-container .hhb-fees-section {
	padding: var(--hhb-space-md) 0; /* Minimal vertical spacing only */
	margin-bottom: var(--hhb-space-lg);
	background: transparent;
	border-radius: 0;
}

.hhb-embedded-booking-container .hhb-booking-summary,
.hhb-embedded-booking-container .hhb-checkout-summary {
	padding: var(--hhb-space-sm);
	margin: 0 0 var(--hhb-space-md) 0;
	border: 1px solid rgba(229, 231, 235, 0.3); /* Very subtle border only */
	box-shadow: none;
	background: rgba(249, 250, 251, 0.5); /* Very subtle background */
	width: 100%;
	max-width: 100%;
}

.hhb-embedded-booking-container .hhb-booking-feedback {
	margin: 0;
	width: 100%;
	max-width: 100%;
}

/* Ensure all children respect container boundaries */
.hhb-embedded-booking-container .hhb-booking-step * {
	box-sizing: border-box;
	max-width: 100%;
}

/* Step 2: Ensure extras grid wraps properly in embedded context */
.hhb-embedded-booking-container .hhb-fees-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hhb-space-md);
}

.hhb-embedded-booking-container .hhb-fee-item {
	flex: 1 1 100%; /* Default to full width (single column) */
	min-width: 0; /* Prevent flex items from overflowing */
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/**
 * HHB-46.4.6: Container Query - Two-column layout based on CONTAINER width
 * Only switch to 2 columns when the embedded container itself is wide enough (≥540px)
 * This prevents awkward narrow columns in sidebars on wide screens
 */
@container hhb-embedded (min-width: 540px) {
	.hhb-embedded-booking-container .hhb-fee-item {
		flex: 1 1 calc(50% - var(--hhb-space-md) / 2);
		min-width: 240px; /* Prevent cards from becoming too narrow */
	}
	
	/* Single addon full-width in embedded context */
	.hhb-embedded-booking-container .hhb-fees-list .hhb-fee-item:only-child {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: 0; /* Reset min-width for single item */
	}
}

/* Ensure fee item content wraps properly */
.hhb-embedded-booking-container .hhb-fee-details {
	flex: 1;
	min-width: 0; /* Allow flex child to shrink below content size */
}

.hhb-embedded-booking-container .hhb-fee-name,
.hhb-embedded-booking-container .hhb-fee-description {
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Compact step headers in embedded context */
.hhb-embedded-booking-container .hhb-step-header {
	margin-bottom: var(--hhb-space-lg);
	padding-bottom: var(--hhb-space-md);
}

.hhb-embedded-booking-container .hhb-step-header h2 {
	font-size: clamp(20px, 4vw, 24px); /* Responsive heading size */
}

/**
 * HHB-46.4.8: Reduce .hhb-card padding in embedded context at larger screens
 * Override global rule that applies padding: 32px at @media (min-width: 900px)
 * Also covers potential 1024px breakpoints to ensure consistent reduced padding
 */
@media (min-width: 900px) {
	.hhb-embedded-booking-container .hhb-card {
		padding: 12px;
	}
}

@media (min-width: 1024px) {
	.hhb-embedded-booking-container .hhb-card {
		padding: 12px;
	}
}

/* ========================================
   HHB-49.8: Registration & Email Status
   ======================================== */

/* Email status messages */
.hhb-ui .hhb-email-status {
	margin-top: var(--hhb-space-sm);
}

.hhb-ui .hhb-notice {
	padding: var(--hhb-space-sm) var(--hhb-space-md);
	border-radius: var(--hhb-radius-sm);
	margin-bottom: var(--hhb-space-md);
	font-size: 14px;
	line-height: 1.5;
}

.hhb-ui .hhb-notice-info {
	background-color: #e3f2fd;
	border-left: 4px solid #2196f3;
	color: #0d47a1;
}

.hhb-ui .hhb-notice-warning {
	background-color: #fff3e0;
	border-left: 4px solid #ff9800;
	color: #e65100;
}

.hhb-ui .hhb-notice a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

.hhb-ui .hhb-notice a:hover {
	opacity: 0.8;
}

/* Registration fields */
.hhb-ui .hhb-registration-fields {
	margin-top: var(--hhb-space-md);
	padding: var(--hhb-space-md);
	background-color: #f8f9fa;
	border-radius: var(--hhb-radius-sm);
	border: 1px solid #dee2e6;
}

.hhb-ui .hhb-form-field-checkbox {
	margin-top: var(--hhb-space-md);
}

.hhb-ui .hhb-form-field-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: var(--hhb-space-sm);
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.hhb-ui .hhb-form-field-checkbox input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.hhb-ui .hhb-form-field-checkbox a {
	color: var(--hhb-color-primary);
	text-decoration: underline;
}

.hhb-ui .hhb-form-field-checkbox a:hover {
	opacity: 0.8;
}

/* Readonly fields styling */
.hhb-ui input[readonly] {
	background-color: #f5f5f5;
	cursor: not-allowed;
	color: #6c757d;
}

/* Button disabled state */
.hhb-ui .hhb-btn-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Password field helper text */
.hhb-ui .hhb-field-helper {
	margin-top: var(--hhb-space-xs);
	font-size: 13px;
	color: var(--hhb-color-text-secondary);
}

/* HHB-50.11.4: Payment Plan Selection Styles */
.hhb-ui .hhb-payment-plans {
	margin-bottom: var(--hhb-space-xl);
	padding: var(--hhb-space-lg);
	background: var(--hhb-color-background-alt);
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-border-radius);
}

.hhb-ui .hhb-payment-plans h3 {
	margin: 0 0 var(--hhb-space-md) 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--hhb-color-text);
}

.hhb-ui .hhb-payment-plan-single {
	padding: var(--hhb-space-md);
	background: white;
	border: 1px solid var(--hhb-color-border);
	border-radius: var(--hhb-border-radius);
}

.hhb-ui .hhb-payment-plan-single p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.hhb-ui .hhb-payment-plan-options {
	display: flex;
	flex-direction: column;
	gap: var(--hhb-space-md);
}

.hhb-ui .hhb-payment-plan-option {
	position: relative;
	background: white;
	border: 2px solid var(--hhb-color-border);
	border-radius: var(--hhb-border-radius);
	padding: var(--hhb-space-md);
	transition: all 0.2s ease;
}

.hhb-ui .hhb-payment-plan-option:hover {
	border-color: var(--hhb-color-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hhb-ui .hhb-payment-plan-option label {
	display: flex;
	align-items: flex-start;
	gap: var(--hhb-space-sm);
	cursor: pointer;
	margin: 0;
}

.hhb-ui .hhb-payment-plan-option input[type="radio"] {
	margin-top: 2px;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.hhb-ui .hhb-payment-plan-label {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--hhb-color-text);
}

.hhb-ui .hhb-payment-plan-subtext {
	display: block;
	margin-top: var(--hhb-space-xs);
	font-size: 14px;
	font-weight: 400;
	color: var(--hhb-color-text-secondary);
}

.hhb-ui .hhb-payment-plan-schedule {
	margin-top: var(--hhb-space-md);
	padding-top: var(--hhb-space-md);
	border-top: 1px solid var(--hhb-color-border);
}

.hhb-ui .hhb-schedule-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.hhb-ui .hhb-schedule-table thead th {
	padding: var(--hhb-space-sm);
	text-align: left;
	font-weight: 600;
	color: var(--hhb-color-text);
	border-bottom: 2px solid var(--hhb-color-border);
	background: var(--hhb-color-background-alt);
}

.hhb-ui .hhb-schedule-table tbody td {
	padding: var(--hhb-space-sm);
	border-bottom: 1px solid var(--hhb-color-border);
	color: var(--hhb-color-text-secondary);
}

.hhb-ui .hhb-schedule-table tfoot td {
	padding: var(--hhb-space-sm);
	font-weight: 600;
	color: var(--hhb-color-text);
	border-top: 2px solid var(--hhb-color-border);
}

.hhb-ui .hhb-schedule-table tbody tr:last-child td {
	border-bottom: none;
}

/* Responsive adjustments for payment plans */
@media (max-width: 768px) {
	.hhb-ui .hhb-payment-plans {
		padding: var(--hhb-space-md);
	}
	
	.hhb-ui .hhb-payment-plan-option {
		padding: var(--hhb-space-sm);
	}
	
	.hhb-ui .hhb-schedule-table {
		font-size: 13px;
	}
	
	.hhb-ui .hhb-schedule-table thead th,
	.hhb-ui .hhb-schedule-table tbody td,
	.hhb-ui .hhb-schedule-table tfoot td {
		padding: var(--hhb-space-xs);
	}
}