/**
 * RTL (Right-to-Left) stylesheet — 3D Fusion Forge
 * Loaded only when IS_RTL === true (Arabic interface)
 *
 * Strategy: override every directional property from style.css so that the
 * base stylesheet stays untouched and this file is the single source of truth
 * for all RTL adjustments.
 */

/* ==========================================================================
   1. Base direction
   ========================================================================== */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Arabic-optimised font stack */
html[dir="rtl"] body {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ==========================================================================
   2. Layout — containers, flexbox, grid
   ========================================================================== */

/* Flip all horizontal flex rows */
html[dir="rtl"] .flex-row,
html[dir="rtl"] .d-flex:not(.flex-column),
html[dir="rtl"] .header-inner,
html[dir="rtl"] .header-actions,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .product-meta,
html[dir="rtl"] .cart-item,
html[dir="rtl"] .checkout-row,
html[dir="rtl"] .footer-inner,
html[dir="rtl"] .footer-columns {
    flex-direction: row-reverse;
}

/* Keep explicit column stacks as-is */
html[dir="rtl"] .flex-column {
    flex-direction: column;
}

/* ==========================================================================
   3. Margins — swap left ↔ right
   ========================================================================== */

html[dir="rtl"] .ms-auto  { margin-left: unset !important; margin-right: auto !important; }
html[dir="rtl"] .me-auto  { margin-right: unset !important; margin-left: auto !important; }

html[dir="rtl"] .ms-1 { margin-left: unset !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .me-1 { margin-right: unset !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: unset !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .me-2 { margin-right: unset !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: unset !important; margin-right: 1rem !important; }
html[dir="rtl"] .me-3 { margin-right: unset !important; margin-left: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: unset !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .me-4 { margin-right: unset !important; margin-left: 1.5rem !important; }

/* Component-level margin flips */
html[dir="rtl"] .logo-icon   { margin-left: 0.5rem; margin-right: 0; }
html[dir="rtl"] .cart-badge  { left: unset; right: -8px; }
html[dir="rtl"] .nav-link    { margin-left: 0; margin-right: 1.5rem; }

/* ==========================================================================
   4. Padding — swap left ↔ right
   ========================================================================== */

html[dir="rtl"] .ps-1 { padding-left: unset !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .pe-1 { padding-right: unset !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .ps-2 { padding-left: unset !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .pe-2 { padding-right: unset !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .ps-3 { padding-left: unset !important; padding-right: 1rem !important; }
html[dir="rtl"] .pe-3 { padding-right: unset !important; padding-left: 1rem !important; }
html[dir="rtl"] .ps-4 { padding-left: unset !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .pe-4 { padding-right: unset !important; padding-left: 1.5rem !important; }

/* ==========================================================================
   5. Header & navigation
   ========================================================================== */

html[dir="rtl"] .site-header .container {
    direction: rtl;
}

html[dir="rtl"] .main-nav {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .main-nav .nav-links {
    padding-left: 0;
    padding-right: 0;
}

html[dir="rtl"] .main-nav .nav-links li {
    margin-left: 0;
    margin-right: 1.5rem;
}

html[dir="rtl"] .main-nav .nav-links li:first-child {
    margin-right: 0;
}

/* ==========================================================================
   6. Dropdowns
   ========================================================================== */

html[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

html[dir="rtl"] .dropdown-menu-right {
    left: 0;
    right: auto;
}

html[dir="rtl"] .dropdown-item {
    text-align: right;
    padding-right: 1rem;
    padding-left: 0.5rem;
}

html[dir="rtl"] .dropdown-item i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ==========================================================================
   7. Sidebar — flip from left to right
   ========================================================================== */

html[dir="rtl"] .sidebar {
    float: right;
    margin-left: 2rem;
    margin-right: 0;
    border-left: none;
    border-right: 1px solid var(--border-color, #e5e7eb);
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .sidebar-left {
    left: unset;
    right: 0;
}

html[dir="rtl"] .content-with-sidebar {
    margin-left: 0;
    margin-right: 260px; /* match sidebar width */
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

html[dir="rtl"] label {
    display: block;
    text-align: right;
}

html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    direction: rtl;
    text-align: right;
}

/* Keep LTR for email / URLs so they render correctly */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: left;
}

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

html[dir="rtl"] .input-group-prepend {
    order: 1;
    border-radius: 0 0.375rem 0.375rem 0;
    border-left: none;
    border-right: 1px solid var(--border-color, #e5e7eb);
}

html[dir="rtl"] .input-group-append {
    order: -1;
    border-radius: 0.375rem 0 0 0.375rem;
    border-right: none;
    border-left: 1px solid var(--border-color, #e5e7eb);
}

html[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5rem;
}

/* ==========================================================================
   9. Product grid & cards
   ========================================================================== */

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

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

html[dir="rtl"] .product-card .card-actions {
    justify-content: flex-start; /* was flex-end in LTR */
}

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

html[dir="rtl"] .product-badges {
    left: unset;
    right: 0.75rem;
}

html[dir="rtl"] .product-badge-sale {
    right: 0.75rem;
    left: unset;
}

/* ==========================================================================
   10. Breadcrumbs
   ========================================================================== */

html[dir="rtl"] .breadcrumb {
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-end;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    float: right;
    padding-right: 0;
    padding-left: 0.5rem;
    /* Reverse the chevron character to point left-to-right in RTL */
    transform: scaleX(-1);
    display: inline-block;
}

/* ==========================================================================
   11. Alerts & flash messages
   ========================================================================== */

html[dir="rtl"] .alert {
    text-align: right;
    border-left: none;
    border-right: 4px solid currentColor;
    padding-left: 1rem;
    padding-right: 1.25rem;
}

html[dir="rtl"] .alert .btn-close {
    margin-left: -0.375rem;
    margin-right: auto;
    float: left;
}

/* ==========================================================================
   12. Tables
   ========================================================================== */

html[dir="rtl"] table {
    direction: rtl;
}

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

html[dir="rtl"] th:first-child,
html[dir="rtl"] td:first-child {
    text-align: right;
}

/* ==========================================================================
   13. Pagination
   ========================================================================== */

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

html[dir="rtl"] .page-item:first-child .page-link {
    border-radius: 0 0.375rem 0.375rem 0;
}

html[dir="rtl"] .page-item:last-child .page-link {
    border-radius: 0.375rem 0 0 0.375rem;
}

/* ==========================================================================
   14. Icons alongside text
   ========================================================================== */

html[dir="rtl"] .icon-left {
    margin-left: 0.4rem;
    margin-right: 0;
    float: right;
}

html[dir="rtl"] .icon-right {
    margin-right: 0.4rem;
    margin-left: 0;
    float: left;
}

/* ==========================================================================
   15. Language toggle button
   ========================================================================== */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

html[dir="rtl"] .lang-toggle {
    /* In RTL context the toggle sits before the hamburger — keep its own
       internal direction LTR so the flag/text renders predictably */
    direction: ltr;
}