/**
* Theme Name: Instry Child
* Description: This is a child theme of Instry, generated by Merlin WP.
* Author: <a href="http://themelexus.com/">Themelexus</a>
* Template: instry
* Version: 1.2.7
*/
/* Home hero slider: cross-fade between slides + slow Ken Burns on the active slide background
   (.aqtar-kb = absolute bg container). Modelled on owe.sa: 15s ease-out, 1 -> 1.2, anchored centre-left. */
.aqtar-kb { transform: scale(1); transform-origin: left center; will-change: transform; pointer-events: none; }
.swiper-slide-active .aqtar-kb, .swiper-slide-duplicate-active .aqtar-kb { animation: aqtar-kb 15s ease-out forwards; }
@keyframes aqtar-kb { from { transform: scale(1); } to { transform: scale(1.2); } }
.aqtar-hero-slider .swiper-slide { transition-property: opacity; }
html[dir="rtl"] .aqtar-kb { transform-origin: right center; }
.elementor-widget-instry-nested-carousel .swiper-slide { overflow: hidden; height: auto; display: flex; }
.elementor-widget-instry-nested-carousel .swiper-slide > .e-con { flex: 1 1 auto; width: 100%; }
.elementor-widget-instry-nested-carousel .swiper-slide > .e-con > .e-con { flex-grow: 1; }
/* Testimonials carousel: dots below the cards, arrows outside the card edge */
.aqtar-testi-carousel .swiper { padding-bottom: 44px; }
.aqtar-testi-carousel .swiper-pagination { bottom: 0; }
.aqtar-testi-carousel .swiper-slide { height: auto; display: flex; }
.aqtar-testi-carousel .swiper-slide > .e-con { width: 100%; }
.aqtar-testi-carousel .elementor-swiper-button { color: var(--e-global-color-secondary, #17346B); }
/* Named progress pagination sits over the bottom of the active slide */
.elementor-widget-instry-nested-carousel.progress-by-name-yes .swiper-pagination { top: auto; bottom: 36px; z-index: 9; }
@media (max-width: 1024px) {
  .elementor-widget-instry-nested-carousel.progress-by-name-yes .swiper-pagination { width: calc(100% - 60px); left: 30px; bottom: 24px; gap: 20px; }
}
@media (max-width: 767px) {
  .elementor-widget-instry-nested-carousel.progress-by-name-yes .swiper-pagination { display: none; }
}
@media (prefers-reduced-motion: reduce) { .swiper-slide-active .aqtar-kb, .swiper-slide-duplicate-active .aqtar-kb { animation: none; } }
.elementor-widget-shortcode.aqtar-lang-topbar, .elementor-widget-shortcode.aqtar-lang-topbar .elementor-widget-container, .elementor-widget-shortcode.aqtar-lang-topbar .elementor-shortcode { display: flex; align-items: center; line-height: 1; height: 22px; }

/* Top-bar variant of the switcher (desktop/laptop): white text on the navy bar, no box */
.elementor-widget-shortcode.aqtar-lang-topbar .aqtar-lang { min-height: 22px; padding: 0; border: 0; border-radius: 0; color: #FFFFFF; font-size: 14px; font-weight: 500; }
.elementor-widget-shortcode.aqtar-lang-topbar .aqtar-lang:hover, .elementor-widget-shortcode.aqtar-lang-topbar .aqtar-lang:focus { color: #0090D0; }

/* Header language switcher (WPML shortcode widgets 4b26ab7/14cb92b on Header 1, 36d0f49/14ad1aa on the AR header) */
.elementor-widget-shortcode .aqtar-lang { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid #DDE3EC; border-radius: 4px; font-family: "Bai Jamjuree", "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; color: #17346B; text-decoration: none; white-space: nowrap; transition: color .2s, border-color .2s; }
.elementor-widget-shortcode .aqtar-lang:hover, .elementor-widget-shortcode .aqtar-lang:focus { color: #0090D0; border-color: #0090D0; }
.elementor-widget-shortcode .aqtar-lang[lang="ar"] { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
@media (max-width: 1024px) { .elementor-widget-shortcode .aqtar-lang { min-height: 36px; padding: 0 10px; font-size: 13px; } }

/* ==========================================================================
   Arabic (/ar/) RTL corrections — scoped to html[lang="ar"], cannot touch EN
   ========================================================================== */
html[lang="ar"] .widget_service_list .service-item .instry-icon-chevron-right,
html[lang="ar"] .elementor-widget-instry-services-list .instry-icon-arrow-right1,
html[lang="ar"] .elementor-button-icon .instry-icon-arrow-right1,
html[lang="ar"] .instry-banner .instry-icon-arrow-right1,
html[lang="ar"] .wpcf7-button .instry-icon-arrow-right { display: inline-block; transform: scaleX(-1); }
html[lang="ar"] .woocommerce-breadcrumb { direction: rtl; }
html[lang="ar"] .elementor-widget-instry-heading .elementor-sub-title .instry-subtitle-icon-left { margin-left: 0; margin-right: 0; }
html[lang="ar"] .an-facts dt, html[lang="ar"] .an-reg dt, html[lang="ar"] .an-cert dt, html[lang="ar"] .an-docs__meta, html[lang="ar"] .an-tag, html[lang="ar"] .aq-sec__t, html[lang="ar"] .aq-f > label { letter-spacing: 0; text-transform: none; }

/* ==========================================================================
   Aqtar Najd brand palette override
   --------------------------------------------------------------------------
   The Instry parent theme hardcodes its amber demo palette (#FFBE2E) in
   style.css and assets/css/base/elementor.css, including a full :root block
   that re-declares every --e-global-color-* variable AFTER Elementor's own
   kit stylesheet (post-8.css) has loaded. That parent block beat the
   Elementor kit, so correcting the kit alone did not recolour the site.

   This child stylesheet is enqueued last, so the declarations below win.
   Keep the selectors in sync with the parent if the theme is ever updated.

   NOTE (RTL): the parent also ships style-rtl.css, which is a full rtlcss
   build of style.css and therefore carries the SAME amber :root block at
   line 464. When the site switches to Arabic, WordPress swaps
   style.css -> style-rtl.css for the 'instry-style' handle. This child
   stylesheet has its own handle ('instry-child-style', enqueued on
   wp_enqueue_scripts at priority 30) and is never swapped, so it still
   loads last and the palette below still wins.
   ========================================================================== */

:root {
  --e-global-color-primary: #0090D0;
  --e-global-color-secondary: #17346B;
  --e-global-color-text: #4B5563;
  --e-global-color-accent: #14213D;
  --e-global-color-lighter: #9AA3B2;
  --e-global-color-dark: #0A1428;
  --e-global-color-border: #DDE3EC;
  --e-global-color-backgroundfield: #FFFFFF;
}

/* --- Literal #FFBE2E occurrences in instry/style.css --------------------- */

.posted-on a:hover,
.meta-reply:hover,
.error404 .error-button a:hover,
.wp-block-post-comments-form button:hover,
#comments .comment-form .form-submit button:hover,
.page-links > *.current,
.page-links > *:hover,
.widget.widget_tag_cloud .tagcloud a:hover,
.widget.widget_tag_cloud .wp-block-tag-cloud a:hover,
.widget.widget_product_tag_cloud .tagcloud a:hover,
.widget.widget_product_tag_cloud .wp-block-tag-cloud a:hover,
.instry-project.instry-list-wrapper .instry-project-block:hover .project-category a,
.instry-project.instry-list-wrapper .project-style-normal .instry-button-icon .btn-icon-link:hover {
  background-color: #0090D0;
}

/* --- Literal #FFBE2E occurrences in instry/assets/css/base/elementor.css - */

.elementor-widget-instry-pricing .elementor-price-table__price .price-main .before {
  color: #0090D0;
}

.elementor-widget-instry-pricing .elementor-price-table__footer .elementor-price-table__button:hover {
  background-color: #0090D0;
}

.text-shadow {
  -webkit-text-fill-color: #0090D0;
}


/* ==========================================================================
   RTL READINESS  (doc 1.6 "RTL rules", doc 17.4 "Language rules")
   --------------------------------------------------------------------------
   CSS-ONLY PASS. No Elementor element setting was changed, so the Arabic
   content phase can edit widgets without fighting inline overrides.

   Everything below is inert in English. Every rule is guarded by
   html[dir="rtl"], which language_attributes() in header.php emits only
   when is_rtl() is true - i.e. only once an Arabic locale / WPML Arabic
   language is active. Nothing here changes the English build.

   WHAT THE PARENT THEME ALREADY DOES (verified - do not duplicate):
     - instry/style-rtl.css, assets/css/base/elementor-rtl.css,
       gutenberg-blocks-rtl.css and gutenberg-editor-rtl.css are genuine
       rtlcss builds, swapped in automatically by
       wp_style_add_data($handle, 'rtl', 'replace'). They cover every
       Instry widget (instry-services-list, instry-accordion-image,
       instry-projects-list, instry-search, instry-info-canvas,
       portfolio-text-scrolling), WooCommerce, blockquotes, lists,
       navigation and the megamenu. Do not re-flip those here.
     - Elementor 4.2 emits logical properties for icon-list
       (padding-inline-end, inset-inline-end, margin-inline) and logical
       position classes for icon-box (elementor-position-inline-start /
       inline-end / block-start / block-end), so icon-lists and icon-boxes
       already lead on the reading side in Arabic.
     - Elementor emits paired body:not(.rtl) / body.rtl rules for every
       absolute-offset control, so positioned watermarks and decorations
       flip on their own.
     - Text with no explicit alignment already resolves to text-align:start,
       which is the right edge under dir=rtl. Blanket text-align:right rules
       are therefore NOT used below - they would only override deliberate
       centring.

   WHAT THIS BLOCK FIXES: the handful of physical left/right values
   Elementor writes for specific element settings, the theme's dead
   rtl.css, and the custom HTML/CSS this build added.

   RE-RUN WHEN THE BUILD CHANGES: the per-element rules are keyed on
   Elementor element IDs. After adding sections, rescan
   wp-content/uploads/elementor/css/post-*.css for 'text-align:(left|right)',
   asymmetric 'border-width', and asymmetric '--padding-left/right', and
   extend this block.
   ========================================================================== */

/* --- 1. Arabic typography hooks ----------------------------------------- */
/*
   The Arabic typeface is a deliberate choice (doc 1.6 rule 2) and is NOT
   made here. The Arabic phase sets --an-font-ar once - to a webfont it
   loads (IBM Plex Sans Arabic / Tajawal / Almarai / Cairo, tested at body
   size AND inside the specification panels) or to the system stack below.
*/
html[dir="rtl"] {
  --an-font-ar: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif;
}

html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: var(--an-font-ar);
}

/*
   Western Arabic numerals 0-9 (doc 1.6 rule 3). U+0030-0039 already render
   as Western digits unless a font's 'anum' feature substitutes them; this
   guarantees no inherited font-feature-settings turns them into
   Arabic-Indic digits, and pins lining figures for the spec panels.
*/
html[dir="rtl"] body {
  font-feature-settings: normal;
  font-variant-numeric: lining-nums;
}

/*
   Letter-spacing breaks Arabic letter joining and reads as tatweel
   (doc 1.6 rule 4, doc 17.4). Neutralised on text surfaces in RTL only.
   The theme and this build use tracked uppercase eyebrows, tags and
   definition labels, all of which would otherwise disjoin Arabic.
*/
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"] p,
html[dir="rtl"] li,
html[dir="rtl"] dt,
html[dir="rtl"] dd,
html[dir="rtl"] .elementor-heading-title,
html[dir="rtl"] .elementor-button-text,
html[dir="rtl"] .elementor-icon-list-text,
html[dir="rtl"] .elementor-icon-box-title,
html[dir="rtl"] .elementor-icon-box-description,
html[dir="rtl"] .elementor-image-box-title,
html[dir="rtl"] .elementor-accordion-title,
html[dir="rtl"] .elementor-tab-title,
html[dir="rtl"] .an-chip,
html[dir="rtl"] .an-tag,
html[dir="rtl"] .an-row__meta dt {
  letter-spacing: normal;
}

html[dir="rtl"] .ltr-code,
html[dir="rtl"] .ltr-block {
  letter-spacing: inherit;
}

/* --- 2. Latin technical codes inside Arabic text ------------------------- */
/*
   ARABIC PASS - REQUIRED. Wrap every Latin material, class, standard and
   unit code that sits inside an Arabic sentence:

       <span class="ltr-code">PN 16</span>

   Applies to: UPVC, CPVC, PVC, PN 6-PN 25, SDR 41/32.5/26/21/17/13.5,
   Class 2-Class 5, SN 2/SN 4/SN 8, Schedule 40, Schedule 80, mm, m, bar,
   O with stroke (diameter), NEMA TC-2, SASO 14, SASO-ISO 1452, DIN 8062,
   DIN 19532, ISO 161, ASTM D1785, ASTM D2241, BS 3505, BS 3506, BS classes
   B/C/D/E, EN 1452, and mixed runs such as "200 mm x 5.9 mm" or
   "20-800 mm".

   Without it the bidi algorithm reorders the neutral characters (spaces,
   digits, x, ., -, /, comma) between the Arabic run and the Latin run, and
   "PN 16" renders as "16 PN".

   .ltr-code   inline, for a code inside an Arabic sentence.
   .ltr-block  block level, for a cell or line that is entirely Latin
               (a specification value, an email address, a URL, CR/VAT
               numbers). Stays flush to the Arabic reading edge.
*/
.ltr-code {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

.ltr-block {
  direction: ltr;
  unicode-bidi: isolate;
}

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

/* --- 3. Port of the theme's own rtl.css ---------------------------------- */
/*
   instry/rtl.css exists but NOTHING ENQUEUES IT - only style-rtl.css is
   registered, and that is a swap for the style.css handle. rtl.css holds
   the mirrored icon-font codepoints for arrow glyphs, which rtlcss cannot
   flip because they are content strings. Ported here so breadcrumb, menu,
   tab and pagination arrows point the right way in Arabic.
*/
html[dir="rtl"] .woocommerce-breadcrumb .breadcrumb-separator::after,
html[dir="rtl"] .main-navigation ul.menu ul li.menu-item-has-children > a::after,
html[dir="rtl"] .main-navigation ul.menu ul li.page_item_has_children > a::after,
html[dir="rtl"] .main-navigation ul.nav-menu ul li.menu-item-has-children > a::after,
html[dir="rtl"] .main-navigation ul.nav-menu ul li.page_item_has_children > a::after,
html[dir="rtl"] .woocommerce-tabs ul.tabs li::after,
html[dir="rtl"] #wl-wrapper .wl-tabs > li.active::after,
html[dir="rtl"] .instry-product-pagination a[rel='next']::after {
  content: "\e004";
}

html[dir="rtl"] .instry-product-pagination a[rel='prev']::after {
  content: "\e005";
}

html[dir="rtl"] .wc-forward::after,
html[dir="rtl"] .woocommerce-Button--next::after,
html[dir="rtl"] .site-main nav.navigation .nav-next a::after {
  content: "\e028";
}

html[dir="rtl"] .woocommerce-Button--previous::before,
html[dir="rtl"] .site-main nav.navigation .nav-previous a::before {
  content: "\e029";
}

/* --- 4. Elementor settings written as physical left/right ---------------- */

/* 4a. text-align:left element settings. Elementor writes the literal value,
       so these do not flip. A full scan of every post-*.css on the site
       found exactly these four: the /services/ intro block, the header
       logo, the header main navigation, and the footer logo. */
html[dir="rtl"] .elementor-27 .elementor-element.elementor-element-87e830a,
html[dir="rtl"] .elementor-34 .elementor-element.elementor-element-1f7fa18 .main-navigation,
html[dir="rtl"] .elementor-34 .elementor-element.elementor-element-5533b98 .hfe-site-logo-container,
html[dir="rtl"] .elementor-34 .elementor-element.elementor-element-5533b98 .hfe-caption-width figcaption,
html[dir="rtl"] .elementor-36 .elementor-element.elementor-element-5af7999 .hfe-site-logo-container,
html[dir="rtl"] .elementor-36 .elementor-element.elementor-element-5af7999 .hfe-caption-width figcaption {
  text-align: right;
}

/* 4b. Core Elementor accordion. custom-widget-accordion.min.css sets
       .elementor-accordion-icon-left { float:left; text-align:left } with no
       RTL variant, so the +/- marker would stay on the left while the
       question sits on the right. Affects the homepage FAQ (5997/4951253)
       and all three accordions on /faq/ (26). */
html[dir="rtl"] .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left {
  float: right;
  text-align: right;
}

html[dir="rtl"] .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right {
  float: left;
  text-align: left;
}

/* 4c. Image-box. Elementor's own CSS deliberately counter-flips
       elementor-position-left/right under [dir=rtl], so "left" keeps
       meaning physical left and the image would NOT lead on the Arabic
       reading side (doc 1.6 rule 1). Undo the counter-flip and re-express
       the image gap as a gap instead of a physical margin.
       No element uses position-left/right today - all six product cards on
       /products/ are position-top - so this is a guard for the Arabic
       phase. Override --an-rtl-mediabox-gap if a widget uses a spacing
       other than 20px. */
html[dir="rtl"] {
  --an-rtl-mediabox-gap: 20px;
}

@media (min-width: 768px) {
  html[dir="rtl"] .elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper {
    flex-direction: row;
    text-align: start;
    column-gap: var(--an-rtl-mediabox-gap);
  }

  html[dir="rtl"] .elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper {
    flex-direction: row-reverse;
    text-align: end;
    column-gap: var(--an-rtl-mediabox-gap);
  }

  html[dir="rtl"] .elementor-widget-image-box.elementor-position-left .elementor-image-box-img,
  html[dir="rtl"] .elementor-widget-image-box.elementor-position-right .elementor-image-box-img {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --- 5. Asymmetric borders added by this build --------------------------- */
/*
   Elementor writes border-width as a physical shorthand. A full scan of
   every post-*.css found these three pairs asymmetric on the inline axis.
   The generated rules have specificity (0,3,0), so !important is required.
   None of these border widths vary by breakpoint.
*/

/* 5a. Homepage 3.7 values cards (5997). Cards 1 and 2 omit the right border
       so they butt against the next card. The row reverses under dir=rtl,
       so the omitted edge must become the left. */
html[dir="rtl"] .elementor-5997 .elementor-element.elementor-element-39d78c7,
html[dir="rtl"] .elementor-5997 .elementor-element.elementor-element-39d78c7:hover,
html[dir="rtl"] .elementor-5997 .elementor-element.elementor-element-78ab44f,
html[dir="rtl"] .elementor-5997 .elementor-element.elementor-element-78ab44f:hover {
  border-width: 1px 1px 1px 0 !important;
  --border-right-width: 1px;
  --border-left-width: 0px;
}

/* 5b. About (4479) "what we hold ourselves to" cards - left seam border. */
html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-6dd0366,
html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-6dd0366:hover,
html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-3683cc8,
html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-3683cc8:hover {
  border-width: 0 1px 1px 0 !important;
  --border-right-width: 1px;
  --border-left-width: 0px;
}

/* 5c. Quality (4480) laboratory / independent-verification cards - 4px
       accent bar on the inline-start edge. */
html[dir="rtl"] .elementor-4480 .elementor-element.elementor-element-5ec3db0,
html[dir="rtl"] .elementor-4480 .elementor-element.elementor-element-d9ca553 {
  border-width: 0 4px 0 0 !important;
}

/* --- 6. Asymmetric padding added by this build --------------------------- */
/*
   Only the widest breakpoint is asymmetric on any of these; every narrower
   breakpoint is already symmetric. Each override is therefore fenced into
   the exact breakpoint band that owns the asymmetric value, so a rule with
   higher specificity cannot leak down into a narrower media query.
*/
@media (min-width: 1367px) {
  /* header top bar + header row, 69/66 */
  html[dir="rtl"] .elementor-34 .elementor-element.elementor-element-0b3f818,
  html[dir="rtl"] .elementor-34 .elementor-element.elementor-element-73d6c1e {
    --padding-left: 66px;
    --padding-right: 69px;
  }

  /* homepage 3.7 values cards, 40/37 */
  html[dir="rtl"] .elementor-5997 .elementor-element.elementor-element-39d78c7,
  html[dir="rtl"] .elementor-5997 .elementor-element.elementor-element-78ab44f,
  html[dir="rtl"] .elementor-5997 .elementor-element.elementor-element-135d98e,
  html[dir="rtl"] .elementor-5997 .elementor-element.elementor-element-96cad51 {
    --padding-left: 37px;
    --padding-right: 40px;
  }

  /* About value cards, 40/30 and 43/30 */
  html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-2a5e632,
  html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-6dd0366 {
    --padding-left: 30px;
    --padding-right: 40px;
  }

  html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-3683cc8 {
    --padding-left: 30px;
    --padding-right: 43px;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  /* About value cards, 15/30 */
  html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-2a5e632,
  html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-6dd0366,
  html[dir="rtl"] .elementor-4479 .elementor-element.elementor-element-3683cc8 {
    --padding-left: 30px;
    --padding-right: 15px;
  }
}

/* --- 7. Product-family specification panels (399-404) -------------------- */
/*
   "Key specifications" is a stack of inline-styled flex rows:
   label (flex:0 0 200px) + value (flex:1 1 280px), separated by a
   horizontal border-top rule. There are no class hooks and no physical
   margins or paddings, so the row reverses on its own under dir=rtl: the
   label correctly leads on the right and the value follows to its left.
   No mirroring CSS is needed and none is added.

   ARABIC PASS: the value column is almost entirely Latin
   (UPVC / PN 16 / SDR 21 / mm / diameter / SASO 14 / ASTM D1785 /
   Schedule 80). Give each value cell class="ltr-block", or wrap the
   individual codes in <span class="ltr-code">, or the bidi algorithm will
   reorder the separators between them. The doc requires the chosen Arabic
   typeface to be tested here specifically (doc 1.6 rule 2).
*/

/* --- 8. /projects/ approvals list and JS sector filter chips ------------- */
/*
   The .an-approvals block was authored with logical properties
   (padding-inline-start and border-inline-start on .an-row__meta > div) and
   a plain wrapping flex chip row, so it mirrors correctly with no help.
   The JS filter keys off data-sector attributes and is direction-agnostic.
   Only bidi isolation is needed: the approval rows mix entity names with
   Latin product codes and dates.

   The html[dir="rtl"] prefix is required because the block's own <style>
   is inline in the body and would otherwise win on source order.
*/
html[dir="rtl"] .an-row__meta dd a,
html[dir="rtl"] .an-tag {
  unicode-bidi: isolate;
}

/* --- 9. Footer, legal bar and trust-mark row (36) ------------------------ */
/*
   The five footer columns are a flex row of percentage-width containers, so
   the column order mirrors natively (Company ends up on the right). The
   legal bar and the hidden trust-mark slot row are centre-aligned flex rows
   and also mirror natively.

   ARABIC PASS: wrap the registration numbers, which are Latin runs beside
   Arabic words:
       <span class="ltr-code">CR 1010614355</span>
       <span class="ltr-code">VAT 30031814200003</span>
   The .aqtar-year span is filled by JS with a 4-digit year; it is isolated
   below so the copyright line cannot reorder around it.
*/
html[dir="rtl"] .aqtar-year,
html[dir="rtl"] .aqtar-legal a {
  unicode-bidi: isolate;
}

/* --- 10. Fixed-position UI ---------------------------------------------- */
/*
   WhatsApp floating button. .aqtar-wa is position:fixed with right:20px
   (right:16px below 1200px), declared in an inline <style> inside footer
   HTML widget d6ab73a. Because that <style> sits in the body it wins on
   source order, so these rules win on specificity instead.
*/
html[dir="rtl"] .aqtar-wa {
  right: auto;
  left: 20px;
}

@media (max-width: 1199px) {
  html[dir="rtl"] .aqtar-wa {
    right: auto;
    left: 16px;
  }
}

/*
   Mobile action bar, template 37 container a705820. VERIFIED: it is
   position:fixed; width:100%; bottom:0 with NO left/right offset, and its
   three cells (Search / Call / Quote) have symmetric 0 1px 0 1px borders.
   It therefore does not move in RTL, and the cells reverse with the flex
   row, which is the correct Arabic reading order. The inset below is a
   guard against a fixed element with auto insets resolving against a
   flipped static position.
*/
html[dir="rtl"] .elementor-37 .elementor-element.elementor-element-a705820 {
  left: 0;
  right: 0;
}

/* --- 11. Forms (doc 1.6 rule 1: form alignment designed for Arabic) ------ */
/*
   Text fields inherit direction:rtl and text-align:start from <html>, so
   they need nothing. Only the fields whose CONTENT is Latin need pinning:
   they stay LTR internally so the address or number does not reorder, but
   stay flush to the Arabic reading edge.
*/
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: right;
}

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

/* --------------------------------------------------------------------------
   FAQ accordion (Elementor core widget)
   Elementor floats the +/- icon left and the theme scales it to 60px, so a
   wrapped question flows round the icon and its last line drops back under it.
   Lay the title out as a flex row with a normal-sized icon instead.
   -------------------------------------------------------------------------- */
/* This stylesheet is enqueued BEFORE the parent's elementor.css and Elementor's
   own widget CSS, so every override here needs one more class than the rule it
   beats - `.elementor-widget` on the widget wrapper does that. */
.elementor-widget-accordion.elementor-widget .elementor-accordion .elementor-tab-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.elementor-widget-accordion.elementor-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon,
.elementor-widget-accordion.elementor-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-left,
.elementor-widget-accordion.elementor-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right {
  float: none;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  font-size: 18px;
  line-height: 30px;
}
.elementor-widget-accordion.elementor-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon i,
.elementor-widget-accordion.elementor-widget .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  margin-top: 6px;
}
.elementor-widget-accordion.elementor-widget .elementor-accordion .elementor-tab-title .elementor-accordion-title {
  flex: 1 1 auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Homepage product list (instry-services-list), phones
   The parent theme gives .service-caption `flex:1; overflow:hidden` for its
   desktop scroll-stack. Stacked on a phone the caption is shrunk below its
   content and the "More Details" link is clipped off the bottom of every card.
   Let the caption size to its content on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-widget-instry-services-list.elementor-widget .instry-item,
  .elementor-widget-instry-services-list.elementor-widget .instry-service-block {
    height: auto;
    overflow: visible;
  }
  .elementor-widget-instry-services-list.elementor-widget .service-caption {
    flex: 0 0 auto;
    height: auto;
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   Buttons (layout review, MEDIUM #16)
   The parent's base/elementor.css paints the default Elementor button as
   secondary (navy) text on the primary (cyan) fill, which reads muddy next to
   the white-on-navy buttons used elsewhere. Default to a white label; keep the
   navy label on the parent's white hover fill. Per-element colours set in
   Elementor have higher specificity and are untouched.
   -------------------------------------------------------------------------- */
.elementor-widget-button.elementor-widget .elementor-button,
.elementor-widget-instry-button.elementor-widget .elementor-button,
.elementor-button-default.elementor-widget .elementor-button {
  color: #FFFFFF;
}
.elementor-widget-button.elementor-widget .elementor-button:hover,
.elementor-widget-button.elementor-widget .elementor-button:focus,
.elementor-widget-instry-button.elementor-widget .elementor-button:hover,
.elementor-widget-instry-button.elementor-widget .elementor-button:focus,
.elementor-button-default.elementor-widget .elementor-button:hover,
.elementor-button-default.elementor-widget .elementor-button:focus {
  color: var(--e-global-color-secondary, #17346B);
}

/* --------------------------------------------------------------------------
   Product family sidebar menu (MEDIUM #16, #31)
   Active item: white label on the cyan fill. Chevron: never let the label run
   into it; keep it on the first line of a wrapped label.
   -------------------------------------------------------------------------- */
.widget.widget_service_list li.service-item a[aria-current="page"],
.widget.widget_service_list li.service-item a[aria-current="page"] i {
  color: #FFFFFF;
}
.widget.widget_service_list li.service-item a {
  align-items: flex-start;
  gap: 12px;
}
.widget.widget_service_list li.service-item a i {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Button icon position (MEDIUM #27)
   The theme seeds every Elementor button with an arrow icon; buttons that
   never had "icon position" set render it BEFORE the label, unlike the header
   and hero buttons. Trailing arrow everywhere; a per-element setting wins.
   -------------------------------------------------------------------------- */
.elementor-widget-button.elementor-widget .elementor-button-content-wrapper {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   Products page, "Choose by product" cards (MEDIUM #28)
   Equal image height regardless of the source aspect ratio.
   -------------------------------------------------------------------------- */
.elementor-28 .elementor-element-e8dc681 .elementor-image-box-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Header height
   The parent gives every top-level menu link 35px top/bottom padding, which
   alone makes the desktop bar 94px (136px with the top bar). 22px brings the
   bar to ~68px; the tablet/mobile row padding is trimmed in the header
   template (34 / 73d6c1e) and the top bar (0b3f818).
   -------------------------------------------------------------------------- */
#masthead .main-navigation ul.menu > li.menu-item > a,
#aqtar-sticky-header .main-navigation ul.menu > li.menu-item > a {
  padding-top: 22px;
  padding-bottom: 22px;
}
#aqtar-sticky-header .main-navigation ul.menu > li.menu-item > a {
  padding-top: 16px;
  padding-bottom: 16px;
}
/* Laptop widths: eight items + the CTA only fit on one line when tightened. */
@media (min-width: 1025px) and (max-width: 1280px) {
  #masthead .main-navigation ul.menu > li.menu-item > a,
  #aqtar-sticky-header .main-navigation ul.menu > li.menu-item > a {
    font-size: 13px;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  #masthead .main-navigation ul.menu > li.menu-item > a,
  #aqtar-sticky-header .main-navigation ul.menu > li.menu-item > a {
    font-size: 12px;
    margin-left: 6px;
    margin-right: 6px;
  }
}

/* --------------------------------------------------------------------------
   Homepage quality accordion + photo, stacked (LOW #53)
   The photo column started 0-2px under the last accordion divider.
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .elementor-widget-instry-accordion-image.elementor-widget .elementor-accordion-image-right {
    margin-top: 32px;
  }
}

/* --------------------------------------------------------------------------
   Blog archive "Nothing found" block (LOW #64)
   Style the raw WordPress search form to match the sidebar search, and keep
   the archive title from filling a phone screen.
   -------------------------------------------------------------------------- */
.no-results .search-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin-top: 22px;
}
.no-results .search-form label {
  flex: 1 1 auto;
  margin: 0;
}
.no-results .search-form .search-field {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--e-global-color-border, #DDE3EC);
  border-radius: 4px;
  background: #FFFFFF;
  font: inherit;
  font-size: 15px;
}
.no-results .search-form .search-submit {
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  background: var(--e-global-color-primary, #0090D0);
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.no-results .search-form .search-submit:hover {
  background: var(--e-global-color-secondary, #17346B);
}
@media (max-width: 767px) {
  .site-main .no-results.not-found .page-header .page-title,
  .site-main .page-header h1.page-title {
    font-size: 32px;
    line-height: 1.15;
  }
}