:root {
    --md-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --sm-shadow:0 1px 2px 0 rgb(0 0 0 / 0.2);
    --md-rounded:0.375rem;
    --md-rounded-bottom: 0 0 0.375rem 0.375rem;
    --md-rounded-top: 0.375rem 0.375rem 0 0 ;
    --full-rounded:99999px;
    
    --bg-color:#F3F0D7;
    --cards-main-color:white;
    --menu-card-bg-color:white;
    /* --menu-font-color:#22212c; */
    /* --category-bg-color:#4059AD;
    --category-bg-color1:#7287CB; */
    --category-font-color:white;
    --extra-card-color:#CEE5D0;
    --extra-price-bg-color:white;
    --extra-font-color:#3f4254;
    --item-price-bg-color:#FFBF86;
    --item-price-font-color:white;
    --skeleton-purse-color:#cbd2e5;
    
}

* {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    color:#22212c;
}

ul {
    list-style-type: none;
  }

h1{
    font-size:2.5rem;
}

a {
    text-decoration: none;
    color: inherit;
}

img{
    display: block;
}


button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;   
	font: inherit;
	cursor: pointer;
}

.container{
    background-color:var(--bg-color);
}

.wrapper{
    margin: 0 auto;
}




/* ---------------- Header ------------------------ */
.header{
    background: rgba(0, 0, 0, 0.05) url("images/test2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
    padding:1.5em 0;
    box-shadow: var(--md-shadow);
    z-index:50;
    text-align:center;
    
}

.header-wrapper{
    position:relative;
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding: 0 1em;
}

.logo{
    background-color:var(--cards-main-color);
    border-radius: var(--md-rounded);
    width:fit-content;
    box-shadow: var(--md-shadow);
    padding:0.15em;
}

.logo-img{
    height:120px;
    width:120px;
    background-repeat: no-repeat;
    object-fit: cover;
    background-position: center;
    user-select: none;
    border-radius:var(--md-rounded);
}

.custom-select{
    position: relative;
    align-self:start;
    width:fit-content;
    
}

.custom-select select {
    border:none;
    padding: 0.75em 1em;
    font-weight:700;
    font-size:0.9rem;
    cursor:pointer;
    box-shadow: var(--sm-shadow);
    border-radius: var(--md-rounded);
    width:100%;
    background-color:white;
}


.title{
    font-size: 2.5rem;
    font-weight:600;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,1) 50%, rgba(0,212,255,0.4) 100%);
    height:fit-content;
}

.content{
    bottom:0;
}


/* --------------- menu ----------------- */
.menu{
    padding: 1em 0;
}

.list{
    margin: 2em 0;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap; 
 }

.menu-li{
    margin:0.5em 1em;
}

.menu-card{
    position:relative;
    background-color:var(--menu-card-bg-color);
    display: flex;
    justify-content:flex-end;
    align-items: center;
    padding:0;
    margin:0.5em;
    border-radius: var(--md-rounded);
    box-shadow: var(--sm-shadow);
    cursor:pointer;
    max-width:100%;
    flex-basis:100%;
    min-height: calc(90px + 0.3em * 2);
}

.menu-link{
    position:absolute;
    display:flex;
    align-items:center;
    color:var(--menu-font-color);
    top:0;
    left:0;
    bottom:0;
    right:0;
    flex-grow:1;
    border-radius: var(--md-rounded);
    font-size:1.075rem;
    font-weight:700;
    line-height: 1.5rem;
    word-wrap: break-word;
    overflow:hidden;
    padding: 1em 100px 1em 1em;
}

.menu-img{
    height:90px;
    width:90px;
    margin:0.4em;
}

.menu-img img{
    height:100%;
    width:100%;
    background-repeat: no-repeat;
    object-fit: cover;
    background-position: center;
    border-radius:var(--md-rounded);
}

/* ------------ main -------------- */
.main{
    display:flex;
    flex-basis:0;
    flex-grow:5;
    padding:2em 0;
    flex-direction:column;
    justify-content:start;
    row-gap:1em;
}

.back{
    margin: 0 2em;
    
}

.back-btn{
    width:100%;
    display: flex;
    align-items: center;
    font-size:1.2rem;
    font-weight:600;
    transform: translateY(0.5em);
}

.material-icons-outlined{
    font-size:1.2rem;
}

.item-container{
    border-radius: var(--md-rounded);
    box-shadow: var(--sm-shadow);
    margin: 0 0.725em;
    background-color: white;
}

.card{
    padding:0.75em 0.5em 0.75em 1.2em;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    row-gap: 0.5em;
    background-color:var(--cards-main-color);
    border-radius: var(--md-rounded-top);
    min-height: 90px;
}

.item-card{
    cursor: pointer;
    padding:0.75em 0.5em 0.75em 1.2em;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    row-gap: 0.5em;
    background-color:var(--cards-main-color);
    border-radius: var(--md-rounded);
    
}



