/**
 * vk-mobile.css — Violet Kids OS Mobile-First Layer
 *
 * يُحمَّل في كل الصفحات الرئيسية بعد vk-design-system.css
 * يُعالج: Touch · Thumb Zone · Breakpoints · iOS · Safe Area · Performance
 */

/* ══════════════════════════════════════════════════════════
   1. TOUCH FOUNDATION — منع الزووم + تسريع اللمس
══════════════════════════════════════════════════════════ */

html {
  /* يمنع الزووم عند الضغط المزدوج ويُسرِّع الاستجابة */
  touch-action:         manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust:         100%;
}

/* إزالة الومضة الزرقاء/الرمادية لحظة اللمس على كل العناصر */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  max-width:     100vw;
  /*
   * overflow-x: hidden يُنشئ BFC (Block Formatting Context) على Android
   * ويُربك المتصفح في تحديد الـ scroll container الرئيسي → scroll بطيء
   *
   * overflow-x: clip   — يقص الـ overflow بصرياً دون إنشاء BFC
   *                       متاح في Chrome 90+ (هدفنا) · Safari 16+
   * مع fallback لـ hidden للمتصفحات القديمة جداً
   */
  overflow-x:    clip;
  /* تمرير سلس ذو زخم على iOS (Native scroll feel) */
  -webkit-overflow-scrolling: touch;
  /* خطوط النظام */
  font-family: system-ui, -apple-system, 'Cairo', 'Segoe UI', sans-serif;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* منع تحديد النص على الأزرار (يمنع قائمة Copy/Paste عند الضغط المتكرر) */
button, .btn-primary, .btn-secondary, .btn-danger,
[role="button"], .act-btn, .icon-btn, .fab-btn,
.tab, .fbtn, .srow, .pwa-bar-btn, .pwa-fab {
  user-select:               none;
  -webkit-user-select:       none;
  -webkit-touch-callout:     none; /* يمنع Context Menu عند الضغط الطويل */
  touch-action:              manipulation;
}

/* منع تأخير اللمس في كل العناصر التفاعلية */
a, button, input, select, textarea, label {
  touch-action: manipulation;
}

/* ══════════════════════════════════════════════════════════
   2. TOUCH TARGETS — حد أدنى 48×48px
══════════════════════════════════════════════════════════ */

/* أزرار الأيقونات الصغيرة تحتاج منطقة لمس أكبر من حجمها المرئي */
.icon-btn, .ibtn, .back-btn, .eye-btn,
.pwa-bar-close, .act-btn, .qty-btn {
  min-width:  44px;
  min-height: 44px;
  display:    inline-flex;
  align-items: center;
  justify-content: center;
}

/* أزرار الـ FAB (كبيرة بطبيعتها — تأكيد فقط) */
.fab-btn, .pwa-bar-btn { min-height: 48px; }

/* حقول الإدخال: 16px يمنع iOS من الزووم عند الـ focus */
input, select, textarea {
  font-size: max(16px, 1em) !important;
}

/* ══════════════════════════════════════════════════════════
   3. HOVER → ACTIVE — تأثير اللمس بدل الـ Hover
   على أجهزة اللمس لا يوجد Hover حقيقي،
   نستبدله بـ :active لرد فعل بصري فوري
══════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

  /* إزالة تأثيرات Hover التي لا تعمل على اللمس */
  .pc-add:hover,
  .pwa-bar-btn:hover,
  .tone-btn:hover,
  .lang-btn:hover,
  .badge-btn:hover,
  .fbtn:hover,
  .act-btn:hover,
  .srow:hover,
  .order-card:hover,
  .d-card:hover,
  .pcard:hover { transform: none; filter: none; box-shadow: inherit; }

  /* استبدالها بـ :active للرد الفوري عند اللمس */
  .pc-add:active       { transform: scale(.96); }
  .pwa-bar-btn:active  { transform: scale(.94); }
  .fbtn:active         { opacity: .82; transform: scale(.96); }
  .act-btn:active      { transform: scale(.92); filter: brightness(.92); }
  .srow:active         { background: rgba(139,47,201,.07); }
  .order-card:active   { transform: scale(.988); }
  .d-card:active       { opacity: .9; }

  /* تكبير أهداف اللمس أكثر على الشاشات الصغيرة */
  .act-btn { min-width: 44px; min-height: 44px; }

  /* الأزرار الكبيرة في أشرطة التحديث */
  .status-btn { padding: 14px !important; }
}

