/* ════════════════════════════════════════════
   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;
  }
}