/**style.css*/
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap');
html {color:white;font-family:'Rubik', sans-serif;font-style:normal;font-size:16px;}
html {font-size:14px;}
@media screen and (min-width:768px) {html {font-size:15px;}}
@media screen and (min-width:1024px) {html {font-size:16px;}}
@media screen and (min-width:1200px) {html {font-size:17px;}}
body {display:flex;flex-direction:column;background-color:#202124;}
#bot {margin:0px 0;height:130vh;width:400px;display:flex;align-items:center;justify-content:center;}
#container {height:90%;border-radius:6px;width:90%;}
#header {width:100%;height:7%;border-radius:6px;text-align:center;margin-top:-50px;}
#body {width:100%;height:90%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;display:flex;flex-direction:column;scroll-snap-type:y mandatory;overflow-x:hidden;}
.userSection {width:100%;}
.seperator {width:100%;height:50px;}
.messages {max-width:90%;margin:.5rem;padding:.5rem;border-radius:7px;margin-top:-300px;width:auto;height:auto;}
.user-message {text-align:right;margin-top:1rem;float:right;box-shadow:2px 2px 8px rgba(0, 0, 0, 0.1);background-color:#626262;}
.bot-reply {margin-top:1rem;text-align:left!important;float:left;width:3000px;height:auto;background-color:#313131;}
#inputArea {display:flex;align-items:center;justify-content:center;height:10%;padding:1rem;background:transparent;background-color:#303236;}
#userInput {background-color:#868c97;height:20px;width:80%;color:#FFFFFF;border-radius:6px;padding:1rem;border:none;outline:none;box-shadow:2px 2px 8px rgba(0, 0, 0, 0.1);}
#send {height:50px;padding:.5rem;text-align:center;width:20%;cursor:pointer;border:none;border-radius:6px;box-shadow:2px 2px 8px rgba(0, 0, 0, 0.1);}
#underArea {display:flex;justify-content:center;align-items:center;margin-top:10px;}
@media screen and (min-width:768px) {#bot {width:100%;display:flex;align-items:center;justify-content:center;margin:0 auto;padding:0 20px;box-sizing:border-box;max-width:1200px;height:90vh;margin-bottom:-300px;}
#underArea {display:flex;justify-content:center;align-items:center;margin-top:10px;} }
@media screen and (max-width:768px) {#bot { 
height:110vh;margin-bottom:-400px;}
#footerContainer {position:fixed;bottom:0;left:0;width:100%;background-color:#202124;padding:10px;box-shadow:0 -2px 5px rgba(0,0,0,0.1);z-index:1000;display:flex;flex-direction:column;gap:10px;}
#suggestions {overflow-x:auto;white-space:nowrap;}
.scrollmenu {display:flex;gap:10px;}
.suggestion {display:inline-block;background-color:#eee;padding:6px 10px;border-radius:5px;cursor:pointer;}
#inputArea {display:flex;flex-direction:column;gap:10px;}
#userInput  {width:100%;padding:10px;}}
.divCartTable{display:table;width:100%;}
.divCartTableRow {display:table-row;}
.divCartTableHeading {background-color:#EEE;display:table-header-group;}
.divCartTableCell, .divCartTableHead {border:1px solid #999999;display:table-cell;padding:3px 10px;}
.divCartTableHeading {background-color:#EEE;display:table-header-group;font-weight:bold;}
.divCartTableFoot {background-color:#EEE;display:table-footer-group;font-weight:bold;}
.divCartTableBody {display:table-row-group;}
.sidenav {height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background-color:#111;overflow-x:hidden;transition:0.5s;padding-top:60px;text-align:center;}
.sidenav a {padding:8px 8px 8px 32px;text-decoration:none;color:#818181;display:block;transition:0.3s;}
.sidenav a:hover{color:#f1f1f1;}
.sidenav .closebtn {position:absolute;top:0;right:25px;font-size:36px;margin-left:50px;}
@media screen and (max-width:600px) {#bot {margin:0px 0;height:100vh;width:auto;display:flex;align-items:center;justify-content:center;}
#body{}}
.container_food {display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;}
.box_food {width:48%;padding:20px;text-align:center;background-color:lightblue;}
.image-box {width:48%;}
.image-box img {width:100%;height:auto;display:block;}
.popup {width:100%;
height:100%;
display:none;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
.popup__content {
width:80%;
overflow:auto;
padding:50px;
position:relative;
top:50%;
left:50%;
transform:translate(-50%, -50%);
box-sizing:border-box; }
.closeX {
position:absolute;
right:20px;
top:20px;
width:20px;
display:block;
span {
cursor:pointer;
position:fixed;
width:20px;
height:3px;
&:nth-child(1) {
transform:rotate(45deg);
}
&:nth-child(2) {
transform:rotate(135deg);
}
}
}
}
}
button {margin:30px;padding:5px 30px;cursor:pointer;border:none;}
#inputArea {display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding-top:20px;}
#userInput {padding:10px;width:75%;border:1px solid #ccc;border-radius:5px;}
#send {padding:10px;background:#008CBA;color:white;border:none;cursor:pointer;border-radius:5px;}
#send:hover {background:#005f7a;}
#clearChat {padding:10px;color:white;border:none;cursor:pointer;border-radius:5px;}
#clearChat:hover {background:#c0392b;}
#suggestions-container {width:100%;overflow-x:auto;
white-space:nowrap;display:flex;gap:10px;padding:10px;scroll-snap-type:x mandatory;}
#suggestions span {display:inline-block;padding:10px 20px;background-color:#007bff;color:white;text-decoration:none;border-radius:5px;flex-shrink:0;scroll-snap-align:start;}
#suggestions a {display:inline-block;padding:10px 20px;background-color:#007bff;color:white;text-decoration:none;border-radius:5px;flex-shrink:0;scroll-snap-align:start;}
#suggestions a:hover {background-color:#0056b3;}
@media (max-width:600px) {#suggestions-container {padding:5px;}
#suggestions a {padding:8px 15px;}}
div.scrollmenu {background-color:#333;overflow:auto;white-space:nowrap;}
div.scrollmenu a {display:inline-block;color:white;text-align:center;padding:14px;text-decoration:none;}
div.scrollmenu a:hover {background-color:#777;}
#header {display:flex;align-items:center;justify-content:space-between;background-color:#202124;padding:10px 20px;color:white;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin-left:-20px;}
.header-title {flex:1;text-align:center;font-weight:bold;}
.icon-button {background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;transition:background-color 0.2s ease;}
.icon-button:hover {background-color:rgba(255, 255, 255, 0.1);}
.icon-button img {width:20px;height:20px;}
.header-actions {display:flex;gap:10px;}
.modal {display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center;}
.modal-content {background-color:#fff;padding:20px;border-radius:10px;text-align:center;width:400px;}
.close {color:#aaa;float:right;font-size:28px;font-weight:bold;cursor:pointer;}
.close:hover {color:black;}
.paypal-button {width:200px;height:50px;background-image:url('../scr/paypal.png');background-size:cover;background-position:center;border:none;cursor:pointer;font-size:16px;color:white;text-align:center;line-height:50px;display:inline-block;}
.button:hover {opacity:0.8;}
.messages {white-space:pre-wrap;overflow:hidden;display:inline-block;max-width:100%;}
.bot-reply {}
.typing {border-right:2px solid #000;animation:blink 0.7s steps(1) infinite;}
@keyframes blink {50% {border-color:transparent;}}
#banner-for-coockie {position:fixed;bottom:0;left:0;right:0;z-index:1000;}
#cookieInfo {color:#0077cc;text-decoration:underline;cursor:pointer;}
.popup-overlay {display:none;position:fixed;top:100px; left:0;width:100%; height:100%;background:rgba(0,0,0,0.5);z-index:2000;}
.popup-box {background:#000000;max-width:300px;margin:10% auto;padding:20px;border-radius:8px;text-align:left;box-shadow:0 4px 10px rgba(0,0,0,0.3);position:relative;}
.popup-box h2 {margin-top:0;font-size:18px;}
.popup-box p {font-size:14px;line-height:1.5;}
.close-btn {position:absolute;top:10px; right:10px;background:none;border:none;font-size:20px;cursor:pointer;color:#666;}
.close-btn:hover {color:#000;}