/* =========================================================
   RTL Fixes
   File: assets/front/css/rtl-fixes.css
   Purpose: Arabic / RTL polish layer without touching main.css
========================================================= */

/* =========================
   Base Direction & Font
========================= */

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


@font-face {
  font-family: 'Almarai_r';
  src: url('/assets/front/fonts/Almarai/Almarai-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

html[dir="rtl"] body{
    direction: rtl;
    text-align: right;
	font-family: 'Almarai_r';
 
}



html[dir="rtl"] p{
    line-height: 1.9;
}

/* =========================
   Bootstrap / Global Helpers
========================= */

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

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

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

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

/* =========================
   Header / Navbar
========================= */

html[dir="rtl"] #header .navbar > .container-fluid{
    direction: rtl;
}



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

html[dir="rtl"] #header .navbar-nav .nav-item .nav-link.active:before{
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .navbar-outer .navbar-toggler{
    margin-inline-start: 0;
    margin-inline-end: auto;
}

html[dir="rtl"] .top-bar .row{
    direction: rtl;
}

html[dir="rtl"] .top-bar-link-list,
html[dir="rtl"] #header .top-bar-link-list{
    direction: rtl;
}

html[dir="rtl"] .social-list,
html[dir="rtl"] #header .social-list{
    direction: rtl;
}

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

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

/* =========================
   Forms
========================= */

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

html[dir="rtl"] select{
    background-position: left .75rem center;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"]{
    direction: ltr;
    text-align: right;
}

html[dir="rtl"] .input-group{
    direction: rtl;
}

html[dir="rtl"] .input-group > .form-control{
    border-radius: 0 .375rem .375rem 0;
}

html[dir="rtl"] .input-group > .btn,
html[dir="rtl"] .input-group > button{
    border-radius: .375rem 0 0 .375rem;
}

/* =========================
   Hero / Titles
========================= */

html[dir="rtl"] .hero-title,
html[dir="rtl"] .main-title,
html[dir="rtl"] .main-title-big,
html[dir="rtl"] .big-title,
html[dir="rtl"] .title-1,
html[dir="rtl"] .title-2,
html[dir="rtl"] .title-3{
    text-align: right;
    line-height: 1.45;
}

html[dir="rtl"] .main-title-big:after{
    left: auto;
    right: 0;
}

html[dir="rtl"] .hero-swiper .hero-slide-content-inner{
    text-align: right;
}

html[dir="rtl"] .hero-swiper .slider-img-container:before{
    background: linear-gradient(260deg, rgba(0,0,0,.72) 36%, rgba(0,0,0,0) 92%);
}

/* =========================
   Buttons / Icons
========================= */

html[dir="rtl"] .main-btn i,
html[dir="rtl"] .green-btn i,
html[dir="rtl"] .dark-green-btn i,
html[dir="rtl"] .desktop-general-donation-btn i{
    margin-left: 6px;
    margin-right: 0;
}

html[dir="rtl"] .cart-count-badge{
    right: auto !important;
    left: -10px !important;
}

/* =========================
   Cart Drawer
========================= */

html[dir="rtl"] .cart-drawer{
    right: 0;
    left: auto;
}

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

html[dir="rtl"] .cart-drawer-close{
    right: auto;
    left: 14px;
}

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

html[dir="rtl"] .cart-drawer-item{
    direction: rtl;
}

html[dir="rtl"] .cart-drawer-remove{
    text-align: left;
}

/* =========================
   General Donation Drawer
========================= */

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

html[dir="rtl"] .general-donation-close{
    right: auto;
    left: 16px;
}

@media(min-width: 992px){
    html[dir="rtl"] .general-donation-box{
        left: 24px;
        right: auto;
    }

    html[dir="ltr"] .general-donation-box{
        right: 24px;
        left: auto;
    }
}

/* =========================
   Donation Box
========================= */

