/* =========================================================================
   AJONTec — Mobile App Shell
   Turns the website into an app-like experience on phones: bottom tab bar,
   safe-area padding, native-feeling taps, scroll-aware header and an
   install prompt. Everything is namespaced .aj-app / .aj-tab*.
   ========================================================================= */

/* ---------------------------------------------------------------
   Global app-ish behaviour (mobile only)
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 76px;
    }

    body {
        /* Room for the tab bar so nothing is ever hidden behind it. */
        overscroll-behavior-y: none;
    }

    body.has-tabbar {
        /* --aj-tabbar-h is measured and set by ajon-app.js; the fallback keeps
           the layout correct before that script runs. */
        padding-bottom: var(--aj-tabbar-h, 66px);
    }

    /* Native-feeling taps: no blue flash, no accidental text selection
       on controls, but real text stays selectable. */
    a, button, summary, label, .btn, .aj-tab {
        -webkit-tap-highlight-color: transparent;
    }
    button, .btn, .aj-tab, summary {
        -webkit-user-select: none;
        user-select: none;
    }
    a:active, .btn:active, .aj-tab:active { transition-duration: .05s; }

    /* Inputs at 16px+ so iOS never zooms the viewport on focus. */
    input[type=text], input[type=email], input[type=tel], input[type=url],
    input[type=number], input[type=password], input[type=search],
    textarea, select { font-size: 16px; }

    /* Horizontal scrollers behave like native carousels. */
    .aj-snap {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .aj-snap > * { scroll-snap-align: start; }
}

/* Respect the notch everywhere. */
@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 900px) {
        .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    }
}

/* ---------------------------------------------------------------
   Scroll-aware header — hides going down, returns going up
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    .header {
        transition: transform .3s cubic-bezier(.32, .72, 0, 1);
        padding-top: env(safe-area-inset-top);
        will-change: transform;
    }
    body.aj-hide-header .header { transform: translateY(-102%); }
    body.aj-hide-header .svcx-subnav { top: 0; }
}

/* ---------------------------------------------------------------
   Bottom tab bar
   --------------------------------------------------------------- */
.aj-tabbar { display: none; }

@media (max-width: 900px) {
    .aj-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 46;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        align-items: stretch;
        gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: rgba(var(--theme-bg-rgb, 6, 9, 20), .9);
        backdrop-filter: blur(20px) saturate(1.6);
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
        border-top: 1px solid var(--border-color, rgba(255, 255, 255, .08));
        transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    }
    body.aj-hide-tabbar .aj-tabbar { transform: translateY(110%); }

    .aj-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 2px 6px;
        border-radius: 12px;
        min-height: 50px;
        text-decoration: none;
        color: var(--text-muted, #6b7488);
        font-weight: 600;
        transition: color .2s ease, background .2s ease, transform .12s ease;
    }
    .aj-tab:active { transform: scale(.93); background: rgba(127, 127, 127, .12); }

    .aj-tab-ico {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    }
    .aj-tab-label {
        font-size: .655rem;
        letter-spacing: .01em;
        line-height: 1;
    }

    .aj-tab.is-active { color: var(--accent-indigo, #6366f1); }
    .aj-tab.is-active .aj-tab-ico { transform: translateY(-1px) scale(1.06); }
    .aj-tab.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--accent-indigo, #6366f1);
    }

    /* The primary action gets a filled pill so it reads as the main CTA. */
    .aj-tab.is-accent .aj-tab-ico {
        width: 38px;
        height: 30px;
        border-radius: 10px;
        color: #fff;
        background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
        box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb, 99, 102, 241), .38);
    }
    .aj-tab.is-accent { color: var(--text-secondary, #aab2c5); }
    .aj-tab.is-accent.is-active { color: var(--accent-indigo, #6366f1); }

    /* Hide the desktop floating widgets clashing with the bar. */
    body.has-tabbar .back-to-top,
    body.has-tabbar .aj-float,
    body.has-tabbar .whatsapp-float,
    body.has-tabbar #aj-mode-toggle { bottom: calc(var(--aj-tabbar-h, 66px) + 12px); }
}

/* ---------------------------------------------------------------
   Page transition — a short, subtle fade-up on navigation
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    body.aj-app-ready main,
    body.aj-app-ready > section:not(.aj-tabbar),
    body.aj-app-ready > .container { animation: aj-page-in .3s cubic-bezier(.32, .72, 0, 1) both; }
}
@keyframes aj-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Install prompt ("Add to Home Screen")
   --------------------------------------------------------------- */
.aj-install {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--aj-tabbar-h, 66px) + 12px);
    z-index: 47;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    background: rgba(var(--theme-bg-rgb, 6, 9, 20), .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .42);
    animation: aj-slide-up .34s cubic-bezier(.32, .72, 0, 1);
}
.aj-install.is-open { display: flex; }
@keyframes aj-slide-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.aj-install img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; }
.aj-install-text { flex: 1; min-width: 0; line-height: 1.3; }
.aj-install-text strong { display: block; font-size: .9rem; }
.aj-install-text span { font-size: .76rem; color: var(--text-muted, #6b7488); }
.aj-install-btn {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 10px;
    border: 0;
    font-weight: 700;
    font-size: .82rem;
    color: #fff;
    background: var(--gradient-glow, linear-gradient(135deg, #6366f1, #22d3ee));
    cursor: pointer;
}
.aj-install-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--text-muted, #6b7488);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
@media (min-width: 901px) { .aj-install { display: none !important; } }

/* ---------------------------------------------------------------
   Standalone mode (launched from the home screen)
   --------------------------------------------------------------- */
@media (display-mode: standalone) {
    /* No browser chrome, so give the header the status-bar space back. */
    .header { padding-top: max(env(safe-area-inset-top), 8px); }
    .aj-install { display: none !important; }
    /* Footer link clutter is unnecessary inside the app. */
    body.has-tabbar .footer-bottom-links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .aj-tab, .aj-tabbar, .header, .aj-install,
    body.aj-app-ready main { animation: none !important; transition: none !important; }
}