body {
    touch-action: none;
    overscroll-behavior: none;
}

html.loading, html.loading body {overflow:hidden;}
html.loading body:after {
    content: '';
    position: fixed;
    inset: 0;
    background: #D73835 url(img/icon.svg) center/150px no-repeat;
    z-index: 1000;
}
html.loading.loaded body:after {
    animation: opacity .3s .7s reverse forwards;
}
main:has(use[href^="#svg-lang"]) {
    gap: 0;
}
button:has(use[href^="#svg-lang"]) {
  width: 180px;
  margin: 0 auto;
  --w: 180;
}
button:has(use[href^="#svg-lang"]):hover {
  background-color: rgb(78 104 129 / 5%);
}
svg:has(use[href^="#svg-lang"]) {
    margin-right: 5px;
    border-radius: 7px;
}

body > svg {display: none;}
:has(:not([media="all"])[onload])~body {
  visibility: hidden
}
body {
  /* color: #fff; */
  background: rgb(243 243 246);
  app-region: drag;
  user-select: none;
  touch-action: manipulation;
}
button {
  cursor: pointer;
  background: none;
  color: inherit;
  border-radius: 10px;
  line-height: 0;
  vertical-align: middle;
}

button.delete {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="%23494136" d="M7.616 20c-.448 0-.83-.157-1.144-.472A1.557 1.557 0 0 1 6 18.385V6H5V5h4v-.77h6V5h4v1h-1v12.385c0 .46-.154.844-.462 1.153-.308.309-.693.463-1.154.462H7.616ZM17 6H7v12.385c0 .18.058.327.173.442a.6.6 0 0 0 .443.173h8.769a.59.59 0 0 0 .423-.192.583.583 0 0 0 .192-.424V6ZM9.808 17h1V8h-1v9Zm3.384 0h1V8h-1v9Z"/></svg>') center / contain no-repeat !important;
    height: 36px;
    width: 36px !important;
    min-width: auto;
}


:root:has(#login) {
  app-region: drag;
}
#log {
  position: relative;
  overflow-y:scroll;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  align-items: flex-start;
  user-select: none;
}
#log:after {
  content:'';
  position: absolute;
  app-region: drag;
  inset: 0;
  width: auto;
}

:is(select, textarea, input, button, a) {
  app-region: no-drag;
}

main, article > form {
  position: relative;
  display: flex;
  min-height: 100vh;
  margin: auto;
  gap: 20px;
  padding: 20px 10px;
  max-width: 500px;
  flex-direction: column;
  justify-content: center;
}
main:has(menu) {
    justify-content: flex-start;
    padding-bottom: calc(100vh - 400px);
}
main div {
    /* display: flex; */
    align-items: center;
    /* gap: 10px; */
    width: 100%;
    justify-content: space-between;
    /* border: 1px solid rgb(78 104 129 / 5%); */
    /* background: #fff; */
    border-radius: 10px;
}
main button, main [type=button] {
  /* color: #fff; */
  /* background: #fff; */
  color: #4c4c4c;
  /* border-radius: 5px; */
  font-weight: bold;
  padding: 0 10px;
  min-width: 44px;
  /* width: calc(var(--w) * 1px); */
  /* border: 1px solid rgb(78 104 129 / 10%); */
  line-height: 44px;
  /* margin: 0 auto; */
  display: inline-flex;
  align-items: center;
  /* gap: 10px; */
  justify-content: flex-start;
  flex-wrap: wrap;
}
main a[type=button] > svg {
    margin-right: 10px;
}
main label:has(:checked) {
  pointer-events: none;
  color: #D73835;
  background: #ffeded80 !important;
  border-color: #E96F6D;
}


