/* ============================================================================
   native-app.css — WebView / smartphone native-feel layer for Namaste PanditJi
   ----------------------------------------------------------------------------
   TWO TIERS:
   1. GLOBAL-SAFE rules (unscoped)      → applied on every screen size. These are
      harmless on desktop (safe-area env() resolves to 0, tap-highlight/overscroll
      only affect touch) and give small perf/UX wins everywhere.
   2. NATIVE-ONLY rules (html.np-mobile) → applied ONLY on smartphone-sized windows
      OR inside the MAUI WebView. On laptops / big windows the `np-mobile` class is
      absent, so the site behaves as a normal web application (text selectable,
      hover menus, no forced bottom tab bar, etc.).

   The `np-mobile` / `in-webview` classes are toggled by native-app.js. A media-query
   fallback (bottom of file) covers the no-JS case for the most important rules.
   Loaded AFTER the inline <style> in _Layout so these rules win the cascade.
   ============================================================================ */

/* ---- safe-area inset variables (0 on non-notch devices) ---- */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --bottom-nav-h: 60px;
    --np-press-ease: transform 0.09s ease, opacity 0.09s ease;
}

/* ============================================================================
   1. GLOBAL-SAFE  (all screen sizes)
   ============================================================================ */

/* Kill the grey tap flash on touch; harmless on desktop. */
html { -webkit-tap-highlight-color: transparent; }

/* No pull-to-refresh / rubber-band overscroll chaining. */
html, body { overscroll-behavior: none; }

/* Guard against a stray wide element causing horizontal scroll on phones. */
body { max-width: 100%; overflow-x: hidden; }

/* Interactive elements should not double-tap-zoom and should feel instant. */
a, button, .btn, [role="button"], input[type="submit"], input[type="button"],
label, .mbn-item, .nav-cat-link, .amt-chip, .np-back-btn, .navbar-toggler,
.wallet-chip, .add-money-btn, summary, .dropdown-toggle {
    touch-action: manipulation;
}

/* Images never overflow and always reserve vertical space (less layout shift). */
img { max-width: 100%; }
img[width][height] { height: auto; }

/* Reusable aspect-ratio box to reserve space for lazy media / thumbnails. */
.np-aspect { position: relative; width: 100%; overflow: hidden; }
.np-aspect > img, .np-aspect > iframe, .np-aspect > video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.np-aspect-1x1 { aspect-ratio: 1 / 1; }
.np-aspect-4x3 { aspect-ratio: 4 / 3; }
.np-aspect-16x9 { aspect-ratio: 16 / 9; }

/* Lazy images fade in once loaded (no jarring pop). */
img.np-lazy { opacity: 0; transition: opacity 0.35s ease; }
img.np-lazy.np-loaded, img.np-lazy[data-np-loaded] { opacity: 1; }

/* ---- Native-style spinner ---- */
.np-spinner {
    display: inline-block; width: 40px; height: 40px;
    border: 3px solid rgba(232, 101, 10, 0.18);
    border-top-color: var(--saffron, #E8650A);
    border-radius: 50%;
    animation: np-spin 0.7s linear infinite;
}
.np-spinner-sm { width: 20px; height: 20px; border-width: 2px; }
@keyframes np-spin { to { transform: rotate(360deg); } }

/* ---- Skeleton shimmer (reserve space while content loads) ---- */
.np-skeleton {
    position: relative; overflow: hidden;
    background: #F0E6D8; border-radius: 10px;
}
.np-skeleton::after {
    content: ""; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: np-shimmer 1.3s infinite;
}
@keyframes np-shimmer { 100% { transform: translateX(100%); } }

/* ---- Top loading bar (shown during in-app navigation) ---- */
#npLoadingBar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--saffron, #E8650A), var(--crimson, #8B0000));
    z-index: 3000; opacity: 0;
    transition: width 0.25s ease, opacity 0.3s ease;
    pointer-events: none;
}
#npLoadingBar.np-active { opacity: 1; }

/* Full-screen native-style loading overlay (opt-in via .np-loading-overlay). */
.np-loading-overlay {
    position: fixed; inset: 0; z-index: 2900;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 251, 245, 0.82); backdrop-filter: blur(2px);
}

/* ---- Mobile navbar dropdowns (e.g. the logged-in profile/logout menu) must
        render INLINE inside the collapsed hamburger, not float off-screen.
        The profile dropdown lives outside .navbar-nav, so Bootstrap's automatic
        static-dropdown treatment doesn't reach it and `.dropdown-menu-end` pushed
        it past the left edge. This applies on every small window (not just the
        WebView), matching how the Panchang/More menus already behave. ---- */
@media (max-width: 991.98px) {
    .navbar-main .navbar-collapse .dropdown-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none;
        width: 100%;
        margin-top: 6px;
        border: 1px solid var(--border-light);
        box-shadow: none;
    }
    .navbar-main .navbar-collapse .dropdown-menu-end { --bs-position: start; }
}

/* Respect reduced-motion users everywhere. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   2. NATIVE-ONLY  (html.np-mobile  →  smartphone window OR MAUI WebView)
   Desktop / large windows never get these, so the web experience is preserved.
   ============================================================================ */

/* ---- Safe-area padding for notches / status bars / gesture bars ---- */
html.np-mobile .top-bar { padding-top: calc(7px + var(--safe-top)); }
html.np-mobile .navbar-main { padding-top: var(--safe-top); }
/* When the announcement bar is hidden (mobile), the navbar owns the top inset. */
html.np-mobile .container,
html.np-mobile .container-fluid {
    padding-left: calc(0.75rem + var(--safe-left));
    padding-right: calc(0.75rem + var(--safe-right));
}
html.np-mobile .mobile-bottom-nav {
    padding-bottom: calc(4px + var(--safe-bottom));
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}
html.np-mobile .footer-main { padding-bottom: var(--safe-bottom); }
/* Floating controls clear the bottom tab bar + gesture inset. */
html.np-mobile #scrollTop { bottom: calc(var(--bottom-nav-h) + 16px + var(--safe-bottom)); right: 16px; }

