/* ═══════════════════════════════════════════════════════════
   Asabsys Shop — Modern Product Display Redesign
   Enhances existing shop.html CSS
   shadcn/ui inspired: clean cards, sharp type, minimal glass
   ═══════════════════════════════════════════════════════════ */

/* ── Base ── */
:root {
  --sh-bg:      #fbf6e9;
  --sh-surface: #ffffff;
  --sh-s2:      #f2efe4;
  --sh-border:  #e5dfcd;
  --sh-primary: #6366f1;
  --sh-ph:      #4f46e5;
  --sh-glow:    rgba(99,102,241,0.15);
  --sh-text:    #1a1a1a;
  --sh-muted:   #6b7280;
  --sh-subtle:  #4b5563;
  --sh-success: #10b981;
  --sh-warning: #f59e0b;
  --sh-danger:  #ef4444;
  --sh-radius:  12px;
  --sh-tr:      0.18s cubic-bezier(0.4,0,0.2,1);
}

body {
  background: var(--sh-bg) !important;
  font-family: 'Tajawal', sans-serif !important;
}

/* ── Topbar redesign ── */
#top {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
  padding: 0.6rem 1.25rem !important;
}

#logo {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Search bar in topbar */
#search-top input {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 10px !important;
  color: var(--sh-text) !important;
  padding: 9px 14px 9px 38px !important;
  font-size: 0.875rem !important;
  font-family: 'Tajawal', sans-serif !important;
  transition: all var(--sh-tr) !important;
  text-shadow: none !important;
}
#search-top input:focus {
  border-color: var(--sh-primary) !important;
  box-shadow: 0 0 0 3px var(--sh-glow) !important;
}
#search-top input::placeholder { color: var(--sh-subtle) !important; text-shadow: none !important; }

/* ── Hero store info bar ── */
.hero-store-bar {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;
}

/* ── Ticker strips ── */
.shop-ticker-wrap {
  background: rgba(255,255,255,0.4) !important;
  border-bottom: 1px solid var(--sh-border) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}
.news-ticker-wrap {
  background: rgba(255,255,255,0.4) !important;
  border-bottom: 1px solid var(--sh-border) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* ── Filter buttons ── */
#filters {
  padding: 0.75rem 1.25rem !important;
  gap: 6px !important;
}

/* Removed filter-btn overrides to restore pearl look */

/* Sort select */
#sort-select {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 9px !important;
  color: var(--sh-text) !important;
  font-family: 'Tajawal', sans-serif !important;
  padding: 7px 14px !important;
  font-size: 0.8rem !important;
  transition: all var(--sh-tr) !important;
}
#sort-select:hover, #sort-select:focus {
  border-color: rgba(99,102,241,0.35) !important;
  box-shadow: 0 0 0 3px var(--sh-glow) !important;
  color: var(--sh-text) !important;
}

/* ── Product Grid ── */
#products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 1rem !important;
  padding: 0 1.25rem 2rem !important;
}

/* ── Product Cards — complete redesign ── */
.card {
  background: rgba(255,255,255,0.5) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: var(--sh-radius) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr), transform var(--sh-tr) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4) !important;
  animation: cardFadeIn 0.4s ease both;
}
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card:hover {
  border-color: rgba(99,102,241,0.4) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.2) !important;
  transform: translateY(-4px) !important;
}

/* Product image */
.card-img {
  aspect-ratio: 1 !important;
  background: rgba(255,255,255,0.2) !important;
  overflow: hidden !important;
  position: relative !important;
}
.card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.card:hover .card-img img { transform: scale(1.06) !important; }