main :is(select, input) {
  line-height: 44px;
  max-height: 44px;
  padding: 0 2px;
  border-radius: 10px;
  flex: 1;
  background: #fff;
}
main :not(label) > :is(select, input) {
  /* color: #fff; */
  background: rgb(78 104 129 / 5%);
  border-radius: 5px;
  padding: 0 10px;
  height: 44px;
}
main label:has(select, input) {
  background: #fff;
  border-radius: 5px;
  padding: 0 8px;
  font-weight: normal;
  display: flex;
  gap: 10px;
  align-items: center;
  /* width: 100%; */
}
main label:has(:disabled) {
  background: rgb(78 104 129 / 5%);
}
[name=id], [name=pw] {
    width: 280px;
    /* margin-top: 10px; */
    font-weight: bold;
}

::placeholder {
  /* color: rgb(255 255 255 / 60%); */
}
main select {
}
button:empty {
  background: no-repeat center;
  width: 44px;
}
button:is(.close, .setting) {
  background-image:  url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 17L3 3M17 3L3 17" stroke="%23fff" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round"></path></svg>');
  position: sticky;
  top: 10px;
  margin-left: calc(min(100%, 500px) - 44px);
  margin-top: 10px;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: rgb(50 50 50/ 30%);
  min-width: 34px;
  animation: opacity 1s;
  z-index: 100;
}
button.setting {
  background-image:  url('data:image/svg+xml,<svg width="19" height="21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.575 1.92c-.73-2.56-4.357-2.56-5.087 0A2.645 2.645 0 0 1 3.3 3.76C.719 3.112-1.094 6.253.757 8.166a2.645 2.645 0 0 1 0 3.68c-1.851 1.912-.038 5.053 2.544 4.406a2.645 2.645 0 0 1 3.187 1.84c.73 2.56 4.357 2.56 5.087 0a2.645 2.645 0 0 1 3.188-1.84c2.581.647 4.395-2.494 2.543-4.406a2.645 2.645 0 0 1 0-3.68c1.852-1.913.038-5.054-2.543-4.406a2.645 2.645 0 0 1-3.188-1.84ZM9.032 14.005a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" fill="%23D9D9D9"/></svg>');
}

#login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
p {
  border-radius: 5px;
  /* padding: 10px 5px; */
  margin-bottom: 10px;
  white-space: pre-line;
}

:is(button, [type="button"], [type="submit"], [type="image"]):hover {
  transition: background-color .3s, scale .3s;
}
:is(button, [type="submit"], [type="button"], [type="image"]):active {
  transition: background-color .3s !important;
  scale: calc((var(--w) - 10) / var(--w) * 100%);
}
:is(button, [type="submit"], [type="button"], [type="image"]):active:after {
	content: '';
	position: absolute;
	inset: 0;
	scale: calc((var(--w) + 10) / var(--w) * 100%);
}

[value=enter] {
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgb(28, 154, 255) 0%, rgb(64, 98, 255) 33%, rgb(129, 80, 255) 67%, rgb(255, 130, 197) 100%);
}


label > input {
    background-color: transparent;
    font-weight: normal;
    text-align: right;
}

fieldset label [type=checkbox],
fieldset label [type=radio] {
	height: 24px;
	width: 24px;
	margin: 10px;
	border-radius: 10px;
	background: rgb(0 0 0 / 5%);
	color: #fff;
}
fieldset label :checked {
	background: #D73835;
}


input:is([type=number], [Inputmode=numeric]) {
    font-weight: bold;
}
main > * {
  animation: opacity .3s;
}
fieldset {
    /* border-radius: 5px; */
    display: flex;
    gap: 10px;
    /* justify-content: space-between; */
    /* padding: 5px; */
    flex-direction: column;
    border-radius: 10px;
    background: #fff;
    backdrop-filter: drop-shadow(0 35px 0 rgb(0 0 0 / 20%));
    /* padding: 10px; */
}
form section {
    display: flex;
    justify-content: space-between;
    line-height: 1.4;
    text-align: left;
    gap: 10px;
    background: none;
    z-index: 1;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 10px 10px 20px;
    margin-top: -20px;
}
footer {
    position: sticky;
    margin-top: auto;
    bottom: 0;
}
#toast {
    position: fixed;
    inset: 10px 0 auto 0;
    margin: auto;
    width: fit-content;
    padding: 10px 20px;
    background: rgb(255 255 255 / 80%);
    border-radius: 20px;
    line-height: 20px;
    font-weight: 500;
    animation: opacity .3s,inDown .3s,  opacity 1s 1s reverse;
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%);
}
#toast:empty {
  display: none;
}

