/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.ht-header{

    position: sticky;

    inset: 0 0 auto 0;

    background: rgba(255,255,255,.92);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-bottom:1px solid transparent;

    transition:var(--transition);

    z-index:1100;

}

/*
|--------------------------------------------------------------------------
| HEADER CONTAINER
|--------------------------------------------------------------------------
*/

.ht-header .container{

    max-width:1380px;

}


.ht-header__inner{

    display:flex;

    align-items:center;

    gap:20px;

    min-height:84px;

    transition:var(--transition);

}

/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.ht-header__logo{

    display: flex;

    align-items: center;

    min-width:0;

    overflow:hidden;

    flex:0 0 auto;

}

.ht-header__logo-link{

    display: inline-flex;

    align-items: center;

}

.ht-header__logo-image{

    display:block;

    max-width:100%;

    height:54px;

    width:auto;

    transition: var(--transition);

}

/*
|--------------------------------------------------------------------------
| EXPLORE
|--------------------------------------------------------------------------
*/

.ht-header__explore{

    display: flex;

    align-items: center;

    flex:0 0 auto;

}

.ht-header__explore-btn{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    height: 46px;

    padding-inline:20px;

    background: #EFF6FF;

    color: var(--primary);

    border: 1px solid #D8E8FF;

    border-radius: var(--radius);

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}

.ht-header__explore-btn:hover{

    transform:translateY(-1px);

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

    border-color: var(--primary);


}

.ht-header__explore-arrow{

    font-size: 12px;

    transition: transform .25s ease;

}

/*
|--------------------------------------------------------------------------
| SEARCH
|--------------------------------------------------------------------------
*/

.ht-header__search{

    min-width:260px;

    flex:1;

    min-width:200px;


}

.ht-header__search-wrapper{

    position: relative;

}

.ht-header__search-btn{

    position: absolute;

    top: 50%;

    left: 18px;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    border: none;

    background: transparent;

    color: var(--primary);

    font-size: 17px;

    cursor: pointer;

    z-index: 2;

}

.ht-header__search-input{

    width: 100%;

    height: 48px;

    background:#FCFDFE;

    border: 1px solid var(--border);

    border-radius: 999px;

    padding-left: 56px;

    padding-right: 20px;

    font-size: 15px;

    color: var(--text);

    box-shadow: none;

    transition: var(--transition);

}

.ht-header__search-input::placeholder{

    color: var(--text-light);
    font-weight:400;

}

.ht-header__search-input:focus{

    background: var(--white);

    border-color: var(--secondary);

    box-shadow: 0 0 0 4px rgba(59,130,246,.12);

    outline: none;

}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.ht-header__actions{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:14px;

}

.ht-header__link{

    color: var(--text);

    font-size: 15px;

    font-weight: 500;
    position:relative;

    transition: var(--transition);

}

.ht-header__link:hover{

    color: var(--primary);

}

@media (max-width:1199.98px){

    .ht-header__link{

        display:none;

    }

}

@media (max-width:991.98px){

    .ht-header__explore{

        display:none;

    }

    .ht-header__search{

        flex:1;

    }

}

@media (max-width:767.98px){

    .ht-header__search{

        display:none;

    }

    .ht-header__cart{

        display:none;

    }

}

.ht-header__menu-btn{

    display:none;

    width:42px;
    height:42px;

    align-items:center;
    justify-content:center;

    border:none;
    background:transparent;

    color:var(--primary);

    font-size:28px;

    cursor:pointer;
}

@media (max-width:991.98px){

    .ht-header__menu-btn{

        display:flex;

    }

    .ht-header__explore{

        display:none;

    }

}

@media (max-width:767.98px){

    .ht-header__search{

        display:none;

    }

    .ht-header__link{

        display:none;

    }

    .ht-header__cart{

        display:none;

    }

}

/*=========================================================
    MOBILE MENU
=========================================================*/

.ht-mobile-menu{

    position:fixed;

    top:0;

    left:-320px;

    width:320px;

    height:100vh;

    background:var(--white);

    z-index:1200;

    transition:var(--transition);

    box-shadow:var(--shadow-lg);

}

.ht-mobile-menu.is-open{

    left:0;

}

.ht-mobile-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:1199;

}

.ht-mobile-overlay.is-open{

    opacity:1;

    visibility:visible;

}

/*
|--------------------------------------------------------------------------
| CART
|--------------------------------------------------------------------------
*/

.ht-header__cart{

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    color: var(--primary);

    border-radius: 50%;

    transition: var(--transition);

}

.ht-header__cart:hover{

    background: #EFF6FF;
    transform:translateY(-1px);

}

.ht-header__cart i{

    font-size: 21px;

}

.ht-header__badge{

    position: absolute;

    top: 3px;

    right: 2px;

    min-width: 19px;

    height: 19px;

    padding: 0 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background: var(--danger);

    color: var(--white);

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

}

/*
|--------------------------------------------------------------------------
| LOGIN
|--------------------------------------------------------------------------
*/

