/* ==========================================================================
   MIMAS EXPRESS — PREMIUM DESIGN SYSTEM
   Frontend-only. No backend / API / route logic lives in this file.
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ------------------------------------------- */
:root {
  /* Brand */
  --mx-primary: #E62228;
  --mx-primary-dark: #B4181D;
  --mx-primary-light: #fdeaea;
  --mx-accent: #f59e0b;      /* delivery / speed accent */
  --mx-accent-dark: #d97706;

  /* Surfaces */
  --mx-bg: #f6f7fb;
  --mx-surface: #ffffff;
  --mx-surface-alt: #f1f2f8;
  --mx-border: #e8e9f2;

  /* Text */
  --mx-text: #14141f;
  --mx-text-muted: #6b6d80;
  --mx-text-faint: #9698ab;

  /* Semantic */
  --mx-success: #16a34a;
  --mx-success-bg: #e9f9ef;
  --mx-warning: #d97706;
  --mx-warning-bg: #fef3e2;
  --mx-error: #dc2626;
  --mx-error-bg: #fdecec;
  --mx-discount: #e11d48;

  /* Elevation */
  --mx-shadow-xs: 0 1px 2px rgba(20, 20, 31, 0.04);
  --mx-shadow-sm: 0 2px 8px rgba(20, 20, 31, 0.06);
  --mx-shadow-md: 0 8px 24px rgba(20, 20, 31, 0.08);
  --mx-shadow-lg: 0 16px 40px rgba(20, 20, 31, 0.14);
  --mx-shadow-primary: 0 10px 24px rgba(230, 34, 40, 0.30);

  /* Radius */
  --mx-radius-sm: 10px;
  --mx-radius-md: 14px;
  --mx-radius-lg: 20px;
  --mx-radius-xl: 28px;
  --mx-radius-pill: 999px;

  /* Motion */
  --mx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mx-dur-fast: 140ms;
  --mx-dur: 220ms;

  /* App chrome heights (used by app shell + safe-area math) */
  --mx-header-h: 56px;
  --mx-bottomnav-h: 60px;

  /* Safe areas (mapped once, reused everywhere) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ---------- 2. BASE ------------------------------------------------------ */
* { box-sizing: border-box; }

html, body {
  background: var(--mx-bg);
  color: var(--mx-text);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
}

a, button { -webkit-tap-highlight-color: transparent; }

img { max-width: 100%; display: block; }

::selection { background: var(--mx-primary-light); color: var(--mx-primary-dark); }

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

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- 3. SAFE-AREA UTILITIES --------------------------------------- */
.pt-safe   { padding-top: var(--safe-top); }
.pb-safe   { padding-bottom: var(--safe-bottom); }
.pl-safe   { padding-left: var(--safe-left); }
.pr-safe   { padding-right: var(--safe-right); }
.mt-safe   { margin-top: var(--safe-top); }
.mb-safe   { margin-bottom: var(--safe-bottom); }

/* ---------- 4. APP SHELL -------------------------------------------------- */
.mx-app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--mx-border);
  /* env(safe-area-inset-top) is 0 on many Android devices even when a
     notch/punch-hole/status-bar is present (esp. in installed PWA /
     fullscreen mode). Guarantee a minimum clearance so the header never
     sits flush under the status bar, while still respecting a larger
     real inset (iOS notch/Dynamic Island) when the browser reports one. */
  padding-top: max(var(--safe-top), 20px);
}

.mx-app-header--scrolled {
  box-shadow: var(--mx-shadow-sm);
}

.mx-icon-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: var(--mx-radius-sm);
  background: var(--mx-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mx-text);
  border: none;
  transition: transform var(--mx-dur-fast) var(--mx-ease), background var(--mx-dur-fast) var(--mx-ease);
}
.mx-icon-btn:active { transform: scale(0.92); background: var(--mx-border); }

.mx-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mx-surface-alt);
  border-radius: var(--mx-radius-pill);
  padding: 10px 14px;
  color: var(--mx-text-faint);
  font-size: 13.5px;
  transition: background var(--mx-dur-fast) var(--mx-ease);
}
.mx-search-pill:active { background: var(--mx-border); }

/* ---------- 5. BOTTOM NAVIGATION ------------------------------------------ */
.mx-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--mx-border);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.mx-bottom-nav__row {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: var(--mx-bottomnav-h);
}

