/**
 * BB Booking Flow — Mediterranean Frontend Styles
 * Responsive, Accessible & High-Aesthetic Component for Gutenberg / FSE
 */

:root {
	--bb-bf-primary: var(--wp--preset--color--primary, #C25E37);
	--bb-bf-primary-dark: #A04A26;
	--bb-bf-secondary: var(--wp--preset--color--secondary, #1A4C78);
	--bb-bf-base: var(--wp--preset--color--base, #FBF7F0);
	--bb-bf-surface: var(--wp--preset--color--surface, #FFFFFF);
	--bb-bf-ink: var(--wp--preset--color--ink, #2C2623);
	--bb-bf-muted: var(--wp--preset--color--muted, #6E675F);
	--bb-bf-accent: var(--wp--preset--color--accent, #DCE6D8);
	--bb-bf-accent-dark: #3F5E38;
	--bb-bf-border: rgba(220, 230, 216, 0.9);
	--bb-bf-radius-lg: 24px;
	--bb-bf-radius-md: 16px;
	--bb-bf-radius-sm: 8px;
	--bb-bf-shadow: 0 16px 40px rgba(70, 45, 25, 0.08);
	--bb-bf-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Container principale: Sempre a tutta pagina / Wide layout */
.bb-booking-flow-container,
.is-layout-constrained > .bb-booking-flow-container,
.is-layout-flow > .bb-booking-flow-container,
.entry-content > .bb-booking-flow-container,
.wp-block-group > .bb-booking-flow-container {
	width: 100% !important;
	max-width: 1360px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* Espansione a tutta pagina dei blocchi Gutenberg che contengono il booking flow */
.entry-content > .wp-block-group:has(.bb-booking-flow-container),
.wp-block-group:has(> .bb-booking-flow-container),
.wp-block-group:has(.bb-booking-flow-container),
body.home main > .bb-hero + .wp-block-group,
main > .bb-hero + .wp-block-group,
.bb-hero + .wp-block-group {
	max-width: min(100%, 1400px) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(0.75rem, 3.5vw, 2.5rem) !important;
	padding-right: clamp(0.75rem, 3.5vw, 2.5rem) !important;
	box-sizing: border-box !important;
}

.bb-booking-flow-container {
	font-family: inherit;
	color: var(--bb-bf-ink);
	background: var(--bb-bf-surface);
	border: 1px solid var(--bb-bf-border);
	border-radius: var(--bb-bf-radius-lg);
	padding: clamp(1.25rem, 2.5vw, 2.25rem);
	box-shadow: var(--bb-bf-shadow);
	margin: 2rem auto;
	box-sizing: border-box;
	position: relative;
}

.bb-booking-flow-container *,
.bb-booking-flow-container *::before,
.bb-booking-flow-container *::after {
	box-sizing: inherit;
}

/* Header */
.bb-bf-header {
	text-align: center;
	margin-bottom: 2rem;
}

.bb-bf-title {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	color: var(--bb-bf-ink);
	letter-spacing: -0.02em;
}

.bb-bf-subtitle {
	color: var(--bb-bf-muted);
	font-size: 1rem;
	margin: 0;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
}

/* Stepper */
.bb-bf-stepper {
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--bb-bf-border);
	padding-bottom: 1.5rem;
}

.bb-bf-steps {
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

.bb-bf-step {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--bb-bf-muted);
	font-size: 0.9rem;
	font-weight: 500;
	transition: var(--bb-bf-transition);
}

.bb-bf-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bb-bf-base);
	border: 2px solid var(--bb-bf-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--bb-bf-muted);
	transition: var(--bb-bf-transition);
}

.bb-bf-step.is-active {
	color: var(--bb-bf-primary);
	font-weight: 600;
}

.bb-bf-step.is-active .bb-bf-step-num {
	background: var(--bb-bf-primary);
	border-color: var(--bb-bf-primary);
	color: #FFFFFF;
}

.bb-bf-step.is-completed {
	color: var(--bb-bf-secondary);
}

.bb-bf-step.is-completed .bb-bf-step-num {
	background: var(--bb-bf-secondary);
	border-color: var(--bb-bf-secondary);
	color: #FFFFFF;
}

/* Persistent Active Summary Bar */
.bb-bf-active-summary-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #F9F6F0;
	border: 1px solid var(--bb-bf-border);
	border-left: 4px solid var(--bb-bf-primary);
	border-radius: var(--bb-bf-radius-md);
	padding: 0.85rem 1.25rem;
	margin-bottom: 2rem;
	gap: 1rem;
	box-shadow: 0 4px 14px rgba(70, 45, 25, 0.04);
	transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.25s ease;
}

.bb-bf-active-summary-bar.is-updated {
	animation: bbSummaryPulse 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bbSummaryPulse {
	0% {
		background-color: #FDF3E7;
		border-color: var(--bb-bf-primary);
		transform: scale(1.01);
	}
	50% {
		background-color: #FEF7EE;
		border-color: var(--bb-bf-primary);
	}
	100% {
		background-color: #F9F6F0;
		border-color: var(--bb-bf-border);
		transform: scale(1);
	}
}

.bb-bf-as-content {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	flex: 1;
}

.bb-bf-as-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.bb-bf-as-icon {
	font-size: 1.25rem;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
}

.bb-bf-as-data {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.bb-bf-as-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: var(--bb-bf-muted);
}

.bb-bf-as-values {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.bb-bf-as-values strong {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--bb-bf-ink);
}

.bb-bf-as-nights {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--bb-bf-primary);
	background: rgba(194, 94, 55, 0.1);
	padding: 0.15rem 0.45rem;
	border-radius: 12px;
	white-space: nowrap;
}

.bb-bf-as-divider {
	width: 1px;
	height: 32px;
	background: var(--bb-bf-border);
}

.bb-bf-as-edit-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #FFFFFF;
	border: 1px solid var(--bb-bf-border);
	color: var(--bb-bf-ink);
	padding: 0.45rem 0.9rem;
	border-radius: var(--bb-bf-radius-sm);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--bb-bf-transition);
	white-space: nowrap;
}

.bb-bf-as-edit-btn:hover {
	background: var(--bb-bf-primary);
	border-color: var(--bb-bf-primary);
	color: #FFFFFF;
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	.bb-bf-active-summary-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		padding: 1rem;
	}
	.bb-bf-as-divider {
		display: none;
	}
	.bb-bf-as-content {
		gap: 0.75rem;
	}
	.bb-bf-as-edit-btn {
		justify-content: center;
		width: 100%;
	}
}

/* Alert Notifications */
.bb-bf-alert {
	padding: 1rem 1.25rem;
	border-radius: var(--bb-bf-radius-sm);
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.bb-bf-alert-error {
	background: #FDF2F2;
	color: #9B1C1C;
	border: 1px solid #F8B4B4;
}

.bb-bf-alert-success {
	background: #F3FAF7;
	color: #0E9F6E;
	border: 1px solid #84E1BC;
}

.bb-bf-alert-info {
	background: #EBF5FF;
	color: #1E429F;
	border: 1px solid #A4CAFE;
}

/* Forms & Fields */
.bb-bf-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.bb-bf-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.bb-bf-field label,
.bb-bf-form-group label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bb-bf-ink);
}

.bb-bf-input,
.bb-bf-select,
.bb-bf-textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--bb-bf-ink);
	background: var(--bb-bf-base);
	border: 1px solid var(--bb-bf-border);
	border-radius: var(--bb-bf-radius-sm);
	transition: var(--bb-bf-transition);
}

