/* <RESET> */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
i {
    font: revert;
}
/* <RESET> */


body, ul, hr, h1, h2, h3, h4, h5, p {
    margin: 0;
    padding: 0;
    border: 0;
}


#menuBody, #menuHeader,
.modal-overlay {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}
html, 
.default-style {
    font-size: 14px;
    font-family: "Lato", sans-serif;
}
html {
    height: 100%;   
    background-color: var(--general-background-color);
    transition: var(--animated-theme-transition);
}
body {
    max-width: 800px; /* like savebar */
    margin: auto;
    overscroll-behavior: contain; /* do not refresh on pull up */
    transition: var(--animated-theme-transition);
    display: flex; 
    height: 100%; 
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
@media screen and (min-width: 800px) {
    body {
        border-top: 1px solid var(--general-border-color);
        border-left: 1px solid var(--general-border-color);
        border-right: 1px solid var(--general-border-color);
    }
}

body > svg {
    display: none;
}
input {
    box-sizing: border-box;
}
.fillFlexSpace {
    flex: 1;
}

/* Scrollbar */
@media screen and (min-width: 500px) {
    ::-webkit-scrollbar {
        width: 4px;
    }
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
    }
    ::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
    }
}
html.iframe ::-webkit-scrollbar {
    width: 4px;
}
html.iframe ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
}
html.iframe ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
}


/* common */

#menuHeader,
#menuBody {
    font-family: var(--general-font-family);
    font-size: var(--general-font-size);
    color: var(--general-font-color);
    transition: var(--animated-theme-transition);
}

/* HEADER */
#menuHeader {
    white-space: nowrap;
    width: 100%;
    height: 100px;
    z-index: 91;
    max-width: 800px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#menuHeader .firstBar {
    background-color: var(--topbar-background-color, inherit);
    color: var(--topbar-font-color, inherit);
    font-family: var(--topbar-font-family, inherit);
    font-size: var(--topbar-font-size, inherit);
    transition: var(--animated-theme-transition);
    display: flex;
    flex-wrap: inherit;
    justify-content: flex-end;
    line-height: 50px;
    align-items: center;
}
#menuHeader .firstBar .fa,
#menuHeader .firstBar a {
    color: var(--topbar-font-color, var(--general-font-color, inherit));
    transition: var(--animated-theme-transition);
}
#menuHeader .navigator {
    border-top: 1px solid var(--general-border-color, inherit);
    border-bottom: 2px solid var(--general-border-color, inherit);
    background-color: var(--navigator-background-color, inherit);
    color: var(--navigator-font-color, inherit);
    font-family: var(--navigator-font-family, inherit);
    font-size: var(--navigator-font-size, inherit);
    transition: var(--animated-theme-transition);
    height: 49px;
}
#menuHeader .navigator li a {
    font-weight: 600;
    padding: 0 15px;
    text-transform: uppercase;
}
#menuHeader .navigator .active {
    color: var(--navigator-active-category-color, inherit);
    transition: var(--animated-theme-transition);
    font-weight: bold;
}

#menuHeader .firstBar > .topBarRight > * {
    vertical-align: middle;
}
#menuHeader .firstBar > .topBarRight {
    height: 24px;
    display: flex;    
    padding-right: 10px;
    padding-left: 10px;
}

#menuHeader .firstBar > *:first-child {
    margin-left: 5px;
    margin-right: 5px;
}

#menuHeader .firstBar #star {
    background-color: transparent;
}

#menuHeader .firstBar #language {
    background-color: transparent;
    font-size: 16px;
    border: none;
    border:0px;
    outline:0px;
    color: var(--topbar-font-color, var(--general-font-color, inherit));
    transition: var(--animated-theme-transition);
    cursor: pointer;
}

@keyframes skeleton-loading {
    0% {
        background-color: white;
    }
    100% {
        background-color: lightgray;
    }
}
.skeleton-text {
    color: transparent !important;
    animation: skeleton-loading 1s linear infinite alternate;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

#menuHeader > div {
    position: relative;
    height: 50px;
    overflow: hidden;
    transition: var(--animated-theme-transition);
}