/* ══════════════════════════════════════════════════════════
   4. RESPONSIVE BREAKPOINTS — 3 مستويات
══════════════════════════════════════════════════════════ */

/* ── موبايل صغير (< 360px) ───────────────────────────── */
@media (max-width: 359px) {

  /* شبكة عمود واحد للمنتجات */
  .p-grid { grid-template-columns: 1fr !important; }

  /* تقليل padding على الجانبين */
  .p-grid, .cat-grid, .stats, .filter-row {
    padding-inline: 8px;
  }

  /* نص أصغر في الـ topbar */
  .logo-ar { display: none; }
  .lb { width: 20px; height: 20px; font-size: 10px; }

  /* إخفاء التواريخ الجانبية في بطاقات الطلبات */
  .order-time, .cust-city { font-size: 9px; }

  /* تقليل حجم الـ stats */
  .stat { min-width: 70px; padding: 8px 10px; }
  .stat-n { font-size: 18px; }

  /* الـ fab أزرار أصغر */
  .fab-btn { padding: 8px 12px; font-size: 12px; }

  /* الـ feats strip: عمودان على الشاشات الصغيرة جداً */
  .feats { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .feat  { padding: 10px 4px; }
  .feat-em { font-size: 18px; }
}

/* ── موبايل كبير / Phablet (360–480px) ── الوضع المثالي */
@media (min-width: 360px) and (max-width: 480px) {

  /* شبكة عمودين — المثالية للموبايل */
  .p-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }

  /* أزرار الطلب في أسفل البطاقة */
  .order-footer { flex-wrap: wrap; gap: 6px; }
  .action-btns  { width: 100%; justify-content: flex-end; }
}

/* ── تابلت / Landscape (> 480px) ────────────────────── */
@media (min-width: 480px) {

  /* 3 أعمدة للمنتجات */
  .p-grid { grid-template-columns: repeat(3, 1fr); }

  /* Sidebar للتنقل يظهر في الـ inventory */
  .inv-sidebar { display: flex !important; }

  /* 4 أعمدة للفئات */
  .cat-grid { grid-template-columns: repeat(5, 1fr); }

  /* Stats في صف واحد */
  .stats { flex-wrap: nowrap; }
}

/* ── Landscape orientation ───────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {

  /* تصغير التوبار في landscape لتوفير مساحة */
  .topbar { padding: 6px 14px; }

  /* إخفاء الـ hero section */
  .hero { display: none; }

  /* الـ stats في شريط أفقي */
  .stats { padding: 6px 14px; gap: 6px; }
  .stat  { padding: 6px 10px; }
  .stat-n { font-size: 16px; }

  /* تصغير Bottom Nav */
  .bnav { padding: 4px 14px; }
  .bn-em { font-size: 18px; }
  .bn    { font-size: 9px; }
}

/* ══════════════════════════════════════════════════════════
   5. SAFE AREA — الشق والـ Home Indicator
══════════════════════════════════════════════════════════ */

/* Bottom navigation — يجب أن يكون فوق الـ Home Indicator */
.bnav {
  padding-bottom: calc(
    env(safe-area-inset-bottom, 0px) + 7px
  ) !important;
}

/* PWA install bar */
.pwa-bar {
  padding-bottom: calc(
    env(safe-area-inset-bottom, 0px) + 11px
  ) !important;
}

/* Toasts — بعيداً عن الشق */
.toasts {
  top: calc(env(safe-area-inset-top, 0px) + 70px) !important;
}

/* Topbar — بعيداً عن الشق العلوي */
.topbar {
  padding-top: calc(
    env(safe-area-inset-top, 0px) + 9px
  );
}