.mx-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--mx-text-faint);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  min-height: 48px;
  transition: color var(--mx-dur-fast) var(--mx-ease), transform var(--mx-dur-fast) var(--mx-ease);
}
.mx-nav-item:active { transform: scale(0.92); }
.mx-nav-item i { font-size: 21px; line-height: 1; transition: transform var(--mx-dur-fast) var(--mx-ease); }
.mx-nav-item.active { color: var(--mx-primary); }
.mx-nav-item.active i { transform: translateY(-1px); }
.mx-nav-item .mx-nav-dot {
  position: absolute;
  top: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mx-primary);
  opacity: 0;
  transition: opacity var(--mx-dur-fast) var(--mx-ease);
}
.mx-nav-item.active .mx-nav-dot { opacity: 1; }
.mx-nav-item .mx-nav-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  background: var(--mx-discount);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Center raised FAB nav item (cart) — Figma-mockup style bottom nav */
.mx-nav-item--fab { justify-content: flex-start; }
.mx-nav-item--fab .mx-fab-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mx-primary) 0%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  margin-top: -22px;
  box-shadow: 0 8px 20px rgba(230, 34, 40, 0.4), 0 0 0 4px var(--mx-surface);
  transition: transform var(--mx-dur-fast) var(--mx-ease);
  position: relative;
}
.mx-nav-item--fab:active .mx-fab-circle { transform: scale(0.9); }
.mx-nav-item--fab span { margin-top: 3px; }
.mx-nav-item--fab.active { color: var(--mx-primary); }
.mx-nav-item--fab .mx-fab-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: #fff;
  color: var(--mx-discount);
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Reserve space at bottom of scrollable content so bottom-nav never overlaps it */
.mx-content-pb {
  padding-bottom: calc(var(--mx-bottomnav-h) + var(--safe-bottom) + 14px);
}
.mx-content-pb-cta {
  padding-bottom: calc(var(--mx-bottomnav-h) + var(--safe-bottom) + 88px);
}

/* ---------- 6. STICKY CTA BAR --------------------------------------------- */
.mx-sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--mx-bottomnav-h) + var(--safe-bottom));
  z-index: 45;
  padding: 10px 16px 14px;
  background: linear-gradient(to top, var(--mx-bg) 55%, transparent);
  padding-left: calc(16px + var(--safe-left));
  padding-right: calc(16px + var(--safe-right));
}

.mx-btn-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--mx-radius-lg);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(135deg, var(--mx-primary) 0%, #1a1a1a 100%);
  box-shadow: var(--mx-shadow-primary);
  transition: transform var(--mx-dur-fast) var(--mx-ease), box-shadow var(--mx-dur-fast) var(--mx-ease);
}
.mx-btn-primary:active { transform: scale(0.98); }

/* ---------- 7. CARDS ------------------------------------------------------ */
.mx-card {
  background: var(--mx-surface);
  border-radius: var(--mx-radius-lg);
  border: 1px solid var(--mx-border);
  box-shadow: var(--mx-shadow-xs);
}

.mx-product-card {
  background: var(--mx-surface);
  border-radius: var(--mx-radius-md);
  border: 1px solid var(--mx-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--mx-dur) var(--mx-ease), box-shadow var(--mx-dur) var(--mx-ease);
}
.mx-product-card:active { transform: scale(0.98); }
.mx-product-card:hover { box-shadow: var(--mx-shadow-md); }

.mx-product-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--mx-surface-alt);
  overflow: hidden;
}
.mx-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform var(--mx-dur) var(--mx-ease);
}
.mx-product-card:hover .mx-product-card__img { transform: scale(1.04); }

.mx-badge-discount {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--mx-discount);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: var(--mx-radius-sm);
  letter-spacing: 0.2px;
}

/* Wishlist heart — top-right corner of every product card image. */
.mx-wishlist-btn {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  box-shadow: var(--mx-shadow-xs);
  transition: transform .15s var(--mx-ease);
}
.mx-wishlist-btn:active { transform: scale(0.88); }
.mx-wishlist-btn:disabled { opacity: .6; }

.mx-badge-delivery {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--mx-success);
  font-size: 10.5px;
  font-weight: 700;
}

