@import "fonts.css";

* {
    font-weight : normal;
    margin      : 0;
    padding     : 0;
}

body {
    background  : #fff;
    font-family : "Roboto Regular", serif;
}

#user-panel {
    align-items     : center;
    background      : #09f;
    column-gap      : 1rem;
    color           : #fff;
    display         : flex;
    height          : 60px;
    justify-content : space-between;
    margin-top      : 0;
    padding         : 0 0.5rem;
}

.panel-buttons {
    align-items         : center;
    background          : rgba(255, 255, 255, 0.9);
    border-radius       : 0.5rem;
    column-gap          : 0.25rem;
    cursor              : pointer;
    color               : #09f;
    display             : flex;
    padding             : 0.25rem 0.75rem 0.25rem 0.25rem;
    text-transform      : uppercase;
    transition-duration : 0.3s;
    transition-property : all;
    user-select         : none;
}

.panel-buttons:hover {
    background : #fff;
}

.panel-buttons img {
    height : 35px;
}

#logo {
    background : #e1f7ff;
    color      : #09f;
    font-size  : 3.5rem;
    padding    : 15px 0;
    text-align : center;
}

#ls-list > div {
    background          : #eee;
    border-radius       : 0.5rem;
    cursor              : pointer;
    margin              : 0.5rem 0;
    padding             : 0.75rem;
    transition-duration : 0.3s;
    transition-property : all;
}

#ls-list > div:hover {
    background : #ddd;
}

#categories {
    min-height : calc(100vh - 410px);
    padding    : 1rem;
}

footer {
    background : #09f;
    color      : #fff;
    font-size  : 0.75rem;
    height     : 190px;
    padding    : 15px 0.5rem;
}

footer > div:first-child,
footer > div:last-child {
    align-items     : center;
    display         : flex;
    justify-content : space-between;
}

#footer-rules {
    display : flex;
    gap     : 0.5rem;
}

#footer-contacts {
    font-size  : 1rem;
    text-align : right;
}

footer svg {
    filter : grayscale(0.2);
    width  : 300px;
}

footer a {
    color : #fff;
}

.dishes-block {
    padding     : 1rem 0;
    user-select : none;
}

.category-title {
    border-bottom  : 1px solid #babbb5;
    margin-bottom  : 0.75rem;
    padding-bottom : 0.75rem;
}

.dish-item {
    border-bottom : 2px solid #e1f7ff;
    margin-bottom : 2rem;
}

.dish-info {
    display         : flex;
    align-items     : flex-start;
    justify-content : space-between;
}

.dish-info > div:nth-child(1) {
    width : calc(100% - 200px - 150px);
}

.dish-info > div:nth-child(2) {
    width : 200px;
}

.dish-info > div:nth-child(3) {
    text-align : right;
    width      : 150px;
}

.dish-info > div {
    /*outline : 1px solid #00f;*/
}

.dish-title {
    overflow      : hidden;
    /*padding       : 0.75rem 1rem 0.5rem 1rem;*/
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.dish-description {
    font-size : 0.8rem;
    /*height    : 50px;*/
    padding   : 0.25rem 0;
}

.dish-option-block {
    background : rgba(225, 247, 255, 0.5);
    margin-top : 0.5rem;
    padding    : 0.5rem 0;
}

.dish-option-block > div {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-left     : auto;
    width           : 350px;
}

.dish-option-block .dish-count-block {
    align-items     : center;
    color           : #09f;
    column-gap      : 10px;
    display         : flex;
    justify-content : space-between;
}

.dish-option-block .dish-count-block > .cursor-pointer {
    align-items     : center;
    border-radius   : 3px;
    display         : flex;
    height          : 20px;
    justify-content : center;
    outline         : 1px solid #09f;
    width           : 20px;
}

.dish-option-block .dish-count-block > .cursor-pointer:active {
    background : #09f;
    color      : #fff;
}

.dish-option-block .dish-count {
    font-size  : 1.5rem;
    text-align : center;
    width      : 32px;
}

.dish-option-block .dish-sum {
    color     : #09f;
    font-size : 1.5rem;
}

#do-info, #c-list {
    max-height    : calc(90vh - 3rem - 130px);
    overflow-x    : hidden;
    overflow-y    : auto;
    padding-right : 0.25rem;
}

.do-info-row, .c-info-row {
    background    : #eee;
    border-radius : 0.5rem;
    /*border        : 1px solid #f00;*/
    column-gap    : 1rem;
    display       : flex;
    margin-bottom : 1rem;
    padding       : 0.5rem;
    position      : relative;
}

.do-info-row:last-child, .c-info-row:last-child {
    margin-bottom : 0;
}

.do-delete-dish {
    background                 : #c13b33;
    border-bottom-right-radius : 0.5rem;
    border-top-left-radius     : 0.5rem;
    color                      : #fff;
    cursor                     : pointer;
    display                    : block;
    height                     : 20px;
    left                       : 0;
    position                   : absolute;
    text-align                 : center;
    top                        : 0;
    transition-duration        : 0.3s;
    transition-property        : all;
    width                      : 20px;
}

.do-delete-dish:hover {
    background : #b02a22;
}

.do-info-row > div:first-child, .c-info-row > div:first-child {
    align-items : center;
    display     : flex;
    user-select : none;
}

.do-info-row > div:first-child img {
    height : 100px;
    width  : 45px;
}

.do-separator {
    border-bottom : 1px dashed #ccc;
    margin        : 0.5rem 0;
}

.do-sum-of-dish {
    align-items     : center;
    column-gap      : 0.75rem;
    display         : flex;
    height          : 25px;
    justify-content : space-between;
}

#cart .modal-footer > div,
#cart-edit .modal-footer > div {
    align-items     : center;
    display         : flex;
    justify-content : space-between;
}

#c-pay-button {
    justify-content : center;
}

.c-edit-dish {
    align-items                : center;
    background                 : #101d2e;
    border-bottom-right-radius : 0.5rem;
    border-top-left-radius     : 0.5rem;
    color                      : #fff;
    cursor                     : pointer;
    display                    : flex;
    font-size                  : 0.7rem;
    height                     : 20px;
    justify-content            : center;
    left                       : 0;
    position                   : absolute;
    text-align                 : center;
    top                        : 0;
    transition-duration        : 0.3s;
    transition-property        : all;
    width                      : 20px;
}

.c-info-row > div:first-child img {
    height : 80px;
    width  : 45px;
}

.text-nowrap {
    white-space : nowrap !important;
}

.text-truncate {
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

.blockHasError {
    background : rgba(193, 59, 51, 0.15) !important;
}

.additionals-title {
    color         : #999;
    font-size     : 0.75rem;
    margin-bottom : 0.25rem;
}