/* =========================================================
   Salla — Minimal Floating UI (fast + safe)
   Header / Preorder Badge / 001 Background / Product / Footer
   ========================================================= */

/* ---------- 0) Base background: white + spaced '001' step-and-repeat ---------- */
:root{
  --tile-w: 320px;
  --tile-h: 220px;
  --text-ink: #0b1324;
  --blue-1: #0067ff;
  --blue-2: #00b7ff;
  --blue-3: #69e6ff;
}
html { background:#fff !important; }

body{
  background-color:#fff !important;
  /* Layer 1: very light film, Layer 2: tiled '001' SVG */
  background-image:
    linear-gradient(135deg, rgba(0,160,255,.045), rgba(0,220,180,.035)),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220'>\
  <rect width='100%25' height='100%25' fill='transparent'/>\
  <text x='12' y='70'  font-family='Arial,Helvetica,sans-serif' font-size='40' font-weight='700' fill='black' fill-opacity='0.028'>001      001      001</text>\
  <text x='12' y='150' font-family='Arial,Helvetica,sans-serif' font-size='40' font-weight='700' fill='black' fill-opacity='0.028'>001      001      001</text>\
</svg>");
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, var(--tile-w) var(--tile-h) !important;
  background-position: 0 0, 0 0 !important;
}

/* Keep common wrappers transparent so the pattern is visible */
.site-wrapper, .main-content, #__salla_root, #__salla_root main, .container {
  background: transparent !important;
}

/* Leave some room for the floating navbar pill */
body { padding-top: 76px; }

/* ---------- 1) Header: smaller, floating card; hide category names ---------- */
.top-navbar,
.main-nav-container,
.navbar,
.site-header,
.s-topbar,
.s-header{
  background: rgba(255,255,255,0.96) !important;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 36px rgba(12,32,80,.12);
  width: min(96vw, 760px);
  margin: 10px auto 0 !important;
  padding: 6px 10px !important;
}

/* Hide category names (keep icons/structure) */
.main-nav-container ul li > span,
.main-nav-container ul li > a > span {
  font-size: 0 !important;
  color: transparent !important;
}
/* Kill mega menus so the small header stays tidy */
.main-nav-container ul li .product-item-menu,
.main-nav-container ul li > div {
  display: none !important;
}

/* ---------- 2) Floating preorder badge (the separate white pill) ---------- */
.nav-preorder-badge{
  position: fixed;
  top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 24px;
  border-radius: 9999px;
  background: #fff;                           /* white background */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 38px rgba(12,32,80,.16);
  text-decoration: none; font-weight: 900; font-size: 15px;
}
.nav-preorder-badge span{
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2) 60%, var(--blue-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

/* ---------- 3) Product area: single, centered column ---------- */
:is(.s-products-grid, .products-grid, .s-products-list, .s-products, .product-row, .products-row){
  display: grid !important;
  grid-template-columns: minmax(380px, 920px) !important;
  justify-content: center !important;
  gap: 32px !important;
  margin: 28px auto 44px;
}

/* ---------- 4) Product card: big, centered, rounded + shadow ---------- */
.item,
:is(.s-product-card-horizontal, .s-product-card, .product-card, .product){
  width: min(96vw, 920px);
  margin: 0 auto;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 22px 62px rgba(15,35,75,.15), 0 8px 20px rgba(15,35,75,.10);
  overflow: hidden;
  position: relative;
  padding: clamp(16px, 2vw, 22px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.item:hover,
:is(.s-product-card-horizontal, .s-product-card, .product-card, .product):hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 78px rgba(15,35,75,.18), 0 10px 24px rgba(15,35,75,.12);
  cursor: pointer;
}
/* Media corners tidy */
.item img, .s-product-card img, .product-card img{
  border-radius: 18px; width: 100%; height: auto; display: block;
}

/* CTA inside the card footer: dark-blue gradient with Arabic label */
.s-product-card-content-footer{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.s-product-card-content-footer salla-button,
.s-product-card-content-footer .salla-button,
.s-product-card-content-footer button.salla-button,
.s-add-product-button-mini-checkout-content{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width: 200px; height: 46px; padding: 0 18px !important;
  border-radius: 14px !important; border: none !important;
  background: linear-gradient(90deg,#0a3b7d,#0c68d9) !important;
  color:#fff !important; text-decoration:none !important;
  box-shadow: 0 10px 26px rgba(10,20,40,.28) !important;
  position:relative; overflow:hidden;
}

/* neutralize theme’s inner tracks without nuking structure */
.s-product-card-content-footer salla-button *,
.s-product-card-content-footer .salla-button *{
  background: transparent !important;
  border: none !important;
}

/* Visible Arabic label on the CTA */
.s-product-card-content-footer salla-button span > span,
.s-product-card-content-footer .salla-button span > span,
.s-product-card-content-footer button.salla-button span > span{
  color: transparent !important; position: relative; display: block;
}
.s-product-card-content-footer salla-button span > span::after,
.s-product-card-content-footer .salla-button span > span::after,
.s-product-card-content-footer button.salla-button span > span::after{
  content: "طلب مسبق";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 900; font-size: 1.05rem; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.28);
}

/* Product page mini button — same Arabic label */
.s-add-product-button-mini-checkout-content{ color: transparent; }
.s-add-product-button-mini-checkout-content::after{
  content: "طلب مسبق";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 900; font-size: 1.1rem; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.30);
}
.s-add-product-button-mini-checkout-content svg{ color: transparent; }

/* ---------- 5) Footer: floating rounded card ---------- */
.store-footer{ background: transparent !important; padding: 24px 12px 44px; }
.store-footer .store-footer__inner{
  max-width: 1200px; margin: 0 auto;
  background: rgba(255,255,255,0.96) !important;
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(6,28,80,.16);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  padding: 28px 22px;
}

/* ---------- 6) Mobile niceties ---------- */
@media (max-width: 768px){
  .nav-preorder-badge{ top: 10px; height: 46px; padding: 0 18px; font-size: 14px; }
  :is(.s-products-grid, .products-grid, .s-products-list, .s-products){
    grid-template-columns: minmax(320px, 94vw) !important;
  }
  .item, .s-product-card, .product-card{ width: min(94vw, 920px); }
}