/* ═══════════════════════════════════════════════════════════
   ZAYTOON — Responsive CSS
   Tablet (768-1024px) + Mobile (< 768px) + PWA
═══════════════════════════════════════════════════════════ */

/* ── TABLET ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .product-detail { grid-template-columns: 1fr; }
  .gallery-main-wrap { max-height: 420px; }
  .account-layout { grid-template-columns: 200px 1fr; }
  .about-stats-grid { gap: 0; }
}

/* ── MOBILE BASE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --header-h: 56px; }

  /* Header */
  .site-header { padding: 0; }
  .header-inner { padding: .65rem 1rem; gap: .5rem; height: var(--header-h); }
  .main-nav { display: none !important; }
  .menu-toggle { display: flex !important; }

  /* Only show essential header actions on mobile */
  .header-action-btn:not(.cart-btn):not(#searchToggle) {
    display: none;
  }
  /* Show dark mode and lang switch back */
  .header-action-btn[onclick*="toggleDarkMode"],
  .header-action-btn[href*="lang"] {
    display: flex;
  }

  /* Grid */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .6rem !important;
  }

  /* Product card mobile */
  .product-info { padding: .55rem .65rem .7rem !important; }
  .product-name { font-size: .79rem !important; }
  .product-price { font-size: .88rem !important; }

  /* Sections */
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: relative !important; top: 0 !important; }
  .account-hero { padding: 1.25rem; }
  .account-avatar-circle { width: 56px; height: 56px; font-size: 1.4rem; }

  /* About page */
  .about-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .about-story-grid { grid-template-columns: 1fr !important; }
  .about-values-grid { grid-template-columns: 1fr !important; }
  .about-number { font-size: 2rem; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; }

  /* Product page */
  .gallery-thumbs-row { overflow-x: auto; padding-bottom: .5rem; }
  .product-detail-specs { grid-template-columns: 1fr !important; }
  .reviews-summary { grid-template-columns: 1fr; gap: 1rem; }

  /* Track page */
  .track-steps-wrap { padding: 1.25rem .75rem; }
  .track-step-label { font-size: .65rem; max-width: 56px; }
  .track-info-grid { grid-template-columns: 1fr !important; }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr !important; }
  .checkout-summary-col { position: relative !important; top: 0 !important; order: -1; }
  .checkout-card { padding: 1rem; }
  .payment-option { padding: .7rem .85rem; }

  /* Cart */
  .cart-page-layout { grid-template-columns: 1fr !important; }
  .cart-summary-box { position: relative !important; top: 0 !important; }
  .cart-page-row { grid-template-columns: 56px 1fr; gap: .6rem; }

  /* Login */
  .auth-page-wrap { padding: 1.25rem 1rem; align-items: flex-start; padding-top: 2rem; }
  .auth-card { border-radius: 20px; padding: 1.75rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .footer-top { padding: 2rem 0; }

  /* Promo grid */
  .promo-grid { grid-template-columns: 1fr !important; }

  /* Modal full screen on mobile */
  .modal-box { max-width: 100%; border-radius: 20px 20px 0 0; position: fixed; bottom: 0; left: 0; right: 0; margin: 0; max-height: 90vh; }
  .modal-backdrop { align-items: flex-end; padding: 0; }

  /* Admin (if accessed on mobile) */
  .admin-sidebar { display: none; }
  .admin-content { margin-inline-start: 0 !important; }
}

/* ── SMALL MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
  .products-grid { gap: .5rem !important; }
  .flash-card { width: 135px !important; }
  .flash-card-img { height: 135px !important; }
  .next-steps { grid-template-columns: 1fr !important; }
  .next-step { flex-direction: row !important; text-align: right !important; }
  .next-step-icon { margin-bottom: 0 !important; }
  .account-nav { gap: 0; }
  .account-nav-item { font-size: .7rem; padding: .55rem .4rem; }
  .loyalty-card { padding: .75rem; }
  .auth-tabs { font-size: .83rem; }
}

/* ── PWA STANDALONE MODE ─────────────────────────────────── */
@media (display-mode: standalone) {
  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  }
  .mobile-bottom-nav { display: flex !important; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  .back-to-top {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }
}

/* ── LANDSCAPE MOBILE ────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .auth-page-wrap { min-height: auto; padding: 1rem; }
  .bottom-sheet { max-height: 85vh; }
  #productSheet { max-height: 90vh; }
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print {
  .site-header, .mobile-bottom-nav,
  .back-to-top, .pwa-banner, .toast-container { display: none !important; }
  .container { max-width: 100%; }
  body { padding-bottom: 0 !important; }
}

/* Accessible hit areas: visual dots stay compact while touch targets are 44px. */
.slider-dot {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50% !important;
  background: transparent !important;
  position: relative;
}
.slider-dot::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  transition: width .2s ease, background .2s ease;
}
.slider-dot.active::after { width: 24px; background: #fff; }
.header-icon-btn { min-width: 44px; min-height: 44px; }
.btn-xl { min-height: 44px; }
.app-section-link { min-height: 44px; display:inline-flex; align-items:center; padding-inline:8px; }
.privacy-consent-actions a { min-height:44px; display:inline-flex; align-items:center; }
@media(max-width:768px){.site-logo{min-height:44px}.slider-dots{gap:0!important}}
.star-pick{border:0;background:none;padding:0;min-width:44px;min-height:44px;cursor:pointer;color:inherit}
/* Keep icon-only controls comfortably tappable without enlarging their icons. */
.announcement-close,
.pw-toggle {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}