html[dir="rtl"] .donation-box,
html[dir="rtl"] .donation-form{
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .donation-box label,
html[dir="rtl"] .donation-form label{
    text-align: right;
}

html[dir="rtl"] .js-recurring-options,
html[dir="rtl"] .recurring-options{
    direction: rtl;
}

html[dir="rtl"] .js-recurring-btn{
    direction: rtl;
}

/* =========================
   Mobile Bottom Bar
========================= */

html[dir="rtl"] .mobile-bottom-bar{
    direction: rtl;
}

html[dir="rtl"] .mobile-bottom-item{
    border-right: 0 !important;
    border-left: 1px solid rgba(255,255,255,.1);
}

html[dir="rtl"] .mobile-bottom-item:last-child{
    border-left: 0;
}

html[dir="rtl"] .mobile-bottom-select{
    direction: rtl;
    text-align: center;
    text-align-last: center;
}

/* =========================
   Toasts
========================= */

html[dir="rtl"] #js-toast-root{
    right: auto !important;
    left: 24px !important;
}

html[dir="rtl"] .theme-toast-inner{
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .theme-toast-close{
    margin-inline-start: 0;
    margin-inline-end: 8px;
}

@media(max-width: 767px){
    html[dir="rtl"] #js-toast-root{
        left: 14px !important;
        right: 14px !important;
    }
}

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

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

html[dir="rtl"] .footer-newsletter-group .form-control{
    border-radius: 0 6px 6px 0 !important;
}

html[dir="rtl"] .footer-newsletter-group .main-btn{
    border-radius: 6px 0 0 6px !important;
}

html[dir="rtl"] .footer-link-list,
html[dir="rtl"] .footer-contact-list{
    padding-right: 0;
}

/* =========================
   Swiper / Arrows
========================= */

html[dir="rtl"] .swiper-button-next,
html[dir="rtl"] .swiper-button-prev,
html[dir="rtl"] .project-swiper-btn{
    transform: scaleX(-1);
}

html[dir="rtl"] .swiper-pagination{
    direction: rtl;
}

html[dir="rtl"] .swiper,
html[dir="rtl"] .swiper-wrapper{
    direction: ltr;
}

html[dir="rtl"] .swiper-slide{
    direction: rtl;
}

/* =========================
   Cards / Project Boxes
========================= */

html[dir="rtl"] .project-box,
html[dir="rtl"] .campaign-card,
html[dir="rtl"] .single-causes,
html[dir="rtl"] .hub-pane,
html[dir="rtl"] .hub-featured-card{
    text-align: right;
}

html[dir="rtl"] .project-location,
html[dir="rtl"] .project-content-head .d-flex,
html[dir="rtl"] .project-content-body .d-flex{
    direction: rtl;
}

/* =========================
   Mobile Horizontal Scroll Sections
========================= */

@media(max-width: 767.98px){
    html[dir="rtl"] #programs .row.g-3.expandable-grid,
    html[dir="rtl"] #events .row.g-4,
    html[dir="rtl"] .mobile-gallery-row{
        padding: 8px 0 14px 34px !important;
        direction: rtl;
    }

    html[dir="rtl"] #programs .main-container:after,
    html[dir="rtl"] #events .main-container:after,
    html[dir="rtl"] #gallery .main-container:after{
        content: "←";
        right: auto;
        left: 4px;
    }

    html[dir="rtl"] #programs .main-container:before,
    html[dir="rtl"] #events .main-container:before,
    html[dir="rtl"] #gallery .main-container:before{
        right: auto;
        left: 0;
        background: linear-gradient(to right, rgba(245,247,251,1), rgba(245,247,251,0));
    }
}

/* =========================
   Dropdowns / Utility Menus
========================= */

html[dir="rtl"] [data-umenu]{
    direction: rtl;
}

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

/* =========================
   Small Screens Polish
========================= */

@media(max-width: 575.98px){
    html[dir="rtl"] .main-container,
    html[dir="rtl"] .navbar > .container-fluid{
        padding-left: 20px;
        padding-right: 20px;
    }

    html[dir="rtl"] .hero-title,
    html[dir="rtl"] .main-title,
    html[dir="rtl"] .main-title-big{
        line-height: 1.6;
    }
}