#menuHeader hr {
    height: 3px;
    background-color: var(--navigator-scroll-bar-color, inherit);
    transition: var(--animated-theme-transition);
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0px;
    padding: 0;
    z-index: 2;
}

#menuHeader a#menuCustom {
    padding-left: 10px;
}
#menuHeader a#menuCustom:has(img) {
    padding-left: 0px;
}
#menuHeader #menuCustom > img {
    vertical-align: middle;
    max-height: 40px;
    max-width: 100%;
}

#menuScroll {
    position: absolute;
    margin: auto;
    transition: position 0.2s, left 0.2s;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: hidden;
}

#menuScroll::-webkit-scrollbar,
#menuScroll > li::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
    display: none;
}

#menuScroll > li {
    display: inline-block;
    position: relative;
    line-height: 49px;
    padding: 0 5px;
    overflow: hidden;
    cursor: pointer;
}

#menuScroll * {
    padding: 10px;
}

/* BODY */
#menuBody {
    width: 100%;   
    flex: 1; 
    overflow: auto;
    position: relative;
    margin-top: 0px;
}

#menuBody .secondRow {
    margin-top: 8px;
}

#menuBody section {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}

#menuBody section > * {
    padding: 10px;
}

.flexCentered {
    display: flex;
    flex-direction: column;    
    align-items: center;
    justify-content: center;    
}

#menuBody section .category {
    background-color: var(--category-background-color, inherit);
    transition: var(--animated-theme-transition);
    position: relative;
    padding: 10px 16px;
}

#menuBody section .category .categoryName {
    font-family: var(--category-title-font-family, inherit);    
    font-size: var(--category-title-font-size, inherit);    
    color: var(--category-title-font-color, inherit);    
    transition: var(--animated-theme-transition);
}

#menuBody section .category .categoryName span {
    font-weight: 700;
    letter-spacing: 0.5px;
}

#menuBody section .category .categoryName:has(+ .categoryDescription:empty) {
    min-height: 21px;
}

#menuBody section .category .categoryDescription:empty {
    display: none;
}

#menuBody section .category .categoryDescription {
    margin-top: 2px;
    font-family: var(--category-description-font-family, inherit);    
    font-size: var(--category-description-font-size, inherit);    
    color: var(--category-description-font-color, inherit);    
    transition: var(--animated-theme-transition);
}

#menuBody section .menuItem {
    position: relative;
    cursor: pointer;
}

#sectionContainer > section.hidden,
#menuScroll > li.hidden,
#menuBody .menuItemCommon.menuItem.hidden {
    display: none;
}

#sectionContainer > section.hidden > div.category::before,
#menuScroll > li.hidden::before,
.menuItem.hidden::before,
#sectionContainer > section.hidden > div.menuItem::before,
.menuItem.unavailable::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

#menuBody #sectionContainer {
    border-top: 1px solid var(--general-border-color, inherit);
}
#menuBody #sectionContainer section > div:first-child {
    margin-top: 1px; 
}
#menuBody #sectionContainer section .menuItem,
#menuBody #sectionContainer section .category {
    margin: 8px 0;
    outline: 1px solid var(--general-border-color, inherit);
}
#menuBody #sectionContainer,
#menuBody #sectionContainer section .menuItem,
#menuBody #sectionContainer section .category {
    transition: var(--animated-theme-transition);
}

#menuBody .firstRow {
    display: flex;
    align-items: center;
}

#menuBody .descAndTitle {
    flex-grow: 1;
    overflow: hidden;
    line-height: normal;
}

