/*
 * TASK-111: scoped strictly under .rrc-price-* / .rrc-ficha-price-* —
 * enqueued only on Home, listing archives/term archives, and single
 * listing pages (RRC\Frontend\PricingDisplay::maybe_enqueue_assets()).
 * Never touches Listeo's own `.listing-booking-nl`/`.price-nl`/
 * `.listing-pricing-tag` markup — this only styles content added
 * alongside it via listeo-core's own price/tags hooks.
 *
 * Colors are hardcoded (not CSS custom properties) on purpose: these
 * elements land as siblings — not descendants — of whichever wrapper
 * would otherwise scope a --rr-* variable, and the parent card markup
 * (`.details-sidebar-col-nl` and friends) is `display:flex`, so an
 * unscoped var() silently falling back to inherited/initial picked up
 * Listeo's own red price-tag color instead. `flex: 0 0 100%` on every
 * top-level rule below is the other half of that same fix — without it
 * these blocks became extra flex *items* squeezed into the row instead
 * of new lines, which is what actually caused the earlier "SERVICE" /
 * "PRICE" text to wrap letter-by-letter.
 */
/*
 * Listeo's own card sidebar (`.details-sidebar-col-nl`, wrapping the price
 * block on content-listing*.php) is `display:flex; flex-wrap:nowrap` —
 * `flex-direction:row` in GRID view (Listeo's own `.new-grid-layout-nl`
 * rule) and, it turns out (TASK-185, found live), *also* `row` in the
 * narrow single-column LIST view this project actually uses, not the
 * `column` TASK-120 originally assumed for "list mode" (true at wider list
 * widths, not this one). Either way the story is the same: with nowrap,
 * `flex-basis:100%` on the rating badge and our own price block below has
 * no effect (nothing can drop to a new line), so whichever one comes second
 * just renders past the container's edge instead of stacking under the
 * first. `flex-wrap: wrap` only changes anything in that exact overflow
 * case — every other card (with or without our content) still fits its
 * native line exactly as before, so this is safe to apply unconditionally
 * rather than trying to chase every width/mode combination where Listeo
 * happens to use `row` direction.
 */
.details-sidebar-col-nl {
	flex-wrap: wrap;
}

/*
 * TASK-120: hides Listeo's own native card price (`.listing-booking-nl`,
 * content-listing.php/content-listing-grid.php) whenever our own
 * calculated total is showing — see the class docblock on
 * RRC\Application\PricingDisplayService for why two visible prices (ours
 * and Listeo's bare operator price) is the actual defect, not just a
 * cosmetic duplicate. `.rrc-price-block--total` always renders *before*
 * `.listing-booking-nl` in the DOM (the `price-start` hook fires ahead of
 * it in both listeo-core templates), so a general sibling combinator is
 * enough — no `pricing-card-price.php` template change could skip
 * rendering markup that belongs to listeo-core.
 */
.rrc-price-block--total ~ .listing-booking-nl,
.rrc-price-block--service ~ .listing-booking-nl {
	display: none;
}

/* TASK-140: our own service-price block (provider without saved terms) —
   same footprint as the total block so both card variants line up. */
.rrc-price-block--service {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	line-height: 1.3;
}

.rrc-price-block--service .rrc-price-total {
	font-size: 14px;
}

/*
 * TASK-120: Listeo's own native price (`.listing-booking-nl`) was always
 * `text-align: right` — the standard "price sits at the bottom-right of
 * the card" convention every travel-booking site (Airbnb, Viator,
 * GetYourGuide) uses, which is exactly why a customer's eye finds it
 * there without thinking. Now that this is the *only* price on the card
 * (native hidden, see the rule above), it needs to sit in that same
 * expected spot — `flex:0 0 100%` alone left it left-aligned (the flex
 * item spans the full row, but text inside it defaults to `start`), which
 * is a real loss of visual weight, not just a matter of font size (this
 * block's 15px/700 was already within 1px/one weight step of the
 * native's 16px/600 — checked before touching anything here).
 */
