/* RTL overrides: safe flips and spacing fixes without breaking LTR-specific defaults */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: "Tajawal", "Heebo", Arial, sans-serif;
}

/* Bootstrap text alignment utilities */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }
@media (min-width: 576px) {
  html[dir="rtl"] .text-sm-start { text-align: right !important; }
  html[dir="rtl"] .text-sm-end { text-align: left !important; }
}
@media (min-width: 768px) {
  html[dir="rtl"] .text-md-start { text-align: right !important; }
  html[dir="rtl"] .text-md-end { text-align: left !important; }
}
@media (min-width: 992px) {
  html[dir="rtl"] .text-lg-start { text-align: right !important; }
  html[dir="rtl"] .text-lg-end { text-align: left !important; }
}
@media (min-width: 1200px) {
  html[dir="rtl"] .text-xl-start { text-align: right !important; }
  html[dir="rtl"] .text-xl-end { text-align: left !important; }
}

/* Navbar */
html[dir="rtl"] .navbar-light .navbar-nav .nav-link {
  margin-left: 25px;
  margin-right: 0;
}

/* Hero background positions flipped */
html[dir="rtl"] .hero-header {
  background-position:
    right 0px top 0px,
    left 0px top 50%,
    center bottom;
}

/* Screenshot carousel dots to the left in RTL */
html[dir="rtl"] .screenshot-carousel {
  margin-left: 30px;
  margin-right: 0;
}
html[dir="rtl"] .screenshot-carousel .owl-dots {
  left: -30px;
  right: auto;
}

/* Footer background positions flipped */
html[dir="rtl"] .footer {
  background-position:
    right 0px bottom 0px,
    left 0px top 50%,
    center top;
}

/* Footer links start alignment */
html[dir="rtl"] .footer .btn.btn-link {
  text-align: right;
}
html[dir="rtl"] .footer .btn.btn-link::before {
  content: "\f104"; /* angle-left for RTL */
  margin-left: 10px;
  margin-right: 0;
}

/* Social buttons spacing */
html[dir="rtl"] .footer .btn.btn-social {
  margin-left: 5px;
  margin-right: 0;
}

/* Footer menu separators flip */
html[dir="rtl"] .footer .footer-menu a {
  margin-left: 15px;
  padding-left: 15px;
  border-left: 1px solid rgba(255, 255, 255, .1);
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

/* Back to top on the left in RTL to avoid overlap with RTL widgets */
html[dir="rtl"] .back-to-top {
  left: 45px;
  right: auto;
}

/* Bootstrap utility flips for common margins/paddings when semantic spacing used in markup */
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }

/* Align icons inside feature items */
html[dir="rtl"] .feature-item .d-inline-flex { flex-direction: row-reverse; }
html[dir="rtl"] .feature-item .d-inline-flex + div,
html[dir="rtl"] .feature-item .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }

/* Testimonial: avatar on the right, text on the left */
html[dir="rtl"] .testimonial-item { text-align: right; }
/* Keep natural row flow in RTL so first item (img) sits on the right, second (text) to its left */
html[dir="rtl"] .testimonial-item .d-flex.align-items-center { flex-direction: row !important; gap: 1rem; }
/* Reset any ordering so DOM order applies: img then text */
html[dir="rtl"] .testimonial-item .d-flex.align-items-center > img { order: 0; }
html[dir="rtl"] .testimonial-item .d-flex.align-items-center > .ms-4 { order: 0; }
/* Neutralize margins on the text block inside testimonial and rely on gap for spacing */
html[dir="rtl"] .testimonial-item .ms-4 { margin: 0 !important; }

/* Pricing: justify-content-between becomes space-between but with RTL icons on left naturally */
/* No change needed; just ensure check icons keep spacing */

/* Contact form floating labels: text-right */
html[dir="rtl"] .form-floating > label { left: auto; right: 0.75rem; text-align: right; }
html[dir="rtl"] .form-floating > .form-control,
html[dir="rtl"] .form-floating > .form-select { padding-right: 1rem; padding-left: 0.75rem; }

/*** Contact Form Fix for RTL ***/
html[dir="rtl"] .form-floating > .form-control::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
    text-align: right;
}

html[dir="rtl"] .form-floating > .form-control {
    color: #495057 !important;
    text-align: right;
}

html[dir="rtl"] .form-floating > label {
    color: #6c757d !important;
    text-align: right;
}

/* Owl Carousel nav order already handled by rtl option in JS */