/**
 * 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;
}

/* Rooms/Hotels listings need the heading + a "Sort by" control side by
   side rather than the generic centered/narrow section-intro layout
   above. */
.hbm-section-heading-with-sort {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: none;
	text-align: left;
}

.hbm-sort-control {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--hbm-text-light, #777);
	white-space: nowrap;
}

.hbm-sort-control select {
	padding: 8px 10px;
	border: 1px solid var(--hbm-border, #e1e1e1);
	border-radius: 8px;
	font-size: 14px;
	background: var(--hbm-bg, #fff);
	color: var(--hbm-heading, #222);
}

@media (max-width: 600px) {
	.hbm-section-heading-with-sort {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Hotels archive page - same "heading + sort control" row, its own class
   since the results title here (.hbm-search-results-title) isn't part of
   the .hbm-section-heading family used on the single hotel page. */
.hbm-results-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.hbm-results-heading-row-sort-only {
	justify-content: flex-end;
}

@media (max-width: 600px) {
	.hbm-results-heading-row {
		align-items: flex-start;
	}
}

.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;
}

/* ==================== ROOM CARD + RATE PLAN ROWS ====================
 * One compact card per room: photo on the left, and on the right the room's
 * name, specs, amenities and then each rate plan as its own row (price +
 * Select) - everything a guest needs to choose, no separate sections. */

.hbm-rc {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #e8e4dc);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Fixed 4:3 photo, top-left - it used to stretch to the full card height,
   so a room with several rate plans got a tall, heavily cropped image. */
.hbm-rc-media {
	position: relative;
	display: block;
	align-self: start;
	aspect-ratio: 4 / 3;
	margin: 16px 0 16px 16px;
	border-radius: 12px;
	overflow: hidden;
	background: #f1eee8;
}

.hbm-rc .hbm-rc-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbm-rc-media-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #efeae0, #e2dccf);
}

.hbm-rc-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	background: #c0392b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 20px;
}

.hbm-rc-badge-featured {
	background: var(--hbm-primary, #d4a656);
}

.hbm-rc-photos {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 3px 9px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 11px;
	border-radius: 20px;
}

.hbm-rc-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	min-width: 0;
}

.hbm-rc-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
}

.hbm-rc-title a {
	color: var(--hbm-heading, var(--hbm-text, #1d1d1f));
	text-decoration: none;
}

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

.hbm-rc-desc {
	margin: 0;
	font-size: 13px;
	color: var(--hbm-text-light, #777);
}

.hbm-rc-specs,
.hbm-rc-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--hbm-text-light, #6b6b6b);
}

.hbm-rc-specs li {
	display: flex;
	align-items: center;
	gap: 4px;
}

.hbm-rc-specs .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
	color: var(--hbm-primary, #d4a656);
}

.hbm-rc-amenities li {
	padding: 3px 10px;
	background: #f6f3ec;
	border-radius: 20px;
	color: var(--hbm-text, #444);
}

.hbm-rc-amenities .hbm-rc-amenities-more {
	background: transparent;
	padding: 3px 0;
}

.hbm-rc-amenities-more a {
	color: var(--hbm-primary, #d4a656);
	font-weight: 600;
	text-decoration: none;
}

.hbm-rc-plans,
.hbm-pr-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}

.hbm-pr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	background: #faf8f4;
	border: 1px solid var(--hbm-border, #eee7d9);
	border-radius: 12px;
}

.hbm-pr-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.hbm-pr-tag {
	padding: 1px 7px;
	background: #e9edf5;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #4a5b7a;
}

.hbm-pr-refund {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
}

.hbm-pr-refund .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.hbm-pr-refund.is-free {
	color: #1a7f37;
}

.hbm-pr-refund.is-none {
	color: #8a8378;
}

.hbm-pr-meta {
	margin-top: 2px;
	font-size: 12px;
	color: var(--hbm-text-light, #777);
}

.hbm-pr-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
	text-align: right;
}

.hbm-pr-old {
	font-size: 12px;
	color: #9a9a9a;
	text-decoration: line-through;
}

.hbm-pr-amount {
	font-size: 20px;
	font-weight: 700;
	color: var(--hbm-heading, var(--hbm-text, #1d1d1f));
}

.hbm-pr-amount small {
	font-size: 11px;
	font-weight: 500;
	color: var(--hbm-text-light, #777);
}

.hbm-pr-total {
	font-size: 11px;
	color: var(--hbm-text-light, #777);
}

.hbm-pr-cta {
	white-space: nowrap;
	min-width: 96px;
	text-align: center;
}

@media (max-width: 900px) {
	.hbm-rc {
		grid-template-columns: 220px minmax(0, 1fr);
	}
}

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

	.hbm-rc-media {
		aspect-ratio: 16 / 9;
		margin: 0;
		border-radius: 0;
	}

	.hbm-rc-body {
		padding: 16px;
	}

	.hbm-pr {
		grid-template-columns: 1fr auto;
		gap: 10px 12px;
	}

	.hbm-pr-info {
		grid-column: 1 / -1;
	}

	.hbm-pr-price {
		align-items: flex-start;
		text-align: left;
	}
}

/* ==================== DEAL DETAILS (savings / taxes / perks) ==================== */

.hbm-deal-save,
.hbm-pr-save {
	display: inline-block;
	align-self: flex-start;
	padding: 3px 9px;
	background: #e8f6ec;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	color: #1a7f37;
}

.hbm-pr-save {
	align-self: flex-end;
	margin-top: 3px;
	padding: 2px 7px;
	font-size: 11px;
}

.hbm-deal-tax {
	font-size: 12px;
	color: var(--hbm-text-light, #777);
}

.hbm-deal-perks {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hbm-deal-perks li {
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: #1a7f37;
}

.hbm-deal-perks .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.hbm-rfr-pricebox {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

@media (max-width: 680px) {
	.hbm-pr-save {
		align-self: flex-start;
	}
}

/* ==================== COMPACT ROOM CARD (Elementor Room List) ==================== */

/* Flex-wrap + centred so a lone room, or a last row with fewer cards, sits
   in the middle instead of hugging the left edge. Columns come from the
   widget's Columns control via --hbm-rcc-cols. */
.hbm-rcc-grid {
	--hbm-rcc-cols: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.hbm-rcc {
	flex: 0 0 calc((100% - (var(--hbm-rcc-cols) - 1) * 24px) / var(--hbm-rcc-cols));
	max-width: calc((100% - (var(--hbm-rcc-cols) - 1) * 24px) / var(--hbm-rcc-cols));
	display: flex;
	flex-direction: column;
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #e8e4dc);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hbm-rcc:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.hbm-rcc-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #f1eee8;
	overflow: hidden;
}

.hbm-rcc .hbm-rcc-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.hbm-rcc:hover .hbm-rcc-media img {
	transform: scale(1.04);
}

.hbm-rcc-media-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #efeae0, #e2dccf);
}

.hbm-rcc-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}

.hbm-rcc-title {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
}

.hbm-rcc-title a {
	color: var(--hbm-heading, var(--hbm-text, #1d1d1f));
	text-decoration: none;
}

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

.hbm-rcc-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--hbm-border, #eee7d9);
}

.hbm-rcc-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 5px;
	line-height: 1.2;
}

.hbm-rcc-price strong {
	font-size: 20px;
	color: var(--hbm-heading, var(--hbm-text, #1d1d1f));
}

.hbm-rcc-price small {
	font-size: 11px;
	color: var(--hbm-text-light, #777);
}

@media (max-width: 767px) {
	.hbm-rcc-grid {
		gap: 18px;
	}

	.hbm-rcc {
		flex-basis: calc((100% - (var(--hbm-rcc-cols) - 1) * 18px) / var(--hbm-rcc-cols));
		max-width: calc((100% - (var(--hbm-rcc-cols) - 1) * 18px) / var(--hbm-rcc-cols));
	}
}

/* ==================== ROOM FEATURE ROWS (Elementor Room List, "Feature Rows") ==================== */

.hbm-rfr-list {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.hbm-rfr {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: 56px;
}

.hbm-rfr.is-reversed .hbm-rfr-media {
	order: 2;
}

.hbm-rfr-media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: #f1eee8;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.hbm-rfr-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.hbm-rfr-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hbm-rfr .hbm-rfr-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hbm-rfr-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #efeae0, #e2dccf);
}

.hbm-rfr-arrows {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	gap: 8px;
}

.hbm-rfr-nav {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #1d1d1f;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}

.hbm-rfr-nav:hover {
	transform: scale(1.08);
}

.hbm-rfr-info {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hbm-rfr-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--hbm-primary, #d4a656);
}

.hbm-rfr-title {
	margin: 0;
	font-size: 36px;
	line-height: 1.15;
}

.hbm-rfr-title a {
	color: var(--hbm-heading, var(--hbm-text, #1d1d1f));
	text-decoration: none;
}

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

.hbm-rfr-desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--hbm-text-light, #6b6b6b);
}

.hbm-rfr-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--hbm-text, #444);
}

.hbm-rfr-features li {
	display: flex;
	align-items: center;
	gap: 2px;
}

.hbm-rfr-features .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: var(--hbm-primary, #d4a656);
}

.hbm-rfr-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
	margin-top: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--hbm-border, #eee7d9);
}

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

.hbm-rfr-price strong {
	font-size: 28px;
	color: var(--hbm-heading, var(--hbm-text, #1d1d1f));
}

.hbm-rfr-price small {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hbm-text-light, #777);
}

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

	.hbm-rfr.is-reversed .hbm-rfr-media {
		order: 0;
	}

	.hbm-rfr-list {
		gap: 48px;
	}

	.hbm-rfr-title {
		font-size: 28px;
	}
}

/* ==================== HOTEL SEARCH RESULTS (one property per row) ==================== */

.hbm-result-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hbm-result-card {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) 230px;
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #e8e4dc);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hbm-result-card:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.hbm-result-image {
	position: relative;
	display: block;
	min-height: 220px;
	background: #f1eee8;
}

.hbm-result-card .hbm-result-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.hbm-result-card:hover .hbm-result-image img {
	transform: scale(1.04);
}

.hbm-result-image-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #efeae0, #e2dccf);
}

.hbm-result-ribbon {
	position: absolute;
	top: 14px;
	left: 0;
	padding: 5px 12px 5px 10px;
	background: #c0392b;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 0 20px 20px 0;
	z-index: 1;
}

.hbm-result-photos {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 4px 10px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	border-radius: 20px;
	z-index: 1;
}

.hbm-result-details {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px;
	min-width: 0;
}

.hbm-result-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.hbm-result-name {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
}

.hbm-result-name a {
	color: var(--hbm-heading, var(--hbm-text, #1d1d1f));
	text-decoration: none;
}

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

.hbm-result-rating {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}

.hbm-result-rating-score {
	display: inline-block;
	min-width: 38px;
	padding: 5px 8px;
	background: #1a7f37;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	border-radius: 8px 8px 8px 2px;
}

.hbm-result-rating-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	font-size: 13px;
}

.hbm-result-rating-text small {
	color: var(--hbm-text-light, #777);
	font-size: 11px;
}

.hbm-result-address {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	font-size: 13px;
	color: var(--hbm-text-light, #6b6b6b);
	line-height: 1.5;
}

.hbm-result-address .dashicons {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--hbm-primary, #d4a656);
}

.hbm-result-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hbm-result-amenities li {
	padding: 4px 10px;
	background: #f6f3ec;
	border-radius: 20px;
	font-size: 12px;
	color: var(--hbm-text, #444);
}

.hbm-result-amenities .hbm-result-amenities-more {
	background: transparent;
	color: var(--hbm-primary, #d4a656);
	font-weight: 600;
}

.hbm-result-perks {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hbm-result-perks li {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 600;
}

.hbm-result-perk-green {
	color: #1a7f37;
}

.hbm-result-perks .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.hbm-result-availability {
	margin: auto 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #1a7f37;
}

.hbm-result-availability.is-low {
	color: #c0392b;
}

.hbm-result-pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	padding: 20px 22px;
	text-align: right;
	background: #faf8f4;
	border-left: 1px solid var(--hbm-border, #eee7d9);
}

.hbm-result-price-from {
	font-size: 12px;
	color: var(--hbm-text-light, #777);
}

.hbm-result-price-old {
	font-size: 14px;
	color: #9a9a9a;
	text-decoration: line-through;
}

.hbm-result-price {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--hbm-heading, var(--hbm-text, #1d1d1f));
}

.hbm-result-price-note,
.hbm-result-price-tax,
.hbm-result-price-nights {
	font-size: 12px;
	color: var(--hbm-text-light, #777);
}

.hbm-result-save {
	margin-top: 4px;
	padding: 3px 9px;
	background: #e8f6ec;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	color: #1a7f37;
}

.hbm-result-btn {
	margin-top: 14px;
	white-space: nowrap;
}

@media (max-width: 991px) {
	.hbm-result-card {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.hbm-result-pricing {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		border-left: 0;
		border-top: 1px solid var(--hbm-border, #eee7d9);
	}

	.hbm-result-btn {
		margin-top: 0;
	}
}

@media (max-width: 640px) {
	.hbm-result-card {
		grid-template-columns: 1fr;
	}

	.hbm-result-image {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.hbm-result-title-row {
		flex-direction: column;
	}

	.hbm-result-details,
	.hbm-result-pricing {
		padding: 16px;
	}

	.hbm-result-name {
		font-size: 19px;
	}

	.hbm-result-pricing {
		align-items: flex-start;
		flex-direction: column;
	}

	.hbm-result-btn {
		width: 100%;
		margin-top: 10px;
		text-align: center;
	}
}

/* ==================== CHECKOUT: APPLIED COUPON + AVAILABLE OFFERS ==================== */

.hbm-applied-coupon {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 12px;
	background: #e8f6ec;
	border: 1px solid #b7e1c3;
	border-radius: 8px;
	color: #1a7f37;
	font-size: 13px;
}

.hbm-applied-coupon[hidden] {
	display: none;
}

.hbm-applied-coupon .dashicons {
	flex: 0 0 auto;
}

.hbm-applied-coupon-text {
	flex: 1;
}

.hbm-applied-coupon-remove {
	border: 0;
	background: transparent;
	color: #b32d2e;
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
}

.hbm-offers {
	margin-top: 16px;
}

.hbm-offers-title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
}

.hbm-offer-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	margin-bottom: 10px;
	border: 1px dashed var(--hbm-primary, #d4a656);
	border-radius: 10px;
	background: var(--hbm-bg, #fff);
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hbm-offer-card.is-applied {
	background: #f1faf4;
	border-style: solid;
	border-color: #1a7f37;
}

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

.hbm-offer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.hbm-offer-code {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--hbm-primary, #d4a656);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--hbm-primary, #d4a656);
}

.hbm-offer-label {
	font-size: 13px;
	font-weight: 700;
	color: #1a7f37;
}

.hbm-offer-desc,
.hbm-offer-notes {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--hbm-text-light, #777);
}

.hbm-offer-save {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #1a7f37;
}

.hbm-offer-save:empty {
	display: none;
}

.hbm-offer-save.is-locked {
	color: #b26a00;
}

.hbm-offer-apply {
	flex: 0 0 auto;
	padding: 6px 4px;
	border: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--hbm-primary, #d4a656);
	cursor: pointer;
}

.hbm-offer-apply:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hbm-offer-card.is-applied .hbm-offer-apply {
	color: #1a7f37;
	opacity: 1;
}

/* ==================== BOOK NOW DATE/GUEST POPUP ==================== */

body.hbm-modal-open {
	overflow: hidden;
}

.hbm-modal[hidden] {
	display: none;
}

.hbm-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.hbm-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.hbm-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--hbm-bg, #fff);
	border-radius: 14px;
	padding: 26px 24px 22px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hbm-modal-dialog h3 {
	margin: 0 0 4px;
	font-size: 20px;
}

.hbm-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--hbm-text-light, #777);
}

.hbm-modal-sub {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--hbm-text-light, #777);
}

.hbm-modal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.hbm-modal-grid label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hbm-text-light, #777);
}

.hbm-modal-grid input {
	padding: 10px;
	border: 1px solid var(--hbm-border, #ddd);
	border-radius: 8px;
	font-size: 14px;
	color: var(--hbm-text, #222);
	background: var(--hbm-bg, #fff);
}

.hbm-modal-guests {
	border-top: 1px solid var(--hbm-border, #eee);
	margin-bottom: 14px;
}

.hbm-modal-guest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--hbm-border, #eee);
}

.hbm-modal-guest-row small {
	display: block;
	font-size: 12px;
	color: var(--hbm-text-light, #777);
}

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

.hbm-modal-stepper button {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--hbm-primary, #d4a656);
	background: transparent;
	color: var(--hbm-primary, #d4a656);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.hbm-modal-stepper span {
	min-width: 18px;
	text-align: center;
	font-weight: 600;
}

.hbm-modal-error {
	min-height: 18px;
	margin: 0 0 8px;
	font-size: 13px;
	color: #c0392b;
}

.hbm-room-rate-plans .hbm-room-card-rate-plans {
	border-left: none;
	border: 1px solid var(--hbm-border, #f0f0f1);
	border-radius: 10px;
	overflow: hidden;
}

.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;
}

/* A lone card (one property) would otherwise sit in the first column,
   hard against the left edge - span the whole row and centre it. */
.hbm-hotels-grid > :only-child,
.hbm-hotels-premium-grid > :only-child {
	grid-column: 1 / -1;
	justify-self: center;
	width: 100%;
	max-width: 420px;
}

.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;
}

/* Mobile-only trigger/close buttons - hidden by default (desktop and any
   width above the mobile breakpoint). Without this base rule they fell
   back to the browser's default unstyled <button> display and sat
   directly on top of the real widget on desktop, since the only rules
   for them lived inside the @media (max-width: 782px) block below. */
.hbm-af-mobile-trigger,
.hbm-af-mobile-close {
	display: none;
}

.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%;
	}
}

/* ---- Mobile: fixed bottom "Check Availability" bar that expands the full
   form on tap - every placement of the widget EXCEPT the single Hotel page
   (see hbm_render_availability_widget()'s mobile_fixed arg, false there). ---- */
@media (max-width: 782px) {
	/* Class added by public.js only when a .hbm-af-mobile-fixed widget is
	   actually present on the page - keeps the fixed bar from covering the
	   last bit of page content/footer. */
	body.hbm-has-mobile-search-bar {
		padding-bottom: 60px;
	}

	.hbm-af-mobile-fixed .hbm-af-mobile-trigger {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		width: 100%;
		padding: 15px;
		border: none;
		background: var(--hbm-primary, var(--primary, #d4a656));
		/* Hardcoded white, matching .hbm-btn/.hbm-af-search-btn/the
		   premium hotel card's primary button - not the primary_contrast
		   token, which has drifted to inconsistent fallback colors across
		   these different buttons. */
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
	}

	.hbm-af-mobile-fixed .hbm-af-mobile-trigger .dashicons {
		font-size: 18px;
		width: 18px;
		height: 18px;
	}

	.hbm-af-mobile-fixed .hbm-availability-widget {
		display: none;
	}

	.hbm-af-mobile-fixed .hbm-af-mobile-close {
		display: none;
	}

	/* Expanded state (toggled via JS - assets/js/public.js) - the form
	   itself becomes a fixed bottom sheet, trigger swaps for a close (x). */
	.hbm-af-mobile-fixed.hbm-af-expanded {
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(0,0,0,0.55);
	}

	.hbm-af-mobile-fixed.hbm-af-expanded .hbm-af-mobile-trigger {
		display: none;
	}

	.hbm-af-mobile-fixed.hbm-af-expanded .hbm-availability-widget {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		max-height: 85vh;
		overflow-y: auto;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
		-webkit-overflow-scrolling: touch;
	}

	.hbm-af-mobile-fixed.hbm-af-expanded .hbm-af-mobile-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10px;
		right: 10px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: none;
		background: var(--hbm-bg-tint, #f2efe8);
		color: var(--hbm-heading, var(--heading, #222));
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}
}

@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;
}

/* Single full-width column - the old booking sidebar is gone; rate plans carry the Book Now buttons. */
.hbm-room-layout {
	display: block;
}

.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));
}

/* ==================== 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);
}

/* The theme lays this widget out as a 4-column grid whose first card spans
   2x2, so 1-3 rooms hug the left edge with empty columns on the right.
   With 3 or fewer rooms, drop the bento span and centre them as a row. */
.ova-room-list.hbm-room-list-few {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.ova-room-list.hbm-room-list-few .room-content,
.ova-room-list.hbm-room-list-few .room-content.grid_span {
	grid-row: auto;
	grid-column: auto;
	flex: 0 1 calc(33.333% - 20px);
	max-width: 420px;
	min-width: 260px;
}

@media screen and (max-width: 600px) {
	.ova-room-list.hbm-room-list-few .room-content,
	.ova-room-list.hbm-room-list-few .room-content.grid_span {
		flex-basis: 100%;
		max-width: 100%;
		min-width: 0;
	}
}

/* ==================== PREMIUM HOTEL CARD (HBM Hotel List widget) ====================
 * Light/gold card used only by the Elementor "HBM Hotel List" widget's Tile
 * and List layout options (see hbm_get_hotel_premium_card_html() and
 * includes/elementor/class-hbm-elementor-hotel-list.php) - built from the
 * same --hbm-bg/--hbm-primary/etc. tokens as the rest of the plugin's
 * guest-facing surfaces (checkout, confirmation, My Bookings) so it matches
 * that same premium-but-light look and follows whatever brand colors are
 * set in Settings -> Style.
 */

.hbm-hotel-premium,
.hbm-hotel-premium *,
.hbm-hotel-premium *::before,
.hbm-hotel-premium *::after {
	/* Padded elements inside (body, buttons, badge) were sized at 100%
	   width without this, so their own padding added ON TOP of that
	   100% instead of being included in it - overflowing the card's
	   right edge, then getting silently clipped by overflow:hidden
	   below. This plugin doesn't set box-sizing globally (the active
	   theme may or may not), so it's set explicitly here like other
	   padding+width components elsewhere in this file. */
	box-sizing: border-box;
}

.hbm-hotel-premium {
	background: var(--hbm-bg, #fff);
	border: 1px solid var(--hbm-border, #ece6d9);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.hbm-hotel-premium-image {
	display: block;
	position: relative;
	background: #000;
}

.hbm-hotel-premium-tile .hbm-hotel-premium-image {
	/* Same ratio at every width now (used to be a taller 16/10 on
	   desktop, shrunk to 16/9 only below 700px) - desktop and mobile
	   Tile cards are meant to look identical, not a bigger/smaller pair
	   of designs. */
	aspect-ratio: 16/9;
}

.hbm-hotels-premium-grid .hbm-hotel-premium-image-placeholder {
	aspect-ratio: 16/9;
}

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

.hbm-hotel-premium-image-placeholder {
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: linear-gradient(135deg, #1c222f, #0f131b);
}

.hbm-hotel-premium-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(4px);
	color: var(--hbm-heading, #222);
	border: 1px solid rgba(255,255,255,0.4);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	padding: 6px 12px;
	border-radius: 20px;
}

.hbm-hotel-premium-body {
	padding: 16px 18px 18px;
}

.hbm-hotel-premium-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.hbm-hotel-premium-rating {
	font-size: 13px;
	font-weight: 700;
	color: var(--hbm-primary, #d4a656);
	display: flex;
	align-items: center;
	gap: 4px;
}

.hbm-hotel-premium-rating .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.hbm-hotel-premium-rating-count {
	color: var(--hbm-text-light, #999);
	font-weight: 500;
	margin-left: 2px;
}

.hbm-hotel-premium-name {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 19px;
	font-weight: 700;
	color: var(--hbm-heading, #222);
	margin: 0 0 4px;
}

.hbm-hotel-premium-location {
	font-size: 13px;
	font-weight: 600;
	color: var(--hbm-primary, #d4a656);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.hbm-hotel-premium-location .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.hbm-hotel-premium-desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--hbm-text-light, #777);
	margin: 0 0 12px;
	/* Capped to 2 lines regardless of word count, so the card's height
	   doesn't balloon with a long description. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.hbm-hotel-premium-footer {
	padding-top: 12px;
	border-top: 1px dashed var(--hbm-border, #eee);
}

/* Compact amenity grid (not the bulky per-item chip/badge style, removed
   for taking too much space) - just enough to fill the gap between a
   short description and the price/buttons footer. Fixed 3-column count
   (same at every width) rather than flex-wrap, so the row count is
   predictable (2 rows) regardless of how many amenities a hotel has. */
.hbm-hotel-premium-amenities-compact {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 10px;
	font-size: 12px;
	color: var(--hbm-text-light, #777);
	margin-bottom: 14px;
}

.hbm-hotel-premium-amenities-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hbm-hotel-premium-amenities-item .dashicons,
.hbm-hotel-premium-amenities-item svg {
	color: var(--hbm-primary, #d4a656);
	width: 13px;
	height: 13px;
	font-size: 13px;
	flex-shrink: 0;
}

.hbm-hotel-premium-bottom-row {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.hbm-hotel-premium-price {
	display: flex;
	flex-direction: column;
}

.hbm-hotel-premium-price-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--hbm-text-light, #999);
}

.hbm-hotel-premium-price-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--hbm-primary, #d4a656);
	line-height: 1.3;
}

.hbm-hotel-premium-price-suffix {
	font-size: 12px;
	font-weight: 500;
	color: var(--hbm-text-light, #999);
}

.hbm-hotel-premium-actions {
	display: flex;
	gap: 10px;
	margin-left: 0;
	width: 100%;
}

.hbm-hotel-premium-actions .hbm-hotel-premium-btn {
	flex: 1;
	text-align: center;
}

.hbm-hotel-premium-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.hbm-hotel-premium-btn:hover {
	opacity: 0.85;
}

.hbm-hotel-premium-btn-secondary {
	background: var(--hbm-bg-tint, #f2efe8);
	color: var(--hbm-heading, #222);
	border: 1px solid var(--hbm-border, #e2e2e2);
}

.hbm-hotel-premium-btn-primary {
	background: var(--hbm-primary, #d4a656);
	/* Hardcoded white, matching every other primary button on the site
	   (.hbm-btn, .hbm-af-search-btn) - the primary_contrast token's
	   fallback here used to be dark, which was rendering as dark text on
	   the brand-colored button while every other button showed white. */
	color: #fff;
}

/* ---- Tile layout: vertical card, image on top (default) ---- */

.hbm-hotel-premium-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ---- List layout: horizontal row, image on the left ---- */

.hbm-hotel-premium-list {
	display: grid;
	grid-template-columns: 40% 1fr;
	align-items: stretch;
}

.hbm-hotel-premium-list .hbm-hotel-premium-image {
	/* Capped via aspect-ratio and explicitly NOT stretched by the grid's
	   align-items:stretch (align-self overrides that just for this item) -
	   the old min-height:100% let an uncapped tall source photo inflate
	   the whole row's height, leaving a large empty gap in the body below
	   a short description. The body (still stretch, default) fills
	   whatever row height results and centers its own content within it. */
	align-self: start;
	aspect-ratio: 4/3;
}

.hbm-hotel-premium-list .hbm-hotel-premium-body {
	display: flex;
	flex-direction: column;
	/* Content sits as one balanced block in the middle of the row's
	   height instead of stretching apart with the footer pinned to the
	   very bottom (the old margin-top:auto approach), which is what
	   created the dead gap above the price/buttons. */
	justify-content: center;
	padding: 26px 28px;
	/* Grid items default to min-width:auto (their content's min-content
	   size), not 0 - without this, nowrap text inside (buttons, the
	   amenities line) can force this column wider than its actual 1fr
	   track, pushing it past the card's own right edge (only visible as
	   silent clipping, since the card has overflow:hidden). */
	min-width: 0;
}

.hbm-hotel-premium-list .hbm-hotel-premium-footer {
	margin-top: 16px;
}

.hbm-hotel-premium-list .hbm-hotel-premium-bottom-row {
	justify-content: flex-start;
}

.hbm-hotel-premium-list .hbm-hotel-premium-actions {
	margin-left: auto;
}

.hbm-hotels-premium-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 26px;
}

.hbm-hotels-premium-list-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (max-width: 700px) {
	/* Tile card styling (image ratio, spacing, type, description clamp,
	   amenities grid, stacked price/buttons) is no longer split between
	   a bigger desktop version and a smaller mobile version here - it's
	   all unconditional in the rules above now, so it looks identical at
	   every width. Only things that are genuinely about page-level
	   layout (how many cards fit per row) or List-layout's own row/
	   column behavior stay responsive below. */
	.hbm-hotels-premium-grid {
		/* The base rule's minmax(320px, 1fr) forces every column to be AT
		   LEAST 320px wide - on a narrow phone (or inside a theme
		   container with its own side padding eating into the available
		   width), the actual space can be less than that, and the grid
		   item is forced wider than the viewport rather than shrinking,
		   overflowing the right edge regardless of any padding/box-sizing
		   fix on the content inside it. Single column, no minimum, always
		   exactly matches the available width on mobile. */
		grid-template-columns: 1fr;
	}

	.hbm-hotels-premium-grid,
	.hbm-hotels-premium-list-wrap {
		gap: 16px;
	}

	.hbm-hotel-premium-list {
		grid-template-columns: 1fr;
	}
	.hbm-hotel-premium-list .hbm-hotel-premium-body {
		/* Same selector specificity as the desktop rule above (both
		   .hbm-hotel-premium-list .hbm-hotel-premium-body) is required
		   here - a bare .hbm-hotel-premium-body override does NOT win
		   against it, since specificity is compared before media query
		   or source order. Confirmed live: without this, mobile cards
		   were still rendering the desktop 26px/28px padding instead of
		   this block's intended 16px/18px, adding to the overflow. */
		padding: 16px 18px 18px;
	}
	.hbm-hotel-premium-list .hbm-hotel-premium-actions {
		/* Same specificity fix as above - the desktop margin-left:auto
		   was still winning over the bare .hbm-hotel-premium-actions
		   mobile rule's width:100%. */
		margin-left: 0;
	}
	.hbm-hotel-premium-list .hbm-hotel-premium-image {
		/* Reset the desktop-only min-height:100% (meant to stretch the
		   image to match the 2-column grid row's height) - left active,
		   a percentage height against the now-auto-height single-column
		   row sized the image unpredictably, tall enough to visually
		   bleed into the price/name text sitting right below it. */
		min-height: auto;
		aspect-ratio: 16/10;
	}
	.hbm-hotel-premium-top {
		flex-direction: column;
		gap: 8px;
	}
}