/* ============================================================
   Arabic / RTL overlay
   Loaded only on /america/ar/* URLs alongside English theme CSS.
   GOLDEN RULE: NEVER use display:none or hide elements — just
   flip direction, mirror floats/margins, swap font.
   ============================================================ */

html[dir="rtl"] body {
    font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] td, html[dir="rtl"] th,
html[dir="rtl"] label, html[dir="rtl"] blockquote {
    direction: rtl;
    text-align: right;
}

/* Lists — push bullets to the right */
html[dir="rtl"] ul, html[dir="rtl"] ol {
    padding-right: 1.5em;
    padding-left: 0;
}

/* Floats / common utility classes — mirror */
html[dir="rtl"] .float-left  { float: right !important; }
html[dir="rtl"] .float-right { float: left  !important; }
html[dir="rtl"] .text-left   { text-align: right !important; }
html[dir="rtl"] .text-right  { text-align: left  !important; }
html[dir="rtl"] .ml-auto     { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .mr-auto     { margin-left:  auto !important; margin-right: 0 !important; }

/* Theme navigation — flip row direction so menu sits on the right */
html[dir="rtl"] .main-menu__list,
html[dir="rtl"] .main-menu-two-wrapper,
html[dir="rtl"] .main-menu-two-wrapper__main-menu {
    direction: rtl;
}
html[dir="rtl"] .main-menu-two-wrapper__left {
    float: right;
}
html[dir="rtl"] .main-menu-two-wrapper__right {
    float: left;
}

/* Tables */
html[dir="rtl"] table th, html[dir="rtl"] table td {
    text-align: right;
}

/* Forms */
html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],  html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="search"], html[dir="rtl"] input[type="password"],
html[dir="rtl"] textarea, html[dir="rtl"] select {
    direction: rtl; text-align: right;
}
/* Numerics keep LTR */
html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"], html[dir="rtl"] input[type="datetime-local"] {
    direction: ltr; text-align: right;
}

/* Article body */
html[dir="rtl"] article, html[dir="rtl"] .aa-article,
html[dir="rtl"] .aa-page-body {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .aa-page-body ul, html[dir="rtl"] .aa-page-body ol {
    padding-right: 1.5em; padding-left: 0;
}

/* Footer */
html[dir="rtl"] footer, html[dir="rtl"] .footer { direction: rtl; text-align: right; }

/* ============================================================
   Language switcher pill (visible in BOTH English and Arabic)
   ============================================================ */
.aa-lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    margin: 0 10px;
    background: linear-gradient(135deg, #4F3580, #6c4dff);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(79,53,128,.3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.aa-lang-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79,53,128,.4);
    color: #fff !important;
}

/* ============================================================
   Nav menu spacing fixes for RTL
   ============================================================ */
/* The theme uses inline-block <li> with whitespace as natural separator;
   in RTL the items can collapse — restore breathing room. */
html[dir="rtl"] .main-menu__list {
    display: flex;
    flex-direction: row-reverse;       /* visually mirror order */
    gap: 30px;                          /* explicit spacing between items */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
html[dir="rtl"] .main-menu__list .menu-item {
    margin: 0;                          /* override theme margins */
    display: inline-flex;
    align-items: center;
}
html[dir="rtl"] .main-menu__list .menu-item a {
    padding: 8px 0;
    white-space: nowrap;
}

/* Social icons + language pill: keep readable gap */
html[dir="rtl"] .main-menu-two-wrapper__social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
}
html[dir="rtl"] .main-menu-two-wrapper__social > a,
html[dir="rtl"] .main-menu-two-wrapper__social .aa-lang-pill {
    margin: 0;
}

/* Right side container: put pill on the LEFT in RTL (since right side is where
   the wrapper renders), with social icons after. The wrapper itself is the
   original "right" container which in RTL becomes the visual-left container. */
html[dir="rtl"] .main-menu-two-wrapper__right {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ============================================================
   Hero section in RTL — mirror the English layout
   English: text container sits on the LEFT side of the hero,
            text aligned left.
   Arabic:  text container sits on the RIGHT side of the hero,
            text aligned right.
   ============================================================ */
html[dir="rtl"] .provider-header .container,
html[dir="rtl"] .page-header .container {
    display: block;
}
html[dir="rtl"] .provider-header .page-header__content,
html[dir="rtl"] .page-header .page-header__content {
    margin-right: 0 !important;
    margin-left: auto !important;        /* push the 620px column to the RIGHT side */
    text-align: right !important;
}
html[dir="rtl"] .provider-header .heading_title,
html[dir="rtl"] .provider-header .content,
html[dir="rtl"] .page-header .heading_title,
html[dir="rtl"] .page-header .content {
    text-align: right !important;
    max-width: 620px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Buttons — inline-block, sit on the right edge of the text column */
html[dir="rtl"] .thm-btn {
    text-align: right !important;
}
html[dir="rtl"] .thm-btn a {
    display: inline-block !important;
}

/* Force the hero block to allow content to align right (override any
   theme rules using flex/justify-content that may center it). */
html[dir="rtl"] .page-header__inner {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
}

/* ============================================================
   Hero background mirror for RTL
   English: subject (woman) is on the RIGHT side of the bg image,
            text overlay sits on the LEFT.
   Arabic:  text overlay needs to be on the RIGHT, so we mirror the
            background image horizontally (subject moves to LEFT)
            and un-mirror the text so it reads normally.
   ============================================================ */
html[dir="rtl"] .provider-header,
html[dir="rtl"] .page-header.provider-header {
    transform: scaleX(-1);
}
html[dir="rtl"] .provider-header > *,
html[dir="rtl"] .page-header.provider-header > * {
    transform: scaleX(-1);
}

/* ============================================================
   Tabs (.why-choose-two .tab-btn) — RTL alignment + spacing
   ============================================================ */
html[dir="rtl"] .why-choose-two .tab-btn-box,
html[dir="rtl"] .nav-tabs,
html[dir="rtl"] .tab-buttons {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 12px;
}
html[dir="rtl"] .why-choose-two .tab-btn {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .why-choose-two .tab-content,
html[dir="rtl"] .tab-pane {
    direction: rtl;
    text-align: right;
}

/* Generic flex rows that contain icons + text often need reversal */
html[dir="rtl"] .build-business__points,
html[dir="rtl"] .web-solutions__content-list,
html[dir="rtl"] .footer-widget__contact-list {
    flex-direction: row-reverse;
    text-align: right;
}

/* Cards / blocks: align right by default in RTL */
html[dir="rtl"] .about-five__left,
html[dir="rtl"] .about-five__right,
html[dir="rtl"] .build-business__left,
html[dir="rtl"] .build-business__right,
html[dir="rtl"] .why-choose-two__content,
html[dir="rtl"] .welcome-one__right {
    text-align: right;
}

/* Section eyebrow/subtitle pills */
html[dir="rtl"] .section-title__tagline,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .section-eyebrow {
    direction: rtl;
    text-align: right;
}

/* Footer columns */
html[dir="rtl"] .footer-widget {
    text-align: right;
}
html[dir="rtl"] .footer-widget__contact-list .icon {
    margin-left: 12px;
    margin-right: 0;
}

/* FAQ accordion */
html[dir="rtl"] .accordion-button,
html[dir="rtl"] .accordion-body,
html[dir="rtl"] .accordion-item,
html[dir="rtl"] .faq-question,
html[dir="rtl"] .faq-answer {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .accordion-button::after {
    margin-right: auto;
    margin-left: 0;
}