/* ==========================================================
   RUYAT ALJAZEERAH — Shop design system (shared CSS)
   يُستخدم في: index / store / product / cart وأي صفحة جديدة
   بنفس نظام Tailwind CDN + هذا الملف للتأثيرات المخصّصة
   ========================================================== */
body{ font-family:'Tajawal','Cairo',sans-serif; }
.font-display{ font-family:'Cairo','Tajawal',sans-serif; }
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  width:1em;
  height:1em;
  overflow:hidden;
}
.glass-panel, .glass-card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.5);
}
/* نسخة غامقة للجلاس تُستخدم فوق خلفيات داكنة (مثل قسم "لنبدأ رحلة الإبداع")
   — منفصلة عن .glass-card عشان مايبقاش فيه تعارض مع background الفاتحة فوق. */
.glass-card-dark{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
}
.deep-shadow{ box-shadow:0 20px 50px rgba(0,108,71,.08), 0 5px 15px rgba(0,0,0,.05); }
.hover-lift{ transition:all .5s cubic-bezier(.2,1,.3,1); }
.hover-lift:hover{ transform:translateY(-12px) scale(1.02); box-shadow:0 40px 80px rgba(0,108,71,.12); }
.stagger-in{ animation:fadeIn .8s cubic-bezier(.2,1,.3,1) forwards; opacity:0; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
.metal-shine{ position:relative; overflow:hidden; }
.metal-shine::after{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:linear-gradient(45deg, transparent, rgba(255,255,255,.3), transparent);
  transform:rotate(45deg); transition:.6s;
}
.metal-shine:hover::after{ left:100%; top:100%; }
.emerald-glow-btn{ box-shadow:0 0 0 rgba(31,168,114,0); transition:box-shadow .4s ease, transform .2s ease; }
.emerald-glow-btn:hover{ box-shadow:0 10px 40px rgba(31,168,114,.3); transform:translateY(-2px); }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#1fa872; border-radius:10px; }

.bg-mesh{
  background-image: radial-gradient(at 0% 0%, rgba(127,250,188,.1) 0px, transparent 50%),
                     radial-gradient(at 100% 100%, rgba(0,108,71,.05) 0px, transparent 50%);
}
.neon-accent{ text-shadow:0 0 10px rgba(111,210,160,.5), 0 0 20px rgba(111,210,160,.3); }
.perspective-grid{ perspective:2000px; }
.tilt-on-hover{ transition:transform .6s cubic-bezier(.23,1,.32,1); }
.tilt-on-hover:hover{ transform:rotateX(5deg) rotateY(-5deg) scale(1.02); }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-20px); } }
.animate-float{ animation:float 6s ease-in-out infinite; }
.reveal{ opacity:0; transform:translateY(30px); transition:all .8s ease-out; }
.reveal.active{ opacity:1; transform:translateY(0); }
.magnetic-btn:hover{ transform:translate(var(--mx), var(--my)); }
.magnetic-btn{ --mx:0px; --my:0px; }
.no-scrollbar{ scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
/* أيقونة Material Symbols بحالة "معبّأة" — تُستخدم بدل style="font-variation-settings:'FILL' 1" */
.icon-fill{ font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20; }
/* فاصل واضح بين شريط البحث/الفرز وشبكة نتائج المتجر */
.store-results{ margin-top:48px; }

/* ---- شريط البحث/الترتيب في صفحة المتجر: CSS عادي بدل الاعتماد على utility classes
   الخاصة بالعرض/الفليكس (نفس السبب اللي أثّر على تخطيط الأعمدة) ---- */
.store-toolbar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}
.store-toolbar .store-search{ width:100%; }
.store-toolbar .store-sort{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}
@media (min-width:768px){
  .store-toolbar{ flex-direction:row; align-items:center; justify-content:space-between; }
  .store-toolbar .store-search{ width:384px; flex:0 0 384px; }
  .store-toolbar .store-sort{ flex:0 0 auto; }
}

/* ---- Mobile nav drawer ---- */
#mobileNavDrawer{
  position:fixed; inset:0; top:0; z-index:60;
  background:rgba(251,250,246,.98); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:flex-end;
  padding:100px 8vw 40px; gap:28px;
  transform:translateY(-16px); opacity:0; pointer-events:none;
  transition:all .35s cubic-bezier(.22,.9,.32,1);
}
#mobileNavDrawer.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
#mobileNavDrawer a{ font-family:'Cairo',sans-serif; font-size:1.4rem; font-weight:700; color:#121815; }
#mobileNavDrawer a.is-active{ color:#1fa872; }
#navMenuBtn{ display:flex; }
@media (min-width:1024px){ #navMenuBtn{ display:none; } }

/* ---- Skeleton loading ---- */
.skeleton{
  background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size:200% 100%;
  animation:skeletonLoading 1.5s infinite;
}
@keyframes skeletonLoading{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---- تخطيط صفحة المتجر (عمودين): بـ CSS عادي بدل الاعتماد على utility classes
   خاصة بـ Tailwind Play CDN، ضمانًا إنه يشتغل حتى لو حصلت مشكلة تحميل/تفسير للسكريبت ---- */
.store-layout{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:40px;
}
@media (min-width:768px){
  .store-layout{ flex-direction:row; }
  .store-layout > aside{ width:288px; flex:0 0 288px; }
  .store-layout > section{ flex:1 1 0%; min-width:0; }
}