/* ================================================================
   RTL overrides — loaded only when the active language is Arabic.
   Flips text direction, alignment, and directional spacing so the
   storefront reads naturally right-to-left.
   ================================================================ */

body { direction: rtl; text-align: right; }

/* Header: nav sits to the right of the brand, actions to the left */
.header-inner { flex-direction: row; }
@media (min-width: 901px) { .main-nav { flex-direction: row; } }

/* Text alignment resets for common blocks */
.page-title, .section-title, .product-info h3,
.panel h3, .admin-title, h1, h2, h3, h4 { text-align: right; }
/* Payment status pages stay centered even in RTL */
.payment-status-page, .payment-status-page .page-title, .payment-status-page .muted { text-align: center; }

/* Forms & fields */
.field label { text-align: right; }
.field input, .field select, .field textarea { text-align: right; direction: rtl; }
/* Keep inherently LTR data readable (emails, phones, prices, codes) */
input[type="email"], input[type="tel"], input[type="url"],
input[name="phone"], input[name="ship[phone]"],
.price, .product-price, .money, .order-no, .product-sku,
code, .mono { direction: ltr; }
input[type="email"], input[type="tel"], input[name="phone"], input[name="ship[phone]"] { text-align: right; }

/* Cart / summary alignment — the page's dir=rtl already reverses the row,
   so DON'T add row-reverse (that would flip it back to LTR order). The label
   (first span) naturally sits at the start (right); the value (last span) at
   the end (left). */
.summary-box .summary-line > span:first-child { text-align: right; }
.summary-box .summary-line > span:last-child { text-align: left; }

/* Product cards */
.product-info { text-align: right; }
.product-card .badge { right: auto; left: 10px; }

/* Buttons with arrows: flip the arrow side */
.btn svg, .pill svg { transform: scaleX(-1); }

/* Lists: move bullets/padding to the right */
ul, ol { padding-right: 1.2em; padding-left: 0; }

/* Tables */
.table th, .table td { text-align: right; }
.table .col-num, .table .col-actions { text-align: left; }

/* Footer columns align right */
.footer-col { text-align: right; }

/* Language switcher spacing */
.header-actions { flex-direction: row; }

/* Cart bubble sits on the opposite corner */
.cart-bubble { right: auto; left: -8px; }

/* Mobile bottom tab bar keeps its even distribution (flex handles it) */

/* Admin sidebar layout: put the nav on the right */
.admin-shell { direction: rtl; }
.admin-nav { text-align: right; }
.settings-nav a, .settings-subnav-item {
    border-left: 0; border-right: 3px solid transparent; text-align: right;
}
.settings-nav a.active, .settings-subnav-item.active {
    border-right-color: var(--primary); border-left: 0;
}

/* Saved address cards */
.saved-address-card { text-align: right; }

/* Checkout saved-address radio spacing handled by flex; ensure RTL flow */
.saved-address-card { flex-direction: row; }

/* Checkout / contact two-column layout in RTL: use fractional tracks (not a
   fixed px column) so the grid can never compute wider than its container and
   overflow past the viewport edge. The body's direction:rtl reverses the
   visual column order automatically. */
.checkout-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    max-width: 100%;
}
.checkout-layout > *, .checkout-column, .checkout-summary { min-width: 0; max-width: 100%; }
.checkout-column .field input,
.checkout-column .field select,
.checkout-column .field textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.checkout-column .field, .checkout-column .row { min-width: 0; max-width: 100%; }
.checkout-column .row .col-6 { min-width: 0; }
/* Stack into a single column on mobile (matches the LTR breakpoints). */
@media (max-width: 900px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-column .row { flex-wrap: wrap; }
    .checkout-column .row .col-6,
    .checkout-column .row .col-4,
    .checkout-column .row .col-3 { flex: 1 1 100%; }
}

/* Hero stays centered regardless of RTL text direction */
.hero,
.hero h1,
.hero h2,
.hero p,
.hero .hero-inner,
.hero .container { text-align: center; }

/* Number inputs and money should not be forced RTL inside prose */
.product-price, .price-sale, .price-was { direction: ltr; display: inline-block; }

/* Fix any left-margins that should be right in RTL for common utilities.
   Scoped to desktop so it doesn't fight the mobile header layout. */
.ms-auto { margin-left: 0; margin-right: auto; }
@media (min-width: 901px) {
    .header-actions { margin-left: 0; margin-right: auto; }
}

/* ----- Home redesign RTL touches ----- */
.home-hero-copy { text-align: right; }
.section-head .section-title::after { left: auto; right: 0; }
.feature-item + .feature-item { border-left: 0; border-right: 1px solid var(--border); }
.pc-badge-sale { left: auto; right: 12px; }
.pc-badge-out { right: auto; left: 12px; }
.browse-card, .product-info { text-align: right; }
.btn-hero .arrow, .section-link { direction: rtl; }

/* Hero slider + product share RTL */
.hero-prev { left: auto; right: 18px; }
.hero-next { right: auto; left: 18px; }
.product-share-icons { justify-content: flex-start; }

/* Mobile header: the base rule's margin-inline-end:auto on .header-actions
   pushes the logo to the far (left) side in RTL automatically. */

/* "New" / sale badges flip in RTL */
.pc-badge-new { left: auto; right: 12px; }
.pc-badge-sale, .pc-badge-out { right: auto; left: 12px; }

/* Back-link arrow points the other way in RTL */
.back-link a::before { content: "\2192"; }

/* Category link arrow flips in RTL */
.product-category-link::before { content: "\2192"; }

/* Arabic is cursive: letter-spacing breaks the joins and looks "scattered",
   and uppercase is meaningless. Reset both on tracked/uppercased UI labels. */
.home-hero-eyebrow,
.shop-sidebar h3,
.table th,
.footer-col h4 {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ---- Mobile header (Arabic): with direction:rtl the flex row reverses, so
   the hamburger + switchers naturally sit on the RIGHT and the logo on the
   LEFT (the base rule's logical margin handles the logo). We only need to flip
   the dropdown to open from the right. ---- */
@media (max-width: 900px) {
    .main-nav {
        left: auto; right: 0;
        border-radius: 0 0 0 12px;
        text-align: right;
    }
    .main-nav a { text-align: right; }
}

/* Product "From" price: keep the number LTR but place the "From" label on the
   right (natural RTL reading), and align the whole price block to the right. */
.product-price.big { justify-content: flex-end; }
.product-price.big.has-from { direction: ltr; flex-direction: row-reverse; justify-content: flex-start; }
.product-price.big .price-from-label { direction: rtl; }



/* Keep the product thumbnail strip in visual array order (left-to-right) even
   in RTL, so the lightbox prev/next arrows (❮ = previous, ❯ = next) always
   match the thumbnail sequence and never feel reversed. */
.gallery-thumbs { direction: ltr; justify-content: flex-start; }