/* 
{
    position: fixed;
    inset: 0;
    pointer-events: none;
}
*/




main > article {
    position: relative;
    padding-bottom: 20px;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    display: table;
}
main > article:not(.view):hover {
    transition: scale .3s;
}
main > article:not(.view):active {
    scale: calc((var(--w) - 30) / (var(--w) - 20) * 100%);
}
main > a img {
    border-radius: 10px;
}
main > .view {
    position: relative;
    max-width: 500px;
    margin: auto -10px;
    background: #fff;
    z-index: 1;
    cursor: default;
    animation: select .5s forwards linear;
}
main:not(:has(+ article.blind)) > .view {
    min-height: calc(100lvh + 200px);
}
article.view.open {
    overflow: visible;
    clip-path: inset(0 round 30px 30px 0 0);
    border-radius: 30px;
}
article.view.open ~ article {
    display: none;
}

main > .view > img {
    position: relative;
    margin: -54px 0 100px;
    z-index: 20;
}
main > .view > div {
    margin-top: -55px;
    z-index: 20;
}
main > article > div {
    position: absolute;
    transform: translateY(calc(-100% + 20px));
    backdrop-filter: saturate(180%) brightness(1.2) blur(20px);
    background: rgb(255 255 255 / 80%);
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
}

main > h1 {
    font-size: 26px;
    font-weight: 800;
}

h1 {
    font-size: 18px;
    line-height: 1.4;
}

h2 {
    font-size: 18px;
    line-height: 1.4;
}

em.star {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.1 11.3l3.6 3.3-1 4.6c-.1.6.1 1.2.6 1.5.2.2.5.3.8.3.2 0 .4 0 .6-.1 0 0 .1 0 .1-.1l4.1-2.3 4.1 2.3s.1 0 .1.1c.5.2 1.1.2 1.5-.1.5-.3.7-.9.6-1.5l-1-4.6c.4-.3 1-.9 1.6-1.5l1.9-1.7.1-.1c.4-.4.5-1 .3-1.5s-.6-.9-1.2-1h-.1l-4.7-.5-1.9-4.3s0-.1-.1-.1c-.1-.7-.6-1-1.1-1-.5 0-1 .3-1.3.8 0 0 0 .1-.1.1l-1.9 4.3-4.7.5h-.1c-.5.1-1 .5-1.2 1-.1.6 0 1.2.4 1.6z" fill="%23e99900"></path></svg>') no-repeat;
    padding-left: 15px;
}
.time {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><path d="M10.293 11.707l-3.293-3.293v-4.414h2v3.586l2.707 2.707zM8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6z" fill="%23333"></path></svg>') no-repeat;
    padding-left: 20px;
    line-height: 16px;
}
.delivery {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="15px" width="15px" viewBox="0 0 24 24"><path d="M16 1C16.5523 1 17 1.44772 17 2V3H22V9H19.9813L22.7271 16.5439C22.9033 16.9948 23 17.4856 23 17.999C23 20.2082 21.2091 21.999 19 21.999C17.1365 21.999 15.5707 20.7247 15.1263 19H10.874C10.4299 20.7252 8.86384 22 7 22C5.05551 22 3.43508 20.6125 3.07474 18.7736C2.43596 18.4396 2 17.7707 2 17V7C2 6.44772 2.44772 6 3 6H10C10.5523 6 11 6.44772 11 7V12C11 12.5523 11.4477 13 12 13H14C14.5523 13 15 12.5523 15 12V3H12V1H16ZM7 16C5.89543 16 5 16.8954 5 18C5 19.1046 5.89543 20 7 20C8.10457 20 9 19.1046 9 18C9 16.8954 8.10457 16 7 16ZM19 15.999C17.8954 15.999 17 16.8944 17 17.999C17 19.1036 17.8954 19.999 19 19.999C20.1046 19.999 21 19.1036 21 17.999C21 17.7587 20.9576 17.5282 20.8799 17.3148L20.8635 17.2714C20.5725 16.5266 19.8479 15.999 19 15.999ZM17.853 9H17V12C17 13.6569 15.6569 15 14 15H12C10.3431 15 9 13.6569 9 12H4V15.3542C4.73294 14.5238 5.80531 14 7 14C8.86384 14 10.4299 15.2748 10.874 17H15.1258C15.5695 15.2743 17.1358 13.999 19 13.999C19.2368 13.999 19.4688 14.0196 19.6943 14.0591L17.853 9ZM9 8H4V10H9V8ZM20 5H17V7H20V5Z" fill="%23333"></path></svg>') no-repeat;
    padding-left: 18px;
}
img.logo {
    margin: -35px 10px auto auto;
    width: 50px;
    border-radius: 10px;
}



