/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
/* Cloudesta RTL fixes (2026-10-25): page headers and intros that the LTR theme forces to the left */
html[dir="rtl"] body .header-lined .section-heading,
html[dir="rtl"] body .header-lined .section-subheading,
html[dir="rtl"] body .header-lined h1,
html[dir="rtl"] body .header-lined h2,
html[dir="rtl"] body .header-lined p,
html[dir="rtl"] body .cds-page-head h1,
html[dir="rtl"] body .cds-page-head p { text-align: right !important; }
html[dir="rtl"] body .header-lined .text-center { text-align: right !important; }
html[dir="rtl"] body #order-standard_cart .header-lined .text-center { text-align: right !important; }

/* Top-bar login dropdown (assets/layout/login.tpl). main.css right-aligns it to its toggle (right:30px under 576px,
   right:0 under 350px). In RTL the toggle sits on the LEFT, so the 300px menu hung 150px past the body edge and made
   every Arabic page 540px wide on phones (clipping the logo and headings). Mirror the alignment. */
html[dir="rtl"] body .header .dropdown .profile-notification.dropdown-menu-right { left: 0 !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 576px) {
  html[dir="rtl"] body .header .dropdown .dropdown-menu.profile-notification { left: 30px !important; right: auto !important; }
}
@media (max-width: 350px) {
  html[dir="rtl"] body .header .dropdown .dropdown-menu.profile-notification { left: 0 !important; right: auto !important; }
}
/* Same mirroring for the other top-bar dropdowns (notifications bell, language) and any right-aligned header menu. */
html[dir="rtl"] body .header .dropdown .dropdown-menu.dropdown-menu-right { left: 0 !important; right: auto !important; }
@media (max-width: 576px) {
  html[dir="rtl"] body .header .dropdown .dropdown-menu.notification { left: -70px !important; right: auto !important; }
  html[dir="rtl"] body .header .dropdown .dropdown-menu.notification.lang-container { left: 45px !important; right: auto !important; }
}
@media (max-width: 350px) {
  html[dir="rtl"] body .header .dropdown .dropdown-menu.notification { left: -80px !important; right: auto !important; }
  html[dir="rtl"] body .header .dropdown .dropdown-menu.notification.lang-container { right: -135px !important; left: auto !important; }
}