/* Body padding bottom شامل */
body {
  padding-bottom: max(
    env(safe-area-inset-bottom, 0px),
    8px
  );
}

/* ══════════════════════════════════════════════════════════
   6. INPUT FORMS — منع الزووم + تجربة أفضل
══════════════════════════════════════════════════════════ */

/* منع قلب الخلفية عند autofill في iOS/Android */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cream, #FEF8EC) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* تحسين تجربة الكتابة على الموبايل */
input[type="text"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="email"],
textarea {
  -webkit-appearance: none; /* يُزيل الأنماط الافتراضية على iOS */
  border-radius:      0;    /* يمنع iOS من تدوير الحواف تلقائياً */
  font-size:          16px; /* مهم: يمنع iOS من الزووم عند الـ focus */
}
input { border-radius: inherit !important; } /* استعادة الـ border-radius المُحدَّد يدوياً */

/* تمييز واضح للحقل المُفعَّل */
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(139,47,201,.5);
  outline-offset: 1px;
}

/* ══════════════════════════════════════════════════════════
   7. SCROLL — تمرير ناعم وبدون اهتزاز
══════════════════════════════════════════════════════════ */

/* تمرير ناعم مع تسارع GPU */
.p-scroll, .filter-row, .tabs, .stats {
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch; /* inertia scroll على iOS */
  scroll-snap-type:           x proximity;
  scroll-behavior:            smooth;
  overscroll-behavior-x:      contain; /* يمنع scroll التطبيق عند الوصول للنهاية */
  scrollbar-width:            none;    /* إخفاء Scrollbar في Firefox */
  -ms-overflow-style:         none;
}
.p-scroll::-webkit-scrollbar,
.filter-row::-webkit-scrollbar,
.tabs::-webkit-scrollbar { display: none; }

/*
 * overscroll-behavior على body:
 * 'none'    = يكسر الـ scroll الطبيعي على Android Chrome (لا تستخدمه)
 * 'contain' = يمنع pull-to-refresh دون كسر الـ scroll
 * فُضِّل عدم التدخل (auto) وترك Android يتصرف بشكل افتراضي
 */
/* body { overscroll-behavior: contain; } ← مُعلَّق — لا تُفعِّله بدون اختبار */

/* ══════════════════════════════════════════════════════════
   8. PERFORMANCE — تحسينات الأداء على الشبكات البطيئة
══════════════════════════════════════════════════════════ */

/* تسريع الـ animations بالـ GPU — بدون pwa-bar/pwa-fab لأن
   transform على fixed elements يُنشئ stacking context جديد
   يجعلها خلف المحتوى بدلاً من فوقه */
.order-card, .d-card, .pcard, .d-step, .overlay, .drawer {
  will-change:        transform;
  transform:          translateZ(0);
  backface-visibility: hidden;
}

/* Lazy loading للصور */
img:not([loading]) { loading: lazy; }

/* content-visibility على بطاقات المنتجات فقط (ليس كل الصور)
   تطبيقه على كل img يسبب scroll-jank في القوائم الطويلة */
.pcard, .rec-card, .order-card {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

/* ══════════════════════════════════════════════════════════
   9. PREFERS-REDUCED-MOTION — إمكانية الوصول
══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto  !important;
  }

  .pwa-fab,
  .pwa-bar,
  .toast        { animation: none !important; }
  .pcard:hover  { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   10. HIGH DPI — شاشات Retina و AMOLED
══════════════════════════════════════════════════════════ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

  /* خطوط أحدّ على شاشات عالية الكثافة */
  body { -webkit-font-smoothing: antialiased; }

  /* حدود أدق (0.5px بدل 1px) */
  .order-card, .d-card, .pcard, .info-row {
    border-width: 0.5px;
  }
}

/* ══════════════════════════════════════════════════════════
   11. THUMB ZONE — منطقة الإبهام
   الأزرار الأساسية في النصف الأسفل من الشاشة (> 50vh)
══════════════════════════════════════════════════════════ */

/* FAB في أسفل اليسار/اليمين — سهل الوصول بالإبهام */
.fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }

