/**
 * RTL (Right-to-Left) Fixes
 * 
 * Additional RTL support for Arabic language
 * Loaded only when dir="rtl" is active
 * 
 * @package Sokna
 * @since 1.0.0
 */

/* ============================================
   GLOBAL RTL FIXES
   ============================================ */

/* Ensure all text inputs respect RTL direction */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea {
    text-align: start;
    direction: rtl;
}

/* Ensure select dropdowns respect RTL */
[dir="rtl"] select {
    direction: rtl;
    text-align: start;
}

/* ============================================
   SEARCH FORM RTL FIXES
   ============================================ */

/* Search form inputs in RTL */
[dir="rtl"] .search-input {
    text-align: start;
    direction: rtl;
}

/* Search select in RTL */
[dir="rtl"] .search-select {
    text-align: start;
    direction: rtl;
}

/* Search button content alignment */
[dir="rtl"] .search-submit {
    flex-direction: row-reverse;
}

/* ============================================
   NAVIGATION RTL FIXES
   ============================================ */

/* Navigation menu alignment */
[dir="rtl"] .nav-menu {
    flex-direction: row-reverse;
}

/* Header actions alignment */
[dir="rtl"] .header-actions {
    flex-direction: row-reverse;
}

/* ============================================
   QUICK LINKS RTL FIXES
   ============================================ */

/* Quick links alignment */
[dir="rtl"] .quick-links {
    flex-direction: row-reverse;
}

/* ============================================
   GRID LAYOUT RTL FIXES
   ============================================ */

/* Footer grid in RTL */
[dir="rtl"] .footer-grid {
    direction: rtl;
}

/* Properties grid in RTL */
[dir="rtl"] .properties-grid {
    direction: rtl;
}

/* Value propositions grid in RTL */
[dir="rtl"] .props-grid {
    direction: rtl;
}

/* ============================================
   BUTTON ALIGNMENT RTL FIXES
   ============================================ */

/* Button content with icons */
[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

/* Account button */
[dir="rtl"] .btn-account {
    flex-direction: row-reverse;
}

/* ============================================
   CONTACT ITEMS RTL FIXES
   ============================================ */

/* Contact items with icons */
[dir="rtl"] .contact-item {
    flex-direction: row-reverse;
}

/* Social links */
[dir="rtl"] .footer-social {
    flex-direction: row-reverse;
}

/* ============================================
   TYPOGRAPHY RTL FIXES
   ============================================ */

/* Numbers should maintain LTR direction even in RTL */
[dir="rtl"] .price,
[dir="rtl"] .phone-number,
[dir="rtl"] .property-id {
    direction: ltr;
    display: inline-block;
}

/* ============================================
   HERO SECTION RTL FIXES
   ============================================ */

/* Hero text alignment */
[dir="rtl"] .hero-text {
    text-align: center;
}

[dir="rtl"] .hero-title,
[dir="rtl"] .hero-subtitle {
    text-align: center;
}

/* ============================================
   ACCESSIBILITY RTL FIXES
   ============================================ */

/* Focus outlines respect direction */
[dir="rtl"] :focus-visible {
    outline-offset: 2px;
}

/* ============================================
   MOBILE DRAWER RTL FIXES
   ============================================ */

/* Drawer header */
[dir="rtl"] .drawer-header {
    flex-direction: row-reverse;
}

/* Drawer account buttons */
[dir="rtl"] .drawer-account {
    direction: rtl;
}

/* ============================================
   FORM ELEMENTS RTL FIXES
   ============================================ */

/* Form labels with icons */
[dir="rtl"] .search-label {
    flex-direction: row-reverse;
}

/* Placeholder text alignment */
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
    text-align: start;
}

/* ============================================
   RESPONSIVE RTL FIXES
   ============================================ */

/* Mobile: Stack forms maintain RTL */
@media (max-width: 767px) {
    [dir="rtl"] .search-form {
        direction: rtl;
    }
    
    [dir="rtl"] .search-field {
        direction: rtl;
    }
}

/* Desktop: Horizontal forms maintain RTL flow */
@media (min-width: 768px) {
    [dir="rtl"] .search-form {
        direction: rtl;
    }
}

/* ============================================
   ICON RTL FIXES - FORCE FONT RENDERING
   ============================================ */

/**
 * Fix: Icons appear as empty boxes in Arabic RTL mode
 * Issue: Houzez icons lose their font-family declaration in RTL
 * Solution: Force the font-family and display properties
 * 
 * Security: CSS only, no security concerns
 * Performance: Minimal impact, targets specific elements
 */

/* Force Houzez icons to display correctly in RTL */
.rtl .houzez-icon,
.rtl i[class^="houzez-icon-"],
.rtl i[class*=" houzez-icon-"],
[dir="rtl"] .houzez-icon,
[dir="rtl"] i[class^="houzez-icon-"],
[dir="rtl"] i[class*=" houzez-icon-"] {
    display: inline-block !important;
    font-family: 'houzez-icon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent icon flipping in RTL */
    transform: none !important;
}

/* Fix for FontAwesome icons in RTL */
.rtl .fas,
.rtl .far,
.rtl .fab,
.rtl .fa,
[dir="rtl"] .fas,
[dir="rtl"] .far,
[dir="rtl"] .fab,
[dir="rtl"] .fa {
    display: inline-block !important;
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'FontAwesome' !important;
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent directional icons from flipping incorrectly */
    transform: none !important;
}

/* Fix .far (Regular) FontAwesome icons weight */
.rtl .far,
[dir="rtl"] .far {
    font-weight: 400 !important;
}

