/* Persian (right-to-left) pages only. Loaded after the page styles.
   Bootstrap's RTL file already flips its own grid, margins and paddings;
   this file only fixes our own styles that assume left-to-right. */

/* Persian font for everything on the page */
[dir="rtl"] body,
[dir="rtl"] body * {
  font-family: "Vazirmatn", Tahoma, sans-serif;
}

/* Persian reads better with a little more line height and no letter spacing */
[dir="rtl"] p { line-height: 2; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5 { letter-spacing: 0; }

/* Home photo: mirrored copy (beaker on the left); fallback before script.js runs */
@media (min-width: 992px) {
  [dir="rtl"] .hero .cover-img { object-position: right center; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  [dir="rtl"] .hero .cover-img { object-position: 65% center; }
}

/* "Read more" arrow points left in Persian */
[dir="rtl"] .content-about a img { transform: scaleX(-1); }

/* Product cards: space between icon and title on the other side */
[dir="rtl"] .product-card-section-title { margin-left: 0; margin-right: 10px; }
@media (max-width: 991.98px) {
  [dir="rtl"] .content-product .product-card-section-title { margin: 0 6px 0 12px; }
}
@media (max-width: 575.98px) {
  [dir="rtl"] .content-product .product-card-section-title { margin: 0; }
}

/* Email and phone are typed left-to-right, but line up with the other fields */
[dir="rtl"] input[dir="ltr"] { text-align: right; }


/* Persian hero title: Persian letters look larger and heavier than Latin at the same size */
[dir="rtl"] .hero h1 { font-size: 52px; font-weight: 700; line-height: 1.5; }
@media (min-width: 1440px) { [dir="rtl"] .hero h1 { font-size: 58px; } }
@media (max-width: 1199.98px) { [dir="rtl"] .hero h1 { font-size: 46px; } }
@media (max-width: 991.98px) { [dir="rtl"] .hero h1 { font-size: 38px; } }

/* Phones */
@media (max-width: 575.98px) { [dir="rtl"] .hero h1 { font-size: 28px; } }

/* Category cards: arrows point left in Persian */
[dir="rtl"] .product-card-section-icon img[src*="arrow"] { transform: scaleX(-1); }