/* زر "إرسال الطلب" دائماً في الأسفل */
.btn-pay, #login-btn, .pwa-bar-btn {
  position: sticky;
  bottom:   env(safe-area-inset-bottom, 8px);
}

/* ══════════════════════════════════════════════════════════
   12. PWA STANDALONE — تجربة التطبيق الكامل
══════════════════════════════════════════════════════════ */

/* عند تشغيل التطبيق كـ PWA (بدون شريط المتصفح) */
@media (display-mode: standalone) {

  /* إضافة مساحة للـ Status Bar في الأعلى */
  .topbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  }

  /* إخفاء أي تلميحات "تثبيت التطبيق" */
  .pwa-bar,
  .pwa-fab { display: none !important; }

  /* منع التحديد في وضع التطبيق الكامل */
  body { user-select: none; }

  /* السماح بالتحديد في حقول الإدخال والنصوص */
  input, textarea, p, .post-preview, .inv-card { user-select: text; }
}

/* ══════════════════════════════════════════════════════════
   13. PRINT — طباعة نظيفة
══════════════════════════════════════════════════════════ */

@media print {
  .bnav, .topbar, .fab, .pwa-bar, .pwa-fab,
  .tabs, .filter-row, .toasts,
  button:not(.print-show) { display: none !important; }

  body { max-width: 100% !important; padding: 0 !important; }
}

/* ══════════════════════════════════════════════════════════
   14. تحسينات إضافية — مشاكل محددة تم اكتشافها
══════════════════════════════════════════════════════════ */

/* ── overflow-x على كل الصفحات ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── touch targets عالمية: أي زر أقل من 44px يحصل على padding ── */
@media (hover: none) and (pointer: coarse) {
  button, [role="button"], a[href], select {
    min-height: 44px;
  }
  /* استثناء: الأزرار الصغيرة المتداخلة في جداول */
  td button, .table-action { min-height: 36px; }
}

