h1 {
    width: fit-content;
    margin-inline: auto;
    color: rgba(17, 25, 40, 0.95);

}

h2 {
    width: fit-content;
    margin-block: 3px;
    padding-inline: 5px;
    color: rgba(17, 25, 40, 0.95);
}

section:is(.delivery, .group, .drinks, .payment) {
    margin-inline: 10vw;
    margin-block: 15px;
    display: grid;
    grid-template-columns: repeat(3, 33%);
    gap: 8px;
}

section:is(.delivery, .group, .drinks, .payment) input {
    display: none;
}

section:is(.delivery, .group, .drinks, .payment) h2 {
    grid-column: span 3;
}


section:is(.delivery, .group, .drinks, .payment) .card label {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    position: relative;
}

section:is(.delivery, .group, .drinks, .payment) .card.small {
    height: fit-content;
   
}

section:is(.delivery, .group, .drinks, .payment) .card.small label {
    flex-direction: row;
    justify-content: space-around;
}





section:is(.delivery, .group, .drinks, .payment) .card:has(input.check-card:checked) {
    --border-thickness: 4px;
    outline: var(--border-thickness) var(--robin-egg-blue) solid;
    outline-offset: calc(-1*var(--border-thickness));

}

.card img {
    height: 100px;
    aspect-ratio: 1;
}

.card.small img {
    height: 50px;
}

section:is(.drinks) .drink {
    display: none;
}

section:is(.drinks):has(#drinks-yes:checked) .drink {
    display: flex;
}

section:is(.drinks):has(#drinks-yes:checked) .drink label{
    width: 100%;
    height: inherit;
}

.drink .top-elements {
    display: none;
    height: 30px;
    margin: 10px;
    position: absolute;
    top: 2px;
    right: 0px;
    gap: 5px;
}

.drink:has(input.check-card:checked) .top-elements {
    display: flex;
}

.drink:has(input.check-card:checked) .top-elements > div{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 25px;
    width: max-content;
    border: var(--text-color) 3px solid;
    border-radius: 5px;
    padding: 2px;
}



.drink .counter span{
    height: 25px;
    aspect-ratio: 1;
border-radius: inherit;
}

.drink .counter span:not(.number){
    background-color: var(--text-color);
    color: var(--text-color-on-highlight);
}

.drink .variation-slider {
    gap: 5px;
}

.variation-slider .item {
    margin: 2px;
    padding: 2px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}




.variation-slider input {
    display: none;
}

.variation-slider .item:has(input:checked) {
    background-color: var(--text-color);
    color: var(--text-color-on-highlight);
}

.variation-slider .item:hover:has(:not(input:checked)) {
    outline: 2px var(--robin-egg-blue) solid;
    outline-offset: -2px;
}

.variation-slider .item:hover:has(input:checked) {
    outline-color: var(--text-color);
}

@media screen and (max-width: 768px) {
    section:is(.delivery, .group, .drinks, .payment) {
        grid-template-columns: 100%;
    }
}