/**
 * Arabic RTL Support Stylesheet
 * This file provides RTL (Right-to-Left) styling for Arabic language support
 * Apply this stylesheet when lang="ar" or dir="rtl" is set
 */

/* Root variables for RTL */
html[lang^="ar"],
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[lang^="ar"] body,
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* General RTL adjustments */
html[lang^="ar"] .logo,
html[dir="rtl"] .logo {
  margin-right: 0;
  margin-left: auto;
}

/* Header RTL */
html[lang^="ar"] .header .logo img,
html[dir="rtl"] .header .logo img {
  margin-right: 0;
  margin-left: 6px;
}

/* Navigation RTL */
html[lang^="ar"] .navbar>ul>li,
html[dir="rtl"] .navbar>ul>li {
  padding: 10px 28px 10px 0;
}

html[lang^="ar"] .navbar a i,
html[dir="rtl"] .navbar a i {
  margin-left: 0;
  margin-right: 5px;
}

html[lang^="ar"] .navbar .dropdown ul,
html[dir="rtl"] .navbar .dropdown ul {
  left: auto;
  right: 28px;
}

/* Mobile Navigation RTL */
@media (max-width: 1279px) {
  html[lang^="ar"] .navbar,
  html[dir="rtl"] .navbar {
    right: auto;
    left: -100%;
  }

  html[lang^="ar"] .navbar ul,
  html[dir="rtl"] .navbar ul {
    list-style: none;
  }

  html[lang^="ar"] .navbar a i,
  html[dir="rtl"] .navbar a i {
    margin-left: 0;
    margin-right: 5px;
  }

  html[lang^="ar"] .navbar .dropdown ul,
  html[dir="rtl"] .navbar .dropdown ul {
    margin: 0;
    margin-right: 0;
    margin-left: 0;
  }

  html[lang^="ar"] .navbar a::before,
  html[dir="rtl"] .navbar a::before {
    left: auto;
    right: 0;
  }

  html[lang^="ar"] .navbar a:hover,
  html[dir="rtl"] .navbar a:hover {
    padding-left: 24px;
    padding-right: 28px;
  }

  html[lang^="ar"] .navbar .dropdown ul a,
  html[dir="rtl"] .navbar .dropdown ul a {
    padding: 12px 44px 12px 24px;
  }

  html[lang^="ar"] .navbar .dropdown ul a:hover,
  html[dir="rtl"] .navbar .dropdown ul a:hover {
    padding-left: 24px;
    padding-right: 48px;
  }

  /* Show navbar when mobile nav is active (RTL) */
  html[lang^="ar"] .mobile-nav-active .navbar,
  html[dir="rtl"] .mobile-nav-active .navbar {
    left: 0;
  }

  /* Fix mobile nav hide button position for RTL */
  html[lang^="ar"] .mobile-nav-hide,
  html[dir="rtl"] .mobile-nav-hide {
    right: auto;
    left: 20px;
  }

  /* Mobile nav show icon position for RTL */
  html[lang^="ar"] .mobile-nav-show,
  html[dir="rtl"] .mobile-nav-show {
    padding-left: 10px;
    padding-right: 0;
  }
}

/* Section Headers RTL */
html[lang^="ar"] .section-header,
html[dir="rtl"] .section-header {
  text-align: center !important;
}

html[lang^="ar"] .section-header h2,
html[dir="rtl"] .section-header h2 {
  display: inline-block;
  margin: 0 auto !important;
  text-align: center !important;
}

html[lang^="ar"] .section-header span,
html[dir="rtl"] .section-header span,
html[lang^="ar"] .section-header p,
html[dir="rtl"] .section-header p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html[lang^="ar"] .section-header h2:before,
html[dir="rtl"] .section-header h2:before {
  margin: 0 0 10px 15px !important;
}

html[lang^="ar"] .section-header h2:after,
html[dir="rtl"] .section-header h2:after {
  margin: 0 15px 10px 0 !important;
}

/* Breadcrumbs RTL */
html[lang^="ar"] .breadcrumbs ol,
html[dir="rtl"] .breadcrumbs ol {
  flex-direction: row-reverse;
}

html[lang^="ar"] .breadcrumbs ol li+li,
html[dir="rtl"] .breadcrumbs ol li+li {
  padding-left: 0;
  padding-right: 10px;
}

html[lang^="ar"] .breadcrumbs ol li+li::before,
html[dir="rtl"] .breadcrumbs ol li+li::before {
  padding-right: 0;
  padding-left: 10px;
}

/* Scroll top button RTL */
html[lang^="ar"] .scroll-top,
html[dir="rtl"] .scroll-top {
  right: auto;
  left: 15px;
}

/* Hero section RTL */
html[lang^="ar"] .hero .info .social-links a,
html[dir="rtl"] .hero .info .social-links a {
  margin: 0 5px 0 0;
}

/* Cards and boxes RTL */
html[lang^="ar"] .card,
html[dir="rtl"] .card {
  text-align: right;
}

/* Button and form adjustments */
html[lang^="ar"] .btn,
html[dir="rtl"] .btn {
  text-align: center;
}

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

/* Input placeholders RTL */
html[lang^="ar"] input::placeholder,
html[dir="rtl"] input::placeholder {
  text-align: right;
}

html[lang^="ar"] textarea::placeholder,
html[dir="rtl"] textarea::placeholder {
  text-align: right;
}

/* Float adjustments RTL */
html[lang^="ar"] .float-start,
html[dir="rtl"] .float-start {
  float: right !important;
}

html[lang^="ar"] .float-end,
html[dir="rtl"] .float-end {
  float: left !important;
}

/* Margin adjustments RTL */
html[lang^="ar"] .ms-auto,
html[dir="rtl"] .ms-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

