/* Slider Visibility Fix for Arabic RTL */

body[dir="rtl"] .intro-slider-container {
    /* Keep the intro slider LTR so Owl renders correctly */
    direction: ltr !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 310px !important;
    min-height: 310px !important;
    overflow: visible !important;
}

body[dir="rtl"] .intro-slider {
    direction: ltr !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 310px !important;
}

/* demo-4-ar.css sets owl items to float:right in RTL which can push slides off-canvas.
   Force ONLY the homepage intro slider back to LTR layout mechanics. */
html[dir="rtl"] body[dir="rtl"] .intro-slider.owl-carousel,
html[dir="rtl"] body[dir="rtl"] .intro-slider.owl-carousel .owl-stage-outer,
html[dir="rtl"] body[dir="rtl"] .intro-slider.owl-carousel .owl-stage {
    direction: ltr !important;
}

html[dir="rtl"] body[dir="rtl"] .intro-slider.owl-carousel .owl-item {
    float: left !important;
    direction: ltr !important;
}

html[dir="rtl"] body[dir="rtl"] .intro-slider.owl-carousel .owl-item img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Owl hides carousels until initialized; in RTL we force the intro slider visible so slides/backgrounds render */
body[dir="rtl"] .intro-slider.owl-carousel {
    display: block !important;
}

body[dir="rtl"] .intro-slider-container .slider-loader {
    display: none !important;
}

body[dir="rtl"] .intro-slider.owl-carousel {
    display: block !important;
    visibility: visible !important;
}

/* If Owl gets stuck in loading/hidden state in RTL, force it visible */
body[dir="rtl"] .intro-slider.owl-loading,
body[dir="rtl"] .intro-slider.owl-hidden {
    opacity: 1 !important;
    visibility: visible !important;
}

body[dir="rtl"] .intro-slider .owl-stage-outer {
    display: block !important;
    visibility: visible !important;
    height: 310px !important;
}

body[dir="rtl"] .intro-slider .owl-stage {
    /* IMPORTANT: keep Owl's default stage behavior; flex breaks slide sizing */
    display: block !important;
    visibility: visible !important;
    height: 310px !important;
}

body[dir="rtl"] .intro-slider .owl-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 310px !important;
    position: relative !important;
}

body[dir="rtl"] .intro-slide {
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    height: 310px !important;
    min-height: 310px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ensure slider images are visible in Arabic mode */
body[dir="rtl"] .intro-slide img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 0 !important;
}

body[dir="rtl"] .intro-slide .intro-content {
    direction: rtl !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    visibility: visible !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: stretch !important;
}

body[dir="rtl"] .intro-subtitle,
body[dir="rtl"] .intro-title,
body[dir="rtl"] .intro-price {
    text-align: right;
    display: block !important;
    visibility: visible !important;
}

/* Small Mobile (480px+) - Arabic */
@media screen and (min-width: 480px) and (max-width: 575.98px) {
    body[dir="rtl"] .intro-slider-container,
    body[dir="rtl"] .intro-slider,
    body[dir="rtl"] .intro-slider .owl-stage-outer,
    body[dir="rtl"] .intro-slider .owl-stage,
    body[dir="rtl"] .intro-slider .owl-item,
    body[dir="rtl"] .intro-slide {
        height: 320px !important;
        min-height: 320px !important;
    }

    body[dir="rtl"] .intro-slide img {
        height: 320px !important;
        min-height: 320px !important;
    }
}

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

    body[dir="rtl"] .intro-slider-container,
    body[dir="rtl"] .intro-slider,
    body[dir="rtl"] .intro-slider .owl-stage-outer,
    body[dir="rtl"] .intro-slider .owl-stage,
    body[dir="rtl"] .intro-slider .owl-item,
    body[dir="rtl"] .intro-slide {
        height: 360px !important;
        min-height: 360px !important;
    }

    body[dir="rtl"] .intro-slide img {
        height: 360px !important;
    }
}

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

    body[dir="rtl"] .intro-slider-container,
    body[dir="rtl"] .intro-slider,
    body[dir="rtl"] .intro-slider .owl-stage-outer,
    body[dir="rtl"] .intro-slider .owl-stage,
    body[dir="rtl"] .intro-slider .owl-item,
    body[dir="rtl"] .intro-slide {
        height: 400px !important;
        min-height: 400px !important;
    }

    body[dir="rtl"] .intro-slide img {
        height: 400px !important;
    }
}

