/* Stage 3N: Arabic RTL adaptation.
 *
 * Every rule here is scoped under html[dir="rtl"] so it only activates in
 * Arabic mode - French/English rendering is completely unaffected. This is
 * additive-only: styles.css and admin.css keep their existing physical-
 * property rules for LTR, and this file supplies the mirrored equivalents
 * rather than rewriting either stylesheet into logical properties. No
 * selector here changes color, typography, spacing scale or component
 * structure - only direction-dependent positioning/transform/alignment,
 * per the Stage 3N instruction to adapt, not redesign.
 *
 * Organized in three sections matching the Stage 3N Phase 1 audit's three
 * surfaces: customer storefront, Seller Center, Admin Control Center.
 */

/* ===================================================================== */
/* Customer storefront (styles.css)                                       */
/* ===================================================================== */

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

/* Hero carousel controls (styles.css:168-169) */
html[dir="rtl"] .hero-prev { left: auto; right: 14px; }
html[dir="rtl"] .hero-next { right: auto; left: 14px; }

/* Shops carousel arrows (styles.css:195-196) */
html[dir="rtl"] .carousel-arrow.left { left: auto; right: 12px; }
html[dir="rtl"] .carousel-arrow.right { right: auto; left: 12px; }

/* Product badge / favorite button (styles.css:228-229) */
html[dir="rtl"] .product-badge { left: auto; right: 12px; }
html[dir="rtl"] .favorite-btn { right: auto; left: 12px; }
html[dir="rtl"] .discovery-product-card > .favorite-btn,
html[dir="rtl"] .discovery-product-card > .add-cart { right: auto; left: 16px; }
html[dir="rtl"] .discovery-product-card .product-info { padding-right: 0; padding-left: 46px; }

/* Toast (styles.css:262) */
html[dir="rtl"] .toast { right: auto; left: 24px; }

/* Language menu / search suggestions dropdowns (styles.css:355-356) */
html[dir="rtl"] .language-menu { left: auto; right: 0; }
html[dir="rtl"] .language-menu button { text-align: right; }
html[dir="rtl"] .search-suggestions { left: 0; right: 72px; }

/* Notification bell dropdown (Stage 3O) - opposite base value from
   .language-menu above (right:0 in LTR, since the bell sits further
   along the header's action group than the language button), so it
   mirrors in the opposite direction: right:auto/left:0 in RTL, keeping
   the panel anchored under the bell wherever flexbox has now placed it. */
html[dir="rtl"] .notification-menu { right: auto; left: 0; }
html[dir="rtl"] .notification-menu-head button { text-align: right; }
html[dir="rtl"] .notification-item { text-align: right; }

/* Cart count badge (styles.css:377) */
html[dir="rtl"] .cart-count { right: auto; left: 8px; }

/* Category drawer docks to the reading-start edge - right in RTL
   (styles.css:103, physically inset:0 auto 0 0 in LTR) */
html[dir="rtl"] .category-drawer { inset: 0 0 0 auto; border-radius: 24px 0 0 24px; transform: translateX(102%); }
html[dir="rtl"] .category-drawer-root.is-open .category-drawer { transform: translateX(0); }

/* Cart drawer docks to the reading-end edge - left in RTL
   (styles.css:380, physically inset:0 0 0 auto in LTR) */
html[dir="rtl"] .cart-drawer { inset: 0 auto 0 0; box-shadow: 24px 0 70px rgba(7,7,76,.2); transform: translateX(-102%); }
html[dir="rtl"] .cart-drawer-root.is-open .cart-drawer { transform: translateX(0); }

/* Mobile filter panel (styles.css:373, physically left:0/translateX(-105%) in LTR) */
@media (max-width: 767px) {
  html[dir="rtl"] .filter-panel { left: auto; right: 0; transform: translateX(105%); }
  html[dir="rtl"] .filter-panel.is-open { transform: translateX(0); }
  html[dir="rtl"] .search-suggestions { left: 0; right: 0; }
}

