/**
 * Arabic RTL layout overrides (PrimeGate-style).
 * Loaded only when locale === 'ar'. Relies on html[lang="ar"] and html[dir="rtl"].
 * Keep rules additive — do not override brand colors or component structure.
 */

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

/* Brand wordmark must stay visual LTR: [NARKO] [icon] [GOLD] */
html[lang="ar"] .logo-brand,
html[dir="rtl"] .logo-brand {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
}

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

/*
 * Arabic heading typography (global)
 * ---------------------------------------------------------------------------
 * Root causes of disconnected Arabic glyphs on headings:
 * 1) Positive letter-spacing / word-spacing (Latin tracking) from custom.css
 *    (e.g. .brand-devices-banner__title { letter-spacing: 0.02em }).
 * 2) text-transform on shared title chrome (uppercase/capitalize) interfering
 *    with mixed scripts and shaping contexts.
 * 3) GSAP SplitText (.text-anime-style-*) wrapping each character in its own
 *    element — Arabic cursive joining REQUIRES a continuous text run; per-char
 *    DOM nodes force isolated letterforms. function.js skips SplitText for AR;
 *    the rules below neutralize any leftover split wrappers / inline GSAP styles.
 */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
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[lang="ar"] .section-title,
html[lang="ar"] .section-title h1,
html[lang="ar"] .section-title h2,
html[lang="ar"] .section-title .section-sub-title,
html[lang="ar"] .section-title-center,
html[lang="ar"] .section-title-content,
html[lang="ar"] .hero-title,
html[lang="ar"] .page-header-box h1,
html[lang="ar"] .page-header-box h2,
html[lang="ar"] .brand-devices-banner__title,
html[lang="ar"] .text-anime-style-1,
html[lang="ar"] .text-anime-style-2,
html[lang="ar"] .text-anime-style-3,
html[lang="ar"] .text-effect,
html[lang="ar"] .key-benefit-item-content h3,
html[lang="ar"] .promise-item-content h3,
html[lang="ar"] .what-we-item-content h3,
html[lang="ar"] .intro-video-item-content h3,
html[lang="ar"] .top-selling-item-content h3,
html[lang="ar"] .feature-card__content h3,
html[lang="ar"] .sidebar-cta-title,
html[lang="ar"] .sidebar-cta-box h2,
html[lang="ar"] .error-page-content h2,
html[lang="ar"] .footer-links h2,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-title h1,
html[dir="rtl"] .section-title h2,
html[dir="rtl"] .section-title .section-sub-title,
html[dir="rtl"] .section-title-center,
html[dir="rtl"] .section-title-content,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .page-header-box h1,
html[dir="rtl"] .page-header-box h2,
html[dir="rtl"] .brand-devices-banner__title,
html[dir="rtl"] .text-anime-style-1,
html[dir="rtl"] .text-anime-style-2,
html[dir="rtl"] .text-anime-style-3,
html[dir="rtl"] .text-effect,
html[dir="rtl"] .key-benefit-item-content h3,
html[dir="rtl"] .promise-item-content h3,
html[dir="rtl"] .what-we-item-content h3,
html[dir="rtl"] .intro-video-item-content h3,
html[dir="rtl"] .top-selling-item-content h3,
html[dir="rtl"] .feature-card__content h3,
html[dir="rtl"] .sidebar-cta-title,
html[dir="rtl"] .sidebar-cta-box h2,
html[dir="rtl"] .error-page-content h2,
html[dir="rtl"] .footer-links h2 {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  text-transform: none !important;
  font-kerning: auto;
  font-variant-ligatures: common-ligatures;
}

/* Tracking / transform reset on any nested nodes inside headings */
html[lang="ar"] h1 *,
html[lang="ar"] h2 *,
html[lang="ar"] h3 *,
html[lang="ar"] h4 *,
html[lang="ar"] h5 *,
html[lang="ar"] h6 *,
html[lang="ar"] .section-title *,
html[lang="ar"] .hero-title *,
html[lang="ar"] .text-anime-style-1 *,
html[lang="ar"] .text-anime-style-2 *,
html[lang="ar"] .text-anime-style-3 *,
html[lang="ar"] .text-effect *,
html[lang="ar"] .brand-devices-banner__title *,
html[lang="ar"] .page-header-box h1 *,
html[lang="ar"] .page-header-box h2 *,
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"] .section-title *,
html[dir="rtl"] .hero-title *,
html[dir="rtl"] .text-anime-style-1 *,
html[dir="rtl"] .text-anime-style-2 *,
html[dir="rtl"] .text-anime-style-3 *,
html[dir="rtl"] .text-effect *,
html[dir="rtl"] .brand-devices-banner__title *,
html[dir="rtl"] .page-header-box h1 *,
html[dir="rtl"] .page-header-box h2 * {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  text-transform: none !important;
}

