/* ============================================================
   PWA SPACING SYSTEM — 8px Grid (Alibaba/Temu PWA Style)
   Only use these values: 4, 8, 12, 16, 24, 32, 40, 48
   ============================================================ */

/* ---- PADDING (8px grid) ---- */
.p-0 { padding: 0; }
.p-4 { padding: 4px; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }
.p-40 { padding: 40px; }
.p-48 { padding: 48px; }

/* Horizontal padding */
.px-0 { padding-left: 0; padding-right: 0; }
.px-4 { padding-left: 4px; padding-right: 4px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.px-24 { padding-left: 24px; padding-right: 24px; }
.px-32 { padding-left: 32px; padding-right: 32px; }

/* Vertical padding */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-4 { padding-top: 4px; padding-bottom: 4px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-32 { padding-top: 32px; padding-bottom: 32px; }

/* Individual sides */
.pt-0 { padding-top: 0; }
.pt-4 { padding-top: 4px; }
.pt-8 { padding-top: 8px; }
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }

.pb-0 { padding-bottom: 0; }
.pb-4 { padding-bottom: 4px; }
.pb-8 { padding-bottom: 8px; }
.pb-12 { padding-bottom: 12px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: 24px; }

.pl-0 { padding-left: 0; }
.pl-4 { padding-left: 4px; }
.pl-8 { padding-left: 8px; }
.pl-12 { padding-left: 12px; }
.pl-16 { padding-left: 16px; }

.pr-0 { padding-right: 0; }
.pr-4 { padding-right: 4px; }
.pr-8 { padding-right: 8px; }
.pr-12 { padding-right: 12px; }
.pr-16 { padding-right: 16px; }

/* ---- MARGIN (8px grid) ---- */
.m-0 { margin: 0; }
.m-4 { margin: 4px; }
.m-8 { margin: 8px; }
.m-12 { margin: 12px; }
.m-16 { margin: 16px; }
.m-24 { margin: 24px; }
.m-32 { margin: 32px; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-4 { margin-left: 4px; margin-right: 4px; }
.mx-8 { margin-left: 8px; margin-right: 8px; }
.mx-12 { margin-left: 12px; margin-right: 12px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-4 { margin-top: 4px; margin-bottom: 4px; }
.my-8 { margin-top: 8px; margin-bottom: 8px; }
.my-12 { margin-top: 12px; margin-bottom: 12px; }
.my-16 { margin-top: 16px; margin-bottom: 16px; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.ml-0 { margin-left: 0; }
.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.ml-12 { margin-left: 12px; }
.ml-16 { margin-left: 16px; }

.mr-0 { margin-right: 0; }
.mr-4 { margin-right: 4px; }
.mr-8 { margin-right: 8px; }
.mr-12 { margin-right: 12px; }
.mr-16 { margin-right: 16px; }

/* ---- GAP (8px grid) ---- */
.gap-0 { gap: 0; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* ---- PWA CARD (Alibaba/Temu PWA style) ---- */
.pwa-card {
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
}
.pwa-card-elevated {
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}
.pwa-card-flush {
  margin-bottom: 8px;
}

/* ---- PWA SECTION ---- */
.pwa-section {
  padding: 16px;
}
.pwa-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading, #111827);
  margin-bottom: 12px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pwa-section-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ---- PWA LIST ITEM ---- */
.pwa-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
  min-height: 48px;
}
.pwa-list-item:last-child {
  border-bottom: none;
}
.pwa-list-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: #fff;
}
.pwa-list-item-body {
  flex: 1;
  min-width: 0;
}
.pwa-list-item-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body, #374151);
}
.pwa-list-item-desc {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}
.pwa-list-item-action {
  color: var(--text-muted, #6b7280);
  font-size: 14px;
  flex-shrink: 0;
}

/* ---- PWA BADGE / CHIP ---- */
.pwa-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-full, 9999px);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  background: var(--hover-bg, #f5f5f7);
  color: var(--text-body, #374151);
  border: 1px solid var(--border-light, #f0f0f0);
  white-space: nowrap;
}
.pwa-chip-primary {
  background: var(--primary-light, rgba(255, 75, 51, 0.12));
  color: var(--primary, #FF4B33);
  border-color: transparent;
}

/* ---- PWA BOTTOM SHEET ---- */
.pwa-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.5);
}
.pwa-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 81;
  background: var(--card-bg, #fff);
  border-radius: 20px 20px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pwa-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border, #e5e7eb);
  border-radius: 2px;
  margin: 12px auto 8px;
}

/* ---- RESPONSIVE HELPERS ---- */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}