/* =========================================================
   El3omda - RTL overrides (loaded only when dir="rtl")
   ========================================================= */

html[dir="rtl"] body,
body.is-rtl {
    font-family: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Tahoma", "Arial", sans-serif;
}

/* the home / shop "see all →" arrow needs to be flipped */
html[dir="rtl"] .home-arrow::before { content: "←"; }

/* WhatsApp floating button: anchor to the start side */
html[dir="rtl"] .wa-float {
    right: auto;
    left: 18px;
}

/* Sidebar slides in from the right in RTL */
html[dir="rtl"] .admin-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
}
html[dir="rtl"] .admin-sidebar.open {
    transform: translateX(0);
}
@media (min-width: 1024px) {
    html[dir="rtl"] .admin-sidebar { transform: translateX(0); }
    html[dir="rtl"] .admin-content { padding-left: 0; padding-right: 240px; }
}

/* mobile nav drops down full-width — keep behaviour, but text-align right */
html[dir="rtl"] .nav-links a { text-align: right; }

/* Tables - make first column align with start */
html[dir="rtl"] .table th,
html[dir="rtl"] .table td { text-align: right; }

/* Generic "→" arrows in copy: use the left-pointing arrow */
html[dir="rtl"] .link-rev::after { content: " ←"; }

/* Form labels stack the same; ensure inputs don't break alignment */
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea { text-align: right; }
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] { text-align: left; direction: ltr; }

/* Numeric / Latin codes display LTR even inside RTL */
html[dir="rtl"] code,
html[dir="rtl"] .price,
html[dir="rtl"] .price-main,
html[dir="rtl"] .price-rent {
    direction: ltr;
    unicode-bidi: embed;
}

/* Language switcher active state */
.lang-switch { display: inline-flex; gap: 6px; align-items: center; }
.lang-switch .lang-link {
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: inherit;
    opacity: .75;
}
.lang-switch .lang-link:hover { opacity: 1; }
.lang-switch .lang-link.is-active {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
    opacity: 1;
}