/* Hidden server-rendered marker relocated by rental-category-card-badge.js */
.lx-rental-badge-marker {
	display: none;
}

/* .image-overlay-top-nl (grid/list card style, e.g. /annonces/ search
   results) is `display:flex; justify-content:space-between`. Before our
   badge existed it held a single flex child (.listing-category-tag-nl), so
   space-between simply left-aligned it. Now that our badge is inserted as
   a second flex child, space-between spreads the two apart — pushing the
   category tag to the far right, under the favorite heart. Taking our
   badge out of the flex flow (like .favorite-icon-nl already is) restores
   the category tag to the left, and stacks the badge above it instead. */
.image-overlay-top-nl .lx-rental-badge.listing-tag {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

.image-overlay-top-nl .lx-rental-badge.listing-tag ~ .listing-category-tag-nl {
	margin-top: 32px;
}

/* Reuses the ".listing-tag" look from the single-listing titlebar (see
   single-listing.php) so the card badge matches that pill's style. Adjust
   colors/padding here if the theme's .listing-tag differs visually once
   placed inside .image-overlay-top-nl / .listing-small-badges-container. */
.lx-rental-badge.listing-tag {
	display: inline-block;
	background: rgba(255, 255, 255, 0.92);
	color: #333;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 20px;
	margin: 5px;
	white-space: nowrap;
}

/* class-lovexperience-listings-carousel-grid.php ("Listings Carousel Grid
   (Category Badge)"): that widget builds its own tile markup with no
   overlay container to relocate into, so the badge is echoed directly
   inside the image link (.slg-gallery-cover.lx-badge-anchor) and
   positioned here instead. */
.slg-gallery-cover.lx-badge-anchor {
	position: relative;
	display: block;
}

.slg-gallery-cover.lx-badge-anchor .lx-rental-badge.listing-tag {
	position: absolute;
	top: 25px;
	left: 25px;
	z-index: 2;
}

/* On narrow (mobile) tiles the desktop inset (25px position + 5px margin =
   ~30px) eats a much bigger share of the image and looks disconnected from
   the corner — pull it back in on small screens, based on the "Metz
   Loveroom" tile. Adjust the breakpoint/values if the live grid switches to
   its mobile layout at a different width. */
@media (max-width: 767px) {
	.slg-gallery-cover.lx-badge-anchor .lx-rental-badge.listing-tag {
		top: 15px;
		left: 15px;
		margin: 0;
	}
}

/* class-lovexperience-fan-hero.php ("Fan Hero (badge LoveConcept)") : même
   principe, badge écho directement dans le lien de la carte. Ancré à
   .listeo-fan-hero__slide-surface, déjà position:absolute;inset:0 dans
   fan-hero.css (bundled). Placé en haut à gauche, à l'opposé du badge titre
   du widget (.listeo-fan-hero__badge, en bas à gauche) pour ne pas se
   superposer. */
.listeo-fan-hero__slide-surface .lx-rental-badge.listing-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
}

/* fan-hero.css (bundled) has `.listeo-fan-hero__slide img { display: block;
   width: 100% !important; height: 100% !important; ... }`, meant for the big
   cover photo — but it also matches the emoji <img> WordPress substitutes for
   ☁️/🌶️/🔥 inside our badge text, blowing it up to fill the badge and
   pushing it onto its own line above "Doux"/"Piquant"/"Hot". Restore the
   inline emoji sizing WP's own wp-emoji-styles-inline-css sets everywhere
   else (img.wp-smiley, img.emoji { display:inline; height:1em; width:1em;
   vertical-align:-0.1em; margin:0 0.07em; }), scoped + !important to outrank
   fan-hero.css's img rule. */
.listeo-fan-hero__slide-surface .lx-rental-badge.listing-tag img {
	display: inline !important;
	width: 1em !important;
	height: 1em !important;
	max-width: none !important;
	vertical-align: -0.1em !important;
	margin: 0 0.07em !important;
	position: static !important;
	inset: auto !important;
	object-fit: initial !important;
	pointer-events: auto !important;
}

/* .listeo-fan-hero__badge (bundled fan-hero.css) truncates the listing
   title to a single line with an ellipsis (white-space: nowrap +
   text-overflow: ellipsis) — long listing titles get cut off after just a
   few words. A 2-line clamp was tried first but some titles ("Auvergne-
   Rhône-Alpes", "Hauts-de-France") need a 3rd line even at the reduced
   mobile font-size below — rather than pick an arbitrary line cap that
   still truncates *some* titles, let the badge grow to however many lines
   the title needs; swap the fully-rounded "pill" shape for a softer
   rounded rect, which reads better with wrapped text. !important because
   lx-rental-category-card-badge (this stylesheet) is enqueued — and so
   printed in <head> — BEFORE fan-hero.css (confirmed via view-source
   order), so on equal specificity fan-hero.css's own rule would otherwise
   win as the later declaration. */
.listeo-fan-hero__badge {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	line-height: 1.3 !important;
	border-radius: 16px !important;
}

/* On narrow mobile cards the badge's max-width (calc(100% - 28px) of a much
   smaller card) is too tight for 15px text — long words like "Nouvelle" or
   "Aquitaine" don't fit on either of the 2 lines, so each line gets its own
   ellipsis mid-word. Smaller text buys enough room to fit whole words per
   line instead. Matches the breakpoint fan-hero.css itself already uses to
   shrink .listeo-fan-hero__title on mobile. */
@media (max-width: 700px) {
	.listeo-fan-hero__badge {
		font-size: 12px !important;
		padding: 6px 14px !important;
	}
}

/* .listeo-fan-hero__accent (the highlighted words in the H1) is
   `display: inline-block` with its hand-drawn underline as an absolutely
   positioned `width: 100%` SVG child (fan-hero.css) — sized/positioned
   against the accent span's own box, so it only tracks the text correctly
   while that box stays shrink-to-fit AND single-line. On mobile, the
   phrase (e.g. "escapades romantiques") was sharing a line with
   surrounding title words at the title's 38px mobile size and wrapping
   internally, which put the underline under only the last wrapped line.
   `display: block` forces the phrase onto its own line but stretches the
   box to the full line width, which then stretches the underline past the
   actual text too. `display: table` is the fix: like `block`, it always
   starts a new line — but like `inline-block`, it stays shrink-to-fit —
   so centering it with margin auto (instead of block's implicit
   full-width box) keeps the SVG's width:100% matched to the real text
   width, on its own line, with room to size the text up since it no
   longer shares its line with other title words. */
@media (max-width: 700px) {
	.listeo-fan-hero__accent {
		display: table;
		margin: 0 auto;
		white-space: nowrap;
		font-size: 34px;
	}
}