/* =========================================================
   HG Booking Add-ons — "Add to your stay"
   ========================================================= */

/* Section */
.hg-ba-section {
	margin-top: 28px;
}

.hg-ba-title {
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: #111;
}

/* Card list */
.hg-ba-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ── Card ─────────────────────────────────────────────── */
.hg-ba-card {
	position: relative;
	background: #fff;
	border: 1px solid #e4e4e0;
	border-radius: 0;
	padding: 18px 20px;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.hg-ba-card:hover {
	border-color: #d0d0cc;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ── Dismiss button ───────────────────────────────────── */

/* Forcefully reset every theme button property */
.hg-ba-dismiss {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 50% !important;
	border: 1px solid #e0e0dc !important;
	background: #fff !important;
	background-color: #fff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #888 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	font-size: 0 !important;         /* hide any stray text */
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hg-ba-dismiss:hover {
	background: #f5f5f2 !important;
	background-color: #f5f5f2 !important;
	border-color: #bbb !important;
	color: #333 !important;
}

.hg-ba-dismiss svg {
	display: block !important;
	width: 10px !important;
	height: 10px !important;
	flex-shrink: 0;
	pointer-events: none;
}

/* ── Inner layout ─────────────────────────────────────── */
.hg-ba-inner {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-right: 30px;
}

/* ── Image ────────────────────────────────────────────── */
.hg-ba-img-wrap {
	width: 76px;
	height: 76px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	background: #f0efeb;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hg-ba-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hg-ba-img-placeholder {
	background: linear-gradient(135deg, #e8e6e0 0%, #d8d5cc 100%);
}

.hg-ba-img-initial {
	font-size: 1.75rem;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.22);
	line-height: 1;
	user-select: none;
}

/* ── Content ──────────────────────────────────────────── */
.hg-ba-content {
	flex: 1;
	min-width: 0;
}

.hg-ba-name {
	font-size: 0.975rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: #111;
	margin: 0 0 5px;
	line-height: 1.3;
}

/* ── Description ──────────────────────────────────────── */
.hg-ba-desc-wrap {
	margin-bottom: 0;
}

.hg-ba-desc {
	font-size: 0.825rem;
	color: #6b7068;
	line-height: 1.5;
	margin: 0 0 2px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hg-ba-desc--expanded {
	-webkit-line-clamp: unset;
	display: block;
}

.hg-ba-desc a {
	color: #3d6b4f;
	text-decoration: underline;
	word-break: break-all;
}

.hg-ba-desc a:hover {
	color: #2a5038;
}

/* Show more — reset ALL theme button styles */
.hg-ba-show-more {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: #3d6b4f !important;
	cursor: pointer !important;
	vertical-align: baseline !important;
}

.hg-ba-show-more:hover {
	color: #2a5038 !important;
	text-decoration: underline !important;
	background: none !important;
}

/* ── Footer ───────────────────────────────────────────── */
.hg-ba-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #f0efeb;
	gap: 8px;
}

.hg-ba-price {
	font-size: 1rem;
	font-weight: 650;
	color: #111;
	letter-spacing: -0.01em;
}

/* ── +/− controls — reset every theme property ───────── */
.hg-ba-control {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hg-ba-reduce-btn,
.hg-ba-increase-btn {
	width: 30px !important;
	height: 30px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-radius: 50% !important;
	border: 1.5px solid #d4d4d0 !important;
	background: #fff !important;
	background-color: #fff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #333 !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-shrink: 0;
	box-shadow: none !important;
	text-transform: none !important;
	font-size: 0 !important;         /* hide stray text, icons come from SVG */
	line-height: 1 !important;
	transition: border-color 0.15s, color 0.15s;
}

.hg-ba-reduce-btn:hover:not(:disabled),
.hg-ba-increase-btn:hover:not(:disabled) {
	border-color: #3d6b4f !important;
	background: #fff !important;
	color: #3d6b4f !important;
}

.hg-ba-reduce-btn:disabled,
.hg-ba-increase-btn:disabled {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
}

/* Make the SVG icons visible inside the qty buttons */
.hg-ba-reduce-btn svg,
.hg-ba-increase-btn svg {
	display: block !important;
	width: 12px !important;
	height: 12px !important;
	flex-shrink: 0;
	pointer-events: none;
	color: inherit;
}

.hg-ba-qty {
	min-width: 22px;
	text-align: center;
	font-size: 0.925rem;
	font-weight: 600;
	color: #111;
}

/*
 * Hide rate plan radio buttons in the checkout sidebar — the guest already
 * chose a rate plan in the booking widget. The pre-checked input still
 * submits correctly with the form.
 */
#homelocal-checkout-availability .rateplans {
	display: none !important;
}