/* ============================================================
   Watchsp — RTL overrides (Arabic)

   Rules of engagement (standard practice):
   1. `<html dir="rtl">` is set server side, so flex containers, grids and
      text alignment already mirror themselves. We therefore NEVER use
      flex-direction:row-reverse here — that would double flip.
   2. Only physical properties are overridden: left/right offsets, borders,
      radii, shadows, gradients and directional icons.
   3. Photos are not mirrored (watch dials would read backwards); only the
      layout and the caption positioning follow the reading direction.
   4. Latin / numeric tokens (prices, SKUs, brand names) are isolated as LTR.
   ============================================================ */

body{
  direction:rtl;
  font-family:"Segoe UI",Tahoma,"Noto Sans Arabic","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

/* ---- Latin / numeric tokens keep their own direction ---- */
.woocommerce-Price-amount,
.amount,
.price bdi,
.ws-tier .t-price,
.ws-tier .t-save,
.fs-live-price b,
#fsLiveUnit,
#fsLiveTotal,
#fsLiveQty,
.mcp-subtotal,
.mcp-total b,
.mcp-meta,
.cart-count,
.sku_wrapper,
.order-total .amount{ direction:ltr; unicode-bidi:isolate; }
.woocommerce-Price-amount{ display:inline-block; }

/* ---- Top bar ---- */
.topbar-mid span,
.topbar-links a{ white-space:nowrap; }

/* ---- Header ---- */
.search select{
  border-radius:0 var(--radius) var(--radius) 0;
  border-left:0;border-right:1px solid var(--line);
}
.search button{ border-radius:var(--radius) 0 0 var(--radius); }

/* Mini cart: opens towards the left of the button in RTL */
.cart-pop{ right:auto; left:0; }
.cart-pop::before{ right:auto; left:18px; border-left:0; border-right:1px solid var(--line); }
.mcp-side{ text-align:left; align-items:flex-start; }

/* ---- Category dropdown (anchored to the button, grows to the left) ---- */
.cat-drop{
  left:auto;right:0;
  border-radius:var(--radius) 0 var(--radius) var(--radius);
}
.cd-list{ border-right:0;border-left:1px solid var(--line); }
.cd-panel{ left:0;right:268px; }
.cd-popular{
  border-left:0;border-right:1px solid var(--line);
  padding-left:0;padding-right:16px;
}
.cd-item > .cd-head .chev{ transform:scaleX(-1); }
.cd-panel .cd-all{ text-align:right; }

/* ---- Mega menu ---- */
.mega-col a,
.mega-promo p{ text-align:right; }

/* ---- Hero slider ---- */
/* The navy copy panel is baked into the left side of every banner image, so
   the caption stays over it and only its text alignment follows RTL. */
.slide-cap{ left:78px; right:auto; text-align:right; }
/* Phones: style.css caps the caption to the left half of the slide (where the
   navy panel is baked into the artwork). Without this override the desktop
   left/right values above win, the box grows to almost the full width and the
   Arabic copy ends up on top of the watch photo. */
@media (max-width:760px){
  .slide-cap{ left:22px; right:52%; max-width:none; }
}
.s-prev{ left:auto; right:0; border-radius:4px 0 0 4px; }
.s-next{ right:auto; left:0; border-radius:0 4px 4px 0; }
.s-prev svg,.s-next svg{ transform:scaleX(-1); }

/* ---- Side banners ---- */
/* The navy block is baked into the left half of these images too, so the
   caption stays on the left and only its alignment follows RTL. */
.side-banners .sb-cap{ left:18px; right:auto; max-width:52%; text-align:right; }

/* ---- Cards ---- */
.card .flags{ left:auto; right:10px; align-items:flex-end; }
.card .wish{ right:auto; left:10px; }
.card .brand{ letter-spacing:0; }

/* ---- Section heads ---- */
.sec-head{ text-align:right; }
.sec-head .more{ margin-left:0; }

/* ---- Product page ---- */
.summary,
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description ul,
.woocommerce-product-details__short-description li{ text-align:right; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ margin-left:0;margin-right:0; }
.ws-tier.is-picked{ box-shadow:inset -3px 0 0 var(--accent); }
.ws-tiers-head{ background:linear-gradient(270deg,#0b3a6b,#00213c); }
.fs-price-note{ text-align:right; }

/* ---- Cart / checkout tables ---- */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{ text-align:right; }
.cart_item .product-remove{ text-align:left; }
.cart_totals .amount{ direction:ltr; }

/* ---- Forms ---- */
input[type="text"],input[type="email"],input[type="search"],input[type="tel"],
input[type="password"],textarea,select{ text-align:right; }
input[type="number"],input.qty{ text-align:center; }
::placeholder{ text-align:right; }

/* ---- Footer ---- */
.footer .co-info,
.footer .f-col,
.footer .f-bottom{ text-align:right; }
.footer .co-social{ justify-content:flex-start; }

/* ---- Mobile drawer opens from the right in RTL ---- */
.drawer{
  left:auto;right:0;transform:translateX(102%);
  box-shadow:-6px 0 24px rgba(0,0,0,.18);
}
.drawer.open{ transform:translateX(0); }
.drawer-list .d2-head,
.drawer-list .d3-link{ text-align:right; }

/* ---- Numeric tokens that would flip ("40+" becoming "+40") ---- */
.ab-stats b,
.ab-stats strong,
.stat b,
.ws-tiers .t-qty,
.rating-num{
  direction:ltr;
  unicode-bidi:isolate;
}
/* Ratings: keep "4.5 (120 reviews)" in reading order */
.stars span,
.single-stars span{ unicode-bidi:isolate; }

/* -------------------------------------------------------------------------
   Product gallery (flexslider) under RTL — 2026-11-01
   Flexslider computes slide offsets with LTR geometry. With direction:rtl the
   slides are laid out from the right and the inline transform ends up around
   -4600px, so the main image sits far outside the viewport: the gallery box
   looks empty while the thumbnails still render. Force the slider machinery
   back to LTR (image order is not directional anyway).
   ------------------------------------------------------------------------- */
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-control-thumbs { direction: ltr; }

.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery .flex-control-thumbs li { text-align: left; }