/* ============================================================
   HS Herbs — RTL Stylesheet for Arabic Pages
   Load AFTER shared-styles.css on all /ar/ pages
   ============================================================ */

/* ── Arabic Font ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700&display=swap');

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

[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button {
  font-family: 'Noto Kufi Arabic', 'Jost', sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .font-display {
  font-family: 'Noto Kufi Arabic', 'Playfair Display', serif;
}

/* ── Layout Direction Overrides ───────────────────────────── */

/* Flex containers that should reverse */
[dir="rtl"] .flex {
  /* Don't reverse all flex — only specific ones */
}

/* Navbar: keep logo left, reverse nav items */
[dir="rtl"] #navbar .flex.items-center.justify-between {
  flex-direction: row-reverse;
}

[dir="rtl"] #navbar .hidden.lg\:flex {
  flex-direction: row-reverse;
}

/* Breadcrumb separator */
[dir="rtl"] .breadcrumb-sep::before {
  content: '\\';
}

/* ── Spacing Mirrors ─────────────────────────────────────── */
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }

/* ── Text Alignment ──────────────────────────────────────── */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Keep centered text centered */
[dir="rtl"] .text-center { text-align: center; }

/* ── Icons and Arrows ────────────────────────────────────── */
[dir="rtl"] .fa-arrow-right::before,
[dir="rtl"] .arrow-right {
  transform: scaleX(-1);
}

[dir="rtl"] .fa-chevron-right::before {
  transform: scaleX(-1);
}

/* ── Mobile Menu ─────────────────────────────────────────── */
[dir="rtl"] #mobile-menu a {
  text-align: right;
}

[dir="rtl"] #mobile-menu .pl-4 {
  padding-left: 0;
  padding-right: 1rem;
}

/* ── Product Cards ───────────────────────────────────────── */
[dir="rtl"] .product-card,
[dir="rtl"] .herb-card,
[dir="rtl"] .spice-card,
[dir="rtl"] .seed-card {
  text-align: right;
}

/* ── Quick Facts / Spec Rows ─────────────────────────────── */
[dir="rtl"] .spec-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .spec-row .spec-label {
  text-align: right;
}

[dir="rtl"] .spec-row .spec-value {
  text-align: left;
}

/* ── Form Elements ───────────────────────────────────────── */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

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

/* ── Footer ──────────────────────────────────────────────── */
[dir="rtl"] footer .text-left {
  text-align: right;
}

/* ── Language Switcher ───────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 253, 253, 0.6);
  transition: color 0.3s;
  text-decoration: none;
}

.lang-switch:hover {
  color: #C49B3B;
}

.lang-switch .lang-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* ── Badge ───────────────────────────────────────────────── */
[dir="rtl"] .badge,
[dir="rtl"] .herb-badge,
[dir="rtl"] .spice-badge,
[dir="rtl"] .seed-badge,
[dir="rtl"] .legume-badge {
  right: auto;
  left: 0.75rem;
}

/* ── Certification strip ─────────────────────────────────── */
[dir="rtl"] .cert-strip {
  flex-direction: row-reverse;
}

/* ── Scroll reveal animation — keep same ─────────────────── */
[dir="rtl"] .reveal {
  transform: translateY(30px);
}