:root{--background:#fff; --text:#222; --gray:#f9f9f9; --border:#ccc}
.dark-mode{--background:#111; --text:#fff; --gray:#222; --border:#555}
body{background:var(--background); color:var(--text); transition:background-color 0.5s, color 0.5s; padding:20px; min-height:100vh; font-family:Helvetica, sans-serif; font-size:15px;}
h1{text-align:center;}
a{text-decoration: none; color:var(--text);}
a.cat svg {vertical-align:middle;}
button{border:none; background:none; color:var(--text);}
abbr[title]:hover:after{content:" "attr(title); padding:.5em; position: absolute; left:0; background:var(--background); bottom:4.5em; width:auto; font-size:70%; border-radius:25px; white-space:nowrap;}
label{font-weight:normal;}
input:checked + .slider{background:#ff4500;}
input:checked + .slider:before {transform: translateX(18px);}
ul{list-style:none; padding:0; margin:0;}
.top{color:#fff; position:relative; top:8em; max-width:100%; overflow:hidden;}
.top-title{font-weight:bold; font-size:3.8em;}
.top-subtitle{font-size:1.3em;}
.background{width:98.5vw; height:400px; margin-left:-1.6em; background:linear-gradient(to bottom, var(--background), #ff4500, #ff6a33, #ff8f66, var(--background)); text-align:center; position:absolute;}
.container{-moz-column-count:2; -webkit-column-count:2; column-count:2; margin:0 auto; max-width:80%;}
.search-box{text-align:center; padding:10px; background:var(--background); position:fixed; top:0; z-index:1; width:100%; margin-left:-1.6em;}
#searchInput{width:40%; padding:12px 18px; border:1px solid var(--border); border-radius:25px; font-size:1.1em; outline:none; transition:border-color 0.3s ease; background:transparent; color:var(--text);}
#searchInput:focus{box-shadow:0 0 0 2px #E35336; border:none;}
.cat-box{width:100%; min-height:60px; white-space:nowrap; overflow:auto; padding-top:1.5em; display:none; -ms-overflow-style:none; scrollbar-width:none;}
.cat-box::-webkit-scrollbar{display:none}
.cat-title{font-weight:bold; font-size:1.1em;}
.cat{background:var(--gray); border-radius:.5em; width:auto; border:1px solid var(--border); padding:1em;}
.menu{margin-top:18em;}
.on{border-radius:2em; width:8px; background:transparent; height:8px; position:absolute; right:.3em; top:.5em;}
.cart-empty-message{color:#777; text-align:center; padding:2em; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.cart-item{margin-bottom:.5em; padding:.8em; background:var(--gray); border-radius:2em; font-size:1em;}
.cart-item-controls{float:right;}
.menu-item{background:var(--gray); margin-bottom:.5em; padding:.5em; border-radius:2em; max-width:auto; white-space:nowrap;}
.item-name{font-size:1em; font-weight:bold;}
.item-price{font-size:1.1em; color:#CC3600; font-weight:bold; text-align:right; float:right;}
.total{position:fixed; bottom:.5em; right:1em; font-weight:bold; background:var(--gray); padding:15px; border-radius:25px; z-index:3;}
#orderButton{position:fixed; bottom:.5em; left:1em; font-weight:bold; background:#E35336; color:#fff; border:none; padding:15px; border-radius:25px; cursor:pointer; font-size:1em; font-family:Helvetica, sans-serif; z-index:4;}
.decrease-btn, .increase-btn, .cart-item-controls button{width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--background); cursor:pointer; font-size:18px; margin-right:5px; color:var(--text);}
.cart-item-controls button{margin-top:-.4em;}
.item-controls{display:inline-flex; align-items:center; margin-left:5px;}
.item-quantity{min-width:20px; text-align:center; margin:0 5px; font-weight:bold; font-size:1em;}
.box{padding:20px; border:1px solid var(--border); border-radius:25px; margin-bottom:20px; height:55px; float:left; width:40%;}
.info-box{margin:2em auto; max-width:70%;}
.info{width:70%; float:right;}
.info-title{font-size:1.2em; font-weight:bold; color:#CC3600;}
.mapgoogle{width:50%; height:300px; float:right; background:#000;}
.footer{font-size:.8em; margin-top:3em; margin-bottom:3em;}
.footer-title, .footer svg{margin-right:.4em; margin-bottom:.5em; font-weight:bold; font-size:2em;}
.wpp{padding-right:.1em}
.popup{width:30%; top:0; right:0; height:100%; position:fixed; overflow:auto; background:var(--background); z-index:2; display:none; padding:1.5em;}
.switch{position:relative; display:inline-block; width:45px; height:25px; float:right}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--text); transition:.4s; border-radius: 1em;}
.slider:before{position:absolute; content:""; height:18px; width:18px; left:4px; bottom:4px; background:var(--background); transition:.4s; border-radius:50%;}
.small{font-size:.7em;}
.carousel-container{position:relative; width:90%; max-width:800px; height:300px; display:flex; justify-content:center; align-items:center; margin:40px auto; perspective:1000px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s ease-in-out;}
.carousel-slide{display:flex; align-items:center; justify-content:center; width:100%; height:100%; transform-style:preserve-3d}
.carousel-image{width:45%; max-width:250px; height:200px; object-fit:cover; position:absolute; border-radius:10px; box-shadow:0 4px 15px rgba(0, 0, 0, 0.2); cursor:pointer; transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out, filter 0.5s ease-in-out;}
@media (max-width: 940px) {
.container{min-width:100%;}
}
@media (max-width: 768px) {
.top-title{font-size:3em;}
#searchInput{width:70%; font-size:1em;}
.item-name, .item-price{font-size:1em;}
.mapgoogle{width:100%; height:200px; margin-bottom:20px;}
.box{width:90%;}
.clear{clear:both;}
.container{-moz-column-count:1; -webkit-column-count:1; column-count:1; min-width:102%;}
.info-box{min-width:100%;}
.menu-list{max-width:95%;}
.menu-item{display:flex; justify-content:space-between; align-items:center; min-width:100%;}
.top{width:99%;}
.popup{top:0; left:0; right:0; min-width:90%;}
.cat-box{display:block;}
.carousel-image{height:auto;}
}