/* ========================================
   RTL Support - Arabic Direction & Layout
   ======================================== */

/* Global RTL adjustments */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] body {
  direction: rtl;
}

/* Flexbox RTL support */
html[dir="rtl"] .container {
  direction: rtl;
}

/* Preserve centered text alignment - DO NOT override */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] .section__title,
html[dir="rtl"] .hero__title,
html[dir="rtl"] .hero__subtitle,
html[dir="rtl"] .btn {
  /* Let original CSS handle text-align - keep centered if centered */
}

/* Button and form RTL support */
html[dir="rtl"] button,
html[dir="rtl"] .btn {
  text-align: center;
}

html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  direction: rtl;
  text-align: right;
}

/* Fix placeholder text direction */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
  text-align: right;
}

/* List RTL support - preserve original alignment */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 2rem;
  padding-left: 0;
}

/* Gallery and flex containers */
html[dir="rtl"] .gallery__grid,
html[dir="rtl"] .projects__grid,
html[dir="rtl"] .services__grid {
  flex-direction: row;
}

/* Cards RTL support - preserve center alignment */
html[dir="rtl"] .card {
  text-align: center;
}

html[dir="rtl"] .card__icon {
  margin-left: 0;
  margin-right: auto;
  margin-left: auto;
}

/* Section padding and alignment - preserve center */
html[dir="rtl"] section {
  direction: rtl;
  text-align: center;
}

/* Testimonials RTL - preserve center alignment */
html[dir="rtl"] .testimonial {
  text-align: center;
}

html[dir="rtl"] .testimonial__text::before {
  content: '';
  display: none;
}

html[dir="rtl"] .testimonial__text::after {
  content: '"';
  margin-right: 0.25rem;
}

html[dir="rtl"] .testimonial__text::before {
  content: '"';
  margin-left: 0.25rem;
}

/* Process steps RTL - preserve center alignment */
html[dir="rtl"] .process__step {
  text-align: center;
}

html[dir="rtl"] .process__number {
  margin-right: 0;
  margin-left: 0;
}

/* Contact section RTL - Comprehensive */
html[dir="rtl"] .contact {
  direction: rtl;
  text-align: center;
}

html[dir="rtl"] .contact__bento {
  direction: rtl;
  text-align: center;
}

html[dir="rtl"] .bento-box {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] .bento-header {
  text-align: center;
}

html[dir="rtl"] .bento-form {
  text-align: center;
}

html[dir="rtl"] .contact-form {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] .form-grid {
  flex-direction: row;
  justify-content: center;
}

html[dir="rtl"] .input-group {
  width: 100%;
}

html[dir="rtl"] .input-group input,
html[dir="rtl"] .input-group textarea {
  text-align: center;
  direction: rtl;
  width: 100%;
}

html[dir="rtl"] .form__group {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] .form__label {
  text-align: center;
  display: block;
  direction: rtl;
}

html[dir="rtl"] .form__input,
html[dir="rtl"] .form__textarea {
  text-align: center;
  direction: rtl;
  width: 100%;
}

html[dir="rtl"] .contact__form {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] .contact__content {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] .contact__title {
  text-align: center;
}

html[dir="rtl"] .contact__desc {
  text-align: center;
}

html[dir="rtl"] .contact__info {
  text-align: center;
}

html[dir="rtl"] .contact__info-item {
  text-align: center;
}

html[dir="rtl"] .contact__info-label {
  text-align: center;
}

html[dir="rtl"] .contact__info-value {
  text-align: center;
}

html[dir="rtl"] .bento-details {
  text-align: center;
  direction: rtl;
}

