/* ================================================================
   mobile.css — فیکس کامل ریسپانسیو موبایل
   این فایل بعد از style.css لود می‌شود و همه مشکلات موبایل را
   رفع می‌کند. دست به style.css نزنید.
   ================================================================ */

/* ── جلوگیری از اسکرول افقی (ریشه مشکلات موبایل) ──────────────── */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}
* {
  min-width: 0;
  box-sizing: border-box;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ── فضای safe area آیفون (notch / home indicator) ───────────────
   iOS نیاز به env() دارد تا محتوا زیر نوار پایین نرود */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
  --bnav-real-h: calc(64px + var(--safe-bottom));
}

/* ================================================================
   موبایل — زیر ۷۶۸ پیکسل
   ================================================================ */
@media (max-width: 767px) {

  /* ── body padding برای بوتوم ناو ── */
  body {
    padding-bottom: var(--bnav-real-h) !important;
  }

  /* ── بوتوم ناو با safe area ── */
  .mobile-bottom-nav {
    height: var(--bnav-real-h) !important;
    padding-bottom: var(--safe-bottom) !important;
    display: flex !important;
  }

  /* ── توپبار ── */
  .topbar { display: none !important; }

  /* ═══ هدر ════════════════════════════════════════════════════ */
  .site-header { position: sticky; top: 0; z-index: 100; }

  .header-main {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    height: auto !important;
    padding: 10px 0 !important;
  }

  /* همبرگر — چپ */
  .hamburger {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: unset !important;
  }

  /* لوگو — وسط */
  .logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: center !important;
    font-size: 22px !important;
  }
  .logo small { display: none !important; }

  /* سبد خرید آیکون — راست */
  .header-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    gap: 4px !important;
  }
  .header-actions a:not(.cart-link) { display: none !important; }
  .header-actions .cart-link {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .header-actions .cart-link span:first-child { display: none !important; }
  .header-actions .cart-link::before { content: '🛒'; margin-left: 4px; }

  /* جستجو — ردیف دوم کامل */
  .search-box {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    padding: 8px 14px !important;
  }
  .search-box input { font-size: 14px !important; }

  /* ناو دسته‌بندی */
  .main-nav ul {
    padding: 6px 0 !important;
    gap: 4px !important;
  }
  .main-nav a {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
  }

  /* ═══ هیرو ══════════════════════════════════════════════════ */
  .hero {
    padding: 28px 18px 60px !important;
    border-radius: 16px !important;
    min-height: auto !important;
    flex-direction: column !important;
  }
  .hero .hero-stats { display: none !important; }
  .hero-text h1,
  .hero-text > h1 { font-size: 26px !important; line-height: 1.4 !important; }
  .hero-eyebrow { font-size: 11.5px !important; padding: 5px 10px !important; }
  .hero-text p { font-size: 14px !important; margin-bottom: 20px !important; }
  .hero-actions { gap: 10px !important; }
  .hero-actions .btn { padding: 10px 18px !important; font-size: 13.5px !important; }

  /* ═══ گرید دسته‌بندی‌ها ════════════════════════════════════ */
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cat-card {
    padding: 16px 10px !important;
  }
  .cat-card .ic { width: 44px; height: 44px; font-size: 20px; }
  .cat-card span { font-size: 12px !important; }

  /* ═══ گرید محصولات ═════════════════════════════════════════ */
  .product-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .product-card { border-radius: 12px !important; }
  .product-thumb { aspect-ratio: 3/4 !important; }
  .product-body { padding: 10px 10px 12px !important; gap: 4px !important; }
  .product-name { font-size: 13px !important; min-height: 36px !important; }
  .price-now { font-size: 13.5px !important; }
  .price-old { font-size: 11px !important; }
  .add-cart-btn { padding: 8px 10px !important; font-size: 12.5px !important; margin-top: 6px !important; }

  /* ═══ صفحه فروشگاه ════════════════════════════════════════ */
  .shop-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* فیلتر دراور */
  .filter-box {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(300px, 85vw) !important;
    transform: translateX(110%) !important;
    transition: transform .3s ease !important;
    overflow-y: auto !important;
    z-index: 201 !important;
    border-radius: 0 !important;
    padding-top: calc(20px + var(--safe-top)) !important;
    padding-bottom: calc(20px + var(--safe-bottom)) !important;
  }
  .filter-box.open { transform: translateX(0) !important; }

  .toolbar-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  /* ═══ صفحه محصول ══════════════════════════════════════════ */
  .product-view {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-bottom: calc(80px + var(--safe-bottom)) !important;
  }
  .gallery-main {
    aspect-ratio: 1/1 !important;
    border-radius: 16px !important;
  }
  .gallery-thumbs img {
    width: 56px !important;
    height: 74px !important;
    border-radius: 8px !important;
  }
  .pv-title { font-size: 22px !important; }
  .pv-price-now { font-size: 22px !important; }
  .pv-price-block { padding: 14px 16px !important; }
  .size-chips { gap: 6px !important; }
  .size-chip {
    min-width: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
  }
  .pv-actions { flex-wrap: wrap !important; }
  .pv-actions .btn { flex: 1 !important; min-width: 120px !important; }
  .product-meta-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .meta-item { padding: 8px 10px !important; font-size: 12px !important; }

  /* دکمه ثابت سبد در موبایل */
  .sticky-cart-bar {
    display: flex !important;
    bottom: var(--bnav-real-h) !important;
    padding: 10px 16px !important;
    gap: 10px !important;
  }
  .sticky-price { font-size: 15px !important; }

  /* ═══ سبد خرید ════════════════════════════════════════════ */
  /* جدول → کارت در موبایل */
  .cart-table { display: block !important; }
  .cart-table thead { display: none !important; }
  .cart-table tbody { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .cart-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--cream-card) !important;
    border: 1px solid var(--border-solid) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .cart-table tr:hover td { background: none !important; }
  .cart-table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    font-size: 13.5px !important;
  }
  /* تصویر + نام */
  .cart-prod { gap: 12px !important; }
  .cart-prod .thumb {
    width: 70px !important;
    height: 92px !important;
    flex-shrink: 0 !important;
  }
  .cart-prod-name { font-size: 14px !important; }
  /* ردیف قیمت + تعداد + حذف */
  .cart-table td:nth-child(2),
  .cart-table td:nth-child(3),
  .cart-table td:nth-child(4),
  .cart-table td:nth-child(5) { display: inline-flex !important; align-items: center !important; }
  /* کمی فضا */
  .cart-table tr > td + td { border-top: 1px solid var(--border) !important; padding-top: 8px !important; }
  .cart-table tr > td:nth-child(2) { border: none !important; padding: 0 !important; }

  /* لایه سبد + خلاصه */
  .shop-layout[style*="340px"],
  div[style*="grid-template-columns:1fr 340px"] {
    grid-template-columns: 1fr !important;
  }

  /* ═══ تکمیل خرید ══════════════════════════════════════════ */
  div[style*="grid-template-columns:1fr 340px"] { grid-template-columns: 1fr !important; }
  .checkout-steps { display: none !important; }
  .summary-box { padding: 16px !important; }
  .pay-method { padding: 14px !important; }
  .card-info-box { font-size: 14px !important; letter-spacing: 1.5px !important; }

  /* ═══ فرم‌ها ══════════════════════════════════════════════ */
  .form-row,
  .form-row-3 { grid-template-columns: 1fr !important; }
  .form-control {
    font-size: 16px !important; /* جلوگیری از zoom در iOS */
    padding: 11px 13px !important;
  }
  select.form-control { font-size: 16px !important; }

  /* ═══ بخش پیشنهادها (مزایا ۴-ستونه) ══════════════════════ */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ═══ بنر تخفیف ═══════════════════════════════════════════ */
  .promo-banner {
    padding: 20px 16px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 14px !important;
  }
  .promo-banner h3 { font-size: 18px !important; }
  .coupon-chip { font-size: 14px !important; padding: 8px 16px !important; }

  /* ═══ فوتر ═════════════════════════════════════════════════ */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 28px 0 20px !important;
  }
  .site-footer {
    margin-top: 32px !important;
    padding-bottom: calc(var(--bnav-real-h) + 10px) !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
  }
  .footer-trust { justify-content: center !important; }
  .trust-badge { font-size: 11px !important; }
  .footer-brand p { max-width: 100% !important; }

  /* ═══ صفحه‌های موفقیت/پیگیری ════════════════════════════ */
  .order-code-box { font-size: 15px !important; letter-spacing: 1px !important; padding: 12px 18px !important; }
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 320px"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:1fr 300px"] { grid-template-columns: 1fr !important; }

  /* timeline پیگیری سفارش */
  .checkout-step span { font-size: 10px !important; }

  /* ═══ پنل ادمین ════════════════════════════════════════════ */
  .admin-wrap { flex-direction: column !important; }
  .sidebar {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .sidebar .brand { font-size: 20px !important; margin: 0 !important; flex: 1 !important; }
  .sidebar nav { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
  .sidebar nav a { padding: 6px 10px !important; font-size: 12px !important; }
  .sidebar nav .sep { display: none !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .admin-content { padding: 14px !important; }
  .admin-topbar { padding: 12px 14px !important; }
  .admin-topbar h1 { font-size: 16px !important; }
  table.admin-table { font-size: 12.5px !important; }
  table.admin-table th,
  table.admin-table td { padding: 8px 8px !important; }
  .form-row, .form-row-3 { grid-template-columns: 1fr !important; }

  /* ═══ توست ════════════════════════════════════════════════ */
  #toast-wrap {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--bnav-real-h) + 10px) !important;
  }
  .toast { min-width: auto !important; width: 100% !important; }

  /* ═══ دکمه بازگشت به بالا ════════════════════════════════ */
  #backToTop { bottom: calc(var(--bnav-real-h) + 12px) !important; left: 12px !important; }
  #pushPromptBanner { bottom: calc(var(--bnav-real-h) + 12px) !important; }
  #chatFab { bottom: calc(var(--bnav-real-h) + 26px) !important; width: 50px !important; height: 50px !important; font-size: 22px !important; }
  #chatWindow { bottom: calc(var(--bnav-real-h) + 90px) !important; }
  #faqFab { bottom: calc(var(--bnav-real-h) + 88px) !important; width: 46px !important; height: 46px !important; font-size: 19px !important; }
  #faqWindow {
    bottom: calc(var(--bnav-real-h) + 144px) !important;
    inset-inline-end: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(420px, calc(100vh - var(--bnav-real-h) - 200px)) !important;
    max-height: calc(100vh - var(--bnav-real-h) - 180px) !important;
  }
  .faq-tab { font-size: 11px !important; padding: 9px 4px !important; }
  .advisor-msg, .faq-q { font-size: 12px !important; }
  #advisorInput { font-size: 12.5px !important; }

  /* ═══ مودال منوی موبایل ═══════════════════════════════════ */
  .mobile-menu {
    width: min(300px, 88vw) !important;
    padding-bottom: var(--safe-bottom) !important;
  }
}