.ht-header__login{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 44px;

    padding-inline:22px;
    background: transparent;

    color: var(--primary);

    border: 1px solid var(--primary);

    border-radius: 999px;

    font-size: 15px;

    font-weight: 600;

    transition: var(--transition);

}

.ht-header__login:hover{

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

    transform:translateY(-1px);

}

/*
|--------------------------------------------------------------------------
| PROFILE
|--------------------------------------------------------------------------
*/

.ht-header__profile{

    display: flex;

    align-items: center;

    gap: 10px;

}

/*
|--------------------------------------------------------------------------
| HEADER SCROLLED
|--------------------------------------------------------------------------
*/

.ht-header--scrolled{

    border-bottom-color: var(--border);

    box-shadow:0 8px 30px rgba(15,23,42,.05);
}

.ht-header--scrolled .ht-header__inner{

    height: 72px;

}

.ht-header--scrolled .ht-header__logo-image{

    height: 48px;

}

.ht-header--scrolled .ht-header__search-input{

    height: 44px;

}

.ht-header--scrolled .ht-header__explore-btn{

    height: 42px;

}

.ht-header--scrolled .ht-header__login{

    height: 40px;

}

/*=========================================================
    MEGA MENU
=========================================================*/

.ht-mega-menu{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(10px);

    transition:var(--transition);

    z-index:1090;

}

.ht-mega-menu.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}

.ht-mega-menu .container{

    max-width:1380px;

}

.ht-mega-menu__wrapper{

    display:grid;

    grid-template-columns:250px 1fr;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:0 0 var(--radius-lg) var(--radius-lg);

    overflow:hidden;

    box-shadow:0 20px 60px rgba(15,23,42,.08);

    min-height:380px;

max-height:430px;

}

/*=========================================================
    LEFT PANEL
=========================================================*/

.ht-mega-menu__sidebar{

    background:#FAFBFD;

    border-right:1px solid var(--border);

    overflow-y:auto;

    max-height:430px;
}

.ht-scrollbar::-webkit-scrollbar{

    width:6px;

}

.ht-scrollbar::-webkit-scrollbar-track{

    background:transparent;

}

.ht-scrollbar::-webkit-scrollbar-thumb{

    background:#D7DCE5;

    border-radius:20px;

}

.ht-scrollbar::-webkit-scrollbar-thumb:hover{

    background:#BCC5D3;

}
.ht-mega-menu__categories{

    list-style:none;

    margin:0;

    padding:14px 0;
}

.ht-mega-menu__categories li{

    margin:0;

}

.ht-mega-menu__category{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 24px;

    border:none;

    background:transparent;

    color:var(--text);

    font-size:15px;

    font-weight:500;

    text-align:left;

    cursor:pointer;

    transition:var(--transition);

    border-left:3px solid transparent;

}

.ht-mega-menu__category:hover{

    background:#F4F8FF;

    color:var(--primary);

}

.ht-mega-menu__category.is-active{

    background:#EFF6FF;

    color:var(--primary);

    border-left-color:var(--primary);

    font-weight:600;

}

.ht-mega-menu__arrow{

    font-size:12px;

    color:var(--text-light);

    opacity:.5;

    transition:var(--transition);

}

.ht-mega-menu__category:hover .ht-mega-menu__arrow,

.ht-mega-menu__category.is-active .ht-mega-menu__arrow{

    color:var(--primary);

    opacity:1;

    transform:translateX(4px);

}

/*=========================================================
    RIGHT PANEL
=========================================================*/

.ht-mega-menu__content{

    position:relative;

    padding:26px 32px;

    background:var(--white);

    overflow-y:auto;

    max-height:430px;
}

.ht-mega-menu__panel{

    display:none;

}

.ht-mega-menu__panel.is-active{

    display:block;

}

/*=========================================================
    LEVEL GRID
=========================================================*/

.ht-mega-menu__grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:32px;

    align-items:flex-start;

}

.ht-mega-menu__section{

    min-width:0;

}

.ht-mega-menu__heading{

    margin:0 0 16px;

    padding-bottom:10px;

    border-bottom:1px solid var(--border);

    color:var(--primary);

    font-size:16px;

    font-weight:600;

}

.ht-mega-menu__list{

    list-style:none;

    margin:0;

    padding:0;

}

.ht-mega-menu__list li{

    margin-bottom:4px;

}

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

.ht-mega-menu__link{

    display:block;

    padding:9px 0;

    color:var(--text);

    font-size:14px;

    font-weight:500;

    transition:var(--transition);

}

.ht-mega-menu__link:hover{

    color:var(--primary);

    padding-left:6px;

}

/*=========================================================
    RESOURCE GRID
=========================================================*/

.ht-mega-menu__resources{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    column-gap:32px;
    
    row-gap:14px;

    gap:14px 28px;

}

.ht-mega-menu__resource{

    display:flex;

    align-items:center;

    padding:12px 16px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    background:var(--white);

    color:var(--text);

    font-size:14px;

    font-weight:500;

    transition:var(--transition);

}

.ht-mega-menu__resource:hover{

    border-color:var(--primary);

    color:var(--primary);

    background:#F8FBFF;

}