/*
 * If SplitText wrappers are present, flatten them so glyph runs reconnect,
 * and override GSAP inline opacity/transform that would hide or offset letters.
 * Scoped to animation classes only — not arbitrary heading children (e.g. links).
 */
html[lang="ar"] .text-anime-style-1 *,
html[lang="ar"] .text-anime-style-2 *,
html[lang="ar"] .text-anime-style-3 *,
html[lang="ar"] .text-effect *,
html[lang="ar"] .split-line,
html[dir="rtl"] .text-anime-style-1 *,
html[dir="rtl"] .text-anime-style-2 *,
html[dir="rtl"] .text-anime-style-3 *,
html[dir="rtl"] .text-effect *,
html[dir="rtl"] .split-line {
  display: contents !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  perspective: none !important;
}

/*
 * Heading alignment: LTR left-aligned headings mirror to right in Arabic.
 * Explicitly centered titles (section-title-center, banners, 404) stay centered.
 * Do not blanket-force all headings — card/content titles that are centered in LTR must stay centered.
 */
html[lang="ar"] .section-title:not(.section-title-center),
html[lang="ar"] .section-title:not(.section-title-center) h1,
html[lang="ar"] .section-title:not(.section-title-center) h2,
html[lang="ar"] .hero-title,
html[lang="ar"] .page-header-box,
html[lang="ar"] .page-header-box h1,
html[lang="ar"] .page-header-box h2,
html[lang="ar"] .footer-links h2,
html[lang="ar"] .sidebar-cta-title,
html[lang="ar"] .about-footer-content,
html[lang="ar"] .faqs-content-box .section-title,
html[dir="rtl"] .section-title:not(.section-title-center),
html[dir="rtl"] .section-title:not(.section-title-center) h1,
html[dir="rtl"] .section-title:not(.section-title-center) h2,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .page-header-box,
html[dir="rtl"] .page-header-box h1,
html[dir="rtl"] .page-header-box h2,
html[dir="rtl"] .footer-links h2,
html[dir="rtl"] .sidebar-cta-title,
html[dir="rtl"] .about-footer-content,
html[dir="rtl"] .faqs-content-box .section-title {
  text-align: right !important;
}

html[lang="ar"] .section-title-center,
html[lang="ar"] .section-title-center h1,
html[lang="ar"] .section-title-center h2,
html[lang="ar"] .section-title-center .section-sub-title,
html[lang="ar"] .brand-devices-banner__titles,
html[lang="ar"] .brand-devices-banner__title,
html[lang="ar"] .error-page-content,
html[lang="ar"] .error-page-content h2,
html[lang="ar"] .what-we-item-content,
html[lang="ar"] .what-we-item-content h3,
html[dir="rtl"] .section-title-center,
html[dir="rtl"] .section-title-center h1,
html[dir="rtl"] .section-title-center h2,
html[dir="rtl"] .section-title-center .section-sub-title,
html[dir="rtl"] .brand-devices-banner__titles,
html[dir="rtl"] .brand-devices-banner__title,
html[dir="rtl"] .error-page-content,
html[dir="rtl"] .error-page-content h2,
html[dir="rtl"] .what-we-item-content,
html[dir="rtl"] .what-we-item-content h3 {
  text-align: center !important;
}

/* Flex / row mirroring for common Bootstrap utilities used in chrome */
html[dir="rtl"] .topbar .row,
html[dir="rtl"] .main-header .navbar .container,
html[dir="rtl"] .footer-copyright .row {
  direction: rtl;
}

html[dir="rtl"] .topbar-info-content {
  text-align: left;
}

html[dir="rtl"] .topbar-social-list ul,
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .footer-links ul,
html[dir="rtl"] .footer-contact-items-list,
html[dir="rtl"] .key-benefit-item-list,
html[dir="rtl"] .promise-item-list,
html[dir="rtl"] .intro-video-item-list {
  direction: rtl;
}

html[dir="rtl"] .header-language-dropdown {
  margin-left: 0;
}

html[dir="rtl"] .header-lang-chevron {
  transform: scaleX(1);
}

