/* looxx-mobile.css
 *
 * Shared values for the mobile app shell, in one place so they can be tuned
 * once instead of in three near-identical inline <style> blocks.
 *
 * 1. Focus zoom. iOS magnifies the page whenever a focused input's font-size
 *    is below 16px, and it does not scroll the field back into view — you end
 *    up typing into something off screen. 16px is the threshold, so every
 *    control that can take focus is pinned to it here. The <meta viewport> on
 *    each page also carries user-scalable=no, which stops pinch zoom; this
 *    rule is what stops the zoom even where that is ignored.
 *
 * 2. The Dynamic Island / notch. With viewport-fit=cover the webview draws
 *    edge to edge, which is what lets the design use the full screen — but it
 *    also means the top of the page sits underneath the island unless it is
 *    inset deliberately. env(safe-area-inset-*) only returns real values once
 *    viewport-fit=cover is set; without it they are 0, which is why the
 *    safe-area rules already in the pages were doing nothing.
 *
 * Loaded LAST in <head> on purpose: the pages carry large inline <style>
 * blocks, and equal-specificity rules there would otherwise win.
 *
 * 3. Bottom-nav size. The nav is declared inline on index and
 *    Commingsoonpage — identical in both — and those rules now read
 *    these tokens, so the size lives here and cannot drift between pages.
 *
 * 4. Page transitions. Crossfade between pages instead of a white flash.
 *    (Favorites and Account are tabs of index.html and never navigate;
 *    this is for the remaining page-to-page hops.)
 *
 * 5. Touch like an app. No grey tap flash, no "Save image / Share" menu or
 *    link preview on a long press, no blue selection handles on buttons.
 *

 * To move the whole design further down or bring it back up, change
 * --looxx-top-gap. To resize the nav, change the --looxx-nav-* tokens.
 */

:root {
  --looxx-safe-top: env(safe-area-inset-top, 0px);
  --looxx-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Breathing room below the island, on top of the inset iOS reports. */
  --looxx-top-gap: 8px;

  /* Bottom nav. Raise --looxx-nav-btn / --looxx-nav-btn-primary together to
     scale the bar; the icon and spacing tokens keep their proportions.
     Previously 54 / 64 / 24 / 8 / 8 / 12, which read too small on a phone. */
  --looxx-nav-btn: 62px;
  --looxx-nav-btn-primary: 74px;
  --looxx-nav-icon: 28px;
  --looxx-nav-gap: 10px;
  --looxx-nav-pad-y: 10px;
  --looxx-nav-pad-x: 14px;
}

/* ---- 1. Never zoom on focus ---- */

/* The :not()s earn their keep twice. They keep buttons out of this — a submit
   button cannot be focus-zoomed and its size is a design decision — and they
   lift specificity to (0,2,1), which is what it takes to beat the two-class
   rules in the Webflow export, e.g. `.search-2.jetboost-list-search-input-n43d`
   on the favourites search field. A plain `input` or `.w-input` loses to those.
   Selectors in a list keep their own specificity, so the class names below
   still apply wherever nothing outranks them. */
input:not([type="submit"]):not([type="button"]),
textarea,
select,
.auth-input,
.accInput,
.cs-input,
.w-input,
.w-select,
.search-input,
.pop-up-text-input,
.favorites-page input.search-2,
.favorites-page .search-form-grid input {
  font-size: 16px;
}

/* ---- 2. Clear the Dynamic Island / notch ---- */

/* Normal page content. box-sizing keeps the `min-height: 100vh` rules the
   pages already set from overflowing once this padding is added.
   :not(.userex-embed) -- userex.html always runs inside the parent's search
   iframe (see CLAUDE.md), and the parent already insets the whole iframe via
   #searchOverlay .searchOverlayInner below. Applying this a second time,
   inside the iframe's own document, doubles up: normal-flow content (the
   detected-items / matches header) got pushed down by both insets stacked,
   while anything position:fixed in there (the close button) ignored body
   padding either way and stayed put -- which is what "the top widget sits
   way below the close button" actually was. */
body:not(.userex-embed) {
  box-sizing: border-box;
  padding-top: calc(var(--looxx-safe-top) + var(--looxx-top-gap));
}

/* Fixed elements ignore body padding, so each one is inset on its own. */

/* The floating bottom nav, clear of the home indicator. */
.looxx-bottom-nav {
  bottom: calc(16px + var(--looxx-safe-bottom));
}

/* The search overlay is a fullscreen iframe. env() resolves to 0 inside an
   iframe — only the top-level document gets real values — so userex.html
   cannot inset itself and the parent has to do it here. Only at the top: at
   the bottom the iframe runs to the edge, so the results scroll on under the
   home indicator the way the favourites do, and wireSearchOverlay() hands the
   inset to the iframe as --looxx-safe-bottom for what has to stay clear of it
   (the body's end padding below, the hint pill, the sheets). */
#searchOverlay .searchOverlayInner {
  box-sizing: border-box;
  padding-top: var(--looxx-safe-top);
}

body.userex-embed {
  padding-bottom: var(--looxx-safe-bottom);
}

/* Positioned against #searchOverlay (the fixed ancestor), so it needs the
   inset added rather than inherited from the padded inner wrapper. */
#searchOverlayClose {
  top: calc(10px + var(--looxx-safe-top));
}

/* ---- 4. Page-to-page transitions ---- */

/* Same-origin navigations (the bottom nav) crossfade instead of flashing
   white: the browser keeps the old page on screen until the new one can
   paint, then blends them. The nav is named so it stays put rather than
   fading along with the page. Browsers without cross-document view
   transitions (older WebViews, iOS < 18.2) ignore all of this and navigate
   as before. */
@view-transition {
  navigation: auto;
}

.looxx-bottom-nav {
  view-transition-name: looxx-bottom-nav;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---- 5. Touch like an app, not a web page ---- */

/* Long-pressing a product photo used to offer "Save to Photos / Share",
   a card showed a preview of the shop's link, and a button or the bottom
   nav selected its own label. App chrome isn't text to copy, so selection
   is off everywhere except where people type. (The link preview is also
   switched off natively: ios.allowsLinkPreview in capacitor.config.json.) */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img,
a {
  -webkit-user-drag: none;
}

/* With the grey tap flash gone, a pressed button needs its own feedback.
   :where() keeps this at zero specificity, so any :active rule a page
   already has still decides the look; this only fills in where none
   exists. (WebKit only applies :active on touch when the page has a
   touchstart listener, which native.js adds.) */
:where(button, [role="button"], .looxx-nav-btn):active {
  opacity: 0.7;
}