/* ── iOS: منع bounce scroll على العناصر الداخلية ── */
.drawer, .modal, .cart-panel, .sidebar, .inv-card {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── شاشات 320px: إصلاحات طارئة ── */
@media (max-width: 360px) {
  /* تقليل padding المتجر */
  .p-grid { gap: 8px !important; }
  .pc-body { padding: 8px 10px 10px; }
  .pc-price { font-size: 14px; }
  .pc-name  { font-size: 11px; }

  /* topbar أكثر إحكاماً */
  .topbar { padding: 8px 10px; gap: 6px; }

  /* chips أصغر */
  .chip, .cat-chip { padding: 5px 10px; font-size: 11px; }
}

/* ── landscape على الموبايل ── */
@media (orientation: landscape) and (max-height: 500px) {
  .bnav  { padding: 3px 14px; }
  .bn-em { font-size: 17px; }
  .topbar { padding-top: calc(5px + env(safe-area-inset-top, 0px)); }
  /* إخفاء hero في landscape لتوفير مساحة */
  .hero { display: none !important; }
}

/* ── input autofill styling fix على iOS ── */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--ink, #2D1B69) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ── select الافتراضي على iOS ── */
select {
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238B7EC8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 32px;
}

/* ══════════════════════════════════════════════════════════
   SCROLL LOCK — يمنع تمرير الخلفية عند فتح Modal/Drawer
   يعمل على iOS Safari عبر position:fixed مع حفظ موضع التمرير
══════════════════════════════════════════════════════════ */
body.vk-scroll-locked {
  overflow:  hidden;
  position:  fixed;          /* الحل الوحيد الذي يعمل على iOS Safari */
  width:     100%;
  /* --vk-scroll-y تُضبَط ديناميكياً من JS لمنع القفز للأعلى */
  top:       var(--vk-scroll-y, 0px);
}

/* ══════════════════════════════════════════════════════════
   HAPTIC-STYLE VISUAL FEEDBACK
   تأثير ضغط بصري يُحاكي اللمس الحقيقي على أجهزة اللمس
   فقط على @media (hover: none) — لا يؤثر على Desktop
══════════════════════════════════════════════════════════ */

/* ── Press scale: أزرار الـ CTA ─────────────────────────── */
@media (hover: none) {
  .btn-primary:active,
  .pc-add:active,
  .pwa-btn-install:active,
  [data-haptic]:active {
    transform: scale(0.94);
    opacity: 0.88;
    transition: transform 60ms linear, opacity 60ms linear;
  }

  /* أزرار صغيرة: ضغط أخف */
  .ibtn:active,
  .icon-btn:active,
  .back-btn:active,
  .chip:active,
  .cat-btn:active,
  .tab:active {
    transform: scale(0.91);
    opacity: 0.82;
    transition: transform 55ms linear, opacity 55ms linear;
  }

  /* بطاقات المنتجات: نبضة خفيفة */
  .pcard:active {
    transform: scale(0.975);
    box-shadow: none;
    transition: transform 80ms linear;
  }

  /* أزرار الكمية +/- */
  .qty-btn:active {
    transform: scale(0.87);
    transition: transform 50ms linear;
  }

  /* إعادة الحجم الطبيعي فوراً عند رفع الإصبع */
  .btn-primary,
  .pc-add,
  .pwa-btn-install,
  [data-haptic],
  .ibtn, .icon-btn, .back-btn,
  .chip, .cat-btn, .tab,
  .pcard, .qty-btn {
    transition:
      transform var(--dur-base, 220ms) var(--spring, cubic-bezier(.34,1.56,.64,1)),
      box-shadow var(--dur-base, 220ms) var(--smooth, ease),
      opacity    var(--dur-fast, 150ms) ease;
  }
}

/* ── Ripple effect: دوائر ضوئية عند اللمس ──────────────── */
/* يعمل على جميع الأجهزة — خفيف ومريح */
.btn-primary,
.pc-add,
.chip.active ~ .chip,
[data-ripple] {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.pc-add::after,
[data-ripple]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%),
    rgba(255,255,255,.28) 0%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.btn-primary:active::after,
.pc-add:active::after,
[data-ripple]:active::after {
  opacity: 1;
  transition: opacity 0ms;
}

/* ══════════════════════════════════════════════════════════
   OVERSCROLL CONTAINMENT
   يمنع تمرير الجسم عند وصول Drawer/Modal لنهاية محتواه
   مهم جداً على iOS لتجنب الـ "rubber band" effect
══════════════════════════════════════════════════════════ */

/*
 * overscroll-behavior: contain — على عناصر لها overflow-y: auto/scroll فعلاً
 * لا نضعه على عناصر لا تتمرر — يُربك Android Chrome في تحديد الـ scroll container
 */
.drawer,
.modal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y:      contain;
}
/* مناطق ذات scroll خاصة — منع تسرب الـ scroll للصفحة */
.cart-items,
.dw-body,
.table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y:      contain;
}

/* ══════════════════════════════════════════════════════════
   SCROLL SNAP — Category & Filter Bars
   يُعطي إحساساً أكثر انسيابية عند تمرير التصنيفات أفقياً
══════════════════════════════════════════════════════════ */

/* Horizontal chip/tab rows */
.cats,
#cats-row,
.cat-chips,
.chips-row,
.tabs,
.filter-tabs,
[class*="-tabs"]:not(.share-tabs) {
  scroll-snap-type:    x proximity;  /* proximity أهدأ من mandatory */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* كل chip/tab يرتبط بنقطة snap */
.cats > *,
#cats-row > *,
.cat-chips > *,
.chips-row > *,
.tabs > *,
.filter-tabs > *,
[class*="-tabs"]:not(.share-tabs) > * {
  scroll-snap-align: start;
}

/* ══════════════════════════════════════════════════════════
   SMOOTH SCROLL — داخل الصفحة
══════════════════════════════════════════════════════════ */

/* ضمان scroll-behavior على كل عنصر يدعم التمرير */
html {
  scroll-behavior: smooth;
}

/* تعطيل الحركة السلسة لمن يفضل عدمها */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drawer, .modal { transition: none !important; }
}