/*------------------------------------------ MENU ----------------------------------------------------------------------------*/

menu{ 
    display: flex; flex: none; flex-direction: column; align-items: stretch; width: 13vw; margin: 1rem 0; padding: 0;
    position: fixed; top: 7rem; z-index: 5; transition: top 0.25s;
    height: calc( 100vh - 7rem - 5rem ); overflow-y: scroll;
    background: var(--menu-back);  border-radius: 1em 0 0 1em;  
}
menu ul{ margin: 0.25em 0; padding: 0; }
menu li{ list-style-type: none; margin: 0.75em 0;}
menu li a{ text-decoration: none; display: flex; flex: none; align-items: center; padding: 0 1em; color: var(--main-color); }
menu li a svg, menu li a .providers_icon{ margin-right: 0.5em; }

menu .burger{ font-size: 1.2em; color: #fff; margin-right: 0.5em; }
menu .has-search{ display: flex; flex: none; margin: 0.75em; color: var(--search-color); background: var(--zone-back); border-radius: 0.66em; overflow: hidden; }
menu .has-search span{ display: flex; flex: none; align-items: center; }
menu .has-search .searchct{ flex: 1; background: var(--search-background); }
menu .has-search .searchct:before{ content: "\f002"; font-family: 'Font Awesome 6 Free'; margin-left: 0.5em; }
menu .has-search input{   
    width: 100%; font-size: 0.95em; font-weight: 500; padding: 0.5em 0.75em; font-family: "MS Shell Dlg"; color: var(--search-color); background: none; border: none;
}

menu .button-container{ display: flex; flex: none; align-items: center; justify-content: space-between; }
menu .rounded-button{ 
    display: flex; flex: none; align-items: center; width: 48%; font-weight: bold; padding: 0.5em; margin: 0!important;
    text-decoration: none; color: var(--main-color); border-radius: 0.66em; 
}
menu .hot-button{  background-image: linear-gradient(250deg, var(--hot-from), var(--hot-middle) 84%, var(--hot-to));  }
menu .popular-button{  background-image: linear-gradient(250deg, var(--popular-from), var(--popular-middle) 84%, var(--popular-to));}
menu .text-warning {
    --bs-text-opacity: 1;
    color: rgba( var(--bs-warning-rgb), 1 ) !important;
}

menu h4{ font-size: 0.95em; margin: 1rem 2rem 0; opacity: 0.5; color: #7388b6; }
menu h4 i{ font-style: normal; }

menu .categories li{ padding-left: 1.75em; }

menu .providers_icon{ width: 1.5em; }
menu .providers_icon img{ width: 100%; }

menu.floated{ top: 3.5rem; height: calc( 100vh - 3.5rem - 5rem ); }
menu.noFloated{ position: relative; height: calc( 100vh )!important; }

/*--------------------------------------------------------------------------------------------------------------------------------------------*/