.bb-bf-input:focus,
.bb-bf-select:focus,
.bb-bf-textarea:focus {
	outline: 2px solid var(--bb-bf-primary);
	outline-offset: 2px;
	background: #FFFFFF;
	border-color: var(--bb-bf-primary);
}

/* Children Ages Grid */
.bb-bf-children-ages {
	background: rgba(220, 230, 216, 0.35);
	border-radius: var(--bb-bf-radius-md);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	border: 1px dashed var(--bb-bf-border);
}

.bb-bf-ages-title {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0 0 0.75rem 0;
	color: var(--bb-bf-ink);
}

.bb-bf-ages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
}

/* Buttons */
.bb-bf-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.bb-bf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: var(--bb-bf-transition);
	text-decoration: none;
}

.bb-bf-btn-primary {
	background: var(--bb-bf-primary);
	color: #FFFFFF;
	box-shadow: 0 6px 20px rgba(194, 94, 55, 0.25);
}

.bb-bf-btn-primary:hover:not(:disabled) {
	background: var(--bb-bf-primary-dark);
	transform: translateY(-1px);
}

.bb-bf-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bb-bf-btn-secondary {
	background: var(--bb-bf-secondary);
	color: #FFFFFF;
}

.bb-bf-btn-secondary:hover:not(:disabled) {
	background: #13385B;
}

