/*==========================================================
CODEEXAI NAVBAR
Version : 3.0
Author  : ChatGPT
==========================================================*/


/*==========================================================
ROOT VARIABLES
==========================================================*/

:root{

    --tb-primary:#2f8d46;
    --tb-primary-dark:#25753a;

    --tb-dark:#1f1f1f;
    --tb-dark-light:#2c2c2c;

    --tb-white:#ffffff;

    --tb-border:#e5e7eb;

    --tb-text:#374151;
    --tb-text-light:#6b7280;

    --tb-hover:#f5f5f5;

    --tb-radius:10px;

    --tb-shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

    --tb-shadow-md:
        0 8px 25px rgba(0,0,0,.12);

    --tb-shadow-lg:
        0 18px 40px rgba(0,0,0,.14);

}


/*==========================================================
RESET
NOTE: base reset (margin/padding/box-sizing) already defined
in style.css, which loads before this file — removed duplicate here.
Kept the navbar-specific element resets below since they're not
covered by the global reset.
==========================================================*/

a{

    text-decoration:none;

    transition:.25s;

}

ul{

    list-style:none;

    margin:0;
    padding:0;

}

button{

    border:none;

    background:none;

    cursor:pointer;

}

img{

    max-width:100%;

    display:block;

}


/*==========================================================
HEADER
==========================================================*/

.tb-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    background:#fff;

    z-index:9999;

    box-shadow:var(--tb-shadow-sm);

    transition:.3s;

}

.tb-header.scrolled{

    box-shadow:var(--tb-shadow-md);

}


/*==========================================================
COMMON CONTAINER
==========================================================*/

.tb-container{

    width:100%;

    max-width:1500px;

    margin:auto;

    padding:0 24px;

}


/*==========================================================
TOP NAVBAR
==========================================================*/

.tb-navbar{

    height:68px;

    background:#fff;

    border-bottom:1px solid #ececec;

}

.tb-navbar .tb-container{

    height:100%;

    display:grid;

    grid-template-columns:

        auto

        1fr

        auto;

    align-items:center;

    column-gap:40px;

}


/*==========================================================
LOGO
==========================================================*/

