body {
}
/* ===== Language toggle button ===== */
.su-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    margin-inline-start: 1rem;
    transition: background .2s ease, border-color .2s ease;
}

    .su-lang-btn:hover,
    .su-lang-btn:focus-visible {
        background: rgba(255, 255, 255, .15);
        border-color: #fff;
        outline: none;
    }

/* On mobile keep the button always visible next to the hamburger */
@media (max-width: 991.98px) {
    .navbar .navbar-brand {
        order: 0;
    }

    .navbar .su-lang-btn {
        order: 1;
        margin-inline-start: auto;
        margin-inline-end: .75rem;
    }

    .navbar .navbar-toggler {
        order: 2;
    }

    .navbar .navbar-collapse {
        order: 3;
    }
}

/* ===== Arabic / RTL ===== */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav-link {
    font-family: 'Cairo', 'Nunito', 'Rubik', sans-serif;
}

html[dir="rtl"] body {
    text-align: right;
}

/* Bootstrap utility flips (LTR build is loaded, so flip what the page uses) */
html[dir="rtl"] .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

html[dir="rtl"] .me-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[dir="rtl"] .ps-4 {
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
}

html[dir="rtl"] .text-lg-start {
    text-align: right !important;
}

html[dir="rtl"] .text-center,
html[dir="rtl"] .text-center * {
    text-align: center;
}

/* Section title underline bars */
html[dir="rtl"] .section-title:not(.text-center)::before,
html[dir="rtl"] .section-title:not(.text-center)::after {
    left: auto;
    right: 0;
}

/* Footer link hover + arrow icons */
html[dir="rtl"] .link-animated a:hover {
    padding-left: 0 !important;
    padding-right: 10px;
}

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

/* Owl carousels keep LTR mechanics, content inside is RTL */
html[dir="rtl"] .owl-carousel {
    direction: ltr;
}

    html[dir="rtl"] .owl-carousel .owl-item > * {
        direction: rtl;
        text-align: right;
    }

html[dir="rtl"] .vendor-carousel .owl-item > * {
    direction: ltr;
}

/* Phone / email must stay left-to-right */
.su-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}