/* =========================================================================
   ARIUS — live shell overrides (matches the deployed index.html, not just the
   raw app template). Promo banner, header re-order (search next to menu),
   hidden in-header language toggle. Kept in a separate file so main.css stays
   an untouched copy of the original design.
   ========================================================================= */

/* ---- Promo banner ("ORDER NOW") — fixed black bar at the very top ---- */
.promo-banner {
  background: #000 !important;
  color: #fff !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 46px !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: none !important;
  box-sizing: border-box !important;
}
.promo-banner > span { text-align: center !important; flex: 1 !important; }
.promo-banner a { color: #fff; text-decoration: underline; cursor: pointer; }
.banner-close {
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
}
body[dir="rtl"] .banner-close { left: auto !important; right: 15px !important; }
.banner-close:hover { opacity: 0.7 !important; }

/* Push everything below the fixed banner (replaces the original JS margin hack). */
body.has-promo .app { margin-top: 60px; }
body.has-promo.promo-closed .app { margin-top: 0; }

/* ---- Header: move Search to the left next to the menu; hide in-header lang toggle ---- */
.header-inner { grid-template-columns: auto 1fr auto !important; }
.nav-left { order: 1 !important; }
.brand { order: 2 !important; text-align: center !important; }
.nav-right { order: 3 !important; }
.nav-left [aria-label="Search"] { margin-inline-start: 12px; }
.lang-toggle { display: none !important; }
.lang-toggle * { display: none !important; }

/* ---- Photo slider used on the home page (arius-slider from the live shell) ---- */
.arius-slider { width: 100%; background: #fff; padding: 40px 20px 50px; border-top: 1px solid #e2e0da; box-sizing: border-box; }
.arius-slider-track-wrap { overflow: hidden; position: relative; border-radius: 16px; width: 100%; }
.arius-slider-track { display: flex; transition: transform 0.6s cubic-bezier(.77,0,.175,1); width: 100%; }
.arius-slider-track img { min-width: 100%; max-width: 100%; width: 100%; height: 500px; object-fit: cover; flex-shrink: 0; display: block; }
@media (max-width: 640px) { .arius-slider-track img { height: auto; aspect-ratio: 3/4; object-fit: cover; } }
.arius-slider-dots { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.arius-dot { width: 7px; height: 7px; border-radius: 50%; background: #ccc; transition: background .3s, transform .3s; cursor: pointer; }
.arius-dot.active { background: #0a0a0a; transform: scale(1.3); }

/* ---- FIX: cart drawer would not slide open in RTL ----
   In the original CSS, `body[dir="rtl"] .cart-drawer` (specificity 0,2,1) outranks
   `.cart-drawer.open` (0,2,0), so the open transform never applied in Arabic and
   only the dark backdrop showed. These higher-specificity rules restore it. */
body[dir="rtl"] .cart-drawer.open,
body[dir="ltr"] .cart-drawer.open,
.cart-drawer.open { transform: translateX(0) !important; }

/* Lock background scroll while the drawer is open. */
body.cart-open { overflow: hidden; }

/* ---- WooCommerce notices, tidy in this minimal design ---- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; font-family: var(--sans); font-size: 13px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  padding: 12px 16px; margin: 0 auto 20px; max-width: 1640px; border-radius: 8px;
}
body[dir="rtl"] .woocommerce-message, body[dir="rtl"] .woocommerce-info, body[dir="rtl"] .woocommerce-error { text-align: right; }