/* =========================================================
   يمان ستور - RTL-Specific Overrides
   ========================================================= */

/* Base RTL Declarations */
html, body {
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

/* =========================================================
   Text Alignment Defaults
   ========================================================= */
p, li, td, th, label, span, div {
  text-align: right;
}

h1, h2, h3, h4, h5, h6 {
  text-align: right;
}

/* =========================================================
   Flexbox RTL Adjustments
   ========================================================= */

/* Rows that need reversed direction get flex-row-reverse */
.flex-rtl-reverse {
  flex-direction: row-reverse;
}

/* Icon before text should use row-reverse in RTL */
.icon-label-row {
  flex-direction: row;
}

/* =========================================================
   Margin & Padding Direction Fixes
   ========================================================= */
.ms-auto { margin-right: auto; margin-left: 0; }
.me-auto { margin-left: auto; margin-right: 0; }

.ps-4 { padding-right: 1rem; padding-left: 0; }
.pe-4 { padding-left: 1rem; padding-right: 0; }

/* =========================================================
   Border Radius RTL Fixes
   ========================================================= */
/* Search bar: rounded on the LEFT side (which is "start" in LTR but "end" in RTL) */
.search-form .search-input {
  border-radius: 0 9999px 9999px 0;
}

.search-form .search-btn {
  border-radius: 9999px 0 0 9999px;
}

/* Category nav scrolls from right */
.site-nav {
  direction: rtl;
}

.nav-list {
  flex-direction: row;
  justify-content: flex-start;
}

/* =========================================================
   Mobile Nav Drawer (opens from RIGHT in RTL)
   ========================================================= */
.mobile-nav {
  right: -100%;
  left: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.mobile-nav.open {
  right: 0;
  left: auto;
}

/* =========================================================
   Filter Drawer (opens from LEFT in RTL — opposite edge)
   ========================================================= */
.filter-drawer {
  left: auto;
  right: -100%;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.filter-drawer.open {
  right: 0;
  left: auto;
}

/* =========================================================
   Form Select Arrow (LEFT side in RTL)
   ========================================================= */
.form-select {
  background-position: left 16px center;
  padding-right: 1rem;
  padding-left: 2.5rem;
}

/* =========================================================
   Product Card Badges (positioned to RIGHT edge in RTL)
   ========================================================= */
.product-badge {
  right: 0.5rem;
  left: auto;
}

/* Wishlist btn on LEFT edge of card image in RTL */
.wishlist-btn {
  left: 0.5rem;
  right: auto;
}

/* Cart badge on LEFT side of icon */
.badge {
  left: 2px;
  right: auto;
}

/* =========================================================
   Payment Badge positioning
   ========================================================= */
.payment-badge {
  left: 0.75rem;
  right: auto;
}

/* =========================================================
   Product Short Description border on RIGHT
   ========================================================= */
.product-short-desc {
  border-right: 3px solid var(--color-primary);
  border-left: none;
  padding-right: 0.75rem;
  padding-left: 0;
}

/* =========================================================
   Accordion icon — flip direction
   ========================================================= */
.accordion-header {
  flex-direction: row;
  justify-content: space-between;
}

/* =========================================================
   Footer social icons alignment
   ========================================================= */
.footer-social {
  justify-content: flex-start;
}

/* =========================================================
   Breadcrumb Separator orientation
   ========================================================= */
.breadcrumb-sep::after {
  content: '‹';
}

/* =========================================================
   Progress Steps — left-to-right reading in RTL context
   We keep step numbers logical (١→٥) but line goes right→left
   ========================================================= */
.progress-step::before {
  right: 50%;
  left: auto;
  width: 100%;
}

/* =========================================================
   Specs Table — label column on RIGHT
   ========================================================= */
.specs-table td:first-child {
  text-align: right;
  border-left: 3px solid var(--color-border);
  border-right: none;
  padding-right: 1rem;
  padding-left: 0.75rem;
}

.specs-table td:last-child {
  text-align: right;
  padding-right: 1rem;
}

/* =========================================================
   Hero CTA Buttons row
   ========================================================= */
.hero-actions {
  justify-content: flex-start;
}

/* =========================================================
   Category grid auto-flow
   ========================================================= */
.quick-cats-grid,
.products-grid,
.offers-grid,
.steps-grid,
.footer-grid {
  direction: rtl;
}

/* =========================================================
   Input & Textarea text alignment
   ========================================================= */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
textarea,
select {
  text-align: right;
  direction: rtl;
}

/* Phone number field - special case */
input[type="tel"] {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

/* Price display — keep numbers LTR */
.product-price,
.product-price-large,
.summary-row .value,
.cart-item-price {
  direction: ltr;
  unicode-bidi: embed;
  text-align: right;
}

/* =========================================================
   Step connector lines — RTL direction
   ========================================================= */
.progress-step::before {
  left: -50%;
  right: 50%;
}

/* =========================================================
   Mobile nav links border direction
   ========================================================= */
.mobile-nav-link {
  border-right: 3px solid transparent;
  border-left: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  border-right-color: var(--color-primary);
  background: var(--color-bg);
  color: var(--color-primary-dark);
}

/* =========================================================
   Filter options checkbox on RIGHT
   ========================================================= */
.filter-option {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.filter-option input[type="checkbox"] {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* =========================================================
   Stars option direction
   ========================================================= */
.stars-option {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* =========================================================
   Payment option radio on LEFT edge in RTL
   ========================================================= */
.payment-option {
  flex-direction: row-reverse;
}

.payment-option input[type="radio"] {
  margin-left: 0;
  order: -1;
}

/* =========================================================
   Cart item grid RTL
   ========================================================= */
.cart-item {
  grid-template-columns: auto 1fr auto;
}

/* =========================================================
   Qty selector — RTL button positions
   The - button should be on LEFT in RTL (which is "end")
   The + button should be on RIGHT in RTL (which is "start")
   ========================================================= */
.qty-selector {
  direction: ltr;
}

.qty-selector .qty-btn:first-child {
  order: 3;
}

.qty-selector .qty-input {
  order: 2;
}

.qty-selector .qty-btn:last-child {
  order: 1;
}

/* =========================================================
   View All link arrow direction
   ========================================================= */
.view-all-link::after {
  content: ' ←';
  font-size: 0.75rem;
}

/* =========================================================
   Offer card emoji — position on LEFT in RTL
   ========================================================= */
.offer-emoji {
  right: auto;
  left: 1.25rem;
}

/* =========================================================
   Step connector fix for RTL
   ========================================================= */
@media (min-width: 768px) {
  .progress-step::before {
    right: 50%;
    left: -50%;
    transform: none;
  }
}