/* static/css/style.rtl.css */

/* ========================================
   1. Global & Typography
   ======================================== */
body {
  direction: rtl;
}

h1, h2, h3, h4, h5, h6,
.page-intro,
.slide-caption,
.cta-expand-reveal,
.item-card-content {
  /* text-align: right; */ /* Uncomment if LTR version was specifically text-align: left and it's not inheriting correctly */
}

/* Ensure footer column text (including h4) aligns right in RTL */
html[dir="rtl"] .footer-column {
  text-align: right;
}

/* Titles with left-aligned accent lines in LTR need to be flipped */
/* Navbar link underlines and section/page title underlines are centered, so they are NOT included here. */
html[dir="rtl"] .about-section-title,
html[dir="rtl"] .contact-section-subtitle,
html[dir="rtl"] .footer-column h4 {
    text-align: right;
}

html[dir="rtl"] .about-section-title::after,
html[dir="rtl"] .contact-section-subtitle::after,
html[dir="rtl"] .footer-column h4::after {
    right: 0;
    left: auto; /* Important to override LTR's left: 0 */
}


input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  text-align: right;
}

.force-ltr-text,
html[dir="rtl"] span[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

/* ========================================
   2. Navbar - LTR Visual Order
   ======================================== */
html[dir="rtl"] .navbar .container {
  direction: ltr;
}

html[dir="rtl"] .navbar .container > .navbar-logo,
html[dir="rtl"] .navbar .container > .navbar-links-desktop,
html[dir="rtl"] .navbar .container > .navbar-actions {
  direction: rtl;
}

html[dir="rtl"] .navbar-logo {
  direction: ltr !important;
}
html[dir="rtl"] .navbar-logo img {
  margin-right: 12px;
  margin-left: 0;
}
html[dir="rtl"] .navbar-logo span {
  direction: rtl;
  unicode-bidi: embed;
}

html[dir="rtl"] .navbar .container .navbar-actions {
  direction: ltr;
}
html[dir="rtl"] .navbar .container .navbar-actions > .language-switcher,
html[dir="rtl"] .navbar .container .navbar-actions > .mobile-menu-toggle {
  direction: rtl;
}

html[dir="rtl"] .navbar-actions .language-switcher {
  margin-left: 0.75rem; /* Replicates LTR 'gap' behavior */
  margin-right: 0;
}
html[dir="rtl"] .navbar-actions .mobile-menu-toggle {
  margin-left: 0;
  margin-right: 0;
}

html[dir="rtl"] .language-switcher .globe-icon {
  margin-right: 0;
  margin-left: 4px;
}

/*
  NO CHANGE NEEDED FOR .navbar-links-desktop ul li a::after FOR RTL
  The LTR styles:
  .navbar-links-desktop ul li a::after {
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      transform-origin: center;
  }
  .navbar-links-desktop ul li a:hover::after,
  .navbar-links-desktop ul li a.active::after {
      transform: translateX(-50%) scaleX(1);
  }
  These are already correctly centered and work fine in RTL.
  Any overrides for these specific properties in RTL CSS were a mistake and have been removed.
*/


/* ========================================
   3. Buttons & Icons
   ======================================== */
html[dir="rtl"] .btn > i:first-child:not(.btn-icon-right) {
  margin-left: 0.6em;
  margin-right: 0;
}

html[dir="rtl"] .btn .btn-icon-right {
  margin-right: 0.6em;
  margin-left: 0;
}

html[dir="rtl"] .back-to-categories i.fas,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] i.fas.fa-arrow-right {
  transform: scaleX(-1);
}
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] i.fas.fa-arrow-left {
  transform: scaleX(-1);
}


/* ========================================
   4. About Section - LTR Visual Order
   ======================================== */
/* .about-section-title and ::after handled by general rules at the top */

html[dir="rtl"] .about-content {
  direction: ltr; /* Text block first, then Image (LTR visual order) */
}
html[dir="rtl"] .about-content > .about-text,
html[dir="rtl"] .about-content > .about-image {
  direction: rtl;
}
html[dir="rtl"] .about-content > .about-text {
  text-align: right;
}

/* ========================================
   5. Contact Page
   ======================================== */
html[dir="rtl"] input[type="tel"],
html[lang="ar"] input[type="tel"] {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .contact-page-wrapper {
  direction: ltr; /* Form on left, info on right (LTR visual order) */
}

html[dir="rtl"] .contact-form-container,
html[dir="rtl"] .contact-info-sidebar {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .location-card h4 .flag-icon {
  margin-left: 0.75rem;
  margin-right: 0;
}
html[dir="rtl"] .contact-details li i.fas {
  margin-left: 12px;
  margin-right: 0;
}
html[dir="rtl"] .social-links-contact-page .social-icon-contact {
  margin-left: 15px;
  margin-right: 0;
}
html[dir="rtl"] .social-links-contact-page .social-icon-contact:last-child {
  margin-left: 0;
}

/* ========================================
   6. Product & Categories
   ======================================== */
/* .product-detail-wrapper, .product-detail-content: Use logical properties in main CSS if possible */
/* e.g., padding-inline-start instead of padding-left */

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "<";
  padding: 0 0.75rem;
}
html[dir="rtl"] .back-to-categories {
  text-align: right;
}

/* ========================================
   7. Footer
   ======================================== */
/* .footer-column h4 and ::after handled by general rules at the top */

html[dir="rtl"] .footer-social-links a {
  margin-left: 15px;
  margin-right: 0;
}
html[dir="rtl"] .footer-social-links a:last-child {
  margin-left: 0;
}

html[dir="rtl"] .footer-location-block h5 .flag-icon {
  margin-left: 0.6rem;
  margin-right: 0;
}
html[dir="rtl"] .footer-location-block p i.fas,
html[dir="rtl"] .footer-emails li i.fas {
  margin-left: 8px;
  margin-right: 0;
}

html[dir="rtl"] .footer-quick-links li a:hover {
  padding-right: 5px;
  padding-left: 0;
}


/* ========================================
   8. Responsive Overrides
   ======================================== */
/* Your existing responsive overrides are generally fine. */
/* The general RTL rules should cascade down. */

/* Example: Mobile menu toggle animation if it was LTR specific */
html[dir="rtl"] .mobile-menu-toggle.active .bar:nth-of-type(2) {
    /* transform: translateX(-20px); */ /* If LTR was translateX(20px), RTL might need opposite */
                                        /* Or if it's opacity: 0 it doesn't matter */
}