/* ===========================================
   RTL Stylesheet — Arabic Language Support
   Right-to-Left (RTL) specific styles
   Uses CSS logical properties for clean,
   maintenance-free bidirectional support.
   =========================================== */

/* ── Global text direction ── */
body {
    text-align: start;
}

/* ── Header ── */
.header-inner {
    direction: rtl;
}

/* Logo pushed to inline-start (right in RTL) */
.logo {
    margin-inline-end: auto;
    margin-inline-start: 0;
}

/* Cart badge — inline-start side in RTL */
.cart-badge {
    inset-inline-end: auto;
    inset-inline-start: -10px;
}

/* Announce bar text */
.announce-text {
    direction: rtl;
}

/* ── Mobile drawer — slides from right in RTL (handled via CSS in style.css) ── */
/* transform: translateX(105%) set in [dir="rtl"] .mob-drawer in style.css */
.mob-drawer {
    border-inline-start: 1px solid var(--border-accent);
    border-inline-end: none;
}

/* ── Navigation ── */
.main-nav {
    direction: rtl;
}

.header-actions {
    direction: rtl;
}

/* ── Layout containers ── */
.product-detail {
    direction: rtl;
}

.checkout-grid {
    direction: rtl;
}

.footer-inner {
    direction: rtl;
}

/* ── Cart / Order summary ── */
.cart-summary {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

.order-summary {
    margin-inline-end: auto;
    margin-inline-start: 0;
}

.cart-table th,
.cart-table td {
    text-align: start;
}

.cart-table td.product-col {
    direction: rtl;
    justify-content: flex-start;
}

/* ── Forms ── */
.form-group,
.form-group label {
    text-align: start;
}

.qty-row {
    direction: rtl;
}

:root[dir="rtl"] input,
:root[dir="rtl"] textarea,
:root[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* ── Data tables ── */
.data-table th,
.data-table td {
    text-align: start;
}

/* ── Flash messages ── */
.flash {
    direction: rtl;
}

/* ── Section heading / filter bar ── */
.section-heading {
    direction: rtl;
}

.filter-bar {
    justify-content: flex-start; /* flex-start = right side in RTL */
}

.action-group {
    direction: rtl;
}

/* ── Blog ── */
.blog-grid {
    direction: rtl;
}

.blog-card {
    text-align: start;
}

.blog-card .btn {
    align-self: flex-end;
}

/* ── Post content ── */
.post-body,
.post-body h1,
.post-body h2 {
    text-align: start;
}

/* ── Product grid ── */
.product-grid {
    direction: rtl;
}

/* ── Auth pages ── */
.auth-page {
    text-align: start;
}

.auth-page .alt-link {
    text-align: center;
}

/* ── Pagination ── */
.pagination {
    justify-content: center;
}

/* ── Footer ── */
.footer-col {
    text-align: start;
}

.footer-col ul {
    align-items: flex-end;
}

/* Footer column visual order reversed for RTL */
.footer-col:first-child  { order: 4; }
.footer-col:nth-child(2) { order: 3; }
.footer-col:nth-child(3) { order: 2; }
.footer-col:nth-child(4) { order: 1; }

/* ── Admin RTL layout — desktop ── */
.admin-layout {
    grid-template-columns: 1fr 240px;
}

.admin-sidebar {
    order: 2;
    border-inline-start: 1px solid rgba(255, 255, 255, .1);
    border-inline-end: none;
}

.admin-content {
    order: 1;
}

/* ── Mobile RTL adjustments ── */
@media (max-width: 860px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }
    .admin-sidebar {
        order: 0;
        /* Admin sidebar drawer slides from right in RTL */
        inset-inline-start: auto;
        inset-inline-end: -260px;
        border-inline-start: none;
    }
    .admin-sidebar.open {
        inset-inline-end: 0;
    }
    .admin-content {
        order: 0;
    }
}

@media (max-width: 768px) {
    .header-inner {
        direction: rtl;
        flex-wrap: wrap;
    }
    .lang-toggle {
        order: 0;
    }
}

@media (max-width: 640px) {
    /* Mobile drawer already handled via inset-inline-end above */
    .header-inner {
        direction: rtl;
        flex-wrap: wrap;
    }
    .cart-table { width: 100%; }
    .cart-table td.product-col { flex-direction: column; }
}