/* styles.css - التنسيقات المتقدمة والأنيميشن لمتجر فطاير ومعجنات الديرة الكويتية */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&display=swap');

:root {
  --primary-gold: #f59e0b;
  --primary-dark: #0c0a09;
  --card-bg: #1c1917;
  --font-family: 'Cairo', system-ui, -apple-system, sans-serif;
}

* {
  font-family: var(--font-family);
  -webkit-tap-highlight-color: transparent;
}

/* التمرير السلس والتنسيق */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #0c0a09;
  color: #f5f5f4;
  overflow-x: hidden;
}

/* شريط تمرير أنيق */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #1c1917;
}
::-webkit-scrollbar-thumb {
  background: #44403c;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f59e0b;
}

/* تأثيرات الزجاج والظلال */
.glass-panel {
  background: rgba(28, 25, 23, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.hero-glow {
  background: radial-gradient(circle at 50% 30%, rgba(245, 158, 11, 0.18) 0%, rgba(12, 10, 9, 0) 70%);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* تأثير نبض البادجات */
@keyframes pulse-subtle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.9; }
}

.pulse-badge {
  animation: pulse-subtle 2.5s infinite ease-in-out;
}

/* بطاقة الدفع KNET */
.knet-card-box {
  background: linear-gradient(135deg, #005a9c 0%, #003366 100%);
  box-shadow: 0 10px 25px -5px rgba(0, 90, 156, 0.4);
}

/* تحسينات خطوط وعناصر الإدخال */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

/* طباعة الإيصال */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-receipt, #printable-receipt * {
    visibility: visible;
  }
  #printable-receipt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}