/*
 * Listing card layer — the cards on the homepage widget and on archives.
 *
 * Scope: presentation only. What each card CONTAINS is decided in
 * functions.php via Listeo's own `listeo/listing-card/elements` filter, and in
 * wp-admin (Listeo Editor → Listing Fields → "Show on front card"). Nothing
 * here hides content that could be turned off in one of those two places —
 * see the note on the amenities rule below for the one deliberate exception.
 */

/*
 * Verified badge at 120px on cards.
 *
 * THREE boxes have to be resized, not one. listeo-addons nests them:
 *
 *   .image-overlay-top-nl
 *     span.listeo-hmf-card-verified-badge          ← 56px, overflow:hidden
 *       span.listeo-hmf-verified-badge-image--card ← 56px, inline style
 *         img                                      ← 56px, inline style
 *
 * v1.0.49 sized the inner span and the img only, so the outer span went on
 * clipping them at 56.
 *
 * SPECIFICITY — the part that took three attempts. listeo-addons ships a rule
 * whose selector list already includes
 * `.image-overlay-top-nl .listeo-hmf-card-verified-badge img`, i.e. (0,3,1)
 * with !important, in a <style> block printed AFTER the child theme's
 * stylesheet. v1.0.51 matched that at (0,3,1) and still lost, because equal
 * specificity is broken by source order and the addon comes last.
 *
 * So the leading class is DOUBLED — `.listing-card-nl.listing-card-nl` — which
 * is (0,4,x) and wins outright. Doubling rather than adding a real ancestor
 * keeps this working in every place a card appears (homepage widget, archives,
 * related, nearby) without depending on what wraps it. If listeo-addons ever
 * doubles its own selectors in turn, the answer is NOT another repetition:
 * change the badge size in the plugin's own settings instead.
 *
 * overflow is reset to visible on the wrappers so nothing clips the larger art.
 * The 72px single-listing titlebar badge (--single-title) is untouched.
 */
.listing-card-nl.listing-card-nl .image-overlay-top-nl .listeo-hmf-card-verified-badge,
.listing-card-nl.listing-card-nl .image-overlay-top-nl .listeo-hmf-verified-badge-image,
.listing-image-container-nl.listing-image-container-nl .image-overlay-top-nl .listeo-hmf-card-verified-badge,
.listing-image-container-nl.listing-image-container-nl .image-overlay-top-nl .listeo-hmf-verified-badge-image {
	width: 120px !important;
	height: 120px !important;
	min-width: 120px !important;
	min-height: 120px !important;
	max-width: 120px !important;
	max-height: 120px !important;
	flex: 0 0 120px !important;
	overflow: visible !important;
}

.listing-card-nl.listing-card-nl .image-overlay-top-nl .listeo-hmf-card-verified-badge img,
.listing-card-nl.listing-card-nl .image-overlay-top-nl .listeo-hmf-verified-badge-image img,
.listing-image-container-nl.listing-image-container-nl .image-overlay-top-nl .listeo-hmf-card-verified-badge img,
.listing-image-container-nl.listing-image-container-nl .image-overlay-top-nl .listeo-hmf-verified-badge-image img {
	width: 120px !important;
	height: 120px !important;
	min-width: 120px !important;
	min-height: 120px !important;
	max-width: 120px !important;
	max-height: 120px !important;
	flex: 0 0 120px !important;
	object-fit: contain !important;
}

/*
 * Amenity icon row — belt and braces.
 *
 * The row is removed properly in functions.php by dropping 'features' from the
 * card element list, so on a correctly-running site this rule matches nothing.
 * It exists because the homepage widget also renders cards over AJAX, and a
 * cached fragment produced before the filter took effect would otherwise show
 * the row again. Delete it once the AJAX path is confirmed clean.
 */
.listing-card-nl .listing-amenities-nl {
	display: none;
}

/*
 * "No reviews yet" — hidden on cards.
 *
 * Listeo prints the rating block either as stars or, with no reviews yet, as
 * .rating-text-nl.no-rating. A new listing saying "No reviews yet" advertises
 * the one thing it cannot yet show, so the whole block is dropped when that is
 * all it contains. Cards WITH real ratings are untouched — the :has() test
 * matches only the empty state.
 */
