/* =============================================================
   SalatiPal — iOS-native styling for the Quran offline-downloads view.
   Every rule is gated behind html.sp-ios, a class set by offline-ios.js
   ONLY inside the Capacitor iOS app — so the web build and Android are
   completely unaffected. .sp-offline-root is tagged by the same script
   onto the offline view's top column.
   Safe to remove: drop the <link>/<script> tags from index.html.
   ============================================================= */

/* ---- #3: clear the iOS status bar -------------------------------------
   The view's top column had only pt-4 (16px); on notched iPhones the
   header sat under the time/battery. Push it down by the safe-area inset
   (env() is 0 on devices/browsers without an inset, so this is harmless). */
html.sp-ios .sp-offline-root {
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
}

/* ---- #4: native-iOS polish (conservative, layout-safe) ---------------- */
html.sp-ios .sp-offline-root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Momentum scrolling + contained overscroll on the inner scroll regions
   so the list bounces like a native iOS list and doesn't drag the page. */
html.sp-ios .sp-offline-root .overflow-y-auto,
html.sp-ios .sp-offline-root .overflow-auto,
html.sp-ios .sp-offline-root [class*="overflow-y"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Keep the last download row clear of the bottom tab bar + home indicator. */
html.sp-ios .sp-offline-root .overflow-y-auto {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Snappy taps: no 300ms delay / double-tap zoom on the controls. */
html.sp-ios .sp-offline-root button {
  touch-action: manipulation;
}

/* =============================================================
   2026-06-03 — ANDROID premium-UX parity for the Offline Library
   (matches the iOS polish above; gated to Android so web is untouched).
   .sp-offline-root is tagged by offline-ios.js on BOTH platforms.
   Native touch feel (ripple + haptics on the download buttons) is added
   separately by android-native.js.
   ============================================================= */
body[data-sp-platform="android"] .sp-offline-root {
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
body[data-sp-platform="android"] .sp-offline-root .overflow-y-auto,
body[data-sp-platform="android"] .sp-offline-root .overflow-auto,
body[data-sp-platform="android"] .sp-offline-root [class*="overflow-y"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body[data-sp-platform="android"] .sp-offline-root .overflow-y-auto {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
body[data-sp-platform="android"] .sp-offline-root button { touch-action: manipulation; }