/* text-align:left rules that must flip (styles.css:119,135,355,394,405) */
html[dir="rtl"] .category-drawer-row,
html[dir="rtl"] .account-btn,
html[dir="rtl"] .account-nav a,
html[dir="rtl"] .account-nav button,
html[dir="rtl"] .seller-table th { text-align: right; }
/* product spec value column (styles.css:383) was text-align:right in LTR */
html[dir="rtl"] .product-specifications dd { text-align: left; }

/* Carousel "peek" slide offsets must mirror so the next slide peeks from
   the correct (start) side (styles.css:162-164, 203-205) */
html[dir="rtl"] .hero-slide { transform: translateX(-3.5%); }
html[dir="rtl"] .hero-slide.is-active { transform: translateX(0); }
html[dir="rtl"] .hero-slide.is-leaving { transform: translateX(3.5%); }
html[dir="rtl"] .ads-strip-slide { transform: translateX(-1.25%); }
html[dir="rtl"] .ads-strip-slide.is-active { transform: translateX(0); }
html[dir="rtl"] .ads-strip-slide.is-leaving { transform: translateX(1.25%); }

/* Chevron rotation: the CSS-drawn chevron (border-right/border-bottom,
   styles.css:90-94) points the opposite reading direction in RTL */
html[dir="rtl"] .nav-chevron-right { transform: rotate(135deg); }
html[dir="rtl"] .nav-chevron-left { transform: rotate(-45deg); }

/* Directional glyph characters embedded in markup/JS strings - mirrored
   via a horizontal flip rather than swapping the character itself, so a
   single rule covers every "→"/"←"/"‹"/"›"/"◀"/"▶" wherever it appears
   in translated copy (e.g. "View all shops →", breadcrumb "›" separator,
   hero/shop carousel controls). Text inside is NOT flipped (direction:
   rtl already reorders characters correctly) - only shapes that were
   drawn assuming LTR need the mirror. */
html[dir="rtl"] .hero-control,
html[dir="rtl"] .breadcrumbs i { display: inline-block; transform: scaleX(-1); }

/* Discovery/category link arrows and "read more" style links keep their
   text right-to-left correctly under dir=rtl automatically; only the
   free-standing prev/next glyphs above needed an explicit mirror. */

/* ===================================================================== */
/* Seller Center (shares styles.css - seller-specific rules ~401-410)     */
/* ===================================================================== */

/* Table header alignment (styles.css:405, .seller-table th{text-align:left}) */
html[dir="rtl"] .seller-table th { text-align: right; }

/* Gallery reorder arrows keep their glyph but must swap roles - the
   "move earlier"/"move later" concept flips visually under RTL alongside
   the mirrored grid, same treatment as the customer hero controls. */
html[dir="rtl"] .seller-image-gallery button[data-image-up],
html[dir="rtl"] .seller-image-gallery button[data-image-down] { transform: scaleX(-1); }

/* Sidebar/back-to-marketplace arrow */
html[dir="rtl"] .seller-home-link span { display: inline-block; transform: scaleX(-1); }

/* Timeline "→" transition arrow inside sellerTimelineLabel() text is
   plain text content (not a drawn glyph), so it already reads correctly
   right-to-left under dir=rtl with no CSS needed. Grid-based layouts
   (.seller-workspace, .seller-product-row, .seller-inventory-list form,
   .seller-order-detail, .seller-order-item, .seller-variants>div) all use
   CSS Grid, which auto-mirrors track order under dir=rtl per spec - no
   override needed.
*/

/* ===================================================================== */
/* Admin Control Center (admin.css)                                       */
/* ===================================================================== */

/* Table header alignment - highest-impact fix per the Stage 3N audit
   (admin.css:51, .admin-table th{text-align:left}); every admin list page
   (sellers, products, orders, customers, finance, delivery) uses this
   same table. */
