/* ================================================
   ARABIC STYLES - RTL Direction
   Import base styles first, then apply RTL overrides
   ================================================ */

@import url('style_base.css');

/* ===========================
   RTL DIRECTION & TYPOGRAPHY
   =========================== */
:root {
  --font-ar: 'Noto Sans Arabic', 'Cairo', 'Amiri', 'Tajawal', 'Droid Arabic Naskh', system-ui, sans-serif;
}

body {
  direction: rtl;
  font: 400 16px/1.75 var(--font-ar);
  word-spacing: 0.05em;
}

/* ===========================
   RTL TYPOGRAPHY ADJUSTMENTS
   =========================== */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0;
  line-height: 1.3;
  text-align: right;
}

p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ===========================
   RTL LAYOUT ADJUSTMENTS
   =========================== */

/* Gradients positioned for RTL */
body {
  background:
    radial-gradient(ellipse 1200px 600px at 30% 20%, rgba(200, 169, 106, .08), transparent),
    radial-gradient(ellipse 800px 400px at 80% 60%, rgba(255, 255, 255, .04), transparent),
    var(--bg);
}

/* Section gradient for RTL */
section::before {
  right: 0;
  left: auto;
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .2), transparent);
}

/* ===========================
   RTL NAVIGATION
   =========================== */
.brand {
  flex-direction: row-reverse;
}

.primary-nav ul {
  flex-direction: row-reverse;
}

/* Mobile menu toggle positioning */
.menu-toggle span::before,
.menu-toggle span::after {
  right: 0;
  left: auto;
}

/* ===========================
   RTL COMPONENTS
   =========================== */

/* Product cards */
.product-card::before {
  right: 0;
  left: auto;
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .3), transparent);
}

.card-head {
  flex-direction: row-reverse;
}

.product-card h3 {
  text-align: right;
}

.product-card .muted {
  text-align: right;
}

/* Meta and badges */
.meta {
  justify-content: flex-end;
}

/* Card actions */
.card-actions {
  justify-content: flex-end;
}

/* Favorite button positioning */
.fav {
  inset-inline-end: 16px;
  inset-block-start: 16px;
}

/* Hero actions */
.hero .actions {
  justify-content: flex-start;
}

/* ===========================
   RTL FORMS
   =========================== */
.form-input,
.form-textarea,
.form-select {
  direction: rtl;
  text-align: right;
}

/* LTR inputs for specific types */
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
#phone {
  direction: ltr !important;
  text-align: left !important;
}

/* Price display */
.price {
  direction: ltr;
  text-align: left;
  font-family: system-ui, sans-serif;
}

/* ===========================
   RTL BACK TO TOP
   =========================== */
.to-top {
  left: 20px;
  right: auto;
  bottom: 20px;
}

/* ===========================
   RTL MEDIA QUERIES
   =========================== */

/* Mobile menu RTL */
@media (max-width: 991.98px) {
  .primary-nav a {
    text-align: right;
  }
}

/* Mobile back to top */
@media (max-width: 575.98px) {
  .to-top {
    left: 16px;
    right: auto;
    bottom: 16px;
  }
}

/* ===========================
   RTL DESKTOP OVERRIDES
   =========================== */
@media (min-width: 992px) {
  .primary-nav ul {
    flex-direction: row-reverse;
  }
}