/* ===================================================================
   متجر عز | 3Z Store - ملف الأنماط والتنسيقات الرئيسية (CSS)
   Palette: Salla Inspired Dark Palette (#0b0f17, #111827, #00b16a)
   =================================================================== */

/* -------------------------------------------------------------------
   1. إعدادات التمرير العام والشاشة (Global Smooth Scroll & Reset)
   ------------------------------------------------------------------- */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 96px;
}

body {
  font-family: 'Cairo', sans-serif;
  background-color: #0b0f17;
  color: #f1f5f9;
  overflow-x: clip;
  scroll-behavior: smooth !important;
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

::selection {
  background: #00b16a;
  color: #ffffff;
}

/* -------------------------------------------------------------------
   2. شريط التمرير المخصص بنمط سلة (Salla Custom Scrollbar)
   ------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #0b0f17;
}

::-webkit-scrollbar-thumb {
  background: #1f293d;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00b16a;
}

/* -------------------------------------------------------------------
   3. بطاقات المتجر والأسطح (Store Cards & Surfaces)
   ------------------------------------------------------------------- */
.store-card {
  background-color: #111827;
  border: 1px solid #1f293d;
  transition: all 0.2s ease-in-out;
}

.store-card:hover {
  border-color: #2e3d5b;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------------
   4. خلفية النوافذ المنبثقة (Modal Backdrop)
   ------------------------------------------------------------------- */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}

/* -------------------------------------------------------------------
   5. الحركات والتأثيرات الحركية (Keyframes & Animations)
   ------------------------------------------------------------------- */

/* حركة الظهور السينمائي للموقع عند التحميل */
@keyframes siteEntrance {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-entrance {
  animation: siteEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* حركة التلاشي والانتقال السلس بين الأقسام */
@keyframes viewFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-fade-in {
  animation: viewFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* حركة الاهتزاز الناعم عند حدوث خطأ في الإدخال */
@keyframes smoothShake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}

.shake-error {
  animation: smoothShake 0.35s ease-in-out;
  border-color: #ef4444 !important;
}

/* حركة الانزلاق وظهور رسائل الخطأ للحقول */
@keyframes slideFadeDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-error-msg {
  animation: slideFadeDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* حركات الإشعارات المنبثقة (Toast Notifications) */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
}

.toast-enter {
  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-exit {
  animation: toastFadeOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* حركة الانزلاق الناعم للنوافذ المنبثقة */
@keyframes modalSlideDown {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.auth-modal-content {
  animation: modalSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}