#menuBody .descAndTitle p {
    margin-top: 5px;
    white-space: initial;
}
#menuBody .menuItemCommon h4 {
    display: inline;
    font-weight: bold;
    overflow: hidden;
}
#menuBody .menuItem h4 {
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}
#menuBody .menuItemCommon {
    background-color: var(--item-background-color, inherit);
    transition: var(--animated-theme-transition);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 12px;
    display: flex;
    flex-direction: column;
}
#menuBody .menuItemCommon .title {
    font-family: var(--item-title-font-family, inherit);    
    font-size: var(--item-title-font-size, inherit);    
    color: var(--item-title-font-color, inherit);    
    transition: var(--animated-theme-transition);
}
#menuBody .menuItemCommon .description {
    font-family: var(--item-description-font-family, inherit);    
    font-size: var(--item-description-font-size, inherit);    
    color: var(--item-description-font-color, inherit);    
    transition: var(--animated-theme-transition);
    white-space: pre-wrap;
    width: fit-content;    
    margin-top: 8px;
    line-height: 1.4;
}
#menuBody .imageContainer {
    width: 120px;
    height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex-shrink: 0;
    border-radius: 8px;
    margin-right: 12px;
}
#menuBody .imageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;    
}

.labelledPrice {
    display: inline-block;
}
.labelledPrice:not(:last-child)::after {
    content: '|';
    margin-left: 5px;
    margin-right: 5px;
}
.labelledPrice span:only-child,
.labelledPrice span:nth-child(2) {
    font-weight: 700;
}
.labelledPrice span:not(:only-child):nth-child(2)::before {
    content: ':';
    margin-left: 0px;
    margin-right: 4px;
}

#menuBody .menuItemCommon .price {
    font-family: var(--item-price-font-family, inherit);    
    font-size: var(--item-price-font-size, inherit);    
    color: var(--item-price-font-color, inherit);   
    transition: var(--animated-theme-transition);
    line-height: normal;
    text-align: right;
    overflow: hidden;    
    text-overflow: ellipsis;
}

#menuBody .title {
    display: flex;
    align-items: center;
    line-height: initial;
}

#menuBody .title .titleRightContainer {
    margin-left: auto;
    height: 24px;
}

.menuItemPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 101;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
    border-radius: 1em;
    width: 90vw;
    max-width: 500px;    
    display: none; /* making it hidden by default */
    cursor: pointer;
    overflow: auto;
    max-height: 100%;
    line-height: normal;
}
#menuBody .menuItemCommon.menuItemPopup {
    padding: 0;
}
.menuItemBigImage {
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    background-color: var(--general-background-color, inherit);
    transition: var(--animated-theme-transition);
}
.menuItemPopup .menuItemPopupTextContent {
    padding: 20px;
}
.menuItemPopup .menuItemPopupTextContent .svgHeartContainer {
    display: none;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
      background-color: rgba(128,128,128,0.5); /* color */
    z-index: 91;
      display: none; /* making it hidden by default */
}
.modal-overlay.menuItemPopupOverlay {
    z-index: 100;
    cursor: pointer;
}

.svgHeartContainer {
    width: 24px;
    min-width: 24px;
    cursor: pointer;
}
.svgHeartContainer::after {
  transform: translate(-25%, -25%);
  width: 48px;
  height: 48px;
  content: "";
  position: absolute;
}
.svgHeartContainer.heart-o .heart-o, 
.svgHeartContainer.heart .heart {
    opacity: 1;
}
.svgHeartContainer.heart-o .heart, 
.svgHeartContainer.heart .heart-o {
    opacity: 0;
}
.svgHeartContainer > svg {
    position: absolute;    
    vertical-align: middle;    
    width: 24px;
    height: 24px;
    fill: var(--general-heart-color);
    transition: fill 0.5s, opacity 0.5s;
}

