/*
 * Rimal — RTL overrides for the Xproperty template.
 *
 * The template ships English/LTR-only, with no separate RTL build.
 * Bootstrap 5.3's grid/most utilities use logical properties and mirror
 * automatically from the <html dir="rtl"> the layout already sets — but
 * NOT its spacing utilities: this vendored bootstrap.min.css is the
 * plain (non-RTL) build, where .me-*/.ms-*/.pe-*/.ps-* compile to
 * physical margin-right/margin-left/padding-right/padding-left rather
 * than margin-inline-end/-start etc (confirmed by reading the compiled
 * CSS directly — e.g. `.me-1{margin-right:.25rem!important}`). Any
 * `me-*` icon-before-text pairing needs an explicit override here, sized
 * to match Bootstrap's own spacer scale. What's left besides that is the
 * TEMPLATE'S OWN style.css, which is written with physical left/right
 * values in a number of places. Only loaded when the current locale is
 * RTL — see resources/views/public/layouts/app.blade.php.
 *
 * Every selector/value pair below was read directly out of style.css
 * before being mirrored here — not guessed.
 */

/* Language switcher dropdown caret + panel (style.css: right:0 / left:0) */
[dir="rtl"] .cs_site_header.cs_style_1 .cs_language_switcher::after {
  right: auto;
  left: 0;
}
[dir="rtl"] .cs_site_header.cs_style_1 .cs_language_dropdown {
  left: auto;
  right: 0;
}

/* Scroll-to-top button (style.css: right:30px) */
[dir="rtl"] .cs_scrollup_btn {
  right: auto;
  left: 30px;
}

/* Advanced Search modal close button (style.css: top:15px; right:15px) */
[dir="rtl"] .cs_advanced_search_modal .cs_close_modal {
  right: auto;
  left: 15px;
}

/* Property card price badge (style.css: left:15px; top:15px) */
[dir="rtl"] .cs_card.cs_style_1 .cs_property_price {
  left: auto;
  right: 15px;
}

/* Mobile off-canvas nav panel — slides from the left instead of the right,
   and its close button moves to the panel's new inner edge. */
@media (max-width: 1199px) {
  [dir="rtl"] .cs_site_header.cs_style_1 .cs_nav .cs_nav_list_wrap {
    right: auto;
    left: 0;
    transform: translateX(-410px);
  }
  [dir="rtl"] .cs_site_header.cs_style_1 .cs_nav .cs_nav_list_wrap.active {
    transform: translateX(0);
  }
  [dir="rtl"] .cs_site_header.cs_style_1 .cs_nav .cs_nav_list_wrap .cs_close_nav {
    left: auto;
    right: 30px;
  }
  /* Mobile hamburger toggle in the header bar itself (style.css: right:15px) */
  [dir="rtl"] .cs_menu_toggle {
    right: auto;
    left: 15px;
  }
}

/* Directional icons — a "next/forward" arrow must point toward reading-end
   in RTL too, not stay pinned to the visual right. Scoped to the specific
   directional-arrow icons used in buttons/slider arrows only — never a
   blanket icon flip, since most icons (bed/bath/pin/etc.) are not
   directional and must never mirror. */
[dir="rtl"] .cs_btn .fa-arrow-right,
[dir="rtl"] .cs_btn_arrow .fa-arrow-right,
[dir="rtl"] .cs_slider_arrows svg {
  display: inline-block;
  transform: scaleX(-1);
}

/* RTL-safe placeholder alignment for number/price inputs that should stay
   left-aligned regardless of the surrounding RTL context (currency figures
   read the same direction in both locales). */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"] {
  text-align: right;
}

/* --- Phase 3 additions below --- */

/* Custom checkbox/radio (style.css: label padding-left:30px, box/tick
   positioned via left:0 / left:4px) — used throughout Phase 3 for the
   Purpose filter radios, Facilities filter checkboxes, inquiry/contact
   consent checkboxes, and the login "Remember me" checkbox. Without this,
   every one of those boxes renders on the wrong side of its own label
   text in Arabic. */
[dir="rtl"] .cs_custom_checkbox > label {
  padding-left: 0;
  padding-right: 30px;
}
[dir="rtl"] .cs_custom_checkbox > label::before {
  left: auto;
  right: 0;
}
[dir="rtl"] .cs_custom_checkbox > label::after {
  left: auto;
  right: 4px;
}

/* Custom pagination arrows (style.css: the "_left"/"_right" triangle
   shapes + spacing are physical, not logical — used by the new
   vendor/pagination/rimal.blade.php view on the Listing and Blog index
   pages). .cs_pagination_box is display:flex with the default row
   direction, which already reverses item order under dir="rtl", so the
   "previous" item (first in the DOM) lands on the right edge and "next"
   (last in the DOM) lands on the left edge. Swapping each arrow's margin
   and rotation here makes the triangle shapes point outward from the
   list again in that mirrored layout, instead of pointing back into it. */
[dir="rtl"] .cs_pagination_box .cs_pagination_arrow_left {
  margin-right: 0;
  margin-left: 15px;
  transform: rotate(180deg);
}
[dir="rtl"] .cs_pagination_box .cs_pagination_arrow_right {
  margin-left: 0;
  margin-right: 15px;
  transform: rotate(0deg);
}

/* Tom Select decorative icon (location pin / chevron) pinned via
   `right: 15px` in three contexts actually used by the site: the
   homepage hero search bar, the listing page's "Sort By" dropdown, and
   the listing filter sidebar's District select. */
[dir="rtl"] .cs_property_search.cs_style_1 .ts-control::after,
[dir="rtl"] .cs_property_sort_wrapper .ts-control::after,
[dir="rtl"] .cs_sidebar.cs_style_1 .cs_property_location .ts-control::after {
  right: auto;
  left: 15px;
}

/* Property detail gallery mosaic (rimal-custom.css: .cs_property_gallery_*)
   — the main image and the 3-stack preview column swap sides so the
   mosaic reads in the same visual order as the page's RTL text (preview
   column first/right-to-left, main image following). The gallery button
   and "+N Photos" overlay already use inset-inline-* logical properties
   in rimal-custom.css, so they mirror automatically and need no override
   here; grid-template-areas has no logical equivalent, so it's swapped
   explicitly. Desktop/tablet only — the mobile layout is a single column
   (main above, side row below) with nothing left/right to mirror. */
@media (min-width: 768px) {
  [dir="rtl"] .cs_property_gallery_grid:not(.cs_gallery_count_1) {
    grid-template-areas: "side main";
  }
}
@media (min-width: 992px) {
  [dir="rtl"] .cs_property_gallery_grid:not(.cs_gallery_count_1) {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr);
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  [dir="rtl"] .cs_property_gallery_grid:not(.cs_gallery_count_1) {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  }
}

/* Facility chip icon (public.properties.show: .cs_chip i.me-1) — .me-1
   is a physical `margin-right` in this vendored (non-RTL) Bootstrap
   build (see the file header note above), so under dir="rtl" it pushed
   the gap to the icon's outer/right edge instead of toward the facility
   name, leaving the icon flush against the text. Moved to the icon's
   left (i.e. toward the text, since the icon renders rightmost in RTL),
   same 0.25rem size as Bootstrap's own me-1 so the visual gap matches. */
[dir="rtl"] .cs_chip i.me-1 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}