/**
 * Last-Minute Deals — badge styles
 *
 * Scoped strictly to .hrck-deals-* selectors plus one tightly-scoped override
 * for the native double-discounted per-night line. No global selectors; nothing
 * here touches .total-price (the all-in total must stay the most prominent
 * price per FTC 16 CFR 464.2(b)).
 */

.hrck-deals-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--hrck-deals-color, #ff385c);
	color: var(--hrck-deals-text, #ffffff);
	font-size: 14px;
	line-height: 1.2;
}

.hrck-deals-badge__inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hrck-deals-percent {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.hrck-deals-prices {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.hrck-deals-was {
	text-decoration: line-through;
	opacity: 0.8;
	font-size: 0.92em;
}

.hrck-deals-now {
	font-weight: 700;
}

.hrck-deals-copy {
	font-weight: 600;
}

/* Mobile context: sits inside the sticky widget shelf. */
.hrck-deals-badge--mobile {
	width: 100%;
	justify-content: center;
	border-radius: 0;
	margin: 0;
}

/* Explorer / search card badge: a small inline pill in the price area (the image
 * corners already hold amenity tags + the wishlist heart, so on-image collides). */
.hrck-deals-card-badge {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--hrck-deals-color, #ff385c);
	color: var(--hrck-deals-text, #ffffff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/*
 * Suppress / override the native double-discounted per-night line.
 *
 * homerunner-plugin's booking widget renders a per-night strikethrough that
 * subtracts the discount twice (a plugin bug we cannot fix — the plugin is
 * PROTECTED). When our honest badge carries a real discount, de-emphasize the
 * native line so it does not contradict the badge. We gray it out rather than
 * fully hide it so no all-in disclosure disappears.
 *
 * The JS adds .hrck-deals-native-suppressed to the specific node when present;
 * the document-level attribute hook lets us also reach it via CSS where the
 * class cannot be applied.
 */
.hrck-deals-native-suppressed,
[data-hrck-deals-active="true"] .rent-deleted,
[data-hrck-deals-active="true"] .rent-after-date.rent-amount {
	opacity: 0.45;
	text-decoration: none;
}