/*
RTL Overrides for Simple Responsive Template - Arabic Language (ar)
This file reverses left/right, margins, padding, and positioning.
It should be linked *after* main.css only on the Arabic (RTL) page.
*/

/* ------------------------------------------------------------- */
/* 1. Global Structure Adjustments */
/* ------------------------------------------------------------- */

/* Reverse text alignment for the main banner/logo */
#banner{
    text-align: right; /* Default was left */
}

/* ------------------------------------------------------------- */
/* 2. Breadcrumbs Adjustments */
/* ------------------------------------------------------------- */

/* Reverse the padding on the breadcrumb container */
.breadcrumb {
    padding: 0 0 0 15px; /* Reversing: was Top 0, Right 15px, Bottom 0, Left 0 */
}

/* Reverse the separator position */
.breadcrumb-item + .breadcrumb-item::before {
    content: "<"; /* Changed separator direction for visual flow */
    /* Note: We keep the padding 0 5px as it's symmetrical */
}

/* ------------------------------------------------------------- */
/* 3. Featured Products Carousel Adjustments */
/* ------------------------------------------------------------- */

/* Reverse margin on product card (mobile) */
.product-card {
    /* Reversing margin: was 0 10px 20px 10px (Top, Right, Bottom, Left) */
    /* Keeping it symmetrical for now, but good practice to check if it's needed */
    margin: 0 10px 20px 10px;
}

/* Reverse arrow position and text/icon spacing */

/* --------------------------------------------------------------------------------------------------- */
/* *** CRITICAL FIX: REMOVED CONFLICTING CAROUSEL ARROW POSITIONING *** */
/* The JavaScript now handles the RTL flow by starting at the end. Swapping the arrow positions below */
/* conflicts with the JS's LTR logic (prev moves left/next moves right). */
/* By commenting these out, the arrows will revert to their default LTR positions (Prev: Left, Next: Right). */
/* This is necessary for the JS to work correctly. */
/* --------------------------------------------------------------------------------------------------- */
/*
.carousel-arrow-prev {
    right: 0; 
    left: auto;
}

.carousel-arrow-next {
    left: 0; 
    right: auto;
}
*/

/* Reverse padding on carousel container for arrows */
.carousel-container {
    /* Reversing: was 0 40px (Top/Bottom 0, Left/Right 40px) */
    padding: 0 40px; /* Keeping it symmetrical, but important if arrows were different sizes/positions */
}

/* Adjust the Learn More button icon margin (if using a directional arrow icon) */
.learn-more-button .fa {
    margin-right: 5px; /* Default was margin-left: 5px */
    margin-left: 0;
    /* Transformation for icon movement: FLIP THE ICON VISUALLY */
    transform: rotate(180deg); /* ADDED: This flips a right-pointing arrow to point left for RTL */
}

.product-card:hover .learn-more-button .fa {
    /* Default was translateX(3px) (move right). Now we move left. */
    transform: translateX(-3px) rotate(180deg); 
}


/* ------------------------------------------------------------- */
/* 4. Grid Adjustments (Margins/Paddings) */
/* ------------------------------------------------------------- */

/* Grid elements padding */
/* Since these grid classes use symmetrical 15px left/right padding, 
   the padding itself doesn't need to be reversed, only reviewed. */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    /* Default: padding-left: 15px; padding-right: 15px; -> remains symmetrical */
}

.grid_6x {
    /* Default: padding-left: 15px; padding-right: 15px; -> remains symmetrical */
}

/* .grid_4x has 0px padding left/right, so no change */

/* .grid_133x has symmetrical 5px padding left/right, so no change */

.grid_55 {
    /* Default: padding-left: 15px; padding-right: 15px; -> remains symmetrical */
}

.grid_3xx {
    /* Default: padding-left: 15px; padding-right: 15px; -> remains symmetrical */
}

.grid_9xx {
    /* Default: padding-left: 15px; padding-right: 15px; -> remains symmetrical */
}


/* ------------------------------------------------------------- */
/* 5. Footer Adjustments */
/* ------------------------------------------------------------- */

/* Reverse margin on footer ul */
footer ul{
    /* Default: margin:0 0 0 8%; (Top, Right, Bottom, Left) */
    margin: 0 8% 0 0; /* Reversed left/right margin */
}

/* ------------------------------------------------------------- */
/* 6. Button Adjustments (Margins) */
/* ------------------------------------------------------------- */

/* Reverse margins for buttonlink and buttonlink1 */
a.buttonlink,
a.buttonlink1 {
    /* Default: margin:10px 15px 10px 0; (Top, Right, Bottom, Left) */
    margin: 10px 0 10px 15px; /* Reversed right (15px) and left (0) margin */
}

