/* أنماط وتأثيرات مخصصة للبقالة */

body {
  font-family: 'Cairo', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* دعم شاشات الآيفون والـ Safe Areas */
.safe-top {
  padding-top: calc(12px + env(safe-area-inset-top));
}

.safe-bottom {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

/* تأثير التدرج الإشعاعي للخلفيات الفخمة */
.bg-radial-gradient {
  background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, rgba(15,17,26,0) 70%);
}

/* خطوط حزام البضائع المتحرك */
.conveyor-lines {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.05) 10px,
    rgba(255, 255, 255, 0.05) 20px
  );
  animation: scroll-conveyor 12s linear infinite;
}

@keyframes scroll-conveyor {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 400px 0;
  }
}

/* إلغاء شريط التمرير الافتراضي */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* شاشة الـ POS بتأثير خطوط المسح الكلاسيكية */
.pos-screen {
  background-color: #06070a;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0,0,0,0.5);
}

.bg-grid {
  background-size: 20px 20px;
  background-image: linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
}

/* تأثيرات الأزرار واللمس */
button {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

button:active {
  transform: scale(0.96);
}

/* تأثير نبض الليزر الأحمر للماسح الضوئي */
#laser-scanner {
  filter: blur(0.5px);
}

/* كروت الترحيب */
.welcome-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}