/* =====================================================
   XINGDUO — RTL Stylesheet (Arabic / العربية)
   Right-to-left layout mirror + Arabic typography
   Loaded AFTER main.css to override LTR rules
   ===================================================== */

/* --- Arabic-Optimized Fonts --- */
:root {
  /* Override fonts for Arabic */
  --font-serif: 'Amiri', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Cairo', 'Tajawal', 'Noto Sans Arabic', -apple-system, sans-serif;
  
  /* Islamic cultural accent — add green to palette */
  --color-islamic-green: #0F6E51;
  --color-islamic-green-light: #1A8E6B;
}

/* --- Document direction --- */
html[dir="rtl"] body {
  font-family: var(--font-sans);
  direction: rtl;
  text-align: right;
}

/* --- Headings — keep serif but use Amiri for 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 {
  font-family: var(--font-serif);
  text-align: right;
  letter-spacing: 0;
  line-height: 1.4;
}

html[dir="rtl"] h1 { line-height: 1.25; }
html[dir="rtl"] h2 { line-height: 1.3; }

/* --- Keep brand name and coordinates LTR --- */
html[dir="rtl"] .brand-logo-name,
html[dir="rtl"] .brand-logo-tag,
html[dir="rtl"] .hero-coords,
html[dir="rtl"] .lang-code,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] [data-ltr] {
  direction: ltr;
  unicode-bidi: embed;
}

html[dir="rtl"] .footer-bottom > div:first-child {
  direction: ltr;
  text-align: right;
}

/* --- Header navigation: mirror layout --- */
html[dir="rtl"] .header-inner { flex-direction: row-reverse; }
html[dir="rtl"] .brand-logo { flex-direction: row-reverse; }
html[dir="rtl"] .nav-main { flex-direction: row-reverse; }
html[dir="rtl"] .header-cta { flex-direction: row-reverse; }

html[dir="rtl"] .nav-dropdown-menu { left: auto; right: 50%; transform: translateX(50%) translateY(8px); }
html[dir="rtl"] .nav-dropdown:hover .nav-dropdown-menu { transform: translateX(50%) translateY(0); }
html[dir="rtl"] .nav-dropdown-menu a { text-align: right; }

html[dir="rtl"] .lang-switcher-menu { right: auto; left: 0; }
html[dir="rtl"] .lang-switcher-menu a { flex-direction: row-reverse; }

/* --- Eyebrow markers --- */
html[dir="rtl"] .eyebrow::before, html[dir="rtl"] .eyebrow::after { content: '·'; }

/* --- Hero --- */
html[dir="rtl"] .hero-inner, html[dir="rtl"] .page-hero-inner { text-align: center; }
html[dir="rtl"] .hero-title { letter-spacing: 0; }

/* --- Breadcrumb separator stays same --- */
html[dir="rtl"] .breadcrumb-sep { margin: 0 0.6em; }

/* --- Section headings center-aligned still --- */
html[dir="rtl"] .section-heading { text-align: center; }
html[dir="rtl"] .section-heading.left { text-align: right; }

/* --- Collection cards: mirror corner accent --- */
html[dir="rtl"] .collection-card-body::before { left: auto; right: 1.5rem; }
html[dir="rtl"] .collection-card-title { text-align: right; }
html[dir="rtl"] .collection-card-desc { text-align: right; }
html[dir="rtl"] .collection-card-link::after { content: '←'; }
html[dir="rtl"] .collection-card:hover .collection-card-link::after { transform: translateX(-4px); }

/* --- Story split: mirror layout --- */
html[dir="rtl"] .story-split { direction: rtl; }
html[dir="rtl"] .story-split-content { text-align: right; }
html[dir="rtl"] .story-stats { text-align: right; }
html[dir="rtl"] .story-stat-number { font-family: var(--font-serif); }

