/* ============================================
   RTL Icon Transformations and Mirroring
   For directional icons in Arabic layout
   ============================================ */

/* ============================================
   FONT AWESOME ICONS
   ============================================ */

/* Chevron Icons */
html[dir="rtl"] .fa-chevron-left:before,
html[dir="rtl"] .fa-chevron-right:before {
    transform: scaleX(-1);
    display: inline-block;
}

/* Angle Icons */
html[dir="rtl"] .fa-angle-left:before,
html[dir="rtl"] .fa-angle-right:before,
html[dir="rtl"] .fa-angle-double-left:before,
html[dir="rtl"] .fa-angle-double-right:before {
    transform: scaleX(-1);
    display: inline-block;
}

/* Arrow Icons */
html[dir="rtl"] .fa-arrow-left:before,
html[dir="rtl"] .fa-arrow-right:before,
html[dir="rtl"] .fa-long-arrow-left:before,
html[dir="rtl"] .fa-long-arrow-right:before,
html[dir="rtl"] .fa-arrow-circle-left:before,
html[dir="rtl"] .fa-arrow-circle-right:before {
    transform: scaleX(-1);
    display: inline-block;
}

/* Caret Icons */
html[dir="rtl"] .fa-caret-left:before,
html[dir="rtl"] .fa-caret-right:before {
    transform: scaleX(-1);
    display: inline-block;
}

/* Hand/Point Icons */
html[dir="rtl"] .fa-hand-o-left:before,
html[dir="rtl"] .fa-hand-o-right:before,
html[dir="rtl"] .fa-hand-point-left:before,
html[dir="rtl"] .fa-hand-point-right:before {
    transform: scaleX(-1);
    display: inline-block;
}

/* ============================================
   NAVIGATION & UI ICONS
   ============================================ */

/* Next/Previous Navigation */
html[dir="rtl"] .icon-next,
html[dir="rtl"] .icon-prev,
html[dir="rtl"] .icon-forward,
html[dir="rtl"] .icon-back {
    transform: scaleX(-1);
    display: inline-block;
}

/* Pagination */
html[dir="rtl"] .pagination-next,
html[dir="rtl"] .pagination-prev {
    transform: scaleX(-1);
    display: inline-block;
}

/* ============================================
   CAROUSEL & SLIDER CONTROLS
   ============================================ */

/* Owl Carousel */
html[dir="rtl"] .owl-next:before,
html[dir="rtl"] .owl-prev:before {
    transform: scaleX(-1);
    display: inline-block;
}

/* Bootstrap Carousel */
html[dir="rtl"] .carousel-control-prev-icon,
html[dir="rtl"] .carousel-control-next-icon {
    transform: scaleX(-1);
    display: inline-block;
}

/* Slick Slider */
html[dir="rtl"] .slick-prev:before,
html[dir="rtl"] .slick-next:before {
    transform: scaleX(-1);
    display: inline-block;
}

/* ============================================
   DROPDOWN & MENU ICONS
   ============================================ */

/* Dropdown Indicators */
html[dir="rtl"] .dropdown-toggle::after {
    margin-inline-start: 0.255em;
    margin-inline-end: 0;
}

/* Sub-menu Indicators */
html[dir="rtl"] .menu-item-has-children > a::after,
html[dir="rtl"] .has-submenu > a::after {
    transform: scaleX(-1);
    display: inline-block;
}

/* ============================================
   BREADCRUMB ICONS
   ============================================ */

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    transform: scaleX(-1);
    display: inline-block;
}

/* ============================================
   SOCIAL MEDIA ICONS (DO NOT MIRROR)
   ============================================ */

/* Keep social icons in original orientation */
html[dir="rtl"] .fa-facebook,
html[dir="rtl"] .fa-twitter,
html[dir="rtl"] .fa-linkedin,
html[dir="rtl"] .fa-instagram,
html[dir="rtl"] .fa-youtube,
html[dir="rtl"] .fa-github {
    transform: none !important;
}

/* ============================================
   UTILITY ICONS (DO NOT MIRROR)
   ============================================ */

/* Icons that should remain in original orientation */
html[dir="rtl"] .fa-search,
html[dir="rtl"] .fa-envelope,
html[dir="rtl"] .fa-phone,
html[dir="rtl"] .fa-map-marker,
html[dir="rtl"] .fa-globe,
html[dir="rtl"] .fa-user,
html[dir="rtl"] .fa-heart,
html[dir="rtl"] .fa-star,
html[dir="rtl"] .fa-check,
html[dir="rtl"] .fa-times,
html[dir="rtl"] .fa-plus,
html[dir="rtl"] .fa-minus {
    transform: none !important;
}

/* ============================================
   CUSTOM DIRECTIONAL CLASSES
   ============================================ */

/* Mirror Direction Class */
.mirror-rtl {
    transform: scaleX(-1);
    display: inline-block;
}

html[dir="rtl"] .mirror-rtl {
    transform: scaleX(-1);
    display: inline-block;
}

/* Never Mirror Class */
.no-mirror-rtl {
    transform: none !important;
}

html[dir="rtl"] .no-mirror-rtl {
    transform: none !important;
}

/* ============================================
   SVG ICONS
   ============================================ */

/* SVG directional icons */
html[dir="rtl"] svg.icon-directional,
html[dir="rtl"] .icon-svg-directional {
    transform: scaleX(-1);
}

/* Keep non-directional SVGs normal */
html[dir="rtl"] svg.icon-static,
html[dir="rtl"] .icon-svg-static {
    transform: none !important;
}

/* ============================================
   LANGUAGE SWITCHER ICON (Already handled)
   ============================================ */

html[dir="rtl"] .language-switcher-icon {
    /* Globe icon should not be mirrored */
    transform: none !important;
}

/* ============================================
   ICON POSITIONING UTILITIES
   ============================================ */

/* Icon before text */
html[dir="rtl"] .icon-before {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
}

/* Icon after text */
html[dir="rtl"] .icon-after {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* Icon in button */
html[dir="rtl"] .btn .icon,
html[dir="rtl"] .button .icon {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
}

html[dir="rtl"] .btn .icon-end,
html[dir="rtl"] .button .icon-end {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Ensure icons maintain proper spacing in RTL */
html[dir="rtl"] .icon + .text,
html[dir="rtl"] .fa + .text {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* ============================================
   RESPONSIVE ICON SIZING
   ============================================ */

@media (max-width: 768px) {
    /* Ensure transformed icons maintain proper sizing on mobile */
    html[dir="rtl"] .fa[style*="transform"],
    html[dir="rtl"] [class*="icon"][style*="transform"] {
        display: inline-block;
        min-width: 1em;
        text-align: center;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Simplify icons for printing */
    html[dir="rtl"] .fa:before,
    html[dir="rtl"] .icon:before {
        transform: none !important;
    }
}

/* ============================================
   END OF RTL ICONS STYLESHEET
   ============================================ */