@font-face {
  font-family: CC;
  src: url(../../../../include/font/frutigerAr.woff2) format('woff2');
}
@font-face { font-family: 'mi'; font-style: normal; font-weight: 400; src: url(../../../../include/font/thicon.woff2) format('woff2'); }
mi,.mi,.material-icons { font-family: 'mi'; font-weight: normal; font-style: normal;  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; vertical-align: middle;}
@font-face { font-family: 'brands'; font-style: normal; font-weight: 400; src: url(../../../../include/font/brands.woff2) format('woff2'); }
/*brands*/
[class^="ico-"]:before, [class*=" ico-"]:before {font-family: "brands"; font-style: normal; font-weight: normal; display: inline-block; margin: 0 .1em; vertical-align: baseline; line-height: 1;}
.ico-basket:before { content: '\e800'; }
.ico-twitter:before { content: '\f099'; }
.ico-facebook:before { content: '\f09a'; }
.ico-linkedin:before { content: '\f0e1'; }
.ico-ticket:before { content: '\f145'; }
.ico-youtube:before { content: '\f16a'; }
.ico-instagram:before { content: '\f16d'; }
.ico-skype:before { content: '\f17e'; }
.ico-bug:before { content: '\f188'; }
.ico-bank:before { content: '\f19c'; }
.ico-behance:before { content: '\f1b4'; }
.ico-soundcloud:before { content: '\f1be'; }
.ico-paypal:before { content: '\f1ed'; }
.ico-cc-visa:before { content: '\f1f0'; }
.ico-cc-mastercard:before { content: '\f1f1'; }
.ico-cc-discover:before { content: '\f1f2'; }
.ico-cc-amex:before { content: '\f1f3'; }
.ico-cc-paypal:before { content: '\f1f4'; }
.ico-cart-plus:before { content: '\f217'; }
.ico-pinterest:before { content: '\f231'; }
.ico-whatsapp:before { content: '\f232'; }
.ico-credit-card-alt:before { content: '\f283'; }
.ico-shopping-bag:before { content: '\f290'; }
.ico-shopping-basket:before { content: '\f291'; }
.ico-snapchat:before { content: '\f2ac'; }
.ico-facebook-squared:before { content: '\f308'; }
.ico-tiktok:before { content: '\f309'; }

