/**
 * Hotel Booking Manager - Frontend Template Styles
 * Covers: single-hbm_hotel.php, single-hbm_room.php, archive-hbm_hotel.php
 * Uses theme's CSS custom properties (--primary, --heading, --text, --primary-font)
 * to look native to the HotelFT theme design.
 */

.hbm-template-wrap {
	font-family: var(--hbm-font, var(--primary-font, inherit));
	color: var(--hbm-text, var(--text, #444));
}

/* Our own hero section already shows the Hotel/Room name over a full-width
   image, so hide the theme's small breadcrumb bar (which also prints the
   title) on these two templates to avoid the name appearing twice. */
body.single-hbm_hotel .wrap_breadcrumbs,
body.single-hbm_room .wrap_breadcrumbs,
body.post-type-archive-hbm_hotel .wrap_breadcrumbs {
	display: none;
}

/* Checkout is a focused, minimal-distraction page - hide the theme's full
   nav menu and breadcrumb bar, keep only the logo from its header. */
body.hbm-checkout-page .main-navigation,
body.hbm-checkout-page .wrap_breadcrumbs {
	display: none;
}

/* ==================== CHECKOUT PAGE ==================== */

.hbm-checkout-topbar {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--hbm-bg, #fff);
	border-bottom: 1px solid #eee;
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.hbm-checkout-topbar-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 72px;
}

.hbm-checkout-back {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f4f4f5;
	color: var(--hbm-heading, var(--heading, #222));
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: 700;
	flex-shrink: 0;
}

.hbm-checkout-back:hover {
	background: #e9e9ea;
}

.hbm-checkout-brand {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.hbm-checkout-brand strong {
	font-size: 16px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-checkout-brand span {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hbm-primary, var(--primary, #d4a656));
	font-weight: 700;
}

.hbm-checkout-steps {
	display: none;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	color: #b5b5b5;
	flex: 1;
	justify-content: center;
}

.hbm-step-done {
	color: var(--hbm-primary, var(--primary, #d4a656));
}

.hbm-step-active {
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-checkout-steps .hbm-step::before {
	content: '\2014';
	margin-right: 10px;
	color: #ddd;
}

.hbm-checkout-steps .hbm-step:first-child::before {
	content: '';
	margin: 0;
}

.hbm-checkout-ssl {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: #999;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.hbm-checkout-steps {
		display: flex;
	}
}

.hbm-checkout-body {
	padding: 32px 0 60px;
}

.hbm-checkout-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

@media (min-width: 992px) {
	.hbm-checkout-grid {
		grid-template-columns: 1.7fr 1fr;
	}
}

.hbm-checkout-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.hbm-checkout-card {
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #eee);
	border-radius: 16px;
	padding: 24px 28px;
}

.hbm-checkout-card h2 {
	font-size: 18px;
	color: var(--hbm-heading, var(--heading, #222));
	margin: 0;
}

.hbm-checkout-card-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.hbm-checkout-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	color: #1a7f3c;
	background: #eafaf0;
	border: 1px solid #cdeedb;
	padding: 4px 12px;
	border-radius: 20px;
}

.hbm-checkout-card-sub {
	font-size: 12px;
	color: #999;
	margin: 4px 0 20px;
}

@media (max-width: 600px) {
	.hbm-checkout-body {
		padding: 20px 0 40px;
	}
	.hbm-checkout-left {
		gap: 14px;
	}
	.hbm-checkout-card {
		padding: 18px 16px;
		border-radius: 12px;
	}
	.hbm-checkout-summary-card {
		padding: 16px;
	}
}

.hbm-checkout-right {
	min-width: 0;
}

.hbm-checkout-summary-card {
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #eee);
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.06);
	padding: 22px;
	position: sticky;
	top: 96px;
}

.hbm-checkout-room-preview {
	display: flex;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hbm-border, #f0f0f1);
	margin-bottom: 16px;
}

.hbm-checkout-room-preview img {
	width: 84px;
	height: 84px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
}

.hbm-checkout-room-preview h3 {
	font-size: 15px;
	margin: 4px 0 6px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-checkout-room-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	background: #fdf1d8;
	color: #92650b;
	padding: 3px 8px;
	border-radius: 4px;
}

.hbm-checkout-plan-details {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--hbm-border, #f0f0f1);
}

.hbm-checkout-plan-details h4 {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-checkout-plan-details .hbm-rate-plan-bullets {
	margin-bottom: 10px;
}

.hbm-checkout-stay-recap {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--hbm-border, #f0f0f1);
}

.hbm-stay-recap-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--hbm-text-light, var(--text, #777));
	margin-bottom: 6px;
}

.hbm-stay-recap-row strong {
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-stay-recap-edit {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: var(--hbm-primary, var(--primary, #d4a656));
	text-decoration: none;
	margin-top: 4px;
}

.hbm-add-guest-toggle,
.hbm-gst-toggle {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--hbm-border, #f0f0f1);
}

.hbm-add-guest-toggle #hbm_add_guest_toggle.hbm-btn-link {
	font-size: 13px;
	font-weight: 600;
	white-space: normal;
	max-width: 100%;
}

.hbm-add-guest-toggle #hbm_add_guest_panel {
	margin-top: 12px;
}

.hbm-checkbox-inline {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 600 !important;
	font-size: 13px;
	cursor: pointer;
}

.hbm-gst-toggle #hbm_gst_panel {
	margin-top: 12px;
}

.hbm-checkout-coupon {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--hbm-border, #f0f0f1);
}

.hbm-checkout-coupon label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: #999;
	margin-bottom: 6px;
}

.hbm-checkout-mobile-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--hbm-bg, #fff);
	border-top: 1px solid #eee;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
	padding: 12px 16px;
	align-items: center;
	justify-content: space-between;
}

.hbm-checkout-mobile-price {
	display: flex;
	flex-direction: column;
}

.hbm-checkout-mobile-price span {
	font-size: 10px;
	text-transform: uppercase;
	color: #999;
	font-weight: 700;
}

.hbm-checkout-mobile-price strong {
	font-size: 18px;
	color: var(--hbm-heading, var(--heading, #222));
}

@media (max-width: 991px) {
	.hbm-checkout-mobile-bar {
		display: flex;
	}
	body.hbm-checkout-page {
		padding-bottom: 74px;
	}
	.hbm-checkout-summary-card {
		position: static;
	}
}

/* ==================== CONFIRMATION ("Thank You") PAGE ==================== */

.hbm-confirmation-body {
	padding: 40px 0 60px;
}

.hbm-confirmation-hero {
	text-align: center;
	max-width: 520px;
	margin: 0 auto 40px;
}

.hbm-confirmation-check {
	width: 64px;
	height: 64px;
	line-height: 64px;
	border-radius: 50%;
	background: #eafaf0;
	color: #1a7f3c;
	font-size: 30px;
	font-weight: 700;
	margin: 0 auto 16px;
}

.hbm-confirmation-check-pending {
	background: #fdf1d8;
	color: #92650b;
	font-size: 26px;
}

.hbm-confirmation-check-rejected {
	background: #fdeceb;
	color: #b32d2e;
}

.hbm-confirmation-hero h1 {
	font-size: 28px;
	color: var(--hbm-heading, var(--heading, #222));
	margin: 0 0 10px;
}

.hbm-confirmation-hero p {
	color: var(--hbm-text, var(--text, #666));
	font-size: 14px;
}

.hbm-confirmation-ref {
	display: inline-block;
	margin-top: 14px;
	padding: 8px 18px;
	background: #f6f3ec;
	border-radius: 30px;
	font-size: 13px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-confirmation-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

@media (min-width: 900px) {
	.hbm-confirmation-grid {
		grid-template-columns: 1.7fr 1fr;
	}
}

.hbm-confirmation-main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hbm-confirmation-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hbm-confirmation-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.hbm-confirmation-details-grid span {
	display: block;
	font-size: 11px;
	color: #999;
	margin-bottom: 2px;
}

.hbm-confirmation-details-grid strong {
	font-size: 14px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-confirmation-plan {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--hbm-border, #f0f0f1);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
}

.hbm-confirmation-plan span:not(.hbm-rate-plan-refund-badge) {
	color: #999;
}

.hbm-confirmation-gst {
	margin-top: 12px;
	font-size: 12px;
	color: #999;
}

.hbm-confirmation-total {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--hbm-border, #f0f0f1);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hbm-confirmation-total span {
	font-size: 13px;
	color: #999;
}

.hbm-confirmation-total strong {
	font-size: 22px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-confirmation-next-steps ul {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hbm-confirmation-next-steps li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--hbm-text, var(--text, #555));
}

.hbm-confirmation-next-steps .dashicons {
	color: var(--hbm-primary, var(--primary, #d4a656));
	flex-shrink: 0;
}

.hbm-confirmation-contact strong {
	display: block;
	margin-bottom: 8px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-confirmation-contact p {
	margin: 6px 0;
	font-size: 13px;
}

.hbm-confirmation-contact a {
	color: var(--hbm-text, var(--text, #555));
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hbm-confirmation-contact a:hover {
	color: var(--hbm-primary, var(--primary, #d4a656));
}

/* ==================== HOTEL SINGLE PAGE v2 (premium sections) ==================== */

.hbm-v2 .hbm-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hbm-primary, var(--primary, #d4a656));
	margin-bottom: 8px;
}

.hbm-section {
	padding: 56px 0;
}

.hbm-section-tint {
	background: var(--hbm-bg-tint, #f8f7f5);
	border-top: 1px solid var(--hbm-border, #f0f0f1);
	border-bottom: 1px solid var(--hbm-border, #f0f0f1);
}

.hbm-section-dark {
	background: var(--hbm-dark-bg, #14181f);
	color: var(--hbm-dark-text, #cbd2de);
}

.hbm-section-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 36px;
}

.hbm-section-heading h2 {
	font-size: 28px;
	color: var(--hbm-heading, var(--heading, #222));
	margin: 0;
}

.hbm-section-heading-dark h2 {
	color: #fff;
}

/* ---- Hero ---- */

.hbm-hero-dark {
	background: var(--hbm-dark-bg, #14181f);
	color: #fff;
	padding: 28px 0 40px;
}

.hbm-hero-top-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 22px;
}

.hbm-hero-breadcrumb {
	font-size: 12px;
	color: #9aa3b2;
	margin: 0 0 8px;
}

.hbm-hero-breadcrumb a {
	color: #9aa3b2;
	text-decoration: none;
}

.hbm-hero-breadcrumb a:hover {
	color: var(--hbm-primary, var(--primary, #d4a656));
}

.hbm-hero-breadcrumb span {
	margin: 0 6px;
}

.hbm-v2 .hbm-hotel-title {
	color: #fff;
	font-size: 34px;
	margin: 0 0 6px;
}

.hbm-v2 .hbm-hotel-location {
	color: #b7bfcc;
	font-size: 14px;
	margin: 0;
}

.hbm-v2 .hbm-hotel-location .dashicons {
	color: var(--hbm-primary, var(--primary, #d4a656));
}

.hbm-rating-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	padding: 12px 16px;
	border-radius: 14px;
}

.hbm-rating-badge-score {
	background: #1a7f3c;
	color: #fff;
	font-weight: 800;
	font-size: 18px;
	padding: 6px 12px;
	border-radius: 10px;
}

.hbm-rating-badge-text {
	display: flex;
	flex-direction: column;
	font-size: 12px;
}

.hbm-rating-badge-text strong {
	color: #fff;
	font-size: 13px;
}

.hbm-rating-badge-text span {
	color: #9aa3b2;
}

/* ---- Bento gallery ---- */

.hbm-bento-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 8px;
	height: 420px;
	border-radius: 16px;
	overflow: hidden;
}

.hbm-bento-item {
	position: relative;
	display: block;
	overflow: hidden;
	background: #222;
}

.hbm-bento-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s;
}

.hbm-bento-item:hover img {
	transform: scale(1.06);
}

.hbm-bento-main {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.hbm-bento-more-overlay {
	position: absolute;
	inset: 0;
	background: rgba(10,14,20,0.62);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hbm-bento-more-overlay strong {
	font-size: 16px;
}

.hbm-bento-more-overlay small {
	color: var(--hbm-primary, var(--primary, #d4a656));
	margin-top: 4px;
}

@media (max-width: 782px) {
	.hbm-bento-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		height: 320px;
	}
	.hbm-bento-main {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
}

/* ---- Floating search widget ---- */

/* .hbm-container's own rule (margin: 0 auto) sets margin-top: 0 as part of
   that shorthand and comes later in this file - same specificity (single
   class) + later source order meant it was silently winning over
   margin-top below and cancelling the overlap. The compound selector here
   (two classes, both present on the same element: <div class="hbm-container
   hbm-floating-search">) has higher specificity so this reliably wins
   regardless of rule order. */
.hbm-container.hbm-floating-search {
	position: relative;
	z-index: 20;
	margin-top: -30px;
	margin-bottom: 40px;
}

/* ---- About / stats / perks ---- */

.hbm-about-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 48px;
	align-items: start;
}

.hbm-about-main h2 {
	font-size: 30px;
	color: var(--hbm-heading, var(--heading, #222));
	margin: 0 0 20px;
}

.hbm-hotel-description {
	color: var(--hbm-text, var(--text, #555));
	line-height: 1.7;
}

.hbm-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0;
	margin-top: 28px;
	padding: 20px;
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #eee);
	border-radius: 14px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.hbm-stat-tile {
	text-align: center;
	padding: 0 10px;
	border-right: 1px solid #f0f0f1;
}

.hbm-stat-tile:last-child {
	border-right: none;
}

.hbm-stat-value {
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: var(--hbm-primary, var(--primary, #d4a656));
}

.hbm-stat-label {
	display: block;
	font-size: 11px;
	color: #888;
	margin-top: 2px;
}

.hbm-perks-card {
	background: linear-gradient(155deg, #1c222c, var(--hbm-dark-bg, #14181f));
	color: #fff;
	border-radius: 18px;
	padding: 26px;
}

.hbm-perks-card h3 {
	color: var(--hbm-primary, var(--primary, #d4a656));
	font-size: 18px;
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.hbm-perks-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hbm-perks-card li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: #d3d9e3;
}

.hbm-perks-card li .dashicons {
	color: #34d399;
	flex-shrink: 0;
}

.hbm-perks-card-cta {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.12);
	text-align: center;
}

.hbm-perks-card-cta span {
	display: block;
	font-size: 11px;
	color: #9aa3b2;
	margin-bottom: 8px;
}

.hbm-perks-card-cta a {
	display: block;
	background: var(--hbm-primary, var(--primary, #d4a656));
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 12px;
	border-radius: 10px;
	text-decoration: none;
}

@media (max-width: 900px) {
	.hbm-about-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Amenity cards ---- */

.hbm-amenities-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.hbm-amenity-card {
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #eee);
	border-radius: 14px;
	padding: 20px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hbm-heading, var(--heading, #222));
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	transition: box-shadow 0.15s, transform 0.15s;
}

.hbm-amenity-card:hover {
	box-shadow: 0 8px 20px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}

.hbm-amenity-card-icon {
	display: inline-flex;
	color: var(--hbm-primary, var(--primary, #d4a656));
}

.hbm-amenity-card-icon .dashicons,
.hbm-amenity-card-icon svg {
	width: 26px;
	height: 26px;
	font-size: 26px;
}

@media (max-width: 782px) {
	/* Every section used the same 56px top+bottom padding on every screen
	   size - with 6-7 sections on this page that alone added up to nearly
	   800px of pure whitespace on a phone. Cut it down, and tighten the
	   heading/hero spacing that was adding to the same effect. */
	.hbm-section {
		padding: 32px 0;
	}

	.hbm-section-heading {
		margin-bottom: 22px;
	}

	.hbm-section-heading h2 {
		font-size: 22px;
	}

	.hbm-hero-dark {
		padding: 20px 0 28px;
	}

	.hbm-v2 .hbm-hotel-title {
		font-size: 24px;
	}

	.hbm-hotel-description {
		line-height: 1.55;
	}

	/* Amenities: 4 icons per row on mobile instead of the 2 that
	   minmax(150px, 1fr) was fitting - smaller card/icon/gap so the labels
	   still stay legible at that width. */
	.hbm-amenities-cards {
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
	}

	.hbm-amenity-card {
		padding: 12px 6px;
		gap: 6px;
		font-size: 10px;
		border-radius: 10px;
	}

	.hbm-amenity-card-icon .dashicons,
	.hbm-amenity-card-icon svg {
		width: 20px;
		height: 20px;
		font-size: 20px;
	}
}

/* ---- Policies ---- */

.hbm-policy-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.hbm-policy-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 16px;
	padding: 24px;
}

.hbm-policy-card .dashicons {
	color: var(--hbm-primary, var(--primary, #d4a656));
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.hbm-policy-card h3 {
	color: #fff;
	font-size: 16px;
	margin: 12px 0;
}

.hbm-policy-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	color: #b7bfcc;
}

/* ---- Location & landmarks ---- */

.hbm-location-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 32px;
	align-items: stretch;
}

.hbm-location-info h2 {
	font-size: 28px;
	color: var(--hbm-heading, var(--heading, #222));
	margin: 0 0 16px;
}

.hbm-location-info p {
	font-size: 14px;
	color: var(--hbm-text, var(--text, #555));
}

.hbm-landmarks-list {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hbm-landmark-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #eee);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-landmark-distance {
	font-size: 12px;
	font-weight: 700;
	color: var(--hbm-primary, var(--primary, #d4a656));
	background: #fdf8ef;
	padding: 4px 10px;
	border-radius: 20px;
}

.hbm-location-map {
	border-radius: 16px;
	overflow: hidden;
	min-height: 320px;
}

.hbm-location-map iframe {
	min-height: 320px;
}

@media (max-width: 900px) {
	.hbm-location-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- FAQ ---- */

.hbm-faq-wrap {
	max-width: 760px;
}

.hbm-faq-item {
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #eee);
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 12px;
}

.hbm-faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: 14px;
	color: var(--hbm-heading, var(--heading, #222));
	cursor: pointer;
	list-style: none;
}

.hbm-faq-item summary::-webkit-details-marker {
	display: none;
}

.hbm-faq-toggle {
	font-size: 11px;
	color: var(--hbm-primary, var(--primary, #d4a656));
	transition: transform 0.2s;
}

.hbm-faq-item[open] .hbm-faq-toggle {
	transform: rotate(180deg);
}

.hbm-faq-item p {
	font-size: 13px;
	color: var(--hbm-text, var(--text, #666));
	margin: 10px 0 0;
}

/* ---- Sticky mobile booking bar ---- */

.hbm-mobile-sticky-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--hbm-bg, #fff);
	border-top: 1px solid #eee;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
	padding: 12px 16px;
	align-items: center;
	justify-content: space-between;
}

.hbm-mobile-sticky-price span {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	color: #999;
	font-weight: 700;
}

.hbm-mobile-sticky-price strong {
	font-size: 18px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-mobile-sticky-price small {
	font-size: 11px;
	font-weight: 400;
	color: #999;
}

.hbm-mobile-sticky-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hbm-mobile-sticky-whatsapp {
	background: #e7f9ef;
	border: 1px solid #bdeccf;
	border-radius: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 18px;
}

@media (max-width: 782px) {
	.hbm-mobile-sticky-bar {
		display: flex;
	}
	body.single-hbm_hotel {
		padding-bottom: 70px;
	}
}

/* ==================== HOTELS ARCHIVE / SEARCH RESULTS ==================== */

.hbm-archive-search-bar {
	margin-top: -40px;
	margin-bottom: 40px;
	position: relative;
	z-index: 10;
}

.hbm-search-results-title {
	margin-bottom: 24px;
	font-size: 22px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.hbm-panel-block {
	background: var(--hbm-bg, #fff);
	border-radius: 8px;
	padding: 28px 30px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.hbm-panel-block h2 {
	margin-top: 0;
	margin-bottom: 16px;
	font-size: 20px;
	color: var(--hbm-heading, var(--heading, #222));
	border-bottom: 1px solid var(--hbm-border, #f0f0f1);
	padding-bottom: 12px;
}

/* ==================== PRICE HELPERS (shared) ==================== */

/* Two lines when discounted: actual (struck through) on top, discounted
   price + "/night" + "- Save X%" underneath. Falls back to a single line
   (just .hbm-price-line2) when there's no discount. */
.hbm-price-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.hbm-price-actual {
	color: #999;
	font-size: 0.85em;
	text-decoration: line-through;
	line-height: 1.2;
}

.hbm-price-line2 {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.hbm-price-discounted {
	color: var(--hbm-primary, var(--primary, #d4a656));
	font-weight: 700;
	font-size: 1.1em;
}

.hbm-price-suffix {
	color: var(--hbm-text-light, var(--text, #777));
	font-size: 0.8em;
	font-weight: 400;
}

.hbm-price-save-badge {
	color: #1a7f3c;
	font-size: 0.8em;
	font-weight: 700;
	white-space: nowrap;
}

/* ==================== HOTEL SINGLE PAGE ==================== */

.hbm-hotel-hero {
	position: relative;
	min-height: 320px;
	background: #222;
	overflow: hidden;
	margin-bottom: 30px;
}

.hbm-hotel-hero-image {
	position: absolute;
	inset: 0;
}

.hbm-hotel-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbm-hotel-hero-overlay {
	position: relative;
	z-index: 2;
	background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.05));
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 30px;
}

.hbm-hotel-title {
	color: #fff;
	font-size: 32px;
	margin: 0 0 8px;
}

.hbm-hotel-location {
	color: #f0f0f0;
	font-size: 15px;
	margin: 0;
}

.hbm-hotel-body {
	padding-bottom: 60px;
}

.hbm-hotel-description p:first-child {
	margin-top: 0;
}

.hbm-amenities-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbm-amenities-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.hbm-amenities-list .dashicons {
	color: var(--hbm-primary, var(--primary, #d4a656));
}

.hbm-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}

.hbm-gallery-item {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4/3;
}

.hbm-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.hbm-gallery-item:hover img {
	transform: scale(1.05);
}

.hbm-map-embed iframe {
	border-radius: 6px;
	display: block;
}

/* ==================== ROOMS LIST (horizontal detail cards, used on hotel page & anywhere) ==================== */

.hbm-rooms-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hbm-room-card {
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #eee);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	transition: box-shadow 0.2s ease;
}

.hbm-room-card:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* Photo + room details/amenities - a fixed-width column that keeps its own
   natural height regardless of how many rate plan rows sit next to it. Used
   to stretch full-height (align-items default is stretch) and grow along
   with the rate plans list, making the photo look zoomed/oversized once a
   room had several plans - align-items: flex-start above plus this column
   being its own block (not part of the same flex row as the plans) fixes it. */
.hbm-room-card-left {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hbm-room-card-image {
	position: relative;
	display: block;
	overflow: hidden;
	background: #f2f2f2;
	aspect-ratio: 4 / 3;
}

.hbm-room-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbm-room-card-image-placeholder {
	width: 100%;
	height: 100%;
	background: #f2f2f2;
}

.hbm-room-card-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #b32d2e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	letter-spacing: 0.4px;
}

.hbm-room-card-photo-count {
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: rgba(255,255,255,0.95);
	color: var(--hbm-heading, var(--heading, #222));
	font-size: 11px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
}

.hbm-room-card-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hbm-room-card-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.hbm-room-card-title {
	margin: 0 0 4px;
	font-size: 18px;
}

.hbm-room-card-title a {
	color: var(--hbm-heading, var(--heading, #222));
	text-decoration: none;
}

.hbm-room-card-max-guests {
	flex-shrink: 0;
	font-size: 11px;
	color: #888;
	white-space: nowrap;
}

.hbm-room-card-specs {
	display: flex;
	gap: 16px;
	margin: 10px 0;
	flex-wrap: wrap;
}

.hbm-room-card-specs span {
	font-size: 12px;
	color: var(--hbm-text-light, var(--text, #777));
	display: flex;
	align-items: center;
	gap: 4px;
}

.hbm-room-card-specs .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.hbm-room-card-amenities {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hbm-room-card-amenities li {
	font-size: 12px;
	color: var(--hbm-text-light, var(--text, #777));
	padding-left: 14px;
	position: relative;
}

.hbm-room-card-amenities li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--hbm-primary, var(--primary, #d4a656));
}

.hbm-room-card-amenities-more {
	color: var(--hbm-primary, var(--primary, #d4a656)) !important;
	font-weight: 600;
}

.hbm-room-card-more-link {
	margin-top: auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--hbm-primary, var(--primary, #d4a656));
	text-decoration: none;
	align-self: flex-start;
}

.hbm-room-card-rate-plans {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	border-left: 1px solid #f0f0f1;
}

.hbm-rate-plan-row-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--hbm-border, #f0f0f1);
}

.hbm-rate-plan-row-display:last-child {
	border-bottom: none;
}

.hbm-rate-plan-info {
	flex: 1;
	min-width: 0;
}

.hbm-rate-plan-name {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-rate-plan-bullets {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hbm-rate-plan-bullets li {
	font-size: 12px;
	color: var(--hbm-text-light, var(--text, #777));
	display: flex;
	align-items: center;
	gap: 6px;
}

.hbm-rate-plan-bullets .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: #999;
	flex-shrink: 0;
}

.hbm-rate-plan-refund-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 4px;
}

.hbm-rate-plan-refund-badge.hbm-refundable {
	background: #eafaf0;
	color: #1a7f3c;
}

.hbm-rate-plan-refund-badge.hbm-non-refundable {
	background: #fdeceb;
	color: #b32d2e;
}

.hbm-rate-plan-refund-note {
	margin: 0;
	font-size: 11px;
	color: #999;
}

.hbm-rate-plan-cta {
	flex: 0 0 160px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}

.hbm-rate-plan-price {
	font-size: 14px;
	white-space: nowrap;
}

.hbm-rate-plan-cta .hbm-btn {
	white-space: nowrap;
	padding: 10px 22px;
	font-size: 13px;
	width: 100%;
	text-align: center;
}

@media (max-width: 782px) {
	.hbm-room-card {
		flex-direction: column;
	}
	.hbm-room-card-left {
		flex-basis: auto;
		width: 100%;
	}
	.hbm-room-card-image {
		aspect-ratio: 16 / 9;
	}
	.hbm-room-card-rate-plans {
		border-left: none;
		border-top: 1px solid var(--hbm-border, #f0f0f1);
	}
	.hbm-rate-plan-row-display {
		flex-direction: column;
		align-items: stretch;
	}
	.hbm-rate-plan-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
	.hbm-rate-plan-cta .hbm-btn {
		width: auto;
	}
}

/* ==================== HOTELS GRID (archive page) ==================== */

.hbm-archive-hero {
	background: #f6f3ec;
	padding: 50px 0;
	text-align: center;
	margin-bottom: 40px;
}

.hbm-archive-title {
	font-size: 32px;
	color: var(--hbm-heading, var(--heading, #222));
	margin: 0 0 10px;
}

.hbm-archive-subtitle {
	color: var(--hbm-text, var(--text, #666));
	font-size: 15px;
	margin: 0;
}

.hbm-archive-body {
	padding-bottom: 60px;
}

.hbm-hotels-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.hbm-hotel-card {
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #eee);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hbm-hotel-card:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.1);
	transform: translateY(-2px);
}

.hbm-hotel-card-image {
	display: block;
	position: relative;
	aspect-ratio: 16/10;
	background: #f2f2f2;
	overflow: hidden;
}

.hbm-hotel-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbm-hotel-card-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--hbm-success-bg, #1a7f3c);
	color: var(--hbm-success-text, #fff);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
}

.hbm-hotel-card-image-placeholder {
	width: 100%;
	height: 100%;
	background: #f2f2f2;
}

.hbm-hotel-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hbm-hotel-card-title {
	margin: 0 0 6px;
	font-size: 19px;
}

.hbm-hotel-card-title a {
	color: var(--hbm-heading, var(--heading, #222));
	text-decoration: none;
}

.hbm-hotel-card-city {
	font-size: 13px;
	color: var(--hbm-text-light, var(--text, #777));
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hbm-hotel-card-desc {
	font-size: 14px;
	color: var(--hbm-text-light, var(--text, #777));
	margin: 0 0 16px;
	flex: 1;
}

.hbm-hotel-card-btn {
	align-self: flex-start;
}

/* ==================== HOTEL PRICE BADGE ==================== */

.hbm-hotel-price-badge {
	display: inline-block;
	margin-top: 12px;
	padding: 8px 16px;
	background: var(--hbm-primary, var(--primary, #d4a656));
	color: #fff;
	border-radius: 30px;
	font-size: 14px;
}

.hbm-hotel-price-badge strong {
	font-size: 16px;
}

/* ==================== STICKY SECTION NAV ==================== */

.hbm-section-nav {
	position: sticky;
	/* --hbm-sticky-offset is set by public.js to the theme's own fixed
	   header height, so our nav docks just below it instead of the two
	   overlapping at top:0 - defaults to 0 before JS runs / if there's no
	   fixed header to dodge. */
	top: var(--hbm-sticky-offset, 0px);
	z-index: 50;
	background: var(--hbm-bg, #fff);
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* JS-applied fallback (see public.js) for themes whose <body> has
   overflow-x: hidden, which silently breaks position:sticky above. The
   placeholder keeps the page from jumping when the nav leaves normal flow. */
.hbm-section-nav.hbm-nav-fixed {
	position: fixed;
	top: var(--hbm-sticky-offset, 0px);
	left: 0;
	right: 0;
	width: 100%;
}

.hbm-section-nav-placeholder {
	height: 0;
}

.hbm-section-nav .hbm-container {
	display: flex;
	gap: 8px;
	overflow-x: auto;
}

.hbm-section-nav a {
	padding: 16px 18px;
	white-space: nowrap;
	color: var(--hbm-heading, var(--heading, #222));
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.hbm-section-nav a:hover {
	border-bottom-color: var(--hbm-primary, var(--primary, #d4a656));
}

/* ==================== AMENITY CHIPS ==================== */

.hbm-amenities-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hbm-amenity-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #f6f6f7;
	border-radius: 30px;
	font-size: 13px;
	color: var(--hbm-text, var(--text, #444));
}

.hbm-amenity-chip .dashicons,
.hbm-amenity-chip svg {
	color: var(--hbm-primary, var(--primary, #d4a656));
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ==================== GALLERY LIGHTBOX ==================== */

.hbm-gallery-item {
	cursor: zoom-in;
}

.hbm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hbm-lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.hbm-lightbox-close,
.hbm-lightbox-prev,
.hbm-lightbox-next {
	position: absolute;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
	user-select: none;
	padding: 10px;
}

.hbm-lightbox-close {
	top: 16px;
	right: 24px;
	font-size: 34px;
}

.hbm-lightbox-prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.hbm-lightbox-next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

/* ==================== CHECK AVAILABILITY WIDGET ==================== */

.hbm-availability-widget {
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #e2e2e2);
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.16);
	padding: 20px 24px;
}

.hbm-availability-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	align-items: end;
}

.hbm-af-divider {
	display: none;
}

.hbm-af-field {
	display: block;
	min-width: 0;
	position: relative;
}

.hbm-af-icon {
	display: none;
}

.hbm-af-inner {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hbm-af-field label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
	color: var(--hbm-text-light, #9a9a9a);
}

.hbm-af-field input,
.hbm-af-field select,
.hbm-af-guests-toggle,
.hbm-af-static-value {
	border: 1px solid var(--hbm-border, #e2e2e2);
	background: var(--hbm-bg-tint, #faf8f4);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	color: var(--hbm-heading, var(--heading, #222));
	width: 100%;
	box-sizing: border-box;
}

.hbm-af-field input:focus,
.hbm-af-field select:focus {
	outline: 2px solid var(--hbm-primary, var(--primary, #d4a656));
	outline-offset: 1px;
	border-color: var(--hbm-primary, var(--primary, #d4a656));
}

/* A native <select> (Hotel field) shows the browser's own dropdown arrow
   by default; the Guests field is a custom <button>, not a <select>, so
   without this it had no such affordance and looked visually inconsistent
   next to the other fields even though the box styling above was shared.
   Strip the native arrow and draw one manually (pure CSS, no image asset)
   so every dropdown-like field - Hotel select AND Guests toggle - carries
   the exact same chevron. */
.hbm-af-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--hbm-text-light, #9a9a9a) 50%), linear-gradient(135deg, var(--hbm-text-light, #9a9a9a) 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 13px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 32px;
}

/* Same theme button-reset problem as the stepper controls above (this is
   a <button>, and the theme's own default button styling - dark/filled -
   was winning over the neutral box style meant to match Check-in/Check-out/
   Hotel). Force it back to the same neutral box, not accent-colored. */
.hbm-af-guests-toggle {
	position: relative;
	background: var(--hbm-bg-tint, #faf8f4) !important;
	color: var(--hbm-heading, var(--heading, #222)) !important;
	border: 1px solid var(--hbm-border, #e2e2e2) !important;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	padding-right: 32px;
}

.hbm-af-guests-toggle::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--hbm-text-light, #9a9a9a);
	border-bottom: 1.5px solid var(--hbm-text-light, #9a9a9a);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.hbm-af-static-value {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Guests dropdown panel ---- */

.hbm-af-guests-field {
	cursor: pointer;
}

.hbm-af-guests-panel {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 60;
	width: 280px;
	background: var(--hbm-bg, #fff);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.18);
	padding: 20px;
}

.hbm-af-guests-panel.hbm-open {
	display: block;
}

.hbm-af-stepper-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
}

.hbm-af-stepper-row + .hbm-af-stepper-row {
	border-top: 1px solid var(--hbm-border, #f0f0f1);
}

.hbm-af-stepper-row strong {
	font-size: 14px;
	color: var(--hbm-heading, var(--heading, #222));
}

.hbm-af-stepper-hint {
	font-size: 12px;
	color: #999;
}

.hbm-af-stepper {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* The active theme styles every plain <button> with its own dark/accent
   look by default (that's what was winning here) - these are small
   internal stepper controls, not a branded call-to-action, so they're
   forced neutral regardless of the theme's or Style tab's accent color.
   !important is deliberate here (same pattern already used elsewhere in
   this file to defeat theme button resets, e.g. .hbm-radio-label above). */
.hbm-af-stepper-btn {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px;
	border-radius: 50% !important;
	border: 1px solid var(--hbm-border, #ddd) !important;
	background: var(--hbm-bg, #fff) !important;
	color: var(--hbm-heading, var(--heading, #222)) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	padding: 0 !important;
	cursor: pointer;
}

.hbm-af-stepper-btn:hover {
	background: var(--hbm-bg-tint, #f5f2ec) !important;
	color: var(--hbm-heading, var(--heading, #222)) !important;
}

.hbm-af-stepper-value {
	min-width: 16px;
	text-align: center;
	font-weight: 600;
}

.hbm-af-guests-done {
	width: 100%;
	margin-top: 14px;
	border: none;
	cursor: pointer;
	padding: 10px;
}

/* ---- Search button ---- */

.hbm-af-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	width: 100%;
	padding: 12px 24px;
	border: none;
	border-radius: 10px;
	background: var(--hbm-primary, var(--primary, #d4a656));
	/* Every other primary button on the site (.hbm-btn) hardcodes white
	   text rather than following the primary_contrast token - matching
	   that here instead of using the token, which was rendering dark and
	   made this one button inconsistent with the rest of the site. */
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s;
	box-sizing: border-box;
}

.hbm-af-search-btn:hover {
	opacity: 0.9;
}

.hbm-af-search-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.hbm-af-search-btn-arrow {
	font-size: 16px;
}

.hbm-availability-results {
	margin-top: 28px;
}

@media (max-width: 782px) {
	.hbm-availability-widget {
		padding: 12px;
	}

	/* Compact mobile layout: Check-in/Check-out sit side by side instead of
	   each field stacking full-width one under another - that used to push
	   the widget's height way past what a "search bar" should take on a
	   phone screen. Hotel (if shown) and Guests each still get their own
	   full-width row since they don't pair naturally with anything. */
	.hbm-availability-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.hbm-af-divider {
		display: none;
	}

	.hbm-af-field {
		min-width: 0;
	}

	.hbm-af-field input,
	.hbm-af-field select,
	.hbm-af-guests-toggle,
	.hbm-af-static-value {
		font-size: 13px;
	}

	.hbm-af-hotel-field,
	.hbm-af-guests-field {
		grid-column: 1 / -1;
	}

	.hbm-af-search-btn {
		grid-column: 1 / -1;
		padding: 13px;
		margin-top: 2px;
	}

	.hbm-af-guests-panel {
		left: auto;
		right: 0;
		width: 100%;
	}
}

@media (max-width: 340px) {
	/* Only genuinely tiny/legacy screens (iPhone SE 1st-gen class, 320px) -
	   375px (iPhone SE 2/3, and most budget Android phones) must NOT match
	   this or it silently cancels the 2-column fix above for the large
	   majority of phones, which is exactly what happened here originally. */
	.hbm-availability-form {
		grid-template-columns: 1fr;
	}

	.hbm-af-hotel-field,
	.hbm-af-guests-field,
	.hbm-af-search-btn {
		grid-column: auto;
	}
}

.hbm-availability-results:empty {
	margin-top: 0;
}

.hbm-no-availability {
	text-align: center;
	padding: 20px;
	color: #b32d2e;
}

/* ==================== ROOM SINGLE PAGE ==================== */

.hbm-room-body {
	padding-bottom: 60px;
	padding-top: 30px;
}

.hbm-room-hotel-context {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #f0f0f1);
	border-radius: 10px;
	padding: 10px 16px;
	margin-bottom: 16px;
	text-decoration: none;
	transition: box-shadow 0.15s;
}

.hbm-room-hotel-context:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.hbm-room-hotel-context img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.hbm-room-hotel-context-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.hbm-room-hotel-context-text strong {
	color: var(--hbm-heading, var(--heading, #222));
	font-size: 14px;
}

.hbm-room-hotel-context-text span {
	font-size: 12px;
	color: var(--hbm-text-light, var(--text, #777));
}

.hbm-room-hotel-context-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--hbm-primary, var(--primary, #d4a656));
	white-space: nowrap;
}

.hbm-room-title {
	font-size: 30px;
	color: var(--hbm-heading, var(--heading, #222));
	margin: 10px 0 20px;
}

.hbm-room-bento-gallery {
	margin-bottom: 24px;
}

.hbm-room-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 28px;
	align-items: start;
}

@media (max-width: 900px) {
	.hbm-room-layout {
		grid-template-columns: 1fr;
	}
}

.hbm-room-price-large {
	font-size: 20px;
	margin-bottom: 16px;
}

.hbm-room-meta-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hbm-border, #f0f0f1);
}

.hbm-room-meta-row .hbm-room-meta-item {
	font-size: 13px;
	color: var(--hbm-text, var(--text, #666));
	display: flex;
	align-items: center;
	gap: 6px;
}

.hbm-room-description {
	font-size: 14px;
	line-height: 1.6;
	color: var(--hbm-text, var(--text, #666));
}

.hbm-room-sidebar .hbm-box {
	margin: 0;
	max-width: none;
}

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

@media (max-width: 600px) {
	.hbm-panel-block {
		padding: 20px;
		margin-bottom: 16px;
	}
	.hbm-hotel-title {
		font-size: 24px;
	}
	.hbm-room-title {
		font-size: 22px;
		margin: 8px 0 14px;
	}
	.hbm-room-body {
		padding: 20px 16px 40px;
	}
	.hbm-room-bento-gallery {
		margin-bottom: 16px;
	}
	.hbm-room-description {
		font-size: 13px;
	}
}

/* ==================== HBM ROOM LIST WIDGET (Elementor) - Style tab bridge ====================
 * This widget deliberately reuses the active theme's OWN class names
 * (.ova-room-list / .room-content / .room-price / .room-title etc., see
 * includes/elementor/class-hbm-elementor-room-list.php) so it matches the
 * theme's premium layout out of the box - which means none of those
 * selectors were ever wrapped in var(--hbm-x, ...) the way the plugin's own
 * hbm-* classes are, so Settings -> Style had no effect on this widget at
 * all. Bridging only the price badge here (color/background) - it's a
 * clean brand-color surface with no legibility risk either way.
 *
 * .room-title a is intentionally LEFT ALONE: it renders as white text over
 * a dark photo gradient (mask), not on a plain background. Binding it to
 * the admin's Heading Color would risk making it unreadable if that color
 * is dark (most heading colors are) - ask before wiring this one up.
 */
.ova-room-list .room-content .room-price {
	color: var(--hbm-primary, #063c43);
	background-color: var(--hbm-bg, #fff);
}