/* ============================================================
   Mobile Navigation System
   — Top sticky header + Bottom fixed nav + Search overlay + Full-screen drawer
   — Only active below 768px
   ============================================================ */

/* ── Desktop: hide mobile components ── */
.mobile-header,
.mobile-bottom-nav,
.mobile-sticky-cta,
.mobile-search-overlay,
.mobile-menu {
    display: none;
}

/* ── Mobile breakpoint ── */
@media (max-width: 768px) {

    /* Hide desktop header */
    .aisaas-header {
        display: none;
    }

    /* Body padding for fixed bars */
    body {
        padding-top: 60px;
        padding-bottom: 72px;
    }

    /* Ensure no overflow from bottom nav */
    .aisaas-footer {
        padding-bottom: 80px;
    }


    /* ============================================================
       1. Mobile Top Header
       ============================================================ */
    .mobile-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        height: 60px;
        background: var(--aisaas-bg);
        border-bottom: 1px solid var(--aisaas-border);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .mobile-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 12px;
    }

    .mobile-header__brand {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--aisaas-text);
        flex-shrink: 0;
        max-width: 55%;
    }

    .mobile-header__logo-img {
        height: 32px;
        width: auto;
        max-width: 140px;
        object-fit: contain;
    }

    .mobile-header__logo-text {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--aisaas-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-header__actions {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mobile-header__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: var(--aisaas-text);
        border-radius: var(--aisaas-radius-md, 8px);
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-header__btn:active {
        background: var(--aisaas-bg-tertiary);
    }

    /* Dark mode toggle icons */
    .mobile-dark-icon--sun,
    .mobile-dark-icon--moon {
        display: none;
    }
    [data-theme="light"] .mobile-dark-icon--moon,
    :root:not([data-theme]) .mobile-dark-icon--moon {
        display: block;
    }
    [data-theme="dark"] .mobile-dark-icon--sun {
        display: block;
    }

    /* Menu toggle icon swap */
    .mobile-menu-icon--close {
        display: none;
    }
    .mobile-header__menu-btn[aria-expanded="true"] .mobile-menu-icon--open {
        display: none;
    }
    .mobile-header__menu-btn[aria-expanded="true"] .mobile-menu-icon--close {
        display: block;
    }


    /* ============================================================
       2. Mobile Bottom Navigation
       ============================================================ */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        height: 64px;
        background: var(--aisaas-bg);
        border-top: 1px solid var(--aisaas-border);
        align-items: center;
        justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Hide bottom nav when sticky CTA is showing on tool detail page */
    body.show-mobile-cta .mobile-bottom-nav {
        display: none;
    }

    .mobile-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        height: 100%;
        text-decoration: none;
        color: var(--aisaas-text-muted);
        font-size: 0.625rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
        padding: 4px 0;
    }

    .mobile-bottom-nav__item svg {
        width: 22px;
        height: 22px;
    }

    .mobile-bottom-nav__item.is-active,
    .mobile-bottom-nav__item:active {
        color: var(--aisaas-primary);
    }

    .mobile-bottom-nav__item.is-active svg {
        stroke-width: 2.5;
    }


    /* ============================================================
       3. Mobile Sticky CTA (tool detail page)
       ============================================================ */
    .mobile-sticky-cta {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: var(--aisaas-bg);
        border-top: 1px solid var(--aisaas-border);
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        animation: slideUpCTA 0.3s ease-out;
    }

    body.show-mobile-cta .mobile-sticky-cta[hidden] {
        display: none;
    }
    body.show-mobile-cta .mobile-sticky-cta:not([hidden]) {
        display: block;
    }

    @keyframes slideUpCTA {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .mobile-sticky-cta__inner {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-sticky-cta__logo {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .mobile-sticky-cta__info {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
        flex: 1;
    }

    .mobile-sticky-cta__name {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--aisaas-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-sticky-cta__badge {
        display: inline-block;
        font-size: 0.625rem;
        font-weight: 600;
        padding: 1px 6px;
        border-radius: 4px;
        width: fit-content;
    }

    .mobile-sticky-cta__badge--free {
        background: var(--aisaas-tag-green-bg, rgba(34,197,94,0.12));
        color: var(--aisaas-tag-green-text, #16a34a);
    }

    .mobile-sticky-cta__badge--trial {
        background: var(--aisaas-tag-blue-bg, rgba(59,130,246,0.12));
        color: var(--aisaas-tag-blue-text, #2563eb);
    }

    .mobile-sticky-cta__btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 8px 16px;
        font-size: 0.8125rem;
        font-weight: 600;
        background: var(--aisaas-cta, #4f46e5);
        color: #fff;
        border: none;
        border-radius: var(--aisaas-radius-md, 8px);
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mobile-sticky-cta .aisaas-fav-btn {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
    }


    /* ============================================================
       4. Mobile Search Overlay
       ============================================================ */
    .mobile-search-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1100;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-search-overlay:not([hidden]) {
        display: flex;
        flex-direction: column;
    }

    .mobile-search-overlay__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
        animation: fadeIn 0.2s ease-out;
    }

    .mobile-search-overlay__panel {
        position: relative;
        z-index: 1;
        background: var(--aisaas-bg);
        width: 100%;
        min-height: 100%;
        animation: slideUp 0.25s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* Header with search input */
    .mobile-search-overlay__header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
        border-bottom: 1px solid var(--aisaas-border);
        position: sticky;
        top: 0;
        background: var(--aisaas-bg);
        z-index: 2;
    }

    .mobile-search-overlay__input-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        background: var(--aisaas-bg-secondary);
        border: 1px solid var(--aisaas-border);
        border-radius: var(--aisaas-radius-md, 8px);
        padding: 0 12px;
        height: 44px;
    }

    .mobile-search-overlay__input-wrap svg {
        color: var(--aisaas-text-muted);
        flex-shrink: 0;
    }

    .mobile-search-overlay__input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 1rem;
        color: var(--aisaas-text);
        outline: none;
        min-width: 0;
    }

    .mobile-search-overlay__input::placeholder {
        color: var(--aisaas-text-muted);
    }

    .mobile-search-overlay__clear {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: none;
        background: var(--aisaas-bg-tertiary);
        border-radius: 50%;
        color: var(--aisaas-text-muted);
        cursor: pointer;
        flex-shrink: 0;
    }

    .mobile-search-overlay__cancel {
        border: none;
        background: transparent;
        color: var(--aisaas-primary);
        font-size: 0.9375rem;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 4px;
    }

    /* Search Results */
    .mobile-search-overlay__results {
        padding: 8px 0;
    }

    .mobile-search-overlay__results-list {
        display: flex;
        flex-direction: column;
    }

    .mobile-search-overlay__result-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        text-decoration: none;
        color: var(--aisaas-text);
        transition: background 0.1s;
    }

    .mobile-search-overlay__result-item:active {
        background: var(--aisaas-bg-secondary);
    }

    .mobile-search-overlay__result-logo {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        object-fit: contain;
        flex-shrink: 0;
        background: var(--aisaas-bg-tertiary);
    }

    .mobile-search-overlay__result-logo--fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--aisaas-primary);
    }

    .mobile-search-overlay__result-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-search-overlay__result-name {
        font-size: 0.9375rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-search-overlay__result-tagline {
        font-size: 0.75rem;
        color: var(--aisaas-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-search-overlay__result-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .mobile-search-overlay__result-rating {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--aisaas-text-secondary);
    }

    .mobile-search-overlay__result-pricing {
        font-size: 0.6875rem;
        font-weight: 500;
        padding: 2px 6px;
        border-radius: 4px;
        background: var(--aisaas-tag-green-bg, rgba(34,197,94,0.12));
        color: var(--aisaas-tag-green-text, #16a34a);
    }

    .mobile-search-overlay__result-pricing--paid {
        background: var(--aisaas-bg-tertiary);
        color: var(--aisaas-text-muted);
    }

    /* Default content (Quick Filters & Popular) */
    .mobile-search-overlay__default {
        padding: 8px 16px 24px;
    }

    .mobile-search-overlay__section {
        margin-bottom: 20px;
    }

    .mobile-search-overlay__section-title {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--aisaas-text-muted);
        margin-bottom: 10px;
    }

    .mobile-search-overlay__pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mobile-search-overlay__pill {
        display: inline-block;
        padding: 6px 14px;
        font-size: 0.8125rem;
        font-weight: 500;
        background: var(--aisaas-bg-secondary);
        color: var(--aisaas-text);
        border: 1px solid var(--aisaas-border);
        border-radius: 20px;
        text-decoration: none;
        transition: background 0.15s, border-color 0.15s;
    }

    .mobile-search-overlay__pill:active {
        background: var(--aisaas-primary);
        color: #fff;
        border-color: var(--aisaas-primary);
    }

    .mobile-search-overlay__popular {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-search-overlay__popular li {
        border-bottom: 1px solid var(--aisaas-border);
    }

    .mobile-search-overlay__popular li:last-child {
        border-bottom: none;
    }

    .mobile-search-overlay__popular a {
        display: block;
        padding: 12px 0;
        font-size: 0.9375rem;
        color: var(--aisaas-text);
        text-decoration: none;
    }

    .mobile-search-overlay__popular a:active {
        color: var(--aisaas-primary);
    }

    /* Loading & Empty states */
    .mobile-search-overlay__loading,
    .mobile-search-overlay__empty {
        padding: 40px 16px;
        text-align: center;
        color: var(--aisaas-text-muted);
        font-size: 0.875rem;
    }


    /* ============================================================
       5. Mobile Menu (Full-Screen Drawer)
       ============================================================ */
    .mobile-menu {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1100;
        overflow: hidden;
    }

    .mobile-menu:not([hidden]) {
        display: flex;
    }

    .mobile-menu__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
        animation: fadeIn 0.2s ease-out;
    }

    .mobile-menu__panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 90%;
        max-width: 380px;
        background: var(--aisaas-bg);
        animation: slideInRight 0.24s ease-out;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    @keyframes slideInRight {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }

    /* Menu Header */
    .mobile-menu__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid var(--aisaas-border);
        flex-shrink: 0;
    }

    .mobile-menu__brand {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--aisaas-text);
    }

    .mobile-menu__brand-img {
        height: 32px;
        width: auto;
    }

    .mobile-menu__brand-text {
        font-size: 1.125rem;
        font-weight: 700;
    }

    .mobile-menu__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: var(--aisaas-text);
        border-radius: var(--aisaas-radius-md, 8px);
        cursor: pointer;
    }

    .mobile-menu__close:active {
        background: var(--aisaas-bg-tertiary);
    }

    /* Menu Search Button */
    .mobile-menu__search {
        padding: 12px 16px;
        flex-shrink: 0;
    }

    .mobile-menu__search-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 14px;
        background: var(--aisaas-bg-secondary);
        border: 1px solid var(--aisaas-border);
        border-radius: var(--aisaas-radius-md, 8px);
        color: var(--aisaas-text-muted);
        font-size: 0.9375rem;
        cursor: pointer;
        text-align: left;
    }

    .mobile-menu__search-btn:active {
        background: var(--aisaas-bg-tertiary);
    }

    /* Accordion Navigation */
    .mobile-menu__nav {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
    }

    .mobile-menu__group {
        border-bottom: 1px solid var(--aisaas-border);
    }

    .mobile-menu__group:last-child {
        border-bottom: none;
    }

    .mobile-menu__group-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 14px 16px;
        border: none;
        background: transparent;
        color: var(--aisaas-text);
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu__group-toggle:active {
        background: var(--aisaas-bg-secondary);
    }

    .mobile-menu__group-icon {
        display: flex;
        align-items: center;
        color: var(--aisaas-text-muted);
    }

    .mobile-menu__chevron {
        margin-left: auto;
        transition: transform 0.2s ease;
        color: var(--aisaas-text-muted);
    }

    .mobile-menu__group-toggle[aria-expanded="true"] .mobile-menu__chevron {
        transform: rotate(180deg);
    }

    .mobile-menu__badge {
        margin-left: 8px;
        padding: 2px 8px;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: var(--aisaas-cta, #4f46e5);
        color: #fff;
        border-radius: 4px;
    }

    /* Group Content (collapsible) */
    .mobile-menu__group-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .mobile-menu__group-content.is-open {
        max-height: 500px;
    }

    .mobile-menu__link {
        display: block;
        padding: 10px 16px 10px 44px;
        font-size: 0.875rem;
        color: var(--aisaas-text-secondary);
        text-decoration: none;
        transition: background 0.1s, color 0.1s;
    }

    .mobile-menu__link:active {
        background: var(--aisaas-bg-secondary);
        color: var(--aisaas-text);
    }

    .mobile-menu__link--more {
        color: var(--aisaas-primary);
        font-weight: 500;
    }

    .mobile-menu__link--cta {
        color: var(--aisaas-cta, #4f46e5);
        font-weight: 600;
    }

    /* Account Section */
    .mobile-menu__account {
        padding: 16px;
        border-top: 1px solid var(--aisaas-border);
        flex-shrink: 0;
    }

    .mobile-menu__account-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--aisaas-text);
        text-decoration: none;
    }

    .mobile-menu__account-link:active {
        color: var(--aisaas-primary);
    }

    .mobile-menu__account-link--login {
        color: var(--aisaas-primary);
    }

    .mobile-menu__account-hint {
        margin: 4px 0 0;
        font-size: 0.75rem;
        color: var(--aisaas-text-muted);
    }


    /* ============================================================
       6. Body Scroll Lock
       ============================================================ */
    body.has-mobile-menu,
    body.has-mobile-search {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }


    /* ============================================================
       7. Dark Mode
       ============================================================ */
    [data-theme="dark"] .mobile-header,
    [data-theme="dark"] .mobile-bottom-nav,
    [data-theme="dark"] .mobile-sticky-cta {
        background: var(--aisaas-bg);
        border-color: var(--aisaas-border);
    }

    [data-theme="dark"] .mobile-header {
        background: rgba(17,17,17,0.92);
    }

    [data-theme="dark"] .mobile-bottom-nav {
        background: var(--aisaas-bg);
    }

    [data-theme="dark"] .mobile-search-overlay__panel,
    [data-theme="dark"] .mobile-menu__panel {
        background: var(--aisaas-bg);
    }

    [data-theme="dark"] .mobile-menu__search-btn {
        background: var(--aisaas-bg-secondary);
        border-color: var(--aisaas-border);
    }

    [data-theme="dark"] .mobile-sticky-cta__btn {
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }


    /* ============================================================
       8. Landscape / Large Mobile Tweaks
       ============================================================ */
    @media (max-width: 768px) and (orientation: landscape) {
        .mobile-header {
            height: 52px;
        }

        body {
            padding-top: 52px;
        }

        .mobile-bottom-nav {
            height: 52px;
        }

        .mobile-menu__panel {
            max-width: 340px;
        }
    }


    /* ============================================================
       9. Small Phone (<=360px) Tweaks
       ============================================================ */
    @media (max-width: 360px) {
        .mobile-header__logo-text {
            font-size: 0.9375rem;
        }

        .mobile-bottom-nav__item {
            font-size: 0.5625rem;
        }

        .mobile-sticky-cta__btn {
            padding: 8px 12px;
            font-size: 0.75rem;
        }

        .mobile-sticky-cta__name {
            font-size: 0.75rem;
        }

        .mobile-menu__panel {
            width: 100%;
            max-width: none;
        }
    }

} /* end @media (max-width: 768px) */