/* ============================================
   FIX APPLIANCES DUBAI — RTL & Arabic Stylesheet
   Purely scoped to [dir="rtl"] or html[lang="ar"]
   Does NOT affect any English LTR pages
   ============================================ */

/* ---- Arabic Typography & Base Setup ---- */
html[dir="rtl"],
html[lang="ar"] {
  direction: rtl;
  text-align: right;
  --font-heading: 'Tajawal', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-body: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[dir="rtl"] body {
  font-family: var(--font-body);
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-family: var(--font-heading);
  letter-spacing: normal; /* Arabic does not use negative tracking */
}

/* ---- Language Switcher Badge in Header ---- */
html[dir="rtl"] .lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

html[dir="rtl"] .lang-switch:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-charcoal-deep);
  transform: translateY(-1px);
}

html[dir="rtl"] .lang-switch svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

html[dir="rtl"] .mobile-lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  margin: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all var(--transition-fast);
}

html[dir="rtl"] .mobile-lang-switch:hover {
  background: var(--color-gold);
  color: var(--color-charcoal);
}

/* ---- Header & Navigation in RTL ---- */
html[dir="rtl"] .header-inner {
  flex-direction: row;
}

html[dir="rtl"] .nav-list {
  flex-direction: row;
}

html[dir="rtl"] .header-actions {
  flex-direction: row;
}

html[dir="rtl"] .header-search-input {
  padding: 7px 12px 7px 32px;
  text-align: right;
}

html[dir="rtl"] .header-search-btn {
  right: auto;
  left: 9px;
}

html[dir="rtl"] .mobile-search-input {
  padding: 10px 14px 10px 40px;
  text-align: right;
}

html[dir="rtl"] .mobile-search-btn {
  right: auto;
  left: 12px;
}

/* ---- Mobile Menu Drawer in RTL (Slide from Left) ---- */
html[dir="rtl"] .mobile-menu {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  text-align: right;
}

html[dir="rtl"] .mobile-menu.active {
  transform: translateX(0);
}

html[dir="rtl"] .mobile-menu-header {
  flex-direction: row;
}

html[dir="rtl"] .mobile-menu-info svg {
  margin-right: 0;
  margin-left: 8px;
}

/* ---- Breadcrumbs in RTL ---- */
html[dir="rtl"] .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

html[dir="rtl"] .breadcrumb-sep {
  transform: scaleX(-1);
  display: inline-block;
}

/* ---- Hero & Section Typography ---- */
html[dir="rtl"] .hero-content {
  text-align: right;
}

html[dir="rtl"] .hero-badges,
html[dir="rtl"] .hero-actions {
  justify-content: flex-start;
}

html[dir="rtl"] .section-header.text-center {
  text-align: center;
}

/* ---- Inline Arrows & Icons Direction ---- */
html[dir="rtl"] .inline-arrow,
html[dir="rtl"] .footer-link-arrow,
html[dir="rtl"] .btn svg.arrow-icon {
  transform: scaleX(-1);
  margin-left: 0 !important;
  margin-right: 5px !important;
}

html[dir="rtl"] .footer-link-more:hover .footer-link-arrow {
  transform: scaleX(-1) translateX(4px);
}

/* ---- Service Detail / Service Main / Sidebar in RTL ---- */
html[dir="rtl"] .service-content {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-8);
}

@media (max-width: 991px) {
  html[dir="rtl"] .service-content {
    grid-template-columns: 1fr;
  }
}

html[dir="rtl"] .service-main {
  text-align: right;
}

html[dir="rtl"] .service-main ul,
html[dir="rtl"] .service-main ol {
  padding-left: 0;
  padding-right: var(--space-6);
}

html[dir="rtl"] .service-main li {
  text-align: right;
}

html[dir="rtl"] .service-sidebar {
  text-align: right;
}

/* ---- Process Steps in RTL ---- */
html[dir="rtl"] .process-steps {
  direction: rtl;
}

html[dir="rtl"] .process-step {
  text-align: right;
}

/* ---- FAQ Accordion in RTL ---- */
html[dir="rtl"] .faq-question {
  text-align: right;
  flex-direction: row;
  justify-content: space-between;
}

html[dir="rtl"] .faq-question-icon {
  margin-left: 0;
  margin-right: var(--space-4);
}

html[dir="rtl"] .faq-answer {
  text-align: right;
}

/* ---- Forms in RTL ---- */
html[dir="rtl"] .form-group {
  text-align: right;
}

html[dir="rtl"] .form-control {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] select.form-control {
  background-position: left 14px center;
  padding-right: 14px;
  padding-left: 36px;
}

html[dir="rtl"] .form-error {
  text-align: right;
}

/* ---- Tables in RTL ---- */
html[dir="rtl"] table {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: right;
}

/* ---- Cards & Grids in RTL ---- */
html[dir="rtl"] .card {
  text-align: right;
}

html[dir="rtl"] .badge {
  direction: rtl;
}

/* ---- GMB Section in RTL ---- */
html[dir="rtl"] .gmb-layout {
  direction: rtl;
}

html[dir="rtl"] .gmb-card {
  text-align: right;
}

html[dir="rtl"] .gmb-header-badges {
  flex-direction: row;
}

html[dir="rtl"] .gmb-detail-item {
  flex-direction: row;
}

html[dir="rtl"] .gmb-detail-item:hover {
  transform: translateX(-2px);
}

html[dir="rtl"] .gmb-actions {
  flex-direction: row;
}

/* ---- Footer in RTL ---- */
html[dir="rtl"] .footer-grid {
  direction: rtl;
}

html[dir="rtl"] .footer-column {
  text-align: right;
}

html[dir="rtl"] .footer-about {
  padding-right: 0;
  padding-left: var(--space-8);
}

@media (max-width: 1024px) {
  html[dir="rtl"] .footer-about {
    padding-left: 0;
  }
}

html[dir="rtl"] .footer-contact-item svg {
  margin-right: 0;
  margin-left: var(--space-3);
}

html[dir="rtl"] .footer-title::after {
  left: auto;
  right: 0;
}

html[dir="rtl"] .footer-link {
  transition: color var(--transition-fast), padding-right var(--transition-fast);
}

html[dir="rtl"] .footer-link:hover {
  padding-left: 0;
  padding-right: var(--space-2);
}

html[dir="rtl"] .footer-bottom {
  flex-direction: row;
}

html[dir="rtl"] .footer-legal {
  flex-direction: row;
}

/* ---- Floating Back to Top Button in RTL ---- */
html[dir="rtl"] .back-to-top {
  right: auto !important;
  left: 32px !important;
}

@media (max-width: 768px) {
  html[dir="rtl"] .back-to-top {
    left: 18px !important;
    right: auto !important;
  }
}

/* ---- Floating Call/WhatsApp Bar in RTL ---- */
html[dir="rtl"] .floating-cta {
  direction: rtl;
}

html[dir="rtl"] .floating-cta a {
  direction: rtl;
}