/**
 * Almgwar Pay — shared RTL presentation (V1.0.0 Launch #1)
 * Relies on html[dir="rtl"|"ltr"] from Lang::dir(). Does not change LTR defaults.
 */

/* —— Technical / copyable values stay LTR in both locales —— */
.ap-ltr-tech,
.ck-ltr-tech,
code.ap-ltr-tech,
code.ck-ltr-tech,
.table .ap-ltr-tech,
input[type="email"],
input[type="url"],
input[name*="wallet"],
input[name*="txid"],
input[name*="hash"],
input[name*="api_key"],
input[name*="license"],
textarea[name*="wallet"] {
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: start;
}

html[dir="rtl"] .ck-ref-num,
html[dir="rtl"] .ck-total-val,
html[dir="rtl"] .ck-addr-code,
html[dir="rtl"] .ck-addr-full,
html[dir="rtl"] .ck-addr-short,
html[dir="rtl"] #walletAddress,
html[dir="rtl"] #paymentReference,
html[dir="rtl"] .ck-critical code {
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: left;
}

/* —— Directional icons only —— */
html[dir="rtl"] .bi-chevron-right,
html[dir="rtl"] .bi-arrow-right,
html[dir="rtl"] .bi-caret-right-fill,
html[dir="rtl"] .bi-arrow-right-short {
  transform: scaleX(-1);
}
html[dir="rtl"] .bi-chevron-left,
html[dir="rtl"] .bi-arrow-left,
html[dir="rtl"] .bi-caret-left-fill,
html[dir="rtl"] .bi-arrow-left-short {
  transform: scaleX(-1);
}

/* —— Shell polish —— */
html[dir="rtl"] .ap-brand-logo-img.me-2,
html[dir="rtl"] .ap-brand .me-2 {
  margin-inline-end: 0.5rem !important;
  margin-inline-start: 0 !important;
}

html[dir="rtl"] .ap-topbar .ms-auto {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}

html[dir="rtl"] .ap-nav-link {
  text-align: start;
}

html[dir="rtl"] .ap-nav-link i {
  margin-inline-end: 0.65rem;
  margin-inline-start: 0;
}

html[dir="rtl"] .ap-page-title,
html[dir="rtl"] .ap-content h1,
html[dir="rtl"] .ap-content h2,
html[dir="rtl"] .ap-content h3,
html[dir="rtl"] .ap-content .card-title {
  text-align: start;
}

html[dir="rtl"] .ap-alert {
  text-align: start;
}

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

html[dir="rtl"] .table th.ap-ltr-tech,
html[dir="rtl"] .table td.ap-ltr-tech,
html[dir="rtl"] .table .text-end.ap-ltr-tech {
  text-align: left;
  direction: ltr;
  unicode-bidi: plaintext;
}

html[dir="rtl"] .form-label,
html[dir="rtl"] .form-text,
html[dir="rtl"] .invalid-feedback,
html[dir="rtl"] .valid-feedback {
  text-align: start;
}

html[dir="rtl"] .modal-header,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .modal-footer {
  text-align: start;
}

html[dir="rtl"] .modal-header .btn-close {
  margin: calc(-0.5 * var(--bs-modal-header-padding-y, 1rem)) auto
    calc(-0.5 * var(--bs-modal-header-padding-y, 1rem))
    calc(-0.5 * var(--bs-modal-header-padding-x, 1rem));
}

html[dir="rtl"] .dropdown-menu-end {
  --bs-position: end;
}

html[dir="rtl"] .pagination {
  direction: ltr; /* keep numeric order 1,2,3 */
  justify-content: center;
}

html[dir="rtl"] .ap-lang-switch a.is-active {
  font-weight: 700;
  text-decoration: underline;
}

/* Checkout toast: physical centering works for both dirs; keep explicit */
html[dir="rtl"] .ck-toast {
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-140%);
}
html[dir="rtl"] .ck-toast.is-show {
  transform: translateX(-50%) translateY(0);
}

html[dir="rtl"] .ck-body {
  font-family: var(--ap-font-ar), "Noto Sans Arabic", system-ui, sans-serif;
}

html[dir="rtl"] .ck-sec-title,
html[dir="rtl"] .ck-sub-title,
html[dir="rtl"] .ck-k,
html[dir="rtl"] .ck-banner-label,
html[dir="rtl"] .ck-banner-hint,
html[dir="rtl"] .ck-tl-text,
html[dir="rtl"] .ck-step strong,
html[dir="rtl"] .ck-step p {
  text-align: start;
}

html[dir="rtl"] .ck-steps {
  text-align: start;
}

/* Avoid accidental overflow on mobile RTL */
html[dir="rtl"] .ap-content,
html[dir="rtl"] .ck-shell {
  overflow-x: clip;
}

@media (max-width: 1023.98px) {
  html[dir="rtl"] .ap-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  html[dir="rtl"] .ap-content,
  html[dir="rtl"] .ap-topbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html[dir="rtl"] .ap-content > * {
    max-width: 100%;
  }

  html[dir="rtl"] .ap-topbar {
    overflow-x: clip;
  }
}