/*
 * TASK-107: scoped strictly under .rrc-booking-payment-preview (and its own
 * mount wrapper) — this file is only ever enqueued on a single listing page
 * (RRC\Frontend\BookingPaymentPreview::maybe_enqueue_assets(), is_singular
 * ('listing')) and only ever writes inside a node this same plugin created
 * inside Listeo Booking Plus's own `.lbp-summary` block. Never touches any
 * `.lbp-*` selector, checkout, My Bookings, or rr-admin.
 */
.rrc-booking-payment-preview-mount {
	margin-top: 10px;
}

.rrc-booking-payment-preview {
	--rr-teal-deep: #1b4b4a;
	--rr-teal: #2e9c8f;
	--rr-orange: #e8592e;
	--rr-cream: #faf6ec;
	--rr-border: #e8dfcc;
	--rr-ink: #2b2420;
	--rr-ink-soft: #6b6153;

	background: var(--rr-cream);
	border: 1px solid var(--rr-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--rr-ink);
}

.rrc-booking-payment-preview.rrc-bpp-fallback,
.rrc-booking-payment-preview.rrc-bpp-loading {
	color: var(--rr-ink-soft) !important;
	font-style: italic;
	text-align: center;
}

/* TASK-119: this block lives inside a fixed ~212px-wide native Listeo
   column (.lbp-summary) — a row layout squeezed "Reserve your spot" next
   to "RESERVATION PAYMENT" into a 3-line-wrapped title fighting the badge
   for width, which read as off-center/cramped. Stacking title above badge
   gives each the full column width instead. */
.rrc-booking-payment-preview .rrc-bpp-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	margin-bottom: 6px;
}

/*
 * TASK-234: found live on a `date_range` (rental/stay) listing — the whole
 * block rendered in the theme's red accent color (title, row labels, row
 * values, message) instead of the neutral teal/cream palette every other
 * screen of this same box already showed correctly. Root cause: every
 * color-bearing rule below was a single bare class (e.g. `.rrc-bpp-title`,
 * specificity 0-1-0), so on whichever template wraps the accommodation
 * booking widget, a more specific native/theme rule (2+ classes or an ID)
 * simply won instead. Same class of bug PricingDisplay.php's own docblock
 * already documents fixing with higher specificity instead of `!important`
 * (see its `#titlebar.listing-titlebar span...:has(...)` comment) — applied
 * here the same way: every rule re-scoped under `.rrc-booking-payment-preview`
 * so it always wins on specificity alone, `!important` reserved for the two
 * ambiguous top-level state classes above (`.rrc-bpp-fallback`/`-loading`,
 * which have no inner element of their own to re-scope under).
 */
.rrc-booking-payment-preview .rrc-bpp-title {
	font-weight: 700;
	color: var(--rr-teal-deep) !important;
}

.rrc-booking-payment-preview .rrc-bpp-badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--rr-teal);
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: 999px;
	padding: 2px 9px;
	white-space: nowrap;
}

.rrc-booking-payment-preview.rrc-bpp-mode-full_payment .rrc-bpp-badge {
	background: var(--rr-orange);
}

.rrc-booking-payment-preview .rrc-bpp-rows {
	border-top: 1px solid var(--rr-border);
	border-bottom: 1px solid var(--rr-border);
	padding: 4px 0;
	margin-bottom: 6px;
}

.rrc-booking-payment-preview .rrc-bpp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2px 0;
}

.rrc-booking-payment-preview .rrc-bpp-row-label {
	color: var(--rr-ink-soft) !important;
}

.rrc-booking-payment-preview .rrc-bpp-row-value {
	font-weight: 600;
	color: var(--rr-ink) !important;
}

.rrc-booking-payment-preview .rrc-bpp-row-emphasis .rrc-bpp-row-label,
.rrc-booking-payment-preview .rrc-bpp-row-emphasis .rrc-bpp-row-value {
	color: var(--rr-teal-deep) !important;
	font-weight: 700;
}

/* TASK-112B: full_payment's "Pay at the experience" row becomes a plain
   sentence ("No payment due at the experience.") instead of a $0.00 amount —
   this is the only row with no label, so it needs its own weight/alignment
   instead of inheriting .rrc-bpp-row-value's bold "amount" styling. */
.rrc-booking-payment-preview .rrc-bpp-row-note {
	width: 100%;
	font-weight: 400;
	color: var(--rr-ink-soft) !important;
	text-align: left;
}

.rrc-booking-payment-preview .rrc-bpp-message {
	margin: 0 0 4px;
	color: var(--rr-ink-soft) !important;
	font-size: 11px;
	line-height: 1.3;
}

/* TASK-112: the short "here's the benefit" line, only ever present for
   pre_reservation (BookingPaymentPreviewService::preview() leaves it empty
   for full_payment) — visually secondary to .rrc-bpp-message, not another
   competing message. */
.rrc-booking-payment-preview .rrc-bpp-support-message {
	margin: 2px 0 0;
	color: var(--rr-ink-soft) !important;
	font-size: 10.5px;
	font-style: italic;
}