/* style-ar.css */

/* General RTL setup */
body {
  direction: rtl;
  text-align: right;
}

/* Header Adjustments for RTL */
.header .container {
  flex-direction: row-reverse; /* Flips the order of flex items: logo/text on right, nav on left */
  /* justify-content: space-between; remains effective to push items to ends */
}

.header .logo {
  /* No specific margin adjustments needed here, flex order handles it */
  gap: 15px; /* Keep gap the same */
  order: 2; /* Put logo after nav in flex order to appear on the right */
}

.logo-text {
  text-align: right; /* Ensure text aligns right within its container */
}

.navbar-desktop {
  order: 1; /* Puts desktop nav before logo in flex order to appear on the left */
}

/* Language Switcher Styles (Single Toggle Button) */
.lang-switcher {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the single toggle link */
}

.lang-toggle-link {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between flag and text */
  text-decoration: none;
  color: #555; /* Default text color */
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: all 0.2s ease;
  background-color: #f0f0f0;
  flex-direction: row-reverse; /* For RTL, text then flag */
}

.lang-toggle-link:hover {
  background-color: #e0e0e0;
  border-color: #7ac142;
  color: #7ac142;
}

.lang-toggle-link .flag-icon {
  width: 25px; /* Adjust flag size within the toggle */
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
}

.lang-toggle-link .lang-text {
  font-size: 0.9em; /* Adjust text size */
  text-transform: uppercase;
}

/* IMPORTANT: Hide old flag wrapper styles if they exist */
.lang-icon-wrapper,
.lang-icon-wrapper.active-lang {
  display: none !important;
}

.navbar-desktop ul {
  flex-direction: row; /* Keep nav items in standard LTR order (English button still on right) */
  /* If you wanted the English button on the very left, you'd make this row-reverse too.
       However, the current image shows the English button on the right of the Arabic nav items. */
  gap: 25px; /* Keep gap the same */
}

/* About Us Section */
.about-section .container {
  flex-direction: row-reverse; /* Flips image and content order: image on left, text on right */
  /* gap property remains the same */
}

.about-content {
  text-align: right;
}

.about-image {
  text-align: left; /* If image has text or content, align left */
}

/* Our Services Section - Grid should generally adapt well, no specific RTL flex changes needed */
.service-item {
  text-align: right;
}

/* Contact Us Section */
.contact-content {
  flex-direction: row-reverse; /* Flips form and info order: form on right, info on left */
  justify-content: center; /* Center the two blocks */
}

.contact-form {
  text-align: right; /* Form labels and inputs align right */
}

.contact-info {
  text-align: right; /* Info block aligns right overall */
}

.form-group label {
  text-align: right;
}

.form-group input,
.form-group textarea {
  text-align: right; /* Ensure input text is also RTL */
}

/* --- MODIFIED: Contact Info Icon Positioning for RTL --- */
.contact-info p {
  display: flex; /* Keep flex to align icon and text */
  flex-direction: row; /* Changed to row to place icon on the right of text */
  align-items: center; /* Vertically center icon and text */
  justify-content: flex-start; /* Push icon and text to the left within their container */
  text-align: right; /* Ensure text itself is right-aligned */
}

.contact-info p i {
  margin-right: 10px; /* Add margin to the right of the icon for spacing */
  margin-left: 0; /* Ensure no unwanted left margin */
}

/* Footer Adjustments */
.footer .container {
  flex-direction: row-reverse; /* Flips copyright and social links on desktop */
}

.social-links {
  text-align: left; /* If you want social links to be on the left side of the footer */
}

/* Mobile Menu RTL adjustments */
/* Ensure these values match the JS logic for sliding */
.navbar-mobile {
  left: auto; /* Remove LTR default left:0 */
  right: 0; /* Position off-screen to the right for RTL */
  transform: translateX(100%); /* Start off-screen to the right */
}

.navbar-mobile.active {
  transform: translateX(0); /* Slide into view from the right */
}

.close-mobile-menu {
  left: 20px; /* Position close button on the left for RTL */
  right: auto; /* Remove right property */
}

.navbar-mobile ul {
  text-align: right; /* Ensure mobile menu items align right */
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  left: 20px; /* For RTL */
  right: auto; /* Ensure no conflict with LTR right property */
  background-color: #7ac142;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px); /* Start slightly off-screen */
  z-index: 990; /* Below mobile menu, above content */
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Responsive Design - Media Queries for RTL Specifics */
@media (max-width: 992px) {
  /* Header container on mobile:
       The default style.css already sets .header .container to flex-direction: row
       and the hamburger's HTML placement makes it stay on the right.
       The logo/text needs to go left (flex-start).
       So, no specific flex-direction override for .header .container here for mobile,
       as 'row' works for keeping hamburger right and logo left. */

  .header .logo {
    order: 1; /* Make logo the first item in flex order (visual left) */
    justify-content: flex-start; /* Align logo and text to the start (left) */
  }

  .hamburger {
    order: 2; /* Make hamburger the second item (visual right) */
    margin-left: auto; /* Push it to the far right */
    margin-right: 0; /* Ensure no unwanted margin */
  }

  .lang-toggle-link {
    width: auto; /* Allow button to size based on content */
    height: auto;
    padding: 10px 15px; /* Adjust padding for mobile button */
  }

  .lang-toggle-link .flag-icon {
    width: 30px; /* Larger flag for mobile toggle */
    height: 22px;
  }

  .logo-text {
    text-align: right; /* Ensure mobile text aligns right */
  }

  /* Footer adjustments for RTL mobile */
  .footer .container {
    flex-direction: column;
    padding: 20px;
  }

  .contact-form,
  .contact-info {
    min-width: 300px; /* Adjusted for tablet layout */
  }
}

@media (max-width: 480px) {
  .logo-text {
    text-align: right; /* Ensure mobile text aligns right */
  }

  .contact-form,
  .contact-info {
    text-align: right; /* Ensure contact blocks align right */
  }
}