html[dir="rtl"] .header-lang-option {
  flex-direction: row;
  text-align: right;
}

/*
 * Arabic mobile/tablet header: LTR uses margin-left:auto on .main-menu to
 * push lang + hamburger to the far side. Under html[dir="rtl"] that physical
 * margin absorbs free space and packs logo/actions together, defeating
 * Bootstrap’s justify-content:space-between on .navbar > .container.
 * Reset the auto margin and keep space-between so the logo anchors on one
 * side and the action cluster sits spaced on the other — sizes/icons unchanged.
 */
@media only screen and (max-width: 1024px) {
  html[lang="ar"] .main-header .navbar > .container,
  html[dir="rtl"] .main-header .navbar > .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  html[lang="ar"] .main-header .navbar-brand,
  html[dir="rtl"] .main-header .navbar-brand {
    flex-shrink: 0;
    margin-inline: 0;
  }

  html[lang="ar"] .main-header .main-menu,
  html[dir="rtl"] .main-header .main-menu {
    margin-left: 0;
    margin-right: 0;
    margin-inline: 0;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
  }

  html[lang="ar"] .main-header .header-mobile-controls,
  html[dir="rtl"] .main-header .header-mobile-controls {
    justify-content: flex-end;
  }
}

html[dir="rtl"] .about-footer-content,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .contact-form,
html[dir="rtl"] .faqs-content-box,
html[dir="rtl"] .privacy-policy-entry {
  text-align: right;
}

/*
 * Contact Us info cards (Arabic): center card title labels
 * ("رقم الهاتف", "البريد الإلكتروني", "موقعنا", "ساعات العمل").
 * Broader RTL text-align:right must not pull these titles off-center.
 * Icons and body list content below titles are left unchanged.
 */
html[lang="ar"] .contact-info-box .contact-info-item,
html[dir="rtl"] .contact-info-box .contact-info-item {
  align-items: center !important;
}

html[lang="ar"] .contact-info-box .contact-info-content,
html[dir="rtl"] .contact-info-box .contact-info-content {
  display: flex;
  flex-direction: column;
  align-items: center !important;
}

html[lang="ar"] .contact-info-box .contact-info-content > p,
html[dir="rtl"] .contact-info-box .contact-info-content > p {
  text-align: center !important;
  width: 100%;
}

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

html[dir="rtl"] .accordion-button::after {
  margin-left: 0;
  margin-right: auto;
}

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

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

/*
 * Footer contact: keep icon + link text on one horizontal row (mirror English).
 * Base styles use flex-wrap + near-full content width, which stacks in RTL.
 */
html[lang="ar"] .footer-contact-item,
html[dir="rtl"] .footer-contact-item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
}

html[lang="ar"] .footer-contact-item .icon-box,
html[dir="rtl"] .footer-contact-item .icon-box {
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 0;
}