.listing-rating-nl:has(> .rating-text-nl.no-rating) {
	display: none;
}

/* Fallback for anything without :has() — hides the text, keeps the block. */
.listing-rating-nl .rating-text-nl.no-rating {
	display: none;
}

/*
 * Card buttons keep one line.
 *
 * "View Details" wrapping to two lines made that button taller than "Book Now"
 * and the pair stopped lining up. nowrap keeps both at one line and therefore
 * at one height; the flexible width of the row absorbs the difference.
 */
.listing-card-nl .listeo-hmf-card-cta .listeo-hmf-card-cta__button {
	white-space: nowrap;
}

/*
 * Price, 22px.
 *
 * The amount only. .price-period-nl (the "/ night" style suffix Listeo appends
 * for date-range listings) is left at its own size so the number leads.
 *
 * Listeo's own `.elementor-widget-container .listing-card-nl p` sets
 * `font-size: initial` on every paragraph in a card, which is (0,2,1) — a
 * plain `.listing-card-nl .price-nl` is only (0,2,0) and lost to it, which is
 * why v1.0.50 left the price at 16px. Adding the element to the selector, and
 * a second rule that carries the Elementor wrapper, settles it without
 * !important.
 *
 * The decimals are NOT handled here — trailing .00 was switched off in
 * wp-admin at Listeo Core → General → Currency & Pricing → "Decimal places for
 * prices" = 0, which fixes it everywhere prices are printed rather than only
 * on the card.
 */
.elementor-widget-container .listing-card-nl p.price-nl,
.listing-card-nl p.price-nl {
	font-size: 22px;
	line-height: 1.25;
}

/*
 * Badge position — hard against the top-left corner, 8px proud of the edge.
 *
 * listeo-addons sets `top: 16px; left: 16px` on a single-class selector with
 * no !important. Ours would still lose a (0,1,0) tie on source order, since
 * the addon's <style> is printed after this file, so the card class is doubled
 * here for the same reason it is doubled above.
 *
 * `right: auto` is reset explicitly: the badge sits inside a flex overlay row,
 * and leaving a stale `right` in play makes the box stretch instead of sitting
 * at its own width.
 *
 * The -8px hangs the badge slightly outside its containing block. That reads
 * as intentional (a seal pinned to the corner) and is NOT clipped today — the
 * overlay is inset far enough inside .listing-image-container-nl, which does
 * carry overflow:hidden. If the overlay's own padding is ever reduced to zero,
 * the sliver will start to disappear; that is the thing to check.
 */
.listing-card-nl.listing-card-nl .image-overlay-top-nl .listeo-hmf-card-verified-badge,
.listing-image-container-nl.listing-image-container-nl .image-overlay-top-nl .listeo-hmf-card-verified-badge {
	position: absolute !important;
	top: 0 !important;
	left: -8px !important;
	right: auto !important;
}

/*
 * Card stats row — no rule above it.
 *
 * The stats row (guests, beds, baths, sqft) carried a hairline border-top from
 * listeo-addons. With the amenity row gone the border separated nothing, so it
 * only added noise. Padding and margin are left alone: the spacing they give
 * is still doing work.
 */
.listing-card-nl.listing-card-nl .listeo-hmf-card-stats {
	border-top: 0 !important;
}

/* ==========================================================================
 * CARD PRESENTATION — added 07 Sep 2026
 *
 * Everything above this line changes what the card SHOWS. Everything below
 * changes how it LOOKS, and nothing below hides content.
 *
 * ON THE DOUBLED CLASS, ONCE, FOR ALL OF IT
 * listeo-addons prints its card CSS in a <style> block AFTER every child-theme
 * stylesheet, so an equal-specificity rule here loses the tie on source order —
 * that is what cost three releases in v1.0.51–1.0.53. Any rule below that
 * overlaps one of the addon's therefore leads with `.listing-card-nl` twice.
 * Rules on nodes the addon does not style (the image, the title, the tag) are
 * left single, so it stays obvious which ones are contested.
 * ========================================================================== */

