/* ════════════════════════════════════════════
   PackBuddy – Feinschliff für Smartphones
   Wird von allen Seiten geladen. Der App-Teil greift nur in der Store-App
   (Klasse .pb-native wird schon im <head> gesetzt, siehe Inline-Skript).
════════════════════════════════════════════ */

/* iOS zoomt beim Antippen eines Eingabefelds hinein, wenn die Schrift kleiner als
   16 px ist – das wirkt unruhig und lässt die Seite danach verschoben stehen */
@media (max-width: 680px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea { font-size: 16px !important; }
}

/* ── Nur in der Store-App ─────────────────── */

/* Kein Gummiband-Effekt am Seitenrand (sonst blitzt der Hintergrund durch) */
html.pb-native,
html.pb-native body { overscroll-behavior: none; }

html.pb-native { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }

/* Bedienelemente nicht markierbar, kein Kontextmenü bei langem Druck – wie in nativen Apps.
   Texte (Profile, Chat, Eingabefelder) bleiben markier- und kopierbar. */
html.pb-native button,
html.pb-native a,
html.pb-native label,
html.pb-native [role="button"],
html.pb-native .pb-bottom-nav,
html.pb-native .hs-nav,
html.pb-native .sh-nav,
html.pb-native .modal-tabs {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.pb-native img { -webkit-touch-callout: none; -webkit-user-drag: none; }

/* Druck-Feedback: kurzes Eindrücken. "scale" statt "transform", damit vorhandene
   transform-Positionierungen (z. B. zentrierte Buttons) erhalten bleiben; ohne eigene
   transition, um die vorhandenen Übergänge der Buttons nicht zu überschreiben */
html.pb-native button:not(:disabled):active,
html.pb-native [role="button"]:active,
html.pb-native .pb-bn-item:active,
html.pb-native .pay-pkg-item:active { scale: .97; }

/* Startseite scrollt in ihrem eigenen Bereich – Wischen am oberen/unteren Rand nicht
   an die (gesperrte) Seite weiterreichen, sonst „hängt“ das Scrollen kurz */
#hero-search { overscroll-behavior-y: contain; }

/* Kopfzeile der Startseite wie in iOS-Apps: oben transparent, beim Scrollen deckend mit
   Unschärfe – sonst scheint die Überschrift durch das Logo hindurch.
   Die Klasse .hs-nav--scrolled setzt search.js beim Scrollen von #hero-search */
@media (max-width: 680px) {
  #hero-search .hs-nav {
    transition: background-color .2s ease, border-color .2s ease;
    border-bottom: 1px solid transparent;
  }
  #hero-search .hs-nav.hs-nav--scrolled {
    background: rgba(6, 12, 20, .94);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom-color: rgba(255, 255, 255, .07);
  }
  [data-theme="light"] #hero-search .hs-nav.hs-nav--scrolled {
    background: rgba(255, 255, 255, .94);
    border-bottom-color: rgba(0, 0, 0, .07);
  }
}

/* Platz für die untere Leiste – im Inhalt statt als padding-bottom von #hero-search:
   WebKit (iOS-App) rechnet den unteren Innenabstand eines scrollenden Flex-Containers
   nicht zum Scrollbereich. Ergebnis war: Inhalt endet hinter der Leiste, Scrollen
   nicht möglich (scrollHeight = clientHeight). */
@media (max-width: 680px) {
  #hero-search { padding-bottom: 0 !important; }
  #hero-search .hs-content {
    padding-bottom: calc(32px + 72px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* ── Untere Leiste schwebend im Glas-Stil (angelehnt an iOS 26 „Liquid Glass“) ──
   Gleiche Symbole, Texte und Suchknopf wie bisher; die Leiste löst sich vom Rand, wird zur
   abgerundeten Kapsel und lässt den Inhalt dahinter unscharf durchscheinen. Die belegte Höhe
   (Rand bis Oberkante) bleibt ≤ der bisherigen, damit Abstände darüber unverändert passen. */
@media (max-width: 680px) {
  .pb-bottom-nav {
    --pb-glass-gap: 12px;
    left: var(--pb-glass-gap) !important;
    right: var(--pb-glass-gap) !important;
    bottom: max(10px, calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 12px)) !important;
    height: 64px !important;
    padding-bottom: 0 !important;
    border-radius: 32px !important;
    background: linear-gradient(180deg, rgba(30,38,50,.80) 0%, rgba(12,17,25,.86) 100%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.05) !important;
    backdrop-filter: blur(28px) saturate(190%) brightness(1.05) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.04),
      0 10px 30px rgba(0,0,0,.38),
      0 2px 8px rgba(0,0,0,.22) !important;
  }
  /* Lichtreflex oben, wie bei Glas */
  .pb-bottom-nav::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%);
  }
  [data-theme="light"] .pb-bottom-nav {
    background: linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(246,248,251,.78) 100%) !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 0 0 .5px rgba(0,0,0,.06),
      0 10px 30px rgba(15,23,42,.16),
      0 2px 8px rgba(15,23,42,.08) !important;
  }
  [data-theme="light"] .pb-bottom-nav::after {
    background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 45%);
  }
  .pb-bn-item { padding-top: 4px !important; padding-bottom: 2px !important; }
  /* Aktiv-Strich sitzt jetzt innen in der Kapsel statt an der Bildschirmkante */
  .pb-bn-item.active::before { top: 3px !important; border-radius: 3px !important; }
  /* Kein Glas-Effekt möglich → fast deckend wie bisher */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pb-bottom-nav { background: rgba(10,15,22,.96) !important; }
    [data-theme="light"] .pb-bottom-nav { background: rgba(255,255,255,.97) !important; }
  }
}