/* ================================================================
   تبلت — ۷۶۸ تا ۱۰۲۴
   ================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-grid,
  .related-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .footer-top { grid-template-columns: 1fr 1fr !important; }
  .hero h1,
  .hero-text h1 { font-size: 36px !important; }
  .shop-layout { grid-template-columns: 200px 1fr !important; }
  .product-view { gap: 28px !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   بسیار کوچک — زیر ۳۸۰ (iPhone SE / کوچکترین اندرویدها)
   ================================================================ */
@media (max-width: 380px) {
  .container { padding: 0 12px !important; }
  .product-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .product-name { font-size: 12px !important; }
  .price-now { font-size: 12.5px !important; }
  .add-cart-btn { font-size: 11.5px !important; padding: 7px 6px !important; }
  .hero-text h1 { font-size: 22px !important; }
  .section-head h2 { font-size: 19px !important; }
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .main-nav a { padding: 5px 10px !important; font-size: 12px !important; }
  .mobile-bottom-nav a { font-size: 9px !important; padding: 5px 5px !important; }
  .mobile-bottom-nav a .bnav-ic { font-size: 17px !important; }
}

/* ================================================================
   فیکس عمومی (همه سایزها)
   ================================================================ */

/* جلوگیری از overflow در container */
.container { width: 100%; max-width: 1280px; }

/* touch-friendly دکمه‌ها */
@media (hover: none) and (pointer: coarse) {
  .btn, .add-cart-btn, .size-chip, .cart-qty button {
    min-height: 44px;
  }
  .main-nav a { min-height: 38px; }
  .header-actions a { min-height: 40px; }
  /* hover effects رو حذف کن (به‌جاش active) */
  .product-card:hover { transform: none !important; box-shadow: none !important; }
  .btn:hover { transform: none !important; }
}

/* فیکس iOS input zoom */
@supports (-webkit-touch-callout: none) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* فیکس sticky در iOS Safari */
@supports (-webkit-overflow-scrolling: touch) {
  .site-header { position: -webkit-sticky; position: sticky; }
  .filter-box  { -webkit-overflow-scrolling: touch; }
}

/* ── named class grid fixes (cart / checkout) ──────────────────── */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 767px) {
  .cart-grid,
  .checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* خلاصه سفارش در checkout روی موبایل زیر فرم میاد */
  .checkout-grid > div:last-child { order: 2; }
  .checkout-grid > div:first-child { order: 1; }
}

@media (max-width: 767px) {
  .ticket-forms-grid { grid-template-columns: 1fr !important; }
  .bestseller-banner { grid-template-columns: 1fr !important; }
}