/* Right-to-left (Arabic) adjustments. Every rule is scoped to <html dir="rtl"> except the helpers. */

/* Arabic font (loaded from Google Fonts only in Arabic) */
html[dir="rtl"] body,
html[dir="rtl"] .font-sans,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
  font-family: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Letter spacing breaks the joining of Arabic letters */
html[dir="rtl"] [class*="tracking-"],
html[dir="rtl"] .uppercase {
  letter-spacing: 0 !important;
}

/* Icons that point in the reading direction (chevrons, arrows, log out).
   Uses the separate `scale` property so existing rotate/translate transforms keep working. */
html[dir="rtl"] .rtl-flip {
  scale: -1 1;
}
html[dir="rtl"] i.rtl-flip {
  display: inline-block;
}

/* Inputs take their direction from what is typed (or the placeholder): Arabic reads right-to-left,
   phone numbers, e-mails and "+966..." placeholders stay left-to-right instead of being scrambled */
html[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[dir="rtl"] textarea,
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
  unicode-bidi: plaintext;
}

/* Left-to-right fields (email, phone) still show their Arabic placeholder right-aligned */
html[dir="rtl"] input[dir="ltr"]:placeholder-shown {
  direction: rtl;
}

/* Native select chevrons */
html[dir="rtl"] .custom-select {
  background-position: left 0.5rem center;
}
html[dir="rtl"] .form-select {
  background-position: left 12px center;
}

/* Map legend reads from the right */
html[dir="rtl"] .legend-gradient {
  background: linear-gradient(to left, #e2e8f0, #1f9cd6);
}

/* Food slide-over shadow falls on the other side */
html[dir="rtl"] .modal-right-slide {
  box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1);
}

/* DataTables 1.11 */
html[dir="rtl"] .dataTables_wrapper .dataTables_length,
html[dir="rtl"] .dataTables_wrapper .dataTables_info {
  float: right;
}
html[dir="rtl"] .dataTables_wrapper .dataTables_filter,
html[dir="rtl"] .dataTables_wrapper .dataTables_paginate {
  float: left;
  text-align: left;
}
html[dir="rtl"] .dataTables_wrapper .dataTables_filter input {
  margin-left: 0;
  margin-right: 0.5em;
}
html[dir="rtl"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  margin-left: 0;
  margin-right: 2px;
}
html[dir="rtl"] table.dataTable thead > tr > th.sorting,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_asc,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_desc,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_asc_disabled,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_desc_disabled {
  padding-right: 10px;
  padding-left: 26px;
}
html[dir="rtl"] table.dataTable thead > tr > th.sorting:before,
html[dir="rtl"] table.dataTable thead > tr > th.sorting:after,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_asc:before,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_asc:after,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_desc:before,
html[dir="rtl"] table.dataTable thead > tr > th.sorting_desc:after {
  right: auto;
  left: 10px;
}

/* Select2 search box and selected-option check mark */
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 20px;
}