* {padding: 0;margin: 0;box-sizing: border-box;}
html{scroll-behavior: smooth;font-family: CC;}
body{display: flex; background: transparent; padding: 0; flex-direction: column;}
body,html{height: 100%;}
body::before{display: block;content: '';top:0;width: 100%;height: 100%;position: fixed;background:transparent;background-attachment: fixed;z-index: -1;background-repeat: no-repeat; background-position: 20% 80%; background-size: auto 120%;opacity: .1;}
::-webkit-scrollbar { width: 4px;height: 4px;}
::-webkit-scrollbar-track { background:rgba(0, 0, 0, 0.1); border: 0px solid white; -webkit-border-radius: 10px; border-radius: 10px; }
::-webkit-scrollbar-thumb { -webkit-border-radius: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); border: 0px solid white; }
::-webkit-scrollbar-thumb:window-inactive { background: #ddd; }
slid{display: block; height: 100%; overflow: auto; width: 100%; max-width: 1100px; margin: auto;}
slid>inner{display: table;vertical-align: middle;text-align: center;z-index: 2; position: relative; padding: 0px;height: 100%;width: 100%;}
inner main{display: table-cell;text-align: center;overflow: auto; position: relative;vertical-align: middle;}
slid>inner>p{padding: 10px;max-width: 1100px; margin: auto;}
slid.cover{background-image: url(/img/cafeBG.jpg);background-position: center;background-size: cover;}
a{text-decoration: none;cursor: pointer;color: #000;}
.nxtPg{position: absolute; bottom: 0; background: white; display: inline-block; padding: 0 10px; border-top-left-radius: 7px; border-top-right-radius: 7px; box-shadow: 0 -10px 9px -8px; padding-bottom: 10px; font-size: 25px; line-height: .7; z-index: 999999; margin: auto; right: calc( 50% - 19px);}
wlogo,logo{display: inline-block; width: 250px;max-width: 100%;height: 250px; background-repeat: no-repeat; background-size: contain;background-position: center;}
wlogo{ background-image: var(--logo); }
logo{width: 100px; height: 40px; margin: 0px; background-image: var(--logo); }
header {display: flex; width: 100%; position: relative;z-index: 999999999;flex-wrap: wrap; background: white; box-shadow: 0 0 3px #000000;padding: 5px;place-content: flex-end;}
.clear::after,header::after{content: '';display: block;clear: both;}
header>inner { display: block; width: 1200px; max-width: 100%;margin: auto;}
header.active{position: fixed;top: 0;}
header > inner > a { float: right; margin: 30px 0;margin-right: 30px;display: inline-block; color: black; position: relative;}
header > inner > a.active::after,header > a:hover::after{display: block; content: ''; position: absolute; bottom: -10px; width: 100%; background: black; height: 6px; border-radius: 10px;}
header > inner > bars{display: none; float: right; content: '='; margin: 25px 20px; font-size: 49px; border-top: 4px solid black; line-height: 0.5; text-indent: -1px; width: 27px;}
@media (max-width:450px) {
  header > inner > a{display: none;}
  header > inner > bars{display: inline-block;}
  .expand > inner > a{display: block; width: 96%; padding: 10px; background: rgba(255,255,255,.8); box-shadow: 0 0 2px; margin: 4px 2%; border-radius: 9px;}
  header.expand > inner > a.active::after, header.expand > a:hover::after{bottom: 1px; right: 1%; width: 98%;}
}
.right{text-align: right;}
.left{text-align: left;}
iframe{border: 0; border-radius: 10px; box-shadow: 0 0 5px -2px; width: 90vw; height: 75%;max-width: 100%;}

header>h1{ text-align: center;align-self: center;font-size: 20px;}
header>*{ flex: auto; }
header>logo, header>dd { flex: none; }
header>dd { font-size: 25px; padding: 0; line-height: 1;text-align: left;}
header dd > * { padding: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); line-height: 22px; display: inline-block; border-radius: 5px; background: #fff; }
menu { display: block; overflow: auto; width: 100%; padding: 5px 0 0 0;white-space: nowrap; }
menu::before{ display:inline-block;content:'folder';font-size: 20px; padding: 8px 3px; margin-bottom: 4px; font-family:'mi' ;vertical-align: middle;  }
menu>t,menu>a { display: inline-block; padding: 10px; margin-left: 5px;border-radius: 10px; cursor: pointer; color: #000;line-height: 1;}
menu>t:hover,menu>t.active,menu>a:hover,menu>a.active { background: black;color: white;}
main>p { box-shadow:0 1px 4px rgba(0,0,0,0.5); width: calc(calc(100% / 5) - 20px); margin: 10px; display: inline-block; border-radius: 8px; padding: 7px; }
p>name { display: block; margin-bottom: 10px;font-weight: bold; }
p>price , p>calo { display: block; width: 50%;float: right;}
p>price { text-align: right;}
p price::after { display: inline;content: ' SAR';font-size: 50%;}
p>calo { text-align: left;color: lightgray;font-size: 15px;}
p>calo::before { display: inline;content: 'whatshot';font-family:'mi' ;vertical-align: middle;}
p>img { display: block; box-shadow: 0 0 3px; width: calc(100% + 24px); margin: 7px -12px; border-radius: 10px; }
p>description { display: none; }
photo { display: block; height: 150px;background-image: url(../../images/noimage.svg);background-color: #fff; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-position: center; border-radius: 10px; margin: 5px -12px; box-shadow: 0 1px 4px rgba(0,0,0,0.5);}
.huge { font-size: 50px; }
p>[close]{display: none;}
p.zoom>[close]{display: inline-block;float: left; font-size: 30px;}
p.zoom {position: fixed; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1080px; margin: 0; z-index: 99999; background: white; top: 140px; height: 70%; height: calc( 100% - 160px );}
p.zoom photo {height: 70%; height:61%;/*background-size: contain;*/ background-repeat: no-repeat;}
p.zoom description{ display: block;height: 25%; overflow: auto;width: 100%; }
footer{text-align: right;font-size: 13px;padding: 5px 10px;background: #fff; box-shadow: 0 -4px 3px -3px rgb(0,0,0,0.5);position: relative;}
btn { display: inline-block; border: 2px solid; border-radius: 5px; margin: 3px;padding: 4px; line-height: 1;font-weight: bold; }
discount { color: red;padding: 0 5px !important; }
input[type="radio"] { width: 15px; height: 15px; vertical-align: middle; }
@media (max-width: 600px) {
  /* header>dd {width: 100%;} */
  header>h1{text-align: right;}
  main>p {width: 43%; width: calc(calc(100% / 2) - 23px);}
}
[fleft],.fleft{float: left;}
[fright],.fright{float: right;}
[ltr],.ltr{direction: ltr;}
[rtl],.rtl{direction: rtl;}
.w100{width: 100%;}
.w50{width: 50%;}
.box,.btn,list a{display: inline-block;max-width:500px;width:95%;margin:auto;padding:10px;background:rgba(255,255,255,0.5);box-shadow: 0 1px 4px -1px rgba(0,0,0,.8);border-radius:5px;color: #000000;margin: 5px;}
list a{display: block;width: 100%;text-align: left;direction: ltr;max-width: none;}
.bbg{background: #000000;color: #ffffff;}
label { width: 100%; display: flex;padding: 0;gap: 10px; align-items: center;flex-wrap: wrap;}
.fdir_rr,[fdir_rr]{flex-direction: row-reverse;}
label>input { width: 100%;font-family: inherit;flex:1;}
label>.thumb {max-width: 60%; border-radius: 12px;max-height: 50px;}
.center{text-align: center;}
cart { font-size: 20px; display: block;}
item,flex,[flex] { display: flex; flex-direction: row; justify-content: space-between;gap: 10px; align-items: center; }
item { border-top:2px dashed rgba(0,0,0,.3);padding: 10px 0px; }
item:first-child { border-top: 0; }
item>wide,flex>wide,[flex]>wide,[flex]>[wide] { flex:1;flex-grow: 1;}
item [itemimg]{ background:#fff;vertical-align:middle;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.2);width:40px;display:inline-block;text-align:center;height:40px;font-size:25px;line-height:34px;color:#ccc; }
dhead { display: flex; flex-direction: row; justify-content: space-between;}
drawer { background: #efb615; display: block; padding: 10px; line-height: 1.2; height: 53px; overflow: hidden;width:100%;max-width: 1120px;margin:auto;border-radius:10px 10px 0 0;transition: height 0.5s; }
drawer [expand]{transition: all 0.5s;font-size: 25px;line-height:0.5;transform: rotate(180deg);}
drawer.open [expand]{transform: rotate(0);}
drawer.open { height: auto; overflow: unset; }
.deliveryType{ display: flex; gap:10px;}
receive { display: block; border: 1px solid #000; padding: 5px; }
deliver { display: block; border: 1px solid #000; padding: 5px; }
.btnMain{padding: 10px; text-align: center; margin: 5px 0; margin-top: 20px;width: 100%}
input[type='text'],input[type='tel'],input[type='number'],input[type='email'],input[type='password']{
  width: 100%; background: transparent; border: 0; border-bottom: 2px solid #000; border-radius: 0; box-shadow: none; padding: 0; color: #000; vertical-align: middle; font-size: inherit;
}
input::placeholder{ color:rgba(0,0,0,.5); }
.badge { border: 2px solid #000; padding: 1px 7px; border-radius: 10px; font-weight: bold; font-size: 16px; }
.back { font-size: 20px; }
.branches { display: none; flex-direction: row; gap: 10px; }
branch { border: 1px solid #fff; padding: 10px 20px; border-radius: 10px; margin-top: 10px; }
#map{border-radius: 10px ; box-shadow: rgb(0 0 0 / 15%) 0px 1px 3px; outline: none;height: 300px; }
#maparea { padding: 0px; width: 100% }
.validat-msg { margin: 5px 0; width: 100%; color: #c51508; display: block; border: 2px solid; padding: 1px 5px 6px; border-radius: 7px; direction: rtl; }
.mapbtn{
  border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; background-color: #fff; border-bottom: 1px solid #ccc; display: block; text-align: center; text-decoration: none; color: black; font-size: 26px; line-height: 1.2; border-radius: 9px; padding: 0 4px;
  margin-right: 10px; margin-bottom: 10px;
}
.leaflet-bottom.leaflet-right .leaflet-control { background: transparent !important; }