/* Mobile responsive fixes - ensure images are visible on small screens */
@media screen and (max-width: 575.98px) {
    body[dir="rtl"] .intro-slider-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 310px !important;
        min-height: 310px !important;
        overflow: visible !important;
    }

    body[dir="rtl"] .intro-slider {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 310px !important;
    }

    body[dir="rtl"] .intro-slider .owl-stage-outer {
        display: block !important;
        visibility: visible !important;
        height: 310px !important;
        min-height: 310px !important;
    }

    body[dir="rtl"] .intro-slider .owl-stage {
        display: block !important;
        visibility: visible !important;
        height: 310px !important;
        min-height: 310px !important;
    }

    body[dir="rtl"] .intro-slider .owl-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 310px !important;
        min-height: 310px !important;
        position: relative !important;
    }

    body[dir="rtl"] .intro-slide {
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        height: 310px !important;
        min-height: 310px !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        position: relative !important;
        overflow: hidden !important;
    }

    body[dir="rtl"] .intro-slide img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 310px !important;
        object-fit: cover !important;
        object-position: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 0 !important;
    }

    /* Force owl-carousel to show on mobile */
    body[dir="rtl"] .intro-slider.owl-carousel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body[dir="rtl"] .intro-slider.owl-loading,
    body[dir="rtl"] .intro-slider.owl-hidden {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
}

/* Header RTL fixes (header-4 / intro-clearance)
   IMPORTANT: keep template's intended FLEX header layout (not grid),
   just mirror it for RTL and prevent wrapping/auto-margin bugs. */
body[dir="rtl"] header.header-4.header-intro-clearance .header-middle .container {
    display: flex !important;
    direction: rtl !important;
    flex-direction: row !important; /* DOM order becomes: logo(right) -> search -> icons(left) */
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

/* Right side: logo + mobile toggler (keep logo at the far right) */
body[dir="rtl"] header.header-4.header-intro-clearance .header-middle .header-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-direction: row-reverse !important; /* logo then toggler */
    margin: 0 !important;
}

/* Center: search */
body[dir="rtl"] header.header-4.header-intro-clearance .header-middle .header-center {
    min-width: 0 !important;
    margin: 0 2rem !important;
    /* Center the search box (when visible on lg+) */
    display: flex !important;
    justify-content: center !important;
}

/* Left side: icons (compare/wishlist/cart + dark toggle) */
body[dir="rtl"] header.header-4.header-intro-clearance .header-middle .header-right {
    display: flex !important;
    align-items: center !important;
    /* justify-content: flex-start !important; */
    gap: 1.5rem !important;
    margin: 0 !important;
    /* base template uses margin-left:auto in intro-clearance; in RTL this breaks alignment */
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-wrap: nowrap !important;
}

/* Make the search wrapper actually center inside its column */
body[dir="rtl"] header.header-4.header-intro-clearance .header-middle .header-search-extended {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Gold/Dark mode toggle MUST be visible at all screen sizes */
body[dir="rtl"] .dark-mode-toggle-wrapper,
body[dir="rtl"] #darkModeToggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Tablet/mobile: allow wrapping so nothing overlaps (search already hidden by template under 992px) */
@media screen and (max-width: 991.98px) {
    body[dir="rtl"] header.header-4.header-intro-clearance .header-middle .container {
        flex-wrap: wrap !important;
        row-gap: 42px !important;
    }

    body[dir="rtl"] header.header-4.header-intro-clearance .header-middle .header-left,
    body[dir="rtl"] header.header-4.header-intro-clearance .header-middle .header-right {
        margin: 0 !important;
    }
}