/* RTL overrides for Arabic. Applied via meta.html when $is_rtl is true.
   Bootstrap 4 doesn't ship an RTL build, so we flip the few directional
   bits the dahabpro template actually uses (alignment, margins, dropdowns,
   ticker direction). */

/* Cairo (Arabic font) is preloaded async via blocks/meta.html when
   $is_rtl is true. A blocking @import here would add ~153 ms to the
   critical path (measured by Lighthouse). */

/* Apply Cairo globally for Arabic, overriding the LTR Inter+Playfair pair. */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] .display-serif,
html[lang="ar"] .navbar-brand,
html[lang="ar"] .brand-tagline,
html[lang="ar"] .section-title,
html[lang="ar"] .news-title,
html[lang="ar"] .hero h1,
html[lang="ar"] .hero-stats .stat-value,
html[lang="ar"] .wallet-summary .total-value,
html[lang="ar"] .form-control,
html[lang="ar"] .btn,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] table {
  font-family: 'Cairo', 'Tahoma', 'Segoe UI', sans-serif !important;
  letter-spacing: 0;
}

body { direction: rtl; text-align: right; }

/* Bootstrap util flips */
.text-right { text-align: left !important; }
.text-left  { text-align: right !important; }
.float-right { float: left !important; }
.float-left  { float: right !important; }
.ml-auto { margin-left: 0 !important; margin-right: auto !important; }
.mr-auto { margin-right: 0 !important; margin-left: auto !important; }

/* Spacing utilities used in the template */
.mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
.mr-2 { margin-right: 0 !important; margin-left: 0.5rem  !important; }
.mr-3 { margin-right: 0 !important; margin-left: 1rem    !important; }
.mr-4 { margin-right: 0 !important; margin-left: 1.5rem  !important; }
.ml-1 { margin-left: 0 !important;  margin-right: 0.25rem !important; }
.ml-2 { margin-left: 0 !important;  margin-right: 0.5rem  !important; }
.ml-3 { margin-left: 0 !important;  margin-right: 1rem    !important; }
.ml-4 { margin-left: 0 !important;  margin-right: 1.5rem  !important; }
.pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
.pr-2 { padding-right: 0 !important; padding-left: 0.5rem  !important; }
.pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
.pl-2 { padding-left: 0 !important; padding-right: 0.5rem  !important; }
.pl-3 { padding-left: 0 !important; padding-right: 1rem    !important; }

/* Border-right / border-left utilities (used by sidebar dividers) */
.border-right { border-right: 0 !important; border-left: 1px solid var(--border) !important; }
.border-left  { border-left:  0 !important; border-right:1px solid var(--border) !important; }

/* Section title underline pinned to the start side */
.section-title::after { left: auto; right: 0; }

/* Vendor logo / icon spacing */
.vendor-logo  { margin-right: 0; margin-left: 10px; }

/* Trend arrows: glyph stays on the start side in both directions */
.trend-arrow.up::before,
.trend-arrow.down::before { margin-right: 0; margin-left: 4px; }

/* Dropdowns flip alignment */
.dropdown-menu       { text-align: right; }
.dropdown-menu-right { right: 0; left: auto; }

/* Ticker scrolls right→left in RTL too — flip the keyframes */
.ticker-track { animation-name: tickerScrollRTL; }
@keyframes tickerScrollRTL {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* Ticker items spacing */
.ticker-item { margin-right: 0; margin-left: 40px; }
.ticker-item .label,
.ticker-item .price,
.ticker-item .change { margin-right: 0; margin-left: 10px; }

/* Brand-bar layout: spot price + CTA hug the start side now */
.brand-bar .text-right { text-align: left !important; }
.brand-bar .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }

/* Forms: align text right in inputs */
.form-control { text-align: right; }
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"] { direction: ltr; text-align: right; }

/* Mobile collapse: nav border-left flip */
@media (max-width: 991.98px) {
  .main-nav .navbar-nav .nav-link {
    border-left: 0;
    border-right: 3px solid transparent;
  }
  .main-nav .navbar-nav .nav-link.active,
  .main-nav .navbar-nav .nav-link:hover {
    border-left-color: transparent;
    border-right-color: var(--gold-1);
  }
}