.tb-logo{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.tb-logo-icon{

    width:42px;

    height:42px;

    border-radius:10px;

    background:var(--tb-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    box-shadow:0 4px 12px rgba(47,141,70,.25);

}

.tb-logo-text{

    font-size:18px;

    font-weight:700;

    color:#111827;

    letter-spacing:.2px;

}

.tb-logo-img{

    height:44px;

    width:auto;

    display:block;

}

.tb-logo-icon-img{

    height:50px;

    width:auto;

    display:block;

}

.tb-logo-wordmark-img{

    height:30px;

    width:auto;

    display:block;

}



/*==========================================================
PROMPT GENERATOR BUTTON (desktop, right corner)
Takes the grid slot the search bar used to occupy.
==========================================================*/

.tb-prompt-btn{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    justify-self:end;

    background:linear-gradient(135deg,#34a853 0%,var(--tb-primary) 55%,var(--tb-primary-dark) 100%);

    color:#fff !important;

    border-radius:999px;

    padding:10px 20px;

    font-size:13.5px;

    font-weight:700;

    white-space:nowrap;

    box-shadow:
        0 6px 18px -4px rgba(47,141,70,.55),
        inset 0 1px 0 rgba(255,255,255,.25),
        0 0 0 0 rgba(47,141,70,.35);

    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;

    animation:tbPromptPulse 2.8s ease-in-out infinite;

}

.tb-prompt-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 60%);

    transform:translateX(-120%);

    transition:transform .6s ease;

}

.tb-prompt-btn i,
.tb-prompt-btn span{

    position:relative;

    z-index:1;

}

.tb-prompt-btn i{

    font-size:.88rem;

}

.tb-prompt-btn:hover{

    background:linear-gradient(135deg,#3fbd60 0%,var(--tb-primary-dark) 60%,#1d5e2f 100%);

    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px -4px rgba(47,141,70,.65),
        inset 0 1px 0 rgba(255,255,255,.3),
        0 0 0 0 rgba(47,141,70,0);

    animation-play-state:paused;

}

.tb-prompt-btn:hover::before{

    transform:translateX(120%);

}

.tb-prompt-btn:active{

    transform:translateY(0) scale(.97);

}

.tb-prompt-btn.is-active{

    background:linear-gradient(135deg,#1d5e2f 0%,var(--tb-primary-dark) 100%);

    animation:none;

    box-shadow:
        0 4px 12px -2px rgba(47,141,70,.5) inset,
        0 0 0 2px rgba(47,141,70,.25);

}

@keyframes tbPromptPulse{

    0%,100%{

        box-shadow:
            0 6px 18px -4px rgba(47,141,70,.55),
            inset 0 1px 0 rgba(255,255,255,.25),
            0 0 0 0 rgba(47,141,70,.35);

    }

    50%{

        box-shadow:
            0 6px 18px -4px rgba(47,141,70,.55),
            inset 0 1px 0 rgba(255,255,255,.25),
            0 0 0 9px rgba(47,141,70,0);

    }

}

.tb-search form{

    width:100%;

}

.tb-search-wrapper{

    position:relative;

}

.tb-search-icon{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#9ca3af;

    font-size:18px;

    pointer-events:none;

}

.tb-search input{

    width:100%;

    height:48px;

    border:1px solid #d7dce1;

    border-radius:999px;

    background:#fff;

    padding-left:52px;

    padding-right:18px;

    font-size:15px;

    color:#374151;

    transition:.25s;

}

.tb-search input::placeholder{

    color:#9ca3af;

}

.tb-search input:hover{

    border-color:#bfc5ca;

}

.tb-search input:focus{

    outline:none;

    border-color:#dadce0;

    box-shadow:
        0 3px 10px rgba(0,0,0,.10);

}



/*==========================================================
SEARCH SUGGESTIONS
==========================================================*/

#searchSuggestions{

    position:absolute;
    top:100%;
    left:0;
    right:0;

    margin-top:8px;

    background:#fff;

    border:1px solid #e6e9ef;

    border-radius:16px;

    overflow-y:auto;

    overflow-x:hidden;

    max-height:420px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    display:none;

    z-index:9999;

}

#searchSuggestions a{

    display:block;

    padding:13px 18px;

    color:#374151;

    border-bottom:1px solid #f3f4f6;

    transition:.2s;

}

#searchSuggestions a:last-child{

    border-bottom:none;

}

#searchSuggestions a:hover{

    background:#f8fafc;

}

#searchSuggestions small{

    color:#9ca3af;

}

#searchSuggestions .list-group-item{

    border:none;

}




/* Scrollbar */

#searchSuggestions::-webkit-scrollbar{

    width:8px;

}

#searchSuggestions::-webkit-scrollbar-thumb{

    background:#d7dce5;

    border-radius:20px;

}

/* Item */

.search-item{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    padding:12px 18px;

    text-decoration:none;

    color:#1e293b;

    border-bottom:1px solid #edf1f5;

    transition:.2s;

}

.search-left{

    flex:1 1 auto;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}

.search-item-path{

    font-size:12.5px;

    color:#94a3b8;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.search-item:last-child{

    border-bottom:none;

}

.search-item:hover{

    background:#f8fafc;

}

/* Title */

.search-title{

    font-size:15px;

    font-weight:600;

    line-height:1.4;

    color:#1f2937;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/* Empty */

.search-empty{

    padding:24px 18px;

    color:#94a3b8;

    text-align:center;

    font-size:14px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

}

.search-empty i{

    font-size:20px;

    color:#cbd5e1;

}

/*==========================================================
DESKTOP MENU
==========================================================*/

.tb-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1;

    gap:2px;

}

.tb-menu-item{

    position:relative;

}

/* Highlighted "Prompt Generator" CTA in the navbar */

