/*  default css
================================================== */

:root {
    --defaultColor: #50cd89;
    --grayColor: #b5b5c3;
    --primaryColor: #009ef7;
    --dangerColor: #c82333;
    --btnColor: #009ef7;
    --whatsappBottom: 120px;
    --whatsappRight: 27px;
    --hero-bg-color: linear-gradient(to left top, #2471ee, #0066ca, #005aa6, #124d83, #1f3f60);
    --checkoutInputBackground: rgb(198 186 150 / 8%);
    --checkoutInputBorder: rgba(255, 193, 7, 0.3);
}

/* =========================================================
   A6 - SEPARATE BLACK THEME
   ---------------------------------------------------------
   The existing .theme-dark palette is intentionally untouched.
   Black is selected with the additional .theme-black body class.
========================================================= */
body.theme-dark.theme-black {
    --nav-color: #000000;
    --body-color: #101010;
    --background-color: #101010;
    --card-color: #202020;
    --card-soft: rgba(255, 255, 255, .075);
    --soft-background: rgba(255, 255, 255, .075);
    --border-color: rgba(255, 255, 255, .12);
    --box-shadow-soft: rgba(0, 0, 0, .30);
    --facil-category-background: #101010;
    --fm-sticky-glass-bg: rgba(16, 16, 16, .92);
    --fm-window-glass: rgba(16, 16, 16, .88);
    --fm-window-glass-line: rgba(255, 255, 255, .13);
    --fm-window-glass-shadow: 0 20px 55px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .10);
}

body.theme-black,
body.theme-black #item_container,
body.theme-black .footer_area {
    background-color: #101010 !important;
}

body.theme-black .customNav,
body.theme-black .customNavBar,
body.theme-black .customNav .restaurant-container,
body.theme-black .customNav .container,
body.theme-black .customNav .menuArea,
body.theme-black .fm-qr-table-status-row {
    background-color: #000000 !important;
    background-image: none !important;
}

body.theme-black .modern_item_card,
body.theme-black .grid_view .modern_item_card,
body.theme-black .list_view .modern_item_card,
body.theme-black .shopping_cart_content ul.cartItems > li {
    background: rgba(32, 32, 32, .92) !important;
    border-color: var(--fm-window-glass-line) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(110%);
    backdrop-filter: blur(18px) saturate(110%);
}

body.theme-black .modal-content,
body.theme-black #waiterModal .modal-content,
body.theme-black #facilCategoryDrawer,
body.theme-black .customNavsideBar,
body.theme-black .fm-qr-required-card,
body.theme-black .share_card_content,
body.theme-black .add-to-area,
body.theme-black #globalCategoryTimeNotice .category-time-notice-box,
body.theme-black .fm-section-time-toast,
body.theme-black .fm-quick-tutorial-tip,
body.theme-black .fm-games-shell,
body.theme-black .shopping_cart,
body.theme-black .style_2.shopping_cart,
body.theme-black .fm-global-search-sheet {
    background: var(--fm-window-glass) !important;
    color: var(--color) !important;
    border-color: var(--fm-window-glass-line) !important;
    box-shadow: var(--fm-window-glass-shadow) !important;
    -webkit-backdrop-filter: blur(24px) saturate(110%);
    backdrop-filter: blur(24px) saturate(110%);
}

body.theme-black .modal-content .modal-header,
body.theme-black .modal-content .modal-body,
body.theme-black .modal-content .modal-footer,
body.theme-black #waiterModal .modal-header,
body.theme-black #waiterModal .modal-body,
body.theme-black #waiterModal .modal-footer,
body.theme-black .customNavsideBar .topHeader,
body.theme-black .customNavsideBar .topFooter,
body.theme-black .shopping_cart .shopping_cart_content,
body.theme-black .shopping_cart .cart_heading,
body.theme-black .shopping_cart .cart_body,
body.theme-black .shopping_cart .cart_footer {
    background: transparent !important;
}

body.theme-black #itemModal.itemPopupModal .fm-product-loading-shell,
body.theme-black .fm-games-head,
body.theme-black .fm-game-card,
body.theme-black .fm-trivia-answer,
body.theme-black .fm-memory-card,
body.theme-black .fm-ttt-cell,
body.theme-black .fm-word-grid,
body.theme-black .fm-word-cell,
body.theme-black .fm-game-secondary,
body.theme-black .fm-player-mode,
body.theme-black .fm-hangman-keys button,
body.theme-black .fm-connect4,
body.theme-black .fm-c4-cell,
body.theme-black .fm-reaction-signal,
body.theme-black .fm-rps-reveal > div {
    background-color: #202020 !important;
    border-color: var(--fm-window-glass-line) !important;
}

body.theme-black .blur {
    background-color: rgba(16, 16, 16, .82) !important;
    -webkit-backdrop-filter: blur(30px) saturate(110%);
    backdrop-filter: blur(30px) saturate(110%);
}

body.theme-black #globalCategoryTimeNotice,
body.theme-black .facil-slider-gallery,
body.theme-black .fm-games-overlay,
body.theme-black .fm-qr-required-overlay,
body.theme-black .fm-global-search-backdrop {
    background: rgba(0, 0, 0, .64) !important;
    -webkit-backdrop-filter: blur(8px) saturate(105%);
    backdrop-filter: blur(8px) saturate(105%);
}

body.theme-black .view_switcher_wrapper.facil-category-fixed,
body.theme-black .view_switcher_wrapper.facil-category-fixed::before,
body.theme-black .view_switcher_wrapper.facil-category-fixed::after {
    background: var(--fm-sticky-glass-bg) !important;
    -webkit-backdrop-filter: blur(20px) saturate(110%);
    backdrop-filter: blur(20px) saturate(110%);
}

/* =========================================================
   V118 - TIMED MENU AVAILABILITY NOTICE
========================================================= */
.fm-section-time-toast {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483200 !important;
    width: max-content;
    max-width: calc(100vw - 40px);
    padding: 18px 28px !important;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px !important;
    background: rgba(10, 12, 16, .92) !important;
    color: #fff !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .32);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-transform: none !important;
    white-space: pre-line;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.96) !important;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.fm-section-time-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1) !important;
    transition-delay: 0s;
}

/* =========================================================
   FACILMENUS V95 - GAMES FOLLOW THE RESTAURANT THEME
   The existing dark design remains the default. These overrides apply the
   same complete Games UI to restaurants using the light theme.
   ========================================================= */
body.theme-light .fm-games-overlay,
.light-mode .fm-games-overlay{background:rgba(225,230,236,.72)}

/* A42: the timed-menu notice must follow the restaurant theme. */
body.theme-light .fm-section-time-toast,
.light-mode .fm-section-time-toast {
    background-color: rgba(247, 250, 255, .82) !important;
    background-image: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.18)) !important;
    color: #172033 !important;
    border-color: rgba(255,255,255,.88) !important;
    text-shadow: none !important;
}