.rrc-price-block--total {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	line-height: 1.3;
	text-align: right;
}

.rrc-price-total {
	font-weight: 700;
	font-size: 15px;
	color: #1b4b4a !important;
}

.rrc-price-note {
	font-size: 11px;
	color: #6b6153 !important;
}

.rrc-price-service-label {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b6153 !important;
}

.rrc-price-note--variable-price {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	font-size: 11px;
	color: #6b6153 !important;
	margin-top: 2px;
}

/*
 * TASK-120 (selector fixed in TASK-185 — `#listeo-listings-container` was
 * never a real ID on this theme, confirmed live: the actual element is
 * `<div class="listings-container ...">` with no `id` at all, so this rule
 * was dead code since it was written and never actually applied): on a
 * `column`-direction list-mode sidebar, `flex: 0 0 100%` claims 100% of the
 * container's *height*, not its width, which pushes these blocks (and
 * Listeo's own native price after them) out into a second flex column.
 * `flex: 0 0 auto` restores natural content height; `width: 100%`
 * (unchanged) still spans the column's cross axis correctly. Harmless now
 * that `.details-sidebar-col-nl` also wraps (see above) even where it's
 * `row`-direction instead of `column`.
 */
.listings-container:not(.new-grid-layout-nl) .rrc-price-block--total,
.listings-container:not(.new-grid-layout-nl) .rrc-price-service-label,
.listings-container:not(.new-grid-layout-nl) .rrc-price-note--variable-price {
	flex: 0 0 auto;
}

/*
 * TASK-185: on a narrow phone (confirmed live at 375px), the price total
 * and its note ("$108.96 – $149.10 total" / "Non-refundable — secures your
 * spot...") rendered past the card's own right edge instead of wrapping —
 * confirmed live via getBoundingClientRect() that the box's own right edge
 * sat ~36px past its parent `.details-sidebar-col-nl`. A first attempt at
 * `min-width: 0` (the usual fix for this class of flexbox bug) measurably
 * applied (verified in computed styles) but changed nothing — the box was
 * never being *shrunk* below a content minimum, it was growing past its
 * container's cross-axis size in the first place, which `min-width` can't
 * fix either way. `max-width: 100%` is a hard cap regardless of how the
 * surrounding flex sizing resolves, and `overflow-wrap`/`word-break` make
 * sure the price line itself can break even though CSS treats
 * "$108.96 – $149.10 total" as build from unbreakable tokens.
 */
.rrc-price-block--total,
.rrc-price-block--service,
.rrc-price-total,
.rrc-price-note,
.rrc-price-note--variable-price,
.rrc-price-service-label {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-break: break-word;
}

/*
 * TASK-120: GRID view hardcodes `.details-sidebar-col-nl` to a fixed
 * `height: 62px` (Listeo's own CSS) — sized for its own native one-line
 * price only. With our extra lines wrapped in above it (via the
 * `.new-grid-layout-nl .details-sidebar-col-nl { flex-wrap: wrap; }` rule
 * above) the content needs more than 62px, and since nothing here sets
 * `overflow: hidden`, the excess spilled visually past the card's own
 * bottom edge into the card below it in the next grid row. `height: auto`
 * lets the footer grow to fit its real content instead of clipping it;
 * `min-height: 62px` keeps Listeo's original floor for listings with no
 * extra content (the "final price shown before booking" variable-price case).
 * The taller footer makes `.listing-card-nl` taller too (flex-grow on
 * `.listing-details-nl` only fills a *fixed* card height — it doesn't
 * create room on its own), which is fine: CSS Grid's default row stretch
 * still equalizes every card in that row to the tallest one, so nothing
 * goes jagged.
 */
.new-grid-layout-nl .details-sidebar-col-nl {
	height: auto;
	min-height: 62px;
}