.bb-bf-btn-text {
	background: transparent;
	border: none;
	color: var(--bb-bf-secondary);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0.25rem 0;
	transition: var(--bb-bf-transition);
}

.bb-bf-btn-text:hover {
	text-decoration: underline;
}

.bb-btn-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #FFFFFF;
	animation: bb-spin 0.8s linear infinite;
}

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

/* Panel Header */
.bb-bf-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--bb-bf-border);
}

.bb-bf-panel-head h4 {
	font-size: 1.25rem;
	margin: 0;
	font-weight: 700;
}

/* Unit Cards List */
.bb-bf-units-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.bb-bf-unit-card {
	display: grid;
	grid-template-columns: 280px 1fr auto;
	gap: 1.5rem;
	background: var(--bb-bf-base);
	border: 1px solid var(--bb-bf-border);
	border-radius: var(--bb-bf-radius-md);
	overflow: hidden;
	padding: 1rem;
	align-items: center;
	transition: var(--bb-bf-transition);
}

.bb-bf-unit-card:hover {
	border-color: var(--bb-bf-primary);
	box-shadow: 0 10px 30px rgba(70, 45, 25, 0.07);
}

.bb-bf-unit-card.is-unavailable {
	opacity: 0.65;
	background: #FAF8F5;
}

.bb-bf-unit-media {
	width: 100%;
	height: 180px;
	border-radius: var(--bb-bf-radius-sm);
	overflow: hidden;
	background: #E5E0D8;
}

.bb-bf-unit-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-bf-unit-content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bb-bf-unit-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0;
}

.bb-bf-unit-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: var(--bb-bf-muted);
}

.bb-bf-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}

.bb-bf-badge-sage {
	background: var(--bb-bf-accent);
	color: var(--bb-bf-accent-dark);
}

.bb-bf-badge-warning {
	background: #FEF3C7;
	color: #92400E;
}

.bb-bf-unit-pricing {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	min-width: 160px;
}

.bb-bf-price-total {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--bb-bf-primary);
	letter-spacing: -0.02em;
}

.bb-bf-price-nights {
	font-size: 0.82rem;
	color: var(--bb-bf-muted);
}

/* Extras Cards */
.bb-bf-extras-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.bb-bf-extra-card {
	background: var(--bb-bf-base);
	border: 1px solid var(--bb-bf-border);
	border-radius: var(--bb-bf-radius-md);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	transition: var(--bb-bf-transition);
}

.bb-bf-extra-card.is-selected {
	border-color: var(--bb-bf-primary);
	background: #FFF9F5;
}

.bb-bf-extra-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
}

.bb-bf-extra-name {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.25rem 0;
}

.bb-bf-extra-price {
	font-weight: 700;
	color: var(--bb-bf-primary);
	font-size: 0.95rem;
	white-space: nowrap;
}

.bb-bf-extra-desc {
	font-size: 0.85rem;
	color: var(--bb-bf-muted);
	margin: 0;
	line-height: 1.4;
}

/* Coupon Box */
.bb-bf-coupon-box {
	background: var(--bb-bf-base);
	padding: 1.25rem;
	border-radius: var(--bb-bf-radius-md);
	border: 1px dashed var(--bb-bf-border);
	max-width: 480px;
	margin-bottom: 2rem;
}

.bb-bf-coupon-input-group {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.4rem;
}