body.theme-dark .fm-section-time-toast,
body.theme-black .fm-section-time-toast {
    color: #ffffff !important;
}
body.theme-light .fm-games-shell,
.light-mode .fm-games-shell{background:#f4f6f8;color:#202a35}
body.theme-light .fm-games-head,
.light-mode .fm-games-head{background:rgba(255,255,255,.92);border-bottom-color:rgba(31,42,54,.12)}
body.theme-light .fm-games-title,
.light-mode .fm-games-title{color:#202a35!important}
body.theme-light .fm-games-close,
body.theme-light .fm-games-back,
.light-mode .fm-games-close,
.light-mode .fm-games-back{background:rgba(31,42,54,.08);color:#202a35}
body.theme-light .fm-games-intro,
.light-mode .fm-games-intro{color:#68727e}
body.theme-light .fm-games-accordion,
.light-mode .fm-games-accordion{background:#fff;border-color:rgba(31,42,54,.13);box-shadow:0 7px 20px rgba(31,42,54,.06)}
body.theme-light .fm-games-accordion-head,
.light-mode .fm-games-accordion-head{background:#fff;color:#202a35}
body.theme-light .fm-games-accordion.is-open .fm-games-accordion-head,
.light-mode .fm-games-accordion.is-open .fm-games-accordion-head{background:#f7f9fb;border-bottom-color:rgba(31,42,54,.1)}
body.theme-light .fm-games-accordion-copy strong,
.light-mode .fm-games-accordion-copy strong{color:#202a35}
body.theme-light .fm-games-accordion-copy small,
.light-mode .fm-games-accordion-copy small{color:#6e7884}
body.theme-light .fm-games-count,
.light-mode .fm-games-count{background:rgba(31,42,54,.07);color:#596471}
body.theme-light .fm-game-card,
.light-mode .fm-game-card{background:#fff;color:#202a35;border-color:rgba(31,42,54,.12);box-shadow:0 5px 15px rgba(31,42,54,.055)}
body.theme-light .fm-game-card-icon,
.light-mode .fm-game-card-icon{background:rgba(31,42,54,.065)}
body.theme-light .fm-game-card-copy strong,
.light-mode .fm-game-card-copy strong{color:#202a35}
body.theme-light .fm-game-card-copy small,
.light-mode .fm-game-card-copy small{color:#6e7884}
body.theme-light .fm-game-status,
body.theme-light .fm-trivia-progress,
body.theme-light .fm-ttt-note,
body.theme-light .fm-word-help,
body.theme-light .fm-word-message,
.light-mode .fm-game-status,
.light-mode .fm-trivia-progress,
.light-mode .fm-ttt-note,
.light-mode .fm-word-help,
.light-mode .fm-word-message{color:#65707d}
body.theme-light .fm-game-status b,
body.theme-light .fm-trivia-progress span:last-child,
body.theme-light .fm-trivia-question,
body.theme-light .fm-ttt-result,
.light-mode .fm-game-status b,
.light-mode .fm-trivia-progress span:last-child,
.light-mode .fm-trivia-question,
.light-mode .fm-ttt-result{color:#202a35}
body.theme-light .fm-memory-card,
body.theme-light .fm-ttt-cell,
body.theme-light .fm-trivia-answer,
body.theme-light .fm-word-grid,
body.theme-light .fm-word-cell,
body.theme-light .fm-hangman-keys button,
.light-mode .fm-memory-card,
.light-mode .fm-ttt-cell,
.light-mode .fm-trivia-answer,
.light-mode .fm-word-grid,
.light-mode .fm-word-cell,
.light-mode .fm-hangman-keys button{background:#fff;color:#202a35;border-color:rgba(31,42,54,.12);box-shadow:inset 0 0 0 1px rgba(31,42,54,.08)}
body.theme-light .fm-player-choice h3,
body.theme-light .fm-game-win h3,
.light-mode .fm-player-choice h3,
.light-mode .fm-game-win h3{color:#202a35!important}
body.theme-light .fm-player-choice p,
body.theme-light .fm-game-win p,
.light-mode .fm-player-choice p,
.light-mode .fm-game-win p{color:#68727e}
body.theme-light .fm-player-mode,
body.theme-light .fm-game-secondary,
.light-mode .fm-player-mode,
.light-mode .fm-game-secondary{background:#fff;color:#202a35;border-color:rgba(31,42,54,.12);box-shadow:0 5px 15px rgba(31,42,54,.06)}
body.theme-light .fm-player-mode small,
.light-mode .fm-player-mode small{color:#6e7884}
body.theme-light .fm-connect4,
body.theme-light .fm-dots-board,
.light-mode .fm-connect4,
.light-mode .fm-dots-board{background:#e7ebef}
body.theme-light .fm-c4-cell,
.light-mode .fm-c4-cell{background:#fff}
body.theme-light .fm-dot,
.light-mode .fm-dot{background:#202a35}
body.theme-light .fm-edge:before,
.light-mode .fm-edge:before{background:#aeb7c1}
body.theme-light .fm-tap-side,
body.theme-light .fm-reaction-side,
body.theme-light .fm-target-side,
body.theme-light .fm-rps-choices button,
body.theme-light .fm-rps-reveal>div,
.light-mode .fm-tap-side,
.light-mode .fm-reaction-side,
.light-mode .fm-target-side,
.light-mode .fm-rps-choices button,
.light-mode .fm-rps-reveal>div{background:#fff;color:#202a35;border-color:rgba(31,42,54,.13)}
body.theme-light .fm-battle-intro h3,
body.theme-light .fm-rps-secret h3,
body.theme-light .fm-rps-pass h3,
body.theme-light .fm-battle-timer,
body.theme-light .fm-rps-result,
.light-mode .fm-battle-intro h3,
.light-mode .fm-rps-secret h3,
.light-mode .fm-rps-pass h3,
.light-mode .fm-battle-timer,
.light-mode .fm-rps-result{color:#202a35!important}
body.theme-light .fm-battle-intro p,
body.theme-light .fm-rps-secret p,
body.theme-light .fm-rps-pass p,
body.theme-light .fm-rps-reveal small,
body.theme-light .fm-rps-reveal>strong,
.light-mode .fm-battle-intro p,
.light-mode .fm-rps-secret p,
.light-mode .fm-rps-pass p,
.light-mode .fm-rps-reveal small,
.light-mode .fm-rps-reveal>strong{color:#68727e}
body.theme-light .fm-reaction-signal,
.light-mode .fm-reaction-signal{background:#e7ebef;color:#202a35}

.theme-light {
    --nav-color: #f8f9fa;
    --body-color: #f3f5f9;
    --background-color: #f3f5f9;
    --color: #4b566b;
    --card-color: #fff;
    --box-shadow: #eee;
    --box-shadow-soft: #eee;
    --border-color: #f3f5f9;
    --soft-background: #fff;
    --card-soft: #f9f9f9;
    --after-bg-color: rgba(0, 0, 0, 0.4);
}

.theme-dark {
    --nav-color: rgba(14, 23, 39, 1);
    --body-color: #191d2b;
    --color: #c2c7d0;
    --card-color: rgb(14, 23, 39);
    --box-shadow: rgba(0, 0, 0, 0.1);
    --box-shadow-soft: #322d2d;
    --background-color: #343a40;
    --border-color: rgba(209, 213, 219, .1);
    --soft-background: rgba(255, 255, 255, .1);
    --card-soft: rgba(255, 255, 255, .1);
    --after-bg-color: rgba(0, 0, 0, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: var(--body-color) !important;
}

a {
    color: var(--color);
}

a:hover,
a:visited {
    color: var(--color);
}


h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    font-family: 'Montserrat';
}

.theme-light .contacts_area .form-control,
.theme-light .reservation_form .form-control {
    border-color: #ddd !important;
}

.mainWrapper {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    background-color: var(--body-color);
}

body {
    font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
    padding: 0;
    margin: 0;
    background: var(--body-color) !important;
}

td,
tr,
th {
    color: var(--color) !important;
    border-color: var(--border-color) !important;
}

a:hover {
    text-decoration: none;
    outline: none;
}

a:focus {
    text-decoration: none;
    outline: none;
}

button:hover {
    text-decoration: none;
    outline: none;
}

button:focus {
    text-decoration: none;
    outline: none;
}

p {
    padding: 0;
    margin: 0;
    font-weight: normal;
}

.dis_none {
    display: none;
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a,
button {
    cursor: pointer;
    outline: none;
    transition: all .3s ease-in-out !important;
}

a:hover,
button:hover {
    cursor: pointer;
    outline: none;
    transition: all .3s ease-in-out !important;
}

.pointer {
    cursor: pointer;
}

/* Remove Chrome Input Field's Unwanted Yellow Background Color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--body-color) inset !important;
    -webkit-text-fill-color: var(--color) !important;
    /* Add this */
    transition: background-color 5000s ease-in-out 0s;
    /* Prevent background color flashing */
}


.none {
    display: none !important;
}

/*  default css
================================================== */
body.light {
    color: #4b566b !important;
    background: #f3f5f9;
}

body.dark {
    color: #a4acc4;
}

.c_green,
.success {
    color: #4CAF50;
}

span.out_of_stock {
    color: tomato;
}

.btn {
    outline: none !important;
}

.btn.focus,
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.ml-9 {
    margin-left: 9px !important;
}

.alert_msg {
    padding-top: 3px;
}

.c_red,
.error {
    color: red !important;
}

.mt-20 {
    margin-top: 20px;
}

.mh-250 {
    min-height: 250px;
}

.pt-50 {
    padding-top: 50px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mr-25 {
    margin-right: 25%;
}

.card-pr-5 {
    padding-right: 5px !important;
}

.card-pl-5 {
    padding-left: 5px !important;
}

.mtb-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.section-padding-top {
    padding-top: 120px;
}

.section-padding-bottom {
    padding-bottom: 120px;
}

.mi-padding-top {
    padding-top: 80px;
}

.mi-padding-bottom {
    padding-bottom: 80px;
}

.section_wrapper {
    padding: 0 50px;
    width: 100%;
    overflow: hidden;
}

.row-reverse {
    flex-direction: row-reverse;
    ;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pt-20 {
    padding-top: 20px;
}

.min-height {
    min-height: 100vh;
}

.error_content p {
    color: #fff;
    margin-top: 5px;
}

.home_page_navbar .navbar-brand {
    color: #777;
    max-height: 48px;
    max-width: 125px;
    margin-top: -11px;
}

.contentArea.navLeft {
    padding-left: 300px;
}

.contentArea.navRight {
    padding-right: 300px;
}

.navLeft {
    left: 0;
    border-right: 1px solid #2e344e;
}

.navRight {
    right: 0;
    border-left: 1px solid #2e344e;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    flex-direction: column;
}

body.dark {
    background: #191d2b;
}

.plr {
    width: 100%;
}

.homeContent {
    color: #fff;
    padding: 50px 80px;
}

.php-pagination {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 40px;
}


/* gallery filter */
.gallery_sort {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    width: 100%;
}

ul.gallery_sort li {
    margin: 0 5px 5px;
}

ul.gallery_sort li button:focus {
    outline: none;
}

ul.gallery_sort li button.active,
ul.gallery_sort li button:hover {
    background: #29c7ac;
    color: #fff;
    transition: all .3s;
}

ul.gallery_sort li button {
    display: block;
    padding: 12px 25px;
    background: var(--soft-background);
    border: 0;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    outline: none;
    transition: all .3s;
    color: var(--color);
}

.gallery_top_menu {
    margin-bottom: 14px;
    position: relative;
}

.gallery_sort li button.active {
    position: relative;

}

.gallery_sort li button.active::before {
    left: 0;
}

.filter {
    padding: 7px;
}


/* Create four equal columns that sits next to each other */
.item {
    background-color: none;
    display: inline-block;
    margin: 0;
    width: 100%;
    cursor: pointer;
}

#masonry4 {
    column-count: 2;
    column-gap: 0px;
}

@media(min-width: 30em) {
    #masonry4 {
        column-count: 2;
        column-gap: 0px;
    }
}

@media(min-width: 40em) {
    #masonry4 {
        column-count: 2;
        column-gap: 0px;
    }
}

@media(min-width: 60em) {
    #masonry4 {
        column-count: 3;
        column-gap: 0px;
    }
}

@media(min-width: 75em) {
    #masonry4 {
        column-count: 4;
        column-gap: 0px;
    }
}

#masonry3 {
    column-count: 1;
    column-gap: 0px;
}

@media(min-width: 30em) {
    #masonry3 {
        column-count: 3;
        column-gap: 0px;
    }
}

@media(min-width: 40em) {
    #masonry3 {
        column-count: 3;
        column-gap: 0px;
    }
}

@media(min-width: 60em) {
    #masonry3 {
        column-count: 3;
        column-gap: 0px;
    }
}

@media(min-width: 75em) {
    #masonry3 {
        column-count: 3;
        column-gap: 0px;
    }
}

/*  menu btn
================================================== */


.navOpen {
    display: none;
}


/* 404 page
================================================== */
.error_page {
    background: #191d2b;
    margin: 0;
    padding: 0;
    height: 100vh;
}

.error_wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error_wrapper h4 {
    color: #fff;
    font-size: 30px;
}


/*  custom css
================================================== */

.mb-80 {
    margin-bottom: 80px;
}

.pt-80 {
    padding-top: 80px;
}

.top_header_area {
    padding-top: 150px;
}

.layout_5 {
    background-attachment: fixed !important;
}



.left_height_line {
    width: 7px;
    background: radial-gradient(circle, #00a8cc, #00afca, #00b5c6, #00bbc0, #00c0b9, #36bf9e, #5bbd81, #7cb865, #aba63e, #d48c39, #ef6d57, #f35588);
    position: absolute;
    top: 0;
    left: 108px;
    transition: .5s;
    z-index: 8;
}

ul.social_icons li a:hover {
    background: #fff;
    color: #037fff;
    transition: .5s;
}

.top_btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.top_btn a {
    display: inline-block;
    background: #194368;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 3px;
    height: 30px;
    white-space: nowrap;
    padding-top: 0;
    margin-right: 10px;
}

.hidden_text {
    display: inline-block;
    width: 0;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-align: left;
    line-height: 35px;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 10px;
    padding-left: 0;
}

.top_btn a:hover .hidden_text {
    width: 111px;
    padding-left: 5px;
}

.topMenu_bar {
    height: 53px;
    width: 50px;
    position: fixed;
    left: 11px;
    top: 20px;
    overflow: hidden;
    z-index: 10;
}

.topMenu_bar a {
    color: #fff;
    background: #191d2b;
    font-size: 25px;
    padding: 2px 10px;
    text-align: center;
    display: inline-block;
    line-height: 42px;
    padding-bottom: 0;
}

.leftMenu_bar {
    height: 100vh;
    width: 250px;
    position: fixed;
    background: #191d2b;
    display: flex;
    align-items: center;
    flex-direction: column;
    left: -260px;
    z-index: 999;
}

.hideNav {
    /*background: rgba(0,0,0,.5);*/
    position: absolute;
    top: 0;
    left: 198px;
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
    font-size: 28px;
    transition: all .3s ease-in-out;
}

.hideNav:hover {
    background: #000;
    color: #fff;
}

.leftMenu_name {
    width: 100%;
    text-align: center;
    border: 2px solid #fff;
    padding: 14px;
    margin-bottom: 16px;
}

.leftMenu_name h4 {
    color: #fff !important;
}

.menu_area {
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}

.menu_area ul a {
    color: #fff;
}

.menu_area .mainMenu ul a::before,
.menu_area .mainMenu ul a::after {
    display: none;
}

.menu_area .mainMenu ul a.active,
.menu_area .mainMenu ul a:hover {
    background: #2e344e;
}


.scroll-top {
    height: 50px;
    width: 50px;
    overflow: hidden;
    position: fixed;
    right: 25px;
    bottom: 45px;
    background: #29c7ac;
    text-align: center;
    border-radius: 100%;
    box-shadow: 0px 8px 16px 0px rgba(56, 196, 252, 0.5);
}

.scroll-top a {
    display: block;
    font-size: 29px;
    color: #fff;
    line-height: 42px;
}

.layout_5 .single-blog.cv.style_1 {
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.back.layout_5 {
    display: inline-block;
    color: #a4acc4;
    padding: 10px 30px;
    font-size: 20px;
    position: fixed;
    z-index: 99;
    background: #000;
    top: 16px;
    left: 0;
}

.appointment_schedule.layout_5 {
    margin-top: 20px;
}

.users_section_area.home {
    background: #000;
    overflow: hidden;
    height: 100vh;
}

.aboutImage {
    position: relative;
    height: 455px;
    max-width: 392px;
}

/* Style the search field */
form.example input[type=text] {
    padding: 6px;
    font-size: 17px;
    float: left;
    width: 80%;
    background: #f1f1f1;
    border: 1px solid transparent;
    outline: none;
}

/* Style the submit button */
form.example button {
    float: left;
    width: 20%;
    padding: 6px;
    background: #f1f1f1;
    color: #777;
    font-size: 17px;
    border-left: none;
    cursor: pointer;
    border: 1px solid transparent;
    outline: none;
}

form.example button:hover {
    background: #f1f1f1;
    color: #000;
}

/* Clear floats */
form.example::after {
    content: "";
    clear: both;
    display: table;
}

.right_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search_area {
    margin-right: 40px;
}

.custom_menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
}



/* start  empty area
================================================== */
.empty_area {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.empty_area code {
    background: #eee;
    padding: 1px 7px;
    box-shadow: 0 0 3px #ddd;
    margin-top: 13px;
    display: inline-block;
}

.empty_area h4 {
    margin-top: 5px;
    font-size: calc(17px + .3vw);
}


/* End  empty area
================================================== */


/*  alert custom css
================================================== */

span.reg_msg {
    text-align: left;
}

span.reg_msg .alert {
    border-radius: 0;
    padding: 5px 15px;
    position: relative;
    border: 0;
}

span.reg_msg .alert::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 7px;
    left: 0;
    top: 0;
}

span.reg_msg {
    display: none;
}

span.reg_msg .alert.alert-danger::before {
    background: #fe7171;
}

span.reg_msg .alert.alert-success::before {
    background: #2ec1ac;
}

span.reg_msg .alert.alert-info::before {
    background: #68b0ab;
}

.user_login_form,
form,
.submit_form {
    position: relative;
}

.submit_form::before {
    content: "";
    position: absolute;
    background: var(--soft-background);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 2rem;
}

.theme-dark .submit_form::before {
    background: rgb(44 37 37 / 10%);
}


span.ajax_submit {
    margin-top: 30px;
    border: solid #000 2px;
    width: 156px;
    height: 20px;
    border-radius: 7px;
    position: absolute;
    top: 17%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}

span.ajax_submit::before {
    content: '';
    position: absolute;
    width: 146px;
    height: 11px;
    top: 2px;
    left: 2px;
    background-color: #000;
    border-radius: 4px;
    animation: animation7submiting_after 2s linear infinite;
}

span.ajax_submit::after {
    content: 'Submiting...';
    position: absolute;
    width: 150px;
    color: var(--color);
    top: -28px;
    font-family: Marvel;
    font-size: 14pt;
    text-align: center;
    animation: animation7submiting 2s linear infinite;
    left: 0;
}

@keyframes animation7submiting_after {
    0% {
        width: 0%
    }

    15% {
        width: 0%
    }

    85% {
        width: 146px
    }

    100% {
        width: 146px
    }
}

@keyframes animation7submiting {
    0% {
        content: 'Submiting'
    }

    25% {
        content: 'Submiting.'
    }

    50% {
        content: 'Submiting..'
    }

    75% {
        content: 'Submiting...'
    }

    100% {
        content: 'Submiting...'
    }
}

/*   searching loader
================================================== */
.searching {
    position: relative;
    width: 100%;
    height: 20px;
}

.searching::after {
    content: 'Searching...';
    position: absolute;
    color: var(--color);
    top: 0;
    font-family: Marvel;
    font-size: 12pt;
    text-align: center;
    animation: animation7searching 2s linear infinite;
    left: 0;
}

@keyframes animation7searching {
    0% {
        content: 'Please wait, '
    }

    15% {
        content: 'Please wait, Se.'
    }

    30% {
        content: 'Please wait, Sea..'
    }

    45% {
        content: 'Please wait, Sear..'
    }

    55% {
        content: 'Please wait, Searc..'
    }

    75% {
        content: 'Please wait, Search...'
    }

    85% {
        content: 'Please wait, Searchi...'
    }

    95% {
        content: 'Please wait, Searchin...'
    }

    100% {
        content: 'Please wait, Searching...'
    }
}


.facebook {
    color: rgba(59, 89, 152, 1);
    transition: ease .5s all;
}

.instagram {
    color: rgba(251, 57, 88, 1);
    transition: ease .5s all;
}

.whatsapp {
    color: rgba(79, 206, 93, 1);
    transition: ease .5s all;
}

.linkedin {
    color: rgba(14, 118, 168, 1);
    transition: ease .5s all;
}

.phone {
    color: #16a596;
    transition: ease .5s all;
}

.twitter {
    color: rgba(0, 172, 138, 1);
    transition: ease .5s all;
}

.youtube {
    color: rgba(255, 0, 0, 1);
    transition: ease .5s all;
}

.email {
    background-image: radial-gradient(circle, #ee0a50, rgba(251, 57, 88, 1), #16a596, #a0bc00, #16a596);
    ;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: ease .5s all;
}


.facebook:hover {
    color: rgba(59, 89, 152, .5);
}

.instagram:hover {
    color: rgba(251, 57, 88, .5);
}

.whatsapp:hover {
    color: rgba(79, 206, 93, .5);
}

.linkedin:hover {
    color: rgba(14, 118, 168, .5);
}

.twitter:hover {
    color: rgba(0, 172, 138, .5);
    transition: ease .5s all;
}

.youtube:hover {
    color: rgba(255, 0, 0, .5);
    transition: ease .5s all;
}

/*  seven loader
================================================== */
.reg_loader {
    position: relative;
    height: 50px;
    width: 50px;
    color: #000;
}

.seven {
    margin-top: 30px;
    border: solid #000 2px;
    width: 150px;
    height: 20px;
    border-radius: 7px;
}

.seven:before {
    content: '';
    position: absolute;
    width: 146px;
    height: 16px;
    top: 2px;
    left: 2px;
    background-color: #000;
    border-radius: 4px;
    animation: loader7AnimationBefore 2s linear infinite;
}

.seven:after {
    content: 'Loading...';
    position: absolute;
    width: 150px;
    color: #000;
    top: -28px;
    font-family: Marvel;
    font-size: 14pt;
    text-align: center;
    animation: loader7AnimationAfter 2s linear infinite;
}

@keyframes loader7AnimationBefore {
    0% {
        width: 0%
    }

    15% {
        width: 0%
    }

    85% {
        width: 146px
    }

    100% {
        width: 146px
    }
}

@keyframes loader7AnimationAfter {
    0% {
        content: 'Loading'
    }

    25% {
        content: 'Loading.'
    }

    50% {
        content: 'Loading..'
    }

    75% {
        content: 'Loading...'
    }

    100% {
        content: 'Loading...'
    }
}

/* Start user profile
================================================== */
.userMenu_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


.sectionDefault {
    position: relative;
    min-height: 100vh;
    width: 100%;

}

.userMenu {
    height: 62px;
}

.single_banner img {
    height: 120px;
    width: 120px;
    margin-right: 20px;
}

section.user_home_banner {
    min-height: 35vh;
    background: #eee;
    display: flex;
    align-items: center;
    position: relative;
}

section.user_home_banner .single_banner {
    display: flex;
    align-items: center;
    color: #fff;
    z-index: 9;
    position: relative;
    padding: 30px 0;
}

section.user_home_banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .35);
}

.userbanner_right a {
    color: #fff !important;
}

.userbanner_top {
    margin-bottom: 5px;
}

.home_social.list.style_1 ul {
    display: flex;
    align-items: center;
}

.home_social.list.style_1 ul li a {
    color: #000;
    padding: 10px 0;
    margin-right: 19px;
    padding-right: 8px;
    font-size: 17px;
}

.social_icon_section {
    margin-top: 5px;
}

.home_social.list.style_1 ul li a i {
    font-size: 18px;
}

.userbanner_bottpm a {
    color: #777;
}

p.address a {
    font-size: 17px;
    color: #000;
}


.gallery_area .portfolio_img {
    border-radius: 10px;
    box-shadow: 0 0 13px #ddd;
}

.portfolio_img {
    position: relative;
    overflow: hidden;
}


.gallery_area .grid-item {
    width: 49.111%;
    padding: 0 7.5px 0px;
    margin-top: 15px;
}


.style_2 .gallery_area .grid-item {
    width: 25%;
    padding: 0 7.5px 0px;
    margin-top: 15px;
}

.gallery_area .grid-item a {
    display: inline;
}

.portfolio_details h4 i {
    margin-left: 9px;
}

.portfolio_details h4 {
    padding: 5px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    padding-left: 11px;
    background: #fff;
}

.singleGallery_img {
    height: 200px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    width: 100%;
    transition: all .5s ease-in-out;
}

.singleGallery_img:hover img {
    transform: translate(-50%, -50%) scale(1.1);
}

.singleGallery_img img {
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.0);
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
}

.singleMenuItem {
    padding: 10px 10px;
    width: 100%;
    padding-top: 0;
}

.singleMenuItem ul {
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    justify-content: center;
}

.singleMenuItem ul li {
    display: block;
    width: 100%;
    margin-bottom: 8px;

    box-shadow: 0 0px 0px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    background: var(--soft-background);
}

.singleMenuItem ul li a {
    color: var(--color);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.homeItem_right.singleCatItem p {
    font-size: 18px;
    color: var(--color);
    font-weight: normal;
}

.homeSingle_item.singleCatItem {
    min-height: 149px;
}

.itemDetailsLeft {
    color: var(--color) !important;
}

.port_d_flex {
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.price_section {
    margin-bottom: 8px;
}

/*.port_d_flex a {
    padding: 5px 20px;
    border-radius: 5px;
    border: 1px solid #f9f9f9;
    margin: 5px;
    text-align: center;
    font-size: 18px;
    color: #777;
}*/


/* cart
================================================== */

li.cart {
    position: relative;

}

li.cart a {
    color: #777;
}

span.total_count {
    position: absolute;
    background: red;
    color: #fff;
    border-radius: 100%;
    font-size: 12px;
    min-width: 20px;
    min-height: 20px;
    text-align: center;
    right: 3px;
    top: 3px;
    font-weight: bold;
    font-family: cursive;
}

.shopping_cart {
    position: fixed;
    height: 100vh;
    right: -400px;
    width: 360px;
    z-index: 1040 !important;
    top: 0;
    transition: all .3s;
    border-left: 1px solid var(--border-color);
    background: var(--background-color);
    box-shadow: 0 4px 10px rgb(50 50 93 / 11%), 0 2px 6px rgb(0 0 0 / 8%);
}

.cart_heading {
    padding: 10px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--background-color);
    margin-bottom: 8px;
}

.right_cart a {
    color: red;
    padding: 5px;
}

/* cart */
.single_item_cart {
    display: flex;
    justify-content: space-between;
}

.left_cart {
    display: flex;
    align-items: center;
}

.single_item_cart img {
    height: 50px;
    width: 70px;
    margin-right: 10px;
    flex: 0 0 70px;
}

.navCart {
    display: inline-block;
}

span.extrasTitleCard {
    font-size: 11px;
    word-break: break-word;
    font-weight: 500;
}

.shopping_cart_content ul li {
    background: var(--soft-background);
    padding: 5px;
    margin-bottom: 10px;
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%) !important;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    color: var(--color);
}

i.fa.fa-circle.veg_type {
    font-size: 12px;
    border: 1px solid;
    height: 15px;
    width: 15px;
    border-radius: 0;
    text-align: center;
    line-height: 13px;
    margin-left: 4px;
}

.veg_type.c_green {
    border-color: green;
}

.veg_type.c_red {
    border-color: red;
}

.item_title_area {
    display: flex;
    justify-content: space-between;
    padding: 0 3px 8px 10px;
}

.item_modal {
    padding: 0;
    background: var(--background-color) !important;
    color: var(--color);
}

.modal-header {
    background: var(--background-color) !important;
}

.single_item_details {
    padding: 10px;
}

.item_extra_details {
    padding: 10px;
}


span.left_bold {
    font-weight: bold;
    margin-right: 7px;
}

.item_extra_list {
    margin-top: 15px;
}



span.cartItemList {
    position: relative;
    height: 31px;
    width: 48px;
}

span.cartItemList a {
    color: #777;
}

span.cartItemList .total_count {
    top: -9px;
    right: 0px;
}

.cart.CartIcon {
    position: fixed;
    right: 60px;
    bottom: -200px;
    border-radius: 100%;
    height: 45px;
    width: 45px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s ease-in-out;
    z-index: 999;
    background: #fff;
    box-shadow: 0 4px 10px rgb(50 50 93 / 11%), 0 2px 6px rgb(0 0 0 / 8%);

}

.CartIcon.active {
    bottom: 200px;
}

.cart.CartIcon a {
    color: #000;
    text-align: center;
}

.cart.CartIcon a i {
    font-size: 28px;
    position: absolute;
    left: 50%;
    top: 63%;
    transform: translate(-50%, -50%);
}

.top_cart_order {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    height: 82dvh;
    overflow-y: auto;
}

.top_cart_order ul {
    width: 100%;
    overflow: auto;
    padding-bottom: 62px;
}

.bottom_cart_order {
    width: 100%;
    position: relative;
    clear: both;
    background: #fff;
    padding: 15px 0;
    padding: 0 10px;
}

.order-btn {
    display: block;
    border-radius: 0;
    color: #fff !important;

}

.single_cart_item_details h4 {
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-weight: bold;
    opacity: 1;
    color: var(--color);
}

.sub_total_list {
    text-align: center;
    padding: 5px 0 10px 0;
}

.sub_total_list h4 {
    font-size: calc(14px + .1vw);
    color: #333;
}

.total_sum {
    padding: 5px 0 17px 0;
    border-top: 1px dashed var(--border-color);
}

.successMsg {
    text-align: center;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.successMsg.deactiveorderQr {
    min-height: 400px;
}

.h-25px {
    height: 25px;
}

.confirmMsgArea {
    margin-bottom: 13px;
}

.custom_btn {
    padding: 8px 37px;
}

/* incress / decress
================================================== */

.incress_area {
    display: flex;
    align-items: center;
    width: 106px;
}

.incress_area i {
    color: red;
}

span.in_stock {
    color: #4CAF50;
}

.value-button {
    border: 1px solid #ddd;
    padding: 2px 7px;
    font-size: 12px;
    cursor: pointer;
}

span.cart_qty_field input {
    width: 36px;
    height: 24px;
    border: 1px solid #ddd;
    border-right-color: transparent;
    border-left-color: transparent;
    text-align: center;
    background: #e5e7f7;
}

span.cart_qty_field input[type=number]::-webkit-inner-spin-button,
span.cart_qty_field input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.value-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.qty:focus {
    border-color: transparent;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.order_qty {
    display: flex;
    align-items: center;
    margin: 3px 0;
}

.order_qty>span {
    margin-right: 10px;
}

.order_list img {
    height: 75px;
    width: 120px;
    background: #fff;
    flex: 0 2 120px;
    border-radius: 5px;
}

.single_item_cart.order_list {
    margin-bottom: 15px;
}

.order_input_area input,
.order_input_area select {
    height: 45px !important;
    border-radius: 0;
}

.upperSum {
    margin-bottom: 5px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 5px;
    display: block;
}

/* incress / decress
================================================== */

.singlePackage_img {
    width: 150px;
    height: 80px;
    margin-right: 12px;
}

.single_package_items {
    display: flex;
    margin-bottom: 16px;
}

.singleItemDetails h4 {
    font-size: calc(15px + .2vw);
    font-weight: 400;
}

.accordion_content.item {
    background: var(--card-color);
    color: #4b566b;
    padding: 10px 15px 10px;
    border: 0px solid var(--border-color);
    font-size: 14px;
    display: none;
    overflow: hidden;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0.3rem 1.525rem -0.375rem var(--box-shadow) !important;
}

span.price_discount {
    color: #fe696a;
    text-decoration: line-through;
    margin-left: 15px;
}

h4.package_price {
    font-size: 13px;
    color: #4e54c8;
    font-weight: 600;
}

h4.package_price span.bg-round {
    background: var(--soft-background);
    display: inline-block;
    border-radius: 15px;
    padding: 6px 13px;
}

.package_header_left {
    display: flex;
    align-items: center;
    color: var(--color);
}

.package_header_right.text-center a {
    background: transparent;
    color: var(--color);
    border-radius: 0;
    transition: all .3s ease-in-out;

}

.package_header_right.text-center a:hover {
    color: #fff;
}

.accordion_content.item.block {
    display: block;
}

.packageSection {
    padding-bottom: 30px;
}

.homeSingle_item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.homeSingleImg {
    width: 150px;
    height: 117px;
}

.singleCategoryHeader {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 11px;
}

.homeView .homeSingle_item {
    margin-bottom: 15px;
}

.homeSingleImg {
    margin-right: 20px;
}


.port_d_flex.home_view a {
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid rgb(41 199 172 / 50%);
    margin: 4px;
    text-align: center;
    font-size: 13px;
    color: #29c7ac;
    transition: all .3s ease-in-out;
    box-shadow: none;
}




.port_d_flex.home_view a:hover {
    background: #29c7ac;
    color: #fff;
    border-color: transparent;
}

.homeView {
    margin-bottom: 30px;
}

.homeSingleImg img {
    object-position: top center;
}

.homeItemDetails.list_view {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.defaultHeading {
    padding: 50px 0;
    color: var(--color);
    position: relative;
}

.defaultHeading h1 {
    position: relative;
    display: inline-block;
    padding-bottom: 13px;
    text-transform: uppercase;
    font-size: calc(20px + .7vw);
}

.defaultHeading h1::before {
    content: "";
    position: absolute;
    background: rgba(3, 127, 255, .3);
    width: 100%;
    height: 1px !important;
    bottom: 1px !important;
    border-radius: 15px;
}

.defaultHeading h1::after {
    content: "";
    position: absolute;
    background: #037fff;
    width: 40%;
    height: 3px !important;
    bottom: 0;
    left: 0;
    border-radius: 15px;
}

.homeItemPcakage {
    background: var(--background-color) !important;
    padding-bottom: 70px;
}

.text-center.seeMore_btn a {
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 7px 25px;
    display: inline-block;
    transition: all .5s ease-in-out !important;
}

.text-center.seeMore_btn a:hover {
    background: #29c7ac;
    color: #fff;

}

.datepicker {
    z-index: 1151 !important;
}

.homeSingle_item {
    background: var(--soft-background);
    box-shadow: 0 0.3rem 1.525rem -0.375rem var(--box-shadow) !important;
    padding: 15px;
    min-height: 185px;
    border-radius: 1rem;
    transition: all .5s ease-in-out;
}

.homeSingle_item:hover {
    box-shadow: 0 0 5px var(--box-shadow-soft);
}

.theme_2 .homeSingle_item {
    min-height: 117px;
}

.theme_3 .homeSingle_item {
    border-radius: .5rem;
}

.menu-img {
    --bgImage: 75px;
    margin-right: 20px;
    width: var(--bgImage);
    height: var(--bgImage);
    border-radius: 50%;
    flex: 0 0 var(--bgImage);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.img {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.singleHome_item {
    background: var(--body-color) !important;
    padding-bottom: 50px;
}

.homeItemDetails.list_view {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.homeItemDetails.list_view.is_size_0 {
    flex-direction: row;
}

p.mb-4.is_size_0 {
    display: none;
    font-size: 14px;
    color: #4e54c8;
    font-weight: 600;

}

.homeItem_right p {
    font-size: 14px;
    color: #4e54c8;
    font-weight: 600;
}

.homeItem_left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 112px;
    height: 100%;
}

.topTitle h4 {
    font-size: calc(13px + .2vw);
    font-weight: 400;
    display: flex;
    align-items: center;
}

.topTitle h4 i {
    margin-left: 10px;
}

.order-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
}

.order-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
}

.w-50p .img,
.w-50p .text {
    width: 50%;
    padding: 5% 4% 8px;
}

.homeSinglePackage {
    display: flex;
    width: 100% !important;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.w-50 .text {
    background: #fff;
    border-radius: 6px 0px 0px 6px;
}

.homeItemPcakage.Packages {
    background: var(--background-color) !important;
}

.package_heading {
    color: var(--color);
    text-align: center;
    font-size: calc(15px + .3vw);
    font-weight: 400;
    position: relative;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
}

.text.order-first p {
    font-size: 15px;
    padding: 5px 0;
}

.homeSingle_packages {
    display: flex;
    padding: 12px 0;
    margin-bottom: 8px;
}

.singleItemDetails.homePackages {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 10px;
}

.topPackageItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 10px;
}



.singlePackage_wrapper {
    background: var(--card-color);
    margin-bottom: 20px;
}

.homePackage_details {
    border: 0px solid var(--border-color);
    padding: 10px;
    border-top: 0;
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%) !important;
    border-radius: 6px;
}

.package_title {
    padding: 10px;
    background: var(--card-color) !important;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    border-radius: 6px 6px 0px 0px;
}

.package_title h4 {
    font-size: calc(14px + .3vw);
}

.btn {
    color: #fff;
}

.btn.bg-white {
    color: var(--color);
}

span.home_package_price {
    font-size: calc(13px + .15vw);
    color: #4e54c8;
    font-weight: 600;
}

.lineTitle {
    position: relative;
}

.lineTitle::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 68%;
    width: 100%;
    height: 1px;
    background-color: #777;
    transform: translateY(28%);
}

.topPackageItem.lineTitle h4 {
    font-size: calc(15px + .2vw);
    background: var(--card-color);
    z-index: 1;
    padding-right: 11px;
    font-weight: 400;
}

.topPackageItem.lineTitle p {
    background: var(--card-color);
    z-index: 1;
    padding-left: 11px;
    color: #4e54c8;
    font-weight: 600;
}

.homeBanner_Service ul {
    display: flex;
    text-align: center;
    width: 100%;
    justify-content: space-between;
}

.homeBanner_btn {
    margin-top: 1px;
    color: var(--color);
}

.homeBanner_Service ul li i {
    display: block;
    font-size: 40px;
    color: #29c7ac;
}

.homeItemPcakage {
    padding-bottom: 70px;
}

a.btn.custom-btn.add_to_cart {
    color: var(--dcolor);
}

a.btn.watch_video.venobox.vbox-item {
    color: #fff;
}

.homeBanner_Service ul li p {
    font-size: 16px;
    font-family: 'Montserrat';
    font-weight: 400;
    color: var(--dcolor);
}

.homeBanner_Service ul li {
    display: block;
    width: 100%;
    border-right: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.theme-light .homeBanner_Service ul li {
    border-color: rgba(209, 213, 219, .1);
}

.homeBanner_Service ul li:nth-child(3) {
    border: 0;
}

.userHomeBanner {
    position: relative;
}

.userHomeBanner,
.homeBanner_left {
    min-height: 50vh;
}

.username {
    font-family: inherit;
    font-size: 19px;
    font-weight: 400;
}

.homeBanner_left {
    background: rgba(0, 0, 0, .4);
    padding-left: 21%;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    justify-content: space-evenly;
}

.theme-dark .homeBanner_left {
    background: rgba(0, 0, 0, .4);
}

.homeBanner_Service {
    width: 100%;
    margin-top: 25px;
}

.homeBanner_left h1 {
    text-align: left;
    font-size: calc(18px + 1.2vw);
}

.home-book-btn {
    display: inline-block;
    background-color: #e22104;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 15px;
    padding: 9px 25px;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.btn-shadow {
    box-shadow: -5px 8px 20px 0 rgb(229 16 2 / 15%);
}

.home-book-btn:hover {
    background-color: red;
    color: #fff;
}

.watch_video_i {
    font-size: 22px;
    margin-right: 10px;
}

.userHome_social {
    position: fixed;
    top: 18%;
    left: 25px;
}

.userHome_social ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userHome_social ul li a {
    display: block;
    padding: 10px;
    font-size: 25px;
    color: #777;
    transition: all .5s ease-in-out;
}

.userHome_social ul li a:hover {
    color: #29c7ac;
}

.itemPrice_area {
    display: flex;
    align-items: center;
    margin: 5px 0;
    flex-wrap: wrap;
}

.itemPrice {
    display: inline-block;
    border: 1px solid #29c7ac;
    margin-right: 3px;
}

p.smallItem_size {
    background: #29c7ac;
    color: #fff;
    border-bottom: 1px solid #ddd;
}

.itemPrice p {
    padding: 4px 10px;
    text-align: center;
    font-size: 13px;
}

.topTitle {
    padding-bottom: 2px;
}

.details_price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

label.btn.btn-sizes {
    border: 1px solid #29c7ac;
    padding: 7px 26px;
    transition: all .3s ease-in-out;
    margin: 1px;
    margin-bottom: 5px;
    border-radius: 0;
}

label.btn.btn-sizes:hover,
label.btn.btn-sizes.active {
    background: #29c7ac;
    color: #fff;
}

p.capital.allergen {
    font-size: 14px;
}

h5.priceTag {
    padding-top: 8px;
    padding-bottom: 5px;
    color: #4e54c8;
    font-size: 19px;
    font-weight: 600;
}

.btn.hidden {
    display: none !important;
}

.total_sum h4 {
    font-weight: 600;
    font-family: 'Open Sans';
    font-size: 19px;
    margin-bottom: 7px;
}

.itemPrice_area.i_small p.smallItem_size {
    background: rgba(78, 84, 200, .1) !important;
    border: 0px solid #dae1e7;
    border-radius: 4px;
    color: #4e54c8 !important;
    padding: 6px 5px;
    font-size: 11px;
    margin-bottom: 4px;
}

.itemPrice_area.i_small .itemPrice {
    border-color: transparent;
}

.ci-shadow {
    box-shadow: 0 4px 10px rgb(50 50 93 / 11%), 0 2px 6px rgb(0 0 0 / 8%);
}

h5.priceTag.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

.homePriceTag p.smallItem_size {
    background: rgba(41, 199, 172, .15) !important;
    color: rgba(41, 199, 172, 1) !important;
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
}

.single_items_img img {
    max-height: 320px;
}

.pickup_up h4 {
    font-size: 14px;
}

.cartNofify {
    display: flex;
    background: var(--background-color);
    align-items: center;
    justify-content: space-between;
    padding: 5px 30px;
    padding-right: 4px;
    border-radius: 7px;
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
}

.leftNotify {
    display: flex;
}

.cartNotify_wrapper {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: -200px;
    z-index: 90 !important;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-50%);
    opacity: 1;
}




.leftNotify p {
    font-size: 15px;
}

.rightNotify a {
    display: block;
    padding: 14px 6px;
    margin-left: 20px;
    color: red;
}

.leftNotify a {
    margin-left: 10px;
    font-size: 14px;
    line-height: 25px;
    color: tomato;
}

.UserMobileMenu {
    display: none;
}

.bg-gray {
    background: var(--card-color) !important;
}

.track_form input {
    height: 47px;
    border-radius: 0;
    background: #fff;
}

.track_order_section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-badge {
    font-weight: normal;
    padding: 5px;
}

.status-badge i {
    font-size: 16px;
    font-weight: bold;
    margin-right: 1px;
}

img.order-img {
    height: 50px;
    width: 50px;
}

.fw_normal {
    font-weight: normal;
}

a.viewItems {
    color: brown;
    font-size: 14px;
}

a.viewItems:hover {
    color: #000;
}

.d_flex_h {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-5 {
    padding: 5px !important;
}

.back_icon {
    font-size: 25px;
    color: #222;
}

.single_track_page {
    margin-top: 50px;
}

.show_menu_details {
    display: none;
}

ul.row_ul li a span {
    min-width: 91px;
    display: inline-block;
    text-align: left;
}

.userbanner_right * {
    text-shadow: 0 0 5px rgb(0 0 0 / 70%);
}

.userbanner_right i {
    text-shadow: none;
}

span.timeFormat {
    text-transform: lowercase;
}


/*  contacts
================================================== */
.contacts_area input.form-control {
    height: 45px;
}

.contacts_area .form-control {
    border-radius: 0;
}

.form_fields .form-group {
    width: 49.4%;
    display: inline-block;
}

.contact_top {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20px;
}

.single_contact_wizard {
    border: 1px solid #eee;
    padding: 5px 10px;
    text-align: center;
    min-height: 111px;
    max-height: 120px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px #ddd;
    overflow: hidden;
    transition: all .5s ease;
    width: 100%;
    text-align: center;
    justify-content: center;
    margin: 2px;
}

.single_contact_wizard a {
    color: #000;
}

.single_contact_wizard i {
    font-size: 27px;
    margin-top: 12px;
    transition: all .5s ease;
}

.single_contact_wizard:hover i {
    color: #2ec1ac;
}

.single_contact_wizard:hover {
    box-shadow: 0 0 5px #2ec1ac;
}


.all_social_sites_icon ul.circle a {
    border-color: #2ec1ac;
    color: #2ec1ac;
    transition: all .5s ease;
}

.all_social_sites_icon ul.circle a:hover {
    border-color: #2ec1ac;
    background: #2ec1ac;
    color: #fff;
}

.contacts_area textarea.form-control {
    min-height: 85px;
}


.second_media ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
}

.second_media ul li {
    width: 100%;
}

.second_media ul li a {
    display: flex;
    text-align: left;
    padding: 7px 15px;
    align-items: center;
    color: #000;
}

.second_media {
    margin-top: 30px;
}

.second_media ul li a i {
    font-size: 20px;
    height: 35px;
    width: 35px;
    border: 1px solid #ddd;
    text-align: center;
    margin-right: 11px;
    line-height: 33px;
    background: #2ec1ac;
    color: #fff;
}

.theme_5 .single_contact_wizard {
    border: 0;
    box-shadow: none;
    max-height: inherit;
    min-height: auto;
}

.theme_5 .single_contact_top i {
    height: 50px;
    width: 50px;
    flex: 0 0 50px;
    background: #29c7ac;
    color: #fff;
    text-align: center;
    font-size: 25px;
    line-height: 1.9;
    border-radius: 100%;
    margin-bottom: 11px;
    margin-right: 17px;
    transition: all .5s ease-in-out;
}

.theme_5 .single_contact_wizard {
    border: 0;
    box-shadow: none;
    max-height: inherit;
    min-height: auto;
}

.theme_5 .single_contact_wizard a {
    width: 100%;
}

.theme_5 .contact_top_content {
    width: 100%;
}

.theme_5 .contact_top {
    margin-top: -27px;
    flex-direction: column;
}

.theme_5 .contact_top_content .single_contact_top {
    display: flex;
    align-items: center;
    width: 100%;
}

.theme_5 .single_contact_wizard:hover {
    box-shadow: none !important;
}

form.defaultForm input.form-control,
form.defaultForm select.form-control {
    height: 45px !important;
    border-radius: 0;
}


form.defaultForm textarea.form-control {
    min-height: 55px;
    border-radius: 0;
}

.form-control,
.form-control:visited,
.form-control:focus-visible,
.form-control:focus {
    background-color: var(--body-color) !important;
    color: var(--color) !important;
    border-color: var(--border-color) !important;
}

/* end contacts
================================================== */

/* reservation
================================================== */
.appointment_dates li {
    display: block;
    padding: 7px 10px;
    font-size: 16px;
}

.appointment_dates li i {
    font-size: 18px;
    height: 30px;
    width: 30px;
    border: 1px solid transparent;
    text-align: center;
    line-height: 28px;
    border-radius: 100%;
    margin-right: 11px;
    color: #fff;
}

.ap_info {
    color: #777 !important;
    padding-left: 18px;
}

.available i {
    background: green;
}

.not_available i {
    background: red;
}

.appointment_schedule_area {
    padding-left: 30px;
}

.limit_msg {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    color: #777;
}

.limit_msg h4 {
    font-size: calc(18px + .2vw);
    font-weight: 400;
}

.qr_link {
    height: 150px;
    width: 150px;
    margin: 10px auto 25px auto;
    display: block;
    position: relative;
}

a.qrDownloadBtn {
    position: absolute;
    bottom: -18px;
    right: 0;
    background: var(--card-color);
    padding: 1px 7px;
    display: block;
    color: green;
    font-size: 17px;
}

span.downloadMsg {
    left: 5px;
    bottom: -17px;
    font-size: 14px;
    color: green;
    font-weight: normal;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 1px 6px;
}

span.downloadMsg i {
    font-size: 18px;
    margin-right: 3px;
}

.not_found_page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invalid_text img {
    height: 80px;
    width: 80px;
    margin: 0 auto;
    text-align: center;
    display: block;
    margin-bottom: 14px;
}

.invalid_text {
    text-align: center;
}

.invalid_text h4 {
    font-size: calc(15px + .4vw);
    font-family: cursive;
    margin-bottom: 7px;
}

.invalid_text p {
    font-size: 17px;
    font-family: sans-serif;
}

.invalid_text a {
    font-size: 17px;
    background: rgba(41, 199, 172, 1);
    color: #fff;
    display: inline-block;
    padding: 10px 30px;
    margin-top: 12px;
    text-decoration: none;
    font-family: sans-serif;
}

.reg_msg.block {
    display: block !important;
}

.left_create_admin {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.price_section p {
    font-size: 13px;
}

.defaultHeading p {
    margin-top: 10px;
    margin-bottom: 10px;
}

.section_items,
.sectionDefault {
    padding-bottom: 120px;
}

.qrCode {
    width: 95px;
    border: 1px solid #eee;
    margin-bottom: 5px;
}

label.paymentItem input {
    margin-right: 5px;
    height: 32px !important;
    padding: 0;
}

.payment_method {
    display: flex;
    align-items: center;
}

label.paymentItem {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 11px;
    cursor: pointer;
    background: red;
    padding: 0 23px;
    color: #fff;
    border-radius: 7px;
}

/*  payment
================================================== */

.payment_area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
}

.payment_icon {
    height: 100px;
    width: 100px;
    margin-bottom: 9px;
}

.payment_icon.payment {
    margin: 0 auto;
}

.payment_icon img {
    height: 100%;
    width: 100%;
    border-radius: 100%;
    object-fit: scale-down;
}

.payment_details {
    padding: 10px 0;
    margin-bottom: 10px;
}

.payment_text {
    margin: 2px 0 0 0;
    font-size: 14px;
}

.payment_text i {
    color: #3b7bbf;
    margin-left: 6px;
}

.pay_now {
    padding: 10px 34px;
}

.pay_now i {
    color: green;
    margin-left: 10px;
    font-size: 19px;
}

.layout_style {
    width: 100%;
}

.payment_card .card-header {
    padding: 0;
}

.payment_nav li.nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(41, 199, 172, 1);
    width: 6px;
    bottom: 7px;
    border-radius: 5px 0 0 5px;
}

li.nav-item.active {
    position: relative;
}

li.nav-item.active a {
    color: var(--dcolor) !important;
}

.payment_nav li a {
    padding: 13px;
    border-radius: 5px;
    color: #000;
    font-weight: bold;
    height: 70px;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%);
    border: 0 !important;
    width: 175px;
    word-break: break-all;
    font-size: 14px;
}

.payment_nav li a.active {
    color: #037fff !important;
}

.payment_content.text-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 450px;
}

.stripeForm {
    width: 100%;
}

.payment_icon {
    height: 100px;
    width: 100px;
    margin-bottom: 9px;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

span.payout_img {
    height: 50px;
    width: 50px;
    position: relative;
    flex: 0 0 50px;
    background-size: cover !important;
    border-radius: 100%;
    border: 1px solid #eee;
    margin-right: 8px;
}

.payment_nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    border: 0;
    background: #f3f5f9;
    margin-bottom: 10px;
    flex-direction: row;
    margin-right: 10px;
    gap: 10px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.payment_card .card-header {
    border: 0;
}

.card.payment_card {
    border: 0;
    flex-direction: column;
}

.payment_nav li a.active {
    border: 0;
}

.payment_card .card-header {
    background: #f3f5f9;
    display: flex;
    flex-direction: row;
}

/* appointment
================================================== */


.appointment_area {
    width: 100%;
    padding: 50px;
}

.appointment_area textarea.form-control {
    height: 120px;
}

.appointment_schedule_area {
    width: 100%;
}


.appointment_dates li {
    display: block;
    padding: 7px 10px;
    font-size: 16px;
}

.appointment_dates li i {
    font-size: 18px;
    height: 30px;
    width: 30px;
    border: 1px solid transparent;
    text-align: center;
    line-height: 28px;
    border-radius: 100%;
    margin-right: 11px;
    color: #fff;
}

.ap_info {
    color: #777 !important;
}

.available i {
    background: green;
}

.not_available i {
    background: red;
}

span.required {
    color: red;
    padding-left: 5px;
}

.offline_payment {
    color: #000;
    margin-top: 12px;
    font-size: 14px;
}

.contact_with_email {
    padding: 0 0 10px 0;
    display: inline-block;
}

.contact_with_email h3 a {
    color: #777;
}

.userInfo {
    padding-bottom: 8px;
}

.payment_card_img {
    width: 274px;
    margin: 0 auto 20px;
}

.stripeForm input {
    border-radius: 0;
    height: 45px;
}

.stripeForm label {
    text-align: left;
    display: block;
}

.payment_warper {
    padding-bottom: 50px;
    background: #f3f5f9 !important;
    min-height: 580px;
}

.stripeForm .card-footer {
    background: transparent;
    border: 0;
}

ul.paymentUl {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 5rem;
}

ul.paymentUl li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 5px;
}

ul.paymentSummary {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    flex-direction: column;
    border-top: 1px dashed #ddd;
    padding: 7px 0;
}

ul.paymentSummary li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.bb-top {
    border-top: 1px dashed #ddd;
}

.pickup_area_list {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.pickup_area_list label {
    display: block;
    padding: 2px;
    background: var(--soft-background);
    margin: 2px 5px;
    padding: 3px 8px;
    font-size: 14px;
    border-radius: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}

.theme-light .pickup_area_list label {
    background: #eee;
}

.pickup_point_map {
    position: fixed;
    height: 100vh;
    width: 90%;
    right: -110%;
    top: 0;
    transition: all .3s ease-in-out;
}

.pickup_point_map.active {
    position: fixed;
    height: 100vh;
    width: 60%;
    right: 0;
    top: 0;
    z-index: 9999;
    transition: all .3s ease-in-out;

}

.single_pickup_area.active {
    background: rgba(41, 199, 172, 1) !important;
    color: #fff;
    transition: all .3s ease-in-out;
}

a.selectPoint {
    display: block;
    text-align: center;
    font-size: 15px;
    padding: 2px;
    font-weight: bold;
    color: rgba(41, 199, 172, 1);
    margin-top: 5px;
    transition: all .3s ease-in-out;
}

a.checkmap {
    color: rgba(41, 199, 172, 1);
    text-decoration: underline;
    font-size: 14px;
    margin-left: 13px;
    line-height: 26px;
    transition: all .3s ease-in-out;
}

a.closeMap {
    position: absolute;
    left: 24px;
    color: red;
    top: 12px;
    text-shadow: 0 0 5px #000;
    transition: all .3s ease-in-out;
}

.modalTime {
    font-size: 40px;
}

.d_flex_center {
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.extraUl {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: left;
}

ul.extraUl li {
    width: 48%;
    margin-bottom: 10px;
}

ul.extraUl input {
    margin-right: 4px;
}

ul.extraUl li label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

h5.extrasHeading {
    color: #777;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 550;
}

a.btn.custom-btn.seemomre {
    padding: 9px 27px;
    border-radius: 7px;
}

.fw_bold {
    font-weight: bold;
}

.package_title.sinlgeOrder {
    padding: 10px;
    background: #f9f9f9;
    box-shadow: 0 4px 5px rgb(50 50 93 / 11%), 0 2px 3px rgb(0 0 0 / 8%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}

.add_to_order {
    color: #fff;
}

.flex_btn {
    display: flex;
    align-items: center;
}

/*----------------------------------------------
pagination
----------------------------------------------*/
.ci-pagination-link {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.ci-paginationArea {
    width: 100%;
}

ul.ci-pagination {
    display: flex;
    flex-wrap: wrap;
    background: var(--card-color);
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0px 10px 15px var(--box-shadow);
    align-items: center;
}

ul.ci-pagination li a {
    color: var(--color);
}

ul.ci-pagination li {
    color: #20B2AA;
    list-style: none;
    line-height: 34px;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;

    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

ul.ci-pagination li.page-num a {
    list-style: none;
    height: 35px;
    width: 35px;
    margin: 0 3px;
    line-height: 34px;
    border-radius: 50%;
    display: block;
}

ul.ci-pagination li.prev a {
    margin: 0px 3px 0 -5px;
    padding: 0 10px;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    display: block;
}

ul.ci-pagination li.next a {
    margin: 0px -5px 0 3px;
    padding: 0 10px;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    display: block;
}

ul.ci-pagination li.dots {
    font-size: 22px;
    cursor: default;
}

ul.ci-pagination li.btn {
    padding: 0 20px;
    border-radius: 50px;
}

ul.ci-pagination li.active a {
    color: #fff;
}

ul.ci-pagination li.active a,
ul.ci-pagination li.page-num:hover a,
ul.ci-pagination li:first-child:hover a,
ul.ci-pagination li:last-child:hover a {
    color: #fff;
    background: #20B2AA;
}

ul.ci-pagination li.active a,
ul.ci-pagination li.page-num:hover a,
ul.ci-pagination li:first-child:hover a,
ul.ci-pagination li:last-child:hover a {
    color: #fff !important;
}

ul.ci-pagination li.page-first a,
ul.ci-pagination li.page-last a,
ul.ci-pagination li.next a,
ul.ci-pagination li.prev a {
    height: 35px;
    width: 35px;
    display: block;
    border-radius: 50%;
}

/*----------------------------------------------
  Pagination
----------------------------------------------*/

.categorySection {
    background: var(--body-color);
}

/*----------------------------------------------
  Search
----------------------------------------------*/
.search-box {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 40px;
    height: 40px;
    background: #fff;
}

.search-box-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5px;
    height: 47px;
    background: var(--soft-background);
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%) !important;
}

.searchBar-2 {
    width: 100%;
    position: relative;
    height: 50px;
    margin-left: 24px;
    min-width: 280px;
}

.search-txt-2 {
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
    color: var(--color);
    transition: 0.5s;
    font-size: 1rem;
    width: 250px;
}

.search-box:hover .search-txt {
    width: 180px;
    padding: 0 6px;
}

.search-box:hover .search-btn {
    background: #fff;
}

.search-txt {
    border: none;
    background: none;
    outline: none;
    padding: 0;
    color: #000;
    transition: 0.5s;
    font-size: 1rem;
    width: 0px;
}



.search-btn {
    color: #1abc9c;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.5s;
    background: transparent;
    border: 0;
    text-decoration: none;
}

.searchLi {
    background: transparent !important;
    box-shadow: none !important;
}

.searchBar {
    width: 100%;
    position: relative;
    height: 50px;
}

/*----------------------------------------------
  Search
----------------------------------------------*/

.not-found {
    height: 250px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.not-found i {
    font-size: 36px;
    margin-bottom: 10px;
}

.singleCategoryHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

a.seeMore_link {
    font-size: 14px;
    transition: all .5s ease-in-out;
    padding-right: 10px;
}

a.seeMore_link i {
    transition: all .5s ease-in-out;
}

a.seeMore_link:hover {
    margin-right: -5px;
}


/*----------------------------------------------
1.8
----------------------------------------------*/
.modal-header {
    border-top-left-radius: calc(.6rem - 1px);
    border-top-right-radius: calc(.6rem - 1px);
    background: var(--background-color) !important;
    border-bottom: 1px solid var(--border-color);
    color: var(--color);
}

.modal-content {
    background: var(--background-color) !important;
    border-color: var(--border-color);
    color: var(--color);
}

.ci-input-group {
    border-color: var(--border-color);
    background-color: var(--soft-background);
}

.order_input_area input,
.order_input_area select {
    border-radius: 4px !important;
}

.order_input_area input,
.order_input_area select {
    height: 45px !important;
}

.btn {
    outline: none !important;
}

.footer_area {
    background: var(--body-color);
    color: var(--color);
    border-top: 1px solid var(--border-color);
}

.footer_bottom {
    background: var(--nav-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

a:hover,
a:visited {
    color: var(--color);
}

.left_footer ul li a {
    color: var(--color);
}

.itemPrice.i_small.menuSize p {
    padding: 4px 9px;
    min-height: 26px;
    min-width: 26px;
}

.item_title_area {
    flex-direction: column;
}

.port_d_flex a {
    padding: 5px 20px;
    border-radius: 5px;
    border: 1px solid rgb(41 199 172 / 50%);
    margin: 5px;
    text-align: center;
    font-size: 18px;
    color: #29c7ac;
    box-shadow: none;
    background: rgb(41 199 172 / 10%);
}

.gallery_area .portfolio_img {
    border-radius: 6px;
    box-shadow: 0 0 13px #ddd;
}

.portfolio_details {
    background: var(--background-color);
}

.page_accordion_header {
    background: var(--nav-color);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    border-radius: 6px 6px 0px 0px;
}

.closeShop {
    text-align: center;
}

.closeShop i {
    font-size: 50px;
}

.loginSection .iti,
.login_form .iti {
    position: relative;
    display: block;
}

.tab-pane {
    padding-top: 18px;
}

.iti__flag {
    width: 20px;
    transform: scale(1.3);
}


/*----------------------------------------------
customer profile
----------------------------------------------*/
.topCustomerProfile {
    background: var(--soft-background);
    padding: 162px;
    position: relative;
}

.customer_profile {
    margin-top: -100px;
}


.topImg img {
    height: 100px;
    width: 100px;
    margin: 0 auto;
    display: block;
    border-radius: 100%;
}

.leftSidebar,
.serviceRightSide {
    background: var(--card-color);
    border-radius: 10px;
    box-shadow: 0 0 5px var(--box-shadow);
    padding: 10px 0 25px 0;
    color: var(--color);
}

.topInfo {
    padding: 20px;
    text-align: center;
}

.leftDetails {
    padding-top: 16px;
}

.leftDetails h4 {
    padding-bottom: 1px;
}

.leftSideDetails ul {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.leftSideDetails ul li {
    display: block;
}

.leftSideDetails ul li a {
    display: block;
    padding: 10px 20px;
    color: var(--color);
    font-size: 14px;
    border-left: 5px solid transparent;
}

.leftSideDetails ul li a i {
    margin-right: 5px;
}

.leftSideDetails ul li a:hover,
.leftSideDetails ul li.active a {
    background: rgba(74, 71, 163, .2);
    border-left: 5px solid #4A47A3;
    color: #4A47A3;
    transition: all .3s ease-in-out;
}

.serviceRightSide {
    color: var(--color);
    min-height: 65vh;
}

.input-group {
    display: flex;
    align-items: center;
}

span.input-group-addon {
    background: var(--body-color);
    padding: 8px;
}

.profleForm .form-control {
    height: 40px;
    border-radius: 4px;
}

.profleForm form {
    padding: 20px;
}

h4.header {
    border-bottom: 1px solid var(--border-color);
    padding: 12px 20px 18px 20px;
    margin-bottom: 17px;
}

.label-success {
    background: rgba(22, 199, 154, .3);
    color: rgba(22, 199, 154, 1);
}

label.label {
    font-size: 14px;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 5px;
}

.table.customTable th {
    color: var(--color);
    background-color: var(--background-color);
    border-color: var(--border-color);
}

.topCustomerProfile {
    text-align: center;
}

.topCustomerProfile h4 {
    margin-top: -51px;
}

.actionBtn a {
    margin: 2px;
}

.container.container-xll {
    max-width: 1320px;
}

.priceTag {
    color: #4e54c8;
    font-weight: 600;
}


table.customTable {
    font-size: 14px;
}

table.customTable th {
    font-size: 14px;
}

table.customTable tr {
    vertical-align: middle;
}

table.customTable tr td {
    vertical-align: middle;
}

.badge {
    padding: 5px 6px;
    border-radius: 4px;
}

.orderTag {
    font-weight: 600;
    color: tomato;
}

.d-flex-center-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*----------------------------------------------
END CUSTOMER PROFILE
----------------------------------------------*/

.page-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    margin-top: 4em;
}

.action-buttons a {
    padding: 10px 21px;
    box-shadow: 0 0 5px #ddd;
}

.customerInfo h3 {
    font-size: 18px;
}

.customerInfo h2 {
    text-align: left;
    font-size: 19px;
}

.extars ul {
    list-style: inside;
    color: #777;
}

.extars ul li {
    font-size: 13px;
}

.sizeTag {
    background: rgba(22, 199, 154, .1);
    color: rgba(22, 199, 154, 1);
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 13px;
    font-weight: normal;
}


.bg-green {
    background: rgba(22, 199, 154, .1);
    color: rgba(22, 199, 154, 1);
}

.text-green {
    color: rgba(22, 199, 154, 1);
    font-weight: normal;
    padding: 5px 6px;
    font-size: 13px;
}

.b-top {
    border-top: 1px dashed #777;
    padding: 2px;
    margin-top: 2px;
}

.user_profile_img label {
    height: 180px;
    width: 180px;
    margin-bottom: 20px;
    border-radius: 100%;
    border: 3px solid #eee;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    position: relative;
}

/*----------------------------------------------
  DELIVERY ORDER AREA
----------------------------------------------*/
.singleOrder {
    background: var(--card-soft);
    margin-bottom: 10px;
    border-radius: 4px;
}

.single_orderTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 9px 11px;
    padding-top: 0;
}

.single_orderTop h4 {
    font-size: 15px;
}

.orderLists {
    margin: 10px;
}

.single_orderDetails {
    padding: 7px 11px;
}

p.timeAgo {
    font-size: 13px;
    color: #777;
    padding: 3px 11px 0;
}

.delivery-guy {
    background: var(--card-color) !important;
    color: var(--color);
}

.delivery-guy h4.header {
    border-bottom: 1px solid var(--border-color);
    padding: 5px 20px 9px 20px;
    margin-bottom: 17px;
}

.singleOrder>a {
    color: var(--color);
    width: 100%;
}

/*----------------------------------------------
DELIVERY GUY ORDER DETAILS
----------------------------------------------*/
.d_single_order_area {
    background: var(--card-color);
    margin: 10px 0;
    border-radius: 6px;
    box-shadow: 0 0 var(--box-shadow);
    position: relative;
}

.d_single_order_header {
    display: flex;
    align-items: center;
    padding: 10px;
    box-shadow: 0 0 5px var(--box-shadow-soft);
    justify-content: space-between;
}

.d_single_order_header>a {
    color: var(--color);
    padding: 0px 10px;
}

.d_single_order_header .leftBtn a {
    color: var(--color);
    padding: 0px 10px;
}

.d_single_order_header>a i {
    font-size: 28px;
    margin-right: 15px;
}

.d_single_order_header i {
    font-size: 28px;
    margin-right: 10px;
}

.d_single_order_header>h4 {
    font-size: 18px;
}

.delivery-panel {
    background: var(--soft-background);
    padding: 10px;
    margin: 15px;
    border-radius: 6px;
    box-shadow: 0 0 5px var(--box-shadow);
    margin-bottom: 16px;
}

.shopArea ul {
    display: flex;
    flex-direction: column;
    position: relative;
}

.shopArea ul>li {
    display: flex;
    align-items: end;
    margin-bottom: 25px;
    z-index: 2;
}

.shopArea ul>li>i {
    height: 40px;
    width: 40px;
    text-align: center;
    border-radius: 34%;
    font-size: 25px;
    line-height: 39px;
    margin-right: 10px;
}

.shopDetails h4 {
    font-size: 16px;
}

.shopDetails p {
    font-size: 14px;
}

.shopDetails a {
    font-size: 14px;
    display: inline-block;
    background: rgba(22, 199, 154, 1);
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    margin-top: 10px;
    transition: all .5s ease-in-out;
}

.shopDetails a:hover {
    background: rgba(22, 199, 154, .1);
    color: rgba(22, 199, 154, 1);
}

.orderItemList ul {
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.orderItemList ul>li {
    border-bottom: 1px dotted var(--border-color);
}

.d_orderDetails h5 {
    font-size: 14px;
    font-family: 'Montserrat';
}

.d_orderDetails {
    padding: 10px 0;
}

.extars ul li {
    border: 0;
}

.extars ul {
    list-style: disc;
    display: block;
    width: 100%;
    padding-left: 28px;
}

.shopArea ul::before {
    position: absolute;
    top: 0;
    left: 19px;
    bottom: 0;
    display: block;
    width: 2px;
    content: "";
    z-index: 1;
    background-image: linear-gradient(rgba(22, 199, 154, .5) 33%, rgba(22, 199, 154, .1) 0%);
    background-position: right;
    background-size: 1px 10px;
    background-repeat: repeat-y;
}

.topd_Order {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topd_Order h4 {
    font-size: 16px;
}

.bt-1-dashed {
    border-top: 1px dashed var(--border-color);
}

.deliver-footer {
    position: relative;
    bottom: 0;
    width: 100%;
    padding-bottom: 11px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.deliver-footer a {
    bottom: 5px;
    max-width: 540px;
    border-radius: 0;
}

ul.orderMenu {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    box-shadow: 0 3px 5px var(--box-shadow);
    padding-top: 0;
}



ul.orderMenu li {
    display: block;
}

ul.orderMenu li a {
    padding: 10px;
    display: block;
    font-size: 14px;
    color: var(--color);
    margin: 0 2px;
}

ul.orderMenu li a i {
    font-size: 15px;
    margin-right: 1px;
}

ul.orderMenu li a:hover,
ul.orderMenu li a.active {
    color: rgba(22, 199, 154, 1);
}

.single_orderDetails p {
    font-size: 15px;
    font-family: 'Ubuntu';
    color: var(--color);
}

.singleTab {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 120px;
    padding: 15px;
    margin-bottom: 10px;
}

.singleTab i {
    font-size: 46px;
}

.accountArea {
    padding: 0 10px;
}

.leftTab p {
    font-size: 16px;
    padding-top: 11px;
    font-family: 'Ubuntu';
}

.success-light {
    background: rgba(40, 167, 69, .15);
    color: #28a745;
    transition: all .3s ease-in-out;
    border-color: rgba(40, 167, 69, .1);
}

.bg-danger-soft {
    background: rgba(220, 53, 69, .1) !important;
    color: #dc3545 !important;
}

.default-light {
    background: rgba(106, 116, 123, .15);
    color: #6a747b;
    transition: all .3s ease-in-out;
    border-color: #777;
}

.pnt-8 {
    padding: 0 8px !important;
}

.singleOrdrebtn {
    text-align: center;
    padding: 7px 6px 15px;
    display: flex;
    flex-wrap: wrap;
}

.singleOrdrebtn a {
    margin-right: 6px;
    margin-bottom: 5px;
}

.orderDetailsBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 153px;
}

.singleOrder {
    min-height: 204px;
}

.singleOrdrebtn a {
    background: rgba(40, 167, 69, 1);
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 6px;
}

.ongoing {
    background: #dc3545 !important;
}

.orderBtn {
    background: rgba(22, 199, 154, 1);
    color: #fff;
}

.dropdown-item {
    color: var(--color);
}

.navLeftMenu ul {
    display: flex;
}

.singleOrderHeader,
.single_orderDetails {
    width: 100%;
}

.track_bullet ul li>i {
    height: 45px;
    width: 45px;
    border: 1px solid rgba(22, 199, 154, .2);
    border-radius: 100%;
    text-align: center;
    line-height: 44px;
    font-size: 32px;
    background: var(--soft-background);
    color: rgba(22, 199, 154, 1);
    z-index: 5;
    flex: 0 0 45px;
}

.track_bullet ul li.active>i {
    background: rgba(22, 199, 154, 1);
    color: #fff;
}

.track_bullet ul li.dactive>i {
    background: #dc3545;
    color: #fff;
}

.track_bullet ul li h4 {
    font-size: 15px;
    padding: 8px 0 0;
}

.track_bullet ul {
    display: flex;
    flex-direction: column;
    position: relative;
}

.track_bullet ul li {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    position: relative;

}

.single_track {
    margin-left: 15px;
}

small {}

.track_bullet ul::before {
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    display: block;
    width: 2px;
    content: "";
    z-index: 1;
    background-image: linear-gradient(rgba(22, 199, 154, .4) 33%, rgba(22, 199, 154, .1) 0%);
    background-position: right;
    background-size: 1px 9px;
    background-repeat: repeat-y;
}

.track_bullet ul li.active i::after {
    content: "";
    position: absolute;
    min-height: 150px;
    width: 3px;
    background: rgba(22, 199, 154, 1);
    left: 20px;
    top: 2px;
    z-index: -1;
}

.track_bullet ul li.dactive>i::after {
    content: "";
    position: absolute;
    min-height: 150px;
    width: 3px;
    background: #dc3545;
    left: 20px;
    top: 2px;
    z-index: -1;
}

.track_bullet ul li.active:last-child i::after {
    display: none;
}

.track_bullet ul li.dactive:last-child i::after {
    display: none;
}

.single_track p {
    font-size: 15px;
}

.d_single_order_header.track_back {
    padding-top: 10px;
    margin-top: 10px;
    background: var(--card-color);
}

.card.track-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: var(--card-color);
}

.flip-x {
    transform: scaleX(-1);
}

div#datetimepicker2 .input-group-append {
    height: 45px;
}

.show_address textarea.form-control {
    height: 47px;
}

.single_orderDetails label {
    font-weight: normal;
}

.info-light {
    background: rgba(0, 192, 239, .2);
    color: rgba(0, 192, 239, 1);
    transition: all .3s ease-in-out;
    border-color: rgba(0, 192, 239, .1);
}

.input-group-append {
    margin-left: -1px;
    height: 45px;
}

/*----------------------------------------------
V1.9
----------------------------------------------*/
.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.flex-column {
    flex-direction: column;
}

.bb_1_dashed {
    border-bottom: 1px dashed var(--border-color);
}

.bt_1_dashed {
    border-top: 1px dashed var(--border-color);
}

.w_100 {
    width: 100%;
}

.ModalCustomerInfo h4 {
    font-size: 17px;
    padding-bottom: 10px;
}

.ModalCustomerInfo {
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 15px;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

ul.paymentSummary .pleft {
    font-size: 14px;
}

ul.paymentSummary .pright {
    font-size: 14px;
    font-weight: bold;
}

li.pt-7.bb-top div {
    font-size: 17px;
}

ul.paymentUl li {
    font-size: 15px;
}

.dropdown-menu.languageDropdown a {
    padding: 5px 10px !important;
}


/*----------------------------------------------
style 2 menu
----------------------------------------------*/

.restaurant-container,
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {

    .restaurant-container,
    .container {
        max-width: 540px;
    }
}

@media (min-width: 576px) and (orientation: landscape) {

    .restaurant-container,
    .container {
        max-width: 100%;
    }
}

@media (min-width: 768px) {

    .restaurant-container,
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {

    .restaurant-container,
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

    .restaurant-container,
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1300px) {

    .restaurant-container,
    .container {
        max-width: 1300px;
    }
}

.style_2 .homeSingle_item {
    flex-direction: column;
    padding: 0;
}

.style_2 .homeSingleImg.menu-img.img {
    height: 100%;
    width: 100%;
    border-radius: 0;
    flex: inherit;
}

.style_2 .homeItemDetails.list_view {
    padding: 15px;
    padding-top: 10px;
}


.style_2 .topTitle h4 {
    /* display: flex; */
    align-items: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.theme_3 .topTitle h4 {
    /* display: flex; */
    align-items: center;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 23px;
}

.top___title {
    display: flex;
    align-items: center;
    width: 100%;
}

p.details.not_is_size {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.style_2 .port_d_flex.home_view {
    justify-content: center;
}

.style_2 .w-50 .text {
    background: #fff;
    border-radius: 6px 0px 0px 6px;
    height: 261px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.style_2 h4.package_price {
    text-align: center;
}

.homeSingle_item:hover .menu-img {
    transform: scale(1.1);
    transition: all .3s ease-in-out;
}

.style_2 .homeSingle_item,
.menu-img {
    overflow: hidden;
    transition: all .3s ease-in-out;
    position: relative;
}

.style_2 .item_images {
    height: 200px;
    overflow: hidden;
    width: 100%;
    cursor: pointer;
}

.style_2 i.fa.fa-circle.veg_type {
    font-size: 8px;
    border: 1px solid;
    height: 15px;
    width: 15px;
    flex: 0 0 15px;
    border-radius: 100%;
    text-align: center;
    line-height: 13px;
    text-align: center;
    margin-left: 5px;
}

.style_2 .single__cat__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.style_2 .cat__btn {
    background: #fff;
    border-radius: 5px;
    font-size: 18px;
    height: 47px;
    padding: 5px 25px;
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%) !important;
}

.style_2 .single__cat__header .dropdown-menu {
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%);
    border: 0;
}

.style_2 .single__cat__header .dropdown-menu a {
    display: block;
    padding: 8px 21px;
}


.style_2 .incress_area {
    background: var(--background-color);
    border-radius: 9999px;
    border: 0;
    flex-direction: column-reverse;
    justify-content: center;
    width: 30px;
    flex: 0 0 30px;
    margin-right: 8px;
}

.style_2 span.cart_qty_field input {
    width: auto;
    height: auto;
    border: 0;
    border-right-color: transparent;
    border-left-color: transparent;
    text-align: center;
    background: transparent;
}

.style_2 .incress_area {
    background: var(--background-color);
    border-radius: 9999px;
    border: 0;
    flex-direction: column-reverse;
    justify-content: center;
    width: 33px;
}

.style_2 .incress_area span {
    background: transparent;
    border: 0;
    padding: 4px;
}

.style_2 .incress_area i {
    font-size: 15px;
}

.style_2 .incress_area input {
    background: transparent;
    border: 0;
}

.style_2.shopping_cart {
    width: 380px;
}

.style_2 .incress_area * {
    color: #777 !important;
}

.style_2 .single_cart_item_details {
    width: 100%;
}

.style_2 .right_cart {
    flex: 0 0 20px;
}

.style_2 .left_cart {
    width: 100%;
}

.row.grid-item.seemore {
    width: 100% !important;
    position: absolute;
    bottom: -57px;
    top: auto !important;
}

.style_2 .homeItem_left {
    width: 100%;
}

.style_2 .homeItemDetails.list_view {
    width: 100%;
}

.style_2 .topTitle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    flex-direction: column-reverse;
}

.homeStyle_2 .homeItem_right {
    margin-bottom: 5px;
}

.homeStyle_2 .homeItem_left {
    min-height: 127px;
}

.priceGroup>span {
    font-size: 14px;
    color: #4e54c8;
    font-weight: 600;
}

.theme-dark :is(.priceGroup > span, h4.package_price, span.home_package_price) {
    color: #39ea84;
}



/*----------------------------------------------
4.2
----------------------------------------------*/
.singlePage.style_2 ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.singlePage .single_cart_item_details h4 {
    font-size: 12px;
}

.singlePage.style_2 ul li {
    margin-right: 5px;
    background: var(--soft-background);
    padding: 5px;
    border-radius: 5px;
    width: 49.111%;
    margin-bottom: 10px;
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%);
}

i.icofont-minus {
    font-size: 17px;
    padding: 9px;
}

.singlePage .style_2 .incress_area {
    flex: 0 0 20px;
    width: 20px;
}

.singlePage .single_cart_item_details p {
    font-size: 13px;
}

.singlePage .single_item_cart img {
    height: 40px;
    width: 40px;
    margin-right: 10px;
    flex: 0 0 40px;
    border-radius: 100%;
    border: 1px solid #eee;
    object-fit: cover;
}

.singlePage.style_2 .incress_area {
    flex: 0 0 29px;
    width: 29px;
}

.singlePageLogin {
    padding: 10px 0;
    border-radius: 5px;
    margin-bottom: 11px;
    margin-top: 10px;
}

.order_page {
    background: var(--card-color);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%);
}

.singlePage.style_2 .upperSum span {
    font-weight: bold;
}

.singlePage.style_2 .upperSum {
    font-size: 15px;
}

.successMsgArea.single__page__order {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;

}

.singleSuccessPage {
    background: var(--card-color);
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%);
}

i.successIcon {
    height: 55px;
    width: 55px;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0 auto;
    line-height: 57px;
}

.trackLink a {
    text-decoration: underline;
}

.confirm_btn:hover,
.add_to_cart_form:hover {
    color: #fff !important;
}

.home-book-btn {
    color: #fff !important;
}

/*----------------------------------------------
  PICKUP SLOTS
----------------------------------------------*/

.slots_area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

label.single_slots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    margin: 5px 6px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 15px;
    position: relative;
    background: rgba(40, 167, 69, .15);
    color: rgba(40, 167, 69, 1);
    transition: all .3s ease-in-out;
}

label.single_slots:hover,
label.single_slots.active {
    background: rgba(40, 167, 69, 1);
    color: #fff;
    transition: all .3s ease-in-out;
}

label.single_slots input {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}

label.single_slots:hover:before,
label.single_slots.active::before {
    opacity: 1;
    visibility: visible;
    transition: all .3s ease-in-out;
}

label.single_slots::before {
    content: '\eed6';
    font-family: 'IcoFont';
    color: green;
    position: absolute;
    right: -7px;
    top: -9px;
    font-size: 14px;
    border: 2px solid #fff;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 17px;
    border-radius: 50%;
    background: rgba(40, 167, 69, 1);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
}

/*----------------------------------------------
  PICKUP SLOTS
----------------------------------------------*/

/*----------------------------------------------
  FPX STRIPE PAYMENT
----------------------------------------------*/
.fpxArea {
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-row {
    margin-bottom: 35px;
    width: 100%;
}

.fpxArea form {
    width: 320px;
}

/*----------------------------------------------
 Rating Star Widgets Style
----------------------------------------------*/

.rating-stars ul {
    list-style-type: none;
    padding: 0;

    -moz-user-select: none;
    -webkit-user-select: none;
}

.rating-stars ul>li.star {
    display: inline-block;
    cursor: pointer;
}

/* Idle State of the stars */
.rating-stars ul>li.star>i.fa {
    font-size: 2.5em;
    /* Change the size of the stars */
    color: #ccc;
    /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul>li.star.hover>i.fa {
    color: #FFCC36;
}

/* Selected state of the stars */
.rating-stars ul>li.star.selected>i.fa {
    color: #FF912C;
}

.h_auto {
    height: auto;
}

.h-47 {
    height: 47px !important;
}

.startRating {
    display: flex;
    align-items: center;
    justify-content: center;
}

.startRating i {
    color: #EB5E0B;
    font-size: 13px;
    padding: 1px;
}

.ModalCustomerInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customerEdit a {
    color: #777;
    font-size: 17px;
    padding: 10px;
}

.ModalCustomerInfo.dis_none {
    display: none;
}

.priceCheck {
    padding: 5px 0 15px;
    color: #dc3545;
}

.priceCheck h4 {
    font-size: 16px;
}

.searchSection.welcomeSearch .searchBar-2,
.searchSection.welcomeSearch .search-txt-2 {
    width: 360px;
}

.searchSection.welcomeSearch {
    margin: 50px auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#showCatItem .homeSingle_item.singleCatItem {
    min-height: 185px;
    margin-bottom: 15px;
}

.bg_loader {
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.confirmMsgArea.payInCash {
    box-shadow: 0 0.3rem 1.525rem -0.375rem rgb(0 0 0 / 10%);
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.selectPaymentMsg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 193px;
    flex-direction: column;
    text-align: center;
}

.selectPaymentMsg h4 {
    text-transform: inherit;
    font-size: 19px;
    color: #555;
}

.selectPaymentMsg i {
    font-size: 38px;
    color: #555;
}

.payment_card .tab-pane {
    padding-top: 0;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
    height: 32px;
    padding: 5px;
}

div#google_translate_element {
    margin-top: 0px;
    position: absolute;
    top: 9px;
}

.left_create_admin .reg_msg.block {
    display: block !important;
    width: 100%;
}

div#showCatItem .homeSingle_item {
    margin-bottom: 15px;
}

/*----------------------------------------------
  VERSION 2.0
----------------------------------------------*/
.item__slider {
    max-height: 350px;
    min-height: 300px;
    width: 100%;
    padding: 0;
}

.item__slider img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.itemSlider ul.slick-dots li button {
    border: 1px solid #ddd;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    margin: 2px;
    background: #f8f8f8;
    font-size: 12px;
    outline: none;
    color: #fff;
}

ul.slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -58px;
    z-index: 9;
    position: relative;
}

.itemSlider ul.slick-dots li button {
    border: 0;
    border-radius: 0;
    height: 4px;
    width: 5px;
    margin: 2px;
    background: rgba(232, 8, 142, .5);
    font-size: 0;
    outline: none;
    color: #fff;
    flex: 0 0 5px;
}

.itemSlider ul.slick-dots li.slick-active button {
    background: rgba(232, 8, 142, 1);
}

.opacity_height_0 {
    height: 350px;
    opacity: 0;
}

.modal-dialog.load {
    min-height: 550px;
    z-index: 999;
    position: relative;
}

.b-gray {
    background: #f4f5f7;
}

.defaultForm .form-control {
    border-radius: 5px;
    height: 47px;
}

li.callwaiter a {
    background: rgba(84, 91, 98, .8);
    color: #fff;
    border-radius: 5px;
}

.reg_msg .alert-dismissible .close {
    position: absolute;
    top: -9px;
    right: -20px;
    padding: .75rem 1.25rem;
    color: inherit;
}

.homeBanner_serviceImg img {
    height: 50px;
    width: 50px;
    object-fit: cover;
}

.homeBanner_serviceImg {
    height: 50px;
}

img.logo {
    max-height: 50px;
}

.space-between {
    justify-content: space-between;
}

.bg-light-purple-soft {
    background-color: rgba(114, 57, 234, .15) !important;
    color: rgba(114, 57, 234, 1) !important;
}

.bg-warning-soft {
    background: rgba(255, 193, 7, .1) !important;
    color: rgba(255, 193, 7, 1) !important;
}

.bg-primary-soft {
    background: rgba(40, 110, 251, .1) !important;
    color: #286efb !important;
}

.bg-success-soft {
    background: rgba(40, 167, 69, .1) !important;
    color: #28a745 !important;
}

.bg-danger-soft {
    background: rgba(220, 53, 69, .1) !important;
    color: #dc3545 !important;
}

.bg-info-soft {
    background: rgba(0, 192, 239, .1) !important;
    color: rgba(0, 192, 239, 1) !important;
}

span.sizeText {
    font-size: 11px;
    font-weight: normal;
    border-radius: 4px;
}

.pay_size_top {
    margin-bottom: 6px;
}

.navbar-toggler {
    border-radius: 0;
}

.allow-sm {
    display: none;
}

ul {}

.rightMenu ul {
    display: flex;
    align-items: center;
}

.rightMenu ul li {
    position: relative;
}

.dropdownArea.dropdownList {
    position: absolute;
    z-index: 99;
    background: var(--background-color);
}

.dropdownArea.dropdownList ul {
    display: flex;
    flex-direction: column;
    min-width: 168px;
}

.dropdownArea.dropdownList ul li {
    display: block;
    width: 100%;
    text-align: center;
}

.dropdownArea.dropdownList ul li a {
    display: inline-block;
    padding: 5px;
    color: #777;
}

.dropdownMenu.sm-drop>a {
    color: #777;
    border: 1px solid #ddd;
    margin: 0 8px;
    border-radius: 5px;
}

.dropdownArea.dropdownList {
    position: fixed;
    z-index: 999999;
    background: var(--background-color);
    /* top: 63px; */
    width: 152px;
    margin-left: -25px;
}

.moreMenuBtn {
    display: none;
}

.dropdownMenu a {
    color: #777;
}

li.dropdownMenu.moreMenuBtn a {
    display: flex;
    align-items: center;
    padding: 0;
    justify-content: space-between;
}

.show_menu_details .dropdownArea.dropdownList {
    width: 100%;
    background: #ddd;
}

img.shopLogo {
    max-height: 29px;
    margin-top: -5px;
    max-width: 150px;
}

.pickupCheckDate {
    display: flex;
    align-items: center;
}

.pickupCheckDate label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.custom-radio-2 {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin: 0;
    cursor: pointer;
    transition: 0.25s ease;
}

.custom-radio-2 input[type=radio] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-radio-2 input[type=radio] {
    border: 0;
    background-color: #eee;
    height: 1.2rem !important;
    width: 1.2rem !important;
    margin: 0;
    float: none;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 50%;
    transition: 0.25s ease;
}

.custom-radio-2 input[type=radio]:checked {
    background-color: var(--defaultColor) !important;
    transition: 0.25s ease;
}

.custom-radio-2 input[type=radio]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e");
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transition: 0.25s ease;
}


.custom-radio-2 input:focus-visible,
.custom-radio-2 input:focus-visible {
    outline: 0 !important;
    border-color: transparent;
}

.custom-radio-2 input,
.custom-checkbox input {
    outline: 0 !important;
    border-color: transparent;
}

.custom-radio-2 input[type=radio].error {
    border: 1px solid red;
}

/*----------------------------------------------
           Custom checkbox
----------------------------------------------*/

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin: 0;
    cursor: pointer;
}

.custom-checkbox input[type=checkbox] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-checkbox input[type=checkbox] {
    border: 0;
    background-color: #ddd;
    height: 1.0rem !important;
    width: 1.0rem !important;
    background-size: 60% 60%;
    margin: 0;
    float: none;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 3px;
}

.custom-checkbox input[type=checkbox]:checked {
    background-color: var(--defaultColor) !important;
    ;
    border-color: var(--defaultColor) !important;
    ;
}

.custom-checkbox input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
    background-repeat: no-repeat !important;
    background-size: 60% 60% !important;
    background-position: center center !important;
}

label.custom-checkbox p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-to,
.add-to-2 {
    display: block;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

.add-to-area {
    position: fixed;
    top: 40%;
    background: var(--background-color);
    width: auto;
    text-align: center;
    padding: 10px 53px 10px 10px;
    box-shadow: 0 0 5px var(--box-shadow);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 98524;
    justify-content: space-between;
    display: flex;
    align-items: center;
    color: var(--color);
}

.add-to-area .pt-15 {
    padding-bottom: 20px;
}

.add-to-area button.btn {
    margin-top: .9rem;
    color: #fff;
}



/*----------------------------------------------
  coupon
  ----------------------------------------------*/
  .couponInput-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

.couponInput-group input {
    flex: 1;
    margin-right: 6px;
}

.couponField {
    margin-top: 4px;
    margin-bottom: 5px;
}

a.couponBtn {
    display: block;
    margin-left: 7px;
}

.couponList {
    text-align: center;
    padding: 24px 0 10px 0px;
    margin-bottom: 15px;
}

.couponList h4 {
    font-size: 17px;
}

.couponCode {
    font-weight: bold;
    font-size: 16px;
}

.user_content {
    min-height: 150px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frown {
    font-size: 40px;
    color: #222;
}

.contact_us_alert {
    margin-top: 20px;
}

.catDetails {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 25px;
}

.catDetails img {
    width: 80px;
    height: 80px;
    margin-right: 18px;
}

p.details.is_size {
    display: none;
}

.packageImg.img.menu-img {
    height: 80px;
    width: 80px;
    flex: 1 0 80px;
}

.qr_area img {
    border: 1px solid;
}

.qr_area {
    margin: 10px auto;
}

a.profile_btn {
    font-family: inherit;
}

.single_users:hover {
    background: #f8f8f8;
    transition: all .3s ease-in-out;
}

.topCategory {
    display: flex;
    flex-wrap: nowrap;
    /*    overflow-x: auto;*/
}


.catTop {
    --imgWidth: 70px;
    height: var(--imgWidth);
    width: var(--imgWidth);
    flex: 0 0 var(--imgWidth);
    object-fit: cover;
    border-radius: 100%;
    margin-bottom: 1rem;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.singleCatItem h4 {
    font-size: .95rem;
    color: var(--color);
    font-weight: bold;
    overflow: hidden;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.singleCatItem {
    margin: 5px;
    padding: 5px;
    min-height: 153px;
    width: 161px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 1.5rem;
    border: 1px solid transparent;
    transition: all .3s ease-in-out;
    background: var(--soft-background);
    box-shadow: 0 0 5px var(--box-shadow);

}

.catTop:hover {
    cursor: move;
}

.pwaContent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: left;
}

.pwaContent img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
}

.pwaContent h4 {
    font-size: 17px;
}

a.pwaClose {
    position: absolute;
    top: 2px;
    right: 6px;
    color: red;
}

.veg_type.style2 {
    position: absolute;
    right: 50%;
    bottom: 10px;
    transform: translateX(50%);
    text-shadow: 0 0 5px #fff;
}

.arrowsection a {
    color: #777;
    font-size: 18px;
    margin: 6px 2px;
    padding: 2px 7px;
    box-shadow: 0 0 5px #eee;
}

.arrowsection {
    display: flex;
    justify-content: flex-end;
}

.topCategory::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #eee;
    background-color: #F5F5F5;
}

.topCategory::-webkit-scrollbar {
    height: 6px;
    background-color: #F5F5F5;
    cursor: pointer;
}

.topCategory::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.itemPrice_area.i_small::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #eee;
    background-color: #F5F5F5;
}

.itemPrice_area.i_small::-webkit-scrollbar {
    height: 6px;
    background-color: #F5F5F5;
    cursor: pointer;
}

.itemPrice_area.i_small::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.gmapLink {
    display: flex;
    align-items: center;
    position: relative;
}

.gmapLink i {
    font-size: 23px;
    position: absolute;
    right: 0;
    cursor: pointer;
    padding: 10px;
    color: #777;
}

.couponArea {
    display: block;
    padding: 11px 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 9px;
}


.couponArea>a {
    font-size: 16px;
    font-weight: bold;
}

.loading::before {
    content: "\f110";
    font-family: FontAwesome;
    position: absolute;
    n: load8 1.1s infinite linear;
    right: 9px;
    font-size: 21px;
    top: 6px;
    z-index: 99;
    color: red;
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.showNotfoundMsg {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: red;
}

p.tax_status {
    color: #777;
    font-size: 11px !important;
}

h4.change-amount {
    font-size: 15px;
    color: tomato;
}

.newPriceLayout {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

.card-body.NewPricCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--card-color);
    border-radius: .5rem;
}

.pricing_3 .card,
.pricing_3 .princing-item {
    width: 31%;
    margin: 7px;
    background-color: var(--card-color);
    border-radius: .5rem;
}

.princing-item {
    width: 31%;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    margin-bottom: 30px;
    background-color: var(--card-color) !important;
}

.priceTopCard {
    width: 100%;
    background-color: var(--card-color);
}

.priceCardFooter {
    width: 100%;
    padding: 0 20px 20px;
}

.pickupTimeSlots.null {
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: green;
}

.callWaiterButton.sm {
    display: none;
}

.callWaiterButton {
    position: absolute;
    top: 7px;
    right: 20px;
    height: 50px;
    width: 50px;
    background: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 5px #ddd;
    font-size: 22px;
    z-index: 99;
}

.callWaiterButton i {
    color: #000;
}

@media only screen and (max-width: 600px) {
    .callWaiterButton.sm {
        display: inherit;
    }

    .cRLSYG {
        bottom: 42px !important;
    }
}


/*----------------------------------------------
          loader Green
----------------------------------------------*/
@keyframes ldio-mp4zm9ojapo {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.loader_green .ldio-mp4zm9ojapo div {
    border: 8px solid #77D970;
    border-top-color: transparent;
}

.loader_gray .ldio-mp4zm9ojapo div {
    border: 8px solid #777;
    border-top-color: transparent;
}

.ldio-mp4zm9ojapo div {
    position: absolute;
    width: 38px;
    height: 38px;
    border: 8px solid #18ff65;
    border-top-color: transparent;
    border-radius: 50%;
}

.ldio-mp4zm9ojapo div {
    animation: ldio-mp4zm9ojapo 0.78125s linear infinite;
    top: 50px;
    left: 50px
}

.loadingio-spinner-rolling-bmobyy7r0gw {
    width: 44px;
    height: 44px;
    display: inline-block;
    overflow: hidden;
    background: none;
}

.ldio-mp4zm9ojapo {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(0.44);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.ldio-mp4zm9ojapo div {
    box-sizing: content-box;
}


.pickupMsg {
    font-size: 14px;
    font-weight: normal;
    color: blueviolet;
    text-transform: inherit;
}

.null {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.roomNumbers {
    margin-top: 19px;
}

.roomNumbers label.single_slots {
    padding: 5px 19px;
}

div.eapps-widget {
    position: absolute !important;
    overflow: hidden;
}


.newBanner {
    position: relative;
}

.userHomebanner_wrapper {
    width: 100%;
}

.homeBanner_left {
    padding: 15px 0;
}

.homeBanner_left .shopLogo {
    height: auto;
}

.shopLogo {
    height: auto;
    width: auto;
}

.shopLogo.landscape {
    max-height: 100%;
    max-width: 200px;
}

.homeBanner_Service {
    width: 30%;
}

.recentDetails ul {
    display: flex;
    flex-direction: column;
}

.recentDetails ul li span:last-child {
    font-weight: bold;
    margin-right: 14px;
}

.mergeArealist {
    background: var(--background-color);
    margin-top: 10px;
    padding: 10px;
}

.previousOrderDetails {
    margin-left: 26px;
}

.startRating.orderlistRating {
    justify-content: flex-start;
}

.digitalPaymentText {
    font-size: .85rem;
    color: rgba(22, 199, 154, 1);
    padding: 1px 10px;
    border-radius: .21rem;
    box-shadow: 0 0 5px var(--box-shadow-soft);
}

.custom_fields {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.searchArea {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    margin-bottom: 5px;
}

.custom_fields select {
    width: 7rem;
}

.custom_fields select:first-child {
    margin-right: 5px;
}

.gmapLink i {
    color: rgba(22, 199, 154, 1);
}

.couponFields {
    display: flex;
    width: 100%;
    position: relative;
}

a.text-danger.couponClose {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
}

.guestLoginArea {
    border: 1px dashed var(--checkoutInputBorder);
    padding: .85rem;
    margin-bottom: 1rem;
    background: var(--checkoutInputBackground);
    border-radius: 10px;
}

.or {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    position: relative;
    gap: 8px;
    font-weight: bold;
    font-style: italic;
}

.or::before {
    content: "";
    height: 3px;
    width: 50%;
    left: 0;
    background: var(--body-color) !important;
}

.or::after {
    content: "";
    height: 3px;
    width: 50%;
    right: 0;
    background: var(--body-color) !important;
}

.pointerEvent {
    pointer-events: none;
    appearance: none;
}

/*----------------------------------------------
          tips
----------------------------------------------*/

.tipsArea {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--card-color);
}

.tipsHeader ul {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: .4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.tipsHeader ul li {
    width: 100%;
    border-right: 1px solid rgb(124 103 42 / 30%);
    background-color: rgba(255, 193, 7, 0.08);
    text-align: center;
}

.tipsHeader ul li:last-child {
    border: 0;
}

.tipsHeader * {
    font-size: .91rem;
}

.paymentTypeArea {
    display: flex;
    flex-wrap: wrap;
}

.tipsHeader button {
    padding: 2px .5rem;
    background: rgba(106, 116, 123, .7) !important;
    color: #fff;
}

.tipsHeader button:hover {
    color: #fff;
    background: rgba(106, 116, 123, 1) !important;
}

.tipsfields {
    display: flex;
    margin-top: 9px;
}

.tipsfields input {
    border-radius: 5px 0 0 5px !important;
    flex: 1;
}

.tipsfields button {
    border-radius: 0 5px 5px 0;
}

.tipsHeader ul li span {
    font-size: .85rem;
    font-weight: 500;
}

.tipsHeader ul li p {
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.tipsHeader ul li label [type="radio"] {
    display: none;
}

.tipsHeader ul li label {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    padding: 0.4rem;
    margin-bottom: 0 !important;
}

.tipsSection {
    margin: 1rem 0;
}

.tipsArea>p {
    margin-left: 5px;
    margin-bottom: 6px;
    font-weight: 500;
}

.tipsHeader ul li label:hover {
    background: rgba(106, 116, 123, .2);
    transition: all .3s ease-in-out;
}

.left_footer p.address,
.left_footer p.phone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.left_footer p.address a,
.left_footer p.phone a {
    padding: 0;
    margin: 0;
    color: #777;
    direction: ltr;
}

.checkoutBtnList {
    display: flex;
    flex-direction: column;
    align-items: normal;
    width: 100%;
}

.checkoutBtnList>label {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 500;
    flex-wrap: wrap;
}

.checkoutBtnList>label>a {
    margin: 0 5px;
}

.checkIcon {
    visibility: hidden;
    transition: all .3s ease-in-out;
}

.add-to-2:before,
.add-to:before {
    content: "";
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
    height: 100%;
    z-index: 10000;
    backdrop-filter: brightness(90%) contrast(50%) grayscale(10%) blur(5px);
    overflow-y: hidden;
    background-attachment: fixed;

}

.prevent-image .itemDetailsLeft {
    padding-left: 10px;
}


.singleCatItem.prevent-image {
    height: 70px;
    min-height: auto;
    padding: 0;
}

.packgeImages {
    width: 47%;
    aspect-ratio: 16/9;
    object-fit: scale-down;
    margin: 0 auto;
    margin-bottom: 24px;
    box-shadow: 0 0 5px;
}

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

.conflictArea h4 {
    font-size: 20px;
    margin-bottom: 12px;
}

.p-r {
    position: relative;
}

.shopGlang .gt_switcher_wrapper {
    position: fixed !important;
    bottom: 5rem !important;
    left: 2rem !important;
}

/*.gt_switcher_wrapper {
    position: absolute !important;
    margin-right: 5px;
    top: -21px !important;
}*/

.glanguageList .gt_switcher a img {
    height: 28px !important;
    width: 28px !important;
}

.glanguageList .gt_switcher a {
    font-size: 11pt !important;
}

.glanguageList .gt_switcher .gt_selected a {
    width: 125px !important;
    padding: 5px !important;
}

.glanguageList .gt_switcher {
    width: 140px !important;
}

.admin_gtranslate_wrapper .gt_switcher_wrapper {
    position: absolute !important;
    margin-right: 5px;
    top: 4px !important;
    right: initial !important;
}

/* V109: the restaurant language control now lives inside More. Undo the old
   floating-header positioning so it occupies a normal, tappable menu row. */
.customNavsideBar .fm-sidebar-language {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 4px 12px;
}

.customNavsideBar .fm-sidebar-language .gt_switcher_wrapper {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
}

.customNavsideBar .fm-sidebar-language .glanguageList,
.customNavsideBar .fm-sidebar-language .gt_switcher {
    width: 100% !important;
}

.customNavsideBar .fm-sidebar-language .gt_switcher .gt_selected a {
    width: 100% !important;
}

/* =========================================================
   V110 - COMPACT LIVE DINE-IN ORDER CARD
   Same container, radius and visual rhythm as the home slider.
========================================================= */
.dininOrderInfo {
    margin: 14px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--color) !important;
}

.dininOrderInfo > .restaurant-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.fm-dinein-order-card {
    width: 100%;
    padding: 14px 16px;
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    background: transparent;
    color: var(--color);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.theme-light .fm-dinein-order-card,
.theme-light .fm-dinein-order-card {
    border-color: transparent;
    background: transparent;
    color: #1e2937;
    box-shadow: none;
}

.fm-dinein-order-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fm-dinein-order-head h4,
.fm-dinein-order-head h5,
.fm-dinein-order-head .fm-order-status-slot {
    margin: 0 !important;
}

.fm-dinein-order-head h5 {
    color: inherit !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.fm-dinein-order-card .orderLabel {
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.fm-dinein-order-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 8px;
    color: inherit;
    font-size: 12px;
    line-height: 1.25;
}

.fm-dinein-request-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 9px 0 0 !important;
    color: inherit;
    font-size: 11px;
}

.fm-dinein-request-data .badge {
    padding: 6px 9px;
    border-radius: 999px;
}

.fm-dinein-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px !important;
}

.fm-dinein-actions .btn,
.fm-dinein-order-card #requestBtn {
    min-width: 42px;
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.fm-dinein-order-card .requestForm {
    margin-top: 12px !important;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
}

body.theme-light .fm-dinein-order-card .requestForm,
.theme-light .fm-dinein-order-card .requestForm {
    border-color: rgba(21,31,45,.10);
    background: rgba(255,255,255,.48);
}

.fm-dinein-order-card .requestForm .form-group {
    margin-bottom: 9px;
}

.fm-dinein-order-card .requestForm label {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 800;
}

.fm-dinein-order-card .requestForm .form-control {
    border-radius: 14px !important;
    background: rgba(12,17,29,.48);
    color: inherit;
}

body.theme-light .fm-dinein-order-card .requestForm .form-control,
.theme-light .fm-dinein-order-card .requestForm .form-control {
    background: rgba(255,255,255,.68);
}

/* When the order card is present, it already clears the fixed header. The
   slider only needs the same compact visual gap below the card. */
body:has(#dineinData .dininOrderInfo) .sliderSectionArea {
    margin-top: 14px !important;
}

@media only screen and (max-width: 767px) {
    .dininOrderInfo {
        margin-top: calc(4rem + 14px) !important;
    }

    .fm-dinein-order-card {
        padding: 12px 13px;
    }

    .fm-dinein-order-head h5 {
        font-size: 15px !important;
    }
}

.price_section p.details {
    font-weight: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cartFloatingIcon.menuStyle1 .navCart {
    display: none;
}

.cartFloatingIcon.menuStyle1 .navCart.active {
    display: inherit;
}

.singleItemDetails .single_item {
    padding-bottom: 10px;
}

.singleItemDetails .modal-body {
    border: 0;
}

.singleItemDetails .modal-footer {
    border: 0;
    background: #f4f5f7;
    margin-top: 15px;
}

.singleItemDetails {
    margin: 10px 0;
}

.singleItemDetailsBody .modal-body,
.singleItemDetailsBody .modal-footer {
    background: var(--background-color);
}

.itemComments {
    background: var(--background-color);
}

.variantTags {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #777;
    margin-bottom: 5px;
}

.singleItemContent {
    background: var(--background-color);
}

.sizePrice {
    display: flex;
    align-items: center;
    gap: 10px;
}

p.sizeTagName {
    font-size: 13px;
    color: #777;
    font-weight: bold;
    font-family: 'Roboto Condensed';
}

.ajaxLoader {
    position: fixed;
    inset: 0;
    z-index: 999999999999999999999999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .6);
}

.ajaxLoader .loader_gray {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

li.dropDown {
    position: relative;
}


li.dropDown .dropdownArea ul {
    position: absolute;
    background: #f8f9fa;
    left: 0;
    margin-top: 8px;
    margin-left: -10px;
    width: 200px;
    text-align: center;
}

li.dropDown .dropdownArea ul li {
    border-bottom: 1px solid #ddd;
}

li.dropDown .dropdownArea ul li:hover a {
    background: #fff;
}

.singleOrder {
    cursor: pointer;
}

.terms_page.vendorPagae {
    padding-top: 50px;
}

.rejectReason_details ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: disc;
    padding-left: 26px;
    margin-bottom: 5px;
}

.rejectReasonArea {
    color: purple;
    background: #f9f9f9;
    padding: 10px;
}

.rejectReasonArea>p {
    margin-left: 15px;
}

.single_track .rejectReason_details ul li {
    margin-bottom: 0 !important;
}

.single_track .rejectReason h5,
.single_track .rejectReason p {
    padding-left: 25px;
}

p.created_by img {
    height: 30px;
    width: 30px;
    object-fit: contain;
    margin-right: 5px;
}


.whatsappSupport a {
    position: fixed;
    right: var(--whatsappRight);
    bottom: var(--whatsappBottom);
    height: 50px;
    width: 50px;
    text-align: center;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 32px;
    color: #fff;
    box-shadow: 0 0 5px #ddd;
}

.whatsappSupport a i {
    color: #fff;
}

.whatsappSupportWindow {
    position: fixed;
    bottom: calc(var(--whatsappBottom) + 55px);
    right: var(--whatsappRight);
    width: 0;
    height: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.whatsappSupportWindow.active {
    position: fixed;
    bottom: calc(var(--whatsappBottom) + 55px);
    right: var(--whatsappRight);
    width: 300px;
    background: var(--background-color);
    padding: 10px 9px;
    padding-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: 251px;
    transition: all .3s ease-in-out;
    border-radius: 5px;
    overflow-y: auto;
    z-index: 9;
}

.whatsappSupportText {
    height: 100%;
    width: 100%;
    background: var(--card-color);
    margin-bottom: 9px;
    border-radius: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.whatsappBtn {
    background: #25D366 !important;
    border-color: #25D360;
}

button.btn {
    color: #fff !important;
}

.rightMenu .nav-item a {
    color: #777;
}

.login_signup {
    display: flex;
}

ul.smDropdown {
    display: none;
}

span.text-sm {
    font-size: 11px;
    font-weight: normal !important;
}

h4.itemTitle {
    display: flex;
    align-items: center;
}

.select2-selection.select2-selection--single {
    height: 46px;
    padding-top: 7px;
    font-size: 16px;

}

.select2-container {
    width: 100% !important;
}

.style__2 .homeItem_left {
    width: 100%;
}

/* 3.1.9 */

.initialTime {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.singleDayList ul {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    width: 100%;
}


.singleDayList ul li {
    background: rgba(106, 116, 123, .15);
    color: #6a747b;
    transition: all .3s ease-in-out;
    border-color: #777;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: 13px;
}

.singleDayList.open ul {
    display: flex;
    margin: 0;
    align-items: flex-end;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: column;
}

.singleDayList.open ul li {
    background: initial;
    color: #4b566b;
    transition: all .3s ease-in-out;
    border-color: inherit;
    font-size: 15px;
}

.singleDayList.close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
    opacity: 1;
}

.singleDayList.close .initialTime {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.singleDayList.close .initialTime span {
    font-size: 1rem;
    color: #4b566b;
    opacity: 1;
}

ul.row_ul.availableDays.close {
    opacity: 1;
}

.singleDayList ul li {
    background: rgba(106, 116, 123, .15);
    color: #6a747b;
    transition: all .3s ease-in-out;
    border-color: #777;
    padding: 0px 5px;
    border-radius: 3px;
    font-size: 13px;
}

.singleDayList {
    padding: 10px 0;
}

.navDropdownList ul li a {
    padding: .2rem 1rem;
    display: block;
    font-size: .9rem;
}

.customNavsideBar.activeNav ul li a:hover {
    background: var(--soft-background);
}

.customNavsideBar.activeNav ul li a {
    padding-left: 12px;
    width: 100%;
    display: block;
    padding: .5rem 1rem;
}

.navDropdownMenu a.navActive {
    background: var(--soft-background);
}

.navDropdownMenu {
    margin-bottom: 3px;
    position: relative;
}

.customNavsideBar a.active {
    background: var(--soft-background);
}

span.cartCount {
    position: absolute;
    top: 5px;
    right: 0px;
    background: rgba(220, 53, 69, 1);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    padding: 2px 4px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
}

.allow-lg {
    display: flex !important;
}

.allow-sm {
    display: none !important;
}


.cartNofify.notifyBadge {
    width: 100%;
    border-radius: 0;
}

.cartNofify.notifyBadge div {
    padding: 6px 8px;
}

a.navbar-brand.square {
    height: 48px !important;
    width: 48px !important;
}

a.navbar-brand.square img {
    height: 48px !important;
    width: 48px !important;
    object-fit: cover;
    transform: scale(1);
    max-width: 48px;
    max-height: 48px;
    padding: 3px;
}

a.navbar-brand.landscape {
    height: 48px !important;
    max-width: 150px !important;
    width: auto;
}

a.navbar-brand.landscape img {
    height: 48px !important;
    width: auto;
    object-fit: scale-down;
    transform: scale(1);
    max-width: 150px;
    max-height: 48px;
    padding: 3px;
}

.topFooter {
    box-shadow: 0 0 5px var(--box-shadow);
    padding-bottom: 15px;
}

.navDropdownList.navActive {
    background: var(--background-color);
}

.menuToggle {
    font-size: 1.38rem;
    margin-right: 5px;
}

.menuToggle img {
    height: 48px;
    width: 48px;
    object-fit: scale-down;
}

.cartNofify.notifyBadge {
    background: rgba(40, 167, 69, 1);
    color: #fff;
    border-radius: 5px;
}

.cartQty {
    border-radius: 100%;
    background: radial-gradient(rgba(0, 172, 138, .5) 55%, rgba(41, 199, 172, .8) 58%);
    min-width: 33px;
    text-align: center;
}

.navRightMenu ul li.gLanguage a {
    height: auto !important;
}

.customNavContent .gt_switcher_wrapper {
    position: absolute !important;
    margin-right: 5px;
    top: 9px !important;
    left: 6px;
}


.menuDropdown .navDropdownList.navActive {
    top: 52px;
    opacity: 1;
    z-index: 50;
    transition: all .3s ease-in-out;
}

.menuDropdown .navDropdownList {
    position: fixed;
    top: 80px;
    opacity: 0;
    z-index: -50;
    transition: all .3s ease-in-out;
    min-width: 120px;
}

.menuDropdown .navDropdownList ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.menuDropdown .navDropdownList ul a {
    padding: 5px;
}

.navDropdownList ul li a {
    height: auto !important;
}

.menuArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.navLeftMenu a.navbar-brand {
    max-width: 120px;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
}

a.navbar-brand.portrait img,
a.navbar-brand.landscape img {
    object-fit: scale-down;
    width: 115px;
    height: 48px;
    transform: scale(1);
}

.navRightMenu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.navRightMenu ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.navRightMenu ul li a {
    font-size: 1rem;
    height: 50px;
    width: 100%;
    display: block;
    padding: 0.5rem 1rem;
    padding-right: .3rem;
    padding-left: .3rem;
    position: relative;
    min-width: 45px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navRightMenu ul li {
    position: relative;
}

.customNav {
    height: 50px;
    display: flex;
    align-items: center;
    z-index: 90;
    position: fixed;
    background: var(--nav-color) !important;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 5px var(--box-shadow);
}

.customNav a {
    color: #777 !important;
    text-wrap: nowrap;
}

.theme-dark .customNav a {
    color: var(--color) !important;
}


.customNavsideBar {
    position: absolute;
    left: -350px;
    right: 0;
    top: 0px;
    bottom: 0;
    width: 280px;
    background: var(--background-color);
    height: 100dvh;
    transition: all .3s ease-in-out;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.customNavsideBar.activeNav {
    left: 0;
    transition: all .3s ease-in-out;
}

.customNavsideBar.activeNav::after {
    left: 0;
}

.customNavsideBar::after {
    content: '';
    position: fixed;
    left: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: -2;
    transition: all .3s ease-in-out;
}

.topHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 7px;
    box-shadow: 0 0 5px var(--box-shadow);
}

.topHeader img {
    margin-left: 5px;
}

.topHeader a {
    font-size: 20px;
    font-weight: 500;
}

.topHeader a.closenav {
    font-size: 20px;
    font-weight: 500;
    display: block;
    height: 100%;
    padding: 10px;
}

.customNavBar {
    height: 50px;
    overflow: hidden;
    position: relative;
}

.customNavsideBar.activeNav ul {
    padding-top: 10px;
}

.customNavsideBar.activeNav ul li a {
    padding-left: 12px !important;
}

.navLeftMenu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.navLeftMenu img.shopLogo {
    transform: scale(1.2);
    max-width: 150px;
    height: 100%;
    margin: 0;
    max-height: 100%;
}

.navLeftMenu a.navbar-brand {
    height: 48px;
    width: 100%;
}

.navRightMenu ul li a i {
    font-size: 1.2rem;
}

.customNavsideBar li.nav-item.active a {
    background: var(--soft-background);
    ;
}

.homeBanner_left .shopLogo.square img {
    max-height: 120px;
    max-width: 120px;
}



/* mobile menu
================================================== */
.UserMobileMenu {
    display: block;
    position: fixed;
    width: 0;
    bottom: 50px;
    background: #f1f3f4;
    z-index: 999;
    box-shadow: 0 -1px 5px #ddd;
    padding-top: 1px;
    left: -3px;
}

.UserMobileMenu ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 45px;
}

.UserMobileMenu ul li.active a {
    color: rgba(41, 199, 172, 1);
}

.UserMobileMenu ul li a {
    color: #777;
    display: block;
    padding: 11px 10px;
    text-align: center;
    font-size: 20px;
}

.UserMobileMenu ul li {
    width: 100%;
    position: relative;
}

a.base {
    border-radius: 100%;
    height: 52px;
    width: 52px;
    flex: 0 0 52px;
    margin-left: 14px;
    position: absolute;
    top: -36px;
    background: radial-gradient(rgba(41, 199, 172, 1) 55%, #f1f3f4 58%);
    color: #fff;
    font-size: 22px;
    line-height: 26px;
    align-self: center;
}

a.base i {
    color: #fff;
}

a.base:hover i {
    color: #fff !important;
}

.UserMobileMenu ul li a img {
    height: 30px;
    width: 30px;
}

.UserMobileMenu ul li a i {
    font-size: 25px;
    transition: all .5s ease-in-out;
    line-height: 30px;
}

.UserMobileMenu ul li a:hover i {
    color: rgba(41, 199, 172, 1);
}

.UserResponsive_menu {
    position: relative;
    display: none;
}

.show_menu_details.active {
    bottom: 108px;
    opacity: 1;
    transition: all .3s ease-in-out;
}

.show_menu_details {
    display: block;
    position: fixed;
    bottom: -200%;
    background: #f1f3f4;
    z-index: 99;
    left: 50%;
    opacity: 0;
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    transition: all .3s ease-in-out;
    right: auto;
    width: 310px;
    transform: translateX(-50%);
}

.show_menu_details ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.show_menu_details ul li {
    display: block;
    width: 100%;
}

.show_menu_details ul li a {
    display: block;
    padding: 8px;
    color: #777;
    margin: 2px;
    text-align: left;
    transition: all .3s ease-in-out;
}

.show_menu_details ul li a:hover {
    background: #fff;
}

.show_menu_details::before {
    content: "";
    position: absolute;
    height: 25px;
    width: 25px;
    background: #f1f3f4;
    transform: rotate(45deg) translateX(-50%);
    bottom: -12px;
    left: 14px;
    z-index: 90;
}

a.closeNavMenu {
    font-size: 28px;
    text-align: right;
    display: block;
    color: red;
    padding-right: 15px;
}

/* mobile menu
================================================== */


.dynamicMenu {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
}

.dynamicMenu li {
    width: 100%;
}

.dynamicMenu li a {
    height: 100%;
    display: block;
    padding: 13px 9px;
    text-wrap: nowrap;
}

li.navDropdownMenu.menuDropdown {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

li.navDropdownMenu.menuDropdown .navActive ul li {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    ;
}

.navDropdownList.navActive ul li a {
    font-size: 1rem;
    width: 100%;
    display: block;
    padding: 0.5rem 1rem;
    padding-right: .3rem;
    padding-left: .3rem;
    border-bottom: 1px solid var(--border-color);
}

.navDropdownList.navActive ul li a:hover {
    background-color: var(--background-color);
    transition: all .3s ease-in-out;
}

.navDropdownList.navActive ul li:last-child a {
    border: 0;
}

.customNav.activeNav {
    z-index: 999;
    height: 60px;
}

.ci-input-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.ci-input-group>input {
    flex: 1;
    border-left: 0;
}

.ci-input-group .input-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ci-input-group .input-group button {
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


.ci-input-group.input-group-append {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.ci-input-group.input-group-append>input {
    flex: 1;
    border-left: 0;
    border-right: 1px solid #d2d6de;
}

.ci-input-group.input-group-append .input-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ci-input-group.input-group-append .input-group button {
    height: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.w-30 {
    width: 30px !important;
}

.w-50 {
    width: 55px !important;
}

.w-50p {
    width: 50%;
}

button.btn.btn-primary.c_btn {
    text-wrap: nowrap;
}

.customPhone .input-group-text {
    padding: .37rem 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0;
    border-radius: 3px 0 0 3px;
}

.border-radius-0 {
    border-radius: 0;
}

.customPhone .input-group-text {
    font-weight: 500;
    background: var(--body-color);
    border-color: var(--border-color);
    height: 100%;
}

.customPhone .group-color {
    background-color: var(--body-color);
    border: 1px solid var(--border-color);
    border-left: 0;
    padding-left: 3px;
    font-weight: 500;
}

.theme-dark .customPhone .group-color {
    border: 0;
}

.theme-dark input.form-control.only_number {
    border: 0;
    border-radius: 0 !important;
}

.singleOrderfooter {
    font-size: 1rem;
    color: var(--color);
    box-sizing: content-box;
    padding: 8px;
    width: 100%;
    border-top: 1px solid var(--border-color);
}

.select2-container--default .select2-selection--single {
    background-color: var(--body-color) !important;
    border: 1px solid var(--border-color) !important;
}

.select2-dropdown {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-color);
    background: var(--background-color);
}

.singleOrder {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.leftSideDetails {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.single_cart_item_details .sizePrice {
    justify-content: space-between;
}

.sub_total_list h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}



.sidebarQty {
    min-width: 30px;
    min-height: 30px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    color: #fff;
    ;
}

.sub_total_list {
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 6px;
    width: 100%;
    background: #fff;
}

.sub_total_list h4 {
    width: 100%;
}

.cart_body {
    height: calc(100vh - 180px);
    overflow-y: auto;
}

.cart_footer {
    background: var(--background-color);
    padding: 15px 10px 0;
}


span.cart_count {
    font-size: .9rem;
    font-family: 'Roboto Condensed';
}

.cart_heading h4 {
    font-size: 1.2rem;
    font-family: 'Roboto Condensed';
}

a.btn.btn-info.btn-block.order-btn {
    border-radius: 16px;
}

span.extrasTitleCard {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    flex: 1;
}

p.currencyTag {
    font-size: .9rem;
}

ul.cartItems {
    padding: 0 5px;
}

.single_item_cart img {
    height: 4rem;
    width: 4rem;
    margin-right: 10px;
    flex: 0 0 4rem;
    border-radius: 10px;
}

.style_2 .incress_area span.value-button {
    height: 27px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

li.navDropdownMenu.menuDropdown span.allow-lg {
    display: flex;
    align-items: center;
}

.homeStyle_2 .style_2 .homeItemDetails.list_view {
    padding: 15px;
    min-height: 220px;
}

.conflictText {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.offCartBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

.customMenu ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
}

.availableDays {
    width: 100%;
    padding: 10px;
}

.availableDays li {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    flex-direction: column;
    margin-bottom: 8px;
}

.availableDays .timeLeft,
.timeFormat,
.timeRight.close {
    text-shadow: none !important;
    color: var(--color) !important;
    opacity: 1;
}

.timeLeft {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
}

.timeRight {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: left;
}

.flexTime {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

.timeRightBottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    font-size: 13px;
    flex: 1;
    width: 100%;
    overflow-x: auto;
}

span.breakTime {
    text-wrap: nowrap;
    background: rgba(232, 8, 142, .1);
    padding: 2px 5px;
    border-radius: 5px;
    margin: 5px 0;
}

.breakTime span {
    text-shadow: none;
}

.theme-dark .breakTime span {
    color: #fff;
    box-shadow: 0 0 5px #333;
}

.timeRightBottom::-webkit-scrollbar {
    height: 7px;
}

.timeRightBottom::-webkit-scrollbar-thumb {
    background-color: #f2f2f2;
    border-radius: 6px;
}

.timeRightBottom::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 6px;
}

ul.availableDays {
    max-width: 400px;
}

.itemPopupModal .modal-dialog {
    max-width: 650px;
}

ul.shopGlang {
    position: fixed;
    left: 10px;
    bottom: 10%;
    z-index: 99999;
}

h4.shopName {
    font-size: 1.1rem;
    margin-bottom: 12px;
    margin-top: -5px;
    color: #fff;
}

span.timeFormat {
    text-wrap: nowrap;
    flex: 1;
}

.topFooter ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.priceGroup {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 11px;
}


.previous_price {
    color: #fe696a !important;
    text-decoration: line-through;
}

/*----------------------------------------------
          sub category
----------------------------------------------*/

.categoryDetails {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.categoryDetails .catTop.img {
    height: 50px;
    width: 50px;
    flex: 0 0 50px;
    aspect-ratio: 1/1;
}

.subcategoryList ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 10px;
    overflow: hidden;
    overflow-x: auto;
}

.subcategoryList ul li a {
    display: block;
    padding: 12px 25px;
    background: var(--soft-background);
    border: 0;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    outline: none;
    transition: all .3s;
    color: var(--color);
}

ul.subcategories {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-left: 126px;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
    margin-top: 1.5rem;
    gap: 10px;
    padding-bottom: 7px;
}

ul.subcategories li a {
    background: var(--soft-background);
    padding: 6px 13px;
    border-radius: 5px;
    color: var(--color);
    text-wrap: nowrap;
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
}

.subcategoryList ul li a img {
    height: 30px;
    width: 30px;
    border-radius: 100%;
    margin-right: 8px;
    transform: scale(1.3);
}

/*----------------------------------------------
        End  sub category
----------------------------------------------*/
.features-content {
    flex: 1;
}

.categoryItem {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.categoryItem i.fas.fa-list-ul {
    padding: 5px;
    font-size: 1.5rem;
}

.catImg {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    transform: scale(1.2);
    flex: 1;
}

.timeRight.open {
    flex-direction: column;
}

span.timeFormat {
    text-wrap: nowrap;
    flex: 1;
    font-size: .9rem;
    font-weight: normal;
}

ul.row_ul.availableDays.open li .flexTime {
    flex-direction: column;
    text-align: center;
}

ul.row_ul.availableDays.open li .flexTime .timeLeft {
    align-self: center;
    font-size: 1.2rem;
    margin-bottom: 5px;
    font-weight: bold;
}

ul.allergenImage {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

ul.allergenImage li {
    display: flex;
    align-items: center;
    gap: 7px;
}

ul.allergenImage li img {
    height: 35px;
    width: 35px;
    border-radius: 100%;
    object-fit: cover;
    box-shadow: 0 0 5px #eee;
}

.gt_container--hich1m .gt_switcher .gt_selected a {
    direction: ltr !important;
}

.timeLeft.close {
    font-size: 1rem;
    opacity: 1;
    color: #4b566b;
}

.timeLeft.close:hover {
    color: #4b566b;
    opacity: 1;
}

.sliderImgThumb ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 7px;
    justify-content: center;
}

.sliderImgThumb ul li {
    height: 40px;
    width: 50px;
}

.sliderImgThumb ul li img {
    border: 2px solid #eee;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .3rem;
    opacity: .8;
}

.sliderImgThumb {
    position: relative;
    max-height: 100px;
    margin-bottom: 10px;
}

li.Sliderthumb.active img {
    border-color: var(--color);
    opacity: 1;
}

ul.allergenImage li {
    text-wrap: nowrap;
}

.offerList {
    margin-bottom: 4rem;
    margin-top: 2rem;
}

.singleOffer {
    height: 225px;
    width: 100%;
    margin-bottom: 1rem;
}

.singleOffer img {
    object-fit: cover;
    border-radius: .5rem;
    border: 2px solid var(--border-color);
    box-sizing: border-box;
    box-shadow: 0 0 5px var(--box-shadow);
}

.offerPage {
    min-height: 65dvh;
}

.offerPage .homeSingle_item {
    margin-bottom: 1rem;
}

.offerPage h4.title {
    font-size: 1.3rem;
    margin: 1rem 0;
}

.port_d_flex.home_view.space-between {
    justify-content: space-between;
}

.port_d_flex.home_view.space-between a.quick_view {
    padding: 6px 16px;
    border-radius: .6rem;
}

.price_section .allergens {
    font-weight: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scroll-container {
    scroll-behavior: smooth;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
}

.scroll-container.active {
    cursor: grabbing;
}

.scroll-content {
    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-content {
    user-select: none;
    -webkit-user-drag: none;
}

.scroll-content .items {
    user-select: none;
    -webkit-user-drag: none;
}

select.ci-select {
    color: var(--color) !important;
    border-color: var(--border-color);
    padding-left: 1rem;
    padding-right: 1.5rem;
    border-radius: .3rem;
    position: relative;
    max-width: fit-content;
    height: 43px;
    background: var(--soft-background);
}

select.ci-select:focus,
select.ci-select:visited,
select.ci-select:focus-visible {
    border-color: var(--border-color) !important;
    color: var(--color) !important;
}

.swiper-container {
    width: 100%;
    position: relative;

    overflow: hidden;
}

.swiper-button-next,
.swiper-button-prev {
    z-index: 10;
    height: 50px;
    width: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px #ddd;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 23px;
    color: #000;
}


.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.order_page .nav-tabs .nav-link.active,
.login_form .nav-tabs .nav-link.active {
    background-color: var(--body-color) !important;
    color: var(--color) !important;
    border-color: var(--border-color) !important;
}

.nav-tabs {
    border-color: var(--border-color) !important;
}

.order_page .nav-tabs .nav-link,
.login_form .nav-tabs .nav-link {
    background-color: var(--soft-background) !important;
    color: var(--color) !important;
}

.input-group-text {
    background-color: var(--card-color);
    color: var(--color);
    border-color: var(--border-color);
}

.theme-dark .right_form_login .customPhone {
    border: 1px solid var(--border-color);
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color) !important;
}

fieldset {
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    padding: 0.75rem 1.25rem;

}

legend {
    width: auto !important;
    background: var(--soft-background);
    padding: 1px 12px;
    border-radius: 5px;
    font-size: .89rem;
    font-weight: normal;
}

.orderTypeBody.package_type_body {
    padding: 10px 0;
}

.order_type_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    font-size: 1rem;
}

.single_track.bg-gray .card {
    background: var(--card-color);
}

a.btn:hover,
a.btn:visited {
    color: #fff !important;
}

.theme-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.theme-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.resaurantDemo,
.topSigin .btn-info,
.login_wrapper .btn-info {
    color: #fff !important;
}

@media (min-width: 640px) {
    .swiper-slide {
        width: auto !important;
        /* Ensure slides adjust in size responsively */
    }
}

.empty_area {
    height: 100dvh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.empty_area i {
    font-size: 1.5rem;
}

.theme-light .login_wrapper {
    background-color: #fff;
}

a.nav-link.p-r.btn:hover {
    color: var(--dcolor) !important;
}

.errorMessage {
    color: red !important;
}

.summary ul {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-direction: column;
}

.summary ul li span:nth-child(odd) {
    min-width: max-content;
    display: inline-block;
}

/* --------- Staff Login ------------- */

.h-full {
    height: 100%;
}

.login_wrapper.loginWrap {
    height: 100vh;
    background-origin: content-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login_wrapper.loginWrap:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--after-bg-color);
}

.loginWrap .form_content {
    padding: 0 calc(15px + 1vw);
}

.loginWrap .user_login_header {
    padding: 0px calc(10px + 1vw);
    text-align: center;
}

._form_login {
    position: relative;
    background: var(--card-color);
    box-shadow: 0 2px 4px #00000040;
    border-radius: 10px;
    z-index: 1;
    padding: 15px 0;
}

.loginWrap .topSigin {
    display: flex;
    width: 100%;
    min-height: 42vh;
    justify-content: center;
    align-items: center;
}

button.btn.btn-info._signIn_btn {
    width: 100%;
}

span.input-group-addon.fa_icon {
    padding: 10px 13px;
    border: 1px solid var(--border-color);
    border-right: 0px;
    background: var(--cyan);
    color: white;
}

a._loginBtn {
    color: var(--dcolor);
}

._dcolorBtn {
    color: #fff;
    background: var(--dcolor) !important;
    border-color: var(--dcolor) !important;
}

._dcolor {
    color: var(--dcolor) !important;
}

._dcolorBtn:hover {
    background: rgba(0, 0, 0, .2);
}

.otpModal .modal-header .close {
    color: var(--color);
}

button.btn.otpSaveBtn {
    width: 100%;
    background: var(--dcolor);
    border-color: var(--dcolor);
}

span.otp_icon {
    padding: 11px 11px;
    background: var(--dcolor);
    color: white;
    border-radius: 2px 0 0 2px;
    font-size: 14px;
    border: 2px solid transparent;
}

input.form-control._inputStye {
    min-height: 45px;
}

.form-group.guestPhone {
    padding-left: 15px;
}

.otpFields {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 10px 2rem;
    gap: 11px;
}

.otpFields input {
    height: 57px !important;
    text-align: center;
    font-size: 1.5rem;
}

.remainingTime {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}

a.resend-otp {
    font-size: 1rem;
    color: var(--color);
    display: flex;
    gap: 5px;
    align-items: center;
}

.otpModal .reg_msg {
    color: red;
    text-align: center !important;
    display: block;
}

.OTP_phone .ci-input-group {
    background: transparent;
}

.OTP_phone .ci-input-group input {
    height: 44px !important;
}

.theme-light .ci-input-group .input-group-text {
    border: 1px solid #ddd !important;
    border-right: 0 !important;
    height: 46px !important;
}

li.subcategorieslist {
    display: flex;
}

li.subcategorieslist img {
    --h: 45px;
    height: var(--h);
    width: var(--h);
    border-radius: 50%;
}

li.allSubcategory a {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    min-width: 72px;
    text-align: center;
}

.dis-none {
    display: none;
}

.sub-cat-header.singleCategoryHeader.dis-none {
    display: none;
    border: 0;
}

.theme-dark .gallery_sort {
    scrollbar-color: #555 #2d2d2d;
    /* Firefox */
}

.theme-dark .gallery_sort::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.theme-dark .gallery_sort::-webkit-scrollbar-thumb {
    background: #555;
    border-color: #2d2d2d;
    /* Matches dark track */
}

.blur {
    box-shadow: inset 0px 0px 2px #fefefed1;
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    backdrop-filter: saturate(200%) blur(30px);
}

.theme-dark .blur {
    box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.4);
    background-color: rgba(14, 23, 39, 0.7) !important;
}

.style_4 ul.bottomMenuItems {
    display: flex;
    flex-direction: row !important;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}

.style_4.menuArea {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    display: none;
    height: 55px;
    background: var(--card-color);
    padding: 5px;
}

a.menuLink {
    font-size: 25px;
}

li.menuLink.__btnStyle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 25px;
    padding: 5px;
    margin-top: -30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

li.menuLink.__btnStyle span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    background: var(--dcolor);
    border-radius: 50%;
    color: white;
}

.menu-icon-img {
    display: flex;
    width: 25px;
    height: 25px;
    position: relative;
}

li.nav-item.active .menu-icon-img:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 3px;
    bottom: -6px;
    left: 0;
    background: #c5306a;
    border-radius: 20px;
}

/* --------------------------------------
        topMenu Style 4 Area
-------------------------------------- */

._dark_logo,
._light_logo {
    display: none;
}

.theme-dark ._dark_logo {
    display: block !important;
}

.theme-light ._light_logo {
    display: block !important;
}

/* ----------- Responsive Area --------------- */

/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1200px) {}


/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bottomMenu .menuToggle img {
        display: none;
    }

    .bottomMenu .navRightMenu ul li a {
        display: none !important;
    }

    .bottomMenu .style_4.menuArea {
        display: block;
    }
}


/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
    .bottomMenu .menuToggle img {
        display: none;
    }

    .bottomMenu .navRightMenu ul li a {
        display: none !important;
    }

    .bottomMenu .style_4.menuArea {
        display: block;
    }

    a.navbar-brand.portrait img,
    a.navbar-brand.landscape img {
        margin-top: 7px;
    }

}


/*Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .bottomMenu .menuToggle img {
        display: none;
    }

    .bottomMenu .navRightMenu ul li a {
        display: none !important;
    }

    .bottomMenu .style_4.menuArea {
        display: block;
    }


}

.bottomMenuItems .navCart.nav-item i {
    font-size: 1.4rem;
}

li.navCart.nav-item {
    position: relative;
}

li.navCart.nav-item span.cartCount {
    top: -7px;
    right: -9px;
}

.loginPg {
    display: none;
}

.singlehighlightSlider .homeSingle_item {
    margin: 10px;
}

.highlightSlider {
    padding-bottom: 10rem;
    display: block;
}

.singlehighlightSlider.hightlight_slider .slick-arrow {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translate(-50%);
    border-radius: 50%;
}

.singlehighlightSlider.hightlight_slider.style3 .slick-arrow,
.singlehighlightSlider.hightlight_slider.style2 .slick-arrow {
    top: 35%;
}

.singlehighlightSlider.slider-nav .slick-arrow.slick-prev {
    display: flex;
    color: #fff;
    left: 10px !important;
    right: auto !important;
    cursor: pointer;
}

.singlehighlightSlider.slider-nav .slick-arrow.slick-next {
    display: flex;
    color: #fff;
    right: -45px !important;
    left: auto !important;
    cursor: pointer;
}

.singlehighlightSlider .homeSingle_item.style__2 {
    display: flex !important;
    flex-direction: row !important;
}

.orderLabel {
    color: #fff;
}

.dininOrderInfo {
    margin-top: 5px;
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 10px;
    border-radius: .5rem;
    margin-bottom: 5px;
    position: relative;
}

.historyIcon {
    position: absolute;
    font-size: 5rem;
    opacity: .5;
    transform: translate(50%, -0.05rem);
    color: #f9f9f9;
}



span.newBadge {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    background: #dc3545;
    color: #fff !important;
    box-shadow: 0 4px 11px rgb(220 53 69 / 15%);
    position: absolute;
    left: 1rem;
    top: 1rem;

}

.package_overview,
.singleItemDetails.homePackages p {
    color: var(--color);
}

/* Modern Item Card Redesign */
.view_switcher_wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.gallery_sort.category_shot {
    flex: 1;
    width: auto;
    margin-bottom: 0 !important;
}

.view_toggle_btns {
    display: flex;
    background: var(--card-soft);
    padding: 5px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.view-btn {
    border: none;
    background: transparent;
    color: var(--color);
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.view-btn.active {
    background: var(--dcolor);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Category Header Toggle */
.cat_title_flex {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header_toggle.view_toggle_btns {
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 0;
}

.header_toggle .view-btn {
    background: var(--card-soft);
    margin-right: 5px;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.85rem;
}

.header_toggle .view-btn.active {
    background: var(--dcolor);
}

/* Modern Card Base */
.modern_item_card {
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px var(--box-shadow);
    position: relative;
}

.modern_item_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px var(--box-shadow-soft);
}

.item_thumb_inner {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
}

.item_img_box {
    width: 100px;
    height: 100px;
    min-width: 100px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.item_img {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.5s ease;
}

.modern_item_card:hover .item_img {
    transform: scale(1.1);
}

.new_badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #FF4757;
    color: #fff;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50px;
    z-index: 2;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(255, 71, 87, 0.3);
}

.item_details {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    min-width: 0;
}

.item_title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--color);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.item_desc {
    font-size: 0.8rem;
    color: var(--color);
    opacity: 0.7;
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item_price_action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 8px;
}

.item_price .price_discount {
    font-size: 1rem;
    font-weight: 800;
    color: var(--dcolor);
}

.add_btn {
    background: var(--dcolor);
    color: #fff !important;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    border: none;
    white-space: nowrap;
}

.add_btn:hover {
    background: var(--defaultColor);
    transform: scale(1.05);
    color: #fff !important;
}

/* ========================================
   Items Row - Shared for Grid & List
   ======================================== */
   .items_row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.col-custom {
    padding: 0 10px;
    margin-bottom: 0;
}

/* ========================================
   GRID VIEW
   ======================================== */
   .grid_view .col-custom {
    flex: 0 0 25%;
    max-width: 25%;
    margin-bottom: 1rem;
}

.grid_view .item_thumb_inner {
    flex-direction: column;
    align-items: stretch;
}

.grid_view .item_img_box {
    width: 100%;
    height: 190px;
    min-width: 0;
}

.grid_view .item_details {
    min-height: 120px;
    justify-content: space-between;
}

.grid_view .item_desc {
    -webkit-line-clamp: 2;
}

.grid_view .item_price_action {
    width: 100%;
    padding-bottom: 10px;
}

@media (max-width: 1200px) {
    .grid_view .col-custom {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 991px) {
    .grid_view .col-custom {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .grid_view .col-custom {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ========================================
   LIST VIEW
   ======================================== */
   .list_view .col-custom {
    flex: 0 0 25%;
    max-width: 25%;
}

@media (min-width: 1441px) {
    .list_view .col-custom {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width: 1440px) {
    .list_view .col-custom {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 1199px) {
    .list_view .col-custom {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 991px) {
    .list_view .col-custom {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .list_view .col-custom {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .list_view .item_thumb_inner {
        flex-direction: row;
    }
}

.list_view .modern_item_card {
    height: auto;
    margin-bottom: 14px;
}

.list_view .item_thumb_inner {
    flex-direction: row;
    align-items: stretch;
}

.list_view .item_img_box {
    width: 74px;
    height: auto;
    min-height: 92px;
    min-width: 74px;
}

.list_view .item_details {
    padding: 8px 10px;
    justify-content: space-between;
    overflow: hidden;
}

.list_view .item_title {
    font-size: 0.85rem;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.list_view .item_desc {
    display: none;
}

.list_view .item_price .price_discount {
    font-size: 0.9rem;
}

.list_view .item_price_action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: end;
    gap: 6px;
    width: 100%;
}

.list_view .item_price,
.list_view .priceGroup {
    min-width: 0;
}

.list_view .priceGroup {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2px 6px;
    line-height: 1.15;
}

.list_view .priceGroup>span {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.82rem;
}

.list_view .item_action {
    display: flex;
    justify-content: flex-end;
    align-self: end;
    min-width: 30px;
}

.list_view .add_btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.75rem;
    justify-content: center;
    flex-shrink: 0;
}

.list_view .add_text {
    display: none;
}

/* Dark Theme */
.theme-dark .modern_item_card {
    background: var(--card-color);
}

.theme-dark .view-btn:not(.active) {
    color: rgba(255, 255, 255, 0.6);
}


/* ============================================================
   CHECKOUT PAGE — Beautiful Redesign (Dark/Light Mode Ready)
   All class names preserved. CSS-only, no PHP/JS changes.
   ============================================================ */

/* ---------- Restaurant container on checkout ---------- */
.restaurant-container.mt-80 {
    padding-top: 30px;
    padding-bottom: 60px;
}

/* ---------- Checkout main layout wrapper ---------- */
.showCheckoutData {
    animation: co-fadein 0.4s ease;
}

@keyframes co-fadein {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Order summary card (right column) ---- */
.col-md-12.total_sum_area {
    position: sticky;
    top: 90px;
}

.total_sum_area .showCheckoutTotal,
.total_sum_area .total_sum {
    background: var(--card-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 24px var(--box-shadow);
    padding: 22px 20px 18px;
    transition: box-shadow 0.3s ease;
}

.total_sum_area .showCheckoutTotal:hover,
.total_sum_area .total_sum:hover {
    box-shadow: 0 8px 32px var(--box-shadow-soft);
}

/* Summary label */
.total_sum_area .showCheckoutTotal::before {
    content: "Order Summary";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dcolor, #50cd89);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.upperSum {
    background: transparent;
    border-bottom: 1px dashed var(--border-color) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

.upperSum .flex,
.discount_tax .flex,
.couponPricearea .flex,
.tips .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.upperSum p,
.discount_tax p,
.couponPricearea p,
.tips p {
    font-size: 13.5px;
    color: var(--grayColor);
    font-weight: 500;
}

.upperSum span,
.discount_tax span,
.couponPricearea span,
.tips span {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color);
}

.total_sum .flex.justify-between h4,
.show_price .flex.justify-between h4,
.showShipping .flex.justify-between h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color);
}

/* Grand total highlight */
.show_price .flex.justify-between h4:last-child,
.showShipping .flex.justify-between h4:last-child,
.dis_none.showShipping .flex.justify-between h4:last-child {
    color: var(--dcolor, #50cd89);
    font-size: 18px;
}

.d_charge {
    color: var(--dangerColor, #e53e3e) !important;
}

.coupon_price {
    color: var(--dcolor, #50cd89) !important;
    font-weight: 700 !important;
}

.cart_count {
    border-radius: 20px;
    padding: 2px 10px;
    font-weight: 700;
    font-size: 13px;
}

/* ---- Cart Item List (left panel, step_1) ---- */
.step_1 .singlePage.style_2 {
    background: var(--card-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 24px var(--box-shadow);
    padding: 18px 16px;
    margin-bottom: 18px;
    transition: box-shadow 0.3s ease;
}

.step_1 .singlePage.style_2::before {
    content: "Cart Items";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dcolor, #50cd89);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.singlePage.style_2 ul li {
    background: rgb(151 143 63 / 10%) !important;
    border: 1px solid rgb(151 143 63 / 3%) !important;
    border-radius: 12px !important;
    padding: 10px 10px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.singlePage.style_2 ul li:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09) !important;
    transform: translateY(-1px);
}

.singlePage .single_item_cart img {
    height: 44px !important;
    width: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 10px !important;
    border: 2px solid var(--border-color) !important;
    object-fit: cover !important;
}

.singlePage .single_cart_item_details h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color) !important;
    line-height: 1.4;
}

.singlePage .single_cart_item_details p.price_qty_area {
    font-size: 12px !important;
    color: var(--grayColor) !important;
    margin-top: 4px;
}

span.extrasTitleCard {
    font-size: 10.5px !important;
    color: var(--dcolor, #50cd89) !important;
    font-weight: 600 !important;
    background: var(--soft-background);
    border-radius: 4px;
    padding: 1px 5px;
}

span.sizeTitle {
    font-size: 11px;
    font-weight: 600;
    background: var(--soft-background);
    color: var(--dcolor, #50cd89);
    border-radius: 4px;
    padding: 1px 7px;
}

/* Quantity controls */
.style_2 .incress_area {
    background: var(--card-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9999px !important;
    width: 32px !important;
    flex: 0 0 32px !important;
}

.style_2 .incress_area span.value-button {
    color: var(--dcolor, #50cd89) !important;
    font-weight: 700 !important;
    transition: color 0.2s;
}

.style_2 .incress_area span.value-button:hover {
    color: #fff !important;
    background: var(--dcolor, #50cd89) !important;
    border-radius: 9999px;
}

.style_2 .incress_area * {
    color: var(--grayColor) !important;
}

/* Remove item button */
.right_cart a {
    color: var(--dangerColor, #e53e3e) !important;
    background: var(--soft-background);
    border-radius: 50%;
    padding: 4px 6px !important;
    font-size: 13px;
    transition: background 0.2s, transform 0.2s;
}

.right_cart a:hover {
    background: var(--border-color);
    transform: scale(1.15);
}

/* ---- Customer Info / Login Card ---- */
.cartItemDetails {
    margin-top: 0;
}

.order_page {
    background: var(--card-color) !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 24px var(--box-shadow) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    transition: box-shadow 0.3s ease;
}

.order_page:hover {
    box-shadow: 0 8px 32px var(--box-shadow-soft) !important;
}

/* Customer info block */
.ModalCustomerInfo {
    background: var(--card-soft);
    border-radius: 12px;
    padding: 16px 14px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.3s ease;
}

.ModalCustomerInfo h4.bb_1_dashed {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color) !important;
    border-bottom: 1px dashed var(--border-color) !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.customerInfoModal h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color) !important;
}

.customerInfoModal p {
    font-size: 12.5px !important;
    color: var(--grayColor) !important;
    margin-top: 5px !important;
}

.customerInfoModal i {
    color: var(--dcolor, #50cd89);
    margin-right: 5px;
    font-size: 13px;
}

.customerRemove {
    color: var(--dangerColor, #e53e3e) !important;
    font-size: 13px;
    background: var(--soft-background);
    border-radius: 50%;
    padding: 2px 5px;
    transition: background 0.2s, transform 0.2s;
}

.customerRemove:hover {
    background: var(--border-color);
    transform: scale(1.1);
}

.customerEdit a {
    color: var(--dcolor, #50cd89) !important;
    background: var(--soft-background);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    display: inline-block;
    transition: background 0.25s, transform 0.2s;
}

.customerEdit a:hover {
    background: var(--dcolor, #50cd89);
    color: #fff !important;
    transform: scale(1.05);
}

/* Login section */
.loginSection {
    margin-bottom: 0;
}

.singlePageLogin {
    border-radius: 12px;
    padding: 16px 14px;
    margin: 0;
}

/* ---- Order Info Form ---- */
.order_input_area {
    background: transparent;
}

.order_input_area input,
.order_input_area select,
.order_input_area textarea {
    height: 46px !important;
    border-radius: 10px !important;
    background: rgb(198 186 150 / 8%) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    color: var(--color) !important;
    font-size: 13.5px !important;
    padding: 10px 14px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    width: 100%;
}

input[name="dial_code"] {
    border-radius: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    background-color: var(--body-color) !important;
}

.order_input_area input:focus,
.order_input_area select:focus,
.order_input_area textarea:focus {
    border-color: var(--dcolor, #50cd89) !important;
    outline: none !important;
    background: var(--card-color) !important;
}

.order_input_area label,
.order_input_area .form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

.order_input_area label,
.custom-checkbox b {
    display: flex;
    align-items: center;
}

.order_input_area .form-group {
    margin-bottom: 14px;
}

.order_input_area textarea {
    height: 80px !important;
    resize: none;
}

label.pointer.custom-checkbox {
    display: flex;
}

/* Form section headings (nav tabs) */
.order_page .nav-tabs {
    border-bottom: 2px solid var(--border-color) !important;
    margin-bottom: 16px;
    gap: 4px;
    display: flex;
}

.order_page .nav-tabs .nav-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--grayColor) !important;
    border: 1px solid transparent !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.order_page .nav-tabs .nav-link.active {
    background: var(--card-color) !important;
    color: var(--dcolor, #50cd89) !important;
    border-color: var(--border-color) var(--border-color) var(--card-color) !important;
}

.order_page .nav-tabs .nav-link:hover:not(.active) {
    background: var(--soft-background) !important;
    color: var(--dcolor, #50cd89) !important;
}

/* Payment methods */
.onlinePaymentList ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 0;
    margin-top: 10px;
}

.onlinePaymentList ul li {
    flex: 0 0 calc(33.33% - 8px);
}

label.custom-radio-2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--card-soft);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--grayColor);
    transition: all 0.25s ease;
}

label.custom-radio-2:hover {
    border-color: var(--dcolor, #50cd89);
    background: var(--soft-background);
    color: var(--color);
}

label.custom-radio-2:has(input:checked) {
    border-color: var(--dcolor, #50cd89);
    background: var(--soft-background);
    color: var(--color);
}

.payout_img {
    display: inline-block;
    height: 20px;
    width: 34px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 4px;
}

/* Checkout button area */
.checkoutBtnList {
    margin-top: 14px;
}

.checkoutBtnList>label {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--card-soft);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.checkoutBtnList>label:hover {
    border-color: var(--dcolor, #50cd89);
    background: var(--soft-background);
}

/* Empty cart state */
.empty_msg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
}

.empty_msg .top_cart_order {
    background: var(--card-color);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 24px var(--box-shadow);
    padding: 50px 40px;
    text-align: center;
    height: auto !important;
}

.empty_msg .limit_msg i {
    color: var(--grayColor);
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty_msg .limit_msg h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color);
    margin-bottom: 16px;
}

.empty_msg .custom_btn {
    border-radius: 10px !important;
    padding: 10px 30px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}

/* Customer edit modal */
.customerpopup .modal-content {
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--card-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.customerpopup .modal-header {
    background: var(--card-soft) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 18px 18px 0 0;
    padding: 16px 20px;
}

.customerpopup .modal-body {
    padding: 20px;
    background: var(--card-color);
}

/* OR divider in login */
.or {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--grayColor);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 0;
}

.or::before,
.or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* Social login buttons */
.socialLoginBtn {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    flex-direction: column;
}

.socialLoginBtn a,
.socialLoginBtn button {
    flex: 1;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    transition: all 0.25s ease !important;
}

/* OTP login area */
.otpLoginArea {
    background: var(--card-soft);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 14px;
    margin-top: 10px;
}

/* Submit order button */
.order_form .btn-success,
.order_form .btn-primary,
.order_form [type="submit"],
.order_form .confirm_btn {
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    width: 100%;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px var(--box-shadow) !important;
}

.order_form .btn-success:hover,
.order_form .btn-primary:hover,
.order_form [type="submit"]:hover,
.order_form .confirm_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--box-shadow-soft) !important;
}

/* Guest login checkbox */
.is_guest_login+label,
.loginPg label {
    font-size: 13px;
    color: var(--grayColor);
    cursor: pointer;
}

/* Tab area in checkout login */
.tabArea .nav-tabs {
    border: none !important;
    gap: 6px;
    margin-bottom: 14px;
}

.tabArea .nav-tabs .nav-link {
    border-radius: 8px !important;
    border: 1.5px solid var(--border-color) !important;
    background: var(--card-soft) !important;
    color: var(--grayColor) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    transition: all 0.2s !important;
}

.tabArea .nav-tabs .nav-link.active,
.tabArea .nav-tabs .nav-link:hover {
    border-color: var(--dcolor, #50cd89) !important;
    background: var(--soft-background) !important;
    color: var(--dcolor, #50cd89) !important;
}

/* Section Titles inside order form */
.orderInfoArea .order_page>h4,
.cartItemDetails .order_page>h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}

/* Coupon area */
.couponPricearea {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--soft-background);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

/* Service charge */
.serviceCharge {
    padding: 8px 10px;
    background: var(--soft-background);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
    margin-top: 6px;
}

/* Select area for delivery pickup */
.loadCustomer>* {
    animation: co-fadein 0.35s ease;
}

/* ---- Responsive tweaks for mobile ---- */
@media (max-width: 767px) {
    .restaurant-container.mt-80 {
        padding-top: 16px;
        padding-bottom: 40px;
    }

    .total_sum_area .showCheckoutTotal,
    .total_sum_area .total_sum {
        border-radius: 12px;
        padding: 16px 14px 14px;
    }

    .step_1 .singlePage.style_2 {
        border-radius: 12px;
        padding: 14px 12px;
    }

    .order_page {
        border-radius: 12px !important;
        padding: 14px !important;
    }

    .singlePage.style_2 ul li {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .onlinePaymentList ul li {
        flex: 0 0 calc(50% - 6px);
    }

    .empty_msg .top_cart_order {
        padding: 36px 20px;
    }
}

@media (max-width: 430px) {
    .onlinePaymentList ul li {
        flex: 0 0 100%;
    }
}

/* ---- Animate individual cart items on load ---- */
.singlePage.style_2 ul li {
    animation: co-item-in 0.35s ease both;
}

.singlePage.style_2 ul li:nth-child(1) {
    animation-delay: 0.05s;
}

.singlePage.style_2 ul li:nth-child(2) {
    animation-delay: 0.10s;
}

.singlePage.style_2 ul li:nth-child(3) {
    animation-delay: 0.15s;
}

.singlePage.style_2 ul li:nth-child(4) {
    animation-delay: 0.20s;
}

.singlePage.style_2 ul li:nth-child(5) {
    animation-delay: 0.25s;
}

@keyframes co-item-in {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---- Subtle gradient background on checkout container ---- */
.showCheckoutData>.row {
    background: transparent;
}

/* ---- Scrollbar for cart list ---- */
.singlePage.style_2 ul::-webkit-scrollbar {
    width: 4px;
}

.singlePage.style_2 ul::-webkit-scrollbar-thumb {
    background: var(--dcolor, #50cd89);
    border-radius: 99px;
}

/* ---- Form input placeholder color ---- */
.order_input_area input::placeholder,
.order_input_area textarea::placeholder {
    color: var(--grayColor);
    opacity: 0.7;
}

/* ---- Light mode link colours ---- */
.theme-light a {
    color: var(--color);
}

.serviceCharge {
    padding: 8px 10px;
    background: rgba(255, 193, 7, 0.08);
    border-radius: 8px;
    border: 1px dashed rgba(255, 193, 7, 0.3);
    margin-top: 6px;
}

.d_charge {
    color: #fc8181 !important;
}

input.form-control.remove_char.only_number {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
}

/* ============================================================
   END CHECKOUT REDESIGN
   ============================================================ */

   .navbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.item_extra_list label.custom-radio-2{
    background: transparent!important;
    border:0!important;

}
.item_extra_list label.custom-radio-2:hover {
    border-color: transparent!important;
    background: transparent!important;
}

.gallery_sort.category_shot {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0 !important;
}

ul.gallery_sort.category_shot li {
    flex: 0 0 auto;
}

/* MOBILE - BANNER SPACING */
@media only screen and (max-width: 767px) {

    /* Add a little space ABOVE the banner */
    .sliderSectionArea {
        padding-top: 15px !important;
    }

    /* Reduce space BELOW banner / before MENU */
    .defaultHeading {
        padding-top: 5 !important;
        padding-bottom: 30px !important;
        margin-top: -50px !important;
    }
}



/* Hide slider arrows while the side menu is open */
body:has(.customNavsideBar.activeNav) .slick-arrow {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==================================================
   MOBILE SIDE MENU IMPROVEMENTS
================================================== */


/* Side menu above page content */
.customNavsideBar.activeNav {
    z-index: 9999 !important;
}


/* Stop page behind menu from scrolling */
html:has(.customNavsideBar.activeNav),
body:has(.customNavsideBar.activeNav) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}


/* Keep side menu itself scrollable */
.customNavsideBar.activeNav {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y;
}


/* Hide slider arrows while menu is open */
body:has(.customNavsideBar.activeNav) .slick-arrow {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==================================================
   FIX SIDE MENU TEXT ON LIGHT / WHITE THEME
================================================== */

/* Make all side-menu links clearly visible */
.theme-light .customNavsideBar a,
.theme-light .customNavsideBar ul li a {
    color: #555 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Dropdown / More menu text */
.theme-light .customNavsideBar .navDropdownMenu > a,
.theme-light .customNavsideBar .navDropdownList a {
    color: #555 !important;
    opacity: 1 !important;
}

/* Keep selected menu item in the restaurant accent color */
.theme-light .customNavsideBar li.nav-item.active > a,
.theme-light .customNavsideBar a.active,
.theme-light .customNavsideBar .navDropdownMenu > a.navActive {
    color: var(--dcolor, #e8288f) !important;
    opacity: 1 !important;
}

/* Make icons/arrows visible too */
.theme-light .customNavsideBar a i {
    color: inherit !important;
    opacity: 1 !important;
}

/* ==================================================
   ENTIRE MOBILE CHECKOUT BAR CLICKABLE
================================================== */

.cartNofify.notifyBadge.allow-sm.navCart {
    cursor: pointer !important;
    touch-action: manipulation;
}

/* ==================================================
   CHECKOUT PAGE - CAPITALIZE ALL TEXT
================================================== */

body {
    text-transform: uppercase !important;
}

/* Keep user-entered text normal */
input,
textarea {
    text-transform: none !important;
}

/* Capitalize placeholders normally */
input::placeholder,
textarea::placeholder {
    text-transform: none !important;
}

/* ==================================================
   MOBILE - SEARCH ABOVE CATEGORY DROPDOWN
================================================== */

@media only screen and (max-width: 767px) {

    /* Stack both elements vertically */
    .defaultHeading.single__cat__header {
        display: flex !important;
        flex-direction: column !important;
    }

    /* SEARCH FIRST */
    .defaultHeading.single__cat__header .searchSection {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* DROPDOWN SECOND */
    .defaultHeading.single__cat__header > select.ci-select {
        order: 2 !important;
        width: 100% !important;
    }

    /* Fix search width */
    .defaultHeading.single__cat__header .searchBar-2 {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    .defaultHeading.single__cat__header .search-box-2 {
        width: 100% !important;
    }

    .defaultHeading.single__cat__header .search-txt-2 {
        width: 100% !important;
    }
}

.facil-category-description {
    display: block !important;
    width: 100% !important;
    max-width: none !important;

    margin: 6px 0 18px 0;
    padding: 0 0 10px 0;

    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;

    text-align: left;
    text-transform: none !important;
    letter-spacing: normal !important;

    opacity: 0.9;
}

@media (max-width: 767px) {
    .facil-category-description {
        font-size: 13px;
        line-height: 1.45;
        margin-top: 5px;
        margin-bottom: 14px;
    }
}

.left_footer .address,
.left_footer .address a {
    text-transform: uppercase !important;
}

/* =========================================================
   FACILMENUS - STICKY CATEGORY BAR
========================================================= */

:root {

    /* Space between HEADER/LOGO and category bar */
    --facil-category-top-gap: 10px;

    /* Space between category bar and category title/items */
    --facil-category-bottom-gap: 3px;
}


/* =========================================================
   FIXED CATEGORY BAR
========================================================= */

.view_switcher_wrapper.facil-category-fixed {

    position: fixed !important;


    /*
       HEADER
       +
       15px TOP SPACE
    */

    top: calc(
        var(--facil-header-bottom, 0px) +
        var(--facil-category-top-gap, 15px)
    ) !important;


    /* Keep original horizontal position */

    left: var(
        --facil-category-left,
        0px
    ) !important;


    /* Keep original width */

    width: var(
        --facil-category-width,
        100%
    ) !important;


    /*
       Above food/menu content
       but below side menu
    */

    z-index: 500 !important;


    /* Keep original light/dark background */

    background-color: var(
        --facil-category-background,
        transparent
    ) !important;


    /* Do not change original appearance */

    box-shadow: none !important;


    /*
       Helps prevent flickering/blinking
       on mobile browsers.
    */

    transform: translate3d(0, 0, 0);

    -webkit-transform: translate3d(0, 0, 0);

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    will-change: transform;
}


/* =========================================================
   15PX BACKGROUND SPACE ABOVE CATEGORY BAR
========================================================= */

.view_switcher_wrapper.facil-category-fixed::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;


    /*
       Extend background upward by 15px
    */

    top: calc(
        -1 * var(--facil-category-top-gap, 15px)
    );


    height: var(
        --facil-category-top-gap,
        15px
    );


    background-color: var(
        --facil-category-background,
        transparent
    );


    pointer-events: none;
}


/* =========================================================
   10PX BACKGROUND SPACE BELOW CATEGORY BAR
========================================================= */

.view_switcher_wrapper.facil-category-fixed::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 100%;


    /*
       BOTTOM space is now 10px
    */

    height: var(
        --facil-category-bottom-gap,
        10px
    );


    background-color: var(
        --facil-category-background,
        transparent
    );


    pointer-events: none;
}


/* =========================================================
   PLACEHOLDER

   Prevents page from jumping when category becomes fixed.
========================================================= */

.facil-category-fixed-placeholder {

    display: none;

    width: 100%;
}


.facil-category-fixed-placeholder.active {

    display: block;
}


/* =========================================================
   SIDE / SANDWICH MENU LAYERING

   Keep the sticky category navigation in its real position.
   The left slide-out menu already has a much higher z-index,
   so it covers the page naturally without making the sticky
   navigation disappear.
========================================================= */

.customNavsideBar.activeNav {
    z-index: 9999999 !important;
}

.new_badge {
    display: none !important;
}

/* Hide search bar but keep its space */
.single__cat__header .searchSection {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================
   FACILMENUS - GLOBAL TIMED CATEGORY POPUP
   Dark popup + restaurant theme color
========================================================== */

#globalCategoryTimeNotice {
    position: fixed;
    inset: 0;
    z-index: 99999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.68);
}


/* POPUP BOX */

#globalCategoryTimeNotice .category-time-notice-box {
    width: 100%;
    max-width: 410px;

    background: #2f2f2f;

    border-radius: 9px;

    padding: 30px 28px 27px;

    text-align: center;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.50);

    border: 1px solid rgba(255, 255, 255, 0.07);

    animation: timedCategoryPopupIn 0.18s ease-out;
}


/* NOTICE TITLE */

#globalCategoryTimeNotice .category-time-notice-title {
    margin: 0 0 18px;

    padding: 0;

    font-size: 24px;
    line-height: 1.2;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    color: var(
        --timed-category-theme,
        #e83e8c
    );
}


/* MESSAGE */

#globalCategoryTimeNotice .category-time-notice-message {
    margin: 0 0 25px;

    padding: 0;

    font-size: 16px;
    line-height: 1.6;

    color: #f5f5f5;
}


/* FULL CATEGORY NAME */

#globalCategoryTimeNotice .category-popup-name {
    display: block;

    width: 100%;

    margin: 0 0 9px;

    font-size: 19px;
    line-height: 1.35;

    font-weight: 800;

    color: #ffffff;

    text-transform: uppercase;

    word-break: normal;
    overflow-wrap: break-word;
}


/* DAYS */

#globalCategoryTimeNotice .category-popup-days {
    font-weight: 700;

    color: #ffffff;
}


/* TIMES */

#globalCategoryTimeNotice .category-popup-time {
    font-weight: 700;

    color: #ffffff;
}


/* OK BUTTON */

#globalCategoryTimeNotice .category-time-notice-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 112px;
    min-height: 43px;

    padding: 11px 28px;

    border: none;
    border-radius: 6px;

    background: var(
        --timed-category-theme,
        #e83e8c
    );

    color: #ffffff;

    font-size: 15px;
    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}


#globalCategoryTimeNotice .category-time-notice-close:hover {
    opacity: 0.90;
    transform: translateY(-1px);
}


#globalCategoryTimeNotice .category-time-notice-close:active {
    transform: translateY(0);
}


/* PREVENT BACKGROUND SCROLL */

body.category-time-notice-open {
    overflow: hidden !important;
}


/* POPUP ANIMATION */

@keyframes timedCategoryPopupIn {

    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* MOBILE */

@media (max-width: 575px) {

    #globalCategoryTimeNotice {
        padding: 15px;
    }


    #globalCategoryTimeNotice .category-time-notice-box {
        max-width: 355px;

        padding: 27px 21px 24px;
    }


    #globalCategoryTimeNotice .category-time-notice-title {
        font-size: 22px;
    }


    #globalCategoryTimeNotice .category-popup-name {
        font-size: 18px;
    }


    #globalCategoryTimeNotice .category-time-notice-message {
        font-size: 15px;
    }
}
/* =========================================================
   FACILMENUS - UBER STYLE CATEGORY NAVIGATION
   Built from the original files supplied by the user.
   ========================================================= */

/* Keep the sandwich trigger and the horizontal categories on ONE row. */
.view_switcher_wrapper.facil-uber-ready {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
}

.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot::-webkit-scrollbar {
    display: none;
}

.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* First button = category drawer trigger. Same height as category buttons. */
.gallery_sort.category_shot .facil-category-menu-trigger {
    min-width: 56px !important;
    width: 56px !important;
    height: 100% !important;
    min-height: 60px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: var(--soft-background) !important;
    color: var(--color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.gallery_sort.category_shot .facil-category-menu-trigger i {
    font-size: 22px !important;
    line-height: 1 !important;
}

/* Active category always uses the restaurant theme color. */
.gallery_sort.category_shot .categoryItem.facil-scroll-active,
.gallery_sort.category_shot .categoryItem.active:not(.facil-category-menu-trigger) {
    background: var(--dcolor, var(--defaultColor)) !important;
    border-color: var(--dcolor, var(--defaultColor)) !important;
    color: #fff !important;
}

.gallery_sort.category_shot .categoryItem.facil-scroll-active *,
.gallery_sort.category_shot .categoryItem.active:not(.facil-category-menu-trigger) * {
    color: #fff !important;
}

/* Never let the menu trigger inherit the active-category theme state. */
.gallery_sort.category_shot .facil-category-menu-trigger.active,
.gallery_sort.category_shot .facil-category-menu-trigger.facil-scroll-active {
    background: var(--soft-background) !important;
    border-color: var(--border-color) !important;
    color: var(--color) !important;
}

/* Category drawer backdrop. */
#facilCategoryDrawerBackdrop {
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: rgba(0, 0, 0, .52);
    display: none;
    touch-action: none;
}

#facilCategoryDrawerBackdrop.open {
    display: block;
}

/* Category drawer itself. Only this area scrolls while open. */
#facilCategoryDrawer {
    position: fixed;
    z-index: 999999;
    display: none;
    width: min(360px, calc(100vw - 24px));
    max-height: min(68vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 10px;
    border-radius: 12px;
    background: var(--card-color, var(--soft-background));
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

#facilCategoryDrawer.open {
    display: block;
}

#facilCategoryDrawer .facil-drawer-category {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 9px 10px;
    text-align: left;
    white-space: normal;
}

#facilCategoryDrawer .facil-drawer-category:last-child {
    border-bottom: 0;
}

#facilCategoryDrawer .facil-drawer-category img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50%;
    object-fit: cover;
}

#facilCategoryDrawer .facil-drawer-category.facil-scroll-active {
    background: var(--dcolor, var(--defaultColor)) !important;
    color: #fff !important;
}

/* Lock only background scrolling while the category drawer is open.
   IMPORTANT: never change body to position:fixed here because that moves
   the FOOD / DRINKS + sticky category group out of the viewport. */
html.facil-category-drawer-open,
body.facil-category-drawer-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Keep category sections visible. The bar is navigation, not a filter. */
.homeView[id^="category_"] {
    visibility: visible;
}

@media only screen and (max-width: 767px) {
    .gallery_sort.category_shot .facil-category-menu-trigger {
        min-width: 54px !important;
        width: 54px !important;
        min-height: 54px !important;
    }

    #facilCategoryDrawer {
        width: calc(100vw - 24px);
        max-height: 70vh;
    }
}


/* =========================================================
   FACILMENUS - CATEGORY DRAWER NAMES-ONLY / TOP ALIGN FIX
   Keeps all other Uber category behavior unchanged.
   ========================================================= */
#facilCategoryDrawer .facil-drawer-category {
    min-height: 48px;
    gap: 0;
    padding: 11px 14px;
}

#facilCategoryDrawer .facil-drawer-category span {
    width: 100%;
    display: block;
    font-weight: 600;
    line-height: 1.25;
}

#facilCategoryDrawer .facil-drawer-category img {
    display: none !important;
}


/* =========================================================
   FACILMENUS - FIXED SANDWICH BUTTON INSIDE CATEGORY STRIP
   The first category button stays pinned on the left while
   the remaining category buttons scroll underneath it.
   ========================================================= */
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li.facil-category-menu-trigger-item {
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    background: var(--facil-category-background, var(--body-color)) !important;
    padding-right: 2px !important;
}

/* Keep the fixed trigger visually above buttons passing behind it. */
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li.facil-category-menu-trigger-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, var(--facil-category-background, var(--body-color)), transparent);
}

.gallery_sort.category_shot .facil-category-menu-trigger {
    position: relative !important;
    z-index: 31 !important;
}


/* =========================================================
   FACILMENUS - CATEGORY DRAWER DISMISS BUTTON
   Stays at the bottom of the open category dropdown.
   ========================================================= */
#facilCategoryDrawer .facil-drawer-dismiss {
    position: sticky;
    bottom: 0;
    z-index: 5;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    padding: 11px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--dcolor, var(--defaultColor)) !important;
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 -6px 14px rgba(0, 0, 0, .08);
}

#facilCategoryDrawer .facil-drawer-dismiss:hover,
#facilCategoryDrawer .facil-drawer-dismiss:focus {
    background: var(--dcolor, var(--defaultColor)) !important;
    color: #fff !important;
}


/* =========================================================
   FACILMENUS - DRAWER FOOTER / DISMISS SEPARATION FIX
   Category names scroll only in the area above DISMISS.
   Nothing passes behind the button.
   ========================================================= */
#facilCategoryDrawer {
    overflow: hidden !important;
    display: none;
    flex-direction: column;
    padding: 10px !important;
}

#facilCategoryDrawer.open {
    display: flex !important;
}

#facilCategoryDrawer .facil-drawer-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

#facilCategoryDrawer .facil-drawer-dismiss {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto;
    z-index: 10;
    margin-top: 8px !important;
}

/* =========================================================
   FACILMENUS - NO BANNER MOBILE SPACING FIX
   Only corrects the FOOD/DRINKS heading position when there
   is no real restaurant banner. Banner pages stay unchanged.
========================================================= */
@media only screen and (max-width: 767px) {
    body.facil-no-banner .sliderSectionArea {
        padding-top: 0 !important;
        margin-top: 0 !important;
        min-height: 0 !important;
    }

body.facil-no-banner #fm-menu-switch {
        /* Keep FOOD / DRINKS in the original compact phone position
           when there is no restaurant slider/banner. */
        margin-top: -50px !important;
        padding-top: 5px !important;
    }
}

/* =========================================================
   FACILMENUS - COMPLETE RESTAURANT BANNER ON ALL DEVICES
   Shows the full artwork in every width and orientation.
========================================================= */
.sliderSectionArea .slick-list,
.sliderSectionArea .slick-track,
.sliderSectionArea .slick-slide,
.sliderSectionArea .slick-slide > div,
.sliderSectionArea .sliderWapper,
.sliderSectionArea .sliderWapper .imagesBox {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.sliderSectionArea .sliderWapper .imagesBox img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* V108: clip the moving Slick viewport itself. Rounding only the images lets
   the GPU-transformed track flash square corners during left/right motion. */
.sliderSectionArea .homeSlider,
.sliderSectionArea .homeSlider .slick-list {
    border-radius: 1rem !important;
    overflow: hidden !important;
    isolation: isolate;
    contain: paint;
}

.sliderSectionArea .homeSlider .slick-list {
    clip-path: inset(0 round 1rem);
    -webkit-clip-path: inset(0 round 1rem);
}

.sliderSectionArea .homeSlider .slick-slide,
.sliderSectionArea .homeSlider .slick-slide > div,
.sliderSectionArea .homeSlider .sliderWapper,
.sliderSectionArea .homeSlider .imagesBox,
.sliderSectionArea .homeSlider .imagesBox img {
    border-radius: 1rem !important;
}

/* =========================================================
   FACILMENUS - RESERVATION AVAILABILITY ON PHONES
   Centers the schedule and keeps every day/time on one line.
========================================================= */
@media only screen and (max-width: 767px) {
    .available_days,
    .available_days .appointment_schedule_area {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .available_days .appointment_schedule_area {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .available_days .ap_info {
        padding: 0 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .available_days .appointment_dates {
        width: 100% !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
    }

    .available_days .appointment_dates li {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 7px 2px !important;
        font-size: clamp(10.5px, 3.25vw, 13px) !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    .available_days .appointment_dates li > i {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        flex: 0 0 28px !important;
        margin-right: 7px !important;
        font-size: 16px !important;
        line-height: 26px !important;
    }

    .available_days .appointment_dates li > span {
        width: 76px !important;
        min-width: 76px !important;
        flex: 0 0 76px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    .available_days .appointment_dates li > b {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .available_days .appointment_dates .timeArrow {
        margin: 0 3px !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   FACILMENUS - FOOD / DRINKS + CATEGORY BAR STICK TOGETHER
   ---------------------------------------------------------
   Built on top of the user's supplied style (2).css.

   The JS measures the original FOOD/DRINKS-to-category
   spacing before anything becomes fixed. These rules keep
   that same spacing while both sections stick together.
========================================================= */

/* Placeholder for FOOD / DRINKS while its real block is fixed. */
.facil-menu-switch-fixed-placeholder {
    display: none;
    width: 100%;
    padding: 0;
    border: 0;
}

.facil-menu-switch-fixed-placeholder.active {
    display: block;
}

/* FOOD / DRINKS: fixed vertically, but never horizontally scrollable. */
#fm-menu-switch.facil-menu-switch-fixed {
    position: fixed !important;
    top: var(--facil-menu-switch-fixed-top, 0px) !important;
    left: var(--facil-menu-switch-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--facil-menu-switch-width, 100%) !important;
    z-index: 501 !important;

    /* The category bar ::before paints one continuous background. */
    background: transparent !important;
    box-shadow: none !important;

    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Do not let the large heading box block header buttons. */
    pointer-events: none !important;
}

#fm-menu-switch.facil-menu-switch-fixed .fm-menu-tabs,
#fm-menu-switch.facil-menu-switch-fixed .fm-menu-tabs * {
    pointer-events: auto !important;
}

/* FOOD / DRINKS itself does not move left/right. */
#fm-menu-switch.facil-menu-switch-fixed,
#fm-menu-switch.facil-menu-switch-fixed .fm-menu-tabs {
    overflow-x: visible !important;
    transform: none !important;
}

/* Category bar is fixed at the measured position directly below the tabs. */
.view_switcher_wrapper.facil-category-fixed {
    top: var(
        --facil-category-fixed-top,
        calc(
            var(--facil-header-bottom, 0px) +
            var(--facil-category-top-gap, 10px)
        )
    ) !important;
}

/*
   Paint one uninterrupted background from the bottom of the restaurant
   header down to the category row. This visually joins FOOD / DRINKS
   and the category bar without changing either section's margins.
*/
.view_switcher_wrapper.facil-category-fixed::before {
    top: calc(
        -1 * var(
            --facil-menu-category-backdrop-height,
            var(--facil-category-top-gap, 10px)
        )
    ) !important;

    height: var(
        --facil-menu-category-backdrop-height,
        var(--facil-category-top-gap, 10px)
    ) !important;

    background-color: var(
        --facil-category-background,
        var(--body-color)
    ) !important;
}

/* Keep the small breathing room below the sticky category row. */
.view_switcher_wrapper.facil-category-fixed::after {
    height: var(--facil-category-bottom-gap, 3px) !important;
}

/*
   LEFT SLIDE-OUT MENU:
   Do not hide FOOD / DRINKS or the sticky category row.
   Their z-index is 500/501 and the side menu is 9999999,
   so the side menu remains safely above them.
*/

/* Horizontal movement stays ONLY inside the category row. */
.view_switcher_wrapper.facil-category-fixed
.gallery_sort.category_shot {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   CATEGORY TITLE CLEARANCE
   Adds a little breathing room below the complete sticky
   FOOD / DRINKS + category navigation group.
   ========================================================= */
:root {
    --facil-category-title-gap: 10px;
}

/* =========================================================
   FACILMENUS - LEFT SIDE MENU MUST COVER STICKY MENU
   ---------------------------------------------------------
   Applies ONLY to the restaurant navigation drawer
   (.customNavsideBar). The category drawer sandwich inside
   the sticky bar is not affected.

   Some Theme 1 parents create their own stacking context, so
   z-index alone cannot always place the side drawer above the
   fixed FOOD/DRINKS group. Hide the fixed group only for the
   exact time the left drawer is open, then restore instantly.
========================================================= */

body:has(.customNavsideBar.activeNav)
#fm-menu-switch.facil-menu-switch-fixed,
body.facil-side-menu-open
#fm-menu-switch.facil-menu-switch-fixed,
body:has(.customNavsideBar.activeNav)
.view_switcher_wrapper.facil-category-fixed,
body.facil-side-menu-open
.view_switcher_wrapper.facil-category-fixed {
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

/* The restaurant side drawer and its dark overlay remain on top. */
.customNavsideBar.activeNav {
    z-index: 2147483000 !important;
}

/* Keep the sticky group stable when it returns after the side menu closes. */
#fm-menu-switch.facil-menu-switch-fixed,
.view_switcher_wrapper.facil-category-fixed {
    transition: none !important;
}

/* ==========================================================
   FACILMENUS - PWA INSTALL POPUP RESTORE
   Phones hidden; tablets + desktop supported.
   ========================================================== */

/* Start hidden. JavaScript reveals it only when appropriate. */
.add-to,
.add-to-2 {
    display: none !important;
}

.add-to.facil-pwa-visible,
.add-to-2.facil-pwa-visible {
    display: block !important;
}

/* Keep phones completely free of the PWA popup. */
html.facil-pwa-phone .add-to,
html.facil-pwa-phone .add-to-2 {
    display: none !important;
}

/* Restored square popup design from the latest approved PWA styling. */
.add-to-area {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 340px !important;
    padding: 26px 22px 22px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    background: var(--background-color) !important;
    color: var(--color) !important;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28) !important;
}

.add-to-area .pwaContent {
    order: 1;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.add-to-area .pwaContent > img {
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 14px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    display: block !important;
}

.add-to-area .pwaDetails {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.add-to-area .pwaContent h4 {
    margin: 0 0 4px !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.add-to-area .pwaDetails p {
    display: none !important;
}

.add-to-area .add-to-btn,
.add-to-area button.add-to-btn,
.add-to-area .btn-primary.add-to-btn,
.add-to-area .add-to-btn-2,
.add-to-area button.add-to-btn-2,
.add-to-area .btn-primary.add-to-btn-2 {
    width: 100% !important;
    min-height: 46px !important;
    margin: 14px 0 0 !important;
    padding: 11px 16px !important;
    border: 2px solid var(--dcolor, var(--defaultColor)) !important;
    border-radius: 8px !important;
    background: var(--dcolor, var(--defaultColor)) !important;
    background-color: var(--dcolor, var(--defaultColor)) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

.add-to-area > a.pwaClose {
    order: 2;
    position: static !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 9px 0 0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--dcolor, var(--defaultColor)) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--dcolor, var(--defaultColor)) !important;
    text-decoration: none !important;
    font-size: 0 !important;
    font-weight: 700 !important;
}

.add-to-area > a.pwaClose i {
    display: none !important;
}

.add-to-area > a.pwaClose::after {
    content: "Dismiss";
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--dcolor, var(--defaultColor)) !important;
}

body.facil-pwa-open {
    overflow: hidden !important;
}

/* =========================================================
   FACILMENUS - RESTAURANT SLIDER SWIPE + ZOOM GALLERY
   Global for every restaurant using the home slider.
========================================================= */
.sliderSectionArea .homeSlider .imagesBox img {
    cursor: zoom-in !important;
    -webkit-tap-highlight-color: transparent;
}

html.facil-slider-gallery-open,
body.facil-slider-gallery-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.facil-slider-gallery {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 30px);
    background: rgba(0, 0, 0, 0.68);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.facil-slider-gallery.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.facil-slider-gallery-card {
    width: min(96vw, 1500px);
    height: auto;
    max-height: min(94vh, 1100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    pointer-events: none;
}

.facil-slider-gallery-stage {
    position: relative;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(94vh - 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    touch-action: none;
    pointer-events: auto;
}

/*
   When zoomed, let the photo grow outside its original image frame.
   The full-screen gallery remains the visual boundary, not the old image box.
*/
.facil-slider-gallery-stage.is-zoomed {
    overflow: visible;
    z-index: 4;
}

.facil-slider-gallery-stage.is-zoomed .facil-slider-gallery-image {
    position: relative;
    z-index: 4;
}

.facil-slider-gallery-image {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100% - 78px);
    max-height: calc(94vh - 96px);
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.48);
    transform: translate3d(0,0,0) scale(1);
    transform-origin: center center;
    transition: transform 180ms ease, opacity 170ms ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    cursor: zoom-in;
}

.facil-slider-gallery-image.is-zoomed {
    cursor: grab;
}

.facil-slider-gallery-image.is-manipulating,
.facil-slider-gallery-image.is-dragging {
    transition: none !important;
}

.facil-slider-gallery-image.is-zoomed.is-manipulating {
    cursor: grabbing;
}

.facil-slider-gallery-image.slide-from-right {
    animation: facilGalleryFromRight 180ms ease;
}

.facil-slider-gallery-image.slide-from-left {
    animation: facilGalleryFromLeft 180ms ease;
}

@keyframes facilGalleryFromRight {
    from { opacity: .45; transform: translate3d(22px,0,0) scale(.99); }
    to   { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes facilGalleryFromLeft {
    from { opacity: .45; transform: translate3d(-22px,0,0) scale(.99); }
    to   { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

.facil-slider-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.52);
    color: #fff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
}

.facil-slider-gallery-nav[hidden] {
    display: none !important;
}

.facil-slider-gallery-prev { left: 8px; }
.facil-slider-gallery-next { right: 8px; }

.facil-slider-gallery-counter {
    position: relative;
    z-index: 8;
    flex: 0 0 auto;
    min-height: 20px;
    margin-top: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    pointer-events: none;
}

.facil-slider-gallery-close {
    position: relative;
    z-index: 9;
    flex: 0 0 auto;
    min-width: 150px;
    margin-top: 15px;
    min-height: 44px;
    padding: 10px 24px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
}

.facil-slider-gallery-close:focus-visible,
.facil-slider-gallery-nav:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.82);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .facil-slider-gallery {
        padding: 10px;
    }

    .facil-slider-gallery-card {
        width: 100%;
        height: auto;
        max-height: 96vh;
        gap: 0;
    }

    .facil-slider-gallery-stage {
        border-radius: 9px;
    }

    .facil-slider-gallery-image {
        max-width: 96vw;
        max-height: calc(96vh - 110px);
        border-radius: 9px;
    }

    /* Swiping is primary navigation on phones/tablets. */
    .facil-slider-gallery-nav {
        width: 38px;
        height: 38px;
        font-size: 22px;
        background: rgba(0, 0, 0, 0.40);
    }

    .facil-slider-gallery-prev { left: 4px; }
    .facil-slider-gallery-next { right: 4px; }

    .facil-slider-gallery-close {
        width: min(260px, 80vw);
        min-height: 46px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .facil-slider-gallery-nav {
        opacity: .72;
    }
}

@media (prefers-reduced-motion: reduce) {
    .facil-slider-gallery,
    .facil-slider-gallery-image {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   FACILMENUS - QR / TABLE SESSION STATUS BAR
   ---------------------------------------------------------
   SAFE NAVBAR LAYOUT FIX
   - Status bar is a separate fixed row ABOVE the navbar.
   - Original 50px restaurant logo/navigation bar is untouched.
   - Original logo sizing/alignment is untouched.
   - Original slider spacing below the logo bar is untouched.
   - Display-only: no Call Waiter / checkout / QR logic here.
========================================================= */
.fm-qr-table-status-row {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 4px 8px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nav-color, var(--background-color, #fff));
}

.fm-qr-table-status-bar {
    box-sizing: border-box;
    width: min(100%, 1140px);
    height: 32px;
    min-height: 32px;
    margin: 0 auto;
    padding: 3px 9px 3px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--dcolor, var(--defaultColor, #50cd89));
    border-radius: 10px;
    background: transparent;
    color: var(--color, #222);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .08);
    overflow: hidden;
}

@supports (background: color-mix(in srgb, #000 10%, #fff)) {
    .fm-qr-table-status-bar {
        background: color-mix(
            in srgb,
            var(--dcolor, var(--defaultColor, #50cd89)) 6%,
            var(--nav-color, var(--background-color, #fff))
        );
    }
}

.fm-qr-table-status-left,
.fm-qr-table-status-state {
    min-width: 0;
    display: inline-flex;
    align-items: center;
}

.fm-qr-table-status-left {
    flex: 1 1 auto;
    gap: 7px;
}

.fm-qr-table-status-state {
    flex: 0 0 auto;
    gap: 6px;
    white-space: nowrap;
}

.fm-qr-table-status-icon {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dcolor, var(--defaultColor, #50cd89));
    border-radius: 7px;
    color: var(--dcolor, var(--defaultColor, #50cd89));
    font-size: 12px;
    line-height: 1;
}

.fm-qr-table-status-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color, #222);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .1px;
}

.fm-qr-table-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #2fbd62;
    box-shadow: 0 0 0 2px rgba(47, 189, 98, .12);
}

.fm-qr-table-status-text {
    color: var(--color, #222);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.fm-qr-table-status-bar.is-expired .fm-qr-table-status-dot {
    background: #e34242;
    box-shadow: 0 0 0 2px rgba(227, 66, 66, .12);
}

/* ---------------------------------------------------------
   THEME 1 / THEME 4
   Keep the original navbar EXACTLY 50px tall.  The only
   addition is 38px of reserved space above it for the status.
--------------------------------------------------------- */
.customNavBar.fm-qr-status-active {
    height: 88px !important; /* original 50px + status 38px */
    min-height: 88px !important;
}

.customNav.fm-qr-status-active {
    /* Preserve the original .customNav layout; only move it down. */
    top: 38px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}

/* Status is taken completely out of the navbar flex layout so it
   can NEVER compress/crop the logo row or push the right icons. */
.customNav.fm-qr-status-active > .fm-qr-table-status-row {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 91 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
}

/* Explicitly restore the original logo/nav container dimensions.
   These match the pre-status-bar behavior and prevent clipping. */
.customNav.fm-qr-status-active > .container.restaurant-container {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: auto;
    margin-bottom: auto;
    flex: initial !important;
    order: initial !important;
}

/* Do not move or resize the side drawer relative to the original
   50px navigation row. It naturally starts below the status row
   because .customNav itself now begins at 38px. */
.customNav.fm-qr-status-active > .customNavsideBar {
    top: 0 !important;
    height: 100dvh !important;
}

/* ---------------------------------------------------------
   MENU STYLE 2 / 3 DESKTOP
   Same idea: reserve 38px above the pre-existing fixed navbar,
   without changing the navbar's own dimensions.
--------------------------------------------------------- */
.userMenu.fm-qr-status-active {
    height: 100px !important; /* original 62px + 38px status */
    min-height: 100px !important;
}

.userMenu.fm-qr-status-active > .fm-qr-table-status-row {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1031 !important;
}

.userMenu.fm-qr-status-active .navbar.fixed-top {
    top: 38px !important;
}

/* Style 3 mobile has its own mobile navigation. */
.fm-qr-style3-mobile-status {
    width: 100%;
    min-height: 38px;
    align-items: stretch !important;
}

.fm-qr-style3-mobile-status > .fm-qr-table-status-row {
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .fm-qr-table-status-row {
        padding-left: 7px;
        padding-right: 7px;
    }

    .fm-qr-table-status-bar {
        padding-right: 8px;
        gap: 7px;
        border-radius: 9px;
    }

    .fm-qr-table-status-name {
        font-size: 12.5px;
    }

    .fm-qr-table-status-text {
        font-size: 11.5px;
    }
}


/* =========================================================
   FACILMENUS - QR STATUS / ORIGINAL NAV + SLIDER SPACING FIX
   ---------------------------------------------------------
   Tablet/mobile originally use an auto-height fixed navbar and
   4.5rem slider clearance.  Keep that original behavior and only
   add the 38px QR status row above it.
========================================================= */
@media only screen and (max-width: 991px) {
    /* Restore the exact responsive navbar behavior used before
       the QR status bar. This lets the dark navbar background grow
       with the full restaurant logo instead of clipping at 50px. */
    .customNav.fm-qr-status-active {
        top: 38px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background: var(--nav-color) !important;
    }

    /* On tablet/mobile the original .customNavBar is auto-height;
       the fixed navbar itself is cleared by slider margin. Do not
       reserve another 88px in normal document flow. */
    .customNavBar.fm-qr-status-active {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: var(--nav-color) !important;
    }

    /* Original responsive.css uses 4.5rem here. Add only the 38px
       QR status height. Use :has() instead of an adjacent-sibling
       selector because FacilMenus may render modals/other markup
       between the navbar wrapper and slider section. */
    body:has(.customNav.fm-qr-status-active) .sliderSectionArea,
    body:has(.customNavBar.fm-qr-status-active) .sliderSectionArea {
        margin-top: calc(4.5rem + 38px) !important;
    }
}

/* =========================================================
   FACILMENUS - QR STATUS GLOBAL HEADER OFFSET FIX
   ---------------------------------------------------------
   Tablet/mobile originally position page content for the
   restaurant navbar only. The QR status row adds 38px above
   that fixed navbar, so move ALL normal page content down by
   exactly 38px while the QR row is present.

   This preserves each page's original spacing instead of
   maintaining separate fixes for Menu/Slider, Checkout,
   Reservation, About Us, Contacts, etc.
========================================================= */
@media only screen and (max-width: 991px) {
    /* One global 38px compensation for the new fixed QR row.
       Fixed navbar/status elements themselves are unaffected by
       parent padding, while every normal page section is shifted
       together. */
    body:has(.customNav.fm-qr-status-active) .mainWrapper,
    body:has(.customNavBar.fm-qr-status-active) .mainWrapper {
        padding-top: 38px !important;
        box-sizing: border-box !important;
    }

    /* The global mainWrapper offset above already accounts for the
       QR row. Return the menu slider to FacilMenus' ORIGINAL
       responsive clearance so the logo-bar -> slider gap is the
       same as it was before the QR status bar was added. */
    body:has(.customNav.fm-qr-status-active) .sliderSectionArea,
    body:has(.customNavBar.fm-qr-status-active) .sliderSectionArea {
        margin-top: 4.5rem !important;
    }
}

/* =========================================================
   FACILMENUS - MOBILE CART FOOTER REACHABILITY
   Keeps the cart Price / Checkout controls slightly higher
   on phone screens without changing cart or checkout logic.
========================================================= */
@media only screen and (max-width: 600px) {
    .shopping_cart .cart_body {
        height: calc(95vh - 230px) !important;
        height: calc(95dvh - 230px) !important;
        overflow-y: auto !important;
    }
}

/* =========================================================
   FACILMENUS - PLAY WHILE YOU WAIT (V1)
========================================================= */
.fm-games-nav-link{display:flex!important;align-items:center;gap:8px}.fm-games-nav-icon{font-size:16px;line-height:1}.fm-games-overlay{position:fixed;inset:0;z-index:2147483000;background:rgba(8,8,10,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;padding:0}.fm-games-overlay.is-open{opacity:1;visibility:visible}.fm-games-shell{position:absolute;inset:0;background:#111214;color:#fff;display:flex;flex-direction:column;overflow:hidden}.fm-games-head{height:72px;min-height:72px;padding:10px 14px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.09);background:#151619}.fm-games-title-wrap{min-width:0;flex:1;text-align:center}.fm-games-kicker{font-size:9px;letter-spacing:1.4px;font-weight:800;color:var(--dcolor,#e91e63);margin-bottom:1px}.fm-games-title{font-size:20px!important;line-height:1.15!important;color:#fff!important;margin:0!important;font-weight:800!important}.fm-games-close,.fm-games-back{width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;padding:0}.fm-games-back{font-size:22px}.fm-games-back[hidden]{visibility:hidden;display:flex!important}.fm-games-content{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 30px;max-width:620px;width:100%;margin:0 auto}.fm-games-intro{text-align:center;color:#b9bcc3;font-size:14px;line-height:1.5;margin:2px auto 18px;max-width:360px}.fm-games-grid{display:grid;grid-template-columns:1fr;gap:12px}.fm-game-card{width:100%;border:1px solid rgba(255,255,255,.09);background:#1b1d21;color:#fff;border-radius:16px;padding:15px 14px;display:flex;align-items:center;text-align:left;box-shadow:none}.fm-game-card:active{transform:scale(.985)}.fm-game-card-icon{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:25px;flex:0 0 auto}.fm-game-card-copy{display:flex;flex-direction:column;gap:3px;min-width:0;padding-left:12px}.fm-game-card-copy strong{font-size:16px;color:#fff}.fm-game-card-copy small{font-size:12px;line-height:1.35;color:#9da1a9}.fm-game-card-arrow{margin-left:auto;padding-left:8px;font-size:27px;color:var(--dcolor,#e91e63)}.fm-game-status,.fm-trivia-progress{display:flex;justify-content:space-between;gap:10px;color:#c5c8ce;font-size:13px;margin:0 2px 14px}.fm-game-status b,.fm-trivia-progress span:last-child{color:#fff}.fm-memory-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:430px;margin:0 auto}.fm-memory-card{aspect-ratio:1/1;border:0;border-radius:14px;background:#24262b;color:#fff;position:relative;overflow:hidden;font-size:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}.fm-memory-front,.fm-memory-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,opacity .2s ease}.fm-memory-back{font-weight:900;font-size:23px;background:linear-gradient(145deg,var(--dcolor,#e91e63),#24262b)}.fm-memory-front{opacity:0;transform:scale(.7)}.fm-memory-card.is-flipped .fm-memory-back,.fm-memory-card.is-matched .fm-memory-back{opacity:0;transform:scale(.7)}.fm-memory-card.is-flipped .fm-memory-front,.fm-memory-card.is-matched .fm-memory-front{opacity:1;transform:scale(1)}.fm-memory-card.is-matched{box-shadow:inset 0 0 0 2px var(--dcolor,#e91e63)}.fm-game-restart,.fm-game-primary,.fm-game-secondary,.fm-trivia-next{display:block;width:100%;max-width:430px;margin:18px auto 0;border:0;border-radius:12px;padding:13px 16px;font-weight:800;font-size:14px}.fm-game-restart,.fm-game-primary,.fm-trivia-next{background:var(--dcolor,#e91e63);color:#fff}.fm-game-secondary{background:#272a30;color:#fff;margin-top:10px}.fm-ttt-note{text-align:center;color:#bfc2c8;font-size:13px;margin:2px 0 16px}.fm-ttt-board{width:min(84vw,390px);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto}.fm-ttt-cell{aspect-ratio:1/1;border:0;border-radius:15px;background:#22252a;color:var(--dcolor,#e91e63);font-size:clamp(35px,13vw,62px);font-weight:800}.fm-ttt-cell.is-o{color:#fff}.fm-ttt-result{text-align:center;min-height:28px;margin-top:14px;font-size:17px;font-weight:800;color:#fff}.fm-trivia-question{font-size:21px;font-weight:800;line-height:1.35;text-align:center;margin:18px auto 22px;max-width:470px}.fm-trivia-answers{display:grid;gap:10px;max-width:470px;margin:0 auto}.fm-trivia-answer{border:1px solid rgba(255,255,255,.1);background:#212328;color:#fff;border-radius:13px;padding:14px;text-align:left;font-weight:700}.fm-trivia-answer.is-correct{background:#1f6d45;border-color:#2fa96b}.fm-trivia-answer.is-wrong{background:#7a2d36;border-color:#d55a67}.fm-trivia-answer:disabled{opacity:1}.fm-word-help{text-align:center;color:#bfc2c8;font-size:13px;margin-bottom:12px}.fm-word-list{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-bottom:14px}.fm-word-list span{padding:5px 9px;border-radius:999px;background:#25282d;color:#d3d5da;font-size:11px;font-weight:800;letter-spacing:.5px}.fm-word-list span.is-found{background:var(--dcolor,#e91e63);color:#fff;text-decoration:line-through}.fm-word-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;max-width:500px;margin:0 auto;background:#181a1e;padding:6px;border-radius:12px}.fm-word-cell{aspect-ratio:1/1;min-width:0;padding:0;border:0;border-radius:5px;background:#25282d;color:#fff;font-size:clamp(10px,3.3vw,16px);font-weight:800}.fm-word-cell.is-start{box-shadow:inset 0 0 0 2px var(--dcolor,#e91e63);background:#343841}.fm-word-cell.is-found{background:var(--dcolor,#e91e63);color:#fff}.fm-word-message{text-align:center;min-height:22px;margin-top:12px;color:#c8cbd1;font-size:13px}.fm-game-win{text-align:center;padding:35px 10px 10px;max-width:430px;margin:0 auto}.fm-game-win-icon{font-size:58px}.fm-game-win h3{font-size:25px!important;color:#fff!important;margin:13px 0 6px!important}.fm-game-win p{color:#bfc2c8;font-size:14px;margin:0 0 22px}.fm-games-open{position:fixed!important;left:0;right:0;width:100%;overflow:hidden!important}.fm-game-win-actions{width:100%}.fm-game-win.fm-tap-win{min-height:100%;display:flex;flex-direction:column;align-items:center;padding-top:clamp(34px,9vh,92px)}.fm-game-win.fm-tap-win .fm-game-win-actions{margin-top:auto;padding-bottom:max(20px,env(safe-area-inset-bottom))}.fm-game-win.fm-tap-win .fm-game-primary:disabled{opacity:.62;pointer-events:none}
@media(min-width:700px){.fm-games-overlay{padding:28px}.fm-games-shell{inset:28px;max-width:700px;margin:auto;border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.45)}.fm-games-grid{grid-template-columns:1fr 1fr}.fm-games-content{padding:24px}.fm-memory-board{grid-template-columns:repeat(4,1fr)}}
@media(max-width:360px){.fm-games-content{padding-left:11px;padding-right:11px}.fm-word-grid{gap:1px;padding:4px}.fm-word-cell{border-radius:3px}}

/* =========================================================
   FACILMENUS - SIDE MENU CALL WAITER POSITION
   Move the footer actions slightly upward without changing
   the sandwich-menu structure or Call Waiter behavior.
========================================================= */
.customNavsideBar .topFooter {
    padding-bottom: 50px !important;
}

/* FACILMENUS - HIDE VISIBLE SLIDER ARROW CONTROLS */
.singlehighlightSlider .slick-arrow,
.itemSlider .slick-arrow,
.sliderSectionArea .slick-arrow,
.homeSlider .slick-arrow {
    display: none !important;
}

/* =========================================================
   FACILMENUS - MINI TUTORIAL / QR REQUIRED / QUICK VIEW PRICE
========================================================= */
.fm-quick-tutorial-overlay{
  position:fixed;
  inset:0;
  z-index:2147483300;
  cursor:pointer;
  pointer-events:auto;
}
.fm-quick-tutorial-blur{
  position:fixed;
  z-index:2147483200;
  background:rgba(0,0,0,.30);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  pointer-events:none;
}
.fm-quick-tutorial-target{
  position:relative!important;
  z-index:2147483202!important;
  outline:none!important;
  outline-offset:0!important;
  border-radius:12px!important;
  box-shadow:0 10px 34px rgba(0,0,0,.26)!important;
}

.fm-quick-tutorial-target,
.fm-quick-tutorial-target *{
  filter:none!important;
  -webkit-filter:none!important;
}
.fm-quick-tutorial-target [data-facil-menu-url],
.fm-quick-tutorial-target a,
.fm-quick-tutorial-target button{
  opacity:1!important;
}
.fm-quick-tutorial-tip{
  position:fixed;
  z-index:2147483204;
  max-width:min(290px,calc(100vw - 28px));
  min-width:150px;
  min-height:50px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:10px 16px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.98);
  color:#111;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 38px rgba(0,0,0,.30);
  font-size:14px;
  font-weight:800;
  line-height:1.15;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(5px) scale(.985);
  transition:opacity .20s ease,transform .20s ease;
}
.fm-quick-tutorial-tip.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.fm-quick-tutorial-progress{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:#777;
}
.fm-quick-tutorial-label{
  display:block;
  font-size:14px;
  font-weight:800;
  color:#111;
}
.fm-quick-tutorial-arrow{
  position:absolute;
  width:0;
  height:0;
  border:8px solid transparent;
}
.fm-quick-tutorial-tip[data-arrow="up"] .fm-quick-tutorial-arrow{
  top:-16px;left:var(--fm-tutorial-arrow-left,50%);transform:translateX(-50%);
  border-bottom-color:#fff;
}
.fm-quick-tutorial-tip[data-arrow="down"] .fm-quick-tutorial-arrow{
  bottom:-16px;left:var(--fm-tutorial-arrow-left,50%);transform:translateX(-50%);
  border-top-color:#fff;
}
.fm-quick-tutorial-tip[data-arrow="none"] .fm-quick-tutorial-arrow{display:none}
.fm-quick-tutorial-tip[data-arrow="big-down"]{
  padding-bottom:18px;
}
.fm-quick-tutorial-tip[data-arrow="big-down"] .fm-quick-tutorial-arrow{
  width:18px;
  height:18px;
  bottom:-31px;
  left:var(--fm-tutorial-arrow-left,50%);
  transform:translateX(-50%) rotate(45deg);
  border:0;
  border-right:4px solid #fff;
  border-bottom:4px solid #fff;
  background:transparent;
}
.fm-quick-tutorial-skip{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:2147483647!important;
  isolation:isolate;
  pointer-events:auto!important;
  border:1px solid rgba(255,255,255,.40);
  background:rgba(18,18,18,.68);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  border-radius:999px;
  padding:9px 18px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.20);
}
@media (max-width:767px){
  .fm-quick-tutorial-skip{
    bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));
    left:50%;
    right:auto;
    transform:translateX(-50%);
    padding:10px 20px;
    font-size:12px;
  }
  .fm-quick-tutorial-tip{
    max-width:calc(100vw - 32px);
  }
}
@media (prefers-reduced-motion:reduce){
  .fm-quick-tutorial-overlay,
  .fm-quick-tutorial-tip,
  .fm-quick-tutorial-target{transition:none!important}
}

.fm-qr-required-overlay{position:fixed;inset:0;z-index:2147483300;background:rgba(0,0,0,.66);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.fm-qr-required-card{width:min(92vw,390px);background:var(--background-color,#191d2b);color:var(--color,#fff);border:1px solid var(--border-color,rgba(255,255,255,.12));border-radius:16px;padding:24px 20px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.fm-qr-required-icon{font-size:34px;line-height:1;margin-bottom:10px}
.fm-qr-required-card h4{font-size:19px;margin-bottom:7px;color:var(--color,#fff)}
.fm-qr-required-card p{font-size:14px;line-height:1.45;margin:0 auto 17px;max-width:310px}
.fm-qr-required-ok{border:0;border-radius:10px;background:var(--dcolor,var(--defaultColor));color:#fff;padding:10px 26px;font-weight:700}

.itemTitle h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fm-item-title-price{font-size:.9em;font-weight:700;color:var(--dcolor,var(--defaultColor));white-space:nowrap}
.fm-variant-choice-group+.fm-variant-choice-group{margin-top:14px;padding-top:10px;border-top:1px solid var(--border-color,rgba(255,255,255,.1))}
.fm-variant-separator{opacity:.55;padding:0 3px}



/* =========================================================
   FACILMENUS - PRODUCT CARD TAP + SLIDER ARROW CLEANUP
   ========================================================= */

/* Hide the two visible pink slider arrow controls. */
.singlehighlightSlider .slick-arrow,
.itemSlider .slick-arrow,
.sliderSectionArea .slick-arrow,
.homeSlider .slick-arrow,
.sliderSectionArea .slick-prev,
.sliderSectionArea .slick-next,
.homeSlider .slick-prev,
.homeSlider .slick-next {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* The whole Theme 1 product card is a clean tap target. */
.modern_item_card,
.modern_item_card .item_thumb_inner,
.modern_item_card .item_details,
.modern_item_card .item_title_wrapper,
.modern_item_card .item_title,
.modern_item_card .item_desc,
.modern_item_card .item_price_action,
.modern_item_card .item_price {
    cursor: pointer;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

.modern_item_card {
    touch-action: manipulation;
}

/* Keep real controls independent, especially the + Add button. */
.modern_item_card button,
.modern_item_card a,
.modern_item_card input,
.modern_item_card textarea,
.modern_item_card select,
.modern_item_card label {
    -webkit-touch-callout: default;
}

.modern_item_card input,
.modern_item_card textarea,
.modern_item_card select {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

/* =========================================================
   FACILMENUS - ALIGNED MODERN COMPACT PRODUCT CARDS
   Keeps every grid card visually aligned from product to product.
   ========================================================= */

/* Grid columns become equal-height card cells. */
.grid_view .col-custom {
    display: flex !important;
    align-items: stretch !important;
}

.grid_view .modern_item_card {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    margin-bottom: 0 !important;
    border-radius: 16px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent) !important;
    background: var(--card-color) !important;
    box-shadow: 0 3px 14px rgba(0,0,0,.07) !important;
    overflow: hidden !important;
}

.grid_view .modern_item_card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.11) !important;
}

/* One predictable internal structure on every card. */
.grid_view .item_thumb_inner {
    display: grid !important;
    grid-template-rows: 168px minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    align-items: stretch !important;
}

.grid_view .modern_item_card.no_img .item_thumb_inner {
    grid-template-rows: minmax(0, 1fr) !important;
}

.grid_view .item_img_box {
    width: 100% !important;
    height: 168px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.grid_view .item_img {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}

.grid_view .item_details {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    min-height: 142px !important;
    padding: 11px 12px 12px !important;
    gap: 0 !important;
    justify-content: stretch !important;
}

/* Fixed title footprint: 1-line and 2-line names still align. */
.grid_view .item_title_wrapper {
    min-width: 0 !important;
}

.grid_view .item_title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: 2.48em !important;
    max-height: 2.48em !important;
    margin: 0 0 4px !important;
    font-size: .92rem !important;
    line-height: 1.24 !important;
    font-weight: 750 !important;
    letter-spacing: -.01em !important;
}

/* Description always occupies the same two-line slot. */
.grid_view .item_desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: 2.5em !important;
    max-height: 2.5em !important;
    margin: 0 !important;
    font-size: .76rem !important;
    line-height: 1.25 !important;
    opacity: .68 !important;
}

/* Price and + always land on the exact same baseline. */
.grid_view .item_price_action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    align-items: end !important;
    width: 100% !important;
    min-height: 36px !important;
    margin-top: 9px !important;
    padding: 0 !important;
    gap: 8px !important;
}

.grid_view .item_price,
.grid_view .priceGroup {
    min-width: 0 !important;
    margin: 0 !important;
}

.grid_view .priceGroup {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 2px 5px !important;
    line-height: 1.1 !important;
}

.grid_view .item_price .price_discount,
.grid_view .priceGroup > span {
    font-size: .94rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}

.grid_view .item_action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 32px !important;
    min-width: 32px !important;
}

.grid_view .add_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--dcolor) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dcolor) 28%, transparent) !important;
    font-size: .78rem !important;
    line-height: 1 !important;
}

.grid_view .add_btn:hover {
    transform: translateY(-1px) scale(1.04) !important;
    filter: brightness(.96) !important;
}

.grid_view .add_btn .add_text {
    display: none !important;
}

/* Badge refinement so it sits consistently on every image. */
.grid_view .new_badge {
    top: 8px !important;
    left: 8px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: .6rem !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.16) !important;
}

/* Compact phone proportions while preserving exact alignment. */
@media (max-width: 575px) {
    .grid_view .items_row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }

    .grid_view .col-custom {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px !important;
    }

    .grid_view .modern_item_card {
        border-radius: 14px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.065) !important;
    }

    .grid_view .item_thumb_inner {
        grid-template-rows: 132px minmax(0, 1fr) !important;
    }

    .grid_view .modern_item_card.no_img .item_thumb_inner {
        grid-template-rows: minmax(0, 1fr) !important;
    }

    .grid_view .item_img_box {
        height: 132px !important;
    }

    .grid_view .item_details {
        min-height: 128px !important;
        padding: 9px 9px 10px !important;
    }

    .grid_view .item_title {
        min-height: 2.42em !important;
        max-height: 2.42em !important;
        margin-bottom: 3px !important;
        font-size: .84rem !important;
        line-height: 1.21 !important;
    }

    .grid_view .item_desc {
        min-height: 2.4em !important;
        max-height: 2.4em !important;
        font-size: .7rem !important;
        line-height: 1.2 !important;
    }

    .grid_view .item_price_action {
        grid-template-columns: minmax(0, 1fr) 30px !important;
        min-height: 32px !important;
        margin-top: 7px !important;
        gap: 5px !important;
    }

    .grid_view .item_price .price_discount,
    .grid_view .priceGroup > span {
        font-size: .84rem !important;
    }

    .grid_view .item_action {
        width: 30px !important;
        min-width: 30px !important;
    }

    .grid_view .add_btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: .72rem !important;
    }
}

/* Keep dark-mode cards polished without changing restaurant colors. */
.theme-dark .grid_view .modern_item_card {
    box-shadow: 0 3px 16px rgba(0,0,0,.20) !important;
}


/* FACILMENUS GAMES V2 */
.fm-games-section-title{display:flex;align-items:center;gap:10px;margin:5px 0 10px;color:#9ba0a9;font-size:11px;font-weight:900;letter-spacing:1.25px}.fm-games-section-title:after{content:"";height:1px;background:rgba(255,255,255,.09);flex:1}.fm-games-section-gap{margin-top:24px}.fm-player-choice{max-width:430px;margin:22px auto;text-align:center}.fm-player-choice-icon{font-size:50px}.fm-player-choice h3{margin:10px 0 5px!important;color:#fff!important;font-size:23px!important}.fm-player-choice p{margin:0 0 18px;color:#aeb2ba}.fm-player-mode{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px 18px;margin:10px 0;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:#202227;color:#fff;text-align:left}.fm-player-mode small{color:#aeb2ba}.fm-hangman-face{text-align:center;font-size:60px}.fm-hangman-word{text-align:center;font-size:clamp(24px,8vw,36px);font-weight:900;letter-spacing:4px;margin:18px 0}.fm-hangman-meta{text-align:center;color:#bfc2c8;margin-bottom:14px}.fm-hangman-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:470px;margin:0 auto}.fm-hangman-keys button{aspect-ratio:1;border:0;border-radius:9px;background:#292c32;color:#fff;font-weight:800}.fm-hangman-keys button:disabled{opacity:.25}.fm-connect4{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:430px;margin:0 auto;background:#252830;padding:8px;border-radius:16px}.fm-c4-cell{aspect-ratio:1;border:0;border-radius:50%;background:#111318}.fm-c4-cell.p1{background:var(--dcolor,#e8288f)}.fm-c4-cell.p2{background:#f2c94c}.fm-dots-board{display:grid;grid-template-columns:12px 1fr 12px 1fr 12px 1fr 12px;grid-template-rows:12px 1fr 12px 1fr 12px 1fr 12px;width:min(88vw,430px);aspect-ratio:1;margin:0 auto}.fm-dot{width:10px;height:10px;border-radius:50%;background:#fff;align-self:center;justify-self:center}.fm-edge{border:0;background:transparent;padding:0}.fm-edge-h{height:8px;align-self:center}.fm-edge-v{width:8px;justify-self:center}.fm-edge:before{content:"";display:block;width:100%;height:100%;background:#383c44;border-radius:8px}.fm-edge.is-taken.p1:before{background:var(--dcolor,#e8288f)}.fm-edge.is-taken.p2:before{background:#f2c94c}.fm-box{display:flex;align-items:center;justify-content:center;margin:3px;border-radius:8px;font-weight:900;color:#fff}.fm-box.p1{background:rgba(232,40,143,.36)}.fm-box.p2{background:rgba(242,201,76,.30)}

/* =========================================================
   FACILMENUS CUSTOMER EXPERIENCE V3
   - QR status center service message (no extra bar height)
   - Add-to-cart confirmation
   - Smart Call Waiter request choices
========================================================= */
.fm-qr-table-status-bar{position:relative}
.fm-qr-table-status-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:48%;min-width:0;text-align:center;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fm-qr-table-service-text{display:block;color:var(--color,#222);font-size:11.5px;font-weight:700;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-qr-table-service-text:empty{display:none}
.fm-status-swap{animation:fmStatusSwipeUp .48s cubic-bezier(.22,.8,.28,1) both}
@keyframes fmStatusSwipeUp{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:575px){.fm-qr-table-status-center{max-width:46%}.fm-qr-table-service-text{font-size:10.5px}.fm-qr-table-status-name{max-width:86px}.fm-qr-table-status-text{font-size:10.5px}}

.modern_item_card{position:relative}
.fm-added-pill{position:absolute;z-index:12;left:50%;bottom:10px;transform:translate(-50%,6px) scale(.94);padding:6px 10px;border-radius:999px;background:rgba(22,27,31,.92);color:#fff;font-size:12px;font-weight:800;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;white-space:nowrap}
.fm-added-pill.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}

.fm-waiter-request-picker{margin-bottom:16px}.fm-waiter-request-title{font-size:14px;font-weight:800;margin-bottom:9px}.fm-waiter-request-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fm-waiter-request-btn{min-height:52px;padding:8px 10px;border:1px solid rgba(130,140,155,.24);border-radius:12px;background:rgba(127,127,127,.06);color:inherit;display:flex;align-items:center;gap:8px;text-align:left;transition:.16s ease}.fm-waiter-request-btn span{font-size:19px}.fm-waiter-request-btn b{font-size:12px;line-height:1.15}.fm-waiter-request-btn.is-selected{border-color:var(--dcolor,var(--defaultColor,#ef319d));box-shadow:0 0 0 2px color-mix(in srgb,var(--dcolor,var(--defaultColor,#ef319d)) 18%,transparent);background:color-mix(in srgb,var(--dcolor,var(--defaultColor,#ef319d)) 8%,transparent)}
.fm-service-closed-message{text-align:center;padding:6px 2px}.fm-service-closed-message strong{font-size:16px}


/* FacilMenus live Call Waiter request detail */
.waiter_notificaiton .waiterNotify .fm-waiter-live-separator{display:inline-block;margin:0 5px;opacity:.55}
.waiter_notificaiton .waiterNotify .fm-waiter-live-request{font-weight:800;color:inherit}


/* =========================================================
   FACILMENUS - CHECKOUT BAR GLOW FEEDBACK
   Strong enough to notice, but NEVER moves/scales the checkout bar.
========================================================= */
.cartNotify_wrapper .cartNofify.notifyBadge.allow-sm.navCart.fm-checkout-glow,
.cartNofify.notifyBadge.allow-sm.navCart.fm-checkout-glow,
.cartNofify.navCart.fm-checkout-glow,
.cartNotify.navCart.fm-checkout-glow,
[data-fm-checkout-bar].fm-checkout-glow {
    animation: fmCheckoutOutlineGlow 1.85s ease-in-out 1 !important;
    will-change: box-shadow;
}
@keyframes fmCheckoutOutlineGlow {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(239,49,157,0); }
    12%  { box-shadow: 0 0 0 2px rgba(255,255,255,.88), 0 0 0 5px var(--dcolor, #ef319d), 0 0 17px 5px var(--dcolor, #ef319d); }
    25%  { box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 0 0 2px var(--dcolor, #ef319d), 0 0 5px 1px var(--dcolor, #ef319d); }
    42%  { box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 0 0 5px var(--dcolor, #ef319d), 0 0 16px 5px var(--dcolor, #ef319d); }
    55%  { box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 0 0 2px var(--dcolor, #ef319d), 0 0 5px 1px var(--dcolor, #ef319d); }
    72%  { box-shadow: 0 0 0 2px rgba(255,255,255,.78), 0 0 0 4px var(--dcolor, #ef319d), 0 0 15px 4px var(--dcolor, #ef319d); }
    86%  { box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 0 0 2px var(--dcolor, #ef319d), 0 0 4px 1px var(--dcolor, #ef319d); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(0,0,0,0); }
}

/* Lock the restaurant page while the slide-out cart is open. */
html.fm-shopping-cart-open,
body.fm-shopping-cart-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
body.fm-shopping-cart-open {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}
.shopping_cart {
    overscroll-behavior: contain;
}
.shopping_cart_content {
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   FACILMENUS - CALL WAITER ICON SIZE ALIGNMENT
   Keeps emoji icons and the custom folded napkin visually equal.
   ========================================================= */
#waiterModal .fm-waiter-request-btn .fm-waiter-request-icon {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    font-size: 24px !important;
    line-height: 1 !important;
}
#waiterModal .fm-waiter-request-btn .fm-waiter-napkin-icon {
    width: 27px !important;
    height: 27px !important;
    display: block !important;
    object-fit: contain !important;
    max-width: none !important;
}
#waiterModal .fm-waiter-request-btn {
    align-items: center !important;
}

/* =========================================================
   FACILMENUS - NAPKIN VISUAL SIZE FIX
   The SVG artwork fills its icon box so it matches emoji icons visually.
   ========================================================= */
#waiterModal .fm-waiter-request-btn .fm-waiter-napkin-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    object-fit: contain !important;
    transform: scale(1.08) !important;
    transform-origin: center !important;
}


/* =========================================================
   FACILMENUS - MOBILE CART FULLSCREEN / SAFE FLEX LAYOUT
   Cart covers the phone viewport only when opened by JS.
   Header + footer stay visible; only cart products scroll.
   QR status/header offsets do not affect this fixed drawer.
   ========================================================= */
@media only screen and (max-width: 767px) {
    .shopping_cart,
    .style_2.shopping_cart {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: -100%;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        z-index: 2147482500 !important;
        box-sizing: border-box !important;
        transition: none !important;
        overflow: hidden !important;
    }

    .shopping_cart .shopping_cart_content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    .shopping_cart .cart_heading {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: max(12px, env(safe-area-inset-top)) 14px 10px !important;
        box-sizing: border-box !important;
    }

    .shopping_cart .cart_body {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .shopping_cart .cart_item_list {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .shopping_cart .cart_item_list > ul.cartItems {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 0 5px 14px !important;
        margin: 0 !important;
    }

    .shopping_cart .cart_body > .top_cart_order,
    .shopping_cart .cart_item_list > .top_cart_order,
    .shopping_cart .cart_item_list > .conflictText {
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .shopping_cart .cart_footer {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        background: var(--background-color) !important;
        z-index: 2 !important;
    }

    .shopping_cart .cart_footer .sub_total_list {
        margin-bottom: 10px !important;
    }

    .shopping_cart .cart_footer .order-btn {
        margin: 0 !important;
    }
}


/* =========================================================
   FACILMENUS - MANUAL NEW BADGE ON CATEGORY THUMBNAILS
   Uses the same manually-controlled NEW flag as the product popup.
   The category version is intentionally smaller for compact cards.
   ========================================================= */
.grid_view .item_img,
.homeSingle_item .homeSingleImg,
.homeSingle_item .item_images {
    position: relative;
}

.grid_view .fm-manual-new-badge,
.homeSingle_item .fm-manual-new-badge {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    z-index: 8 !important;
    min-width: auto !important;
    height: 22px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--dcolor, #e8288f) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.grid_view .fm-manual-new-badge .fm-new-text,
.homeSingle_item .fm-manual-new-badge .fm-new-text {
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    color: #fff !important;
}


/* =========================================================
   FACILMENUS - TEMPORARILY HIDE FLOATING SCROLL-TO-TOP
   Kept as CSS-only so it can be restored later without markup/JS changes.
   ========================================================= */
.scroll-top {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================
   FACILMENUS - POPULAR / SOLD OUT + WAITER COOLDOWN + 2P BATTLE
   ========================================================= */
.item_img,.homeSingleImg,.item_images,.itemImg{position:relative}
.fm-popular-badge{position:absolute!important;top:10px!important;right:10px!important;z-index:17!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:6px 9px!important;border-radius:999px!important;background:#f4b400!important;color:#17120a!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 5px 15px rgba(0,0,0,.18)!important;font-size:10px!important;font-weight:900!important;letter-spacing:.045em!important;line-height:1!important;white-space:nowrap!important}
.fm-sold-out-badge{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:19!important;background:rgba(15,15,17,.88)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:10px!important;padding:9px 13px!important;font-size:11px!important;font-weight:900!important;letter-spacing:.1em!important;white-space:nowrap!important;box-shadow:0 8px 25px rgba(0,0,0,.28)!important}
.fm-is-sold-out .item_img,.fm-is-sold-out .homeSingleImg,.fm-is-sold-out .item_images{filter:saturate(.35)}
.fm-sold-out-add{opacity:.62!important;cursor:not-allowed!important;pointer-events:none!important}
#itemModal.itemPopupModal .itemImg .fm-popular-badge{top:12px!important;right:54px!important;left:auto!important}
#itemModal.itemPopupModal .itemImg .fm-sold-out-badge{top:50%!important;left:50%!important;right:auto!important}
.fm-waiter-cooldown-status{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(40,167,69,.14);border:1px solid rgba(40,167,69,.35);text-align:center}.fm-waiter-cooldown-status strong{display:block;color:#4fd37a;font-size:13px;letter-spacing:.05em}.fm-waiter-cooldown-status span{display:block;margin-top:3px;color:inherit;font-size:12px;font-weight:800}.fm-waiter-request-btn:disabled{cursor:not-allowed;opacity:.62}.fm-waiter-request-btn.is-selected:disabled{opacity:1}
.fm-battle-intro{text-align:center;margin:5px auto 14px;max-width:430px}.fm-battle-intro h3,.fm-rps-secret h3,.fm-rps-pass h3{color:#fff!important;margin:0 0 6px!important;font-size:20px!important}.fm-battle-intro p,.fm-rps-secret p,.fm-rps-pass p{color:#aeb2ba;margin:0}.fm-battle-timer{text-align:center;font-size:30px;font-weight:950;letter-spacing:.06em;color:#fff;margin:12px 0}.fm-tap-battle,.fm-reaction-battle{display:grid;grid-template-columns:1fr;gap:12px;max-width:420px;margin:0 auto}.fm-tap-side,.fm-reaction-side{width:100%;min-height:0;aspect-ratio:1 / 1;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#202329;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;touch-action:none;user-select:none;-webkit-user-select:none}.fm-tap-side.p1,.fm-reaction-side.p1{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--dcolor,#e8288f) 55%,transparent)}.fm-tap-side.p2,.fm-reaction-side.p2{box-shadow:inset 0 0 0 2px rgba(242,201,76,.55)}.fm-tap-side strong{font-size:52px}.fm-tap-side small,.fm-reaction-side b{font-size:12px;letter-spacing:.08em}.fm-tap-side span,.fm-reaction-side span{font-size:16px;font-weight:900}.fm-tap-side.is-hit{transform:scale(.97);background:#2b2f36}.fm-reaction-signal{text-align:center;padding:14px;border-radius:14px;max-width:500px;margin:0 auto 12px;background:#252830;color:#fff;font-size:22px;font-weight:950}.fm-reaction-signal.is-waiting{color:#f2c94c}.fm-reaction-signal.is-go{background:#1f6d45;color:#fff}.fm-reaction-signal.is-result{font-size:16px}.fm-rps-secret,.fm-rps-pass{text-align:center;max-width:430px;margin:25px auto}.fm-rps-pass>div{font-size:60px}.fm-rps-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:500px;margin:20px auto}.fm-rps-choices button{border:1px solid rgba(255,255,255,.1);background:#202329;color:#fff;border-radius:16px;min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.fm-rps-choices button span{font-size:44px}.fm-rps-choices button b{font-size:11px;letter-spacing:.07em}.fm-rps-reveal{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;max-width:500px;margin:24px auto}.fm-rps-reveal>div{background:#202329;border-radius:16px;padding:20px 10px;text-align:center;display:flex;flex-direction:column;gap:6px}.fm-rps-reveal span{font-size:48px}.fm-rps-reveal small{color:#aeb2ba;font-weight:800}.fm-rps-reveal>strong{color:#aeb2ba}.fm-rps-result{text-align:center;font-size:22px;font-weight:950;color:#fff;margin:15px 0}
@media(max-width:380px){.fm-tap-side,.fm-reaction-side{min-height:0;aspect-ratio:1 / 1}.fm-rps-choices button{min-height:110px}.fm-popular-badge{font-size:9px!important;padding:5px 7px!important}}


/* FACILMENUS - TARGET BATTLE (4th 2 PLAYER BATTLE game) */
.fm-target-battle{display:grid;grid-template-columns:1fr;gap:12px;max-width:420px;margin:0 auto}.fm-target-side{position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#202329;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}.fm-target-side.p1{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--dcolor,#e8288f) 55%,transparent)}.fm-target-side.p2{box-shadow:inset 0 0 0 2px rgba(242,201,76,.55)}.fm-target-side>small{position:absolute;top:12px;left:14px;font-size:11px;font-weight:900;letter-spacing:.08em;color:#fff;z-index:2}.fm-target-side>strong{position:absolute;top:8px;right:14px;font-size:24px;font-weight:950;color:#fff;z-index:2}.fm-moving-target{position:absolute;width:48px;height:48px;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.08)!important;font-size:30px!important;line-height:48px!important;text-align:center!important;box-shadow:0 5px 14px rgba(0,0,0,.2)!important;touch-action:none;transition:transform .08s ease}.fm-moving-target.is-hit{transform:scale(.82)}

/* =========================================================
   FACILMENUS GAMES - COMPACT ACCORDION HOME
   Only one game group stays open at a time.
   ========================================================= */
.fm-games-accordion{margin:0 0 10px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:#181a1e;overflow:hidden}
.fm-games-accordion-head{width:100%;min-height:68px;border:0;background:#1b1d21;color:#fff;display:flex;align-items:center;gap:10px;padding:12px 14px;text-align:left}
.fm-games-accordion-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.fm-games-accordion-copy strong{font-size:13px;line-height:1.2;letter-spacing:.9px;color:#fff}
.fm-games-accordion-copy small{font-size:11px;line-height:1.3;color:#9da1a9;font-weight:600}
.fm-games-count{flex:0 0 auto;border-radius:999px;background:rgba(255,255,255,.07);padding:5px 8px;font-size:9px;font-weight:900;letter-spacing:.55px;color:#c8cbd1}
.fm-games-chevron{width:24px;flex:0 0 24px;text-align:center;font-size:23px;line-height:1;color:var(--dcolor,#e91e63);transform:rotate(-90deg);transition:transform .2s ease}
.fm-games-accordion.is-open .fm-games-chevron{transform:rotate(0deg)}
.fm-games-accordion-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.fm-games-accordion-body>.fm-games-grid{min-height:0;overflow:hidden;padding:0 10px;gap:10px}
.fm-games-accordion.is-open .fm-games-accordion-body{grid-template-rows:1fr}
.fm-games-accordion.is-open .fm-games-accordion-body>.fm-games-grid{padding-top:10px;padding-bottom:10px}
.fm-games-accordion.is-open .fm-games-accordion-head{background:#202228;border-bottom:1px solid rgba(255,255,255,.07)}
.fm-games-accordion .fm-game-card{border-radius:13px;padding:12px}
.fm-games-accordion .fm-game-card-icon{width:42px;height:42px;font-size:23px}
.fm-games-accordion .fm-game-card-copy strong{font-size:14px}
.fm-games-accordion .fm-game-card-copy small{font-size:11px}
@media(min-width:700px){.fm-games-accordion-body>.fm-games-grid{grid-template-columns:1fr 1fr}.fm-games-accordion-head{padding:14px 16px}.fm-games-count{font-size:10px}}


/* =========================================================
   FACILMENUS GAMES V6 - SMARTPHONE BATTLE FIT
   Keeps stacked 2-player areas comfortable without pushing
   Player 2 / yellow side outside the phone viewport.
   ========================================================= */
@media (max-width:699px){
  .fm-tap-battle,
  .fm-reaction-battle,
  .fm-target-battle{
    width:100%;
    max-width:420px;
    gap:9px;
  }

  .fm-tap-side,
  .fm-reaction-side,
  .fm-target-side{
    aspect-ratio:auto !important;
    width:100% !important;
    height:clamp(120px,20dvh,175px) !important;
    min-height:120px !important;
    max-height:175px !important;
    border-radius:15px;
  }

  .fm-battle-intro{margin:0 auto 8px;}
  .fm-battle-intro h3{font-size:17px !important;margin-bottom:3px !important;}
  .fm-battle-intro p{font-size:12px;line-height:1.35;}
  .fm-battle-timer{font-size:24px;margin:7px 0 9px;}
  .fm-tap-side strong{font-size:40px;}
  .fm-tap-side span,.fm-reaction-side span{font-size:14px;}
  .fm-game-primary{margin-top:12px;}

  .fm-target-side>small{top:8px;left:11px;}
  .fm-target-side>strong{top:5px;right:11px;font-size:20px;}
  .fm-moving-target{
    width:42px !important;
    height:42px !important;
    line-height:42px !important;
    font-size:26px !important;
  }
}

@media (max-height:650px) and (max-width:699px){
  .fm-games-content{padding-top:10px;padding-bottom:12px;}
  .fm-tap-side,
  .fm-reaction-side,
  .fm-target-side{
    height:118px !important;
    min-height:118px !important;
  }
  .fm-battle-intro p{display:none;}
  .fm-battle-timer{margin:5px 0 7px;}
}

/* =========================================================
   FACILMENUS GAMES V8 - PHONE HOME FIT + TALLER BATTLE AREAS
   - Hide the Games intro on phones to reclaim vertical space.
   - Keep the open accordion games in a compact 2-column grid
     so all three accordion sections stay visible on phone view.
   - Add 10px to the top and 10px to the bottom of each stacked
     Tap / Reaction / Target battle player area (+20px total).
   ========================================================= */
@media (max-width:699px){
  .fm-games-intro{
    display:none !important;
    margin:0 !important;
  }

  .fm-games-content{
    padding-top:10px;
  }

  .fm-games-accordion-body>.fm-games-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .fm-games-accordion.is-open .fm-games-accordion-body>.fm-games-grid{
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .fm-games-accordion .fm-game-card{
    min-width:0;
    min-height:70px;
    padding:9px 8px !important;
    border-radius:13px;
    gap:0;
  }

  .fm-games-accordion .fm-game-card-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    font-size:20px;
  }

  .fm-games-accordion .fm-game-card-copy{
    padding-left:8px;
    gap:1px;
  }

  .fm-games-accordion .fm-game-card-copy strong{
    font-size:12px;
    line-height:1.15;
  }

  .fm-games-accordion .fm-game-card-copy small{
    display:none;
  }

  .fm-games-accordion .fm-game-card-arrow{
    font-size:19px;
    padding-left:3px;
  }

  .fm-tap-side,
  .fm-reaction-side,
  .fm-target-side{
    height:clamp(140px,calc(20dvh + 20px),195px) !important;
    min-height:140px !important;
    max-height:195px !important;
  }
}

@media (max-height:650px) and (max-width:699px){
  .fm-tap-side,
  .fm-reaction-side,
  .fm-target-side{
    height:138px !important;
    min-height:138px !important;
    max-height:138px !important;
  }
}

/* =========================================================
   FACILMENUS GAMES V9 - RESTORE PHONE INTRO + TALLER BATTLES
   - Show “PICK A QUICK GAME WHILE YOU WAIT” again on phones.
   - Add another 20px total height to Tap / Reaction / Target
     player battle areas (+10px top and +10px bottom visually).
   ========================================================= */
@media (max-width:699px){
  .fm-games-intro{
    display:block !important;
  }

  .fm-tap-side,
  .fm-reaction-side,
  .fm-target-side{
    height:clamp(160px,calc(20dvh + 40px),215px) !important;
    min-height:160px !important;
    max-height:215px !important;
  }
}

@media (max-height:650px) and (max-width:699px){
  .fm-tap-side,
  .fm-reaction-side,
  .fm-target-side{
    height:158px !important;
    min-height:158px !important;
    max-height:158px !important;
  }
}

/* =========================================================
   FACILMENUS GAMES V10 - STACKED PHONE CARDS + INTRO SPACING
   - Restore one game per row on smartphones.
   - Keep the compact phone card sizing from V8/V9.
   - Add breathing room below the Games intro before section 1.
   ========================================================= */
@media (max-width:699px){
  .fm-games-intro{
    margin:2px auto 14px !important;
  }

  .fm-games-accordion-body>.fm-games-grid{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   FACILMENUS V12 - CLOSED CART / AVAILABLE DAYS
   Use the restaurant theme color and keep the control readable.
   ========================================================= */
.shopping_cart .fm-cart-available-days {
    background-color: var(--dcolor, #e8288f) !important;
    border-color: var(--dcolor, #e8288f) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.shopping_cart .fm-cart-available-days:hover,
.shopping_cart .fm-cart-available-days:focus,
.shopping_cart .fm-cart-available-days:active {
    background-color: var(--dcolor, #e8288f) !important;
    border-color: var(--dcolor, #e8288f) !important;
    color: #fff !important;
    filter: brightness(.94);
}
.shopping_cart .fm-cart-available-days i {
    color: #fff !important;
}


/* =========================================================
   FACILMENUS V43 - NATIVE MENU CONTENT TRANSITION
   ---------------------------------------------------------
   Visual only. The AJAX/button action is never delayed.
   New cached/fetched menu content enters 6px horizontally
   with a very light fade for 130ms.
   ========================================================= */
#item_container.facil-menu-content-enter {
    opacity: .94;
    transform: translate3d(var(--facil-menu-enter-x, 6px), 0, 0);
    transition: none !important;
    will-change: opacity, transform;
}
#item_container.facil-menu-content-enter.facil-menu-content-enter-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 130ms ease-out,
        transform 130ms cubic-bezier(.2,.72,.25,1) !important;
}
@media (prefers-reduced-motion: reduce) {
    #item_container.facil-menu-content-enter,
    #item_container.facil-menu-content-enter.facil-menu-content-enter-active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}

/* =========================================================
   FACILMENUS V65 - SAFE CONSISTENT RADIUS + iOS GLASS DETAILS
   ---------------------------------------------------------
   Does NOT change menu-tab/category active colors, sticky dimensions,
   sticky positioning or category-bar structure.
   ========================================================= */
:root{--fm-control-radius:18px;--fm-glass-line:rgba(255,255,255,.18);--fm-glass-inset:inset 0 1px 0 rgba(255,255,255,.16)}
body.theme-light,.light-mode{--fm-glass-line:rgba(30,42,55,.13);--fm-glass-inset:inset 0 1px 0 rgba(255,255,255,.8)}
.gallery_sort.category_shot .categoryItem,
.gallery_sort.category_shot .facil-category-menu-trigger,
#facilCategoryDrawer .facil-drawer-category,
#facilCategoryDrawer .facil-drawer-dismiss,
.restaurant-container .view-btn,
.restaurant-container .add_btn,
.restaurant-container .custom-btn,
.restaurant-container .order-btn,
#waiterModal .fm-waiter-request-btn{
  border-radius:var(--fm-control-radius)!important;
  -webkit-backdrop-filter:blur(12px) saturate(125%);backdrop-filter:blur(12px) saturate(125%);
  box-shadow:var(--fm-glass-inset);
}
/* Category images retired: names only, without touching sticky JS or bar height. */
.gallery_sort.category_shot .catImg,#facilCategoryDrawer .facil-drawer-category img{display:none!important}
.gallery_sort.category_shot .categoryItem{gap:0!important}
.gallery_sort.category_shot .categoryName{white-space:nowrap!important}

/* Header search intentionally inherits the exact neighboring waiter icon layout. */

/* Global search: separate overlay, never part of sticky/category navigation. */
.fm-global-search{position:fixed;inset:0;z-index:2147483200;display:none;align-items:flex-start;justify-content:center;padding:76px 14px 20px}
.fm-global-search.is-open{display:flex}
.fm-global-search-backdrop{position:absolute;inset:0;background:rgba(7,9,13,.46);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fm-global-search-sheet{position:relative;z-index:1;width:min(720px,100%);max-height:calc(100vh - 96px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--fm-glass-line);border-radius:24px;background:color-mix(in srgb,var(--body-color,#17191d) 84%,transparent);box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(28px) saturate(155%);backdrop-filter:blur(28px) saturate(155%);color:var(--color,#fff)}
.fm-global-search-head{display:flex;gap:9px;padding:12px;border-bottom:1px solid var(--fm-glass-line)}
.fm-global-search-input-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid var(--fm-glass-line);border-radius:18px;background:rgba(255,255,255,.065);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.fm-global-search-input-wrap i{opacity:.68;font-size:18px}.fm-global-search-input{width:100%;height:48px;border:0!important;outline:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important;font-size:16px;padding:0}.fm-global-search-input::placeholder{color:currentColor;opacity:.48}
.fm-global-search-close{width:48px;height:48px;flex:0 0 48px;border:1px solid var(--fm-glass-line);border-radius:18px;background:rgba(255,255,255,.065);color:inherit;font-size:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.fm-global-search-status{padding:10px 15px 8px;font-size:12px;font-weight:650;opacity:.7}
.fm-global-search-results{overflow:auto;padding:4px 10px 14px;overscroll-behavior:contain}
.fm-global-search-result{width:100%;display:flex;align-items:center;gap:11px;margin:7px 0;padding:9px;text-align:left;color:inherit;border:1px solid var(--fm-glass-line);border-radius:18px;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%)}
.fm-global-search-thumb{width:64px;height:58px;flex:0 0 64px;overflow:hidden;border-radius:14px;background:rgba(127,127,127,.13);display:flex;align-items:center;justify-content:center}.fm-global-search-thumb img{width:100%;height:100%;object-fit:cover}.fm-global-search-thumb.fm-no-image i{opacity:.45;font-size:20px}
.fm-global-search-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}.fm-global-search-copy strong{font-size:14px;line-height:1.2}.fm-global-search-meta{font-size:11px;font-weight:700;opacity:.58}.fm-global-search-desc{font-size:12px;opacity:.67;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fm-global-search-price{flex:0 0 auto;font-weight:800;font-size:13px;margin-left:5px}
.fm-global-search-loading,.fm-global-search-empty{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;text-align:center;opacity:.72}.fm-global-search-empty i{font-size:26px}.fm-global-search-empty strong{font-size:15px}.fm-global-search-empty span{font-size:12px;max-width:360px}
body.fm-global-search-open{overflow:hidden!important}
@media(max-width:767px){.fm-global-search{align-items:flex-end;padding:12px}.fm-global-search-sheet{width:100%;max-height:82vh;border-radius:24px 24px 20px 20px}.fm-global-search-head{padding:10px}.fm-global-search-result{padding:8px}.fm-global-search-thumb{width:58px;height:54px;flex-basis:58px}}

/* Spiciness badge */
.fm-spice-badge{position:absolute!important;left:8px!important;bottom:8px!important;top:auto!important;right:auto!important;z-index:18!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:24px!important;padding:4px 7px!important;margin:0!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:rgba(122,20,20,.82)!important;color:#fff!important;font-size:11px!important;line-height:1!important;letter-spacing:1px!important;white-space:nowrap!important;pointer-events:none!important;-webkit-backdrop-filter:blur(9px) saturate(140%);backdrop-filter:blur(9px) saturate(140%);box-shadow:0 4px 12px rgba(0,0,0,.2)!important}
#itemModal.itemPopupModal .itemImg .fm-spice-badge{left:12px!important;bottom:12px!important}

/* View-only restaurants: hide every ordering affordance including recommendation +. */
html.fm-cart-disabled .add_to_cart,body.fm-cart-disabled .add_to_cart,
html.fm-cart-disabled .add-to-cart,body.fm-cart-disabled .add-to-cart,
html.fm-cart-disabled .addToCartBtn,body.fm-cart-disabled .addToCartBtn,
html.fm-cart-disabled .add_to_cart_form,body.fm-cart-disabled .add_to_cart_form,
html.fm-cart-disabled .fm-popup-rec-add,body.fm-cart-disabled .fm-popup-rec-add,
html.fm-cart-disabled .cartNofify,body.fm-cart-disabled .cartNofify,
html.fm-cart-disabled .cartFloatingIcon,body.fm-cart-disabled .cartFloatingIcon,
html.fm-cart-disabled .navCart,body.fm-cart-disabled .navCart,
html.fm-cart-disabled .shopping_cart .order-btn,body.fm-cart-disabled .shopping_cart .order-btn{display:none!important}


/* =========================================================
   FACILMENUS V67 - iOS GLASS STICKY BACKGROUND
   ---------------------------------------------------------
   The buttons keep their original design. Glass belongs only
   to the fixed background behind FOOD/DRINKS and categories.
   ========================================================= */
:root{
  --fm-sticky-glass-bg:color-mix(in srgb,var(--facil-category-background,var(--body-color,#181818)) 88%,transparent);
  --fm-sticky-glass-line:rgba(255,255,255,.12);
  --facil-category-bottom-gap:10px;
}
body.theme-light,.light-mode{
  --fm-sticky-glass-bg:color-mix(in srgb,var(--facil-category-background,var(--body-color,#fff)) 88%,transparent);
  --fm-sticky-glass-line:rgba(22,36,52,.10);
}

/* One glass surface across the fixed sticky group. */
.view_switcher_wrapper.facil-category-fixed,
.view_switcher_wrapper.facil-category-fixed::before,
.view_switcher_wrapper.facil-category-fixed::after{
  background:var(--facil-category-background,var(--body-color))!important;
  background:var(--fm-sticky-glass-bg)!important;
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  backdrop-filter:blur(20px) saturate(155%);
}
.view_switcher_wrapper.facil-category-fixed{
  border-top:1px solid var(--fm-sticky-glass-line)!important;
  border-bottom:1px solid var(--fm-sticky-glass-line)!important;
  box-shadow:none!important;
}

/* Close the one-pixel seam below the restaurant header. */
.view_switcher_wrapper.facil-category-fixed::before{
  top:calc(-1 * var(--facil-menu-category-backdrop-height,var(--facil-category-top-gap,10px)) - 1px)!important;
  height:calc(var(--facil-menu-category-backdrop-height,var(--facil-category-top-gap,10px)) + 1px)!important;
}

/* Category controls sit directly on the shared glass surface. */
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot,
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li,
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li.facil-category-menu-trigger-item{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot::before,
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot::after,
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li::before,
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li:not(.facil-category-menu-trigger-item)::after{
  display:none!important;
  content:none!important;
  background:transparent!important;
}

/* Category sandwich: same vertical footprint/radius as normal category buttons.
   Its LI stretches to the category row height, and the button fills that LI. */
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li.facil-category-menu-trigger-item{
  display:flex!important;
  align-self:stretch!important;
}
.gallery_sort.category_shot .facil-category-menu-trigger{
  min-height:0!important;
  height:auto!important;
  align-self:stretch!important;
  padding:0 18px!important;
  border-radius:var(--fm-control-radius)!important;
}
@media(max-width:767px){
  .gallery_sort.category_shot .facil-category-menu-trigger{
    min-height:0!important;
    height:auto!important;
    align-self:stretch!important;
    padding:0 16px!important;
  }
}

/* The slider itself has no bar/background. Keep only the soft right-edge fade. */
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 16px),rgba(0,0,0,.55) calc(100% - 7px),transparent 100%)!important;
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 16px),rgba(0,0,0,.55) calc(100% - 7px),transparent 100%)!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Hide scrolling categories beneath the fixed sandwich button using the same
   glass as the parent sticky surface, so this never reads as another bar. */
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li.facil-category-menu-trigger-item{
  background:var(--facil-category-background,var(--body-color))!important;
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  backdrop-filter:blur(20px) saturate(155%);
}
.view_switcher_wrapper.facil-uber-ready .gallery_sort.category_shot > li.facil-category-menu-trigger-item::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  right:-10px!important;
  width:10px!important;
  height:100%!important;
  pointer-events:none!important;
  background:linear-gradient(to right,var(--facil-category-background,var(--body-color)),transparent)!important;
}

/* =========================================================
   FACILMENUS V71 - CONSISTENT GLASS SURFACES
   ---------------------------------------------------------
   Visual treatment only. Layout, controls and theme accents
   keep their existing behavior and colors.
   ========================================================= */
:root{
  --fm-window-glass:rgba(16,22,34,.80);
  --fm-window-glass-line:rgba(255,255,255,.13);
  --fm-window-glass-shadow:0 20px 55px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10);
}
body.theme-light,.light-mode{
  --fm-window-glass:rgba(250,252,255,.82);
  --fm-window-glass-line:rgba(22,36,52,.11);
  --fm-window-glass-shadow:0 20px 55px rgba(15,23,42,.15),inset 0 1px 0 rgba(255,255,255,.78);
}

/* All frontend popup/window surfaces. */
.modal-content,
#waiterModal .modal-content,
#facilCategoryDrawer,
.customNavsideBar,
.fm-qr-required-card,
.share_card_content{
  background:var(--fm-window-glass)!important;
  border:1px solid var(--fm-window-glass-line)!important;
  border-radius:18px!important;
  box-shadow:var(--fm-window-glass-shadow)!important;
  -webkit-backdrop-filter:blur(24px) saturate(155%);
  backdrop-filter:blur(24px) saturate(155%);
}
.modal-content .modal-header,
.modal-content .modal-body,
.modal-content .modal-footer,
#waiterModal .modal-header,
#waiterModal .modal-body,
#waiterModal .modal-footer,
.customNavsideBar .topHeader,
.customNavsideBar .topFooter{
  background:transparent!important;
}

/* Product cards share the glass material without changing their geometry. */
.modern_item_card,
.grid_view .modern_item_card,
.list_view .modern_item_card{
  background:var(--fm-window-glass)!important;
  border-color:var(--fm-window-glass-line)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
}

/* Matching blurred dim layer behind open windows and both drawers. */
.modal-backdrop.show,
#facilCategoryDrawerBackdrop.open,
.customNavsideBar.activeNav::after{
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

/* =========================================================
   FACILMENUS V72 - LIGHTER GLASS CART + CONTROL CONSISTENCY
   ========================================================= */
.shopping_cart,
.style_2.shopping_cart{
  background:var(--fm-window-glass)!important;
  border:1px solid var(--fm-window-glass-line)!important;
  border-right:0!important;
  border-radius:24px 0 0 24px!important;
  box-shadow:var(--fm-window-glass-shadow)!important;
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  backdrop-filter:blur(26px) saturate(160%);
  overflow:hidden!important;
}
.shopping_cart .shopping_cart_content,
.shopping_cart .cart_heading,
.shopping_cart .cart_body,
.shopping_cart .cart_footer{
  background:transparent!important;
}

/* Dim/blur the narrow visible part of the menu behind the open cart. */
body.fm-shopping-cart-open::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147482400;
  background:rgba(4,7,12,.42);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}

/* Every cart product is an individual glass card with the shared radius. */
.shopping_cart_content ul.cartItems > li{
  border-radius:var(--fm-control-radius)!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid var(--fm-window-glass-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 16px rgba(0,0,0,.10)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  overflow:hidden!important;
}
body.theme-light .shopping_cart_content ul.cartItems > li,
.light-mode .shopping_cart_content ul.cartItems > li{
  background:rgba(255,255,255,.58)!important;
}

/* Quantity/price summary strip keeps its color but uses the shared radius. */
.shopping_cart .sub_total_list{
  border-radius:var(--fm-control-radius)!important;
  overflow:hidden!important;
}

/* Preserve theme colors; normalize only shape and sizing. */
.cartNofify.notifyBadge.allow-sm.navCart,
.shopping_cart .cart_footer .order-btn,
a.btn.btn-info.btn-block.order-btn{
  border-radius:var(--fm-control-radius)!important;
  overflow:hidden!important;
}

/* Call Waiter submit: glass material and consistent radius. */
#waiterModal .fm-waiter-send-request{
  min-height:48px!important;
  padding:11px 18px!important;
  border-radius:var(--fm-control-radius)!important;
  border:1px solid var(--fm-window-glass-line)!important;
  background:rgba(255,255,255,.09)!important;
  color:inherit!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:blur(14px) saturate(145%);
  backdrop-filter:blur(14px) saturate(145%);
}
body.theme-light #waiterModal .fm-waiter-send-request,
.light-mode #waiterModal .fm-waiter-send-request{
  background:rgba(255,255,255,.62)!important;
}

@media only screen and (max-width:767px){
  .shopping_cart,
  .style_2.shopping_cart{
    width:calc(100vw - 18px)!important;
    max-width:440px!important;
    border-radius:24px 0 0 24px!important;
    transition:right .24s cubic-bezier(.2,.72,.25,1)!important;
  }
}

/* Main sandwich drawer: the page behind it is inert and cannot scroll. */
html.facil-side-menu-open,
body.facil-side-menu-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.facil-side-menu-open{
  position:fixed!important;
  left:0!important;
  right:0!important;
  width:100%!important;
}

/* A real interaction shield behind the main sandwich drawer. */
#fmSideMenuBackdrop{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:min(280px,100vw);
  z-index:2147482999;
  display:block;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:opacity .2s ease,visibility .2s ease;
  touch-action:none;
}
#fmSideMenuBackdrop.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.customNavsideBar.activeNav::after{
  display:none!important;
  pointer-events:none!important;
}

/* The interaction shield is invisible. Keep floating checkout UI from
   entering the drawer's stacking layer while the sandwich menu is open. */
body.facil-side-menu-open .cartNotify_wrapper,
body.facil-side-menu-open .cartNofify,
body.facil-side-menu-open .cartFloatingIcon,
body.facil-side-menu-open .CartIcon{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Peppers only: no badge pill/background/border/shadow. */
.fm-spice-badge{
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  color:inherit!important;
  font-size:15px!important;
  line-height:1!important;
  letter-spacing:0!important;
}
.fm-spice-badge > span{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}

/* Search results live ABOVE the search field; input remains at bottom. */
.fm-global-search-sheet{display:flex!important;flex-direction:column!important}
.fm-global-search-status{order:1;flex:0 0 auto}
.fm-global-search-results{order:2;flex:1 1 auto;min-height:0}
.fm-global-search-head{order:3;flex:0 0 auto;border-bottom:0!important;border-top:1px solid var(--fm-glass-line)}
/* FACILMENUS V100: lightweight shell displayed while product AJAX loads. */
#itemModal.itemPopupModal .fm-product-loading-shell {
    min-height: 150px;
    border: 0;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 28, 36, .92);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}

body.theme-light #itemModal.itemPopupModal .fm-product-loading-shell,
.light-mode #itemModal.itemPopupModal .fm-product-loading-shell {
    background: rgba(255, 255, 255, .94);
}

/* V101: replace Bootstrap top-slide with source-item animation. */
#itemModal.modal.fade .modal-dialog { transform:none!important; transition:none!important; }

/* V110 final cascade: legacy order-card/mobile rules occur earlier in this
   stylesheet, so keep the new transparent wrapper and even spacing last. */
.dininOrderInfo {
    margin: 14px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--color) !important;
}

body:has(#dineinData .dininOrderInfo) .sliderSectionArea {
    margin-top: 14px !important;
}

@media only screen and (max-width: 767px) {
    .dininOrderInfo {
        margin-top: calc(4rem + 14px) !important;
    }
}

/* =========================================================
   V111 - ORDER CARD / SLIDER / CHECKOUT SPACING
   ---------------------------------------------------------
   Only compact the next section when a real live-order card exists.
   An empty #dineinData node can contain whitespace, so :not(:empty)
   must not be used: it incorrectly pulled the normal slider under the
   fixed mobile header.
========================================================= */
body:has(#dineinData .dininOrderInfo) .restaurant-container.mt-80 {
    margin-top: 14px !important;
    padding-top: 0 !important;
}

/* V113: compact live-order spacing on checkout and tracking without moving
   the normal menu slider under the fixed mobile header. */
body:has(#showCheckoutData) .restaurant-container.mt-80 {
    margin-top: 14px !important;
    padding-top: 0 !important;
}
body:has(.track_order_section) .track_order_section {
    margin-top: 24px !important;
    padding-top: 0 !important;
    min-height: auto !important;
    align-items: flex-start !important;
}
.fm-gratuity-notice {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    border-radius: 12px;
    background: var(--card-soft);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--color);
    font-size: 13px;
    line-height: 1.45;
}
.fm-order-confirm-message {
    width: 100%;
	margin: 7px auto;
    text-align: center;
    color: var(--color);
    opacity: .8;
	font-size: clamp(10px, 2.8vw, 13px);
	line-height: 1.2;
	white-space: nowrap;
}

/* V116: use the restaurant theme for the order-list action and reserve green
   for the completed state. */
.fm-dinein-actions .fm-view-orders-btn {
	background: var(--primary-color, var(--primaryColor)) !important;
	border-color: var(--primary-color, var(--primaryColor)) !important;
	color: #fff !important;
}

.fm-dinein-order-card .fm-order-status-slot .orderLabel.bg-success {
	background: #20b26b !important;
	border-color: #20b26b !important;
	color: #fff !important;
}

/* When the shared live-order card is already above Track Order/Order List,
   remove the second mobile header clearance that created the large gap. */
body:has(#dineinData .dininOrderInfo):has(.track_order_section) .track_order_section {
	margin-top: 14px !important;
}

/* Keep the floating checkout label optically centered even though the
   quantity and total at either side have different text widths. Keep this
   mobile-only so .allow-sm remains hidden on larger screens. */
@media only screen and (max-width: 767px) {
    body:has(.track_order_section) .track_order_section {
        margin-top: calc(4rem + 14px) !important;
    }

    .cartNofify.notifyBadge.allow-sm.navCart {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
    }

    .cartNofify.notifyBadge.allow-sm.navCart .cartQty {
        justify-self: start;
    }

    .cartNofify.notifyBadge.allow-sm.navCart .cartButton {
        justify-self: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }

    .cartNofify.notifyBadge.allow-sm.navCart .cartPrice {
        justify-self: end;
        text-align: right;
    }
}

/* =========================================================
   V117 - LIVE ORDER SPACING / CHECKOUT CONFIRMATION
   ---------------------------------------------------------
   These compact rules intentionally require a rendered live-order card.
   Normal checkout and order-list pages keep their existing header clearance.
========================================================= */
@media only screen and (max-width: 767px) {
    /* The generic mobile track rule adds fixed-header clearance, while
       .single_track_page adds another 50px. Neither is needed after the
       live Order Sign has already supplied that clearance. */
    body:has(#dineinData .dininOrderInfo) .track_order_section {
        margin-top: 14px !important;
        padding-top: 0 !important;
        min-height: auto !important;
        align-items: flex-start !important;
    }

    body:has(#dineinData .dininOrderInfo) .track_order_section .single_track_page {
        margin-top: 0 !important;
    }

    /* Checkout's generic mobile .showCheckoutData rule adds 60px. Collapse
       that only when the Order Sign is directly above the cart. */
    body:has(#dineinData .dininOrderInfo) .restaurant-container.mt-80 {
        margin-top: 14px !important;
        padding-top: 0 !important;
    }

    body:has(#dineinData .dininOrderInfo) .restaurant-container.mt-80 .showCheckoutData {
        margin-top: 0 !important;
    }

    /* Keep the mobile summary, divider, confirmation sentence and button as
       one compact block with balanced space above and below the sentence. */
    .mobileOrderSummaryAnchor .checkoutSummaryCard {
        margin-bottom: 8px !important;
    }

    .order_page .order_input_area > .modal-footer {
        margin-top: 0 !important;
        padding: 8px 0 0 !important;
    }

    .order_page .order_input_area > .modal-footer .checkoutBtnList {
        margin-top: 0 !important;
    }

    .order_page .order_input_area > .modal-footer .fm-order-confirm-message {
        margin: 8px auto !important;
    }

    /* Match the vertical field rhythm used between Order Type and Select
       Table when the two Dine-in columns stack on a phone. */
    .order_input_area .dineInPersonColumn {
        margin-top: 14px;
    }
}

/* =========================================================
   V118 - MOBILE MENU SPACING ONLY
   Equal 20px visual rhythm without changing sticky/menu logic.
========================================================= */
@media only screen and (max-width: 767px) {
    :root {
        /* Keep the sticky surface attached to the header through its shared
           backdrop, while placing the menu buttons 20px inside that surface.
           This matches the menu-to-category spacing without exposing the
           banner or changing either menu's saved scroll position. */
        --facil-sticky-top-gap: 20px;

        /* The title already has 10px internal top padding. Avoid adding a
           second title gap when a category button aligns it to the bar. */
        --facil-category-title-gap: 0px;
    }

    .sliderSectionArea {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
    }

    .gallery_top_menu {
        margin-bottom: 10px !important;
    }

    .gallery_top_menu > .view_switcher_wrapper.facil-uber-ready {
        margin-bottom: 0 !important;
    }

    #item_container > .homeView:first-child {
        padding-top: 0 !important;
    }

    #item_container > .homeView:first-child .singleCategoryHeader.cat-header {
        padding-top: 10px !important;
    }
}

/* A6 final overrides: layout-only, with no sticky-coordinate changes. */
.customNavsideBar .topFooter.fm-side-menu-footer-lowered {
    padding-bottom: 15px !important;
}

@media only screen and (max-width: 767px) {
    body.facil-no-banner #item_container > .homeView:first-child {
        padding-top: 24px !important;
    }
}

/* =========================================================
   A7 - QR STATUS / SIDE DRAWER VIEWPORT HEIGHT
   ---------------------------------------------------------
   The QR status row moves .customNav down by 38px. Subtract
   that same amount from its drawer so Call Waiter remains at
   the same visible bottom position as normal browsing.
========================================================= */
.customNav.fm-qr-status-active > .customNavsideBar {
    height: calc(100vh - 38px) !important;
    height: calc(100dvh - 38px) !important;
    max-height: calc(100dvh - 38px) !important;
}

/* =========================================================
   A8 - NO-SLIDER FIRST CATEGORY TITLE CLEARANCE
   ---------------------------------------------------------
   Select the first .homeView even when AJAX/sticky helper
   elements are inserted before it. Only its visible header is
   moved in normal flow; sticky coordinates and JS are untouched.
========================================================= */
@media only screen and (max-width: 767px) {
    body.facil-no-banner #item_container > .homeView:not(.homeView ~ .homeView) {
        padding-top: 0 !important;
    }

    body.facil-no-banner #item_container > .homeView:not(.homeView ~ .homeView) > .row:first-child .singleCategoryHeader.cat-header {
        margin-top: 24px !important;
    }
}

/* =========================================================
   A9 - COMPACT RESTAURANT FOOTER
   ---------------------------------------------------------
   Keep only the uploaded restaurant logo, phone, one-line
   address and social links. Compact menu-page bottom spacing
   without changing sticky/category positioning.
========================================================= */
.fm-simple-footer-area {
    clear: both;
}

.fm-simple-footer-top {
    padding: 24px 0 !important;
}

.fm-simple-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

.fm-simple-footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(240px, 70vw);
    margin: 0 auto;
}

.fm-simple-footer-logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}

.fm-simple-footer-logo img._light_logo,
.fm-simple-footer-logo img._dark_logo {
    display: none !important;
}

body.theme-light .fm-simple-footer-logo img._light_logo {
    display: block !important;
}

body.theme-dark .fm-simple-footer-logo img._dark_logo,
body.theme-black .fm-simple-footer-logo img._dark_logo {
    display: block !important;
}

.fm-simple-footer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin: 0;
}

.fm-simple-footer-info p.phone,
.fm-simple-footer-info p.address {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35;
}

.fm-simple-footer-info p.address {
    white-space: nowrap;
    font-size: clamp(9px, 2.8vw, 14px);
}

.fm-simple-footer-info p.address a,
.fm-simple-footer-info p.phone a {
    color: var(--color);
    white-space: nowrap;
}

.fm-simple-footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.fm-simple-footer-social li,
.fm-simple-footer-social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.fm-simple-footer-social li a {
    width: auto;
    height: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sectionDefault:has(.gallery_area #item_container) {
    padding-bottom: 0 !important;
}

.sectionDefault:has(.gallery_area #item_container) > .section_items {
    padding-bottom: 24px !important;
}

@media only screen and (max-width: 767px) {
    .fm-simple-footer-top {
        padding: 20px 0 !important;
    }

    .sectionDefault:has(.gallery_area #item_container) > .section_items {
        padding-bottom: 18px !important;
    }
}

/* =========================================================
   A11 - FOOTER HOURS / CURRENT DAY / QUICK LINKS
========================================================= */
.fm-simple-footer-info p.phone i,
.fm-simple-footer-info p.address i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 18px !important;
}

.fm-simple-footer-info p.address i {
    color: #dc3545 !important;
}

.availableDays li.fm-current-day .timeLeft,
.availableDays li.fm-current-day .timeLeft span,
.availableDays li.fm-current-day .timeRight,
.availableDays li.fm-current-day .timeFormat,
.availableDays li.fm-current-day .timeFormat i,
.availableDays li.fm-current-day .stime,
.availableDays li.fm-current-day .stime span,
.availableDays li.fm-current-day .etime,
.availableDayList .singleDayList.fm-current-day .initialTime,
.availableDayList .singleDayList.fm-current-day .initialTime span,
.availableDayList .singleDayList.fm-current-day .initialTime b,
.availableDayList .singleDayList.fm-current-day .initialTime i {
    color: var(--dcolor, var(--primary-color, #e83e8c)) !important;
    opacity: 1 !important;
}

.availableDays li.fm-current-day .timeLeft,
.availableDays li.fm-current-day .timeFormat,
.availableDayList .singleDayList.fm-current-day .initialTime {
    font-weight: 700 !important;
}

/* A13: stable two-column hours. Quick Links uses the original A7 grid spacing. */
@media only screen and (max-width: 767px) {
    .fm-simple-footer-area ul.availableDays .flexTime {
        align-items: center;
        justify-content: center;
    }

    .fm-simple-footer-area ul.availableDays .timeLeft,
    .fm-simple-footer-area ul.availableDays .timeRight {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        min-width: 0;
    }
}

/* =========================================================
   A14 - IOS-STYLE GLASS POLISH
   Visual treatment only: no sizing, spacing, scrolling,
   sticky positioning, or interaction behavior is changed.
   ========================================================= */
:root {
    --fm-window-glass: rgba(16, 22, 34, .66);
    --fm-window-glass-line: rgba(255, 255, 255, .20);
    --fm-window-glass-shadow: 0 18px 46px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -1px 0 rgba(255, 255, 255, .035);
    --fm-ios-control-line: rgba(255, 255, 255, .18);
    --fm-ios-control-shadow: 0 8px 22px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .17),
        inset 0 -1px 0 rgba(255, 255, 255, .035);
    --fm-ios-sheen: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .012) 58%);
}

body.theme-light,
.light-mode {
    --fm-window-glass: rgba(247, 250, 255, .70);
    --fm-window-glass-line: rgba(255, 255, 255, .72);
    --fm-window-glass-shadow: 0 18px 46px rgba(35, 48, 70, .17),
        inset 0 1px 0 rgba(255, 255, 255, .92),
        inset 0 -1px 0 rgba(18, 30, 50, .06);
    --fm-ios-control-line: rgba(255, 255, 255, .70);
    --fm-ios-control-shadow: 0 8px 22px rgba(35, 48, 70, .13),
        inset 0 1px 0 rgba(255, 255, 255, .90),
        inset 0 -1px 0 rgba(18, 30, 50, .05);
    --fm-ios-sheen: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .05) 62%);
}

body.theme-dark.theme-black,
body.theme-black {
    --fm-window-glass: rgba(16, 16, 16, .70);
    --fm-window-glass-line: rgba(255, 255, 255, .18);
    --fm-window-glass-shadow: 0 18px 46px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .15),
        inset 0 -1px 0 rgba(255, 255, 255, .03);
    --fm-ios-control-line: rgba(255, 255, 255, .16);
    --fm-ios-control-shadow: 0 8px 22px rgba(0, 0, 0, .27),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -1px 0 rgba(255, 255, 255, .03);
    --fm-ios-sheen: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .008) 60%);
}

/* Frontend windows and popups use one theme-aware translucent material. */
.modal-content,
#waiterModal .modal-content,
#facilCategoryDrawer,
.customNavsideBar,
.fm-qr-required-card,
.share_card_content,
.add-to-area,
#globalCategoryTimeNotice .category-time-notice-box,
.fm-section-time-toast,
.fm-quick-tutorial-tip,
.fm-games-shell,
.shopping_cart,
.style_2.shopping_cart,
.fm-global-search-sheet,
.dininOrderInfo {
    background-color: var(--fm-window-glass) !important;
    background-image: var(--fm-ios-sheen) !important;
    border-color: var(--fm-window-glass-line) !important;
    box-shadow: var(--fm-window-glass-shadow) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
}

/* Black theme remains neutral black/gray, never blue-tinted. */
body.theme-black .modal-content,
body.theme-black #waiterModal .modal-content,
body.theme-black #facilCategoryDrawer,
body.theme-black .customNavsideBar,
body.theme-black .fm-qr-required-card,
body.theme-black .share_card_content,
body.theme-black .add-to-area,
body.theme-black #globalCategoryTimeNotice .category-time-notice-box,
body.theme-black .fm-section-time-toast,
body.theme-black .fm-quick-tutorial-tip,
body.theme-black .fm-games-shell,
body.theme-black .shopping_cart,
body.theme-black .style_2.shopping_cart,
body.theme-black .fm-global-search-sheet,
body.theme-black .dininOrderInfo {
    background-color: var(--fm-window-glass) !important;
    background-image: var(--fm-ios-sheen) !important;
}

/* Item squares and cart rows receive the same glass highlights. */
.modern_item_card,
.grid_view .modern_item_card,
.list_view .modern_item_card,
.shopping_cart_content ul.cartItems > li {
    border-color: var(--fm-window-glass-line) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -1px 0 rgba(255, 255, 255, .025) !important;
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
}

body.theme-black .modern_item_card,
body.theme-black .grid_view .modern_item_card,
body.theme-black .list_view .modern_item_card,
body.theme-black .shopping_cart_content ul.cartItems > li {
    background-color: rgba(32, 32, 32, .76) !important;
    background-image: var(--fm-ios-sheen) !important;
}

/* Keep every existing button color/state; add only glass depth and blur. */
.fm-waiter-request-btn,
.fm-waiter-send-request,
.add_btn,
.order-btn,
.fm-global-search-close,
.fm-global-search-result {
    border-color: var(--fm-ios-control-line) !important;
    box-shadow: var(--fm-ios-control-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

/* Stronger depth behind open overlays, without changing their dimensions. */
.modal-backdrop.show,
#facilCategoryDrawerBackdrop.open,
.fm-games-overlay,
.fm-qr-required-overlay,
.fm-global-search-backdrop {
    -webkit-backdrop-filter: blur(9px) saturate(125%);
    backdrop-filter: blur(9px) saturate(125%);
}

/* =========================================================
   A15 - CART / CHECKOUT CONTROLS + NEUTRAL CHECKOUT COLORS
   Menu tabs, category buttons, view buttons and sandwich
   drawer options intentionally retain their A13 appearance.
   ========================================================= */
:root {
    --checkoutInputBackground: rgba(127, 127, 127, .09);
    --checkoutInputBorder: rgba(154, 163, 173, .28);
    --fm-checkout-neutral-bg: rgba(127, 127, 127, .09);
    --fm-checkout-neutral-border: rgba(154, 163, 173, .28);
}

body.theme-light,
.light-mode {
    --checkoutInputBackground: rgba(94, 105, 120, .07);
    --checkoutInputBorder: rgba(94, 105, 120, .23);
    --fm-checkout-neutral-bg: rgba(94, 105, 120, .07);
    --fm-checkout-neutral-border: rgba(94, 105, 120, .23);
}

/* Remove the former yellow/gold cast from checkout fields and rows. */
.guestLoginArea,
.singlePage.style_2 ul li,
.order_input_area input,
.order_input_area select,
.order_input_area textarea,
.order_input_area .select2-selection,
.tipsHeader ul,
.tipsHeader ul li {
    background-color: var(--fm-checkout-neutral-bg) !important;
    border-color: var(--fm-checkout-neutral-border) !important;
}

/* One shared radius for cart and checkout action buttons. */
.shopping_cart .btn,
.shopping_cart .order-btn,
.shopping_cart .fm-empty-cart-close,
.shopping_cart .fm-cart-available-days,
.order_form .btn,
.order_form [type="submit"],
.order_form .confirm_btn,
.checkoutBtnList .btn,
.checkoutBtnList button {
    border-radius: var(--fm-control-radius, 18px) !important;
    box-shadow: var(--fm-ios-control-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

/* Extend the material to every normal action button, excluding only the
   menu-navigation controls that must remain exactly as they were in A13. */
button:not(.categoryItem):not(.fm-menu-label):not(.facil-category-menu-trigger):not(.facil-drawer-category):not(.facil-drawer-dismiss):not(.view-btn),
input[type="button"],
input[type="submit"],
.btn:not(.categoryItem):not(.fm-menu-label):not(.facil-category-menu-trigger):not(.facil-drawer-category):not(.facil-drawer-dismiss):not(.view-btn) {
    border-radius: var(--fm-control-radius, 18px) !important;
    border-color: var(--fm-ios-control-line) !important;
    box-shadow: var(--fm-ios-control-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

/* Cart close: a clean glass X matching the control family. */
.shopping_cart .cartItemList {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
}

.shopping_cart .cartItemList > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--fm-ios-control-line) !important;
    border-radius: var(--fm-control-radius, 18px) !important;
    background: rgba(127, 127, 127, .10) !important;
    color: var(--color, #fff) !important;
    box-shadow: var(--fm-ios-control-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

.shopping_cart .cartItemList > a > i {
    display: none !important;
}

.shopping_cart .cartItemList > a::before {
    content: "\00d7";
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

/* Keep Confirm Order and its related actions consistent in shape. */
.order_form .confirm_btn,
.checkoutBtnList .confirm_btn {
    min-height: 48px;
    overflow: hidden;
}

/* =========================================================
   A16 - TIMED CATEGORY NOTICE GLASS
   Used by categories with configured hours, such as Lunch.
   ========================================================= */
:root {
    --fm-timed-notice-glass: rgba(18, 24, 36, .64);
}

body.theme-light,
.light-mode {
    --fm-timed-notice-glass: rgba(247, 250, 255, .72);
}

body.theme-dark.theme-black,
body.theme-black {
    --fm-timed-notice-glass: rgba(16, 16, 16, .66);
}

#globalCategoryTimeNotice {
    background: rgba(3, 6, 11, .38) !important;
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
}

body.theme-light #globalCategoryTimeNotice,
.light-mode #globalCategoryTimeNotice {
    background: rgba(30, 40, 54, .22) !important;
}

#globalCategoryTimeNotice .category-time-notice-box {
    background-color: var(--fm-timed-notice-glass) !important;
    background-image: var(--fm-ios-sheen) !important;
    border: 1px solid var(--fm-window-glass-line) !important;
    border-radius: var(--fm-control-radius, 18px) !important;
    box-shadow: var(--fm-window-glass-shadow) !important;
    -webkit-backdrop-filter: blur(32px) saturate(175%);
    backdrop-filter: blur(32px) saturate(175%);
}

#globalCategoryTimeNotice .category-time-notice-close {
    border: 1px solid var(--fm-ios-control-line) !important;
    border-radius: var(--fm-control-radius, 18px) !important;
    box-shadow: var(--fm-ios-control-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

body.theme-light #globalCategoryTimeNotice .category-time-notice-message,
body.theme-light #globalCategoryTimeNotice .category-popup-name,
body.theme-light #globalCategoryTimeNotice .category-popup-days,
body.theme-light #globalCategoryTimeNotice .category-popup-time,
.light-mode #globalCategoryTimeNotice .category-time-notice-message,
.light-mode #globalCategoryTimeNotice .category-popup-name,
.light-mode #globalCategoryTimeNotice .category-popup-days,
.light-mode #globalCategoryTimeNotice .category-popup-time {
    color: var(--color, #202a35) !important;
}

/* =========================================================
   A17 - SHORTER PHONE GRID CARDS
   Visual sizing only. Grid columns, scroll anchors, sticky
   navigation, category state and JavaScript stay untouched.
   ========================================================= */
@media only screen and (max-width: 575px) {
    .grid_view .item_thumb_inner {
        grid-template-rows: 112px minmax(0, 1fr) !important;
    }

    .grid_view .modern_item_card.no_img .item_thumb_inner {
        grid-template-rows: minmax(0, 1fr) !important;
    }

    .grid_view .item_img_box {
        height: 112px !important;
    }

    .grid_view .item_details {
        min-height: 114px !important;
        padding: 8px 9px 9px !important;
    }

    .grid_view .col-custom {
        margin-bottom: 10px !important;
    }
}

/* =========================================================
   A19 - TUTORIAL CONTRAST + FINAL-STEP MASK
   Tutorial presentation only. Menu/category sizing, sticky
   positions, scroll anchors and item-grid spacing are unchanged.
   ========================================================= */
:root {
    --fm-tutorial-text: #f7f8fb;
    --fm-tutorial-muted: #c7ccd5;
    --fm-tutorial-arrow-color: #ffffff;
}

body.theme-light,
.light-mode {
    --fm-tutorial-text: #171b22;
    --fm-tutorial-muted: #535c69;
    --fm-tutorial-arrow-color: #20252d;
}

body.theme-dark,
body.theme-dark.theme-black,
body.theme-black {
    --fm-tutorial-text: #f7f8fb;
    --fm-tutorial-muted: #c7ccd5;
    --fm-tutorial-arrow-color: #ffffff;
}

.fm-quick-tutorial-tip,
.fm-quick-tutorial-label {
    color: var(--fm-tutorial-text) !important;
}

.fm-quick-tutorial-progress {
    color: var(--fm-tutorial-muted) !important;
}

.fm-quick-tutorial-tip[data-arrow="up"] .fm-quick-tutorial-arrow {
    border-bottom-color: var(--fm-tutorial-arrow-color) !important;
}

.fm-quick-tutorial-tip[data-arrow="down"] .fm-quick-tutorial-arrow {
    border-top-color: var(--fm-tutorial-arrow-color) !important;
}

.fm-quick-tutorial-tip[data-arrow="big-down"] .fm-quick-tutorial-arrow {
    border-right-color: var(--fm-tutorial-arrow-color) !important;
    border-bottom-color: var(--fm-tutorial-arrow-color) !important;
}

/* The final tutorial spotlight starts flush with the items area.
   Mask its 12px top halo so the category-button edge cannot show. */
body:has(.fm-quick-tutorial-tip[data-arrow="big-down"].is-visible)
    .fm-quick-tutorial-target::before {
    content: "";
    position: absolute !important;
    left: -12px !important;
    right: -12px !important;
    top: -12px !important;
    height: 13px !important;
    z-index: 2147483203 !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, .38) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

/* A23 - Keep the cart close X, but remove its surrounding surface. */
.shopping_cart .cartItemList > a {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* =========================================================
   FACILMENUS A39.1 — CONNECT 4 PIECE VISIBILITY
   The black-theme glass rule uses !important on every cell background.
   These state-specific rules restore visible holes and player pieces.
   ========================================================= */
body.theme-black .fm-connect4 {
    background-color: #2b2d32 !important;
}

body.theme-black .fm-c4-cell {
    background-color: #0d0e11 !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
    opacity: 1 !important;
}

body.theme-black .fm-c4-cell.p1,
body.theme-dark .fm-c4-cell.p1,
body.theme-light .fm-c4-cell.p1,
.light-mode .fm-c4-cell.p1 {
    background-color: var(--dcolor, #e8288f) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, .28), 0 2px 7px rgba(0, 0, 0, .28);
    opacity: 1 !important;
}

body.theme-black .fm-c4-cell.p2,
body.theme-dark .fm-c4-cell.p2,
body.theme-light .fm-c4-cell.p2,
.light-mode .fm-c4-cell.p2 {
    background-color: #f2c94c !important;
    border-color: rgba(255, 255, 255, .34) !important;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, .35), 0 2px 7px rgba(0, 0, 0, .28);
    opacity: 1 !important;
}

/* =========================================================
   FACILMENUS A39.2 — GAME STATE VISIBILITY AUDIT
   Stateful feedback must take precedence over the black-theme glass surface.
   ========================================================= */
body.theme-black .fm-trivia-answer.is-correct,
body.theme-dark .fm-trivia-answer.is-correct,
body.theme-light .fm-trivia-answer.is-correct,
.light-mode .fm-trivia-answer.is-correct {
    background-color: #1f6d45 !important;
    border-color: #2fa96b !important;
    color: #fff !important;
    opacity: 1 !important;
}

body.theme-black .fm-trivia-answer.is-wrong,
body.theme-dark .fm-trivia-answer.is-wrong,
body.theme-light .fm-trivia-answer.is-wrong,
.light-mode .fm-trivia-answer.is-wrong {
    background-color: #7a2d36 !important;
    border-color: #d55a67 !important;
    color: #fff !important;
    opacity: 1 !important;
}

body.theme-black .fm-word-cell.is-start,
body.theme-dark .fm-word-cell.is-start,
body.theme-light .fm-word-cell.is-start,
.light-mode .fm-word-cell.is-start {
    background-color: #343841 !important;
    box-shadow: inset 0 0 0 2px var(--dcolor, #e91e63) !important;
}

body.theme-black .fm-word-cell.is-found,
body.theme-dark .fm-word-cell.is-found,
body.theme-light .fm-word-cell.is-found,
.light-mode .fm-word-cell.is-found {
    background-color: var(--dcolor, #e91e63) !important;
    color: #fff !important;
}

body.theme-black .fm-reaction-signal.is-go,
body.theme-dark .fm-reaction-signal.is-go,
body.theme-light .fm-reaction-signal.is-go,
.light-mode .fm-reaction-signal.is-go {
    background-color: #1f6d45 !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(47, 169, 107, .35), 0 8px 24px rgba(31, 109, 69, .28);
}

/* A47: active scheduled special prices only. */
.priceGroup.fm-special-price-display{display:flex;align-items:center;flex-wrap:wrap;gap:5px 7px}
.fm-special-price-display .fm-special-current,.fm-special-popup-price .fm-item-title-price{color:var(--dcolor,#e83e8c)!important;font-weight:800!important}
.fm-special-badge{display:inline-flex;align-items:center;width:auto!important;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px!important;font-weight:800;line-height:1.5;padding:2px 6px;border-radius:6px;color:var(--dcolor,#e83e8c);background:color-mix(in srgb,var(--dcolor,#e83e8c) 14%,transparent);border:1px solid color-mix(in srgb,var(--dcolor,#e83e8c) 35%,transparent);letter-spacing:.15px}
.fm-special-price-display .fm-special-original{color:inherit!important;opacity:.65;font-weight:400;font-size:.8em}
.fm-special-current small{font-weight:500;font-size:.72em}
.fm-special-popup-price{display:flex;gap:8px;align-items:center}

/* =========================================================
   FACILMENUS A52 — LIVE ORDER GLASS CARD
   Keep the full-width order-sign wrapper completely clear. Only the compact
   square/card receives the iOS glass material, so no gray band appears behind
   it on the home, cart, checkout or tracking pages.
   ========================================================= */
#dineinData,
#dineinData > div,
#dineinData .dininOrderInfo,
#dineinData .dininOrderInfo > .restaurant-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#dineinData .dininOrderInfo::before,
#dineinData .dininOrderInfo::after,
#dineinData .dininOrderInfo > .restaurant-container::before,
#dineinData .dininOrderInfo > .restaurant-container::after {
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

#dineinData .fm-dinein-order-card {
    background-color: var(--fm-window-glass) !important;
    background-image: var(--fm-ios-sheen) !important;
    border: 1px solid var(--fm-window-glass-line) !important;
    box-shadow: var(--fm-window-glass-shadow) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
}

#dineinData .fm-dinein-order-card .fm-order-status-slot .orderLabel.bg-success,
#dineinData [data-fm-live-order][data-order-status="2"] .fm-order-status-slot .orderLabel {
    background: #20b26b !important;
    background-color: #20b26b !important;
    border-color: #20b26b !important;
    color: #fff !important;
}

/* The mobile checkout bar is now a native link for immediate navigation. */
a.cartNofify.notifyBadge.allow-sm.navCart,
a.cartNofify.notifyBadge.allow-sm.navCart:hover,
a.cartNofify.notifyBadge.allow-sm.navCart:focus {
    color: inherit !important;
    text-decoration: none !important;
}

/* A55: keep Show More legible on its actual surface in every theme. */
body.theme-light button.categoryShowMore,body.theme-light a.categoryShowMore{background:#f3f4f6!important;color:#202631!important;border-color:#cbd0d8!important;opacity:1!important}
body.theme-dark button.categoryShowMore,body.theme-dark a.categoryShowMore{background:#252b37!important;color:#fff!important;border-color:#5c6471!important;opacity:1!important}
body.theme-black button.categoryShowMore,body.theme-black a.categoryShowMore{background:#171717!important;color:#fff!important;border-color:#555!important;opacity:1!important}
body .categoryShowMore span,body .categoryShowMore i{color:inherit!important;opacity:1!important}
body .custom-btn:not(.categoryShowMore){color:var(--fm-button-label,#fff)}