/* ============================================================
   Nomomail — rtl.css
   RTL (Right-to-Left) layout overrides for Arabic
   ============================================================ */

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

/* ── Navigation: reverse flex order ── */
[dir="rtl"] nav.site-nav {
  flex-direction: row-reverse;
}

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

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

/* ── Main 3-column layout: reverse column order ── */
[dir="rtl"] .main-content {
  flex-direction: row-reverse;
}

/* ── Input group: flip border-radius and order ── */
[dir="rtl"] .input-group {
  flex-direction: row-reverse;
}

/* In RTL: input is on the LEFT visually, so rounded on left side */
[dir="rtl"] .inbox-input {
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  border-right: none;
  border-left: 2px solid var(--color-secondary);
  text-align: right;
}

[dir="rtl"] .inbox-input:focus {
  border-left-color: var(--color-primary);
}

/* In RTL: button is on the RIGHT visually, so rounded on right side */
[dir="rtl"] .submit-btn {
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ── Feature links: reverse icon + text order ── */
[dir="rtl"] .feature-link {
  flex-direction: row-reverse;
}

/* ── Info card feature list ── */
[dir="rtl"] .feature-list li {
  flex-direction: row-reverse;
}

/* ── Address meta in inbox ── */
[dir="rtl"] .address-meta {
  flex-direction: row-reverse;
}

/* ── Toolbar in inbox ── */
[dir="rtl"] .toolbar {
  flex-direction: row-reverse;
}

/* ── Email item rows ── */
[dir="rtl"] .email-item {
  flex-direction: row-reverse;
  border-left: none;
  border-right: 3px solid transparent;
}

[dir="rtl"] .email-item.active {
  border-right-color: var(--color-primary);
  border-left: none;
}

/* ── Email meta rows ── */
[dir="rtl"] .email-meta-row {
  flex-direction: row-reverse;
}

/* ── Pagination controls ── */
[dir="rtl"] .pagination-controls {
  flex-direction: row-reverse;
}

/* ── Reading pane header ── */
[dir="rtl"] .email-header > div {
  flex-direction: row-reverse;
}

/* ── Domain card ── */
[dir="rtl"] .domain-card {
  flex-direction: row-reverse;
}

/* ── Contact item ── */
[dir="rtl"] .contact-item {
  flex-direction: row-reverse;
}

/* ── Info banner ── */
[dir="rtl"] .info-banner {
  flex-direction: row-reverse;
}

/* ── Note box ── */
[dir="rtl"] .note-box {
  flex-direction: row-reverse;
}

/* ── Highlight box ── */
[dir="rtl"] .highlight-box {
  flex-direction: row-reverse;
}

/* ── Policy section ── */
[dir="rtl"] .policy-section h2 {
  flex-direction: row-reverse;
}

/* ── Directional icons: mirror arrows/chevrons ── */
/* submit button arrow should NOT flip in RTL — it always points forward */

[dir="rtl"] #mobileBackBtn .material-icons-outlined {
  transform: scaleX(-1);
}

/* ── Toast: appear on left side in RTL ── */
[dir="rtl"] #toast-container {
  right: unset;
  left: 1.5rem;
}

/* ── App layout RTL: sidebar on right, reading pane on left ── */
[dir="rtl"] .app-layout {
  flex-direction: row-reverse;
}

/* ── Sidebar border ── */
[dir="rtl"] #sidebar {
  border-right: unset;
  border-left: 1px solid var(--color-border);
}

/* ── Text inputs ── */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] textarea {
  text-align: right;
}

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

/* ── Nav brand ── */
[dir="rtl"] .nav-brand {
  flex-direction: row-reverse;
}

/* ── Address header display ── */
[dir="rtl"] .address-display {
  text-align: right;
}

/* ── Desc card and info box ── */
[dir="rtl"] .desc-card,
[dir="rtl"] .info-box {
  text-align: right;
}

[dir="rtl"] .info-box ul {
  padding-left: 0;
  padding-right: var(--space-5);
}

[dir="rtl"] .policy-section ul {
  padding-left: 0;
  padding-right: var(--space-5);
}