@import url('https://fonts.googleapis.com/css2?family=Alice&family=Nanum+Gothic:wght@700&family=Rubik:wght@400;500&display=swap');

:root {
    --body-background: #171717;
    --body-foreground: #fff;
    --body-foreground-muted: #ffffff36;
    --body-stroke: #2E2E2E;
}



body {
    background: var(--body-background, #171717);
    display: flex;
    font-family: Rubik;
    font-weight: 400;
    padding-bottom: 50px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
}

@keyframes desktop_bg {
  0% {
    background-image: url(images/bg-desktop-1.png);
  }
  33% {
    background-image: url(images/bg-desktop-2.png);
  }
  67% {
    background-image: url(images/bg-desktop-3.png);
  }
  100% {
    background-image: url(images/bg-desktop-1.png);
  }
}
@keyframes mobile_bg {
  0% {
    background-image: url(images/bg-mobile-1.png);
  }
  33% {
    background-image: url(images/bg-mobile-2.png);
  }
  67% {
    background-image: url(images/bg-mobile-3.png);
  }
  100% {
    background-image: url(images/bg-mobile-1.png);
  }
}

body#home {
    /*animation-duration: 3s;*/
    /*animation-iteration-count: infinite;*/
    /*background-image: url(images/bg-desktop-1.png);*/
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    max-width: 390px;
    margin: 0 auto;
    padding: 30px 10px;
    transition: background-image ease-in-out .13s;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}
body#home .logo {
    margin: 60px auto;
}
@media screen and (min-width: 721px) {
    body#home {
        /*background-image: url(images/bg-mobile-1.png);*/
        /*animation-name: desktop_bg;*/
        animation: desktop_bg 15s infinite;
    }
}
@media screen and (max-width: 720px) {
    body#home {
        /*background-image: url(images/bg-mobile-1.png);*/
        /*animation-name: mobile_bg;*/
        animation: mobile_bg 15s infinite;
    }
    body#home .logo {
        margin: 45px auto;
    }
}






.quickLinks {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); 
    display: flex;
    width: calc(370px - (12px * 2));
    height: 36px;
    padding: 12px;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
}
.quickLinks img {
    display: inline-block;
    height: 36px;
    width: 36px;
}
.quickLinks span.label,
.quickLinks span.address {
    align-self: stretch;
    color: var(--body-foreground, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    width: 100%;
}
.quickLinks span.label {
    line-height: 36px;
}
.quickLinks.-phone span.label {
    line-height: 18px;
}
    .quickLinks.-phone span.label div {
        font-size: 12px;
        opacity: .36;
    }
.quickLinks span.arrowRightIcon {
    background-image: url(images/quickLinks-ArrowRight.png);
    background-size: cover;
    display: inline-block;
    height: 18px;
    width: 18px;
}
.quickLinks.-map {
    background-image: url(images/map-background.png);
    background-size: cover;
    display: block;
    height: 180px;
    padding: 0;
    width: 370px;
}
.quickLinks.-map img {
    float: right;
    margin: 8px;
}
.quickLinks.-map .address {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.15) 32.81%, rgba(17, 17, 17, 0.90) 100%);
    border-radius: 18px;
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    padding: 132px 1px 12px;
    margin: -1px;
    text-align: center;
    width: 100%;
}