html[dir="rtl"] .detail-item {
  text-align: center;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

html[dir="rtl"] .bento-icon {
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] .bento-content {
  text-align: center;
}

html[dir="rtl"] .bento-label {
  text-align: center;
  display: block;
  letter-spacing: 0;
}

html[dir="rtl"] .bento-value {
  text-align: center;
  display: block;
}

html[dir="rtl"] .section-title {
  text-align: center;
}

html[dir="rtl"] .badge {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

/* Footer RTL */
html[dir="rtl"] .footer {
  direction: rtl;
}

html[dir="rtl"] .footer__content {
  direction: rtl;
}

html[dir="rtl"] .footer__section {
  text-align: right;
}

/* Icon positioning RTL */
html[dir="rtl"] [class*="icon"] {
  margin-left: auto;
  margin-right: auto;
}

/* Mobile menu RTL */
html[dir="rtl"] .navbar__toggle {
  margin-left: auto;
  margin-right: 0;
}

/* Arrow RTL adjustments */
html[dir="rtl"] .arrow-right::after {
  content: '←';
}

html[dir="rtl"] .arrow-left::after {
  content: '→';
}

/* Float RTL support */
html[dir="rtl"] .float-left {
  float: right;
}

html[dir="rtl"] .float-right {
  float: left;
}

/* Padding and margin RTL - margin/padding utilities */
html[dir="rtl"] .ml-auto {
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] .mr-auto {
  margin-right: auto;
  margin-left: 0;
}

html[dir="rtl"] .pl-auto {
  padding-left: auto;
  padding-right: 0;
}

html[dir="rtl"] .pr-auto {
  padding-right: auto;
  padding-left: 0;
}

/* Gallery RTL */
html[dir="rtl"] .gallery {
  direction: rtl;
}

html[dir="rtl"] .gallery__header {
  text-align: center;
}

html[dir="rtl"] .gallery__grid {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0 5%;
}

html[dir="rtl"] .gallery-item {
  direction: rtl;
}

html[dir="rtl"] .gallery-item img {
  direction: rtl;
}

html[dir="rtl"] .gallery-overlay {
  direction: rtl;
}

html[dir="rtl"] .gallery-info {
  direction: rtl;
  text-align: center;
}

html[dir="rtl"] .gallery-tag {
  direction: rtl;
  text-align: center;
}

html[dir="rtl"] .gallery-trigger {
  direction: rtl;
}

/* RTL Gallery responsive layouts */
@media (max-width: 599px) {
  html[dir="rtl"] .gallery__grid {
    flex-direction: row-reverse;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  html[dir="rtl"] .gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 300px;
    grid-auto-flow: dense;
    direction: rtl;
  }
}

@media (min-width: 1024px) {
  html[dir="rtl"] .gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 350px;
    grid-auto-flow: dense;
    direction: rtl;
  }
}

/* Timeline RTL */
html[dir="rtl"] .timeline {
  text-align: center;
}

html[dir="rtl"] .timeline::before {
  left: auto;
  right: 50%;
  margin-right: auto;
  margin-left: -10px;
}

html[dir="rtl"] .timeline__item {
  text-align: center;
  padding-left: 0;
  padding-right: 2rem;
}

html[dir="rtl"] .timeline__item::before {
  left: auto;
  right: -2.5rem;
}

/* Breadcrumb RTL */
html[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
  justify-content: center;
}

html[dir="rtl"] .breadcrumb__separator::before {
  content: '/';
  margin: 0 0.5rem;
}

/* Table RTL */
html[dir="rtl"] table {
  text-align: center;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: center;
  padding-right: 1rem;
  padding-left: 0;
}

/* Fleet section RTL */
html[dir="rtl"] .fleet__header-float {
  left: auto;
  right: 10vw;
  text-align: right;
}

html[dir="rtl"] .fleet-panel {
  margin-right: 0;
  margin-left: 4rem;
}

html[dir="rtl"] .fleet-panel:last-child {
  margin-left: 0;
}

html[dir="rtl"] .fleet-panel__info {
  text-align: right;
}

/* Badge RTL - center aligned */
html[dir="rtl"] .badge {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

/* Section headers RTL */
html[dir="rtl"] .section__header {
  text-align: center;
}

/* Hero and title sections - preserve centering */
html[dir="rtl"] .hero__content {
  text-align: center;
}

html[dir="rtl"] .hero__badge {
  text-align: center;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] .hero__word {
  display: inline;
}

/* Service items RTL - preserve center */
html[dir="rtl"] .service__item {
  text-align: center;
}

html[dir="rtl"] .service__icon {
  margin-left: auto;
  margin-right: auto;
}

/* Fleet items RTL - center */
html[dir="rtl"] .fleet__item {
  text-align: center;
}

/* Project cards RTL - center */
html[dir="rtl"] .project__card {
  text-align: center;
}

/* Stats RTL - specific alignment */
html[dir="rtl"] .blueprint-tag {
  left: auto;
  right: 1.5rem;
}

html[dir="rtl"] .blueprint-feature {
  justify-content: center;
}

html[dir="rtl"] .blueprint-features {
  justify-content: center;
}

html[dir="rtl"] .blueprint-line::after {
  right: auto;
  left: 0;
}

html[dir="rtl"] .blueprint-text {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

html[dir="rtl"] .box-stats {
  text-align: center;
  align-items: center;
}

html[dir="rtl"] .blueprint-stat-grid {
  justify-content: center;
  align-items: center;
}

html[dir="rtl"] .blueprint-stat {
  align-items: center;
  text-align: center;
}

html[dir="rtl"] .blueprint-num-wrap {
  justify-content: center;
}

/* General Stats RTL - center */
html[dir="rtl"] .stats {
  text-align: center;
}

html[dir="rtl"] .stat__item {
  text-align: center;
}

/* CTA section RTL */
html[dir="rtl"] .cta {
  text-align: center;
}

html[dir="rtl"] .cta__title {
  text-align: center;
}

html[dir="rtl"] .cta__desc {
  text-align: center;
}

@media (max-width: 968px) {
  html[dir="rtl"] .fleet__header-float {
    right: auto !important;
    text-align: center !important;
    padding: 0 1.5rem !important;
    width: 100% !important;
  }
  
  html[dir="rtl"] .fleet__header-float .section-title {
    font-size: 1.8rem !important;
  }

  html[dir="rtl"] .fleet-panel {
    margin-left: 1rem !important;
  }
}