.tb-menu-cta > a{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    align-self:center;

    height:auto !important;

    min-height:0 !important;

    line-height:1.2;

    gap:6px;

    background:linear-gradient(135deg,#34a853 0%,var(--tb-primary) 55%,var(--tb-primary-dark) 100%);

    color:#fff !important;

    border-radius:999px;

    padding:9px 20px !important;

    font-weight:700;

    margin-left:8px;

    box-shadow:0 6px 16px -4px rgba(47,141,70,.5),inset 0 1px 0 rgba(255,255,255,.25);

    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;

}

.tb-menu-cta > a::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 60%);

    transform:translateX(-120%);

    transition:transform .6s ease;

}

.tb-menu-cta > a::after{

    display:none !important;

}

.tb-menu-cta > a:hover{

    background:linear-gradient(135deg,#3fbd60 0%,var(--tb-primary-dark) 60%,#1d5e2f 100%);

    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:0 10px 22px -4px rgba(47,141,70,.6),inset 0 1px 0 rgba(255,255,255,.3);

}

.tb-menu-cta > a:hover::before{

    transform:translateX(120%);

}

.tb-menu-cta > a:active{

    transform:translateY(0) scale(.97);

}

.tb-menu-cta i{

    font-size:.9rem;

    position:relative;
    z-index:1;

}

.tb-menu-cta > a span,
.tb-menu-cta > a{

    z-index:1;

}

/* Show it as "active" when already on the Prompt Generator page */

.tb-menu-cta.is-active > a{

    background:linear-gradient(135deg,#1d5e2f 0%,var(--tb-primary-dark) 100%);
    box-shadow:0 4px 12px -2px rgba(47,141,70,.5) inset,0 0 0 2px rgba(47,141,70,.25);

}

.tb-menu-item > a{

    position:relative;

    display:flex;

    align-items:center;

    gap:6px;

    height:68px;

    padding:0 16px;

    color:#222;

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

    transition:all .25s ease;

}

.tb-menu-item > a i{

    font-size:11px;

    color:#7b7b7b;

    transition:.25s;

}


/*==========================================================
MENU HOVER
==========================================================*/

.tb-menu-item:hover > a{

    color:var(--tb-primary);

}

.tb-menu-item:hover > a i{

    color:var(--tb-primary);

}

.tb-menu-item > a::after{

    content:"";

    position:absolute;

    left:16px;

    right:16px;

    bottom:0;

    height:3px;

    background:var(--tb-primary);

    border-radius:20px;

    transform:scaleX(0);

    transform-origin:center;

    transition:.25s;

}

.tb-menu-item:hover > a::after{

    transform:scaleX(1);

}


/*==========================================================
DESKTOP DROPDOWN
==========================================================*/

.tb-dropdown{

    position:absolute;

    top:100%;

    left:0;

    min-width:280px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

    padding:8px 0;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:

        opacity .25s,

        transform .25s,

        visibility .25s;

    z-index:9999;

}

.tb-menu-item:hover > .tb-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.tb-dropdown a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:46px;

    padding:0 18px;

    color:#374151;

    font-size:14px;

    font-weight:500;

    transition:.2s;

}

.tb-dropdown a:hover{

    background:#f8fafc;

    color:var(--tb-primary);

    padding-left:24px;

}

.tb-dropdown span{

    display:block;

    padding:14px 18px;

    color:#9ca3af;

    font-size:14px;

}


/*==========================================================
ACTIVE MENU
==========================================================*/

.tb-menu-item.active > a{

    color:var(--tb-primary);

}

.tb-menu-item.active > a::after{

    transform:scaleX(1);

}

/*==========================================================
SECOND NAVIGATION BAR
==========================================================*/

.tb-category-bar{

    background:#1f1f1f;

    border-bottom:3px solid var(--tb-primary);

    height:46px;

}

.tb-category-bar .tb-container{

    height:100%;

}

.tb-category-scroll{

    display:flex;

    align-items:center;

    gap:2px;

    height:100%;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.tb-category-scroll::-webkit-scrollbar{

    display:none;

}


/*==========================================================
CATEGORY LINKS
==========================================================*/

.tb-category-scroll a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:100%;

    padding:0 18px;

    color:#ffffff;

    font-size:14px;

    font-weight:500;

    transition:.25s;

    flex-shrink:0;

}

.tb-category-scroll a i{

    margin-right:6px;

    font-size:13px;

}

.tb-category-scroll a:hover{

    background:#2c2c2c;

}

.tb-category-scroll a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    background:var(--tb-primary);

    transform:translateX(-50%);

    transition:.25s;

}