#preloader {
    color: rgb(50, 222, 132);
    padding: 1px; /*used to know when ready*/
}
#menuFooters {
    text-align: center;
    word-wrap: break-word;
}
#menuFooters .footer:first-child {
    padding-top: 10px;
    padding-bottom: 5px;
}
#menuFooters .footer:last-child {
    padding-top: 5px;
    padding-bottom: 10px;
}
#menuFooters .footer:only-child {
    padding-top: 10px;
    padding-bottom: 10px;
}
#menuFooters .footer {
    padding-left: 10px;
    padding-right: 10px;
    transition: var(--animated-theme-transition);
}
#menuFooters #footer1,
#menuFooters #footer1 a {
    font-family: var(--footer-line1-font-family, inherit);    
    font-size: var(--footer-line1-font-size, inherit);    
    color: var(--footer-line1-font-color, inherit);   
}
#menuFooters #footer2,
#menuFooters #footer2 a {
    font-family: var(--footer-line2-font-family, inherit);    
    font-size: var(--footer-line2-font-size, inherit);    
    color: var(--footer-line2-font-color, inherit);   
}

/* <toast> */
#pressBackAgainToExit {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 30px;
    text-align: center;
    transform: translateX(-50%);
    width: 100%;    
    z-index: 3;
}
#pressBackAgainToExit > div {
    background-color: #000000bf;
    color: rgb(255, 255, 255);
    border-radius: 50px;
    padding: 15px;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
    max-width: 90%;
    box-sizing: border-box;
}
/* </toast> */