.bb-bf-coupon-msg {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Live Floating Bar */
.bb-bf-live-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #2C2623;
	color: #FFFFFF;
	padding: 1.25rem 2rem;
	border-radius: var(--bb-bf-radius-md);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.bb-bf-live-label {
	font-size: 0.9rem;
	color: #B5ACA3;
	display: block;
}

.bb-bf-live-amount {
	font-size: 1.5rem;
	font-weight: 800;
	color: #FFFFFF;
}

/* Step 4: Summary & Breakdown */
.bb-bf-summary-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.bb-bf-summary-grid > .bb-bf-breakdown-card,
.bb-bf-summary-grid > .bb-bf-guest-card {
	grid-column: auto !important;
	width: auto;
	min-width: 0;
}

.bb-bf-breakdown-card,
.bb-bf-guest-card {
	background: var(--bb-bf-base);
	border: 1px solid var(--bb-bf-border);
	border-radius: var(--bb-bf-radius-md);
	padding: 1.75rem;
}

.bb-bf-card-title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1.25rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--bb-bf-border);
}

.bb-bf-breakdown-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
}

.bb-bf-breakdown-table tr {
	border-bottom: 1px solid rgba(220, 230, 216, 0.6);
}

.bb-bf-breakdown-table td {
	padding: 0.6rem 0;
	font-size: 0.92rem;
}

.bb-bf-breakdown-table td:last-child {
	text-align: right;
	font-weight: 600;
}

.bb-bf-payment-split {
	background: #FFFFFF;
	border-radius: var(--bb-bf-radius-sm);
	padding: 1rem;
	border: 1px solid var(--bb-bf-border);
	margin-top: 1rem;
}

.bb-bf-split-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
}

.bb-bf-split-due-now {
	color: var(--bb-bf-primary);
	font-weight: 800;
	font-size: 1.2rem;
}

.bb-bf-split-on-site {
	color: var(--bb-bf-muted);
	font-size: 0.9rem;
}

.bb-bf-secure-hint {
	font-size: 0.82rem;
	color: var(--bb-bf-muted);
	text-align: center;
	margin: 0;
}

.bb-bf-form-group {
	margin-bottom: 1rem;
}

/* Step 5: Hold Confirmation & Countdown */
.bb-bf-hold-success {
	text-align: center;
	padding: 2rem 1rem;
	max-width: 640px;
	margin: 0 auto;
}

.bb-bf-hold-icon {
	width: 64px;
	height: 64px;
	background: var(--bb-bf-accent);
	color: var(--bb-bf-accent-dark);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 800;
	margin: 0 auto 1.5rem auto;
}

.bb-bf-hold-heading {
	font-size: 1.8rem;
	font-weight: 800;
	margin: 0 0 0.5rem 0;
	color: var(--bb-bf-ink);
}

.bb-bf-hold-subheading {
	color: var(--bb-bf-muted);
	font-size: 1rem;
	margin: 0 0 2rem 0;
}

.bb-bf-timer-card {
	background: #FFF9F5;
	border: 2px solid var(--bb-bf-primary);
	border-radius: var(--bb-bf-radius-md);
	padding: 1.75rem;
	margin-bottom: 2rem;
}

.bb-bf-timer-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--bb-bf-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.bb-bf-timer-digits {
	font-size: 3.5rem;
	font-weight: 900;
	color: var(--bb-bf-primary);
	line-height: 1;
	display: inline-block;
	animation: bb-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bb-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.85; transform: scale(0.98); }
}

.bb-bf-timer-desc {
	font-size: 0.85rem;
	color: var(--bb-bf-muted);
	margin: 0.75rem 0 0 0;
}

.bb-bf-hold-details {
	background: var(--bb-bf-base);
	border: 1px solid var(--bb-bf-border);
	border-radius: var(--bb-bf-radius-sm);
	padding: 1.25rem;
	margin-bottom: 2rem;
	text-align: left;
}

.bb-bf-next-steps {
	background: #F3FAF7;
	border: 1px solid #84E1BC;
	border-radius: var(--bb-bf-radius-md);
	padding: 1.5rem;
	text-align: left;
}

.bb-bf-next-steps h5 {
	margin: 0 0 0.5rem 0;
	color: #0E9F6E;
	font-size: 1.05rem;
}

.bb-bf-next-steps p {
	margin: 0;
	color: #1F2A37;
	font-size: 0.92rem;
	line-height: 1.5;
}

/* ==========================================================================
   Booking Surface Base Styling (Modern Booking Layout)
   ========================================================================== */

