/* =====================================================================
   DSIT Arabic pages (/ar/) -- loaded only by pages with <html lang="ar" dir="rtl">,
   right after Asset/dsit-site.css. Text direction itself comes from dir="rtl";
   this file sets the Arabic font and fixes the few parts that need mirroring.
   ===================================================================== */

/* Arabic font everywhere (its Latin letters match IBM Plex, so part numbers still look right).
   Letter-spacing is removed: spacing Arabic letters apart breaks how they join. */
html[lang="ar"] body,
html[lang="ar"] body :where(*:not(svg):not(svg *):not(.wordmark)){
  font-family:'IBM Plex Sans Arabic','Inter',-apple-system,sans-serif !important;
  letter-spacing:0 !important;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ line-height:1.35; }
/* the brand name stays as designed */
html[lang="ar"] .wordmark{ direction:ltr; }

/* e-mail addresses, phone numbers, part numbers: keep them left-to-right */
html[lang="ar"] a[href^="mailto:"], html[lang="ar"] a[href^="tel:"], html[lang="ar"] input[type="email"], html[lang="ar"] input[type="tel"]{ direction:ltr; unicode-bidi:embed; }

/* header search suggestions + account menu (built by quote/session-guard.js) */
html[lang="ar"] .ss-panel, html[lang="ar"] .dsit-menu button{ text-align:right; }

/* contact form: the hidden anti-spam field sits off-screen on the left in English pages;
   on a right-to-left page that would add a huge horizontal scroll, so park it on the right instead */
html[dir="rtl"] .hp-field{ left:auto !important; right:-9999px !important; }

/* menu buttons: the small triangle points toward the text (left in Arabic); current page = pointing down */
html[dir="rtl"] .btn-comet::before{ transform:scaleX(-1); }
html[dir="rtl"] .btn-comet:active::before, html[dir="rtl"] .btn-comet.current::before{ transform:scaleX(-1) rotate(90deg); }

/* phone numbers / e-mails inside Arabic rows (project contact box): keep their own left-to-right order */
html[dir="rtl"] .detail-contact-value{ unicode-bidi:plaintext; text-align:right; }

/* ===== Projects page: rows are mirrored by dir="rtl", so the big row number moves to the card's outer edge ===== */
html[dir="rtl"] .proj-row-index{ right:auto; left:8px; }
html[dir="rtl"] .proj-row.flip .proj-row-index{ left:auto; right:8px; }
html[dir="rtl"] .proj-row.flip .proj-row-title{ text-align:left; margin-left:0; margin-right:auto; }
html[dir="rtl"] .proj-stack-header:hover .psh-arrow{ transform:translateX(-3px); }
@media (max-width:900px){
  html[dir="rtl"] .proj-row-index, html[dir="rtl"] .proj-row.flip .proj-row-index{ right:auto; left:8px; }
  html[dir="rtl"] .proj-row.flip .proj-row-title{ text-align:right; margin-right:0; margin-left:auto; }
  html[dir="rtl"] .proj-stack-header:hover .psh-arrow{ transform:none; }
}

/* project page, phones: the small label above the scope reads better a little larger in Arabic */
@media (max-width:900px){ html[dir="rtl"] .detail-title{ font-size:14px !important; } }

/* ===== Products page ===== */
/* product descriptions stay in English: let each line keep its own direction so full stops and
   brackets land in the right place, while the text still lines up on the right like the rest */
html[dir="rtl"] .card > p, html[dir="rtl"] .modal-desc, html[dir="rtl"] .card-num, html[dir="rtl"] .modal-title{ unicode-bidi:plaintext; text-align:right; }
html[dir="rtl"] .q-items td:nth-child(2), html[dir="rtl"] .q-items td:nth-child(3){ unicode-bidi:plaintext; }
html[dir="rtl"] .q-items td.desc{ text-align:right; }
/* close (X) button of the product and quotation windows goes to the top-left corner */
html[dir="rtl"] .modal-close{ right:auto; left:14px; }
html[dir="rtl"] .q-head{ padding-right:0; padding-left:44px; }
html[dir="rtl"] .q-pill{ margin-left:0; margin-right:8px; }
html[dir="rtl"] .q-table th{ text-align:right; }
html[dir="rtl"] .q-table .num, html[dir="rtl"] .q-totals .row span:last-child{ text-align:left; }
@media (max-width:640px){ html[dir="rtl"] .q-items .qty, html[dir="rtl"] .q-items .up{ text-align:right; } }

/* ===== Customer account page (login) ===== */
html[dir="rtl"] .ad-link{ margin-left:0; margin-right:8px; }
html[dir="rtl"] .ad-links .ad-link{ margin-right:0; margin-left:8px; }
html[dir="rtl"] .ad-inline{ margin-left:0; margin-right:8px; }
html[dir="rtl"] .vs-item .vs-chk{ margin-left:0; margin-right:2px; }
html[dir="rtl"] .rank-star{ margin-left:0; margin-right:auto; }
html[dir="rtl"] .tfa-opt{ text-align:right; padding:10px 40px 10px 10px !important; }
html[dir="rtl"] .tfa-opt .rdo{ left:auto !important; right:10px !important; }
html[dir="rtl"] .tfa-opt b{ margin-right:0; margin-left:8px; }
html[dir="rtl"] .tfa-step ol{ padding-left:0; padding-right:20px; }
html[dir="rtl"] .sent-check{ margin-left:0; margin-right:-43px; left:auto; right:50%; }
/* quotation history table */
html[dir="rtl"] .qh-table th{ text-align:right; }
html[dir="rtl"] .qh-table th.num, html[dir="rtl"] .qh-table .num, html[dir="rtl"] .qh-act, html[dir="rtl"] .qh-filter input.n, html[dir="rtl"] .qh-tri{ text-align:left; }
html[dir="rtl"] .qh-tri .arr{ margin-left:0; margin-right:6px; }
html[dir="rtl"] .qh-showall, html[dir="rtl"] .qh-info{ margin-left:0; margin-right:auto; }
html[dir="rtl"] .qh-det-box{ margin-left:0; margin-right:auto; border-left:1px solid var(--line-strong); border-right:3px solid #2E7D43; }
html[dir="rtl"] .qh-det-box td.r{ text-align:left; padding-left:0 !important; padding-right:14px !important; }
/* amounts with a sign (-100.00 / +15.00) keep the sign in front of the number */
html[dir="rtl"] .qh-det-box td.r, html[dir="rtl"] .qh-disc{ direction:ltr; unicode-bidi:isolate; }