/*
 * LinKnote Store Mobile Tabs v1.0.3
 * Mobile-only Store / client / creator navigation.
 */

.ln-store-mobile-tabs {
    display: none;
}

@media (max-width: 900px) {
    /* The replacement is enabled only after JavaScript has initialized. */
    body.ln-store-mobile-tabs-ready .storefront-primary-navigation,
    body.ln-store-mobile-tabs-ready .site-header .main-navigation,
    body.ln-store-mobile-tabs-ready .site-header #site-navigation,
    body.ln-store-mobile-tabs-ready .site-header button.menu-toggle {
        display: none !important;
    }

    body.ln-store-mobile-tabs-ready .ln-client-account-shell__nav,
    body.woocommerce-account.ln-store-mobile-tabs-ready .woocommerce-MyAccount-navigation:not(.ln-store-mobile-tabs__source-menu),
    body.ln-store-mobile-tabs-ready .ln-client-menu:not(.ln-store-mobile-tabs__source-menu),
    body.ln-store-mobile-tabs-ready .linknote-creator-menu:not(.ln-store-mobile-tabs__source-menu) {
        display: none !important;
    }

    body.woocommerce-account.ln-store-mobile-tabs-ready .woocommerce,
    body.ln-store-mobile-tabs-ready .ln-client-account-shell,
    body.ln-store-mobile-tabs-ready .linknote-creator-dashboard-layout {
        display: block !important;
        grid-template-columns: none !important;
    }

    body.woocommerce-account.ln-store-mobile-tabs-ready .woocommerce-MyAccount-content,
    body.ln-store-mobile-tabs-ready .ln-client-account-shell__content,
    body.ln-store-mobile-tabs-ready .linknote-creator-dashboard-main {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.ln-store-mobile-tabs-ready .ln-store-mobile-tabs {
        --ln-store-mobile-mint: #31c7ad;
        --ln-store-mobile-mint-dark: #168f7d;
        --ln-store-mobile-mint-pale: #eefbf8;
        --ln-store-mobile-ink: #27343a;
        --ln-store-mobile-muted: #6f7f84;
        --ln-store-mobile-border: #dfe8e8;

        display: block;
        position: relative;
        z-index: 90;
        width: calc(100% - 24px);
        max-width: 1320px;
        margin: 10px auto 18px;
        color: var(--ln-store-mobile-ink);
        font-size: 14px;
        line-height: 1.45;
        box-sizing: border-box;
    }

    .ln-store-mobile-tabs *,
    .ln-store-mobile-tabs *::before,
    .ln-store-mobile-tabs *::after {
        box-sizing: border-box;
    }

    .ln-store-mobile-tabs__menu {
        overflow: hidden;
        border: 1px solid var(--ln-store-mobile-border);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(35, 62, 61, .11);
    }

    .ln-store-mobile-tabs__panel[hidden] {
        display: none !important;
    }

    .ln-store-mobile-tabs__tablist {
        display: grid;
        grid-template-columns: repeat(var(--ln-store-mobile-tab-count), minmax(0, 1fr));
        gap: 4px;
        padding: 5px;
        border-bottom: 1px solid var(--ln-store-mobile-border);
        background: #f5f9f8;
    }

    .ln-store-mobile-tabs__tab {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 40px;
        margin: 0 !important;
        padding: 8px 5px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--ln-store-mobile-muted) !important;
        font: inherit;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        appearance: none;
    }

    .ln-store-mobile-tabs__tab:hover,
    .ln-store-mobile-tabs__tab:focus-visible {
        color: var(--ln-store-mobile-mint-dark) !important;
        outline: none;
    }

    .ln-store-mobile-tabs__tab:focus-visible {
        box-shadow: inset 0 0 0 2px rgba(49, 199, 173, .35) !important;
    }

    .ln-store-mobile-tabs__tab.is-active {
        background: #fff !important;
        color: var(--ln-store-mobile-mint-dark) !important;
        box-shadow: 0 1px 4px rgba(35, 62, 61, .10), inset 0 -3px 0 var(--ln-store-mobile-mint) !important;
    }

    .ln-store-mobile-tabs__panel {
        max-height: min(66vh, 540px);
        padding: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .ln-store-mobile-tabs__links,
    .ln-store-mobile-tabs__source-menu ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 1px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: var(--ln-store-mobile-border) !important;
        list-style: none !important;
    }

    .ln-store-mobile-tabs__links > li,
    .ln-store-mobile-tabs__source-menu li {
        position: relative;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #fff !important;
        list-style: none !important;
    }

    .ln-store-mobile-tabs__links a,
    .ln-store-mobile-tabs__source-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        position: relative !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 9px 7px !important;
        border: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: var(--ln-store-mobile-ink) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-align: center !important;
        text-decoration: none !important;
        word-break: keep-all;
    }

    .ln-store-mobile-tabs__links a::before,
    .ln-store-mobile-tabs__links a::after,
    .ln-store-mobile-tabs__source-menu a::before,
    .ln-store-mobile-tabs__source-menu a::after,
    .ln-store-mobile-tabs__source-menu li::before,
    .ln-store-mobile-tabs__source-menu li::after {
        content: none !important;
        display: none !important;
    }

    .ln-store-mobile-tabs__links a:hover,
    .ln-store-mobile-tabs__links a:focus-visible,
    .ln-store-mobile-tabs__source-menu a:hover,
    .ln-store-mobile-tabs__source-menu a:focus-visible {
        background: #f5fbf9 !important;
        color: var(--ln-store-mobile-mint-dark) !important;
        outline: none;
    }

    .ln-store-mobile-tabs__links li.is-active > a,
    .ln-store-mobile-tabs__source-menu li.is-active > a {
        background: var(--ln-store-mobile-mint-pale) !important;
        color: var(--ln-store-mobile-mint-dark) !important;
        font-weight: 700 !important;
        box-shadow: inset 0 -3px 0 var(--ln-store-mobile-mint) !important;
    }

    .ln-store-mobile-tabs__source-menu {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ln-store-mobile-tabs__source-menu .ln-client-menu-title,
    .ln-store-mobile-tabs__source-menu .linknote-creator-menu-title {
        display: none !important;
    }

    .ln-store-mobile-tabs__creator-cta ul {
        grid-template-columns: 1fr !important;
    }

    .ln-store-mobile-tabs__creator-cta a {
        min-height: 52px !important;
        background: var(--ln-store-mobile-mint-pale) !important;
        color: var(--ln-store-mobile-mint-dark) !important;
        font-weight: 700 !important;
    }

    .ln-store-mobile-tabs__source-menu .ln-client-menu-badge {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--ln-store-mobile-mint);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    .ln-store-mobile-tabs__panel:focus {
        outline: none;
    }
}

@media (max-width: 360px) {
    .ln-store-mobile-tabs__tab,
    .ln-store-mobile-tabs__links a,
    .ln-store-mobile-tabs__source-menu a {
        font-size: 11px !important;
    }
}