main input[type=search] {
  background: #fff url( 'data: image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path stroke="%23000" fill="none" stroke-linecap="round" stroke-width="2.5" d="M11 16c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5Zm7.59 2.59-4.06-4.06"/></svg>') no-repeat 10px center;
  padding: 0 10px 0 44px;
}


#cart {
    margin-left: calc(min(100%, 500px) - 64px);
    bottom: 20px;
    position: fixed;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    background: #D73835;
    color: #fff;
    justify-content: flex-end;
    font-size: 12px;
    padding: 0;
    z-index: 100;
    font-weight: normal;
    align-items: flex-start;
}

#cart:before {
    content: attr(data-amount);
    position: absolute;
    border-radius: 12px;
    line-height: 21px;
    background: #E96F6D;
    color: #fff;
    padding: 0 3px;
    min-width: 21px;
    font-size: 12px;
}

#cart svg {
    margin: auto;
}


/* .view ~ #cart {
    inset: auto 0 -100px;
    padding: 0 10px 120px;
    height: 160px;
    width: 100%;
    max-width: 500px;
    border-radius: 10px 10px 0 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    --w: 500;
    font-size: 14px;
}

.view ~ #cart svg {
    margin-left: 0;
}

.view ~ #cart:before {
    position: relative;
} */



.slide {
    display: flex;
    scroll-behavior: smooth;
    overflow-x: scroll;
    scrollbar-width: none;
    gap: 5px;
    background: #fff;
    padding: 5px;
    justify-content: flex-start;
}
[name="onAddress"] {
    display: none;
}

button > div {text-align: left;font-weight: 500;line-height: 1.4;padding-bottom: 15px;width: auto;}

.accent {
    background: #D73835;
    color: #fff !important;
}

.edit {
    /* position: absolute; */
    /* inset: 0 10px 0 auto; */
    margin-right: 10px;
    background: rgb(78 104 129 / 10%);
    border-radius: 50%;
    width: 44px;
    height: 44px;
}
div > a[type=button] {
    flex: 1;
}




menu {
    display: inline-flex;
    flex-wrap: wrap;
    width: calc(var(--count) * 128px);
    max-width: 100%;
}
menu > li {
    max-width: calc(100% / var(--count));
    width: 128px;
    padding: 1px;
}
menu > li > a {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 12px;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

menu > li > a > img {
    border-radius: 10px;
    width: 100%;
    background: rgb(78 104 129 / 10%);
    aspect-ratio: 1;
}
img.logo[src=""] {display: none;}

.food {
    display: flex;
    justify-content: space-between;
    line-height: 1.4;
    text-align: left;
    gap: 10px;
    background: none;
    z-index: 1;
    flex-wrap: nowrap;
    padding: 10px;
    margin: 0 -10px;
}
.food:hover {
  background-color: rgb(78 104 129 / 5%);
}
.food strong {
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
}
.food strong + div, .price {
	font-weight:bold;
	color: #D73835;
	font-size: 13px;
}
.food img, form section img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    background: #fff;
    border-radius: 10px;
}
form section img {
}
section {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
    line-height: 1.2;
    margin: 0 0 -5px;
    overflow: hidden;
    width: 100%;
    margin-top: -45px;
    padding-top: 70px;
}

