/**
 * RTL (Right-to-Left) Overrides
 * Contains: Direction-specific styles for Arabic language support
 * Version: 1.1
 * Last Updated: 2026-02-24
 * 
 * NOTE: This file contains ONLY RTL-specific overrides.
 * All base styles are inherited from base.css, layout.css, and components.css
 */

/* ========================================
   RTL Direction
   ======================================== */
[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* ========================================
   Typography RTL
   ======================================== */
[dir="rtl"] {
    text-align: right;
}

/* ========================================
   Flexbox RTL Adjustments
   ======================================== */
[dir="rtl"] .text-left {
    text-align: right !important;
}

[dir="rtl"] .text-right {
    text-align: left !important;
}

/* ========================================
   Navigation RTL
   ======================================== */
/* Navigation RTL */
[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: auto !important;
}

/* Desktop nav only - row-reverse for RTL */
@media (min-width: 992px) {
    [dir="rtl"] .navbar-nav {
        flex-direction: row-reverse;
    }
}

/* Mobile drawer nav - keep vertical (column) in RTL */
@media (max-width: 991px) {
    [dir="rtl"] .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav {
        flex-direction: column !important;
    }
}

/* ========================================
   Breadcrumb RTL
   ======================================== */
[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
    padding-right: 0;
    padding-left: 0.5rem;
    transform: scaleX(-1);
}

/* ========================================
   Product Cards RTL
   ======================================== */
[dir="rtl"] .product_price del {
    margin-left: 0;
    margin-right: var(--spacing-xs);
}

/* ========================================
   Icons RTL
   ======================================== */
[dir="rtl"] .icon {
    margin-right: 0;
    margin-left: var(--spacing-md);
}

/* ========================================
   Forms RTL
   ======================================== */

[dir="rtl"] .form-check-label::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .custome-checkbox input[type="checkbox"]:checked+.form-check-label::after {
    left: auto;
    right: 4px;
}

/* ========================================
   Buttons RTL
   ======================================== */
[dir="rtl"] .btn+.btn {
    margin-left: 0;
    margin-right: var(--spacing-sm);
}

/* ========================================
   Dropdown RTL
   ======================================== */
[dir="rtl"] .ddArrow::before {
    margin-left: 0;
    margin-right: 5px;
}

/* ========================================
   Header List RTL
   ======================================== */
[dir="rtl"] .header_list>li i {
    margin-left: 0;
    margin-right: 10px;
}

/* ========================================
   Tybar (App Banner) RTL
   ======================================== */
[dir="rtl"] .tybar {
    direction: rtl;
}

[dir="rtl"] .tybar img {
    float: right;
    margin-right: 20px;
    margin-left: 0;
}

[dir="rtl"] .tybar .text {
    float: inline-start;
    margin-right: 23px;
    margin-left: 0;
}

[dir="rtl"] .tybar .bar-but {
    margin-left: 24px;
    margin-right: 0;
}

[dir="rtl"] .tybar i {
    float: right;
    left: 9px;
    right: auto;
    margin-right: 4px;
    margin-left: 0;
}

/* ========================================
   Widget RTL
   ======================================== */
[dir="rtl"] .widget ul li a:hover {
    padding-left: 0;
    padding-right: 5px;
}

.size-value {
    direction: ltr !important;
}

/* ========================================
   Modal RTL
   ======================================== */
[dir="rtl"] .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

/* ========================================
   Table RTL
   ======================================== */
[dir="rtl"] .table {
    text-align: right;
}

/* ========================================
   Quantity Selector RTL
   ======================================== */
[dir="rtl"] .quantity .qty {

    border-right: 1px solid var(--color-border);
}

/* ========================================
   Status RTL
   ======================================== */
[dir="rtl"] .status-main {
    padding-left: 0;
    padding-right: var(--spacing-md);
}

[dir="rtl"] .status-contnt {
    padding-left: 0;
    padding-right: var(--spacing-md);
}

/* ========================================
   Owl Carousel RTL
   ======================================== */
[dir="rtl"] .owl-carousel {
    direction: rtl;
}

[dir="rtl"] .owl-carousel .owl-item {
    float: right;
}

/* ========================================
   Mobile Responsive RTL Adjustments
   ======================================== */
@media only screen and (max-width: 575px) {

    [dir="rtl"] .ddcommon .ddTitleText img,
    [dir="rtl"] .header_list>li i {
        margin-left: 18px !important;
        margin-right: 0 !important;
    }
}

/* ========================================
   Mobile Drawer RTL Fix
   ======================================== */
@media only screen and (max-width: 991px) {
    [dir="rtl"] .header_wrap .navbar-collapse.mobile_side_menu {
        left: auto !important;
        right: -330px !important;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    [dir="rtl"] .header_wrap .navbar-collapse.mobile_side_menu.show {
        left: auto !important;
        right: 0 !important;
    }

    [dir="rtl"] .drawer_close_btn {
        right: auto !important;
        left: 15px !important;
    }

    [dir="rtl"] .drawer_logout {
        right: auto !important;
        left: 10px !important;
    }

    /* Mobile Drawer Profile Header RTL */
    [dir="rtl"] .profile_card {
        flex-direction: row !important;
        /* browser handles direction: rtl naturally, but flex sometimes needs nudge */
        padding-left: 15px !important;
        padding-right: 3px !important;
    }

    [dir="rtl"] .profile_img {
        margin-right: 0 !important;
        margin-left: 15px !important;
    }

    [dir="rtl"] .profile_text {
        text-align: right !important;
    }

    /* Mobile Drawer Menu Item RTL Refinement */
    [dir="rtl"] .header_wrap .navbar-collapse.mobile_side_menu .nav-link span.d-flex {
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
        width: 100%;
    }

    [dir="rtl"] .header_wrap .navbar-collapse.mobile_side_menu .nav-link span.d-flex svg:not(.ml-auto) {
        margin-right: 0 !important;
        margin-left: 1rem !important;
    }

    [dir="rtl"] .header_wrap .navbar-collapse.mobile_side_menu .nav-link svg.ml-auto {
        margin-left: 0 !important;
        margin-right: auto !important;
        transform: rotate(180deg);
    }
}

/* ========================================
   Password Eye Icon RTL Fix
   ======================================== */
[dir="rtl"] .elegant-input-group .position-absolute,
[dir="rtl"] .elegant-input-group span.position-absolute {
    right: auto !important;
    left: 15px !important;
}

/* ========================================
   Search Bar RTL Fix
   ======================================== */
[dir="rtl"] .search_icon {
    right: auto !important;
    left: 10px !important;
}

[dir="rtl"] .search_wrap .form-control {
    padding: 6px 0px 0px 40px !important;
    text-align: right;
}

/* ========================================
   Login Popup RTL Fixes
   ======================================== */
[dir="rtl"] .form-check-label {
    margin-left: 0 !important;
    margin-right: 25px !important;
}

[dir="rtl"] .form-check-input {
    float: right;
    margin-left: 5px;
}

/* Password Input Text Alignment & Padding */
[dir="rtl"] .password-group .form-control {
    text-align: right;
    padding-left: 40px !important;
    /* Space for eye icon on left */
    padding-right: 15px !important;
}


.custome-checkbox .form-check-label::before {
    margin: 0px 0px 0 0;
    padding: 9px;
    margin-left: 10px;
}

.custome-checkbox .form-check-label span {

    margin-right: 10px;
}

.custome-checkbox input[type="checkbox"] .form-check-label::before {

    margin-left: 10px;
}



@media (max-width: 991px) {
    .myorder-tab .tab-content ul::before {
        right: 30px;
    }
}


/* ========================================
   Product Remove Icon RTL Fix (Updated)
   ======================================== */
/* [dir="rtl"] .product-remove {
    float: left !important;
    text-align: left !important;
    left: 15px !important;
    right: auto !important;
    position: absolute !important;
    top: auto;
    bottom: 8px !important;
} */

/* ========================================
   Mobile Header RTL Fix (Force Brand Right, Icons Left)
   ======================================== */
[dir="rtl"] .navbar-brand {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Force Navbar to space out elements */
[dir="rtl"] .navbar {
    justify-content: space-between !important;
}

/* Ensure Toggler and AttrNav are grouped correctly on the Left */
[dir="rtl"] .navbar-toggler {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Header RTL Refinement: Logo Right, Icons Left */
@media (max-width: 991px) {
    [dir="rtl"] .navbar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    [dir="rtl"] .navbar-brand {
        order: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    [dir="rtl"] .navbar-nav.attr-nav {
        order: 1 !important;
        margin-right: auto !important;
        margin-left: 15px !important;
        display: flex !important;
        flex-direction: row !important;
        float: none !important;
    }

    [dir="rtl"] .navbar-toggler {
        order: 2 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }
}

/* ========================================
   Mobile Cart Product Layout RTL
   ======================================== */
[dir="rtl"] .cart-list .product_img {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 15px !important;
}

[dir="rtl"] .cart-list .product_info {
    float: right !important;
    text-align: right !important;
}

/* ========================================
   Mobile Page Title Fix (Cart)
   ======================================== */
@media (max-width: 991px) {
    [dir="rtl"] .page-title-mini {
        display: none !important;
    }
}

@media only screen and (max-width: 991px) {
    @media only screen and (max-width: 991px) {
        .profile_text .user_name {
            margin-right: 10px;
        }
    }
}

/* ========================================
   Mini-Cart Header RTL Fixes
   ======================================== */
[dir="rtl"] .navbar-nav .dropdown-menu.cart_box {
    left: 0 !important;
    right: auto !important;
    -webkit-transform-origin: 30px 0 !important;
    transform-origin: 30px 0 !important;
}

/* Mobile specific RTL Fixes to override responsive.css */
@media only screen and (max-width: 991px) {
    [dir="rtl"] .navbar-nav .dropdown-menu.cart_box.show {
        left: 0 !important;
        right: auto !important;
        width: 310px !important;
        /* Fixed width from responsive.css but aligned left */
        -webkit-transform-origin: 15px 0 !important;
        transform-origin: 15px 0 !important;
    }
}

@media only screen and (max-width: 380px) {
    [dir="rtl"] .navbar-nav .dropdown-menu.cart_box.show {
        width: 290px !important;
        margin-left: 5px !important;
    }
}

[dir="rtl"] .cart_list img {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 10px !important;
}

[dir="rtl"] .item_remove {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 5px !important;
}

[dir="rtl"] .cart_total .cart_amount {
    float: left !important;
}

[dir="rtl"] .cart_list a {
    text-align: right !important;
}

[dir="rtl"] .cart_quantity {
    text-align: right !important;
}


/* html[dir="rtl"] .btn-addtocart-full {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
} */

/* ========================================
   Icon RTL Fixes
   ======================================== */
[dir="rtl"] .feather-arrow-right {
    transform: scaleX(-1);
    display: inline-block;
}

[dir="rtl"] .lucide-arrow-right {
    transform: scaleX(-1);
    display: inline-block;
}