/* ------------------------------------------------------------- */
/* 7. Language Selector Adjustments (Non-Media Query) */
/* ------------------------------------------------------------- */

/* Reverse the alignment for the language selector button (dropdown alignment) */
.lang-dropdown-list {
    /* Default: left: 0;   -> Align to the left edge of the button */
    /* Needs to be: right: 0; -> Align to the right edge of the button */
    left: auto;
    right: 0;
}

/* Reverse the margin for the dropdown arrow */
.arrow-down {
    /* Default: margin-left: 5px; */
    margin-right: 5px;
    margin-left: 0;
}

/* Reverse the flex gap/order for flag and text */
.lang-selector-button {
    /* Text flows RTL, so the icon should be on the right (visually first) */
    flex-direction: row-reverse; /* Reverses the order of children (flag, text, arrow) */
}

/* Reverse the gap for the list items */
.lang-dropdown-list a {
    /* Reverses the order of children (flag, text) */
    flex-direction: row-reverse;
}


/* ------------------------------------------------------------- */
/* 8. Larger Mobile Devices (min-width: 481px) */
/* ------------------------------------------------------------- */

@media only screen and (min-width: 481px) {
    /* Reverse float on logo/banner */
    #banner{
        float: right; /* Default was float: left; */
        text-align: right; /* Default was left */
    }
} /* END @media only screen and (min-width: 481px) */


/* ------------------------------------------------------------- */
/* 9. Tablet & Larger (min-width: 1000px) Adjustments */
/* ------------------------------------------------------------- */

@media only screen and (min-width: 1000px) { /* BREAKPOINT CHANGED FROM 920PX TO 1000PX */

    /* --- Header Row and Menu Alignment --- */

    /* Reverse the justification for the header row */
    header .row {
        /* Default: justify-content: space-between; (Pushes logo left, menu right) */
        /* Flexbox will generally handle this correctly, but we need to ensure 
           the logo (grid_3) is visually on the right, and menu (grid_9) on the left.
           We achieve this by reversing the flex-direction of the parent row */
        flex-direction: row-reverse;
    }

    /* Reverse the justification within the menu column (grid_9) */
    header .grid_9 {
        /* Default: justify-content: flex-end; (Aligns menu to the right edge of grid_9) */
        /* In RTL, we want the menu to align to the *left* edge of grid_9 */
        justify-content: flex-start; /* Aligns menu to the start (left) of the column */
        /* Since the logo is now on the right, and the menu is on the left, this is correct for RTL */
    }

    /* --- Sticky Header Styles --- */

    /* Reverse the sticky header positioning */
    #site-header-wrap.sticky-header {
        /* Default: left: 0; */
        /* No change needed here, as width: 100% and top: 0 ensure it spans the top */
    }

    /* --- Language Dropdown List Styling for Large Screens --- */

    .lang-dropdown-list {
        /* Default: left: 0 !important; right: auto !important; */
        /* In RTL, we want the dropdown to align to the right edge of the button */
        left: auto !important;
        right: 0 !important;
    }

    /* --- Standard Grid Adjustments (for min-width: 1000px) --- */

    /* Reverse float on logo/banner for desktop */
    #banner{
        float: right; /* Default was float: left; */
        text-align: right; /* Default was left */
    }
}
/* ------------------------------------------------------------- */
/* 10. Content and Aside Floats (LTR to RTL Swap) */
/* ------------------------------------------------------------- */

/* Reverse the main content area float */
#content {
    float: right; /* Default was float: left; */
}

/* Reverse the main sidebar float (when on the right) */
aside {
    float: left; /* Default was float: right; */
}

/* Reverse the alternative sidebar float (asidel, when on the left) */
asidel {
    float: right; /* Default was float: left; */
}


/* ------------------------------------------------------------- */
/* 11. Flexslider Caption Adjustments (Absolute Positioning) */
/* ------------------------------------------------------------- */

.flexslider .flex-caption {
    /* Default: left: 20px; right: 20px; text-align: left; */
    
    /* Caption content should align right */
    text-align: right;
    
    /* Reverse margins if max-width is used */
    margin: 0 0 auto; /* Pushes the box to the left if max-width is used */
}

/* Specific right alignment for captions (needs to be reversed) */
.flexslider .flex-caption.text-right-caption {
    /* Default: text-align: right; left: auto; right: 20px; margin-left: auto; margin-right: 0; */
    
    /* The intent of this class in LTR was to move the caption text/box to the right. 
       In RTL, the intent is to move the caption text/box to the *left*. */
       
    text-align: left; /* Text content should align left (relative to flow) */
    
    /* Positioning: Swap left and right properties */
    right: auto; /* Remove right positioning */
    left: 20px; /* Use left positioning */
    
    /* Margin: Swap auto and 0 margins to push box left */
    margin-right: auto; /* Pushes the box to the left if it has max-width/width */
    margin-left: 0; /* Ensures no left margin */
}

