/* =========================================================
   RobotTrade — RTL Overrides
   Loaded after layout styles when dir="rtl"

   Flex rule: use direction:rtl, NOT row-reverse.
   With direction:rtl, main-start is on the right — so the first
   DOM child sits at the start (right). Trailing CTA arrows that
   come after the label in HTML correctly land after the text
   (on the left). row-reverse double-flips and puts arrows before text.
   ========================================================= */

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

/* ─── Shared: icon + label flex rows ─────────────────── */
html[dir="rtl"] .admin-sidebar .sidebar-brand a,
html[dir="rtl"] .user-sidebar .sidebar-brand a,
html[dir="rtl"] .admin-sidebar .user-pill,
html[dir="rtl"] .user-sidebar .user-pill,
html[dir="rtl"] .admin-sidebar .sidebar-footer .btn-ghost,
html[dir="rtl"] .user-sidebar .sidebar-footer .btn-ghost,
html[dir="rtl"] .lang-dropdown-btn,
html[dir="rtl"] .lang-dropdown-item,
html[dir="rtl"] #adminLangMenu a,
html[dir="rtl"] #adminLangMenu button,
html[dir="rtl"] .mobile-brand,
html[dir="rtl"] .rt-nav .brand,
html[dir="rtl"] .rt-card h3[style*="display: flex"],
html[dir="rtl"] .rt-card h4[style*="display: flex"],
html[dir="rtl"] .rt-card > div[style*="display: flex"][style*="align-items: center"]:not([style*="space-between"]):not(.referral-code-box),
html[dir="rtl"] label[style*="display: flex"][style*="align-items: center"] {
  flex-direction: row;
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .referral-code-box {
  flex-direction: row !important;
  direction: rtl !important;
}

/* Buttons / CTAs: keep DOM order (label then trailing arrow).
   direction:rtl places the arrow at inline-end = after the text. */
html[dir="rtl"] .btn-gold,
html[dir="rtl"] .btn-ghost,
html[dir="rtl"] .btn-emerald,
html[dir="rtl"] .btn-blue,
html[dir="rtl"] .rt-plan-cta,
html[dir="rtl"] a.btn-gold,
html[dir="rtl"] a.btn-ghost,
html[dir="rtl"] a.btn-emerald,
html[dir="rtl"] button.btn-gold,
html[dir="rtl"] button.btn-ghost,
html[dir="rtl"] button.btn-emerald {
  flex-direction: row !important;
  direction: rtl;
  text-align: right;
}

/* Compact copy/action buttons: icon+label centered, same order rule */
html[dir="rtl"] .plisio-url-copy .btn-gold,
html[dir="rtl"] .plisio-url-copy .js-copy-plisio-url,
html[dir="rtl"] .wallet-toolbar .btn-ghost {
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  direction: rtl;
}

/* space-between rows: mirror start/end (stats, list rows) */
html[dir="rtl"] div[style*="justify-content: space-between"][style*="align-items: center"],
html[dir="rtl"] .rt-card div[style*="justify-content: space-between"][style*="align-items: center"] {
  direction: rtl;
}

/* ─── Admin & User panel layout (RTL sidebar on the right) ─
   With html[dir=rtl], flex-direction:row already places the first
   child (sidebar) on the right. Do NOT use row-reverse here. */
html[dir="rtl"] .admin-layout,
html[dir="rtl"] .user-layout {
  flex-direction: row !important;
  direction: rtl;
}

html[dir="rtl"] .admin-sidebar,
html[dir="rtl"] .user-sidebar {
  direction: rtl;
  border-inline-end: none;
  border-inline-start: 1px solid var(--border);
}

html[dir="rtl"] .admin-sidebar .nav-list,
html[dir="rtl"] .user-sidebar .nav-list {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .admin-sidebar .sidebar-brand,
html[dir="rtl"] .user-sidebar .sidebar-brand {
  flex-direction: row;
  direction: rtl;
}

html[dir="rtl"] .admin-sidebar .nav-item a,
html[dir="rtl"] .user-sidebar .nav-item a {
  flex-direction: row; /* icon is first in HTML; with direction:rtl icon appears on the right */
  direction: rtl;
  justify-content: flex-start;
  text-align: right;
  gap: 0.75rem;
}

html[dir="rtl"] .admin-main,
html[dir="rtl"] .user-main {
  direction: rtl;
  min-width: 0;
  text-align: right;
}

html[dir="rtl"] .admin-sidebar .nav-item a i,
html[dir="rtl"] .user-sidebar .nav-item a i {
  flex-shrink: 0;
}

html[dir="rtl"] .admin-sidebar .sidebar-badge {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

html[dir="rtl"] .admin-sidebar .user-pill .info,
html[dir="rtl"] .user-sidebar .user-pill .info {
  text-align: right;
}

/* Desktop RTL: sidebar on the right — kept for clarity; main rule is above */
/* Mobile: off-canvas drawer from the right edge in RTL */
@media (max-width: 992px) {
  html[dir="rtl"] .admin-layout,
  html[dir="rtl"] .user-layout {
    display: block !important;
    flex-direction: unset !important;
    overflow-x: hidden;
  }

  html[dir="rtl"] .admin-sidebar,
  html[dir="rtl"] .user-sidebar {
    left: auto !important;
    right: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    transform: translate3d(110%, 0, 0) !important;
    visibility: hidden;
    pointer-events: none;
  }

  html[dir="rtl"] .admin-sidebar.show,
  html[dir="rtl"] .user-sidebar.show {
    left: auto !important;
    right: 0 !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45) !important;
  }

  html[dir="rtl"] .admin-main,
  html[dir="rtl"] .user-main {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─── Topbars ────────────────────────────────────────── */
html[dir="rtl"] .admin-topbar,
html[dir="rtl"] .user-topbar {
  direction: rtl;
}

html[dir="rtl"] .admin-topbar-start,
html[dir="rtl"] .user-topbar-start,
html[dir="rtl"] .admin-topbar-actions {
  direction: rtl;
}

html[dir="rtl"] .admin-topbar h1,
html[dir="rtl"] .user-topbar h1 {
  text-align: right;
}

html[dir="rtl"] .user-topbar .user-info {
  flex-direction: row-reverse;
  direction: rtl;
}

/* ─── Language Dropdowns ─────────────────────────────── */
/* Do NOT flip start/end in RTL — panels keep the trigger near the
   viewport edge, so inset-inline-end keeps the menu on-screen. */
html[dir="rtl"] .lang-dropdown-menu,
html[dir="rtl"] #adminLangMenu,
html[dir="rtl"] #userLangDropdown .lang-dropdown-menu {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  max-width: min(260px, calc(100vw - 1.25rem));
}

/* ─── Frontend Navigation ────────────────────────────── */
html[dir="rtl"] .rt-nav .rt-nav-inner {
  direction: rtl;
}

html[dir="rtl"] .rt-nav .nav-links,
html[dir="rtl"] .rt-nav .nav-links.open {
  direction: rtl;
}

html[dir="rtl"] .rt-nav .nav-links a {
  direction: rtl;
}

html[dir="rtl"] .rt-nav .nav-actions {
  direction: rtl;
  justify-content: flex-end;
}

@media (max-width: 992px) {
  html[dir="rtl"] .rt-nav .rt-nav-inner {
    direction: rtl;
  }

  html[dir="rtl"] .rt-nav .nav-actions {
    justify-content: flex-end;
  }
}

/* ─── Buttons with icons ─────────────────────────────── */
/* Do NOT mirror fa-arrow-left/right here: templates already pick
   left vs right via isRtl(). A scaleX flip would reverse them again.
   Trailing CTA icons must stay after the label (see btn rules above). */

/* ─── Forms ──────────────────────────────────────────── */
html[dir="rtl"] .form-group label,
html[dir="rtl"] .form-input,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  text-align: right;
  direction: rtl;
}

/* Select chevron: keep clear gap from edge in RTL */
html[dir="rtl"] select,
html[dir="rtl"] select.form-select,
html[dir="rtl"] select.settings-select,
html[dir="rtl"] select.rt-filter-select,
html[dir="rtl"] select.lottery-input {
  background-position: left 1rem center !important;
  padding-left: 2.75rem !important;
  padding-right: 0.85rem !important;
}

html[dir="rtl"] input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Phone input: keep physical LTR flex so country prefix stays on the LEFT in RTL */
html[dir="rtl"] .rt-phone .rt-phone__control,
html[dir="rtl"] .rt-phone .rt-phone__control.form-input,
html[dir="rtl"] .rt-phone .rt-phone__control.profile-input,
html[dir="rtl"] .rt-phone .rt-phone__national,
html[dir="rtl"] .rt-phone input.rt-phone__national {
  direction: ltr !important;
  text-align: left !important;
}
html[dir="rtl"] .rt-phone .rt-phone__control {
  flex-direction: row !important;
}
html[dir="rtl"] input[type="number"]::-webkit-outer-spin-button,
html[dir="rtl"] input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  margin: 0 !important;
}

/* Checkbox first in HTML → with direction:rtl it sits on the start (right). */
html[dir="rtl"] .form-check {
  direction: rtl;
  flex-direction: row;
  justify-content: flex-start;
  text-align: right;
}

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

html[dir="rtl"] .field-error,
html[dir="rtl"] .field-hint,
html[dir="rtl"] .field-note {
  text-align: right;
}

/* Input + button rows (referral copy, filters, etc.) — direction alone is enough */
html[dir="rtl"] .rt-card form[style*="display: flex"],
html[dir="rtl"] .rt-card div[style*="display: flex"][style*="gap"]:not([style*="space-between"]) {
  direction: rtl;
}

/* Filter/toolbars: keep natural RTL flow without double-reversing */
html[dir="rtl"] .rt-card form[method="GET"] {
  direction: rtl;
  flex-direction: row;
}

/* Panel tables are center-aligned in every language (see frontend.css). */
html[dir="rtl"] table {
  direction: rtl;
}

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

/* Keep explicitly centered headers/cells centered in every language */
html[dir="rtl"] table th[style*="center"],
html[dir="rtl"] table td[style*="center"],
html[dir="rtl"] table .col-center,
html[dir="rtl"] table .text-center,
html[dir="rtl"] .plans-admin-table .col-center {
  text-align: center !important;
}

/* Remap legacy text-align:left to logical start in RTL */
html[dir="rtl"] table th[style*="text-align: left"],
html[dir="rtl"] table th[style*="text-align:left"],
html[dir="rtl"] table td[style*="text-align: left"],
html[dir="rtl"] table td[style*="text-align:left"] {
  text-align: start !important;
}

/* ─── Cards & content ────────────────────────────────── */
html[dir="rtl"] .rt-card,
html[dir="rtl"] .rt-card h3,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .plan-card,
html[dir="rtl"] .step-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .auth-card {
  text-align: right;
  direction: rtl;
}

/* Card headings with icon (non-flex) */
html[dir="rtl"] .rt-card h3,
html[dir="rtl"] .rt-card h4 {
  direction: rtl;
  text-align: right;
}

/* ─── Hero & sections ────────────────────────────────── */
html[dir="rtl"] .hero-grid,
html[dir="rtl"] .hero-slide-inner,
html[dir="rtl"] .hero-slide-text {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .hero-content p {
  text-align: right;
}

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

html[dir="rtl"] .features-header,
html[dir="rtl"] .features-header p {
  text-align: right;
}

html[dir="rtl"] .stats-grid,
html[dir="rtl"] .security-bar-grid,
html[dir="rtl"] .footer-grid {
  direction: rtl;
}

/* ─── FAQ ────────────────────────────────────────────── */
html[dir="rtl"] .faq-question {
  direction: rtl;
  text-align: right;
  flex-direction: row;
}

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

html[dir="rtl"] .faq-answer,
html[dir="rtl"] .faq-answer-inner {
  text-align: right;
  direction: rtl;
}

/* ─── Modals & toasts ────────────────────────────────── */
html[dir="rtl"] .rt-modal-header,
html[dir="rtl"] .rt-modal-footer,
html[dir="rtl"] .rt-modal-close {
  direction: rtl;
}

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

html[dir="rtl"] .rt-toast {
  direction: rtl;
  border-left: none;
  border-right-width: 3px;
  border-right-style: solid;
}

html[dir="rtl"] .rt-toast.success { border-right-color: var(--emerald); }
html[dir="rtl"] .rt-toast.error { border-right-color: #ef4444; }
html[dir="rtl"] .rt-toast.warning { border-right-color: #f59e0b; }
html[dir="rtl"] .rt-toast.info { border-right-color: var(--blue); }

/* ─── Plan cards (frontend) ──────────────────────────── */
html[dir="rtl"] .rt-plan-card,
html[dir="rtl"] .rt-plan-meta,
html[dir="rtl"] .rt-plan-features {
  direction: rtl;
  text-align: right;
}

/*
 * Badge corners stay fixed in both directions:
 * - Featured/VIP → inline-start (LTR left / RTL right)
 * - Duration     → inline-end   (LTR right / RTL left)
 * Never swap duration into the VIP slot when VIP is missing.
 */
html[dir="rtl"] .rt-plan-featured-badge {
  inset-inline-start: 0.85rem;
  inset-inline-end: auto;
}

html[dir="rtl"] .rt-plan-duration-badge {
  inset-inline-end: 0.85rem;
  inset-inline-start: auto;
}

/* Keep signs, digits, and units in natural LTR order inside RTL cards */
html[dir="rtl"] .is-num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ─── Bottom nav ─────────────────────────────────────── */
html[dir="rtl"] .rt-bottom-nav .bottom-nav-list {
  direction: rtl;
  flex-direction: row-reverse;
}

/* ─── Tabs & pagination ──────────────────────────────── */
html[dir="rtl"] .rt-tabs,
html[dir="rtl"] .nav-tabs {
  direction: rtl;
  flex-direction: row-reverse;
}

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

/* ─── 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 {
  font-family: var(--font-heading, 'Sora', 'Vazirmatn', sans-serif);
}

html[dir="rtl"] .admin-topbar h1,
html[dir="rtl"] .user-topbar h1,
html[dir="rtl"] .rt-card h2,
html[dir="rtl"] .rt-card h3,
html[dir="rtl"] .rt-card h4,
html[dir="rtl"] .rt-card h5 {
  text-align: right;
}

/* Centered landing section titles stay centered in RTL */
html[dir="rtl"] .lp-section-head,
html[dir="rtl"] .lp-section-head h2,
html[dir="rtl"] .lp-section-head .display-lg,
html[dir="rtl"] .lp-section-head p,
html[dir="rtl"] .lp-cta-content,
html[dir="rtl"] .lp-cta-content h2,
html[dir="rtl"] .lp-cta-content p,
html[dir="rtl"] .lp-cta-inner {
  text-align: center;
}

/* ─── Bootstrap margin utilities flip ────────────────── */
html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }

html[dir="rtl"] i[style*="margin-right"] {
  margin-right: 0 !important;
  margin-left: 0.5rem;
}

/* ─── Admin settings tabs ────────────────────────────── */
html[dir="rtl"] .nav-tabs .nav-item .nav-link {
  direction: rtl;
}

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

/* ─── Lottery admin preview ──────────────────────────── */
html[dir="rtl"] .lottery-preview-grid,
html[dir="rtl"] .lottery-core-grid,
html[dir="rtl"] .lottery-stats,
html[dir="rtl"] .lottery-field,
html[dir="rtl"] .lottery-draw-form {
  direction: rtl;
  text-align: right;
}

/* ─── Mega hero (frontend) ───────────────────────────── */
html[dir="rtl"] .mega-hero-grid {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .mega-hero-actions {
  direction: rtl;
}

html[dir="rtl"] .mega-hero-actions .btn-gold,
html[dir="rtl"] .mega-hero-actions .btn-ghost {
  flex-direction: row !important;
}

html[dir="rtl"] .bento-grid {
  direction: rtl;
}

html[dir="rtl"] .live-stats {
  direction: rtl;
}

html[dir="rtl"] .live-stats {
  direction: rtl;
}

html[dir="rtl"] .lp-section-head,
html[dir="rtl"] .lp-referral-grid,
html[dir="rtl"] .lp-timeline,
html[dir="rtl"] .lp-trust-grid,
html[dir="rtl"] .lp-testimonials-grid,
html[dir="rtl"] .lp-faq-wrap,
html[dir="rtl"] .lp-stats-grid,
html[dir="rtl"] .lp-footer-grid {
  direction: rtl;
}

html[dir="rtl"] .hero-ticker-item {
  direction: rtl;
}

html[dir="rtl"] .lp-faq-side {
  text-align: right;
}

/* Icon first in HTML → with direction:rtl it sits on the right (start).
   Do NOT use row-reverse here — that double-flips and puts the icon on the left. */
html[dir="rtl"] .lp-stat-card {
  direction: rtl;
  text-align: right;
  justify-content: flex-start;
}

html[dir="rtl"] .lp-stat-card .lp-stat-body,
html[dir="rtl"] .lp-stat-card > div:not(.lp-stat-icon) {
  text-align: right;
  flex: 1;
  min-width: 0;
}

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

@media (max-width: 992px) {
  html[dir="rtl"] .mega-hero-grid {
    text-align: center;
  }
}

/* ─── Stat / info rows in user panel ─────────────────── */
html[dir="rtl"] .stat-row,
html[dir="rtl"] .wallet-stat,
html[dir="rtl"] .tx-stat {
  direction: rtl;
  flex-direction: row-reverse;
}