:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* defaults (dark) */
  --bg: #0b0d10;
  --bg2: #0f131a;
  --card: rgba(17,24,39,.62);
  --card2: rgba(17,24,39,.45);
  --text: #ffffff;
  --muted: rgba(255,255,255,.62);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
  --accentV: #a855f7;
  --accentB: #3b82f6;
  --ink: #0b0d10;
}
html[data-theme="light"]{
  --bg: #f7f7fb;
  --bg2: #eef0f6;
  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.62);
  --text: #0b0d10;
  --muted: rgba(11,13,16,.62);
  --stroke: rgba(11,13,16,.10);
  --stroke2: rgba(11,13,16,.14);
  --ink: #0b0d10;
}

html,body{ height:100%; }
body {
  /* لون أساسي داكن */
  background-color: var(--bg);
  
  /* تدرج لوني ناعم وثابت */
  background-image:
    radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.15), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.15), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.1), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.1), transparent 40%);
  
  /* السر هنا: الخلفية ثابتة بحجم الشاشة */
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Arabic", "Noto Sans", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  min-height: 100vh;
}

/* horizontal scrollbar hide */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* Press feedback */
.pressable{
  transition: transform 120ms ease, filter 120ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
  will-change: transform;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
}
.pressable.is-pressed{
  transform: scale(.97);
  filter: brightness(1.04);
}

/* Ripple */
.ripple-dot{
  position: absolute;
  border-radius: 999px;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), rgba(168,85,247,.55) 45%, rgba(59,130,246,.45));
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: .35;
  mix-blend-mode: screen;
}

/* View transitions */
.view{
  transition: opacity 220ms ease, transform 220ms ease;
}
.view.is-hidden{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* Overlay + sheets */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index: 80;
  display: none;
}
.overlay.show{ display:block; animation: fadeIn 160ms ease-out; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.sheet{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 90;
  transform: translateY(110%);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
  padding-bottom: calc(12px + var(--safe-bottom));
}
.sheet.show{ transform: translateY(0); }

.fly-dot{
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(168,85,247,.9) 40%, rgba(59,130,246,.85));
  box-shadow: 0 12px 34px rgba(168,85,247,.22);
  z-index: 9999;
  pointer-events: none;
}

.toast-wrap{
  position: fixed;
  top: calc(12px + var(--safe-top));
  left: 0; right: 0;
  z-index: 120;
  pointer-events: none;
  display: grid;
  place-items: center;
  padding: 0 16px;
}
.toast{
  pointer-events: none;
  max-width: 520px;
  width: 100%;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: var(--shadow, 0 14px 38px rgba(0,0,0,.28));
  display:flex;
  align-items:center;
  gap:10px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.toast.show{ opacity:1; transform: translateY(0); }


/* =========================
   Stage3: Spacing fixes
   ========================= */

/* فراغ بسيط بين كتلة الهيدر/الزجاج العلوي وبداية المحتوى داخل كل View */
#view-home, #view-search, #view-profile, #view-admin {
  padding-top: 2px !important; /* مسافة مجهرية */
}

#todayDeals {
  margin-top: 6px !important; /* الرقم السحري: ليس واسعاً وليس ملتصقاً */
}


/* في صفحة حسابي: أول كارد يكون أبعد قليلًا من الهيدر العلوي */
#view-profile > *:first-child {
  margin-top: 14px;
}


/* =========================
   UI Patch: Glass + Filters + Desc
   ========================= */

:root{
  /* Glass backgrounds */
  --glassHeader: rgba(0,0,0,.18);
  --glassPanel: rgba(15,18,24,.72);

  /* Product description */
  --descText: rgba(255,255,255,.72);
  --descBg: rgba(0,0,0,.14);
}

html[data-theme="light"]{
  --glassHeader: rgba(255,255,255,.72);
  --glassPanel: rgba(255,255,255,.86);

  --descText: rgba(11,13,16,.78);
  --descBg: rgba(255,255,255,.75);
}

/* Filters panel: prevent content bleed-through */
#filtersPanel{
  position: relative;
  isolation: isolate;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

/* Scrim layer inside filters panel */
#filtersPanel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 24px;
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.28),
    rgba(0,0,0,.12)
  );
}

html[data-theme="light"] #filtersPanel::before{
  background: linear-gradient(180deg,
    rgba(255,255,255,.55),
    rgba(255,255,255,.20)
  );
}

/* Product description style (better in light mode) */
.product-desc{
  color: var(--descText);
  background: var(--descBg);
  padding: 6px 8px;
  border-radius: 12px;
}

/* اصلاحات من اجل التوافق للتحديث الجديد للUI
/*ملاحظة: أنت عندك .product-desc يضيف خلفية للوصف.
في JS الحالي الوصف لا يستخدم product-desc (فما راح يظهر المربع الرمادي).
إذا لاحقًا رجع يظهر مربع، إمّا احذف background من .product-desc أو لا تضف هذا الكلاس للـ desc.

/* Tailwind CDN غالبًا لا يفعّل line-clamp plugin */
.line-clamp-2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* بديل لـ text-muted اللي مستخدم في JS */
.text-muted{ color: var(--muted); }

.wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}