nav {
    position: sticky;
    top: 55px;
    background: #fff;
    overflow: hidden;
    /* --focusColor: transparent; */
    width: 100%;
    /* backdrop-filter: blur(10px); */
    overflow-x: scroll;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
    scrollbar-width: none;
    /* margin-top: 90px; */
    width: 100%;
    border: 1px solid rgb(78 104 129 / 10%);
    border-width: 1px 0;
}
nav a {
    flex: none;
    padding: 15px 10px;
    font-weight: bold;
    border-radius: 5px;
    background: content-box;
}
nav a:hover {
    background: rgb(78 104 129 / 5%);
}
@keyframes select {
    0%  {
      margin: 0;
      min-height: 0;
      border-radius: 10px;
    }
    10% {
      margin: 0 -1px;
      min-height: calc(100lvh + 200px);
      border-radius: 12px 12px 9px 9px;
    }
    100% {
      margin: 0 -10px;
      min-height: calc(100lvh + 200px);
      border-radius: 30px 30px 0 0;
    }
}

article:not(.open) header {
    display:none;
}
header {
    padding: 15px 10px;
    padding-right: 54px;
    top: 0;
    width: 100%;
    max-width: 500px;
    position: fixed;
    background: #fff;
    z-index: 10;
    animation: opacity .3s;
    font-size: 18px;
    line-height: 1.4;
    font-weight: bold;
}

form h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: sticky; */
    top: 0;
    /* background: #fbfbfc; */
    z-index: 1;
    padding: 10px;
}

/* form h2 {} */

form h2 em {
    color: #D73835;
}

button.back {
    /* background: #000; */
    height: 44px;
}
article.blind > form {
    justify-content: flex-start;
    padding: 44px 0 0;
    background: #f3f3f6;
    z-index: 10;
    text-align: left;
    position: relative;
}
article.blind:before {
    content: none;
}
fieldset label:has([type=checkbox], [type=radio]) {
    width: 100%;
    border-radius: 5px;
    /* margin: 0 -10px; */
}
article fieldset label {
    display: flex;
    justify-content: space-between;
}
article fieldset label strong {
    font-weight: normal;
    flex: 1;
    word-break: break-word;
}

article.blind > form h1 {
    position:fixed;
    background: #f3f3f6;
    /* z-index: */
    width: 100%;
    max-width: 500px;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
}
article.blind > form h1 span {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
}

form > :has(> .orderCount) {
    padding: 0 10px;
}

.orderCount {
    display: flex;
    align-items: center;
    max-width: fit-content;
}

.orderCount button {
    height: 36px;
    width: 36px;
    min-width: auto;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
}

.orderCount > span {
    min-width: 40px;
    text-align: center;
}

section .orderCount {
    justify-content: flex-end;
    margin-top: 10px;
}
foot {
    position: sticky;
    bottom: 0;
}
footer button {
    height: calc(44px);
    width: 100%;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
    transform-origin: bottom;
    box-sizing: content-box;
    padding-bottom: env(safe-area-inset-bottom);
}

main:has(+ article.blind) {
    overflow: hidden;
    height: 100vh;
}

main + article.blind {
    position: absolute;
    inset: 0;
    z-index: 100;
    transform: translateX(min(500px, 100%));
    animation: slide .3s forwards;
}


article.blind > form h1 + img {
    clip-path: inset(0 round 10px);
}


@keyframes slide {
	100% {
		transform: translateX(0)
	}
}




dl {
    --dt: 130;
    line-height: 1.2;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
}
dt {
	font-weight: bold;
}
dt, dd {
	padding: 10px 0;
}