.bb-booking-flow-container {
	--bb-bf-primary: #0071c2;
	--bb-bf-primary-dark: #005999;
	--bb-bf-secondary: #003b95;
	--bb-bf-base: #f5f7fa;
	--bb-bf-accent: #e7f4ee;
	--bb-bf-accent-dark: #006607;
	--bb-bf-border: #d7dce1;
	--bb-bf-radius-lg: 16px;
	--bb-bf-radius-md: 10px;
	--bb-bf-radius-sm: 6px;
	--bb-bf-shadow: 0 12px 32px rgba(0, 27, 65, 0.12);
	width: 100% !important;
	max-width: 1360px !important;
	padding: clamp(1.25rem, 2.5vw, 2.25rem);
	border-color: #cbd3dc;
	box-shadow: var(--bb-bf-shadow);
	margin: 0 auto;
	box-sizing: border-box;
}

.bb-bf-direct-badge {
	display: inline-flex;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: #e7f4ee;
	color: #006607;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bb-bf-header { text-align: left; margin: 0.65rem 0 1.1rem; }
.bb-bf-title { font-size: clamp(1.35rem, 2.5vw, 1.8rem); color: #1a1a1a; }
.bb-bf-subtitle { margin: 0.25rem 0 0; max-width: none; }
.bb-bf-stepper { margin-bottom: 1.25rem; padding-bottom: 0.85rem; }
.bb-bf-step { font-size: 0.82rem; }
.bb-bf-step-num { width: 26px; height: 26px; }

.bb-bf-form-grid {
	grid-template-columns: repeat(4, minmax(145px, 1fr));
	gap: 4px;
	margin: 0;
	padding: 4px;
	border-radius: 10px;
	background: #febb02;
}

.bb-bf-field { gap: 0; position: relative; }
.bb-bf-field label {
	position: absolute;
	top: 0.42rem;
	left: 0.85rem;
	z-index: 1;
	font-size: 0.68rem;
	line-height: 1;
	color: #4a4a4a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bb-bf-field label span { font-size: 0.78rem; filter: grayscale(1); }
.bb-bf-input,
.bb-bf-select {
	min-height: 60px;
	padding: 1.35rem 0.85rem 0.35rem;
	background: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 650;
	color: #1a1a1a;
	font-size: 16px; /* Prevents auto zoom in iOS Safari */
	box-sizing: border-box;
	width: 100%;
}
.bb-bf-input:focus,
.bb-bf-select:focus { outline: 3px solid rgba(0, 113, 194, 0.35); outline-offset: -3px; }
.bb-bf-actions { align-items: stretch; margin: 0.85rem 0 0; }
.bb-bf-btn { border-radius: 6px; font-weight: 750; }
.bb-bf-btn-primary { background: #0071c2; box-shadow: none; }
.bb-bf-btn-primary:hover:not(:disabled) { background: #005999; }
.bb-btn-search { align-self: flex-end; min-width: 220px; min-height: 52px; }
.bb-bf-search-note { margin: 0.6rem 0 0; color: #5f6b76; font-size: 0.78rem; text-align: right; }
.bb-bf-unit-card { background: #fff; border-color: #cbd3dc; }
.bb-bf-unit-card:hover { border-color: #0071c2; box-shadow: 0 8px 24px rgba(0, 59, 149, 0.1); }
.bb-bf-unit-title,
.bb-bf-price-total { color: #0071c2; }
.bb-bf-live-bar { background: #003b95; }

/* ==========================================================================
   Responsive Breakpoints & Mobile Optimization
   ========================================================================== */

@media (max-width: 1024px) {
	.bb-bf-unit-card {
		grid-template-columns: 220px 1fr auto;
		gap: 1.25rem;
	}
}

@media (max-width: 900px) {
	.bb-bf-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.bb-booking-flow-container {
		padding: 1.25rem 1rem !important;
		border-radius: 14px;
		margin: 1rem auto;
	}

	.bb-bf-header {
		text-align: left;
		margin: 0.4rem 0 0.85rem;
	}

	.bb-bf-title {
		font-size: clamp(1.25rem, 4.5vw, 1.6rem);
	}

	.bb-bf-subtitle {
		font-size: 0.88rem;
		line-height: 1.4;
	}

	.bb-bf-stepper {
		margin-bottom: 1.25rem;
		padding-bottom: 0.75rem;
	}

	.bb-bf-steps {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.4rem;
		overflow-x: auto;
		padding: 0.25rem 0;
		scrollbar-width: none;
	}

	.bb-bf-steps::-webkit-scrollbar {
		display: none;
	}

	.bb-bf-step {
		gap: 0.35rem;
		font-size: 0.78rem;
		flex-shrink: 0;
	}

	.bb-bf-step-num {
		width: 24px;
		height: 24px;
		font-size: 0.72rem;
		flex-shrink: 0;
	}

	.bb-bf-step-label {
		display: none;
	}

	.bb-bf-step.is-active .bb-bf-step-label {
		display: inline-block;
		font-weight: 700;
		font-size: 0.8rem;
	}

	/* Persistent Summary Bar on mobile */
	.bb-bf-active-summary-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		padding: 0.85rem 1rem;
		margin-bottom: 1.25rem;
	}

	.bb-bf-as-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		width: 100%;
	}

	.bb-bf-as-divider {
		display: none;
	}

	.bb-bf-as-item {
		width: 100%;
		gap: 0.5rem;
	}

	.bb-bf-as-values {
		font-size: 0.88rem;
	}

	.bb-bf-as-edit-btn {
		width: 100%;
		min-height: 40px;
		justify-content: center;
		font-size: 0.82rem;
	}

	/* Flexible Dates Matrix on mobile */
	.bb-bf-matrix-container {
		padding: 0.75rem 0.5rem;
		margin-bottom: 1.25rem;
	}

	.bb-bf-matrix-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.bb-bf-matrix-title {
		font-size: 0.88rem;
	}

	.bb-bf-matrix-hint {
		font-size: 0.75rem;
	}

	.bb-bf-matrix-strip {
		padding: 0.85rem 0.25rem 0.5rem;
		gap: 0.4rem;
	}

	.bb-bf-matrix-card {
		flex: 0 0 96px;
		min-width: 96px;
		padding: 0.65rem 0.25rem 0.45rem;
	}

	.bb-bf-matrix-dow {
		font-size: 0.7rem;
	}

	.bb-bf-matrix-date {
		font-size: 0.95rem;
	}

	.bb-bf-matrix-price {
		font-size: 0.82rem;
	}

	.bb-bf-matrix-badge-cheapest,
	.bb-bf-matrix-badge-selected {
		font-size: 0.55rem;
		padding: 1px 5px;
		top: -8px;
	}

	/* Accommodation Unit Cards on mobile */
	.bb-bf-unit-card {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 0.85rem;
		text-align: left;
	}

	.bb-bf-unit-media {
		height: 190px;
		width: 100%;
	}

	.bb-bf-unit-pricing {
		width: 100%;
		align-items: stretch;
		text-align: left;
		border-top: 1px solid var(--bb-bf-border);
		padding-top: 0.85rem;
		margin-top: 0.5rem;
	}

	.bb-bf-unit-pricing .bb-bf-price-total {
		font-size: 1.45rem;
	}

	.bb-bf-unit-pricing .bb-bf-btn {
		width: 100%;
		min-height: 46px;
		margin-top: 0.4rem;
	}

	.bb-btn-unit-matrix {
		width: 100%;
		text-align: center;
		margin-top: 0.5rem;
	}

	/* Extras, Summary & Holds on mobile */
	.bb-bf-extras-list {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.bb-bf-live-bar {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
		padding: 1rem;
	}

	.bb-bf-live-bar .bb-bf-btn {
		width: 100%;
		min-height: 48px;
	}

	.bb-bf-summary-grid {
		grid-template-columns: 1fr !important;
		gap: 1.25rem;
	}

	.bb-bf-breakdown-card,
	.bb-bf-guest-card {
		padding: 1.25rem 1rem;
	}

	.bb-bf-form-group input,
	.bb-bf-form-group select,
	.bb-bf-form-group textarea {
		font-size: 16px !important;
		min-height: 48px;
	}

	.bb-bf-actions {
		flex-direction: column;
		gap: 0.75rem;
	}

	.bb-bf-actions .bb-bf-btn {
		width: 100%;
		min-height: 48px;
	}
}

@media (max-width: 560px) {
	.bb-booking-flow-container {
		padding: 1rem 0.75rem !important;
		border-radius: 12px;
	}

	.bb-bf-form-grid {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 6px;
	}

	.bb-btn-search {
		width: 100%;
		min-height: 52px;
		font-size: 1.05rem;
	}

	.bb-bf-search-note {
		text-align: center;
	}
}

@media (max-width: 400px) {
	.bb-booking-flow-container {
		padding: 0.85rem 0.6rem !important;
	}

	.bb-bf-unit-media {
		height: 160px;
	}

	.bb-bf-step-num {
		width: 22px;
		height: 22px;
		font-size: 0.7rem;
	}

	.bb-bf-timer-digits {
		font-size: clamp(2rem, 7vw, 2.6rem);
	}
}

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

	.bb-btn-spinner {
		border: 2px solid #FFFFFF;
	}
}

/* Specchio Date Flessibili 14 Giorni (Booking.com style) */
.bb-bf-matrix-container {
	background: #f5f7fa;
	border: 1px solid #d3dce6;
	border-radius: 8px;
	padding: 1rem 1.15rem;
	margin-bottom: 1.5rem;
}

.bb-bf-matrix-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.85rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bb-bf-matrix-title {
	font-weight: 700;
	font-size: 0.95rem;
	color: #003b95;
}

.bb-bf-matrix-hint {
	font-size: 0.8rem;
	color: #5f6b76;
}

.bb-bf-matrix-strip {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding: 0.65rem 0.25rem;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.bb-bf-matrix-strip::-webkit-scrollbar {
	height: 6px;
}

.bb-bf-matrix-strip::-webkit-scrollbar-thumb {
	background: #cbd3dc;
	border-radius: 3px;
}

.bb-bf-matrix-card {
	flex: 0 0 115px;
	min-width: 115px;
	background: #ffffff;
	border: 1px solid #d0d7de;
	border-radius: 8px;
	padding: 0.65rem 0.35rem 0.5rem;
	text-align: center;
	position: relative;
	transition: all 0.15s ease-in-out;
	cursor: pointer;
	user-select: none;
}

.bb-bf-matrix-card:hover:not(.is-unavailable) {
	border-color: #0071c2;
	box-shadow: 0 4px 12px rgba(0, 113, 194, 0.15);
	transform: translateY(-2px);
}

.bb-bf-matrix-card.is-selected {
	border: 2px solid #0071c2;
	background: #f0f7fc;
	font-weight: 600;
}

.bb-bf-matrix-card.is-cheapest {
	border-color: #008234;
	background: #f2fbf4;
}

.bb-bf-matrix-card.is-cheapest.is-selected {
	border: 2px solid #008234;
}

.bb-bf-matrix-card.is-unavailable {
	opacity: 0.5;
	background: #f8f9fa;
	border: 1px dashed #c0c4cc;
	cursor: not-allowed;
}

.bb-bf-matrix-dow {
	font-size: 0.76rem;
	text-transform: uppercase;
	font-weight: 700;
	color: #5f6b76;
	letter-spacing: 0.03em;
}

.bb-bf-matrix-date {
	font-size: 1.05rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0.15rem 0;
	line-height: 1.2;
}

.bb-bf-matrix-full-date {
	font-size: 0.72rem;
	color: #7b8692;
	font-weight: 500;
}

.bb-bf-matrix-price {
	margin-top: 0.35rem;
	font-size: 0.9rem;
	color: #0071c2;
	font-weight: 700;
}

.bb-bf-matrix-card.is-cheapest .bb-bf-matrix-price {
	color: #008234;
}

.bb-bf-matrix-sub {
	display: block;
	font-size: 0.68rem;
	color: #5f6b76;
	font-weight: 500;
	margin-top: 2px;
}

.bb-bf-matrix-soldout {
	font-size: 0.75rem;
	color: #c93b2b;
	font-weight: 600;
}

.bb-bf-matrix-badge-cheapest {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	background: #008234;
	color: #ffffff;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 1px 7px;
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0, 130, 52, 0.25);
	text-transform: uppercase;
}

.bb-bf-matrix-badge-selected {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	background: #0071c2;
	color: #ffffff;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 1px 7px;
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0, 113, 194, 0.25);
	text-transform: uppercase;
}