.tb-category-scroll a:hover::after{

    width:100%;

}


/*==========================================================
ACTIVE CATEGORY
==========================================================*/

.tb-category-scroll a.active{

    color:#fff;

    background:#2b2b2b;

}

.tb-category-scroll a.active::after{

    width:100%;

}


/*==========================================================
SMOOTH SCROLL
==========================================================*/

.tb-category-scroll{

    scroll-behavior:smooth;

}

/*==========================================================
MOBILE NAVIGATION
==========================================================*/

.tb-mobile-toggle{

    display:none;

    width:44px;

    height:44px;

    border:none;

    background:transparent;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#222;

    cursor:pointer;

    transition:.25s;

    z-index:10002;

}

.tb-mobile-toggle:hover{

    color:var(--tb-primary);

}

.tb-mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:opacity .32s ease,visibility .32s ease;

    z-index:9998;

}

.tb-mobile-overlay.show{

    opacity:1;

    visibility:visible;

}


/*==========================================================
TABLET & MOBILE
==========================================================*/

@media (max-width:991px){

    .tb-navbar{

        height:66px;

    }

    .tb-navbar .tb-container{

        display:flex;

        align-items:center;

        justify-content:space-between;

        height:100%;

        gap:16px;

    }

    .tb-logo{

        flex-shrink:0;

    }

    .tb-logo-text{

        font-size:18px;

    }

    .tb-search{

        display:none;

    }

    .tb-prompt-btn{

        display:none;

    }

    .tb-mobile-toggle{

        display:flex;

        margin-left:auto;

    }

    .tb-menu{

        position:fixed;

        top:0;

        right:-330px;

        width:320px;

        max-width:88vw;

        height:100vh;

        background:#fff;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        justify-content:flex-start;

        overflow-y:auto;

        gap:0;

        padding-top:70px;

        transition:right .38s cubic-bezier(.22,.61,.36,1);

        box-shadow:-12px 0 40px rgba(0,0,0,.18);

        z-index:9999;

    }

    .tb-menu.show{

        right:0;

    }

    .tb-menu-item{

        width:100%;

        border-bottom:1px solid #ececec;

    }

    .tb-menu-item>a{

        display:flex;

        align-items:center;

        justify-content:space-between;

        min-height:56px;

        padding:0 22px;

        font-size:15px;

        font-weight:600;

        color:#222;

        background:#fff;

    }

    .tb-menu-item>a::after{

        display:none;

    }

    .tb-menu-item>a:hover{

        background:#fafafa;

        color:var(--tb-primary);

    }

    .tb-menu-cta{

        border-bottom:none;

        padding:14px 22px 4px;

    }

    .tb-menu-cta>a{

        min-height:44px;

        border-radius:999px;

        background:var(--tb-primary);

        color:#fff !important;

        justify-content:center;

    }

    .tb-menu-cta>a:hover{

        background:var(--tb-primary-dark);

        color:#fff !important;

    }

    .tb-menu-item>a i{

        transition:.25s;

        font-size:12px;

    }

    .tb-menu-item.open>a{

        color:var(--tb-primary);

        background:#f8fafc;

    }

    .tb-menu-item.open>a i{

        transform:rotate(180deg);

    }


    /*=========================
      MOBILE DROPDOWN
    =========================*/

    .tb-dropdown{

        position:relative;

        top:0;

        left:0;

        display:block;

        width:100%;

        min-width:100%;

        max-height:0;

        opacity:0;

        visibility:visible;

        transform:none;

        box-shadow:none;

        border:none;

        border-top:0 solid #ececec;

        border-radius:0;

        padding:0;

        background:#fafafa;

        overflow:hidden;

        animation:none;

        transition:
            max-height .32s cubic-bezier(.22,.61,.36,1),
            opacity .28s ease;

    }

    .tb-menu-item.open>.tb-dropdown{

        max-height:600px;

        opacity:1;

        border-top:1px solid #ececec;

    }

    .tb-dropdown a{

        display:flex;

        align-items:center;

        min-height:48px;

        padding:0 40px;

        color:#555;

        font-size:14px;

        font-weight:500;

        background:#fafafa;

        border-bottom:1px solid #ececec;

    }

    .tb-dropdown a:last-child{

        border-bottom:none;

    }

    .tb-dropdown a:hover{

        background:#f3f4f6;

        color:var(--tb-primary);

        padding-left:48px;

    }

}