/*
 * The card shell.
 *
 * Was a 6px box with a flat #e0e0e0 hairline and no shadow: correct, and
 * completely inert. A 16px radius, a warm border and a soft shadow give it
 * enough presence to sit on the cream band, and the hover lift is what makes it
 * feel clickable before anyone reads a word of it.
 *
 * overflow stays visible — the verified badge deliberately hangs 8px outside
 * the card's left edge (see the badge section above).
 */
.listing-card-nl {
	border-radius: 16px;
	border: 1px solid var(--mr-line);
	background: #fff;
	box-shadow: var(--mr-shadow-1);
	transition:
		transform .4s var(--mr-ease),
		box-shadow .4s var(--mr-ease),
		border-color .4s var(--mr-ease);
}

.listing-card-nl:hover,
.listing-card-nl:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--mr-shadow-2);
	border-color: #E2D6BE;
}

@media (prefers-reduced-motion: reduce) {
	.listing-card-nl,
	.listing-card-nl:hover,
	.listing-card-nl:focus-within {
		transform: none;
		transition: box-shadow .2s ease, border-color .2s ease;
	}
}

/* The image corners have to follow the shell's, or a pale sliver of card shows
   through at the top two corners. 15px, not 16 — one less than the shell, so
   the 1px border reads as a continuous line rather than a step. */
.listing-card-nl .listing-image-container-nl {
	border-radius: 15px 15px 0 0;
}

/*
 * Slow zoom on the photograph.
 *
 * ⚠️ The zoom is on the <img>, NOT on .slider-wrapper-nl. That wrapper carries
 * an inline `transform: translateX(...)` written by the card's own image
 * slider on every frame; putting a scale there would fight the slider and stop
 * the arrows working.
 */
.listing-card-nl .listing-image-container-nl img.slider-image-nl,
.listing-card-nl .listing-image-container-nl > a img {
	transition: transform .8s var(--mr-ease);
}

.listing-card-nl:hover .listing-image-container-nl img.slider-image-nl,
.listing-card-nl:hover .listing-image-container-nl > a img {
	transform: scale(1.05);
}

/*
 * The category tag moves to the right, beside the heart.
 *
 * .image-overlay-top-nl is a `justify-content: space-between` row holding the
 * tag and the favourite button — so the tag sat at the top left, which is
 * exactly where v1.0.53 pinned the verified badge. Any listing that is both
 * verified and categorised would have stacked the two on top of each other.
 * Nobody has hit it yet only because the one verified listing has no category
 * tag.
 *
 * Sending the row to flex-end and taking the favourite button out of absolute
 * positioning puts tag and heart side by side on the right, and leaves the
 * whole left corner to the badge. A card with only a heart is unaffected:
 * flex-end and `right: 0` land in the same place.
 */
