/* RTL Stylesheet for Arabic */

/* ========================================
   Base RTL Settings
   ======================================== */

html[dir="rtl"] body {
    font-family: 'Noto Sans Arabic', 'Century Gothic Paneuropean', sans-serif;
    text-align: right;
}

/* ========================================
   Navbar Fixes
   ======================================== */

html[dir="rtl"] .ftco-navbar-light .navbar-brand {
    padding-left: 0;
    padding-right: 25px;
}

html[dir="rtl"] .navbar-brand img {
    padding-right: 0 !important;
    padding-left: 10px !important;
}

html[dir="rtl"] .navbar-nav {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Fix nav item separator */
html[dir="rtl"] .ftco-navbar-light .navbar-nav>.nav-item.ftco-seperator {
    margin-left: 0;
    margin-right: 20px;
    padding-left: 0;
    padding-right: 20px;
}

html[dir="rtl"] .ftco-navbar-light .navbar-nav>.nav-item.ftco-seperator:before {
    left: auto;
    right: 0;
}

/* Fix scrolled navbar */
html[dir="rtl"] .ftco-navbar-light.scrolled {
    left: 0;
    right: 0;
}

/* ========================================
   Social Media Fixes
   ======================================== */

html[dir="rtl"] .social-media p a {
    margin-right: 0;
    margin-left: 7px;
}

/* ========================================
   Owl Carousel Navigation for RTL
   ======================================== */

html[dir="rtl"] .owl-carousel.home-slider .owl-nav .owl-prev {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .owl-carousel.home-slider .owl-nav .owl-next {
    right: auto;
    left: 0;
    margin-right: 0;
    margin-left: 0;
}

html[dir="rtl"] .owl-carousel.home-slider:hover .owl-nav .owl-prev {
    margin-left: 0;
    margin-right: 50px;
}

html[dir="rtl"] .owl-carousel.home-slider:hover .owl-nav .owl-next {
    margin-right: 0;
    margin-left: 50px;
}

/* Fix subheading decorative lines for RTL */
html[dir="rtl"] .owl-carousel.home-slider .slider-item .slider-text .subheading-2:before {
    left: auto;
    right: -115px;
}

html[dir="rtl"] .owl-carousel.home-slider .slider-item .slider-text .subheading-2:after {
    right: auto;
    left: -115px;
}

/* ========================================
   Hero and Overlay Fixes
   ======================================== */

html[dir="rtl"] .hero-wrap .overlay {
    left: 0;
    right: 0;
}

html[dir="rtl"] .wrap {
    left: 0;
    right: 0;
}

/* ========================================
   Text Alignment Overrides
   ======================================== */

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

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

/* ========================================
   Float Overrides
   ======================================== */

html[dir="rtl"] .float-left,
html[dir="rtl"] .float-md-left,
html[dir="rtl"] .float-lft {
    float: right !important;
}

html[dir="rtl"] .float-right,
html[dir="rtl"] .float-md-right {
    float: left !important;
}

/* ========================================
   Padding Left/Right Utility Overrides
   ======================================== */

html[dir="rtl"] .pl-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html[dir="rtl"] .pr-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

html[dir="rtl"] .pl-1 {
    padding-left: 0 !important;
    padding-right: 0.25rem !important;
}

html[dir="rtl"] .pr-1 {
    padding-right: 0 !important;
    padding-left: 0.25rem !important;
}

html[dir="rtl"] .pl-2 {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

html[dir="rtl"] .pr-2 {
    padding-right: 0 !important;
    padding-left: 0.5rem !important;
}

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

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

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

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

html[dir="rtl"] .pl-5 {
    padding-left: 0 !important;
    padding-right: 3rem !important;
}

html[dir="rtl"] .pr-5 {
    padding-right: 0 !important;
    padding-left: 3rem !important;
}

/* Responsive padding utilities */
html[dir="rtl"] .pl-lg-3 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

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

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

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

html[dir="rtl"] .pl-lg-5 {
    padding-left: 0 !important;
    padding-right: 3rem !important;
}

html[dir="rtl"] .pl-md-5 {
    padding-left: 0 !important;
    padding-right: 3rem !important;
}

/* ========================================
   Margin Left/Right Utility Overrides
   ======================================== */

html[dir="rtl"] .ml-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .mr-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

/* Responsive margin utilities */
html[dir="rtl"] .ml-md-5 {
    margin-left: 0 !important;
    margin-right: 3rem !important;
}

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

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

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

/* ========================================
   About Section Fixes
   ======================================== */

html[dir="rtl"] .ftco-wrap-about {
    background-position-x: left !important;
}

html[dir="rtl"] .container-abt .wrap-about {
    background-position-x: right !important;
}

@media (min-width: 1280px) {
    html[dir="rtl"] .ftco-wrap-about {
        background-position-x: left !important;
    }

    html[dir="rtl"] .container-abt .wrap-about {
        background-position-x: 95px !important;
    }
}

@media (min-width: 1400px) {
    html[dir="rtl"] .ftco-wrap-about {
        background-position-x: left !important;
    }

    html[dir="rtl"] .container-abt .wrap-about {
        background-position-x: 15px !important;
    }
}

/* ========================================
   Icon Positioning Fixes
   ======================================== */

html[dir="rtl"] .appointment-form .form-group .icon {
    right: auto;
    left: 10px;
}

/* Fix font awesome icon spacing */
html[dir="rtl"] .fa {
    margin-right: 0;
    margin-left: 5px;
}

html[dir="rtl"] .btn .fa,
html[dir="rtl"] .btn i.fa {
    margin-right: 0;
    margin-left: 8px;
}

/* Fix breadcrumb chevron icons */
html[dir="rtl"] .breadcrumbs .fa-chevron-right {
    transform: rotate(180deg);
    margin-left: 0;
    margin-right: 5px;
}

/* ========================================
   Menu Section Fixes
   ======================================== */

html[dir="rtl"] .menus .menu-wrap {
    text-align: right;
}

html[dir="rtl"] .menus .text {
    padding-left: 0;
    padding-right: 15px;
    text-align: right;
}

html[dir="rtl"] .menus .menu-img {
    margin-right: 0;
    margin-left: 15px;
}

html[dir="rtl"] .menus .d-flex {
    flex-direction: row-reverse;
}

html[dir="rtl"] .menus .one-half {
    text-align: right;
}

html[dir="rtl"] .menus .one-forth {
    text-align: left;
}

/* Price icon spacing */
html[dir="rtl"] .price .icon-saudi_riyal {
    margin-right: 0;
    margin-left: 3px;
}

/* ========================================
   Footer Fixes
   ======================================== */

html[dir="rtl"] .ftco-footer .ftco-footer-widget {
    text-align: right;
}

html[dir="rtl"] .ftco-footer-social {
    float: right !important;
}

html[dir="rtl"] .ftco-footer-social li {
    margin-right: 0;
    margin-left: 10px;
}

/* Open hours in footer */
html[dir="rtl"] .open-hours li.d-flex {
    justify-content: space-between;
}

html[dir="rtl"] .open-hours li.d-flex span:first-child {
    text-align: right;
}

/* Instagram thumbnails */
html[dir="rtl"] .thumb.d-sm-flex {
    flex-direction: row-reverse;
}

/* ========================================
   Bootstrap Container Fix
   ======================================== */

html[dir="rtl"] .container,
html[dir="rtl"] .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

/* ========================================
   Row and Column Fixes
   ======================================== */

html[dir="rtl"] .row {
    flex-direction: row-reverse;
}

/* Center aligned rows should not reverse */
html[dir="rtl"] .row.justify-content-center,
html[dir="rtl"] .row.text-center {
    flex-direction: row;
}

/* ========================================
   Flexbox Utilities RTL Fixes
   ======================================== */

html[dir="rtl"] .justify-content-start {
    justify-content: flex-end !important;
}

html[dir="rtl"] .justify-content-end {
    justify-content: flex-start !important;
}

html[dir="rtl"] .justify-content-md-end {
    justify-content: flex-start !important;
}

html[dir="rtl"] .justify-content-md-start {
    justify-content: flex-end !important;
}

/* ========================================
   Top Bar / Wrap Section Fixes
   ======================================== */

html[dir="rtl"] .wrap .phone {
    text-align: right;
}

html[dir="rtl"] .wrap .mailus {
    margin-left: 0;
    margin-right: 5px;
}

/* ========================================
   Booking Form Section
   ======================================== */

html[dir="rtl"] .appointment-form {
    text-align: right;
}

html[dir="rtl"] .appointment-form h3 {
    text-align: center;
}

/* ========================================
   Testimony / Reviews Section
   ======================================== */

/* html[dir="rtl"] .testimony-wrap {
    text-align: right;
}

html[dir="rtl"] .testimony-wrap .text {
    text-align: right;
} */

/* ========================================
   Chef Section
   ======================================== */

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

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

/* ========================================
   Blog Section
   ======================================== */

html[dir="rtl"] .blog-entry {
    text-align: right;
}

html[dir="rtl"] .blog-entry .text {
    text-align: right;
}

html[dir="rtl"] #blog-inner {
    text-align: right;
}

/* ========================================
   Contact Page Fixes
   ======================================== */

html[dir="rtl"] .contact-wrap {
    text-align: right;
}

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

html[dir="rtl"] .dbox .icon {
    margin-right: 0;
    margin-left: 20px;
}

/* ========================================
   List Utilities RTL
   ======================================== */

html[dir="rtl"] .list-unstyled {
    padding-right: 0;
    padding-left: 0;
}

html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 2rem;
    padding-left: 0;
}

html[dir="rtl"] .list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ========================================
   Offset Utility Overrides
   ======================================== */

html[dir="rtl"] .offset-1 {
    margin-left: 0;
    margin-right: 8.3333333333%;
}

html[dir="rtl"] .offset-2 {
    margin-left: 0;
    margin-right: 16.6666666667%;
}

html[dir="rtl"] .offset-3 {
    margin-left: 0;
    margin-right: 25%;
}

html[dir="rtl"] .offset-4 {
    margin-left: 0;
    margin-right: 33.3333333333%;
}

html[dir="rtl"] .offset-5 {
    margin-left: 0;
    margin-right: 41.6666666667%;
}

html[dir="rtl"] .offset-6 {
    margin-left: 0;
    margin-right: 50%;
}

/* ========================================
   Form Elements RTL
   ======================================== */

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] .form-control {
    text-align: right;
}

