/* SHEIN GAZA PAL — shared base styles
   يُحمَّل في كل الصفحات قبل ملف tailwind.config (assets/js/config.js) */

@layer base {
  html,
  body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fcf9f4;
    color: #1c1c19;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    overscroll-behavior-y: none;
  }

  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
  }

  main > :first-child {
    margin-top: 0 !important;
  }

  main > :last-child {
    margin-bottom: 0 !important;
  }
}

/* الشرائط الأفقية (التصنيفات، اللقطات) تُخفي المؤشّر، أمّا الصفحة نفسها
   فتحتفظ بمؤشّر تمرير نحيف على الشاشات الكبيرة لأنه جزء من توقّع المستخدم. */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

@media (min-width: 768px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #c4c7c7 transparent;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #d6d3cd;
    border: 3px solid #fcf9f4;
    border-radius: 9999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #b9b6b0;
  }
}

@media (max-width: 767px) {
  ::-webkit-scrollbar {
    display: none;
  }
}

/* الحقول: إزالة مظهر المتصفح الافتراضي والحفاظ على اتجاه RTL */
input,
textarea,
select {
  font-family: inherit;
  color: inherit;
}

input::placeholder,
textarea::placeholder {
  color: #9a9995;
}

/* إخفاء أسهم حقول الأرقام */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

/* الأرقام واللواتن اللاتينية داخل نص عربي تبقى بالاتجاه الصحيح */
.ltr-nums {
  direction: ltr;
  unicode-bidi: embed;
}

/* الروابط الداخلية (فهرس صفحة الشروط) تتوقّف تحت الترويسة الثابتة لا خلفها */
.sgp-anchor {
  scroll-margin-top: 6.5rem;
}

/* صورة لم تُحمَّل: خلفية هادئة بدل المربع الفارغ */
img {
  background-color: #f0ede9;
}

/* حركة ظهور لطيفة للبطاقات المُولَّدة من JS */
@keyframes sgp-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sgp-rise {
  animation: sgp-rise 0.32s ease-out both;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================================
   الحاوية المتجاوبة
   ------------------------------------------------------------------
   التصميم موجّه للموبايل أولاً (عمود واحد بعرض 480px)، وعلى الشاشات
   الأكبر تتوسّع الحاوية بدل أن تبقى شريطاً ضيّقاً في منتصف الشاشة.
   كل صفحة تختار سعتها القصوى عبر الصنف المرافق: sgp-wide / sgp-mid.
   ================================================================== */

.sgp-container {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .sgp-container {
    max-width: 720px;
  }

  .sgp-container.sgp-mid {
    max-width: 768px;
  }

  .sgp-container.sgp-wide {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .sgp-container.sgp-mid {
    max-width: 960px;
  }

  .sgp-container.sgp-wide {
    max-width: 1040px;
  }
}

@media (min-width: 1280px) {
  .sgp-container.sgp-mid {
    max-width: 1040px;
  }

  .sgp-container.sgp-wide {
    max-width: 1220px;
  }
}

/* العمود الجانبي الثابت في صفحات الدفع والسلة على الشاشات الكبيرة */
@media (min-width: 1024px) {
  .sgp-sticky-aside {
    position: sticky;
    top: 6.5rem;
  }
}

/* المؤشّر يتحوّل ليد على العناصر القابلة للنقر — مهم على الديسكتوب فقط */
@media (hover: hover) {
  button:not(:disabled),
  [role='button'],
  a[href],
  label[for] {
    cursor: pointer;
  }
}

/* تركيز واضح بلوحة المفاتيح — ضروري لتصفّح الديسكتوب */
:focus-visible {
  outline: 2px solid #785926;
  outline-offset: 2px;
  border-radius: 6px;
}