/* Hotel Booking Lite — frontend */
.hbl-search,
.hbl-checkout,
.hbl-grid,
.hbl-thankyou {
	--hbl-fg: #1c1c1a;
	--hbl-muted: #6b6b66;
	--hbl-line: #e3e2dd;
	--hbl-bg: #faf9f6;
	--hbl-accent: #8a6a3b;
	--hbl-radius: 10px;
	color: var(--hbl-fg);
}

/* --- Form ricerca --- */
.hbl-search {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	padding: 18px;
	background: var(--hbl-bg);
	border: 1px solid var(--hbl-line);
	border-radius: var(--hbl-radius);
	margin: 0 0 28px;
}
.hbl-field { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 140px; }
.hbl-field--sm { flex: 0 0 90px; min-width: 90px; }
.hbl-field--action { flex: 0 0 auto; }
.hbl-field label {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hbl-muted);
	margin-bottom: 5px;
}
.hbl-field input,
.hbl-field select,
.hbl-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--hbl-line);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	box-sizing: border-box;
}
.hbl-field input:focus,
.hbl-field select:focus,
.hbl-field textarea:focus {
	outline: 2px solid var(--hbl-accent);
	outline-offset: 1px;
	border-color: transparent;
}

/* --- Bottoni --- */
.hbl-btn {
	display: inline-block;
	padding: 11px 20px;
	background: var(--hbl-accent);
	color: #fff !important;
	border: 0;
	border-radius: 6px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	cursor: pointer;
	transition: filter .15s ease;
}
.hbl-btn:hover { filter: brightness(.92); }
.hbl-btn--sm { padding: 8px 14px; font-size: 14px; }
.hbl-btn--block { width: 100%; margin-top: 18px; padding: 14px; }

/* --- Griglia alloggi --- */
.hbl-results-head { color: var(--hbl-muted); font-size: 14px; margin: 0 0 14px; }
.hbl-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.hbl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hbl-grid--1 { grid-template-columns: 1fr; }
@media (max-width: 900px) { .hbl-grid, .hbl-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hbl-grid, .hbl-grid--2 { grid-template-columns: 1fr; } }

.hbl-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hbl-line);
	border-radius: var(--hbl-radius);
	overflow: hidden;
	background: #fff;
}
.hbl-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hbl-bg); }
.hbl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.hbl-card:hover .hbl-card__media img { transform: scale(1.04); }
.hbl-card__ph { display: block; width: 100%; height: 100%; background: var(--hbl-bg); }
.hbl-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.hbl-eyebrow {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hbl-accent);
}
.hbl-card__title { margin: 4px 0 10px; font-size: 19px; line-height: 1.3; }
.hbl-card__title a { color: inherit; text-decoration: none; }
.hbl-specs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hbl-specs li { font-size: 13px; color: var(--hbl-muted); }
.hbl-specs li + li::before { content: "·"; margin-right: 14px; color: var(--hbl-line); }
.hbl-card__excerpt { font-size: 14px; color: var(--hbl-muted); margin: 0 0 16px; }
.hbl-card__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--hbl-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.hbl-price small { color: var(--hbl-muted); font-size: 12px; }
.hbl-price strong { font-size: 20px; }

/* --- Checkout --- */
.hbl-checkout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 800px) { .hbl-checkout { grid-template-columns: 1fr; } }
.hbl-checkout__form { order: 1; }
.hbl-checkout__summary {
	order: 2;
	padding: 20px;
	background: var(--hbl-bg);
	border: 1px solid var(--hbl-line);
	border-radius: var(--hbl-radius);
	position: sticky;
	top: 24px;
}
@media (max-width: 800px) { .hbl-checkout__summary { position: static; order: 0; } }
.hbl-checkout h3 { margin: 0 0 14px; font-size: 17px; }
.hbl-checkout__form h3 { margin-top: 28px; }
.hbl-checkout__form h3:first-of-type { margin-top: 0; }
.hbl-row { display: flex; gap: 14px; }
.hbl-row .hbl-field { flex: 1; }
.hbl-checkout__form .hbl-field { margin-bottom: 14px; }
.hbl-summary-room { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.hbl-summary-room img { border-radius: 6px; width: 64px; height: 64px; object-fit: cover; }
.hbl-summary-room strong { display: block; font-size: 15px; }
.hbl-summary-room span { font-size: 13px; color: var(--hbl-muted); }
.hbl-summary-list { list-style: none; margin: 0; padding: 0; }
.hbl-summary-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--hbl-line);
}
.hbl-summary-list li span:first-child { color: var(--hbl-muted); }
.hbl-summary-total { font-size: 16px !important; font-weight: 700; border-bottom: 0 !important; }
.hbl-summary-note { color: var(--hbl-accent); font-weight: 600; border-bottom: 0 !important; }

/* --- Pagamenti --- */
.hbl-payments { display: flex; flex-direction: column; gap: 10px; }
.hbl-payment {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px;
	border: 1px solid var(--hbl-line);
	border-radius: 8px;
	cursor: pointer;
}
.hbl-payment:has(input:checked) { border-color: var(--hbl-accent); background: var(--hbl-bg); }
.hbl-payment input { margin-top: 3px; }
.hbl-payment strong { display: block; font-size: 15px; }
.hbl-payment small { color: var(--hbl-muted); font-size: 13px; }
.hbl-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 14px; }
.hbl-hp { position: absolute; left: -9999px; }

/* --- Avvisi --- */
.hbl-notice {
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--hbl-bg);
	border: 1px solid var(--hbl-line);
	font-size: 14px;
	margin: 0 0 20px;
}
.hbl-notice--error { background: #fdf1f0; border-color: #f0c7c3; }
.hbl-notice--ok { background: #f0f8f1; border-color: #bfe0c4; }

/* --- Thank you --- */
.hbl-thankyou { max-width: 560px; }
.hbl-thankyou h2 { margin: 0 0 14px; }

/* --- Scheda alloggio --- */
.hbl-amenities {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 6px 16px;
}
.hbl-amenities li {
	font-size: 14px;
	padding-left: 18px;
	position: relative;
	color: #4a4a45;
}
.hbl-amenities li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8a6a3b;
}
.hbl-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
	margin: 0 0 28px;
}
.hbl-gallery a { display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3; }
.hbl-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.hbl-gallery a:hover img { transform: scale(1.05); }