html[dir="rtl"] label {
    text-align: right;
    display: block;
}

/* ========================================
   Button RTL Fixes
   ======================================== */

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

html[dir="rtl"] .cbtn {
    padding: 7px 20px 4px 20px;
}

/* ========================================
   Border Utilities RTL
   ======================================== */

html[dir="rtl"] .border-left {
    border-left: none !important;
    border-right: 1px solid #dee2e6 !important;
}

html[dir="rtl"] .border-right {
    border-right: none !important;
    border-left: 1px solid #dee2e6 !important;
}

/* ========================================
   Specific Component Fixes
   ======================================== */

/* Flaticon decorative elements */
html[dir="rtl"] .flat.flaticon-bread {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .flat.flaticon-breakfast {
    right: auto !important;
    left: 0 !important;
}

/* Subheading decorative elements */
html[dir="rtl"] .subheading:before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .subheading:after {
    right: auto;
    left: 0;
}

/* ========================================
   Hero Wrap and Breadcrumbs
   ======================================== */

html[dir="rtl"] .hero-wrap-2 .slider-text {
    text-align: center;
}

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

html[dir="rtl"] .breadcrumbs span {
    direction: rtl;
}

/* ========================================
   Fix Text Direction for Mixed Content
   ======================================== */

html[dir="rtl"] .phone,
html[dir="rtl"] .email,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: embed;
}

