/* ==========================================================================
   BLAZMA — تحسينات الهاتف
   يُحمَّل بعد بقية ملفات التنسيق فيغلبها داخل حدوده فقط.
   ثلاثة أهداف: أزرار يسهل ضغطها بالإصبع، خط مقروء، ومحتوى يبدأ مبكراً
   بدل عناوين ومسافات تأكل الشاشة. لا يغيّر الألوان ولا الشكل العام.
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    /* أصغر خطين كانا 10 و11.5 بكسل: صغيران على الهاتف */
    --fs-caption: .8rem;
    --fs-xs: .84rem;
    --fs-sm: .9rem;
  }

  /* ---------- مساحة الضغط: 44 بكسل هي أقل مقاس يصيبه الإصبع بثقة ---------- */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; height: auto; padding-block: 8px; }
  .btn-lg { min-height: 52px; }
  .btn-icon, .btn-icon.btn-sm { width: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .pcard-fav { width: 40px; height: 40px; }
  .pcard-fav svg { width: 18px; height: 18px; }
  .select, .input, select, input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="search"], input[type="tel"] { min-height: 44px; }
  /* منع تكبير الصفحة تلقائياً في iOS عند لمس أي خانة: يحدث تحت 16 بكسل */
  input, select, textarea { font-size: 16px; }

  /* ---------- الرأس: مساحة أوسع فلا تتزاحم العناصر ----------
     على شاشة 375 بكسل يجتمع الشعار وأربعة أزرار في سطر واحد، فيلتصق بعضها ببعض.
     نضيّق الهوامش والفواصل بدل تصغير الأزرار، فتبقى سهلة الضغط. */
  .header-actions { gap: 0; }
  .header-main { gap: var(--s-2); }
  .logo { font-size: .98rem; gap: 6px; }
  .logo svg { width: 22px; height: 22px; }

  /* ---------- القسم الترحيبي: أقصر فتظهر المنتجات أسرع ---------- */
  .hero-chips .badge-lg { font-size: var(--fs-caption); padding: 5px 10px; }
  .hero h1 { font-size: 1.85rem; margin: var(--s-3) 0 var(--s-2); }
  .hero .lead { font-size: var(--fs-sm); }
  /* زرّان متجاوران بدل مكدّسين: يوفّران سطراً كاملاً من الشاشة */
  .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .hero-cta .btn { min-height: 48px; padding-inline: var(--s-3); }

  .mobile-nav a { min-height: 56px; font-size: var(--fs-caption); }
  .mobile-nav a svg { width: 22px; height: 22px; }

  /* ---------- المحتوى يبدأ أبكر ---------- */
  /* المسار (الرئيسية ‹ السوق ‹ …) يأخذ سطرين أحياناً، وزر الرجوع في الهاتف يغني عنه */
  .crumbs { display: none; }
  .page-head { padding-block: var(--s-5) var(--s-4); }
  .page-head h1 { margin: 0 0 var(--s-2); }
  .hero { padding-block: var(--s-6) var(--s-5); }
  .section { padding-block: var(--s-6); }

  /* ---------- بطاقة المنتج: صورة أصغر وسعر أوضح ---------- */
  .pcard-body { padding: var(--s-3); gap: 6px; }
  .pcard-title { font-size: var(--fs-sm); }
  .pcard .price-now, .pcard .pe-price { font-size: 1.05rem; }

  /* الشارات وعناوين القوائم كانت 10 بكسل: أصغر من أن تُقرأ على الهاتف */
  .badge, .dd-label { font-size: var(--fs-caption); }

  /* ---------- التذييل: روابط متباعدة يسهل ضغطها ---------- */
  .footer-col a { display: flex; align-items: center; min-height: 40px; }

  /* ---------- الجداول في لوحة الإدارة: تمرير أفقي بدل قصّ الأعمدة ---------- */
  .table-wrap, .utable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- النوافذ المنبثقة: ورقة من الأسفل يسهل الوصول لأزرارها ---------- */
  .modal { max-height: 88vh; }
  .modal-foot { position: sticky; bottom: 0; background: var(--card); padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }

  /* ---------- شريط الشراء الثابت: زر أكبر ونص لا يزاحمه ---------- */
  .buybar { padding-block: 12px; }
  .buybar .btn { min-height: 48px; padding-inline: var(--s-5); }
}

/* تنقل الأسفل يظهر حتى 899 بكسل، فمساحته تُحسب عند الحد نفسه */
@media (max-width: 899px) {
  /* في الآيفون يلتصق الشريط بشريط Safari السفلي: مسافة أمان تحته دائماً */
  .mobile-nav { padding-bottom: max(env(safe-area-inset-bottom), 8px); }
  /* المساحة تحت المحتوى تساوي ارتفاع الشريط فعلياً، وإلا اختفى آخر سطر خلفه */
  body { padding-bottom: calc(68px + max(env(safe-area-inset-bottom), 8px)); }
}

/* شريط أقسام الحساب والإدارة يصير أفقياً تحت 1100 بكسل.
   Safari يضغط عناصره حتى تُقصّ أسماؤها («ط.» بدل «طلباتي») بعكس بقية
   المتصفحات التي تمرّرها، وflex-shrink صفر يوقف هذا الضغط. */
@media (max-width: 1099px) {
  .dash-side, .tabs { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .dash-side .dash-group, .dash-side .dash-group-items,
  .dash-side .dash-nav-link, .tabs .tab { flex: 0 0 auto; }
  .dash-nav-link, .tab { white-space: nowrap; }
}

/* التطبيق المثبَّت على الشاشة الرئيسية (بلا شريط متصفح):
   في الآيفون قد يغطي شريط الحالة (الساعة والبطارية) أعلى الصفحة.
   هذه المسافة تساوي ارتفاعه فعلياً، وتساوي صفراً حين لا يوجد. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .announce, .site-header { padding-top: env(safe-area-inset-top); }
  .announce + .site-header { padding-top: 0; }
  .site-header { top: 0; }
}