.listing-card-nl .image-overlay-top-nl {
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.listing-card-nl .image-overlay-top-nl .favorite-icon-nl {
	position: static;
	order: 2;
}

.listing-card-nl .listing-category-tag-nl {
	order: 1;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .93);
	color: var(--mr-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

.listing-card-nl .favorite-icon-nl {
	background: rgba(255, 255, 255, .93);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	transition: background-color .22s ease, transform .22s var(--mr-ease);
}

.listing-card-nl .favorite-icon-nl .save {
	color: var(--mr-ink-2);
	transition: color .22s ease;
}

.listing-card-nl .favorite-icon-nl:hover {
	background: #fff;
	transform: scale(1.06);
}

.listing-card-nl .favorite-icon-nl:hover .save {
	color: var(--mr-gold-deep);
}

/* Title. The serif comes from brand.css; this is only size and colour. */
.listing-card-nl .listing-title-nl {
	font-size: 21px;
	line-height: 1.24;
	color: var(--mr-ink);
}

/* Location, demoted. It was 16px in #666 — the same visual weight as the
   title's second line. */
.listing-card-nl .listing-location-nl {
	margin-top: 9px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mr-muted);
}

.listing-card-nl .listing-location-nl::before,
.listing-card-nl .listing-location-nl i {
	color: var(--mr-gold);
}

/*
 * Stats row. The numbers stay the point; the icons become gold so the row
 * reads as one band of information rather than four black glyphs.
 */
.listing-card-nl.listing-card-nl .listeo-hmf-card-stats {
	gap: 8px 18px;
	margin-top: 18px;
	padding-top: 0;
}

.listing-card-nl.listing-card-nl .listeo-hmf-card-stat {
	font-size: 13px;
	font-weight: 600;
	color: var(--mr-body);
}

.listing-card-nl.listing-card-nl .listeo-hmf-card-stat i {
	color: var(--mr-gold);
	font-size: 14px;
}

/*
 * A hairline above the price row.
 *
 * Drawn as a ::before rather than a border-top because .details-sidebar-col-nl
 * is a wrapped flex child with a computed width wider than the card; giving it
 * a real border would mean touching that box model. An inset absolute line
 * changes nothing about layout.
 *
 * Scoped to the grid layout on purpose: in the list layout this column sits
 * beside the details rather than under them, and a horizontal rule there would
 * be nonsense.
 */
.new-grid-layout-nl .listing-card-nl .details-sidebar-col-nl {
	position: relative;
	padding-top: 18px;
}

.new-grid-layout-nl .listing-card-nl .details-sidebar-col-nl::before {
	content: "";
	position: absolute;
	top: 0;
	left: 25px;
	right: 25px;
	height: 1px;
	background: var(--mr-line-soft);
}

/* Price — the number has to feel like a fact, so it stays in the sans, gets
   the darkest ink on the card, and uses tabular figures so prices line up
   between cards. Size (22px) is unchanged from v1.0.50. */
.elementor-widget-container .listing-card-nl p.price-nl,
.listing-card-nl p.price-nl {
	color: var(--mr-ink);
	font-weight: 700;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

/* Rating: gold star, ink number. */
.listing-card-nl .listing-rating-nl .stars-nl i {
	color: var(--mr-gold);
}

.listing-card-nl .listing-rating-nl .rating-text-nl {
	color: var(--mr-ink);
	font-size: 14px;
	font-weight: 700;
}

/*
 * The action bar — gold Book Now, ink View Details.
 *
 * The blue was #2f42ff, a stock accent from the addon that belongs to no part
 * of this brand and pulled the eye away from the photograph on every card.
 *
 * !important is used on the three colour declarations, and only those. The
 * addon's rules for these nodes carry !important themselves on `color`, and
 * its stylesheet is printed last; a doubled class wins the specificity contest
 * but not against !important. Everything else here (radius, size, spacing) is
 * plain and wins on specificity alone.
 *
 * The expanding hover — Book Now widening from 30% to 70% — is the addon's and
 * is deliberately left intact. It is the single best thing about this card.
 */
.listing-card-nl.listing-card-nl .listeo-hmf-card-cta {
	background: var(--mr-ink) !important;
	border-radius: 0 0 15px 15px;
}

.listing-card-nl.listing-card-nl:has(> .listeo-hmf-card-cta) {
	padding-bottom: 50px;
}

.listing-card-nl.listing-card-nl .listeo-hmf-card-cta .listeo-hmf-card-cta__button {
	min-height: 50px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .045em;
}

.listing-card-nl.listing-card-nl .listeo-hmf-card-cta .listeo-hmf-card-cta__details {
	background: var(--mr-ink) !important;
	color: rgba(255, 255, 255, .88) !important;
}

.listing-card-nl.listing-card-nl .listeo-hmf-card-cta .listeo-hmf-card-cta__book {
	background-color: #B27F26 !important;
	background-image: var(--mr-gold-grad) !important;
	color: #fff !important;
}

/* Keyboard users get the same affordance the mouse does. Listeo's own focus
   ring is a browser default that disappears against the dark bar. */
.listing-card-nl .listeo-hmf-card-cta__button:focus-visible,
.listing-card-nl .listing-details-nl:focus-visible {
	outline: 2px solid var(--mr-gold-hi);
	outline-offset: -3px;
}