/* Fix .fab (Brands) FontAwesome icons */
.rtl .fab,
[dir="rtl"] .fab {
    font-family: 'Font Awesome 5 Brands', 'FontAwesome' !important;
    font-weight: 400 !important;
}

/* ============================================
   PROPERTY META ICONS RTL FIXES
   ============================================ */

/* Fix spacing for property meta icons */
.rtl .property-meta-data i,
[dir="rtl"] .property-meta-data i {
    margin-left: 5px !important;
    margin-right: 0 !important;
}

/* Fix for luxury detail card icons in RTL */
.rtl .luxury-detail-card i,
[dir="rtl"] .luxury-detail-card i {
    display: inline-block !important;
    margin: 0 auto;
}

/* Fix for feature item icons in RTL */
.rtl .feature-item i,
[dir="rtl"] .feature-item i {
    display: inline-block !important;
    flex-shrink: 0;
}

/* ============================================
   PROPERTY CARD ICONS RTL FIXES (Homepage)
   ============================================ */

/**
 * Fix: Property card icons (beds, baths, area) appear as empty boxes in RTL
 * Same issue as single property page - icons lose font-family in RTL mode
 * 
 * Solution: Force font-family and proper display for card icons
 */

/* Force Houzez icons in property cards to render correctly */
.rtl .property-card-meta .houzez-icon,
.rtl .property-card-meta .meta-icon,
.rtl .featured-meta .houzez-icon,
.rtl .featured-meta .meta-icon,
[dir="rtl"] .property-card-meta .houzez-icon,
[dir="rtl"] .property-card-meta .meta-icon,
[dir="rtl"] .featured-meta .houzez-icon,
[dir="rtl"] .featured-meta .meta-icon {
    display: inline-block !important;
    font-family: 'houzez-icon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent icon flipping */
    transform: none !important;
    /* Proper RTL margin: icon on left of text */
    margin-left: 5px !important;
    margin-right: 0 !important;
}

/* RTL: Reverse flex direction for meta items so icon stays before text */
.rtl .meta-item,
[dir="rtl"] .meta-item {
    flex-direction: row-reverse;
}

/* RTL: Adjust gap spacing for meta items */
.rtl .featured-meta,
.rtl .property-card-meta,
[dir="rtl"] .featured-meta,
[dir="rtl"] .property-card-meta {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Ensure meta label text is right-aligned in RTL */
.rtl .meta-item .meta-label,
[dir="rtl"] .meta-item .meta-label {
    text-align: right;
}

/* Specific icon classes for property cards */
.rtl .icon-bed-double-1,
.rtl .icon-shower-1,
.rtl .icon-real-estate-dimensions-plan-1,
[dir="rtl"] .icon-bed-double-1,
[dir="rtl"] .icon-shower-1,
[dir="rtl"] .icon-real-estate-dimensions-plan-1 {
    display: inline-block !important;
    font-family: 'houzez-icon' !important;
    transform: none !important;
}

/* ============================================
   HOUZEZ PROPERTY ITEM CARDS RTL FIXES
   ============================================ */

/**
 * Fix for Houzez property listing cards
 * Covers both custom and Houzez default templates
 * Note: "proerty-item" is Houzez's class name (not a typo)
 */

/* Property item cards - force icon rendering */
.rtl .proerty-item .houzez-icon,
.rtl .property-item .houzez-icon,
.rtl .item-wrap .houzez-icon,
.rtl .listing-item .houzez-icon,
[dir="rtl"] .proerty-item .houzez-icon,
[dir="rtl"] .property-item .houzez-icon,
[dir="rtl"] .item-wrap .houzez-icon,
[dir="rtl"] .listing-item .houzez-icon {
    display: inline-block !important;
    font-family: 'houzez-icon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: none !important;
    margin-left: 5px !important;
    margin-right: 0 !important;
}

/* Property item icons using i tag with specific classes */
.rtl .proerty-item i[class*="icon-"],
.rtl .property-item i[class*="icon-"],
[dir="rtl"] .proerty-item i[class*="icon-"],
[dir="rtl"] .property-item i[class*="icon-"] {
    display: inline-block !important;
    font-family: 'houzez-icon' !important;
    transform: none !important;
    margin-inline-end: 5px;
    margin-inline-start: 0;
}

/* Featured card icons */
.rtl .featured-card .houzez-icon,
.rtl .featured-card i[class*="icon-"],
[dir="rtl"] .featured-card .houzez-icon,
[dir="rtl"] .featured-card i[class*="icon-"] {
    display: inline-block !important;
    font-family: 'houzez-icon' !important;
    transform: none !important;
}

/* ============================================
   SVG ICONS RTL FIXES
   ============================================ */

/* SVG icons should not flip in RTL */
.rtl svg,
[dir="rtl"] svg {
    transform: none !important;
}

/* Except for directional icons that should flip */
.rtl .icon-arrow-left svg,
.rtl .icon-chevron-left svg,
[dir="rtl"] .icon-arrow-left svg,
[dir="rtl"] .icon-chevron-left svg {
    transform: scaleX(-1) !important;
}

/* ============================================
   ICON BUTTON RTL FIXES
   ============================================ */

/* Icon buttons with text - maintain proper spacing */
.rtl button i,
.rtl a i,
[dir="rtl"] button i,
[dir="rtl"] a i {
    margin-inline-end: 8px;
    margin-inline-start: 0;
}

/* Icon-only buttons */
.rtl .btn-icon i,
[dir="rtl"] .btn-icon i {
    margin: 0 !important;
}