/* =========================================================
   mobile-upgrades.css
   Mobile-specific visual upgrades (≤768px). Pure CSS/logic —
   no existing text content is added, edited, or translated.
   Bottom nav + WhatsApp FAB markup are injected by
   mobile-upgrades.js and styled here.
   ========================================================= */

/* ---------------------------------------------------------
   1. Bottom navigation bar
   --------------------------------------------------------- */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(7, 26, 45, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bottom-nav a {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 56px;
        padding: 6px 4px;
        color: rgba(255, 255, 255, 0.65);
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        border-radius: 12px;
        transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    }

    .mobile-bottom-nav a i {
        font-size: 1.15rem;
        transition: transform 0.2s ease;
    }

    .mobile-bottom-nav a:active {
        transform: scale(0.92);
    }

    .mobile-bottom-nav a.is-active {
        color: var(--blue-color, #00b4ff);
        background: rgba(0, 180, 255, 0.12);
    }

    .mobile-bottom-nav a.is-active i {
        transform: translateY(-2px);
    }

    /* Keep page content (and the existing footer) clear of the
       fixed bottom nav + WhatsApp FAB. */
    body.has-mobile-bottom-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------------------------------------------------------
   2. Floating WhatsApp button
   --------------------------------------------------------- */
.mobile-whatsapp-fab {
    display: none;
}

@media (max-width: 768px) {
    .mobile-whatsapp-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 14px;
        bottom: 76px;
        z-index: 999;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #25d366;
        color: #fff;
        font-size: 1.5rem;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .mobile-whatsapp-fab:active {
        transform: scale(0.92);
    }

    /* Nudge above the safe-area padded bottom nav on notched phones */
    body.has-mobile-bottom-nav .mobile-whatsapp-fab {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------------------------------------------------------
   3. Bigger tap targets on mobile
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .nav-menu a,
    .filter-pill,
    .stock-pill,
    .theme-toggle-btn,
    .lang-switch button,
    .lang-switch a,
    .contact-action-btn,
    .wholesale-btn,
    button,
    .fish-info span {
        min-height: 44px;
    }

    .filter-pill,
    .stock-pill {
        padding: 12px 18px;
    }

    .hamburger {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------------------------------------------------------
   4. Horizontal swipe fish cards
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .fish-container {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 24px 6% 30px !important;
        scrollbar-width: none;
    }

    .fish-container::-webkit-scrollbar {
        display: none;
    }

    .fish-container .fish-card {
        flex: 0 0 78%;
        max-width: 280px;
        scroll-snap-align: center;
    }

    .fish-container .fish-no-results {
        flex: 0 0 100%;
    }

    .fish-container .fish-catalog-status {
        flex: 0 0 100%;
    }
}

/* ---------------------------------------------------------
   5. Sticky filter bar
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .search-box {
        position: sticky;
        top: 0;
        z-index: 50;
        padding-top: 10px;
        padding-bottom: 6px;
        background: var(--primary-color, #071a2d);
    }

    .filter-bar {
        position: sticky;
        top: 62px;
        z-index: 49;
        margin: 0;
        padding: 8px 4% 10px;
        background: var(--primary-color, #071a2d);
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .stock-filter-bar {
        margin: 0 0 10px;
        padding: 0 4% 10px;
    }
}

/* ---------------------------------------------------------
   6. Less background decoration on mobile
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-fish-silhouettes,
    .aqua-caustics,
    .aqua-bubble,
    .aqua-particle,
    .aqua-ripple {
        display: none !important;
    }

    .fish-container {
        background: none !important;
    }
}

/* ---------------------------------------------------------
   7. Faster / simpler animations on mobile
   --------------------------------------------------------- */
@media (max-width: 768px) {
    /* Slow ambient/parallax effects are the ones that feel
       heaviest on mobile — turn those off entirely rather than
       just speeding them up, matching the site's existing
       prefers-reduced-motion pattern. */
    .aqua-fish,
    .aqua-glow,
    .aqua-wave-divider .aqua-wave-back,
    .aqua-wave-divider .aqua-wave-front,
    body {
        animation: none !important;
    }

    /* Scroll-reveal entrances stay, but resolve much faster and
       with a smaller travel distance so they feel snappy. */
    .sa-reveal,
    .sa-reveal-left,
    .sa-reveal-right,
    .sa-reveal-scale,
    .sa-heading {
        transition-duration: 0.35s !important;
        transform: translateY(10px) !important;
    }

    .mobile-bottom-nav a,
    .mobile-whatsapp-fab,
    .filter-pill,
    .stock-pill,
    .theme-toggle-btn {
        animation: none !important;
    }
}