/* ====== إعدادات Tailwind المخصصة ====== */
html { 
  scroll-behavior: smooth; 
}

.no-scrollbar::-webkit-scrollbar { 
  display: none; 
}

/* ====== تحسينات للهواتف المحمولة ====== */
@media (max-height: 600px) {
  #customerModal .max-h-\[90vh\] {
    max-height: 95vh;
  }
}

/* ====== تحسين التمرير في النافذة ====== */
#customerModal .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#customerModal .overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

#customerModal .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

#customerModal .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#customerModal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

/* ====== إعدادات Tailwind المخصصة ====== */
:root {
  --base-bg: #0B0B0C;
  --base-card: #131316;
  --base-stroke: #222226;
  --base-text: #EDEDED;
  --base-sub: #B7B7BA;
  --base-brand: #26D07C;
}

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

/* ====== إعدادات عامة ====== */
body {
  font-family: 'Cairo', system-ui, sans-serif;
  background-color: var(--base-bg);
  color: var(--base-text);
}

/* ====== تحسينات إضافية ====== */
.product-card {
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.payment-btn {
  transition: all 0.3s ease;
}

.payment-btn:hover {
  transform: translateY(-1px);
}

/* ====== القائمة الجانبية للهواتف ====== */
#mobileMenu {
  transition: opacity 0.3s ease;
}

#mobileMenu .transform {
  transition: transform 0.3s ease;
}

#mobileMenu.show .transform {
  transform: translateX(0);
}

#mobileMenu.show {
  display: block;
}

/* ====== Toast Notifications ====== */
.toast {
  @apply bg-base-card ring-1 ring-base-stroke/70 rounded-xl2 p-4 shadow-soft backdrop-blur-sm;
  @apply transform translate-x-full opacity-0 transition-all duration-300 ease-out;
  @apply pointer-events-auto;
  min-width: 300px;
  max-width: 400px;
}

.toast.show {
  @apply translate-x-0 opacity-100;
}

.toast.success {
  @apply ring-green-500/50 bg-green-500/10;
}

.toast.error {
  @apply ring-red-500/50 bg-red-500/10;
}

.toast.warning {
  @apply ring-yellow-500/50 bg-yellow-500/10;
}

.toast.info {
  @apply ring-blue-500/50 bg-blue-500/10;
}

.toast-content {
  @apply flex items-start gap-3;
}

.toast-icon {
  @apply w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5;
}

.toast.success .toast-icon {
  @apply bg-green-500/20 text-green-400;
}

.toast.error .toast-icon {
  @apply bg-red-500/20 text-red-400;
}

.toast.warning .toast-icon {
  @apply bg-yellow-500/20 text-yellow-400;
}

.toast.info .toast-icon {
  @apply bg-blue-500/20 text-blue-400;
}

.toast-message {
  @apply flex-1;
}

.toast-title {
  @apply font-semibold text-base-text text-sm;
}

.toast-description {
  @apply text-base-sub text-xs mt-1;
}

.toast-close {
  @apply w-6 h-6 rounded-full hover:bg-base-stroke/30 flex items-center justify-center;
  @apply text-base-sub hover:text-base-text transition-colors cursor-pointer;
  @apply flex-shrink-0;
}

/* تحسينات للهواتف المحمولة */
@media (max-width: 640px) {
  .toast {
    min-width: 280px;
    max-width: calc(100vw - 2rem);
  }
  
  #toastContainer {
    @apply top-2 right-2 left-2;
  }
}

/* ====== تحسينات للشاشات الصغيرة ====== */
@media (max-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .text-4xl {
    font-size: 2rem;
  }
  
  .text-2xl {
    font-size: 1.5rem;
  }
  
  /* تحسين عرض القائمة الجانبية على الشاشات الصغيرة جداً */
  #mobileMenu .w-80 {
    width: 100vw;
    max-width: 320px;
  }
}

/* ====== تحسينات للطباعة ====== */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}