/* Keep numbers LTR */
html[dir="rtl"] .price,
html[dir="rtl"] .number,
html[dir="rtl"] time {
    direction: ltr;
    unicode-bidi: embed;
}

/* ========================================
   Animations Direction
   ======================================== */

html[dir="rtl"] .ftco-animate {
    /* Animations work the same */
}

/* ========================================
   Mobile Responsive RTL Fixes
   ======================================== */

@media (max-width: 768px) {
    html[dir="rtl"] .row {
        flex-direction: column;
    }

    html[dir="rtl"] .navbar-nav {
        text-align: right;
    }

    html[dir="rtl"] .nav-link {
        text-align: right;
    }
}

@media (max-width: 640px) {
    html[dir="rtl"] .ftco-wrap-about {
        background-image: none !important;
    }
}

/* ========================================
   Scroll and Position Fixes
   ======================================== */

html[dir="rtl"] .scrollax-performance {
    direction: rtl;
}


/* Fix Owl Carousel Dots Alignment */
html[dir="rtl"] .owl-carousel.home-slider .owl-dots {
    direction: ltr !important;
    /* Force LTR for stable centering */
    text-align: center !important;
    left: 0;
    right: 0;
    width: 100%;
}

/* Ensure the text container is perfectly centered in RTL */
html[dir="rtl"] .hero-wrap .container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix Testimonial Carousel Dots Alignment */
html[dir="rtl"] .testimony-section .owl-dots {
    direction: ltr !important;
    text-align: center !important;
}