.mx-qty-stepper {
  display: flex;
  align-items: center;
  background: var(--mx-primary);
  border-radius: var(--mx-radius-sm);
  overflow: hidden;
  height: 32px;
}
.mx-qty-stepper button {
  width: 28px; height: 32px;
  border: none;
  background: transparent;
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mx-qty-stepper span {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  min-width: 18px;
  text-align: center;
}

/* Compact variant — used on product cards (grid tiles) where horizontal
   space is tight next to the price. Same visual language, smaller footprint. */
.mx-qty-stepper--sm { height: 30px; }
.mx-qty-stepper--sm button { width: 24px; height: 30px; font-size: 11px; }
.mx-qty-stepper--sm span { font-size: 12px; min-width: 16px; padding: 0 2px; }
.mx-qty-stepper button:disabled,
.mx-qty-stepper--sm button:disabled { opacity: .5; }

.mx-add-btn {
  width: 32px; height: 32px;
  min-width: 32px;
  border-radius: var(--mx-radius-sm);
  background: var(--mx-surface);
  border: 1.5px solid var(--mx-primary);
  color: var(--mx-primary);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--mx-dur-fast) var(--mx-ease), background var(--mx-dur-fast) var(--mx-ease), color var(--mx-dur-fast) var(--mx-ease);
  box-shadow: var(--mx-shadow-xs);
}
.mx-add-btn:active { transform: scale(0.88); background: var(--mx-primary); color: #fff; }

.mx-go-cart-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-success);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--mx-radius-sm);
  white-space: nowrap;
}

/* ---------- 8. BOTTOM SHEETS / MODALS -------------------------------------- */
.mx-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 25, 0.45);
  z-index: 70;
  opacity: 0;
  transition: opacity var(--mx-dur) var(--mx-ease);
}
.mx-sheet-overlay.open { opacity: 1; }

.mx-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 71;
  background: var(--mx-surface);
  border-radius: var(--mx-radius-xl) var(--mx-radius-xl) 0 0;
  padding: 10px 20px calc(20px + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform var(--mx-dur) var(--mx-ease);
  max-height: 88dvh;
  overflow-y: auto;
  box-shadow: var(--mx-shadow-lg);
}
.mx-sheet.open { transform: translateY(0); }
.mx-sheet__handle {
  width: 40px; height: 4px;
  background: var(--mx-border);
  border-radius: var(--mx-radius-pill);
  margin: 4px auto 14px;
}

@media (min-width: 1024px) {
  .mx-sheet-overlay { display: flex; align-items: center; justify-content: center; }
  .mx-sheet {
    position: static;
    max-width: 480px;
    width: 100%;
    border-radius: var(--mx-radius-lg);
    transform: translateY(16px) scale(0.98);
    opacity: 0;
  }
  .mx-sheet-overlay.open .mx-sheet { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---------- 9. TOAST -------------------------------------------------------- */
.mx-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--mx-bottomnav-h) + var(--safe-bottom) + 16px);
  transform: translateX(-50%) translateY(16px);
  background: #16161f;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: var(--mx-radius-pill);
  box-shadow: var(--mx-shadow-lg);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--mx-dur) var(--mx-ease), transform var(--mx-dur) var(--mx-ease);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 10. SKELETON LOADERS -------------------------------------------- */
@keyframes mx-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.mx-skeleton {
  background: linear-gradient(90deg, var(--mx-surface-alt) 25%, #e4e5f0 37%, var(--mx-surface-alt) 63%);
  background-size: 400% 100%;
  animation: mx-shimmer 1.4s ease infinite;
  border-radius: var(--mx-radius-sm);
}

/* ---------- 11. EMPTY / ERROR STATES ---------------------------------------- */
.mx-empty-state {
  text-align: center;
  padding: 56px 24px;
}
.mx-empty-state__icon {
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--mx-surface-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  color: var(--mx-text-faint);
}

/* ---------- 12. TYPOGRAPHY HELPERS ------------------------------------------ */
.mx-price { font-weight: 800; color: var(--mx-text); letter-spacing: -0.2px; }
.mx-mrp { color: var(--mx-text-faint); text-decoration: line-through; font-weight: 500; }
.mx-section-title { font-size: 16px; font-weight: 800; color: var(--mx-text); letter-spacing: -0.2px; }

/* ---------- 13. MISC ------------------------------------------------------- */
.mx-fade-in { animation: mx-fadeIn var(--mx-dur) var(--mx-ease) both; }
@keyframes mx-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.mx-tap { transition: transform var(--mx-dur-fast) var(--mx-ease); }
.mx-tap:active { transform: scale(0.96); }