/* Numbers should remain LTR (Western or Arabic-Indic numerals) */
html[dir="rtl"] .story-stat-number,
html[dir="rtl"] .stats-bar-item h3,
html[dir="rtl"] .product-price,
html[dir="rtl"] .timeline-year {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* --- Buttons: mirror arrow icons --- */
html[dir="rtl"] .btn-link::after { content: '←'; }
html[dir="rtl"] .btn-link:hover::after { transform: translateX(-4px); }

/* --- Feature 3-column --- */
html[dir="rtl"] .feature-3col { text-align: center; }
html[dir="rtl"] .feature-3col p { text-align: center; }

/* --- News cards --- */
html[dir="rtl"] .news-card-body { text-align: right; }
html[dir="rtl"] .news-title, html[dir="rtl"] .news-excerpt { text-align: right; }

/* --- Newsletter form: input direction --- */
html[dir="rtl"] .newsletter-form input { text-align: right; direction: rtl; }

/* --- Footer grid: mirror --- */
html[dir="rtl"] .footer-grid { direction: rtl; }
html[dir="rtl"] .footer-col h5, html[dir="rtl"] .footer-col ul { text-align: right; }
html[dir="rtl"] .footer-social { flex-direction: row-reverse; }
html[dir="rtl"] .footer-bottom { direction: rtl; }
html[dir="rtl"] .footer-legal { flex-direction: row-reverse; }
html[dir="rtl"] .footer-brand-info p { text-align: right; }

/* --- Forms --- */
html[dir="rtl"] .form-label { text-align: right; }
html[dir="rtl"] .form-input, html[dir="rtl"] .form-select, html[dir="rtl"] .form-textarea {
  text-align: right;
  direction: rtl;
}
html[dir="rtl"] .form-checks { flex-direction: row-reverse; justify-content: flex-end; }
html[dir="rtl"] .form-check::before { margin-left: 0.4em; margin-right: 0; }

/* --- Contact grid --- */
html[dir="rtl"] .contact-grid { direction: rtl; }
html[dir="rtl"] .contact-info-side { text-align: right; }
html[dir="rtl"] .contact-info-side h5 { text-align: right; }

/* --- Product detail page --- */
html[dir="rtl"] .product-hero { direction: rtl; }
html[dir="rtl"] .product-hero-content { text-align: right; }
html[dir="rtl"] .product-meta { flex-direction: row-reverse; justify-content: flex-end; }
html[dir="rtl"] .spec-table th, html[dir="rtl"] .spec-table td { text-align: right; }

/* --- Timeline mirror --- */
html[dir="rtl"] .timeline::before { left: auto; right: 12px; }
html[dir="rtl"] .timeline-item { padding-left: 0; padding-right: 3.5rem; }
html[dir="rtl"] .timeline-item::before { left: auto; right: 4px; }
html[dir="rtl"] .timeline-title { text-align: right; }

/* --- Team grid --- */
html[dir="rtl"] .team-card { text-align: center; }

/* --- Halal Badge (Arabic-specific feature) --- */
.halal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-islamic-green);
  color: var(--color-ivory);
  padding: 0.5rem 1.25rem;
  border-radius: 30px;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-top: 1rem;
}
.halal-badge::before {
  content: '☪';
  font-size: 1.1rem;
}

/* --- Ramadan Collection card highlight --- */
.ramadan-banner {
  background: linear-gradient(135deg, var(--color-islamic-green) 0%, var(--color-navy) 100%);
  color: var(--color-ivory);
  padding: 3rem 2rem;
  text-align: center;
  border-radius: 4px;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}
.ramadan-banner::before {
  content: '۞';
  position: absolute;
  font-size: 14rem;
  opacity: 0.06;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-gold);
}
.ramadan-banner h2 {
  color: var(--color-ivory) !important;
  position: relative;
  z-index: 1;
}
.ramadan-banner p {
  color: rgba(251,250,245,0.92);
  position: relative;
  z-index: 1;
}
.ramadan-banner .eyebrow {
  color: var(--color-gold);
  position: relative;
  z-index: 1;
}

/* --- Bismillah opener --- */
.bismillah {
  font-family: 'Amiri', serif;
  font-size: 2rem;
  text-align: center;
  color: var(--color-gold);
  margin-bottom: 1.5rem;
  direction: rtl;
  letter-spacing: 0;
}

/* --- Mobile responsive RTL --- */
@media (max-width: 1024px) {
  html[dir="rtl"] .timeline-item { padding-right: 3rem; }
}
@media (max-width: 768px) {
  html[dir="rtl"] .footer-bottom { flex-direction: column; }
}