/**
 * WLRE Theme — RTL overrides.
 *
 * Loaded only when locale is RTL (Arabic in Phase 19; Hebrew/Farsi/Urdu
 * future). WS5.1 already migrated text-align + margin-auto + border to
 * logical properties at source; this file covers only the cases where
 * logical properties don't help:
 *   - Paired icon + padding declarations (select chevron)
 *   - Icon rotation (carousel arrows, breadcrumb chevrons)
 *   - Absolute/fixed positioning where the "edge" side flips
 *   - Transform-based slide-ins (mobile menu direction)
 *
 * Keep this file minimal — add overrides only when genuinely needed.
 * Most layout flips on its own because the theme uses flex + grid +
 * logical-property utilities elsewhere.
 */

/* -------------------------------------------------------------------
   Form select chevron — padding-inline-end already auto-flips; we
   only need to flip the chevron image's background-position (no
   logical equivalent exists for background-position).
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-form__select {
	background-position: left 24px center;
}

/* -------------------------------------------------------------------
   Carousel prev/next arrow — directional semantics flip.
   In LTR: prev = left-arrow, next = right-arrow.
   In RTL: prev = right-arrow, next = left-arrow.
   Swap the icon rotation so visual chevron matches flow direction.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-carousel__prev svg,
[dir="rtl"] .wlre-carousel__next svg,
[dir="rtl"] .wlre-gallery__prev svg,
[dir="rtl"] .wlre-gallery__next svg,
[dir="rtl"] .wlre-pd-gallery__arrow svg {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------------
   Breadcrumb chevron separator — flips direction.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-breadcrumbs__separator svg,
[dir="rtl"] .wlre-breadcrumbs__chevron {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------------
   Header account dropdown "expand more" chevron (no flip — vertical).
   Header navigation back-button chevrons — flip.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-header__back svg,
[dir="rtl"] .wlre-account-back svg {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------------
   Forward-arrow icons inside directional links/CTAs. The SVG itself
   points right; in RTL the "forward" semantic flips, so mirror it.
   Covers: account dashboard cards, header dropdown menu items, hero
   city link, "view on map" link in property detail, newsletter
   subscribe button (inline SVG, not from the icon helper).
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-account__section-arrow svg,
[dir="rtl"] .wlre-header__dropdown-menu-icon svg,
[dir="rtl"] .wlre-hero__city-arrow svg,
[dir="rtl"] .wlre-pd-location__view-map-icon svg,
[dir="rtl"] .wlre-newsletter__submit svg {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------------
   Mobile menu slide direction.
   LTR: slides in from right (translateX(100%) → translateX(0)).
   RTL: slides in from left (translateX(-100%) → translateX(0)).
   Both cases use transform, not right/left, to avoid expanding the
   html element's ICB width and breaking the RTL scroll origin.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-mobile-menu {
	transform: translateX(-100%);
}

[dir="rtl"] .wlre-mobile-menu.wlre-mobile-menu--open {
	transform: translateX(0);
}

/* -------------------------------------------------------------------
   WhatsApp floating action button — move to opposite corner in RTL.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-whatsapp-fab {
	right: auto;
	left: 24px;
}

/* Toast severity bar now uses `border-inline-start-width: 4px;` in
   toasts.css which auto-flips in RTL — no override needed here. */

/* -------------------------------------------------------------------
   Header sticky nav edge locks (left: 0; right: 0 is LTR-neutral, fine).
   Dropdown menus with right: 0 pinning — flip to left: 0 for RTL.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-header__dropdown-menu,
[dir="rtl"] .wlre-header-account__menu,
[dir="rtl"] .wlre-dropdown__menu {
	right: auto;
	left: 0;
}

/* -------------------------------------------------------------------
   Search filter drawer — was right: 0 / left: auto.
   Flip to left: 0 / right: auto for RTL.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-search-filters__drawer {
	right: auto;
	left: 0;
}

/* -------------------------------------------------------------------
   Property detail — gallery controls + buttons positioned on specific
   corners. Flip as needed.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-pd-gallery__counter {
	right: auto;
	left: var(--wlre-space-20);
}
[dir="rtl"] .wlre-pd-gallery__back {
	left: auto;
	right: var(--wlre-space-20);
}
[dir="rtl"] .wlre-pd-actions {
	right: auto;
	left: 0;
}

/* -------------------------------------------------------------------
   Saved properties — remove button at right edge of card.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-saved-property__remove,
[dir="rtl"] .wlre-saved-property__actions {
	right: auto;
	left: var(--wlre-space-16);
}

/* -------------------------------------------------------------------
   Saved searches — edit/delete action cluster at leading edge.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-saved-search__meta {
	right: auto;
	left: var(--wlre-space-12);
}

/* -------------------------------------------------------------------
   Login page — error icon positioning.
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-login__form-error-icon {
	right: auto;
	left: var(--wlre-space-20);
}

/* -------------------------------------------------------------------
   Modal close button (was right: var(--wlre-space-16)).
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-modal__close {
	right: auto;
	left: var(--wlre-space-16);
}

/* -------------------------------------------------------------------
   Contact page map positioning (was right: var(--wlre-space-32)).
   ------------------------------------------------------------------- */
[dir="rtl"] .wlre-contact__map-controls {
	right: auto;
	left: var(--wlre-space-32);
}

/* -------------------------------------------------------------------
   Footer — LTR uses text-align:left on mobile; logical start already
   migrated in WS5.1. Ensures column separators flip correctly.
   (No extra override needed — listed for documentation completeness.)
   ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   Range slider fills — both WebKit and Firefox mirror the thumb
   position automatically in RTL, but the linear-gradient that paints
   the "filled" portion of the track is rendered in physical (LTR)
   coordinates. We flip the gradient direction so the fill stays on
   the side where the minimum sits (right edge in RTL).
   Each rule mirrors the painted side; colors/widths come from the
   originating component CSS.
   ------------------------------------------------------------------- */

/* Shared base range — used by search filters and any future ranges
   (global.css:526). 6px track, aqua fill. */
[dir="rtl"] .wlre-range,
[dir="rtl"] input[type="range"].wlre-form__input,
[dir="rtl"] .wlre-mortgage-range input[type="range"] {
	background: linear-gradient(
		to left,
		var(--wlre-color-accent-500) 0,
		var(--wlre-color-accent-500) var(--wlre-range-progress, 50%),
		var(--wlre-color-neutral-200) var(--wlre-range-progress, 50%),
		var(--wlre-color-neutral-200) 100%
	);
}

/* Mortgage calculator slider (mortgage.css:123). WebKit paints the fill
   via the runnable-track pseudo, so we override there. Firefox uses
   ::-moz-range-progress which already follows `dir`. */
[dir="rtl"] .wlre-mortgage-calc__range::-webkit-slider-runnable-track {
	background: linear-gradient(
		to left,
		var(--wlre-color-text-900) 0%,
		var(--wlre-color-text-900) var(--wlre-range-progress, 0%),
		var(--wlre-color-neutral-400, #d0d0d0) var(--wlre-range-progress, 0%),
		var(--wlre-color-neutral-400, #d0d0d0) 100%
	);
}

/* Property detail mortgage calculator (property-detail.css:1864). */
[dir="rtl"] .wlre-pd-mortgage__range {
	background: linear-gradient(
		to left,
		var(--wlre-color-brand-900) 0,
		var(--wlre-color-brand-900) var(--wlre-range-progress, 20%),
		var(--wlre-color-neutral-400, #D0D0D0) var(--wlre-range-progress, 20%),
		var(--wlre-color-neutral-400, #D0D0D0) 100%
	);
}