/*==========================================================
SMALL MOBILE
==========================================================*/

@media (max-width:768px){

    .tb-logo-text{

        display:none;

    }

    .tb-navbar{

        height:62px;

    }

    .tb-menu{

        width:290px;

        padding-top:62px;

    }

    .tb-category-scroll a{

        font-size:13px;

        padding:0 15px;

    }

}

/*==========================================================
SEARCH SUGGESTIONS
==========================================================*/

#searchSuggestions{

    animation:tbFadeDown .22s ease;

}

#searchSuggestions .list-group-item{

    border:none;

    border-bottom:1px solid #f3f4f6;

    padding:13px 18px;

    font-size:14px;

    color:#374151;

    cursor:pointer;

}

#searchSuggestions .list-group-item:last-child{

    border-bottom:none;

}

#searchSuggestions .list-group-item:hover{

    background:#f7faf8;

}

#searchSuggestions small{

    color:#9ca3af !important;

}


/*==========================================================
ANIMATIONS
==========================================================*/

@keyframes tbFadeDown{

    from{

        opacity:0;

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes tbFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.tb-dropdown{

    animation:tbFadeDown .22s ease;

}

.tb-mobile-overlay.show{

    animation:tbFade .25s ease;

}


/*==========================================================
SMOOTH TRANSITIONS
==========================================================*/

.tb-menu-item>a,
.tb-dropdown a,
.tb-category-scroll a,
.tb-mobile-toggle,
.tb-search input{

    transition:

        color .25s,

        background .25s,

        border-color .25s,

        box-shadow .25s,

        transform .25s,

        padding .25s;

}


/*==========================================================
SCROLLBAR
==========================================================*/

.tb-menu::-webkit-scrollbar{

    width:6px;

}

.tb-menu::-webkit-scrollbar-thumb{

    background:#d8d8d8;

    border-radius:20px;

}

.tb-menu::-webkit-scrollbar-track{

    background:transparent;

}

.tb-category-scroll::-webkit-scrollbar{

    display:none;

}


/*==========================================================
ACCESSIBILITY
==========================================================*/

.tb-menu a:focus,
.tb-category-scroll a:focus{

    outline:none;

}

.tb-search input:focus{

    outline:none;

}

button:focus{

    outline:none;

}


/*==========================================================
UTILITY
==========================================================*/

.tb-hidden{

    display:none !important;

}

.tb-show{

    display:block !important;

}


/*==========================================================
PRINT
==========================================================*/

@media print{

    .tb-header{

        display:none;

    }

}

/*==========================================================
DEVTOOLS NAV ITEM (additive, does not alter existing rules)
==========================================================*/

.tb-menu-item > a > .bi-tools{

    margin-right:4px;

    color:var(--tb-primary);

}

.tb-menu-badge{

    display:inline-block;

    margin-left:6px;

    padding:1px 7px;

    font-size:10px;

    font-weight:700;

    letter-spacing:.3px;

    text-transform:uppercase;

    color:#fff;

    background:linear-gradient(135deg,#34a853,var(--tb-primary-dark,#25753a));

    border-radius:999px;

    vertical-align:middle;

    line-height:1.6;

}