/*
Theme Name: BarqSouq
Description: Right-to-Left (RTL) Stylesheet for BarqSouq Theme
Direction: RTL
*/

/* 1. Base Typography & Text Alignment for Arabic */
body.rtl,
[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
  text-align: right;
  font-family: 'Cairo', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, Tahoma, Arial, sans-serif;
  letter-spacing: normal;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

/* 2. Topbar RTL Adjustments */
body.rtl .topbar-ticker {
  flex-direction: row;
}

body.rtl .topbar-badge {
  letter-spacing: 0;
}

body.rtl .topbar-nav {
  gap: 1.25rem;
}

/* 3. Main Header & Search Form RTL */
body.rtl .brand-logo-link {
  flex-direction: row;
}

body.rtl .brand-name .gold-souq {
  margin-inline-start: 4px;
  margin-inline-end: 0;
}

body.rtl .search-category-dropdown {
  border-left: 1px solid var(--bs-gray-300);
  border-right: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-radius-md);
  border-bottom-right-radius: var(--bs-radius-md);
}

body.rtl .search-submit-btn {
  border-top-left-radius: var(--bs-radius-md);
  border-bottom-left-radius: var(--bs-radius-md);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body.rtl .action-counter-badge {
  right: auto;
  left: -8px;
}

body.rtl .action-text-meta {
  text-align: right;
}

/* 4. Navigation Menu RTL */
body.rtl .categories-menu-toggle {
  border-top-right-radius: var(--bs-radius-md);
  border-bottom-right-radius: var(--bs-radius-md);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

body.rtl .main-navigation-menu > li > a {
  text-align: right;
}

/* 5. Hero Section & Feature Cards */
body.rtl .hero-title {
  letter-spacing: 0;
}

body.rtl .hero-pill-badge {
  flex-direction: row;
}

body.rtl .feature-box {
  flex-direction: row;
}

/* 6. Product Card RTL */
body.rtl .badge-tag-wrap {
  right: 12px;
  left: auto;
}

body.rtl .card-rating-row {
  flex-direction: row;
}

body.rtl .card-price-row {
  flex-direction: row;
}

body.rtl .card-product-title {
  text-align: right;
}

/* 7. Mini-Cart Drawer RTL (slides in from left) */
body.rtl .bs-cart-drawer {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.25);
}

body.rtl .bs-cart-drawer.open {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 8. Footer Columns RTL */
body.rtl .footer-col-title::after {
  right: 0;
  left: auto;
}

body.rtl .footer-nav-list a:hover {
  padding-right: 6px;
  padding-left: 0;
}

/* 9. WooCommerce Form Inputs & Checkout Tables in RTL */
body.rtl .woocommerce-form-row {
  text-align: right;
}

body.rtl .woocommerce-checkout table.shop_table th,
body.rtl .woocommerce-checkout table.shop_table td {
  text-align: right;
}

body.rtl .woocommerce-checkout table.shop_table .product-total,
body.rtl .woocommerce-checkout table.shop_table .order-total {
  text-align: left;
}

body.rtl .woocommerce-form__label-for-checkbox {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* 10. Breadcrumbs RTL */
body.rtl .woocommerce-breadcrumb {
  direction: rtl;
  text-align: right;
  flex-direction: row;
}

body.rtl .woocommerce-breadcrumb .delimiter {
  transform: scaleX(-1);
  display: inline-block;
  margin: 0 4px;
}

/* 11. Contact Page RTL */
body.rtl .contact-card-title,
body.rtl .form-label,
body.rtl .contact-form-subtitle,
body.rtl .channel-title,
body.rtl .channel-desc {
  text-align: right;
}

body.rtl .form-input,
body.rtl .form-textarea {
  text-align: right;
  direction: rtl;
}

body.rtl .ltr-phone {
  direction: ltr;
  text-align: right;
}

/* 12. Mobile Bottom Bar RTL */
body.rtl .mobile-sticky-bottom-bar {
  direction: rtl;
}

body.rtl .mobile-sticky-bottom-bar .action-counter-badge {
  right: auto;
  left: -8px;
}

/* 13. Mobile Responsiveness in RTL */
@media (max-width: 768px) {
  body.rtl .header-actions {
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  body.rtl .header-action-btn .action-text-meta {
    display: none !important;
  }

  body.rtl .search-category-dropdown {
    display: none !important;
  }

  body.rtl .nav-promo-pill {
    display: none !important;
  }

  body.rtl .wc-block-cart-items__row,
  body.rtl tr.wc-block-cart-items__row {
    grid-template-columns: 80px 1fr !important;
  }
}