/* ================================================
   RTL.CSS — Arabic Right-to-Left Layout Support
   Apply this when html[dir="rtl"] is set
   ================================================ */

/* ── Base Direction ── */
html[dir="rtl"],
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* ── Typography ── */
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"] span,
html[dir="rtl"] a,
html[dir="rtl"] li {
  direction: rtl;
  text-align: right;
}

/* ── Container & Section ── */
html[dir="rtl"] .container,
html[dir="rtl"] .container-fluid,
html[dir="rtl"] section,
html[dir="rtl"] .card,
html[dir="rtl"] .card-header,
html[dir="rtl"] .card-body,
html[dir="rtl"] .alert {
  direction: rtl;
  text-align: right;
}

/* ── Row — do NOT reverse d-flex globally, only .row ── */
html[dir="rtl"] .row {
  flex-direction: row-reverse;
}

/* ── Feature box flex items (icons + text) ── */
html[dir="rtl"] .d-flex.align-items-md-center {
  flex-direction: row-reverse;
}

html[dir="rtl"] .d-flex.align-items-md-center .flex-shrink-0 {
  margin-left: 12px;
  margin-right: 0;
}

/* ── Hero features bar ── */
html[dir="rtl"] .hero-features .row {
  flex-direction: row-reverse;
}

/* ── Float columns (product features section) ── */
html[dir="rtl"] .float-left {
  float: right !important;
}

html[dir="rtl"] .float-right {
  float: left !important;
}

/* ── Navbar / Primary Menu ── */
html[dir="rtl"] #primary-menu {
  flex-direction: row-reverse;
}

html[dir="rtl"] #primary-menu ul {
  flex-direction: row-reverse;
  padding-right: 0;
}

html[dir="rtl"] #primary-menu li {
  margin-left: 20px;
  margin-right: 0;
}

/* ── Lists ── */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 20px;
  padding-left: 0;
}

/* ── Forms ── */
html[dir="rtl"] .form-control,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .custom-select {
  direction: rtl;
  text-align: right;
}

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

html[dir="rtl"] .form-group label {
  display: block;
  text-align: right;
}

html[dir="rtl"] .custom-control {
  padding-right: 1.5rem;
  padding-left: 0;
}

html[dir="rtl"] .custom-control-input {
  right: 0;
  left: auto;
}

html[dir="rtl"] .custom-control-label {
  padding-right: 8px;
}

html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after {
  right: -1.5rem;
  left: auto;
}

/* ── Buttons ── */
html[dir="rtl"] .btn {
  text-align: center;
}

/* ── Modals ── */
html[dir="rtl"] .modal-header,
html[dir="rtl"] .modal-body {
  text-align: right;
}

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

/* ── Breadcrumb ── */
html[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
  padding-right: 1rem;
  padding-left: 0;
}

/* ── Spacing Utilities — swap left/right ── */
html[dir="rtl"] .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}
html[dir="rtl"] .mr-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

html[dir="rtl"] .pl-2 {
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
}
html[dir="rtl"] .pr-2 {
  padding-right: 0 !important;
  padding-left: 0.5rem !important;
}
html[dir="rtl"] .pl-3 {
  padding-left: 0 !important;
  padding-right: 1rem !important;
}
html[dir="rtl"] .pr-3 {
  padding-right: 0 !important;
  padding-left: 1rem !important;
}
html[dir="rtl"] .pl-4 {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}
html[dir="rtl"] .pr-4 {
  padding-right: 0 !important;
  padding-left: 1.5rem !important;
}
html[dir="rtl"] .pl-lg-5 {
  padding-left: 0 !important;
  padding-right: 3rem !important;
}
html[dir="rtl"] .pl-lg-2 {
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
}

html[dir="rtl"] .ml-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}
html[dir="rtl"] .mr-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}
html[dir="rtl"] .ml-3 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}
html[dir="rtl"] .mr-3 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