html[lang="ar"] .footer-contact-item-content,
html[dir="rtl"] .footer-contact-item-content {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

html[dir="rtl"] .contact-info-item .icon-box {
  margin-left: 15px;
  margin-right: 0;
}

html[dir="rtl"] .key-benefit-item,
html[dir="rtl"] .promise-item,
html[dir="rtl"] .what-we-item,
html[dir="rtl"] .intro-video-item {
  direction: rtl;
}

html[dir="rtl"] .slicknav_nav,
html[dir="rtl"] .responsive-menu {
  text-align: right;
  direction: rtl;
}

/*
 * Product slider arrows (Arabic / RTL):
 * Previous scaleX(-1) mirrored both icons and made left/right controls feel inverted.
 * Restore the same visual orientation as LTR: left button points left, right points right.
 * Navigation handlers (prev/next) are unchanged — only icon orientation is corrected.
 */
html[lang="ar"] .product-slider-button-prev,
html[lang="ar"] .product-slider-button-next,
html[dir="rtl"] .product-slider-button-prev,
html[dir="rtl"] .product-slider-button-next {
  transform: none;
}

html[lang="ar"] .product-slider-btn .product-slider-button-prev::before,
html[dir="rtl"] .product-slider-btn .product-slider-button-prev::before {
  transform: translate(-50%, -50%) rotate(225deg);
}

html[lang="ar"] .product-slider-button-next::before,
html[dir="rtl"] .product-slider-button-next::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Page sidebars / legal TOC */
html[dir="rtl"] .page-category-list ul {
  padding-right: 0;
  text-align: right;
}

/*
 * Arabic Privacy / Terms sidebar: numbered links (e.g. "1.", "2.")
 * must sit inset from the right border — LTR keeps padding-right: 0
 * on .privacy-policy-sidebar-list links; RTL previously zeroed the
 * ul inset as well, so restore spacing for Arabic only.
 */
html[lang="ar"] .page-category-list.privacy-policy-sidebar-list ul {
  padding-right: 30px;
}

html[lang="ar"] .page-category-list.privacy-policy-sidebar-list ul li a {
  padding-right: 12px;
}

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

html[lang="ar"] .sidebar-cta-box ul li a img,
html[lang="ar"] .sidebar-cta-box ul li a i,
html[dir="rtl"] .sidebar-cta-box ul li a img,
html[dir="rtl"] .sidebar-cta-box ul li a i {
  margin-right: 0;
  margin-left: 10px;
}

/*
 * Phone numbers must stay LTR in Arabic (e.g. +90 538 744 58 46),
 * otherwise RTL reorders the plus/digits visually.
 * Do NOT set direction:ltr on the whole .footer-contact-item row —
 * that flips flex and misaligns the phone icon vs mail/location/social.
 */
html[lang="ar"] a[href*="wa.me"]:not(.footer-contact-item),
html[lang="ar"] a[href^="tel:"]:not(.footer-contact-item),
html[dir="rtl"] a[href*="wa.me"]:not(.footer-contact-item),
html[dir="rtl"] a[href^="tel:"]:not(.footer-contact-item),
html[lang="ar"] .footer-contact-item[href*="wa.me"] .footer-contact-item-content > p:first-child,
html[dir="rtl"] .footer-contact-item[href*="wa.me"] .footer-contact-item-content > p:first-child,
html[lang="ar"] .contact-info-box .contact-info-content ul li a[href*="wa.me"],
html[dir="rtl"] .contact-info-box .contact-info-content ul li a[href*="wa.me"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Floating controls already handled in custom.css via html[dir="rtl"] —
   keep this file free of conflicting absolute-position overrides. */

/*
 * Arabic: true horizontal mirror of hero / page-header backgrounds.
 * Parallaxie's background-attachment:fixed ignores transform on the section,
 * so we disable that bg and paint a scaleX(-1) layer instead.
 */
html[lang="ar"] .home-hero-section.hero,
html[dir="rtl"] .home-hero-section.hero,
html[lang="ar"] .page-header,
html[dir="rtl"] .page-header {
  background-image: none !important;
  background-attachment: scroll !important;
  isolation: isolate;
}

html[lang="ar"] .home-hero-section.hero::after,
html[dir="rtl"] .home-hero-section.hero::after,
html[lang="ar"] .page-header::after,
html[dir="rtl"] .page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform: scaleX(-1);
  pointer-events: none;
}

html[lang="ar"] .home-hero-section.hero::after,
html[dir="rtl"] .home-hero-section.hero::after {
  background-image: url("../images/hero-bg-image.jpg");
}

html[lang="ar"] .page-header::after,
html[dir="rtl"] .page-header::after {
  background-image: url("../images/page-header-bg-image.jpg");
}

html[lang="ar"] .page-header.page-header-about::after,
html[dir="rtl"] .page-header.page-header-about::after {
  background-image: url("../images/Hero_Section/page-header2.jpg");
}

html[lang="ar"] .page-header.page-header-404::after,
html[dir="rtl"] .page-header.page-header-404::after {
  background-image: url("../images/Hero_Section/page-header404.png");
}

html[lang="ar"] .page-header.page-header-news::after,
html[dir="rtl"] .page-header.page-header-news::after {
  background-image: url("../images/Hero_Section/page-header12.jpg");
}

html[lang="ar"] .page-header.page-header-products::after,
html[dir="rtl"] .page-header.page-header-products::after {
  background-image: url("../images/Hero_Section/page-header14.jpg");
}

html[lang="ar"] .page-header.page-header-contact::after,
html[dir="rtl"] .page-header.page-header-contact::after {
  background-image: url("../images/Hero_Section/page-header7.jpg");
}

html[lang="ar"] .page-header > .container,
html[dir="rtl"] .page-header > .container {
  position: relative;
  z-index: 1;
}

/* News banner uses a dedicated bg layer (no parallaxie) */
html[lang="ar"] .brand-devices-banner__bg,
html[dir="rtl"] .brand-devices-banner__bg {
  transform: scaleX(-1);
}