/* Badges */
.sold-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(239,68,68,0.9) !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 7px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  backdrop-filter: blur(8px) !important;
  letter-spacing: 0.3px !important;
}
.discount-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: linear-gradient(135deg, rgba(245,158,11,0.95), rgba(239,68,68,0.95)) !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 7px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.source-badge {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  backdrop-filter: blur(8px) !important;
}
.source-main { background: rgba(16,185,129,0.85) !important; color: #fff !important; }
.source-branch { background: rgba(99,102,241,0.85) !important; color: #fff !important; }

/* Product body */
.card-body {
  padding: 0.85rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}
.card-name {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--sh-text) !important;
  line-height: 1.4 !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.card-cat {
  font-size: 0.7rem !important;
  color: #818cf8 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0 !important;
}
.card-price {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ef4444 !important; /* fallback if background-clip:text unsupported */
  background: linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #ef4444 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 0.35rem 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
.card-qty {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
}
.qty-ok  { color: var(--sh-subtle) !important; }
.qty-low { color: #fbbf24 !important; }
.qty-out { color: #f87171 !important; }

/* Add to cart button */
/* Removed overriding .add-btn to use pearl-btn correctly */

/* ── Cart button in topbar ── */
/* Removed cart-btn overrides to restore pearl look */
#cart-count {
  background: #ef4444 !important;
  border: 2px solid var(--sh-bg) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

/* ── Cart Drawer ── */
#cart-overlay { background: rgba(0,0,0,0.3) !important; backdrop-filter: blur(4px) !important; }
#cart-drawer {
  background: #ffffff !important;
  border-left: 1px solid var(--sh-border) !important;
  box-shadow: -16px 0 60px rgba(0,0,0,0.15) !important;
}
.cart-header {
  border-bottom: 1px solid var(--sh-border) !important;
  padding: 1rem 1.25rem !important;
}
.cart-header h3 { color: var(--sh-text) !important; font-size: 0.95rem !important; }
.cart-close {
  background: transparent !important;
  border: 1px solid var(--sh-border) !important;
  color: var(--sh-muted) !important;
  border-radius: 8px !important;
  transition: all var(--sh-tr) !important;
}
.cart-close:hover { border-color: rgba(239,68,68,0.4) !important; color: #f87171 !important; }
.cart-item {
  background: var(--sh-s2) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 10px !important;
}
.cart-info .ci-name { color: var(--sh-text) !important; font-size: 0.85rem !important; }
/* Cart item price: orange→red gradient (matches product-card price) */
.cart-info .ci-price {
  color: #ef4444 !important; /* fallback if background-clip:text unsupported */
  background: linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #ef4444 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
  font-weight: 800 !important;
}
.cart-footer { border-top: 1px solid var(--sh-border) !important; background: transparent !important; }
.cart-total span:first-child { color: var(--sh-muted) !important; text-shadow: none !important; }
/* Grand total: keep green, add a defined black shadow */
.cart-total span:last-child  { color: #34d399 !important; text-shadow: 0 1px 0 #000, 0 2px 4px rgba(0,0,0,0.5) !important; }

/* Checkout button — smaller, less dominant (pearl shimmer preserved) */
.checkout-btn { padding: 11px 18px !important; font-size: 0.95rem !important; }

/* Modal "add to cart" — was full-width 668px / 71px tall in the wide modal; make it proportionate + centered */
#modal-add-btn {
  width: fit-content !important;
  min-width: 200px !important;
  max-width: 340px !important;
  margin-inline: auto !important;
  display: block !important;
}
#modal-add-btn .pearl-wrap { padding: 11px 22px !important; text-align: center !important; }
#modal-add-btn .pearl-p { font-size: 0.95rem !important; }
/* Cart delete button — compact square with a red trash icon.
   Scoped to .cart-item so it beats shop.html's inline `.remove-btn !important` (which loads after this file). */
.cart-item .remove-btn {
  width: 34px !important;
  height: 34px !important;
  align-self: center !important; /* stop flex-stretch so it's a true square, not a tall bar */
  padding: 0 !important;
  border-radius: 4px !important; /* square corners */
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important; /* red trash icon */
  font-size: 1rem !important;
}

/* Removed modal overrides to restore creamy pearl look */

/* Auction bid button */
/* Removed auction-bid-btn overrides to restore pearl look */

/* ── Category dropdown ── */
.cat-drop-item {
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-size: 0.85rem !important;
  color: var(--sh-muted) !important;
  transition: all var(--sh-tr) !important;
}
.cat-drop-item:hover { background: rgba(255,255,255,0.05) !important; color: var(--sh-text) !important; }
.cat-drop-item.active { background: rgba(99,102,241,0.12) !important; color: #818cf8 !important; }
.cat-drop-item + .cat-drop-item { border-top: 1px solid var(--sh-border) !important; }

/* ── Tubes background ── */
#tubes-bg { display: none !important; }

/* ── Quantity buttons ── */
.qty-btn {
  background: var(--sh-s2) !important;
  background-color: var(--sh-s2) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 7px !important;
  color: var(--sh-text) !important;
  -webkit-text-fill-color: var(--sh-text) !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.qty-btn:hover {
  background: var(--sh-hover, #27272a) !important;
  background-color: var(--sh-hover, #27272a) !important;
  box-shadow: none !important;
}

/* ── Scrollbar ── */
* { scrollbar-width: thin; scrollbar-color: #27272a transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 10px; }

/* ── Responsive ── */
@media (max-width: 640px) {
  #products { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; padding: 0 0.75rem 1.5rem !important; }
  .card-name { font-size: 0.82rem !important; }
  .card-price { font-size: 0.95rem !important; }
}
/* Keep 2 columns on normal phones; only collapse to 1 on ultra-narrow devices */
@media (max-width: 300px) {
  #products { grid-template-columns: 1fr !important; }
}

/* ── Footer — كريمي مثل الصفحة الرئيسية ── */
.site-footer {
  background: rgba(235,229,215,0.95) !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  backdrop-filter: none !important;
}
.site-footer::before { display: none !important; }
#footer-wave-canvas  { display: none !important; }
.footer-copy         { color: #374151 !important; font-size: 0.78rem !important; }
.footer-copy span    { color: #1e293b !important; }
.footer-copy a       { color: #c5a059 !important; }
.footer-links a      { color: #374151 !important; }
.footer-links a:hover{ color: #c5a059 !important; }
.footer-sep          { color: rgba(0,0,0,0.2) !important; }
.footer-social a {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: #1e293b !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.footer-social a:hover {
  background: rgba(197,160,89,0.15) !important;
  border-color: rgba(197,160,89,0.4) !important;
  transform: translateY(-2px) !important;
}

/* ── Accessibility: respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Informational marquee tickers carry content; freezing them clips it. Keep them scrolling. */
  .shop-ticker {
    animation-duration: 18s !important;
    animation-iteration-count: infinite !important;
  }
  /* News-ticker duration is computed by JS (constant speed) and set inline !important; only keep it looping. */
  .news-ticker {
    animation-iteration-count: infinite !important;
  }
}