/* ---- Remove "browser" text-selection & long-press callout on UI chrome ---- */
/* Chrome = nav, buttons, icons, chips. Real CONTENT stays selectable (below). */
html.np-mobile .top-bar,
html.np-mobile .navbar-main,
html.np-mobile .nav-category-bar,
html.np-mobile .mobile-bottom-nav,
html.np-mobile .footer-main,
html.np-mobile .btn,
html.np-mobile button,
html.np-mobile .nav-link-main,
html.np-mobile .nav-cat-link,
html.np-mobile .mbn-item,
html.np-mobile .np-back-btn,
html.np-mobile .amt-chip,
html.np-mobile .wallet-chip,
html.np-mobile .add-money-btn,
html.np-mobile .dropdown-toggle,
html.np-mobile .section-label,
html.np-mobile [role="button"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Explicitly KEEP selection on genuine content & inputs. */
html.np-mobile p,
html.np-mobile h1, html.np-mobile h2, html.np-mobile h3,
html.np-mobile h4, html.np-mobile h5, html.np-mobile h6,
html.np-mobile li, html.np-mobile td, html.np-mobile th,
html.np-mobile blockquote, html.np-mobile pre, html.np-mobile code,
html.np-mobile .policy-card, html.np-mobile .card-body,
html.np-mobile input, html.np-mobile textarea, html.np-mobile select,
html.np-mobile [contenteditable], html.np-mobile .np-selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ---- Tactile press feedback on every interactive element ---- */
html.np-mobile a:active,
html.np-mobile button:active,
html.np-mobile .btn:active,
html.np-mobile [role="button"]:active,
html.np-mobile .mbn-item:active,
html.np-mobile .nav-cat-link:active,
html.np-mobile .amt-chip:active,
html.np-mobile .card-pro:active,
html.np-mobile .np-back-btn:active,
html.np-mobile .np-pressed {
    transform: scale(0.97);
    opacity: 0.9;
    transition: var(--np-press-ease);
}
/* Neutralise hover-lift transforms that feel wrong without a real cursor. */
html.np-mobile .btn-primary-brand:hover,
html.np-mobile .btn-saffron:hover,
html.np-mobile .btn-outline-brand:hover,
html.np-mobile .card-pro:hover,
html.np-mobile .add-money-btn:hover,
html.np-mobile .footer-social a:hover { transform: none; }

/* ---- Minimum 44x44 tap targets (Apple/Google a11y) ---- */
html.np-mobile .mbn-item,
html.np-mobile .nav-cat-link,
html.np-mobile .np-back-btn,
html.np-mobile .navbar-toggler,
html.np-mobile .dropdown-item,
html.np-mobile .btn-sm,
html.np-mobile .amt-chip,
html.np-mobile .footer-social a,
html.np-mobile .footer-main a {
    min-height: 44px;
    display: flex;
    align-items: center;
}
html.np-mobile .navbar-toggler,
html.np-mobile .footer-social a { min-width: 44px; justify-content: center; }
/* Nav bottom-tab items stay column layout (icon over label) but keep the 44px min. */
html.np-mobile .mbn-item { flex-direction: column; justify-content: center; }
/* Give footer link rows breathing room so they don't mis-tap. */
html.np-mobile .footer-main ul li { margin-bottom: 2px; }

/* ---- Native app-shell nav: show the bottom tab bar inside the WebView at any
        width, and lift page content clear of it. (< 768px already handled by the
        inline media query in _Layout; this covers WebView on larger tablets.) ---- */
html.in-webview .mobile-bottom-nav { display: flex; flex-direction: column; }
html.in-webview body { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }

/* Active state highlight for the current bottom-tab (JS sets .active). */
html.np-mobile .mobile-bottom-nav .mbn-item.active {
    color: var(--crimson, #8B0000);
    position: relative;
}
html.np-mobile .mobile-bottom-nav .mbn-item.active::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--saffron, #E8650A), var(--crimson, #8B0000));
}

/* ---- Lightweight page-enter transition (native screen feel, < 300ms) ----
   NOTE: opacity-only on purpose. A `transform` here (even translateY(0)) would
   make <main> a containing block and break `position: fixed` for any descendant
   (e.g. the Panditji profile's sticky Chat/Call bar). Keep this transform-free. */
html.np-mobile main.np-page { animation: np-page-in 0.22s ease-out both; }
@keyframes np-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Hide things that make no sense inside a native WebView shell
        (install-app prompts, "open in browser", cookie banners, etc.) ---- */
html.in-webview .hide-in-webview,
html.in-webview [data-webview-hide] { display: none !important; }

/* ---- Momentum scrolling & no visible scrollbars for the app-shell feel ---- */
html.np-mobile body { -webkit-overflow-scrolling: touch; }
html.np-mobile ::-webkit-scrollbar { width: 0; height: 0; }

/* ============================================================================
   No-JS media-query fallback for the most critical native rules on phones.
   (native-app.js normally sets html.np-mobile; this keeps phones sane if JS
    fails to run for any reason.)
   ============================================================================ */
@media (max-width: 767.98px) {
    .top-bar { padding-top: calc(7px + var(--safe-top)); }
    .mobile-bottom-nav {
        padding-bottom: calc(4px + var(--safe-bottom));
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }
    #scrollTop { bottom: calc(var(--bottom-nav-h) + 16px + var(--safe-bottom)); right: 16px; }
    .navbar-main { padding-top: var(--safe-top); }
}