html[dir="rtl"] img[style*="margin-left: 15px"] {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

/* ── PRICING TABLE — Large Screen ── */
html[dir="rtl"] .table-price thead.d-block,
html[dir="rtl"] .table-price tbody.d-block {
  direction: rtl;
}

html[dir="rtl"] .table-price thead tr.d-flex,
html[dir="rtl"] .table-price tbody tr.d-flex {
  flex-direction: row-reverse;
}

html[dir="rtl"] .table-price td,
html[dir="rtl"] .table-price th {
  text-align: center;
  border-right: none;
  border-left: 1px solid #dee2e6;
}

html[dir="rtl"] .table-price tr > td:last-child,
html[dir="rtl"] .table-price tr > th:last-child {
  border-left: none;
}

/* First column (feature name) — align text right in RTL */
html[dir="rtl"] .table-price td.col-md-4,
html[dir="rtl"] .table-price td.col-sm-3 {
  text-align: right;
  justify-content: flex-end;
}

/* Price & currency — keep LTR for numbers */
html[dir="rtl"] .table-price .size-21,
html[dir="rtl"] .table-price .lg-para,
html[dir="rtl"] .table-price .sm-para {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ── PRICING TABLE — Mobile ── */
html[dir="rtl"] .table-comparison tbody {
  direction: rtl;
}

html[dir="rtl"] .table-comparison tr {
  direction: rtl;
}

html[dir="rtl"] .table-comparison td,
html[dir="rtl"] .table-comparison th {
  text-align: center;
}

html[dir="rtl"] .table-comparison tr > td:first-child,
html[dir="rtl"] .table-comparison tr > th:first-child {
  text-align: right;
}

html[dir="rtl"] .table-comparison .size-18,
html[dir="rtl"] .table-comparison .lg-para,
html[dir="rtl"] .table-comparison .sm-para {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ── Banner & Sections ── */
html[dir="rtl"] .banner1-mobile-view h2 {
  text-align: right;
}

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

html[dir="rtl"] .fbox-icon {
  margin-left: 12px;
  margin-right: 0;
}

/* ── Contact Section ── */
html[dir="rtl"] .contact-heading,
html[dir="rtl"] .contact-paragraph {
  text-align: right;
}

html[dir="rtl"] .pencil-lg {
  left: auto;
  right: -20px;
}

html[dir="rtl"] .letter-lg {
  right: auto;
  left: -20px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  html[dir="rtl"] #primary-menu li {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  html[dir="rtl"] .table-comparison {
    font-size: 12px;
  }

  html[dir="rtl"] .table-comparison td,
  html[dir="rtl"] .table-comparison th {
    padding: 6px 4px;
  }

  html[dir="rtl"] .float-left,
  html[dir="rtl"] .float-right {
    float: none !important;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* FONT SWITCHING FOR MULTI-LANGUAGE SUPPORT (English & Arabic)        */
/* ═══════════════════════════════════════════════════════════════════ */

/* ── RTL Language Class Styling (Arabic) ── */
body.rtl {
  direction: rtl;
  text-align: right;
  font-family: "Tajawal", "Cairo", sans-serif !important;
}

body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
  font-family: "Cairo", "Tajawal", sans-serif !important;
}

/* ── LTR Language Class Styling (English) ── */
body:not(.rtl) {
  direction: ltr;
  text-align: left;
  font-family: "Poppins", "Roboto", sans-serif !important;
}

body:not(.rtl) h1,
body:not(.rtl) h2,
body:not(.rtl) h3,
body:not(.rtl) h4,
body:not(.rtl) h5,
body:not(.rtl) h6 {
  font-family: "Poppins", "Roboto", sans-serif !important;
}

/* ── Button Font Consistency ── */
body.rtl button,
body.rtl .btn {
  font-family: "Tajawal", "Cairo", sans-serif !important;
}

body:not(.rtl) button,
body:not(.rtl) .btn {
  font-family: "Poppins", "Roboto", sans-serif !important;
}

/* ── Form Labels & Input Font ── */
body.rtl label,
body.rtl input,
body.rtl textarea,
body.rtl select {
  font-family: "Tajawal", "Cairo", sans-serif !important;
}

body:not(.rtl) label,
body:not(.rtl) input,
body:not(.rtl) textarea,
body:not(.rtl) select {
  font-family: "Poppins", "Roboto", sans-serif !important;
}

/* ── Navigation Font ── */
body.rtl nav,
body.rtl #primary-menu {
  font-family: "Tajawal", "Cairo", sans-serif !important;
}

body:not(.rtl) nav,
body:not(.rtl) #primary-menu {
  font-family: "Poppins", "Roboto", sans-serif !important;
}