/* 01-base.css — Reset, native-app lock (no stray scroll/zoom/bounce), form font sizes, icon font.
   Part of the old css/styles.css (lines 1–125); unused rules since removed.
   The number is the load order: later files override earlier ones, exactly
   as later lines in the single file used to. Keep them linked in order. */

/* ═══════════════════════════════════════════════════════
   MAKAY — Buy & Sell Locally  |  styles.css
   Single source of truth — no duplicate rules
   ═══════════════════════════════════════════════════════ */

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════════════════════
   NATIVE-APP LOCK — prevents ALL unwanted scroll, zoom,
   bounce, resize, text-select, and keyboard-layout-shift.
   Only elements that opt-in (overflow:auto/scroll) move.
   ══════════════════════════════════════════════════════ */

/* 1. Root shell — fully fixed, no scroll, no overflow */
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* Same colour as body. Belt-and-braces: if any device ever does leave
     a sliver below the body, it reads as part of the app rather than as
     a band of a different shade. */
  background: #fafafa;
  /* Block pull-to-refresh and elastic overscroll at root */
  overscroll-behavior: none;
  /* Prevent iOS rubber-band on the document itself */
  -webkit-overflow-scrolling: auto;
  /* Kill pinch-zoom */
  touch-action: pan-x pan-y;
}

body {
  font-family: 'Inter', sans-serif;
  background: #fafafa;
  color: #333;
  display: flex;
  flex-direction: column;
  /* ── Sized by inset ALONE. Do not add height here. ──
     position:fixed + inset:0 fills the fixed containing block, and on
     iOS that containing block is the LARGE viewport — the whole screen,
     with the toolbars drawn over it.

     `height: 100dvh` used to sit here as well, and an explicit height
     beats the bottom inset: top:0 was honoured, bottom:0 was discarded,
     and the body ended up exactly (lvh − svh) short — anchored at the
     top, leaving the toolbar/home-indicator band showing html underneath
     on every single screen. Around 80–100px on an iPhone.

     Chrome on Android resizes the fixed containing block along with its
     toolbars, so dvh matched and there was no gap. That's why it only
     ever showed up on Apple devices.

     The dvh was there to stop the keyboard resizing the body. It isn't
     needed for that: iOS doesn't resize the fixed containing block for
     the keyboard either — it zooms the visual viewport instead — so
     inset:0 is already stable when the keyboard opens. */
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* Kill double-tap zoom and pinch-zoom everywhere by default */
  touch-action: pan-x pan-y;
  /* Prevent long-press text selection outside inputs */
  -webkit-user-select: none;
  user-select: none;
  /* Remove iOS callout (link preview on long-press) */
  -webkit-touch-callout: none;
}

/* 2. Allow text selection inside form fields */
input, textarea, select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* 3. Scrollable containers must opt in explicitly —
      they get overscroll-behavior:contain so their scroll
      never bleeds out to the root or shifts anything else. */
[data-scrollable],
.product-grid,
.chat-messages,
#homeContent,
#plastayContent,
.brand-page-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* 4. Prevent zoom on input focus (iOS auto-zooms for <16 px fonts) */
input, textarea, select {
  font-size: max(1rem, 16px);
  /* allow normal vertical pan within inputs */
  touch-action: manipulation;
}

/* ══════════════════════════════════════════════════════ */

input, textarea, select {
  font-size: 1rem;
}
.material-symbols-rounded {
  font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48;
  font-size: 22px;
}