/* Themes */
html.animated-theme {
    --animated-theme-transition: background-color 0.5s, color 0.5s, font 0.5s, border 0.5s;
}
html.theme-default {
    --general-font-family: "Lato", sans-serif;
    --general-font-size: 14px;
    --general-font-color: inherit;
    --general-border-color: #d3d3d3a1;
    --general-background-color: #fdfcfc;
    --general-heart-color: red;
    --topbar-background-color: lightcyan;
    --topbar-font-family: inherit;
    --topbar-font-size: inherit;
    --topbar-font-color: inherit;
    --navigator-background-color: lightcyan;
    --navigator-font-family: "Lato", sans-serif;
    --navigator-font-size: 15px;
    --navigator-font-color: inherit;
    --navigator-active-category-color: red;
    --navigator-scroll-bar-color: red;
    --category-background-color: azure;
    --category-title-font-family: "Lato", sans-serif;
    --category-title-font-size: 18px;
    --category-title-font-color: #00695c;
    --category-description-font-family: inherit;
    --category-description-font-size: 14px;
    --category-description-font-color: #00695c;
    --item-background-color: white;
    --item-title-font-family: inherit;
    --item-title-font-size: 16px;
    --item-title-font-color: #333;
    --item-description-font-family: inherit;
    --item-description-font-size: inherit;
    --item-description-font-color: inherit;
    --item-price-font-family: inherit;
    --item-price-font-size: inherit;
    --item-price-font-color: #e91e63;
    --footer-line1-font-family: inherit;
    --footer-line1-font-size: small;
    --footer-line1-font-color: grey;
    --footer-line2-font-family: inherit;
    --footer-line2-font-size: 11px;
    --footer-line2-font-color: grey;
}
html.theme-brown {
    --general-font-family: "Lato", sans-serif;
    --general-font-size: 14px;
    --general-font-color: #6c4a4a;
    --general-border-color: #6c4a4a;
    --general-background-color: #f3f4f6;
    --general-heart-color: #ff5a60;
    --topbar-background-color: #6c4a4a;
    --topbar-font-family: inherit;
    --topbar-font-size: inherit;
    --topbar-font-color: white;
    --navigator-background-color: #6c4a4a;
    --navigator-font-family: "Lato", sans-serif;
    --navigator-font-size: 15px;
    --navigator-font-color: white;
    --navigator-active-category-color: #ff5a60;
    --navigator-scroll-bar-color: #ff5a60;
    --category-background-color: #6c4a4acc;
    --category-title-font-family: inherit;
    --category-title-font-size: 18px;
    --category-title-font-color: white;
    --category-description-font-family: inherit;
    --category-description-font-size: 14px;
    --category-description-font-color: white;
    --item-background-color: #f3f4f6;
    --item-title-font-family: inherit;
    --item-title-font-size: 16px;
    --item-title-font-color: inherit;
    --item-description-font-family: inherit;
    --item-description-font-size: inherit;
    --item-description-font-color: inherit;
    --item-price-font-family: inherit;
    --item-price-font-size: inherit;
    --item-price-font-color: inherit;
    --footer-line1-font-family: inherit;
    --footer-line1-font-size: small;
    --footer-line1-font-color: inherit;
    --footer-line2-font-family: inherit;
    --footer-line2-font-size: 11px;
    --footer-line2-font-color: inherit;
}
html.theme-white-orange {
    --general-font-family: "Lato", sans-serif;
    --general-font-size: 14px;
    --general-font-color: #4a301a;
    --general-border-color: #f2eee8;
    --general-background-color: white;
    --general-heart-color: #e35e0e;
    --topbar-background-color: white;
    --topbar-font-family: inherit;
    --topbar-font-size: inherit;
    --topbar-font-color: inherit;
    --navigator-background-color: white;
    --navigator-font-family: "Lato", sans-serif;
    --navigator-font-size: 15px;
    --navigator-font-color: inherit;
    --navigator-active-category-color: #e35e0e;
    --navigator-scroll-bar-color: #e35e0e;
    --category-background-color: #f2eee8;
    --category-title-font-family: 'Brush Script MT', cursive;
    --category-title-font-size: 18px;
    --category-title-font-color: #e35e0e;
    --category-description-font-family: 'Brush Script MT', cursive;
    --category-description-font-size: 14px;
    --category-description-font-color: #e35e0e;
    --item-background-color: white;
    --item-title-font-family: inherit;
    --item-title-font-size: 16px;
    --item-title-font-color: #4a301a;
    --item-description-font-family: inherit;
    --item-description-font-size: inherit;
    --item-description-font-color: #4a301a80;
    --item-price-font-family: inherit;
    --item-price-font-size: inherit;
    --item-price-font-color: #e35e0e;
    --footer-line1-font-family: inherit;
    --footer-line1-font-size: small;
    --footer-line1-font-color: inherit;
    --footer-line2-font-family: inherit;
    --footer-line2-font-size: 11px;
    --footer-line2-font-color: inherit;
}
html.theme-pinkish {
    --general-font-family: "Tahoma", sans-serif;
    --general-font-size: 14px;
    --general-font-color: #787c8c;
    --general-border-color: #fbf5f1;
    --general-background-color: #fbf5f1;
    --general-heart-color: #8fac6d;
    --topbar-background-color: #f6e7de;
    --topbar-font-family: inherit;
    --topbar-font-size: inherit;
    --topbar-font-color: #6c7c5a;
    --navigator-background-color: #f6e7de;
    --navigator-font-family: "Lato", sans-serif;
    --navigator-font-size: 15px;
    --navigator-font-color: #6c7c5a;
    --navigator-active-category-color: #6c7c5a;
    --navigator-scroll-bar-color: #6c7c5a;
    --category-background-color: #f6e7de8e;
    --category-title-font-family: inherit;
    --category-title-font-size: 18px;
    --category-title-font-color: #6c7c5a;
    --category-description-font-family: inherit;
    --category-description-font-size: 14px;
    --category-description-font-color: #6c7c5a;
    --item-background-color: #fbf5f1;
    --item-title-font-family: inherit;
    --item-title-font-size: 16px;
    --item-title-font-color: inherit;
    --item-description-font-family: inherit;
    --item-description-font-size: inherit;
    --item-description-font-color: inherit;
    --item-price-font-family: inherit;
    --item-price-font-size: inherit;
    --item-price-font-color: inherit;
    --footer-line1-font-family: inherit;
    --footer-line1-font-size: small;
    --footer-line1-font-color: inherit;
    --footer-line2-font-family: inherit;
    --footer-line2-font-size: 11px;
    --footer-line2-font-color: inherit;
}