html[lang^="ar"] .me-auto,
html[dir="rtl"] .me-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}

html[lang^="ar"] .ps-0,
html[dir="rtl"] .ps-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html[lang^="ar"] .pe-0,
html[dir="rtl"] .pe-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* List items RTL */
html[lang^="ar"] ul,
html[dir="rtl"] ul {
  text-align: right;
}

html[lang^="ar"] ol,
html[dir="rtl"] ol {
  text-align: right;
}

/* Dropdown indicators RTL */
html[lang^="ar"] .dropdown-indicator,
html[dir="rtl"] .dropdown-indicator {
  transform: rotate(0deg);
}

/* Team member cards RTL */
html[lang^="ar"] .team-member .member-img,
html[dir="rtl"] .team-member .member-img {
  text-align: center;
}

/* Service items RTL */
html[lang^="ar"] .service-item,
html[dir="rtl"] .service-item {
  text-align: right;
}

html[lang^="ar"] .service-item .icon,
html[dir="rtl"] .service-item .icon {
  margin-left: 0;
  margin-right: 15px;
}

/* Portfolio/Projects RTL */
html[lang^="ar"] .portfolio-item,
html[dir="rtl"] .portfolio-item {
  text-align: right;
}

/* Testimonials RTL */
html[lang^="ar"] .testimonials-item,
html[dir="rtl"] .testimonials-item {
  text-align: right;
}

/* Footer RTL */
html[lang^="ar"] footer,
html[dir="rtl"] footer {
  text-align: right;
}

html[lang^="ar"] .footer-top .footer-info,
html[dir="rtl"] .footer-top .footer-info {
  text-align: right;
}

/* Icon adjustments for RTL */
html[lang^="ar"] .icon,
html[dir="rtl"] .icon {
  display: inline-block;
}

/* Flex adjustments for RTL */
html[lang^="ar"] .d-flex,
html[dir="rtl"] .d-flex {
  direction: rtl;
}

html[lang^="ar"] .flex-row-reverse,
html[dir="rtl"] .flex-row-reverse {
  flex-direction: row;
}

html[lang^="ar"] .flex-row,
html[dir="rtl"] .flex-row {
  flex-direction: row-reverse;
}

/* Grid adjustments RTL */
html[lang^="ar"] .row,
html[dir="rtl"] .row {
  direction: rtl;
}

/* Transform icons that point left/right */
html[lang^="ar"] .bi-chevron-left,
html[dir="rtl"] .bi-chevron-left {
  transform: scaleX(-1);
}

html[lang^="ar"] .bi-chevron-right,
html[dir="rtl"] .bi-chevron-right {
  transform: scaleX(-1);
}

html[lang^="ar"] .bi-arrow-left,
html[dir="rtl"] .bi-arrow-left {
  transform: scaleX(-1);
}

html[lang^="ar"] .bi-arrow-right,
html[dir="rtl"] .bi-arrow-right {
  transform: scaleX(-1);
}

/* Form elements RTL positioning */
html[lang^="ar"] .input-group,
html[dir="rtl"] .input-group {
  direction: rtl;
}

html[lang^="ar"] .input-group .input-group-text,
html[dir="rtl"] .input-group .input-group-text {
  text-align: right;
}

/* Pagination RTL */
html[lang^="ar"] .pagination,
html[dir="rtl"] .pagination {
  direction: rtl;
}

/* Modal RTL */
html[lang^="ar"] .modal-header,
html[dir="rtl"] .modal-header {
  text-align: right;
}

html[lang^="ar"] .modal-body,
html[dir="rtl"] .modal-body {
  text-align: right;
}

/* Tables RTL */
html[lang^="ar"] table,
html[dir="rtl"] table {
  text-align: right;
}

html[lang^="ar"] table th,
html[dir="rtl"] table th {
  text-align: right;
}

html[lang^="ar"] table td,
html[dir="rtl"] table td {
  text-align: right;
}

/* Alert boxes RTL */
html[lang^="ar"] .alert,
html[dir="rtl"] .alert {
  text-align: right;
  direction: rtl;
}

/* Badge positioning RTL */
html[lang^="ar"] .badge,
html[dir="rtl"] .badge {
  margin-left: 5px;
  margin-right: 0;
}

/* Tooltip RTL adjustments */
html[lang^="ar"] .tooltip,
html[dir="rtl"] .tooltip {
  text-align: right;
}

/* Popover RTL adjustments */
html[lang^="ar"] .popover,
html[dir="rtl"] .popover {
  text-align: right;
}

/* Blockquote RTL */
html[lang^="ar"] blockquote,
html[dir="rtl"] blockquote {
  border-left: none;
  border-right: 4px solid #dee2e6;
  padding-left: 0;
  padding-right: 15px;
  margin-right: 0;
  margin-left: auto;
}

/* Code and pre RTL */
html[lang^="ar"] pre,
html[dir="rtl"] pre {
  text-align: left; /* Code should remain LTR */
  direction: ltr;
}

html[lang^="ar"] code,
html[dir="rtl"] code {
  text-align: left; /* Code should remain LTR */
  direction: ltr;
}

/* Font stack for Arabic */
html[lang^="ar"] {
  --font-default: "Segoe UI", -apple-system, BlinkMacSystemFont, "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-secondary: "Work Sans", sans-serif;
}

/* Media query adjustments for mobile RTL */
@media (max-width: 768px) {
  html[lang^="ar"] .mobile-nav-toggle,
  html[dir="rtl"] .mobile-nav-toggle {
    float: left;
  }

  html[lang^="ar"] .header .logo,
  html[dir="rtl"] .header .logo {
    float: right;
  }
}