/*
 * TASK-120: letting the footer grow (above) means cards in the same grid
 * row now end up with a *different* amount of leftover space above it —
 * fewer price lines (or the "final price shown before booking" variable-price case)
 * leaves more room than a full price block. Listeo's own
 * `.details-main-col-nl` vertically *centers* its content
 * (`justify-content: center`), so that leftover space pushed the title
 * down by a different amount on every card, breaking the row's title
 * alignment. Pinning it to the top keeps every card's title starting at
 * the same point right under the image, regardless of how tall its own
 * price footer ends up being.
 */
.new-grid-layout-nl .details-main-col-nl {
	justify-content: flex-start;
}

/*
 * TASK-120: hides Listeo's own native `.listing-pricing-tag` badge
 * (single-listing.php) whenever our own calculated total is showing right
 * after it — same reasoning as the card's `.listing-booking-nl` rule
 * above. `.listing-pricing-tag` renders *before* our block in the DOM, so
 * hiding it needs `:has()` to look forward at its own later sibling
 * (a plain `~` combinator only hides what comes *after* the match).
 * Modern evergreen browsers only; the rare unsupported browser just keeps
 * showing the native badge too, same graceful degradation as before this
 * task — never a functional break either way.
 *
 * The `#titlebar.listing-titlebar span` prefix is not decorative — it
 * matches Listeo's own selector for this badge (style.css `#titlebar
 * .listing-pricing-tag { display: inline-block; ... }`) so this rule's
 * specificity (ID + 2 classes + type) beats theirs the correct way,
 * instead of reaching for `!important`. A bare `.listing-pricing-tag:has(...)`
 * loses to that ID selector and silently does nothing — verified live
 * before landing this version.
 */
#titlebar.listing-titlebar span.listing-pricing-tag:has(~ .rrc-ficha-price-note .rrc-ficha-price-line--total) {
	display: none;
}

.rrc-ficha-price-note {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 6px;
	font-size: 12px;
}

/*
 * TASK-234: same bare-class specificity gap as booking-payment-preview.css
 * (see that file's TASK-234 comment) — `.rrc-ficha-price-line` etc. are a
 * single class each (0-1-0), so on a listing whose ficha wraps this note in
 * a more specific native/theme selector, that selector's own color (this
 * theme's red accent, the same one the docblock at the top of this file
 * already documents fighting) can win instead of the muted gray/teal
 * intended here. Re-scoped under the wrapper + `!important`, same fix.
 */
.rrc-ficha-price-note .rrc-ficha-price-line {
	color: #6b6153 !important;
}

.rrc-ficha-price-note .rrc-ficha-price-line--total {
	font-weight: 700;
	font-size: 14px;
	color: #1b4b4a !important;
}

.rrc-ficha-price-note .rrc-ficha-price-line--note {
	font-size: 11px;
}

/*
 * TASK-232: the small note ResourceCardPricingDisplay/
 * resource-card-pricing-display.js append after a Booking Plus resource's
 * patched (fee-inclusive) price, on both the resource-listing card and its
 * detail popup. Kept deliberately small/muted, same role as
 * .rrc-ficha-price-line--note above.
 */
.rrc-resource-price-note {
	display: block;
	font-size: 10px;
	color: #7a7a7a !important;
	font-weight: 500;
	margin-top: 3px;
	white-space: normal;
	max-width: 170px;
	line-height: 1.3;
}

body#dark-mode .rrc-resource-price-note {
	color: #9a9a9a !important;
}

/*
 * TASK-235: the "book each unit separately" clarification appended under
 * the classic widget's Guests control (assets/per-unit-rental-note.js) and,
 * for Booking-Plus-resource listings, under the modal's guest stepper
 * (assets/booking-modal-per-unit-note.js). Same muted/neutral treatment as
 * every other price-adjacent note in this file — never alarming, never
 * red.
 */
.rrc-per-unit-note {
	display: block;
	font-size: 11px;
	color: #6b6153 !important;
	margin-top: 6px;
	line-height: 1.35;
}

body#dark-mode .rrc-per-unit-note {
	color: #9a9a9a !important;
}