.category-card{
    
    background-image: linear-gradient(160deg,#FED2AA,#FED2AA 60%,#FED2AA);
    padding:1.5em 1.2em;
    border:none;
    margin:2.2em 0.725em 0 0.725em;
    border-radius: var(--md-rounded);
    box-shadow: var(--md-shadow);
    min-height: auto;
}



.category-text{
    font-size:1.4rem;
    color:var( --category-font-color);
}

.category-text:first-letter{
    text-transform: uppercase;
}

.item-info{
    display:flex;
    flex-direction:column;
    row-gap:0.75em;
    flex-grow: 1;
    max-width: 60%;
}

.item-name{
    font-size:1.2rem;
    width:fit-content;
    font-weight:600;
}

.item-name:first-letter{
    text-transform:uppercase;
}

.extra{
    z-index: 20;
    min-height:50px;
    padding:0.5em 1.2em;
    background-color:var(--extra-card-color);
    border-radius: var(--md-rounded-bottom);
}

.extra-title{
    font-size:0.9rem;
    font-weight:600;
}

.extra-container{
    display:flex;
    flex-direction:column;
    row-gap:0.75em;
    flex-grow: 1;
}



.extra-span{
    white-space: nowrap;
    border-radius: var(--full-rounded);
    background-color:var(--extra-price-bg-color);
    padding: 0.2em 0.6em;
    font-size:0.9rem;
}

.extra-span:first-letter{
    text-transform:uppercase;
}

.extra-name{
    font-size:0.95rem;
    width:fit-content;
    font-weight:500;
    color:var(--extra-font-color);
    display:flex;
    flex-wrap:wrap;
    gap:0.5em;
}

.desc{
    width: 100%;
    cursor:pointer;
}

.summary{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    list-style: none;
    max-width: 100%;
}
.summary-big{
    list-style: none;
    max-width: 100%;
}
details > .summary::-webkit-details-marker {
    display: none;
}
details > .summary-big::-webkit-details-marker {
    display: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

.desc>*{
    font-size:0.85rem;
}

.item-price{
    padding: 0.3em 1em;
    background-color:var(--item-price-bg-color);
    border-radius: var(--md-rounded);
    color:var(--item-price-font-color);
    font-size:0.9rem;
    width: fit-content;
    text-align:center;
}

.item-group-prices{
    display:flex;
    flex-direction:row;
    gap:1em;
    flex-wrap:wrap;
}

.item-img{
    height:90px;
    width:90px;
}

.item-img img{
    height:100%;
    width:100%;
    background-repeat: no-repeat;
    object-fit: cover;
    background-position: center;
    border-radius:var(--md-rounded);
}

/* --------------- skeleton --------------------- */
.skeleton{
    background-color:var(--cards-main-color);
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    padding:0;
    margin:0.5em;
    border-radius: var(--md-rounded);
    box-shadow: var(--sm-shadow);
    max-width:100%;
    flex-basis:100%;
    height:100px;
    opacity:0.7;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: .5;
    }
  }

.skeleton div{
    background-color:var(--skeleton-purse-color);
    border-radius:var(--md-rounded)
}
.skeleton div:first-child{
    margin-left:1.2em;
    height:1.2em;
    width:10em;
    align-self:center;
}

.skeleton div:last-child{
    height: 90px;
    width: 90px;
    margin:0.5em;
}

.hidden{
    display:none;
}
/* ------------ breakpoint ------------------ */

@media screen and (min-width: 1024px) {

    h1{
        font-size:3rem;
    }

    .wrapper{
        max-width:1268px;
        margin: 0 auto;
    }

    .header{
        padding:2em 0;
    }

    .logo{
        padding:0.2em;
    }

    .content{
        flex-direction:row;
        gap:3em;
    }
    .menu-li{
        margin:0.75em 0;
    }

    .item-card{
        cursor: pointer;
        padding:0.75em 1.2em;
    }

    .extra{
        padding:0.5em 1.2em;
    }
 
    .extra-title{
        font-size:1rem;
    }
    .extra-name{
        font-size:1rem;
    }

    .menu-card{
        max-width: 50%;
        flex-basis: calc(50% - 1em );
    }
    .menu-link{
        padding-left:2em;
        font-size:1.2em;
    }
    .category-text{
        font-size:1.8rem;
    }

    .skeleton{
        max-width: 50%;
        flex-basis: calc(50% - 1em );
    }

    .skeleton div:first-child{
        margin-left:3em;
        height:1.5em;
    }

    .desc>*{
        font-size:1rem;
    }

    .category-card{
        padding: 2em 1.2em;
        }

    .item-info{
        max-width: 88%;
    }

    .logo-img{
        height:140px;
        width:140px;
    }

}