/* 04-sections.css — .main and section sizing/visibility (how screens show and hide), search results section.
   Part of the old css/styles.css (lines 852–1007); 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. */

/* ── Prevent iOS zoom on ALL form inputs app-wide ── */

/* ── Layout ── */
.main { flex: 1 1 0%; min-height: 0; position: relative; overflow: hidden; }

/* ── Home section ── */
/* visibility is what stops the whole app drifting sideways.
   ─────────────────────────────────────────────────────────
   Inactive sections are 100% wide, absolutely positioned, and pushed to
   translateX(30px). That's 30px of horizontal overflow inside .main —
   and .main's `overflow: hidden` does NOT prevent that area being
   scrolled, it only removes the scrollbar. Anything calling focus() or
   scrollIntoView() on an element inside a hidden section makes the
   browser scroll .main across by those 30px to "reveal" it, and with no
   scrollbar there is no way back. Every screen then renders 30px to the
   left with its first characters cut off — "rofile", "ocal Brands" — and
   it persists for the rest of the session.

   visibility:hidden takes those sections out of the focus and
   scroll-into-view trees entirely, so nothing inside them can be
   targeted while they're off-screen. The 0.4s delay on the way out lets
   the fade finish before they vanish; going in it applies immediately. */
#home {
  padding: 0;
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; transform: translateX(30px);
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
  pointer-events: none; overflow-y: auto;
  padding-bottom: 0;
}
#home.active {
  opacity: 1; transform: translateX(0); pointer-events: all; z-index: 1;
  visibility: visible;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s;
}

/* ── All other sections ── */
section:not(#home):not(#searchResults) {
  padding: 1rem;
  position: absolute; top: 0;
  left: 0; width: 100%; height: 100%;
  opacity: 0; transform: translateX(30px);
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
  pointer-events: none; overflow-y: auto;
  padding-top: calc(56px + env(safe-area-inset-top, 0px) + 1rem);
  padding-bottom: 0;
  box-sizing: border-box;
}
section:not(#home):not(#searchResults).active {
  opacity: 1; transform: translateX(0); pointer-events: all; z-index: 1;
  visibility: visible;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s;
}

/* ── Search Results section ── */
#searchResults {
  padding: 0 1rem 1rem;
  /* 62px = new search header base height (10px top + 42px input + 10px bottom) */
  padding-top: calc(62px + env(safe-area-inset-top, 0px));
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; transform: translateX(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; overflow-y: auto;
  padding-bottom: 0;
  box-sizing: border-box;
}
#searchResults.active { opacity: 1; transform: translateX(0); pointer-events: all; z-index: 1; }

.search-results-info { margin-bottom: 1rem; margin-top: 1rem; font-size: 0.9rem; color: #666; }
.search-results-info #searchQuery { color: #19378C; font-weight: 600; }
.search-results-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.4rem; align-items: start; }

/* ── Search: matched brand pinned above the results grid ── */
#searchBrandMatch { margin-bottom: 1rem; }
/* Override fixed height inside search result cards so image fills proportionally */

.no-results { text-align: center; padding: 3rem 1rem; color: #666; }
.no-results.hidden { display: none; }
.no-results-icon { font-size: 4rem; color: #ddd; margin-bottom: 1rem; }
.no-results h3 { margin-bottom: 0.5rem; color: #333; }
.no-results p  { margin-bottom: 2rem; font-size: 0.9rem; }
.search-suggestions h4 { margin-bottom: 1rem; font-size: 0.9rem; color: #333; }
.suggestion-chips { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.suggestion-chip {
  padding: 0.4rem 0.8rem; background: #eef1f9; color: #19378C;
  border-radius: 16px; font-size: 0.8rem; cursor: pointer; transition: background 0.2s ease;
}
.suggestion-chip:hover { background: #19378C; color: #fff; }

/* ── Home content ── */
/* No padding-top here — the banner itself extends behind the transparent header */
.home-content { padding-top: 0; }