.flexslider .flex-caption.text-right-caption a.buttonlink {
    /* Default: margin-left: auto; margin-right: 0; (Pushes button to the right) */
    
    /* In RTL, we want to push the block-level button to the left */
    margin-right: auto;
    margin-left: 0;
}


/* ------------------------------------------------------------- */
/* 12. Grid System Overrides (float: left) */
/* ------------------------------------------------------------- */

/* The overall grid system uses 'float: left' to arrange columns.
   For Arabic (RTL), we must reverse this to 'float: right' for all grid columns. */
.grid_1, .grid_133x, .grid_2, .grid_3, .grid_3xx, .grid_4, .grid_4x, .grid_5, .grid_55, .grid_6, .grid_6x, .grid_7, .grid_8, .grid_9, .grid_9xx, .grid_10, .grid_11, .grid_12 {
    float: right; /* CRITICAL: Reverses column flow from LTR to RTL */
}

/* The .row class uses negative margins to counter the column padding.
   Default: margin-left: -15px; margin-right: -15px;
   This is symmetrical and usually does not need changing for RTL. */


/* ------------------------------------------------------------- */
/* 13. Header Grid Overrides (inside 1000px media query) */
/* ------------------------------------------------------------- */

/* These classes were only defined inside the 1000px media query in the previous chunk, 
   but their float properties are defined globally here, so we override the float: */

.grid_3header {
    float: right; /* Default was float: left; */
}

.grid_9header {
    float: right; /* Default was float: left; */
}

/* ------------------------------------------------------------- */
/* 14. Miscellaneous Floats and Alignment */
/* ------------------------------------------------------------- */

/* Reverse generic rightfloat utility */
.rightfloat{
    float: left; /* Default was float: right; */
}

/* Reverse text alignment in the contact form */
.radio,
.checkbox {
    /* Default: min-height: 18px; padding-left: 18px; */
    padding-right: 18px;
    padding-left: 0; /* Clear original padding */
}

.radio input[type=radio], .checkbox input[type=checkbox] {
    /* Default: float: left; margin-left: -18px; */
    float: right; /* Reverse float */
    margin-right: -18px; /* Reverse margin to pull button into new padding area */
    margin-left: 0; /* Clear original margin */
}

/* Reverse generic button margin */
.btn {
    /* Default: margin: 0 5px 20px 0; (Top, Right, Bottom, Left) */
    margin: 0 0 20px 5px; /* Swap Right (5px) and Left (0) margins */
}
/* ------------------------------------------------------------- */
/* 15. Responsive Adjustments (max-width: 767px) - FlexSlider */
/* ------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    /* Reverse default caption positioning (mobile) */
    .flexslider .flex-caption {
        /* Default: left: 10px; right: 10px; (Symmetrical padding, no change needed) */
        /* Text alignment handled by the global non-media-query override in Chunk 3 */
    }

    /* Reverse responsive adjustments for text-right-caption (mobile) */
    .flexslider .flex-caption.text-right-caption {
        /* Default intent: move box/text to the right edge */
        /* RTL intent: move box/text to the left edge */

        text-align: left; /* Reverse text alignment */
        
        /* Positioning: Swap left and right properties */
        right: auto; /* Remove right positioning */
        left: 10px; /* Use left positioning */
        
        /* Margin: Swap auto and 0 margins to push box left */
        margin-right: auto;
        margin-left: 0;
    }

    .flexslider .flex-caption.text-right-caption a.buttonlink {
        /* Default: margin-left: auto; margin-right: 0; (Pushes button to the right) */
        /* In RTL, push the button to the left */
        margin-right: auto;
        margin-left: 0;
    }

    /* ------------------------------------------------------------- */
    /* 16. Minimal Fix for Top Bar Spacing (max-width: 767px) - RTL */
    /* ------------------------------------------------------------- */

    /* Reverse the flex direction within the top bar paragraph
       This ensures the content flows from right to left (RTL order: phone icon, phone number, language selector) */
    .telephone .grid_9xx p {
        flex-direction: row-reverse !important; /* Reverses the visual order of items (text, icons, selector) */
        /* The gap property is symmetrical, so it remains correct. */
    }
} /* END @media (max-width: 767px) */

/* ------------------------------------------------------------- */
/* 17. Print Stylesheet (No RTL changes needed) */
/* ------------------------------------------------------------- */

/* ------------------------------------------------------------- */
/* 18. Menu Overrides (BASE/MOBILE) */
/* ------------------------------------------------------------- */

