/* ============================================================
   MY LUCKY LAUNDRY — Mobile Native UX Layer
   Safe areas · Overscroll · Touch · Gestures · PTR
   ============================================================ */

/* ── SAFE AREA VARIABLES ────────────────────────────────── */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
}

/* ── TAP HIGHLIGHT REMOVAL ──────────────────────────────── */
/* Removes grey flash on tap (Chrome/Android) */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── PREVENT OVERSCROLL / RUBBER-BAND ───────────────────── */
html {
  overscroll-behavior: none;
}
body {
  overscroll-behavior: none;
  /* Prevents native browser pull-to-refresh (Chrome Android) so our
     custom PTR indicator is the only one that fires */
  overscroll-behavior-y: contain;
}

/* Scrollable inner containers stay contained */
.scroll-container,
.orders-list,
.order-cards,
.tracking-steps {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── DISABLE PINCH-TO-ZOOM ON VIEWPORT ─────────────────── */
/* Using touch-action instead of meta maximum-scale=1 so OS
   accessibility zoom still works for users who need it */
body {
  touch-action: pan-x pan-y;
}
.zoomable {
  touch-action: auto; /* opt specific elements back in */
}

/* ── DISABLE TEXT SELECTION ON UI ELEMENTS ─────────────── */
button,
.btn,
a.nav-link,
.nav-links a,
.bag-card,
.addon-card,
.step-card,
.feature-card,
.recurring-opt,
.addr-card,
.time-btn,
.cal-day,
.tab-btn,
.tab-item,
.order-card,
.status-badge,
.track-step,
.price-chip,
.mobile-menu-btn,
.theme-toggle,
.delivery-opt,
.qty-btn,
.cal-btn,
[role="button"],
[role="tab"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ── DISABLE CALLOUT ON IMAGES & DECORATIVE ICONS ──────── */
img,
.emoji {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; /* images inside buttons shouldn't catch their own events */
}
img.clickable,
img[onclick],
a img {
  pointer-events: auto; /* allow explicitly interactive images */
}

/* ── FAST TAPS (removes 300ms delay) ───────────────────── */
button,
.btn,
a,
[role="button"],
.bag-card,
.addon-card,
.step-card,
.feature-card,
.recurring-opt,
.addr-card,
.time-btn,
.cal-day,
.tab-btn,
.tab-item,
.order-card,
.price-chip,
.mobile-menu-btn,
.theme-toggle,
.qty-btn,
.cal-btn,
.nav-link,
.delivery-opt {
  touch-action: manipulation;
}

/* ── SAFE AREA: TOP NAV ─────────────────────────────────── */
/* Ensure nav content never hides behind the status bar / notch */
nav,
.top-nav,
header > nav {
  padding-top: max(var(--sat), 0px);
  padding-left: max(var(--sal), 0px);
  padding-right: max(var(--sar), 0px);
  /* GPU-layer to prevent paint jitter on sticky positioning */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ── SAFE AREA: TOAST NOTIFICATIONS ─────────────────────── */
.mll-toast-wrap {
  bottom: max(calc(var(--sab) + 28px), 28px) !important;
}

/* ── SAFE AREA: BOTTOM FIXED / STICKY ELEMENTS ──────────── */
/* Anything pinned near the bottom must clear the home indicator */
.book-cta,
.sticky-cta,
.bottom-bar,
.bottom-nav,
.tab-bar,
.fixed-bottom {
  padding-bottom: max(var(--sab), 0px);
}

/* ── SAFE AREA: MAIN CONTENT BOTTOM ─────────────────────── */
/* Scrollable main content should have room above home indicator */
main,
.main-content,
.page-content,
.content-wrap {
  padding-bottom: max(calc(var(--sab) + 16px), 16px);
}

/* ── SAFE AREA: FOOTER ──────────────────────────────────── */
footer {
  padding-bottom: max(calc(var(--sab) + 24px), 24px);
}

/* ── SAFE AREA: MOBILE FULL-SCREEN NAV SHEET ───────────── */
/* The dropdown nav on mobile fills the screen; add left/right insets */
@media (max-width: 768px) {
  .nav-links.open {
    padding-left:  max(var(--sal), 16px);
    padding-right: max(var(--sar), 16px);
    padding-bottom: max(var(--sab), 0px);
  }
}

/* ── STICKY ELEMENT NO-FLICKER ─────────────────────────── */
.sticky,
[style*="position: sticky"],
[style*="position:sticky"] {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ── PULL-TO-REFRESH INDICATOR ──────────────────────────── */
#ptr-indicator {
  position: fixed;
  top: max(calc(var(--sat) + 56px), 56px);
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 99999;
  width: 44px;
  height: 44px;
  background: var(--card, #111111);
  border: 1px solid rgba(244, 196, 48, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: opacity 0.15s ease;
}
[data-theme="light"] #ptr-indicator {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
#ptr-indicator.ptr-visible {
  opacity: 1;
}
#ptr-indicator.ptr-ready {
  opacity: 1;
  border-color: var(--gold, #F4C430);
  box-shadow: 0 4px 20px rgba(244, 196, 48, 0.2);
}
#ptr-indicator.ptr-loading {
  opacity: 1;
  border-color: var(--gold, #F4C430);
  box-shadow: 0 4px 20px rgba(244, 196, 48, 0.25);
}

/* PTR spinner */
#ptr-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(244, 196, 48, 0.2);
  border-top-color: var(--gold, #F4C430);
  border-radius: 50%;
  transition: transform 0.08s linear;
}
#ptr-indicator.ptr-loading #ptr-spinner {
  animation: ptrSpin 0.65s linear infinite;
}
@keyframes ptrSpin {
  to { transform: rotate(360deg); }
}

/* ── REDUCED MOTION SUPPORT ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  @keyframes ptrSpin {
    to { transform: rotate(360deg); }
  }
  /* Keep spinning but slow it down — don't eliminate feedback */
  #ptr-indicator.ptr-loading #ptr-spinner {
    animation-duration: 1.5s;
  }
}