html[dir="rtl"] .admin-table th { text-align: right; }

/* Sidebar-foot text (sign-out / view-marketplace / the Stage 3N language
   switcher) (admin.css:19, text-align:left) */
html[dir="rtl"] .admin-sidebar-foot button,
html[dir="rtl"] .admin-sidebar-foot a { text-align: right; }

/* Category tree indentation - child rows indent from the reading-start
   edge, right in RTL (admin.css:174, padding-left:28px in LTR) */
html[dir="rtl"] .admin-category-tree li { padding-left: 0; padding-right: 28px; }
/* The name/description column is pushed to the reading-start edge via
   margin-right:auto (a flex "fill remaining space" trick), pushing the
   position/status/move/edit controls to the reading-end edge - mirrors to
   margin-left:auto in RTL (admin.css:170,175) */
html[dir="rtl"] .admin-category-tree article > div > span:first-child,
html[dir="rtl"] .admin-category-tree li > span:first-child { margin-right: 0; margin-left: auto; }

/* Admin gallery reorder buttons (admin-ui.js's productEditorMarkup) reuse
   the exact same .seller-image-gallery markup/classes as Seller Center's
   own product form, so they already inherit the mirror rule above (line
   112-113) with no separate selector needed here. */

/* Login: the .admin-login panel is CSS Grid (brand 58% / card 42%), which
   auto-mirrors track order under dir=rtl per spec, so the two panels
   already swap sides correctly with no override. Three things inside it
   were still hard-coded to LTR physical corners/edges and need mirroring
   at the same breakpoints admin.css itself uses: */

/* 1) Standalone corner logo, positioned absolute over the whole login
   page (independent of the grid) - moves to the reading-start corner,
   right in RTL, at every breakpoint admin.css defines a left offset for
   (admin.css:240, 296, 310, 343). */
html[dir="rtl"] .admin-login-official-logo { left: auto; right: clamp(28px,4.5vw,70px); }
@media (max-width:900px) { html[dir="rtl"] .admin-login-official-logo { right: 24px; } }
@media (max-width:760px) { html[dir="rtl"] .admin-login-official-logo { right: 20px; } }
@media (max-width:620px) { html[dir="rtl"] .admin-login-official-logo { right: 16px; } }

/* 2) The brand panel only rounds its outer (grid-edge) corners - left
   corners in LTR since it is the left cell (admin.css:243,
   border-radius:30px 0 0 30px). Once the grid mirrors, it becomes the
   right cell, so the rounded corners must move to the right. Scoped to
   the width range where .admin-login is still a two-column grid - below
   760px admin.css itself switches to a single stacked column with its
   own symmetric 24px radius, which needs no mirroring. */
@media (min-width:761px) {
  html[dir="rtl"] .admin-login-brand { border-radius: 0 30px 30px 0; }
}

/* 3) The card's -1px hairline overlap and its cast shadow both assume it
   sits in the right-hand grid cell in LTR (admin.css:248,
   margin-left:-1px; box-shadow:-18px 0 42px ...) - mirrors to the left
   cell in RTL. Same 760px scoping as above: below that width the layout
   stacks vertically and admin.css's own margin:0 / vertical box-shadow
   already apply equally in both directions. */
@media (min-width:761px) {
  html[dir="rtl"] .admin-login-card { margin-left: 0; margin-right: -1px; box-shadow: 18px 0 42px rgba(3,12,64,.08); }
}

/* Directional glyphs embedded in translated link/button text ("View
   marketplace ↗", "← Return to marketplace", "View public shop ↗", the
   seller/category/governorate precedence chains rendered as "Seller →
   Category → Default") are plain text content, not drawn icons - they
   already read correctly right-to-left under dir=rtl with no CSS, same
   reasoning as the customer/Seller Center sections above. The category
   reorder ↑/↓ buttons are vertical and direction-agnostic, so they are
   intentionally left unmirrored too. */