/* Adjust padding-left for sub-level mobile links to create a right-to-left indent */
.srt-menu li li a { 
    /* Default: padding-left: 40px; */
    padding-right: 40px; /* Indent from the right */
    padding-left: 10px; /* Reset left padding to default */
}
.srt-menu li li li a { 
    /* Default: padding-left: 80px; */
    padding-right: 80px; /* Deeper indent from the right */
    padding-left: 10px; /* Reset left padding to default */
}

/* --- MEGA MENU BASE ALIGNMENT FIX (APPLIES ALL SIZES) --- */
/* Forces text to the right inside menu columns for all screen sizes */
.mega-menu-column ul li a {
    text-align: right !important;
}

/* ------------------------------------------------------------- */
/* 19. Larger Mobile Devices (min-width: 481px) - Float Reversal */
/* ------------------------------------------------------------- */

@media only screen and (min-width: 481px) {
    .menu-toggle { 
        float: left; /* Default was float: right; (Pushes button to the left in RTL) */
    }
}


/* ------------------------------------------------------------- */
/* 20. DESKTOP (min-width: 1000px) - Directional Reversals */
/* ------------------------------------------------------------- */

@media only screen and (min-width: 1000px) {

    /* --- FLEXBOX FOR RIGHT-ALIGNMENT REVERSAL --- */
    /* If the main menu wrapper uses align="right" (which aligns it to the right in LTR), 
       in RTL we want it to align to the *left*. */
    div[align="right"] {
        /* Default: justify-content: flex-end; */
        justify-content: flex-start; /* Pushes content to the far left */
    }

    /*** MAIN MENU - GENERAL REVERSAL ***/
    #menu-main-navigation {
        text-align: right; /* Default was left (Aligns text content right within the nav) */
    }
    #topnav {
        /* No float change needed here as it's set to float: none; */
        /* Margin adjustment is generally handled by the flex parent rule we added in Chunk 2 (justify-content: flex-start;) */
    }
    
    /* Main Menu List Item (LI) Styling for Desktop */
    .srt-menu li {
        float: right; /* CRITICAL: Default was float: left; (Makes menu items flow RTL) */
        margin-right: 1px; /* Small gap between main menu items */
        margin-left: 0; /* Remove default margin */
    }

    /* --- TRADITIONAL DROPDOWN POSITIONING REVERSAL --- */
    .srt-menu ul {
        /* Default: left: 0; */
        /* CRITICAL: Dropdown must align to the *right* of its parent item for RTL */
        left: auto;
        right: 0; 
    }

    /* --- MULTI-LEVEL TRADITIONAL DROPDOWN POSITIONING REVERSAL --- */
    ul.srt-menu li li:hover ul,
    ul.srt-menu li li.sfHover ul {
        /* Default: left: 12em; (Positions next level to the right of parent) */
        /* CRITICAL: Position next level to the *left* of parent for RTL */
        left: auto;
        right: 12em; 
        top: 0; /* Keep top: 0 */
    }
    
    /* Reverse the deeper level for the third tier */
    ul.srt-menu li li li:hover ul,
    ul.srt-menu li li li.sfHover li ul {
        /* Default: left: 10em; */
        left: auto;
        right: 10em;
        top: 0; /* Keep top: 0 */
    }
    
    /* --- TRADITIONAL DROPDOWN TEXT ALIGNMENT FIX --- */
    /* Forces the text inside normal dropdown menu links to align right */
    .srt-menu ul li a {
        text-align: right !important;
    }

    /* --- MEGA MENU SPECIFIC STYLES REVERSAL (FIXED) --- */

    /* FIX 1: Mega Menu Column Separator Reversal (Stronger Enforcement) */
    .mega-menu-column {
        /* CRITICAL: Ensure LTR border is forcefully removed */
        border-right: none !important; 
        
        /* Apply the RTL separator (left border) to all columns */
        border-left: 1px solid #eee !important; 
    }

    /* Remove the RTL separator (left border) from the rightmost column (which is :first-child in HTML) */
    .mega-menu-content .mega-menu-column:first-child { 
        border-left: none !important;
    }

    /* Remove the conflicting rule that incorrectly put a border on the last column (visually the leftmost) */
    .mega-menu-column:last-child {
        border-right: none !important; 
        border-left: none !important; /* This column is on the far left, so it should have NO border */
    }
    
    /* FIX 2: Mega Menu Positioning - Should start on the left edge of the parent list item */
    .mega-menu-content {
        /* Default was left: 0; This pushes the start of the menu to the left edge of the parent menu item. */
        /* For RTL, the content needs to start from the RIGHT edge of the parent menu item. */
        left: auto !important;
        right: 0 !important;
    }
}