.header {
    border-bottom: 1px solid #1c1c1c;
    background: #000;
    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
}
    .header__main {
        display: flex;
        padding: 24px 12px;
        align-items: center;
        gap: 12px;
        align-self: stretch;
    }
        .header__main .button {
            background-size: auto 12px;
            background-repeat: no-repeat;
            background-position: center center;
            border-radius: 10px;
            border: 2px solid var(--body-stroke, #2E2E2E);
            display: flex;
            padding: 12px 18px;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        .header__main__logo {
            background-image: url(images/header-logo.png);
            background-size: auto 36px;
            background-repeat: no-repeat;
            background-position: center center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 36px;
            gap: 6px;
            flex: 1 0 0;
        }
        .header__main__logo {
            background-image: url(images/header-logo.png);
        }
        .header__main__back {
            background-image: url(images/header-back.png);
        }
        .header__main__call {
            background-image: url(images/header-phone.png);
        }
    .header__menu {
        border-bottom: 1px solid var(--body-stroke, #2E2E2E);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        flex-flow: row; 
        padding: 0px 12px;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
        /* overflow-x: auto; */
    }
    .header__menu__item {
        color: var(--body-foreground, #ccc);
        cursor: pointer;
        font-family: Rubik;
        font-size: 16px;
        font-style: normal;
        line-height: 120%; /* 19.2px */
        border-bottom: 1px solid var(--body-stroke, #2E2E2E);
        display: flex;
        padding: 12px 2px;
        margin-bottom: -1px;
        align-items: flex-start;
        gap: 10px;
        text-decoration: none;
        white-space: nowrap;
    }
    .header__menu__item.-active {
        color: var(--body-foreground, #FFF);
        border-bottom: 1px solid var(--body-foreground, #FFF);
    }
    .header__submenu {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        flex-flow: row; 
        padding: 12px;
        align-items: flex-start;
        gap: 6px;
        align-self: stretch;
        overflow-x: auto;
    }
    .header__submenu__item {
        border-radius: 10px;
        border: 1px solid var(--body-stroke, #2E2E2E);
        color: var(--body-foreground, #FFF);
        cursor: pointer;
        font-family: Rubik;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 16.8px */
        display: flex;
        padding: 8px 12px 6px 12px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        white-space: nowrap;
    }
    .header__submenu__item.-active {
        border-radius: 10px;
        border: 1px solid var(--body-stroke, #2E2E2E);
        background: var(--body-stroke, #2E2E2E);
        color: var(--body-foreground, #FFF);
        font-family: Rubik;
        font-size: 14px;
        font-style: normal;
        line-height: 120%; /* 16.8px */
    }





body#menu {}

.menu {
    display: flex;
    padding-bottom: 50px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.menu__category {
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    align-self: stretch;
}
.menu__category h2 {
    align-self: stretch;
    color: var(--body-foreground, #FFF);
    font-family: Rubik;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 240%;
    margin: 0;
    padding: 0;
}

.menu__category__subcategory {
    display: flex;
    padding: 12px 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    align-self: stretch;
}
.menu__category__subcategory h3 {
    align-self: stretch;
    color: var(--body-foreground, #FFF);
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; /* 40px */
    margin: 0;
    padding: 0;
}

.menu__item {
    border-top: 1px solid var(--body-stroke, #2E2E2E);
    display: flex;
    min-width: 300px;
    padding: 12px 1px;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.menu__item__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 0 0;
}
.menu__item__details__name {
    align-self: stretch;
    color: var(--body-foreground, #FFF);
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 16.8px */
}
.menu__item__details__description {
    align-self: stretch;
    color: var(--body-foreground, #FFF);
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 14.4px */
    opacity: 0.36;
}
.menu__item__details__price {
    align-self: stretch;
    flex: 1 0 0;
    color: var(--body-foreground, #FFF);
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 12px */
    opacity: .6;
}
.menu__item__details__price span {
    opacity: .6;
}
.menu__item__cover {
    border-radius: 4px;
    width: 48px;
    height: 48px;
}





body#reservation {}

#reservationForm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    align-self: stretch;
    padding: 48px 12px;
    margin: 0 auto;
    width: calc(100% - (12px * 2));
    max-width: 480px;
}
    #reservationForm h1 {
        color: var(--body-foreground, #FFF);
        display: block;
        text-align: center;
        font-family: Rubik;
        font-size: 36px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%; /* 43.2px */
        margin: 0;
        width: 100%;
    }
    #reservationForm .datetime-fields {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
    }
        #reservationForm .datetime-fields .datetime-fields__date,
        #reservationForm .datetime-fields .datetime-fields__time {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            /* flex: 1 0 0; */
        }
        #reservationForm .datetime-fields .datetime-fields__time {
            display: flex;
            width: 180px;
        }
    #reservationForm label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        align-self: stretch;
        width: 100%;
    }
        #reservationForm label > div {
            align-self: stretch;
            display: flex;
            gap: 4px;
            color: var(--body-foreground, #FFF);
            font-family: Rubik;
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%; /* 15.6px */
            padding: 0px 12px;
        }
            #reservationForm label > div span {
                opacity: 0.3;
            }
            #reservationForm label > input,
            #reservationForm label > .dropdown,
            #reservationForm label > .ui-selectmenu-button.ui-button,
            #reservationForm label > textarea {
                border-radius: 10px;
                border: 1px solid var(--body-stroke, #2E2E2E);
                background: var(--body-stroke, #2E2E2E);
                color: #fff;
                display: flex;
                font-size: 13px;
                padding: 12px;
                align-items: center;
                gap: 10px;
                align-self: stretch;
                width: calc(100% - (12px * 2));
            }
        #reservationForm label > .ui-selectmenu-button.ui-button {
            cursor: pointer;
            display: block;
        }
            #reservationForm label > .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
            }
            #reservationForm label > .ui-selectmenu-button.ui-button .ui-selectmenu-text {

            }
        #reservationForm label > input:focus,
        #reservationForm label > textarea:focus {
            border: 1px solid var(--body-stroke, #2f2f2f);
            background: var(--body-stroke, #2f2f2f);
        }
    #reservationForm #submit {
        width: 100%;
    }
        #reservationForm #submit .submit--normal {
            align-items: center;
            border-radius: 10px;
            background: var(--body-foreground, #FFF);
            color: #000;
            cursor: pointer;
            display: block;
            font-size: 15px;
            font-style: normal;
            font-weight: 500;
            line-height: 120%; /* 18px */
            padding: 15px 12px;
            text-align: center;
            gap: 10px;
            align-self: stretch;
            width: calc(100% - (12px*2));
        }
        #reservationForm #submit .submit--normal:hover {
            opacity: .9;
        }
        #reservationForm #submit.-done .submit--normal {
            display: none;
        }
        #reservationForm #submit .submit--done {
            align-items: center;
            border-radius: 10px;
            background: #11BE40;
            background-image: url(images/button-check-icon.png);
            background-size: 18px 18px;
            background-repeat: no-repeat;
            background-position: center center;
            display: none;
            height: 48px;
            padding: 0 12px;
            text-align: center;
            gap: 10px;
            align-self: stretch;
            width: calc(100% - (12px*2));
        }
        #reservationForm #submit.-done .submit--done {
            display: block;
        }
        #reservationForm #submit .submit--annotation {
            display: none;
        }
        #reservationForm #submit.-done .submit--annotation {
            display: block;
            color: #11BE40;
            text-align: center;
            font-family: Rubik;
            font-size: 13px;
            font-style: normal;
            font-weight: 500;
            line-height: 120%; /* 15.6px */
            margin: 10px 0;
        }

.ui-selectmenu-menu.ui-front.ui-selectmenu-open {}
.ui-selectmenu-menu.ui-front.ui-selectmenu-open > ul {
    background: #444;
    border: 1px solid #444;
    border-radius: 12px;
}
.ui-selectmenu-menu.ui-front.ui-selectmenu-open > ul > li {}
.ui-selectmenu-menu.ui-front.ui-selectmenu-open > ul > li > div {
    border: 1px solid #444;
    background: #444;
    color: #eee;
    font-size: 13px;
    padding: 12px 12px;
    margin: 0;
}
.ui-selectmenu-menu.ui-front.ui-selectmenu-open > ul > li > div.ui-state-active,
.ui-selectmenu-menu.ui-front.ui-selectmenu-open > ul > li > div:hover {
    border: 1px solid #777;
    background: #777;
    color: #fff;
    padding: 12px 12px;
    margin: 0;
}