@charset "UTF-8";
/* Arabic override for hdcmaterials.com. Load AFTER index.css.
   The existing pages already link /default/static/css/index_ar.css.
   CSS supplies visual RTL; adding semantic dir="rtl" to HTML is recommended.
   Image carousel tracks and their controls intentionally retain LTR. */
html:lang(fa) { direction: rtl; }
html:lang(fa) body { direction: rtl; text-align: right; }
html:lang(fa) :is(input, textarea, select) { text-align: start; }
html:lang(fa) :is(input[type="submit"], input[type="button"], input[type="reset"]) { text-align: center; }
html:lang(fa) :is(input[type="email"], input[type="tel"], input[type="url"], input[name^="captcha"], .ver-code, .c-teln em) { direction: ltr; unicode-bidi: isolate; }
html:lang(fa) :is(a[href^="tel:"], a[href^="mailto:"], a[href*="wa.me"], .m7-time, .n1m1-time, .n2m1-time, .n2m1-r-time) { direction: ltr; unicode-bidi: isolate; }
/* Existing phone spans set direction:ltr inline but omit bidi isolation. */
html:lang(fa) :is(.c1m1-info-con, .fo-ul, .c-teln) span[style*="direction"] { unicode-bidi: isolate; }

/* Header, navigation and search. Preserve original responsive typography. */
html:lang(fa) .navigation { margin-left: 0; margin-right: auto; }
html:lang(fa) .hd-r { margin-left: 0; margin-right: auto; }
html:lang(fa) .search { border-right: 0; border-left: 1px solid rgba(255,255,255,.3); padding-right: 0; padding-left: 18px; margin-right: 0; margin-left: 18px; }
html:lang(fa) .headh .search { border-left-color: #666; }
html:lang(fa) .search .search-inp { padding-left: 0; padding-right: 14px; }
html:lang(fa) .search .search-sub1 { right: auto; left: 0; }
html:lang(fa) .h-languages .h-earth { margin-right: 0; margin-left: 8px; }
html:lang(fa) .h-languages .h-lang-btm { margin-left: 0; margin-right: 6px; }
html:lang(fa) .h-country,
/*html:lang(fa) .language-ul .h-country { margin-right: 0; margin-left: 5px; }*/
html:lang(fa) .language-ul { right: auto; left: 0; }
html:lang(fa) .navigation .nav-dropdown { text-align: right; white-space: normal; width: max-content; max-width: min(360px, 90vw); }
html:lang(fa) .nav-dropdown li a { line-height: 1.5; }
html:lang(fa) .nav-dropdown .nav-dropdown { left: auto; right: 100%; transform: none; }
/* Match the important declarations used by the original edge fallback. */
html:lang(fa) .nav-dropdown ul.drop-left { left: auto !important; right: 100% !important; }
html:lang(fa) .nav-dropdown .icon-right::before { display: inline-block; transform: scaleX(-1); }
html:lang(fa) .snav .nav { right: auto; left: 2.5%; }
html:lang(fa) .smnav { right: auto; left: -200%; text-align: right; }
html:lang(fa) .smnavh { left: 0; }
html:lang(fa) ul.topnav li { text-align: right; }
html:lang(fa) ul.topnav li a { padding-right: 0; padding-left: 50px; }
html:lang(fa) ul.topnav ul li a { padding-right: 20px; padding-left: 30px; }
html:lang(fa) ul.topnav ul ul li a { padding-right: 40px; }
html:lang(fa) ul.topnav ul ul ul li a { padding-right: 60px; }
html:lang(fa) ul.topnav span { right: auto; left: 0; transform: scaleX(-1); }
html:lang(fa) ul.topnav span.nav-hide { transform: rotate(90deg); }
html:lang(fa) .smnav form .iptc { float: right; padding-left: 0; padding-right: 15px; }
html:lang(fa) .smnav form .ipsc { float: left; }
html:lang(fa) .smnav form i { right: auto; left: 10px; }

/* Carousel movement stays LTR; Arabic copy inside slides stays RTL. */
html:lang(fa) :is(.banner, .swiper, .swiper-wrapper, .sw-btn, .p2m1-l) { direction: ltr; }
html:lang(fa) .swiper-slide { direction: rtl; text-align: right; }
html:lang(fa) :is(.banner .swiper-slide, .p2m1-sw1 .swiper-slide, .p2m1-sw2 .swiper-slide) { direction: ltr; }
html:lang(fa) .m6-top .sw-btn { margin-left: 0; margin-right: auto; }
html:lang(fa) .m1-r { transform: translateX(-107px); }
html:lang(fa) .m3-l-range { margin-left: 0; margin-right: auto; padding-left: clamp(20px,12.03125vw,231px); padding-right: 0; }
html:lang(fa) .m3-tab li::before { left: auto; right: 0; }
html:lang(fa) :is(.m2-s-tab, .n1m1-t-list) { margin-left: 0; margin-right: auto; }
html:lang(fa) .m7-s-det li { padding-right: 0; padding-left: 28px; }

/* Lists begin at the right, including a lone item or an incomplete last row. */
html:lang(fa) :is(.m1-btm, .m4-det, .p1m1-det, .p1m3-det, .p2m2-det, .a1m2-det, .a1m4-imgs, .s1m1-det, .s2m1-s-det, .su1m1-det, .su1m2-det, .su2m1-det, .su4m1-det, .pr1m1-det, .pr2m1-list, .c1m1-info) { direction: rtl; }
html:lang(fa) :is(.s1m1-det, .su1m2-det, .su4m1-det) > li { margin-inline: 0; }
html:lang(fa) :is(.m2-s-tab, .m3-tab, .n1m1-t-list):has(> li:only-child) { justify-content: flex-start; }
html:lang(fa) :is(.m2-s-tab, .n1m1-t-list):has(> li:only-child) { margin-right: 0; margin-left: auto; }

/* Product categories, pagination and the inquiry arrow AFTER the page numbers. */
html:lang(fa) .p1m1-l { margin-right: 0; margin-left: 50px; }
html:lang(fa) .pro-nav li i { margin-left: 0; margin-right: auto; }
html:lang(fa) .pro-nav .pro-nav .pro-nav p a { padding-left: 11px; padding-right: 40px; }
html:lang(fa) .proslide_menubtn { right: auto; left: 10px; }
html:lang(fa) .paging-top i { margin-right: 0; margin-left: 6px; }
html:lang(fa) .page-turn { direction: rtl; }
html:lang(fa) .page-turn .sc { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
html:lang(fa) .page-turn .sc input { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:lang(fa) .page-turn .sc i { flex-shrink: 0; }
html:lang(fa) :is(.page-turn, .move-on, .pro-nav, .nav-dropdown) :is(.icon-left, .icon-right, .icon-left1, .icon-right1, .icon-left7, .icon-right7)::before,
html:lang(fa) .page-turn .sc .icon-rise-full::before { display: inline-block; transform: scaleX(-1); }
html:lang(fa) .inq .share { margin-right: 0; margin-left: auto; }
html:lang(fa) .inq .share1 { margin-right: 0; margin-left: 5px; }
html:lang(fa) .net .share1 { margin-right: 0; margin-left: 8px; }
html:lang(fa) .p2m2-con a { margin-right: 0; margin-left: 40px; }

/* Move markers AND their text clearance. Do not mirror check-mark artwork. */
html:lang(fa) .a1m3-con em { padding-left: 0; padding-right: 27px; }
html:lang(fa) .n2m1-con em { padding-left: 0; padding-right: 31px; }
html:lang(fa) :is(.a1m3-con, .n2m1-con) em::before { left: auto; right: 0; }
html:lang(fa) .p2m6-det li::before,
html:lang(fa) .p2m6-det li::after { left: auto; right: 30px; }
html:lang(fa) .p2m6-b-con { padding-left: 18px; padding-right: 50px; }
/* Three-column flow: each third card is still the row end after RTL reversal. */
html:lang(fa) .s1m1-right-img { left: auto; right: 106%; transform: translate(50%,-50%) scaleX(-1); }
html:lang(fa) .s2m1-s-det li:last-child .s1m1-right-img { display: none; }
html:lang(fa) .faq .faq-top i { margin-left: 0; margin-right: auto; }
html:lang(fa) .faq .faq-s-det { padding-right: 0; padding-left: 44px; }
html:lang(fa) .move-on { text-align: right; }
html:lang(fa) .move-on li:nth-child(2) { text-align: left; }
html:lang(fa) .n1m1-b-con { min-width: 0; padding-left: 0; padding-right: 32px; }
html:lang(fa) .n1m1-s-det { min-width: 0; }
html:lang(fa) .n1m1-time { margin-left: 0; margin-right: 97px; border-left: 0; border-right: 1px solid #D9D9D9; }

/* Inquiry forms, captcha clearance, footer and popup. */
html:lang(fa) form .star::before { left: auto; right: 10px; }
html:lang(fa) form .star :is(input, textarea) { padding-inline-start: 26px; }
html:lang(fa) .m5-form .ver input { padding-right: 16px; padding-left: 110px; }
html:lang(fa) .fo-form .ver input { padding-right: 0; padding-left: 100px; }
html:lang(fa) .c1m2-form .ver input { padding-right: 26px; padding-left: 110px; }
html:lang(fa) :is(.m5-form, .fo-form) .ver-code { right: auto; left: 0; }
html:lang(fa) .c1m2-form .ver-code { right: auto; left: 1px; }
html:lang(fa) .pf-form .ver input { min-width: 0; }
html:lang(fa) .fo-form .form-btn button img { transform: scaleX(-1); }
html:lang(fa) .pf-form .pf-form-btn button i { transform: scaleX(-1) rotate(-45deg); }
html:lang(fa) .fop span { margin-left: 0; margin-right: 30px; }
html:lang(fa) .pop-form .pf-close { right: auto; left: 11px; }
html:lang(fa) .pop-up1::before { right: auto; left: 10px; }
/* Literal > / >> in text buttons mirror through Unicode's RTL algorithm. */
html:lang(fa) :is(.m1-btn a, .m7-btn a, .p1m1-ipt a, .s1m1-btn a, .pr1m1-btn a, .n1m1-btn a, .n2m1-btn a, .su2m1-btn a) { direction: rtl; unicode-bidi: isolate; white-space: nowrap; max-width: 100%; }
html:lang(fa) :is(.m1-btn a, .m7-btn a, .s1m1-btn a, .pr1m1-btn a, .n1m1-btn a, .n2m1-btn a) { overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
html:lang(fa) :is(.fo-form .form-btn button, .pf-form .pf-form-btn button, .m5-form .form-btn input, .c1m2-form .form-btn input) { white-space: nowrap; max-width: 100%; }
html:lang(fa) .fo-form .form-btn button p { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html:lang(fa) .fo-ul li > :not(i) { min-width: 0; overflow-wrap: anywhere; }
html:lang(fa) .mp { overflow-wrap: anywhere; }

@media screen and (max-width:1500px) {
  html:lang(fa) .hd-r { margin-right: 20px; }
  html:lang(fa) .search { padding-left: 10px; margin-left: 10px; }
}
@media screen and (max-width:1400px) {
  html:lang(fa) .m1-r { transform: translateX(0); }
  html:lang(fa) .n1m1-time { margin-right: 30px; }
}
@media screen and (max-width:1200px) {
  html:lang(fa) .hd-r { margin-right: 0; }
  html:lang(fa) .p1m1-l { margin-left: 30px; }
}
@media screen and (max-width:999px) {
  html:lang(fa) .hd-r { margin-right: auto; margin-left: 50px; }
  html:lang(fa) .m3-l-range { padding-left: 20px; padding-right: 0; }
  html:lang(fa) .m7-s-det li { padding-left: 10px; }
  html:lang(fa) .p1m1-l { margin-left: 0; }
  html:lang(fa) .pr-title { padding-right: 0; padding-left: 40px; }
  html:lang(fa) .p2m6-b-con { padding: 20px; }
  html:lang(fa) .faq .faq-s-det { padding-left: 0; }
  html:lang(fa) .move-on li:nth-child(2) { text-align: right; }
  html:lang(fa) .n1m1-b-con { padding-right: 20px; }
  html:lang(fa) .n1m1-time { margin-right: 20px; }
  html:lang(fa) .pop-form .pf-close { left: 20px; }
  /* The first toolbar item is now at the right; keep its QR popup on-screen.
     !important overrides the original .c-popup left positioning. */
  html:lang(fa) .c-popup { left: auto !important; right: 50%; margin-left: 0; margin-right: -75px; }
  html:lang(fa) .contact-us-pop { left: auto; right: 0; }
}
@media screen and (max-width:767px) {
  html:lang(fa) .m3-l-range { padding-inline: 2.5%; }
  html:lang(fa) .n1m1-b-con { padding-inline: 2.5%; }
  html:lang(fa) .n1m1-time { margin-right: 0; border-right: 0; }
}
@media screen and (max-width:600px) {
  html:lang(fa) .c-popup { right: 0; margin-right: 0; }
}
@media screen and (max-width:480px) {
  html:lang(fa) .m7-s-det li { padding-inline: 10px; }
}
html:lang(fa) .m5-form .ver input,html:lang(fa) .fo-form .ver input,html:lang(fa) .c1m2-form .ver input{
        text-align: right;
    direction: rtl;
}
.xunpanc table td{
    text-align:right !important;
    padding-right:12px !important;
    padding-left:unset !important;
}
.m1-add i{
    display:inline-block;
}