/*
Theme Name: EatanceRB
Version: 1.0.0
*/
/* Variables
====================*/
:root {
--e-white: #ffffff;
--e-black: #000000;
--e-primary: #00900e;
--e-primary-rgb: 0, 144, 14;
--e-secondary: #002d43;
--e-secondary-rgb: 0, 45, 67;
--e-gray-25: #fcfcfd;
--e-gray-50: #f9fafb;
--e-gray-100: #f2f4f7;
--e-gray-200: #e4e7ec;
--e-gray-300: #d0d5dd;
--e-gray-400: #98a2b3;
--e-gray-500: #667085;
--e-gray-600: #475467;
--e-gray-700: #344054;
--e-gray-800: #182230;
--e-gray-900: #101828;
--e-gray-950: #0c111d;
--e-brand-25: #f7fef7;
--e-brand-50: #f0fdf0;
--e-brand-100: #ddfbde;
--e-brand-200: #bcf6bf;
--e-brand-300: #89ec91;
--e-brand-400: #4eda59;
--e-brand-500: #26c133;
--e-brand-600: #19a024;
--e-brand-700: #00900e;
--e-brand-800: #006807;
--e-brand-900: #004203;
--e-brand-950: #001f01;
--e-error: #f04438;
--e-error-50: #fef3f2;
--e-error-200: #fecdca;
--e-error-500: #ff4405;
--e-error-600: #d92d20;
--e-error-700: #b42318;
--e-warning: #f79009;
--e-warning-50: #fffaeb;
--e-warning-200: #fedf89;
--e-warning-400: #fdb022;
--e-warning-700: #b54708;
--e-success: #17b26a;
--e-success-50: #ecfdf3;
--e-success-200: #a9efc5;
--e-success-700: #067647;
--e-slate-200: #e2e8f0;
--e-slate-300: #cbd5e1;
--e-yellow: #eaaa08;
--e-orange: #ef6820;
--e-orange-dark: #ff692e;
--e-rose: #f63d68;
--e-pink: #ee46bc;
--e-fuchsia: #d444f1;
--e-indigo: #6172f3;
--e-indigo-50: #eef4ff;
--e-indigo-700: #3538cd;
--e-blue-dark: #2970ff;
--e-blue-light: #0ba5ec;
--e-cyan: #06aed4;
--e-teal: #15b79e;
--e-green: #16b364;
--e-green-light: #66c61c;
--e-moss: #669f2a;
--e-gray-warm: #79716b;
--e-gray-true: #737373;
--e-gray-iron: #70707b;
--e-gray-neutral: #6c737f;
--e-gray-modern: #697586;
--e-gray-cool: #5d6b98;
--e-gray-blue: #4e5ba6;
--e-gray-blue-600: #3e4784;
--e-orange-900: #b93815;
--e-orange-50: #fff4ed;
--e-orange-100: #fef6ee;
--e-orange-200: #ffd6ae;
--e-orange-300: #fda29b;
--e-orange-700: #bc1b06;
--e-orange-800: #912018;
--e-yellow-50: #fefbe8;
--e-yellow-200: #feee95;
--e-yellow-700: #a15c07;
--e-fuchsia-50: #fdf4ff;
--e-fuchsia-200: #f6d0fe;
--e-fuchsia-300: #eeaafd;
--e-fuchsia-600: #ba24d5;
--e-fuchsia-800: #821890;
--e-purple: #7a5af8;
--e-purple-50: #f4f3ff;
--e-purple-100: #ebe9fe;
--e-purple-200: #d9d6fe;
--e-purple-300: #bdb4fe;
--e-purple-600: #6938ef;
--e-purple-800: #4a1fb8;
--e-blue-50: #eff8ff;
--e-blue-200: #b2ddff;
--e-blue-500: #2e90fa;
--e-blue-700: #175cd3;
--e-violet: #875bf7;
--e-violet-300: #c3b5fd;
--e-gradient-gray-800: linear-gradient(27deg, #182230 8.33%, #344054 91.67%);
--e-primary-font: "proxima-nova", sans-serif;
--e-secondary-font: "proxima-nova", sans-serif;
--e-obviously-font: "obviously-narrow", sans-serif;
--e-display-2xl: 72px;
--e-display-lh-2xl: 90px;
--e-display-ls-2xl: -2%;
--e-display-xl: 60px;
--e-display-lh-xl: 72px;
--e-display-ls-xl: -2%;
--e-display-lg: 48px;
--e-display-lh-lg: 60px;
--e-display-ls-lg: -2%;
--e-display-md: 36px;
--e-display-lh-md: 44px;
--e-display-ls-md: -2%;
--e-display-sm: 30px;
--e-display-lh-sm: 38px;
--e-display-xs: 24px;
--e-display-lh-xs: 32px;
--e-text-xl: 20px;
--e-text-lh-xl: 30px;
--e-text-lg: 18px;
--e-text-lh-lg: 28px;
--e-text-md: 16px;
--e-text-lh-md: 24px;
--e-text-small: 14px;
--e-text-lh-small: 20px;
--e-text-xs: 12px;
--e-text-lh-xs: 18px;
--e-font-regular: 400;
--e-font-medium: 500;
--e-font-semibold: 700;
--e-font-bold: 800;
--e-transition: all 0.4s ease;
}
@media (max-width: 1300px) {
:root {
--e-display-2xl: 60px;
--e-display-lh-2xl: 75px;
--e-display-ls-2xl: -1.25%;
--e-display-xl: 50px;
--e-display-lh-xl: 60px;
--e-display-ls-xl: -1.25%;
--e-display-lg: 40px;
--e-display-lh-lg: 50px;
--e-display-ls-lg: -1.25%;
--e-display-md: 28px;
--e-display-lh-md: 34px;
--e-display-ls-md: -1.25%;
--e-display-sm: 25px;
--e-display-lh-sm: 32px;
--e-display-xs: 20px;
--e-display-lh-xs: 27px;
--e-text-xl: 17px;
--e-text-lh-xl: 25px;
--e-text-lg: 15px;
--e-text-lh-lg: 23px;
--e-text-md: 13px;
--e-text-lh-md: 20px;
--e-text-small: 12px;
--e-text-lh-small: 16px;
--e-text-xs: 10px;
--e-text-lh-xs: 15px;
}
}
@media (max-width: 991px) {
:root {
--e-text-xl: 19px;
--e-text-lh-xl: 28px;
--e-text-lg: 17px;
--e-text-lh-lg: 27px;
--e-text-md: 16px;
--e-text-lh-md: 24px;
--e-text-small: 14px;
--e-text-lh-small: 22px;
--e-text-xs: 13px;
--e-text-lh-xs: 20px;
}
}
@media (max-width: 576px) {
:root {
--e-display-sm: 20px;
--e-display-lh-sm: 27px;
--e-display-md: 26px;
--e-display-lh-md: 32px;
--e-display-xs: 18px;
--e-display-lh-xs: 24px;
/* --e-text-lg: 13px;
--e-text-lh-lg: 21px;
--e-text-xl: 15px;
--e-text-lh-xl: 23px; */
}
}
@media (max-width: 375px) {
:root {
--e-text-xl: 17px;
--e-text-lh-xl: 26px;
--e-text-lg: 15px;
--e-text-lh-lg: 24px;
--e-text-md: 14px;
--e-text-lh-md: 20px;
--e-text-small: 12px;
--e-text-lh-small: 18px;
--e-text-xs: 11px;
--e-text-lh-xs: 17px;
}
}
@font-face {
font-family: "proxima-nova";
src: url("../app/fonts/Proxima/Extrabold.otf");
font-display: auto;
font-style: normal;
font-weight: 800;
font-stretch: normal;
}
@font-face {
font-family: "proxima-nova";
src: url("../app/fonts/Proxima/Bold.otf");
font-display: auto;
font-style: normal;
font-weight: 700;
font-stretch: normal;
}
@font-face {
font-family: "proxima-nova";
src: url("../app/fonts/Proxima/Medium.otf");
font-display: auto;
font-style: normal;
font-weight: 500;
font-stretch: normal;
}
@font-face {
font-family: "proxima-nova";
src: url("../app/fonts/Proxima/Regular.otf");
font-display: auto;
font-style: normal;
font-weight: 400;
font-stretch: normal;
}
@font-face {
font-family: "obviously-narrow";
src: url("../app/fonts/Obviously/Obviously_Narrow_Bold.otf");
font-display: auto;
font-style: normal;
font-weight: 700;
font-stretch: normal;
}
::-webkit-scrollbar {
width: 12px;
/* Width of the scrollbar */
height: 10px;
/* Height of the scrollbar for horizontal scrolling */
}
/* Scrollbar Track */
::-webkit-scrollbar-track {
background-color: var(--e-gray-50);
/* Background of the track */
border-radius: 10px;
}
/* Scrollbar Thumb */
::-webkit-scrollbar-thumb {
background-color: var(--e-gray-200);
/* Color of the scrollbar thumb */
border-radius: 10px;
border: 3px solid var(--e-gray-200);
/* Adds padding around the thumb */
}
/* Scrollbar Thumb on Hover */
::-webkit-scrollbar-thumb:hover {
background-color: var(--e-gray-300);
/* Darker color on hover */
border-color: var(--e-gray-300);
}
/* Reset
====================*/
table {
border-collapse: separate;
border-spacing: 0;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
}
*,
::after,
::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
overflow-wrap: anywhere;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
:focus {
outline: 0;
}
img {
border: 0;
vertical-align: middle;
}
a,
a::hover {
text-decoration: none;
position: relative;
}
audio,
video,
canvas {
max-width: 100%;
}
::-webkit-input-placeholder {
opacity: 0.75;
color: var(--e-gray-700);
}
::-moz-placeholder {
opacity: 0.75;
color: var(--e-gray-700);
}
:-ms-input-placeholder {
opacity: 0.75;
color: var(--e-gray-700);
}
:-moz-placeholder {
opacity: 0.75;
color: var(--e-gray-700);
}
::-ms-reveal,
::-ms-clear {
display: none;
}
/* Global
====================*/
body {
margin: 0;
font-family: sans-serif;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
input,
textarea,
button,
select,
option {
font-family: var(--e-primary-font);
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
overflow-wrap: initial !important;
}
input *,
textarea *,
button *,
select *,
option * {
overflow-wrap: initial !important;
}
textarea.form--control {
resize: none;
padding-top: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.clearfix::after {
clear: both;
content: "";
display: table;
}
.e-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: fixed;
width: 100%;
z-index: 9999999;
background: rgba(255, 255, 255, 0.8);
top: 0;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.default-logo {
object-fit: contain !important;
}
/* Typography
====================*/
body {
margin: 0;
padding: 0;
height: 100%;
font-family: var(--e-primary-font);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-600);
}
strong,
b,
label,
.strong {
font-family: inherit;
font-weight: var(--e-font-semibold);
margin: 0;
}
.extra-bold {
font-weight: var(--e-font-bold) !important;
}
@media (max-width: 991px) {
.extra-bold {
font-weight: var(--e-font-semibold) !important;
}
}
.pointer-none {
pointer-events: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: var(--e-secondary-font);
font-weight: var(--e-font-semibold);
color: var(--e-gray-900);
margin: 0 0 16px 0;
}
h1,
.h1 {
font-size: var(--e-display-2xl);
line-height: var(--e-display-lh-2xl);
letter-spacing: var(--e-display-ls-2xl);
}
h2,
.h2 {
font-size: var(--e-display-xl);
line-height: var(--e-display-lh-xl);
letter-spacing: var(--e-display-ls-xl);
}
h3,
.h3 {
font-size: var(--e-display-lg);
line-height: var(--e-display-lh-lg);
letter-spacing: var(--e-display-ls-lg);
}
h4,
.h4 {
font-size: var(--e-display-md);
line-height: var(--e-display-lh-md);
letter-spacing: var(--e-display-ls-md);
}
h5,
.h5 {
font-size: var(--e-display-sm);
line-height: var(--e-display-lh-sm);
}
h6,
.h6 {
font-size: var(--e-display-xs);
line-height: var(--e-display-lh-xs);
}
a {
color: var(--e-primary);
text-decoration: none;
outline: none;
cursor: pointer;
transition: color 0.4s ease;
}
a:hover {
color: var(--e-gray-600);
outline: none;
}
a:focus,
a:active {
color: var(--e-gray-600);
outline: none;
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: none;
-webkit-tap-highlight-color: transparent;
}
p {
margin: 0 0 16px 0;
}
@media (max-width: 1300px) {
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
margin: 0 0 13px 0;
}
p {
margin: 0 0 13px 0;
}
}
.cursor {
cursor: pointer;
}
.capital {
text-transform: capitalize;
}
.brand-color {
color: var(--e-brand-700) !important;
}
.text-red {
color: var(--e-error) !important;
}
.text-green {
color: var(--e-success) !important;
}
.text-orange {
color: var(--e-orange) !important;
}
.text-indigo {
color: var(--e-indigo) !important;
}
.text-gray-300 {
color: var(--e-gray-300) !important;
}
.text-gray-400 {
color: var(--e-gray-400) !important;
}
.text-gray-500 {
color: var(--e-gray-500) !important;
}
.text-gray-600 {
color: var(--e-gray-600) !important;
}
.text-gray-800 {
color: var(--e-gray-800) !important;
}
.text-white {
color: var(--e-white) !important;
}
.text-black {
color: var(--e-black) !important;
}
.text-cyan {
color: var(--e-cyan) !important;
}
.text-ashy-blue {
color: #94a3b8 !important;
}
.dark-bg {
background: linear-gradient(45deg, #101828 0%, #475467 100%);
}
.lower-text {
text-transform: lowercase;
}
.capital-text {
text-transform: capitalize;
}
/* Global Flexbox
====================*/
.d-block {
display: block;
}
.d-none {
display: none;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
flex: 1;
}
.flex-auto {
flex: 0 0 auto;
}
.inline-flex {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flex-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.justify-content-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-content-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end !important;
}
.justify-content-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-content-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-content-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.align-items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.align-items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.align-items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.align-items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.align-items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.align-content-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.align-content-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.align-content-center {
-ms-flex-line-pack: center;
align-content: center;
}
.align-content-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.align-content-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.align-content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.align-self-auto {
-ms-flex-item-align: auto;
align-self: auto;
}
.align-self-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.align-self-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.align-self-center {
-ms-flex-item-align: center;
align-self: center;
}
.align-self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.align-self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
@media (min-width: 576px) {
.flex-sm-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-sm-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-sm-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flex-sm-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-sm-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-sm-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-sm-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.justify-content-sm-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-content-sm-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-content-sm-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-content-sm-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-content-sm-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.align-items-sm-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.align-items-sm-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.align-items-sm-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.align-items-sm-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.align-items-sm-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.align-content-sm-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.align-content-sm-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.align-content-sm-center {
-ms-flex-line-pack: center;
align-content: center;
}
.align-content-sm-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.align-content-sm-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.align-content-sm-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.align-self-sm-auto {
-ms-flex-item-align: auto;
align-self: auto;
}
.align-self-sm-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.align-self-sm-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.align-self-sm-center {
-ms-flex-item-align: center;
align-self: center;
}
.align-self-sm-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.align-self-sm-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.dk-d-none {
display: none;
}
}
@media (min-width: 768px) {
.flex-md-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-md-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-md-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flex-md-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-md-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-md-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-md-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.justify-content-md-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-content-md-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-content-md-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-content-md-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-content-md-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.align-items-md-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.align-items-md-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.align-items-md-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.align-items-md-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.align-items-md-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.align-content-md-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.align-content-md-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.align-content-md-center {
-ms-flex-line-pack: center;
align-content: center;
}
.align-content-md-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.align-content-md-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.align-content-md-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.align-self-md-auto {
-ms-flex-item-align: auto;
align-self: auto;
}
.align-self-md-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.align-self-md-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.align-self-md-center {
-ms-flex-item-align: center;
align-self: center;
}
.align-self-md-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.align-self-md-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
}
@media (min-width: 992px) {
.flex-lg-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-lg-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-lg-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flex-lg-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-lg-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-lg-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-lg-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.justify-content-lg-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-content-lg-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-content-lg-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-content-lg-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-content-lg-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.align-items-lg-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.align-items-lg-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.align-items-lg-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.align-items-lg-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.align-items-lg-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.align-content-lg-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.align-content-lg-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.align-content-lg-center {
-ms-flex-line-pack: center;
align-content: center;
}
.align-content-lg-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.align-content-lg-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.align-content-lg-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.align-self-lg-auto {
-ms-flex-item-align: auto;
align-self: auto;
}
.align-self-lg-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.align-self-lg-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.align-self-lg-center {
-ms-flex-item-align: center;
align-self: center;
}
.align-self-lg-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.align-self-lg-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
}
@media (min-width: 1200px) {
.flex-xl-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-xl-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-xl-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flex-xl-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flex-xl-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-xl-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.flex-xl-wrap-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.justify-content-xl-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-content-xl-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-content-xl-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-content-xl-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-content-xl-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.align-items-xl-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.align-items-xl-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.align-items-xl-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.align-items-xl-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.align-items-xl-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.align-content-xl-start {
-ms-flex-line-pack: start;
align-content: flex-start;
}
.align-content-xl-end {
-ms-flex-line-pack: end;
align-content: flex-end;
}
.align-content-xl-center {
-ms-flex-line-pack: center;
align-content: center;
}
.align-content-xl-between {
-ms-flex-line-pack: justify;
align-content: space-between;
}
.align-content-xl-around {
-ms-flex-line-pack: distribute;
align-content: space-around;
}
.align-content-xl-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.align-self-xl-auto {
-ms-flex-item-align: auto;
align-self: auto;
}
.align-self-xl-start {
-ms-flex-item-align: start;
align-self: flex-start;
}
.align-self-xl-end {
-ms-flex-item-align: end;
align-self: flex-end;
}
.align-self-xl-center {
-ms-flex-item-align: center;
align-self: center;
}
.align-self-xl-baseline {
-ms-flex-item-align: baseline;
align-self: baseline;
}
.align-self-xl-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
}
/* Global for theme
====================*/
.container {
width: 100%;
max-width: 1280px;
padding-left: 16px;
padding-right: 16px;
margin: 0 auto;
}
.container-xl {
width: 100%;
max-width: 1624px;
padding-left: 16px;
padding-right: 16px;
margin: 0 auto;
}
@media (max-width: 1300px) {
.container {
max-width: 1056px;
}
.container-xl {
max-width: 1280px;
}
}
@media (max-width: 1120px) {
.container-xl,
.container {
max-width: 1056px;
padding-left: 24px;
padding-right: 24px;
}
}
@media (max-width: 576px) {
.container-xl,
.container {
padding-left: 16px;
padding-right: 16px;
}
.mb-d-none {
display: none;
}
}
.wd-100 {
width: 100%;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.pt-8 {
padding-top: 8px;
}
.pb-8 {
padding-bottom: 8px;
}
.pr-8 {
padding-right: 8px;
}
.pl-8 {
padding-left: 8px;
}
.p-8 {
padding-top: 8px;
padding-bottom: 8px;
}
.pt-12 {
padding-top: 12px;
}
.pb-12 {
padding-bottom: 12px;
}
.pr-12 {
padding-right: 12px;
}
.pl-12 {
padding-left: 12px;
}
.p-12 {
padding-top: 12px;
padding-bottom: 12px;
}
.pt-16 {
padding-top: 16px;
}
.pb-16 {
padding-bottom: 16px;
}
.pr-16 {
padding-right: 16px;
}
.pl-16 {
padding-left: 16px;
}
.p-16 {
padding-top: 16px;
padding-bottom: 16px;
}
.pt-20 {
padding-top: 20px;
}
.pb-20 {
padding-bottom: 20px;
}
.pr-20 {
padding-right: 20px;
}
.pl-20 {
padding-left: 20px;
}
.p-20 {
padding-top: 20px;
padding-bottom: 20px;
}
.pt-24 {
padding-top: 24px;
}
.pb-24 {
padding-bottom: 24px;
}
.pr-24 {
padding-right: 24px;
}
.pl-24 {
padding-left: 24px;
}
.p-24 {
padding-top: 24px;
padding-bottom: 24px;
}
.pt-32 {
padding-top: 32px;
}
.pb-32 {
padding-bottom: 32px;
}
.pr-32 {
padding-right: 32px;
}
.pl-32 {
padding-left: 32px;
}
.p-32 {
padding-top: 32px;
padding-bottom: 32px;
}
.pb-36 {
padding-bottom: 36px;
}
.pt-48 {
padding-top: 48px;
}
.pb-48 {
padding-bottom: 48px;
}
.p-48 {
padding-top: 48px;
padding-bottom: 48px;
}
.pt-56 {
padding-top: 56px;
}
.pb-56 {
padding-bottom: 56px;
}
.p-56 {
padding-top: 56px;
padding-bottom: 56px;
}
.pt-60 {
padding-top: 60px;
}
.pb-60 {
padding-bottom: 60px;
}
.pt-64 {
padding-top: 64px;
}
.pb-64 {
padding-bottom: 64px;
}
.p-64 {
padding-top: 64px;
padding-bottom: 64px;
}
.p-0 {
padding: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
}
.m-0 {
margin: 0 !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mt-12 {
margin-top: 12px !important;
}
.mb-12 {
margin-bottom: 12px !important;
}
.mt-16 {
margin-top: 16px !important;
}
.mb-16 {
margin-bottom: 16px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mt-24 {
margin-top: 24px !important;
}
.mb-24 {
margin-bottom: 24px !important;
}
.border-top {
border-top: 1px solid var(--e-gray-200);
}
.border-bottom {
border-bottom: 1px solid var(--e-gray-200);
}
.rounded-corner-8 {
border-radius: 8px;
}
.full-width {
width: 100% !important;
}
.white-card {
border-radius: 16px;
background: var(--e-white);
}
.gray-card {
border-radius: 16px;
background: var(--e-gray-100);
}
.white-bg {
background: var(--e-white);
}
.gray-bg {
background: var(--e-gray-100);
}
.display-none {
display: none;
}
.gap-0 {
gap: 0 !important;
}
@media (min-width: 577px) {
.hide-desktop {
display: none;
}
}
@media (max-width: 1300px) {
.pt-8 {
padding-top: 7px;
}
.pb-8 {
padding-bottom: 7px;
}
.pr-8 {
padding-right: 7px;
}
.pl-8 {
padding-left: 7px;
}
.p-8 {
padding-top: 7px;
padding-bottom: 7px;
}
.pt-12 {
padding-top: 10px;
}
.pb-12 {
padding-bottom: 10px;
}
.p-12 {
padding-top: 10px;
padding-bottom: 10px;
}
.pt-16 {
padding-top: 13px;
}
.pb-16 {
padding-bottom: 13px;
}
.p-16 {
padding-top: 13px;
padding-bottom: 13px;
}
.pt-24 {
padding-top: 20px;
}
.pb-24 {
padding-bottom: 20px;
}
.p-24 {
padding-top: 20px;
padding-bottom: 20px;
}
.pt-32 {
padding-top: 27px;
}
.pb-32 {
padding-bottom: 27px;
}
.pr-32 {
padding-right: 27px;
}
.pl-32 {
padding-left: 27px;
}
.p-32 {
padding-top: 27px;
padding-bottom: 27px;
}
.pb-36 {
padding-bottom: 31px;
}
.pt-48 {
padding-top: 40px;
}
.pb-48 {
padding-bottom: 40px;
}
.p-48 {
padding-top: 40px;
padding-bottom: 40px;
}
.pt-56 {
padding-top: 46px;
}
.pb-56 {
padding-bottom: 46px;
}
.p-56 {
padding-top: 46px;
padding-bottom: 46px;
}
.pt-60 {
padding-top: 49px;
}
.pb-60 {
padding-bottom: 49px;
}
.pt-64 {
padding-top: 53px;
}
.pb-64 {
padding-bottom: 53px;
}
.p-64 {
padding-top: 53px;
padding-bottom: 53px;
}
.white-card {
border-radius: 13px;
}
.gray-card {
border-radius: 13px;
}
}
@media (max-width: 991px) {
.pt-32 {
padding-top: 24px;
}
.pb-32 {
padding-bottom: 24px;
}
.pr-32 {
padding-right: 24px;
}
.pl-32 {
padding-left: 24px;
}
.p-32 {
padding-top: 24px;
padding-bottom: 24px;
}
.pb-36 {
padding-bottom: 28px;
}
.pt-48 {
padding-top: 32px;
}
.pb-48 {
padding-bottom: 32px;
}
.p-48 {
padding-top: 32px;
padding-bottom: 32px;
}
.pt-56 {
padding-top: 40px;
}
.pb-56 {
padding-bottom: 40px;
}
.p-56 {
padding-top: 40px;
padding-bottom: 40px;
}
.pt-60 {
padding-top: 40px;
}
.pb-60 {
padding-bottom: 40px;
}
.pt-64 {
padding-top: 44px;
}
.pb-64 {
padding-bottom: 44px;
}
.p-64 {
padding-top: 44px;
padding-bottom: 44px;
}
.pt-sm-0 {
padding-top: 0 !important;
}
.hide-mobile {
display: none !important;
}
}
@media (max-width: 767px) {
.pr-32 {
padding-right: 16px;
}
.pl-32 {
padding-left: 16px;
}
.pt-24 {
padding-top: 16px;
}
.pb-24 {
padding-bottom: 16px;
}
.p-24 {
padding-top: 16px;
padding-bottom: 16px;
}
}
/* Theme base style
==================== */
.noscroll {
overflow: hidden;
}
.one-line {
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100%;
}
.page-main {
position: relative;
width: 100%;
padding-bottom: 120px;
}
.page-main:has(.cust-modal) {
z-index: 101;
}
.page-content {
padding-top: 32px;
/* min-height: 100vh; */
}
.title-group {
position: relative;
gap: 12px;
}
.title-group.filters--action .sec-title,
/* .title-group.filters--action .badges-group { flex: 0 0 calc(50% - 24px); justify-content: flex-end; }*/
.title-group.filters--action .badges-group {
flex: 0 0 auto;
}
.title-group .see-all {
margin-left: auto;
}
.title-group .see-all .link {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
padding: 10px 14px;
border-radius: 40px;
text-decoration: none;
color: var(--e-gray-600);
background: var(--e-white);
}
.title-group .see-all .link:hover {
text-decoration: none;
outline: none;
color: var(--e-gray-950);
background: var(--e-gray-100);
}
.swiper-arrows {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 88px;
}
.swiper-arrows .swiper-button-prev,
.swiper-arrows .swiper-button-next {
position: initial;
margin: 0;
width: 40px;
height: 40px;
display: block;
border-radius: 40px;
background-color: var(--e-gray-100);
cursor: pointer;
}
.swiper-arrows .swiper-button-prev {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 15L7.5 10L12.5 5' stroke='%23344054' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: 20px;
}
.swiper-arrows .swiper-button-next {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' stroke='%23344054' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: 20px;
}
.swiper-arrows .swiper-button-prev:hover,
.swiper-arrows .swiper-button-next:hover {
background-color: var(--e-gray-300);
}
.swiper-button-prev:after,
.swiper-button-next:after {
display: none !important;
}
.SumoSelect:hover,
.SumoSelect:hover .SelectBox,
.SumoSelect:focus,
.SumoSelect:focus .SelectBox,
.SelectBox,
.SelectBox:hover,
.SelectBox:focus {
outline: none !important;
box-shadow: none !important;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
position: relative;
border: 1px solid var(--e-gray-300);
background: var(--e-white);
color: var(--e-gray-700);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
cursor: pointer;
box-shadow: 0px 0px 0px 1px rgba(16, 24, 40, 0.18) inset,
0px -2px 0px 0px rgba(16, 24, 40, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.button span {
position: relative;
cursor: pointer;
user-select: none;
z-index: 2;
white-space: nowrap;
color: var(--e-gray-700);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
}
.button-xs {
padding: 5px 10px;
}
.button-xs span {
font-size: var(--e-text-small);
}
.button-sm {
padding: 8px 14px;
}
.button-md {
padding: 10px 16px;
}
.button-lg {
padding: 10px 16px;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.button-lg span {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.button-xl {
padding: 12px 20px;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.button-xl span {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.button-2xl {
gap: 12px;
padding: 16px 24px;
border-radius: 10px;
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.button-2xl span {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.button>svg {
width: 20px;
height: 20px;
position: relative;
z-index: 2;
}
.button-2xl>svg {
width: 24px;
height: 24px;
}
.button:hover,
.button:focus {
outline: none;
color: var(--e-gray-800);
background: var(--e-gray-100);
}
.button:hover span,
.button:focus span {
color: var(--e-gray-800);
}
.fill-button {
border: none;
color: var(--e-white);
background: var(--e-brand-600);
}
.fill-button span {
color: var(--e-white);
}
.fill-button:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 8px;
background: linear-gradient(var(--e-brand-600), var(--e-brand-600)) padding-box,
linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) border-box;
border: 2px solid transparent;
}
.fill-button:hover,
.fill-button:focus {
outline: none;
border: none;
color: var(--e-white);
background: var(--e-brand-700);
}
.fill-button:hover:before,
.fill-button:focus:before {
/* bborder: 2px solid transparent; */
color: var(--e-white);
background: linear-gradient(var(--e-brand-700), var(--e-brand-700)) padding-box,
linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) border-box;
}
.fill-button:hover span,
.fill-button:focus span {
color: var(--e-white);
}
.fill-button.dark,
.fill-button.dark::before {
background: var(--e-gray-800);
}
.fill-button.dark:hover,
.fill-button.dark:hover::before {
background: var(--e-brand-700);
border-color: var(--e-brand-700);
}
.fill-button.dark:hover span {
color: var(--e-white);
}
.button:disabled,
.button.disabled,
.fill-button:disabled,
.fill-button.disabled {
outline: none;
border: 1px solid var(--e-gray-200);
background: var(--e-white);
color: var(--e-gray-400);
cursor: not-allowed;
}
.fill-button:disabled:before,
.fill-button.disabled:before {
display: none;
}
.fill-button.danger {
background: var(--e-error-600);
}
.fill-button.danger:before {
background: linear-gradient(var(--e-error-600), var(--e-error-600)) padding-box,
linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) border-box;
border: 2px solid transparent;
}
.fill-button.danger:hover,
.fill-button.danger:focus {
background: var(--e-error-700);
}
.fill-button.danger:hover:before,
.fill-button.danger:focus:before {
background: linear-gradient(var(--e-error-700), var(--e-error-700)) padding-box,
linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) border-box;
}
.border-button {
border: 1px solid var(--e-brand-300);
background: var(--e-brand-50);
color: var(--e-brand-700);
box-shadow: none;
}
.border-button svg {
fill: var(--e-brand-700);
}
.border-button:hover,
.border-button:focus {
border: 1px solid var(--e-brand-500);
background: var(--e-brand-100);
color: var(--e-brand-700);
}
.border-button:hover svg {
fill: var(--e-gray-700);
}
.border-button span {
color: var(--e-brand-700);
}
.ar-button-group {
padding: 0;
}
.ar-button-group .btn {
border: none;
background: transparent;
padding: 14px 8px 14px 8px;
cursor: pointer;
border-radius: 7px 0 0 7px;
}
.ar-button-group .btn:last-child {
border-radius: 0 7px 7px 0;
}
.ar-button-group .btn:hover {
border: none;
background: var(--e-brand-700);
}
.ar-button-group .btn svg {
display: block;
}
.voucher-card .ar-button-group .btn svg path {
fill: var(--e-black);
}
.voucher-card .ar-button-group .btn:hover svg path,
.ar-button-group .btn:hover svg path {
fill: var(--e-white);
}
.ar-button-group .input {
border: none;
padding: 0;
height: 44px;
width: 46px;
background: transparent;
text-align: center;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
color: var(--e-brand-700);
}
.sidebar-title {
padding: 0 10px 22px;
margin: 0;
color: var(--e-gray-800);
}
.badges-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
gap: 12px;
overflow: auto;
-ms-overflow-style: none;
/*scrollbar-width: none*/
}
/* .badges-group::-webkit-scrollbar { display: none } */
.badge {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 16px;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
color: var(--e-gray-700);
border: 1px solid var(--e-gray-200);
background: var(--e-gray-50);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.badge.badge-sm {
padding: 2px 6px;
}
.badge.badge-md {
padding: 2px 8px;
}
.badge.badge-lg {
padding: 4px 10px;
}
.badge.badge-xl {
padding: 7px 10px;
border-radius: 20px;
font-weight: var(--e-font-semibold);
}
.shadow {
box-shadow: 0px 0px 0px 1px rgba(16, 24, 40, 0.18) inset,
0px -2px 0px 0px rgba(16, 24, 40, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.fill-badge .badge {
border: 1px solid var(--e-gray-100);
background: var(--e-gray-100);
}
.fill-badge .badge.active,
.badge.active {
background: var(--e-brand-50);
border-color: var(--e-brand-200);
color: var(--e-brand-700);
}
.badge .badge-close {
display: none;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
background-position: center center;
background-repeat: no-repeat;
}
.badge.active .badge-close {
display: block;
}
.badge .arrow-down {
display: block;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
background-position: center center;
background-repeat: no-repeat;
}
.badge.active .arrow-down {
background-image: url('data:image/svg+xml,');
background-position: center center;
background-repeat: no-repeat;
}
.fill-badge .badge:hover,
.badge:hover {
background: var(--e-gray-50);
border-color: var(--e-gray-200);
color: var(--e-gray-500);
}
.fill-badge .badge.active:hover,
.badge.active:hover {
background: var(--e-brand-100);
border-color: var(--e-brand-200);
color: var(--e-brand-600);
}
.required .badge,
.badge.required {
background: var(--e-warning-50);
border-color: var(--e-warning-200);
color: var(--e-orange-dark);
}
.form__radio-group,
.form__checkbox-group {
position: relative;
}
.form__radio-group input[type="radio"],
.form__checkbox-group input[type="checkbox"],
.form__radio-group input[type="checkbox"] {
display: none;
}
.form__radio-group .radio-label,
.form__checkbox-group .checkbox-label {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
padding: 8px;
border-radius: 6px;
border: 1px solid var(--e-gray-100);
background: var(--e-white);
cursor: pointer;
text-transform: capitalize;
}
.form__radio-group .radio-label:hover,
.form__checkbox-group .checkbox-label:hover {
background: var(--e-gray-50);
}
.form__radio-group input[type="radio"]:checked+.radio-label:hover,
.form__checkbox-group input[type="checkbox"]:checked+.checkbox-label:hover {
background: var(--e-brand-50);
border-color: var(--e-brand-600);
}
.form__radio-group .radio-label .radio-icon {
position: relative;
background: var(--e-white);
border: 1px solid var(--e-gray-300);
width: 16px;
height: 16px;
border-radius: 50%;
}
.form__radio-group .radio-label .radio-icon .active-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--e-white);
z-index: 2;
opacity: 0;
visibility: hidden;
}
.form__radio-group input[type="radio"]:checked+.radio-label .radio-icon,
.form__radio-group input[type="checkbox"]:checked+.radio-label .radio-icon {
background: var(--e-brand-600);
border-color: var(--e-brand-600);
}
.form__radio-group input[type="radio"]:checked+.radio-label .radio-icon .active-circle,
.form__radio-group input[type="checkbox"]:checked+.radio-label .radio-icon .active-circle {
opacity: 1;
visibility: visible;
}
.form__checkbox-group .checkbox-label .checkbox-icon {
position: relative;
background: var(--e-white);
border: 1px solid var(--e-gray-300);
width: 16px;
height: 16px;
border-radius: 4px;
flex: 0 0 auto;
}
.form__checkbox-group .checkbox-label .checkbox-icon .active-checkmark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
z-index: 2;
opacity: 0;
visibility: hidden;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
}
.form__checkbox-group input[type="checkbox"]:checked+.checkbox-label .checkbox-icon {
background: var(--e-brand-600);
border-color: var(--e-brand-600);
flex: 0 0 auto;
}
.form__checkbox-group input[type="checkbox"]:checked+.checkbox-label .checkbox-icon .active-checkmark {
opacity: 1;
visibility: visible;
}
.form__radio-group .radio-label .text,
.form__radio-group .radio-label .price,
.form__checkbox-group .checkbox-label .text,
.form__checkbox-group .checkbox-label .price {
color: var(--e-gray-600);
font-weight: var(--e-font-medium);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.cust-modal .form__checkbox-group .checkbox-label .text,
.cust-modal .form__radio-group .radio-label .text,
.cust-modal .form__radio-group .radio-label .price,
.cust-modal .form__checkbox-group .checkbox-label .price {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.cust-modal .ar-button-group {
gap: 0;
}
.cust-modal .ar-button-group .input {
width: 35px;
}
.form__checkbox-group .checkbox-label .text,
.form__radio-group .radio-label .text {
overflow-wrap: anywhere;
text-align: left;
}
.form__radio-group input[type="radio"]:checked+.radio-label .text,
.form__radio-group input[type="radio"]:checked+.radio-label .price,
.form__checkbox-group input[type="checkbox"]:checked+.checkbox-label .text,
.form__checkbox-group input[type="checkbox"]:checked+.checkbox-label .price {
color: var(--e-brand-600);
}
.form__radio-group .radio-label .price,
.form__checkbox-group .checkbox-label .price {
margin-left: auto;
flex: 0 0 auto;
}
/* .sticky-badges.sticky {
position: sticky;
top: 0;
z-index: 999;
background: var(--e-white);
padding-top: 12px;
padding-bottom: 12px;
transition: var(--e-transition);
background-color: var(--e-white);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
box-shadow: rgba(33, 35, 38, 0.2) 0px 0px 10px 0px;
border-radius: 0 0 10px 10px;
padding: 12px;
} */
.sticky-badges .sec-title {
transition: var(--e-transition);
}
.sticky-badges.sticky .sec-title {
font-size: 150%;
}
.trending-restaurants .sticky-badges.sticky {
padding-left: 24px;
padding-right: 24px;
}
.trending-restaurants .title-group.filters--action .badges-group {
max-width: 100%;
}
.sticky-badges.sticky .badges-group {
padding-bottom: 0;
}
.trending-restaurants .infinite-scroll-component {
overflow: hidden !important;
}
body.compensate-for-scrollbar {
margin-right: 15px !important;
}
@media (max-width: 1300px) {
.page-main {
padding-bottom: 100px;
}
.page-content {
padding-top: 27px;
}
.title-group {
gap: 12px;
}
.title-group .see-all .link {
padding: 8px 12px;
border-radius: 33px;
}
.title-group.filters--action .sec-title,
/* .title-group.filters--action .badges-group { flex: 0 0 calc(50% - 20px); } */
.title-group.filters--action .badges-group {
max-width: 50% !important;
}
.swiper-arrows {
width: 73px;
}
.swiper-arrows .swiper-button-prev,
.swiper-arrows .swiper-button-next {
width: 33px;
height: 33px;
border-radius: 33px;
}
.swiper-arrows .swiper-button-prev {
background-size: 17px;
}
.swiper-arrows .swiper-button-next {
background-size: 17px;
}
.button {
padding: 8px 13px;
}
.button-xs {
padding: 4px 10px;
}
.button-sm {
padding: 8px 12px;
}
.button-md {
padding: 8px 13px;
}
.button-lg {
padding: 8px 13px;
}
.button-xl {
padding: 10px 17px;
}
.button-2xl {
gap: 10px;
padding: 13px 20px;
border-radius: 8px;
}
.button>svg {
width: 17px;
height: 17px;
}
.button-2xl>svg {
width: 20px;
height: 20px;
}
.ar-button-group {
padding: 0 !important;
}
.ar-button-group .btn {
padding: 9px 6px;
}
.ar-button-group .input {
height: 35px;
width: 35px;
}
.sidebar-title {
padding: 0 10px 13px;
}
.badges-group {
gap: 10px;
}
.badge {
padding: 2px 8px;
border-radius: 13px;
}
.badge.badge-md {
padding: 2px 8px;
}
.badge.badge-lg {
padding: 4px 10px;
}
.badge.badge-xl {
padding: 8px 10px;
border-radius: 17px;
}
.badge .badge-close {
width: 13px;
height: 13px;
}
.badge .arrow-down {
width: 13px;
height: 13px;
}
.form__checkbox-group .checkbox-label {
gap: 13px;
}
.form__radio-group .radio-label .radio-icon {
width: 14px;
height: 14px;
}
.form__checkbox-group .checkbox-label .checkbox-icon {
width: 14px;
height: 14px;
}
.form__checkbox-group .checkbox-label .checkbox-icon .active-checkmark {
width: 10px;
height: 10px;
}
}
@media (max-width: 1200px) {
.page-main {
padding-bottom: 80px;
}
.button-xs {
padding: 4px 8px;
}
.button-xs span {
font-size: 10px;
}
}
@media (max-width: 767px) {
.page-main {
padding-bottom: 60px;
}
.title-group.filters--action {
flex-wrap: wrap;
gap: 12px;
}
.title-group.filters--action .sec-title,
.title-group.filters--action .badges-group {
flex: 0 0 100%;
justify-content: flex-start;
max-width: 100% !important;
}
.trending-restaurants .sticky-badges.sticky {
padding-left: 16px;
padding-right: 16px;
}
.trending-restaurants .title-group.filters--action .badges-group {
padding-bottom: 12px;
}
}
@media (max-width: 575px) {
.page-main {
padding-bottom: 40px;
}
.title-group {
flex-wrap: wrap;
}
.title-group .sec-title {
width: 100%;
}
.see-all,
.swiper-arrows {
display: none;
}
.menu_iteam-lists .menu_item .ar-button-group {
gap: 0;
}
.ar-button-group .btn svg {
width: 12px;
height: 12px;
}
.cust-modal.customise-order .ar-button-group {
padding: 4px;
}
}
@media screen and (min-width: 576px) {
.live-event-pagination {
display: none;
}
}
/* Column
====================*/
.one-third-column {
gap: 34px 20px;
}
.one-third-column .left-bar.width-294 {
width: 294px;
}
.one-third-column .right-bar {
width: calc(100% - 318px);
}
.one-third-column .right-bar .container:has(.empty) {
padding: 0;
}
@media (max-width: 1300px) {
.one-third-column {
gap: 20px;
}
.one-third-column .left-bar.width-294 {
width: 250px;
}
.one-third-column .right-bar {
width: calc(100% - 270px);
}
}
/* Accordion
====================*/
.accordion .accordion-item {
margin-bottom: 8px;
}
.accordion .accordion-item .accordion-title {
padding: 18px 30px 15px 0;
position: relative;
margin: 0;
border-bottom: 1px solid var(--e-gray-800);
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
color: var(--e-gray-800);
text-transform: capitalize;
}
.accordion .accordion-item .accordion-title:after {
content: "";
position: absolute;
right: 10px;
top: 50%;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid var(--e-gray-700);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transition: transform 0.3s;
-webkit-transition: transform 0.3s;
-moz-transition: transform 0.3s;
}
.accordion .accordion-item.active .accordion-title:after {
transform: translateY(-50%) rotate(180deg);
-webkit-transform: translateY(-50%) rotate(180deg);
-moz-transform: translateY(-50%) rotate(180deg);
}
.accordion .accordion-content {
padding-top: 24px;
}
@media (max-width: 1300px) {
.accordion .accordion-item .accordion-title {
padding: 12px 25px 12px 0;
}
.accordion .accordion-item .accordion-title:after {
right: 8px;
}
.accordion .accordion-content {
padding-top: 12px;
}
}
/* Dropdown
====================*/
.drop-wrap {
position: relative;
}
.open-hours-modal {
z-index: 998 !important;
}
.notify-modal {
z-index: 999;
}
.drop-wrap .drop-option {
display: none;
position: absolute;
top: 100%;
right: 0;
animation-name: fadeInDown;
-webkit-animation-name: fadeInDown;
animation-duration: 0.35s;
animation-fill-mode: both;
-webkit-animation-duration: 0.35s;
-webkit-animation-fill-mode: both;
z-index: -1;
}
.drop-wrap.left--align .drop-option {
top: 100%;
right: initial;
left: 0;
}
.drop-wrap .drop-option.show {
display: block;
opacity: 0;
z-index: 999;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
}
.drop-wrap .drop-option .modal-wrapper {
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
@keyframes fadeInUp {
from {
transform: translate3d(0, 30px, 0);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes fadeInDown {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 20px, 0);
opacity: 0;
}
}
@media (max-width: 576px) {
.drop-wrap .drop-option {
display: none;
position: absolute;
top: 100%;
right: 0;
animation-name: fadeInLeft;
-webkit-animation-name: fadeInLeft;
animation-duration: 0.35s;
animation-fill-mode: both;
-webkit-animation-duration: 0.35s;
-webkit-animation-fill-mode: both;
z-index: -1;
}
.drop-wrap.left--align .drop-option {
top: 100%;
right: initial;
left: 0;
}
.drop-wrap .drop-option.show {
animation-name: fadeInLeft;
-webkit-animation-name: fadeInLeft;
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
}
@keyframes fadeInLeft {
from {
transform: translate3d(30px, 0, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes fadeOutRight {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(30px, 0, 0);
opacity: 0;
}
}
}
/* Footer
====================*/
.footer {
display: flex;
padding: 64px 0 36px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
}
.footer .inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 80px;
}
.footer .footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.footer .footer-top .left-content .company-info {
display: flex;
min-width: 320px;
max-width: 320px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
}
.footer .footer-top .right-content .quick-links {
display: flex;
justify-content: flex-end;
align-items: flex-start;
gap: 32px;
}
.footer .footer-top .right-content .quick-links .link-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 160px;
}
.footer .footer-top .right-content .quick-links .link-block .links {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-500);
}
.footer .footer-top .right-content .quick-links .link-block .links:hover {
color: var(--e-brand-700);
}
.footer .footer-top .right-content {
display: flex;
gap: 167px;
}
.footer .footer-top .right-content .app-downloads {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.footer .footer-top .right-content .app-downloads img {
max-width: 100%;
height: auto;
}
.footer .footer-top .right-content .app-downloads .title {
color: var(--e-brand-700);
}
.footer .footer-bottom {
display: flex;
padding-top: 32px;
justify-content: space-between;
align-items: center;
align-content: center;
row-gap: 24px;
align-self: stretch;
flex-wrap: wrap;
}
.footer .footer-bottom .social-media {
display: flex;
align-items: center;
gap: 24px;
}
.footer .footer-bottom .social-media .social-icon svg path {
transition: all 0.4s ease;
}
.footer .footer-bottom .social-media .social-icon:hover svg path {
fill: #002d43;
}
@media (max-width: 1300px) {
.footer {
padding: 50px 0 36px;
}
.footer .inner {
gap: 50px;
}
.footer .footer-top,
.footer .footer-top .right-content {
gap: 50px;
}
.footer .footer-top .right-content .quick-links .link-block {
width: 120px;
}
.footer .footer-top .left-content .company-info {
min-width: 220px;
max-width: 220px;
gap: 15px;
}
.footer .footer-top .left-content .company-info .logo svg {
max-width: 120px;
}
.footer .footer-bottom .social-media .social-icon svg {
max-width: 18px;
}
}
@media (max-width: 1024px) {
.footer {
padding: 30px 0 20px;
}
.footer .footer-bottom {
padding-top: 20px;
}
.footer .footer-top,
.footer .footer-top .right-content {
gap: 20px;
}
.footer .footer-top .right-content .quick-links .link-block {
width: 105px;
}
.footer .footer-top .left-content .company-info {
min-width: 190px;
max-width: 190px;
gap: 10px;
}
}
@media (max-width: 767px) {
.footer .footer-top,
.footer .footer-top .right-content {
flex-direction: column;
align-items: center;
gap: 40px;
}
.footer .footer-top .left-content .company-info {
min-width: 290px;
max-width: 290px;
gap: 10px;
text-align: center;
align-items: center;
}
.footer .footer-top .right-content .quick-links {
gap: 20px;
}
.footer .footer-top .right-content .quick-links .link-block {
align-items: center;
width: 150px;
}
.footer .footer-top .right-content .app-downloads {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.footer .footer-top .right-content .app-downloads .title {
flex: 100%;
text-align: center;
}
.footer .footer-bottom .text {
text-align: center;
}
}
@media (max-width: 520px) {
.footer .footer-top,
.footer .footer-top .right-content,
.footer .footer-top .left-content .company-info,
.footer .footer-top .right-content .quick-links .link-block {
align-items: flex-start;
text-align: left;
}
.footer .footer-top .right-content .quick-links,
.footer .footer-top .right-content .app-downloads {
flex-direction: column;
align-items: flex-start;
}
.footer .footer-bottom {
flex-direction: column;
row-gap: 10px;
}
}
/* Header
====================*/
.page-header {
position: relative;
width: 100%;
background: var(--e-white);
border-bottom: 1px solid var(--e-gray-200);
z-index: 999;
}
header.page-header {
position: sticky;
top: 0;
width: 100%;
z-index: 100;
transition: all ease 0.3s;
}
.page-nav {
height: 95px;
}
.page-nav .vertical-separator {
background: var(--e-gray-300);
width: 1px;
height: 100%;
}
.page-nav .nav-left {
gap: 22px;
}
.page-nav .header__logo .header__full-logo {
display: block;
max-width: 175px;
max-height: 40px;
object-fit: contain;
object-position: left;
}
.page-nav .header__logo .header__icon-logo {
display: none;
max-width: 40px;
max-height: 40px;
object-fit: contain;
object-position: left;
}
.page-nav .header__location {
display: flex;
flex-direction: column;
}
.page-nav .header__location:hover {
cursor: pointer;
}
.page-nav .header__location .lo__group {
display: flex;
align-items: center;
gap: 8px;
}
.page-nav .header__location .lo__address {
color: var(--e-gray-700);
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
white-space: nowrap;
max-width: 180px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
}
.page-nav .header__location:hover .lo__address {
color: var(--e-brand-700);
user-select: none;
}
.page-nav .header__location .full_address {
width: 100%;
min-width: 180px;
height: 20px;
position: relative;
overflow: hidden;
}
.page-nav .header__location .full_address .address {
font-size: var(--e-text-small);
font-weight: var(--e-font-regular);
white-space: nowrap;
will-change: transform;
animation: marquee 16s linear infinite;
position: absolute;
}
/* .page-nav .header__location .full_address .address+.address {
animation-delay: 4s;
} */
@keyframes marquee {
0% {
transform: translateX(180px);
}
100% {
transform: translateX(-100%);
}
}
.page-nav .header__location:hover .lo__arrow svg>path {
stroke: var(--e-brand-700);
}
.page-nav .nav-center {
gap: 24px;
}
.page-nav .header__tab {
gap: 4px;
}
.page-nav .header__tab .header__link {
gap: 4px;
padding: 8px 12px;
border-radius: 6px;
background: var(--e-white);
color: var(--e-gray-500);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
}
.page-nav .header__tab .header__link:hover {
background: var(--e-gray-50);
color: var(--e-gray-700);
}
.page-nav .header__tab .header__link.active {
background: var(--e-brand-50);
color: var(--e-brand-700);
}
.page-nav .nav-right {
gap: 8px;
min-width: 439px;
}
.page-nav .header__cart-group,
.page-nav .header__auth-group {
gap: 8px;
}
.page-nav .header__auth-link {
border-radius: 10px;
background: var(--e-gray-100);
display: flex;
padding: 10px 12px;
justify-content: center;
align-items: center;
gap: 4px;
border: 0;
position: relative;
box-shadow: none;
}
.page-nav .header__auth-link span {
line-height: var(--e-text-lh-small);
}
.page-nav .header__auth-link:hover,
.page-nav .header__auth-link.active {
background: var(--e-brand-700);
}
.page-nav .header__cart-group .notification__tab .count,
.page-nav .header__cart-group .cart__tab .count {
color: var(--e-gray-700);
}
.page-nav .header__auth-link.notify svg path {
stroke: #303b4f;
fill: #303b4f;
}
.page-nav .header__cart-group .notification__tab .count {
position: absolute;
top: 4px;
right: 4px;
display: block;
background: #303b4f;
font-size: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 3px solid var(--e-gray-100);
}
.page-nav .header__auth-link.notify:hover,
.page-nav .header__auth-link.notify.active {
background: var(--e-gray-100);
border-color: var(--e-gray-100);
}
.page-nav .header__auth-link.notify:hover svg path,
.page-nav .header__auth-link.notify.active svg path {
stroke: #303b4f !important;
fill: #303b4f;
}
.page-nav .header__auth-link.notify.active .count {
background: var(--e-brand-700);
}
.page-nav .header__auth-group .header__auth-link.hide {
display: none;
}
.page-nav .header__auth-group .header__auth-link {
gap: 4px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--e-gray-300);
background: var(--e-white);
box-shadow: 0px 0px 0px 1px rgba(16, 24, 40, 0.18) inset,
0px -2px 0px 0px rgba(16, 24, 40, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
transition: var(--e-transition);
}
.page-nav .header__auth-group .header__auth-link .text {
display: block;
padding: 0 2px;
color: var(--e-gray-700);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
transition: var(--e-transition);
}
.page-nav .header__auth-group .header__auth-link.active {
border-radius: 10px;
background: var(--Gray-100, #f2f4f7);
display: flex;
padding: 10px 14px;
justify-content: center;
align-items: center;
gap: 4px;
border: 0;
box-shadow: none;
/* max-width: 105px; */
width: 100%;
}
.page-nav .header__auth-group .header__auth-link.active svg path {
stroke: #344054;
}
.page-nav .header__auth-group .header__auth-link.active .text {
white-space: nowrap;
overflow: hidden;
text-transform: capitalize;
}
.page-nav .header__auth-group .header__auth-link:hover,
.page-nav .header__auth-group .header__auth-link.active {
background: var(--e-brand-700);
border-color: var(--e-brand-700);
box-shadow: none;
}
.page-nav .header__auth-link.active {
background: var(--e-brand-700);
border-color: var(--e-brand-700);
box-shadow: none;
}
.page-nav .header__auth-link.active .count {
display: block;
color: var(--e-white);
line-height: var(--e-text-lh-small);
}
.page-nav .header__cart-group .header__auth-link:hover svg path,
.page-nav .header__cart-group .header__auth-link.active svg path,
.page-nav .header__auth-group .header__auth-link.active:hover svg path,
.page-nav .header__auth-group .header__auth-link.active.active svg path,
.page-nav .header__auth-link.active svg path {
stroke: var(--e-white);
}
.page-nav .header__cart-group .header__auth-link:hover .count,
.page-nav .header__cart-group .header__auth-link.active .count {
color: var(--e-white);
}
.page-nav .header__auth-group .header__auth-link:hover .text,
.page-nav .header__auth-group .header__auth-link.active .text {
color: var(--e-white);
}
.page-nav .header__auth-group .mobile__profile {
display: none;
}
.page-nav .search-wrapper-mobile {
display: none;
}
@media (max-width: 1300px) {
.page-nav {
height: 80px;
}
.page-nav .nav-left {
gap: 16px;
}
.page-nav .header__logo .header__full-logo {
max-width: 150px;
max-height: 31px;
}
.page-nav .header__logo .header__icon-logo {
max-width: 32px;
max-height: 32px;
}
.page-nav .header__location .lo__group {
gap: 6px;
}
.page-nav .nav-center {
gap: 16px;
}
.page-nav .header__tab .header__link {
padding: 8px 10px;
}
.page-nav .nav-right {
gap: 8px;
min-width: 364px;
}
.page-nav .header__cart-group,
.page-nav .header__auth-group {
gap: 8px;
}
.page-nav .header__auth-link {
border-radius: 8px;
padding: 8px 10px;
}
.page-nav .header__auth-group .header__auth-link {
gap: 4px;
padding: 9px 12px;
border-radius: 8px;
}
.page-nav .header__auth-group .header__auth-link.active {
border-radius: 8px;
padding: 8px 12px;
gap: 4px;
}
}
@media (max-width: 1120px) {
.page-nav {
height: 64px;
}
.page-nav .header__logo .header__full-logo {
display: none;
}
.page-nav .header__logo .header__icon-logo {
display: block;
}
.page-nav .nav-left {
gap: 12px;
}
.page-nav .header__location .lo__group {
gap: 4px;
}
.page-nav .nav-right {
min-width: 222px;
}
.page-nav .header__auth-link {
border-radius: 6px;
padding: 8px 8px;
}
.page-nav .header__tab {
gap: 6px;
}
.page-nav .header__tab .header__link {
padding: 8px 8px;
}
.page-nav .header__auth-group .header__auth-link,
.page-nav .header__auth-group .header__auth-link.active {
border-radius: 6px;
padding: 8px 8px;
}
.page-nav .header__auth-link svg,
.page-nav .header__auth-group .header__auth-link svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 991px) {
.page-header {
background: var(--e-gradient-gray-800);
border: none;
border-radius: 0 0 24px 24px;
margin-bottom: 46px;
}
.page-nav {
flex-wrap: wrap;
height: auto;
gap: 16px;
padding: 16px 0 8px 0;
}
header.sticky .page-nav .header__tab {
display: none;
}
.page-nav .nav-left {
order: 1;
}
.page-nav .nav-center {
order: 4;
display: flex;
flex: 1 1 auto;
width: 100%;
margin-bottom: -62px;
background-color: var(--e-white);
}
.page-nav .nav-right {
order: 2;
min-width: initial;
gap: 12px;
}
/* .page-nav .search-wrapper-mobile {
display: block;
width: 100%;
order: 3;
} */
.page-nav .search-form .search-input {
border-radius: 12px;
}
.page-nav .vertical-separator {
background: var(--e-gray-500);
}
.page-nav .header__logo .header__icon-logo path {
fill: #ffffff;
}
.page-nav .header__logo .header__icon-logo path+path {
fill: #00900e;
}
.page-nav .header__location .lo__address,
.page-nav .header__location:hover .lo__address {
color: var(--e-white);
font-weight: var(--e-font-medium);
}
.page-nav .header__location .lo__arrow svg path {
stroke: var(--e-white);
}
.page-nav .header__location:hover .lo__address {
color: rgba(255, 255, 255, 0.8);
}
.page-nav .header__location:hover .lo__arrow svg path {
stroke: rgba(255, 255, 255, 0.8);
}
.page-nav .header__tab {
gap: 0;
display: flex;
flex: 1 1 auto;
border-bottom: 1px solid var(--e-gray-200);
}
.page-nav .header__tab .header__link {
padding: 12px 8px;
flex: 1 1 auto;
justify-content: center;
border-radius: 0;
background: transparent;
border-bottom: 1px solid transparent;
margin-bottom: -1px;
}
.page-nav .header__tab .header__link:hover {
border-color: var(--e-gray-200);
}
.page-nav .header__tab .header__link.active {
background: transparent;
border-color: var(--e-brand-700);
}
.page-nav .header__auth-link.notification__tab {
position: relative;
}
.page-nav .header__cart-group .notification__tab .count {
position: absolute;
top: -4px;
right: -4px;
display: block;
background: #fff;
font-size: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 4px solid #303b4f;
}
.page-nav .header__cart-group .notification__tab.active .count {
background: var(--e-success);
}
.page-nav .header__auth-link.cart__tab {
display: none;
}
.page-nav .header__auth-link.notify:hover,
.page-nav .header__auth-link.notify.active,
.page-nav .header__auth-link:hover,
.page-nav .header__auth-link.active,
.page-nav .header__auth-link {
padding: 0;
background: transparent;
border-radius: 0;
}
.page-nav .header__auth-link:hover,
.page-nav .header__auth-link:focus {
background: transparent;
}
.page-nav .header__auth-link svg,
.page-nav .header__auth-group .header__auth-link svg {
width: 24px;
height: 24px;
}
.page-nav .header__auth-link.notify:hover svg path,
.page-nav .header__auth-link.notify.active svg path,
.page-nav .header__auth-link svg path,
.page-nav .header__auth-link.notify svg path,
.page-nav .header__auth-group .header__auth-link svg path {
stroke: var(--e-white) !important;
fill: var(--e-white);
}
.page-nav .header__auth-group .header__auth-link.active,
.page-nav .header__auth-group .header__auth-link {
display: none;
}
.page-nav .header__auth-group .mobile__profile {
display: block;
}
.page-nav .header__auth-group .mobile__profile img {
width: 32px;
height: 32px;
object-fit: cover;
object-position: center;
overflow: hidden;
border-radius: 32px;
}
}
@media (max-width: 380px) {
.page-nav .nav-left {
gap: 8px;
}
.page-nav .header__location .lo__address {
max-width: 118px;
}
.page-nav .header__location .full_address {
min-width: 118px;
}
}
/* Search
====================*/
.sec-search {
width: 100%;
}
.search-wrapper.gradient-box {
border-radius: 12px;
background: var(--e-gradient-gray-800);
padding: 32px 24px;
}
.search-wrapper {
width: 100%;
}
.search-form .search-group {
position: relative;
width: 100%;
}
.search-form .search-input {
width: 100%;
padding: 9px 44px;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-700);
background: var(--e-white);
border-radius: 100px;
border: 1px solid var(--e-gray-300);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.search-wrapper.gray-bar .search-input {
background: var(--e-gray-100);
border-color: var(--e-gray-100);
border-radius: 16px;
}
.search-form .search-input:focus {
outline: none;
box-shadow: none;
}
.search-form .search-icon {
width: 20px;
position: absolute;
left: 16px;
top: 50%;
z-index: 2;
transform: translate(0, -50%);
}
.search-form .search-clear {
width: 20px;
height: 20px;
position: absolute;
right: 16px;
top: 50%;
z-index: 2;
transform: translate(0, -50%);
background: transparent;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
display: block;
}
/* .search-form .search-input:focus-within+.search-clear {
display: block;
} */
.search-form .search-clear:hover,
.search-form .search-clear:focus {
border: 0;
outline: none;
box-shadow: none;
}
.search-form .search-clear>svg {
width: 20px;
}
@media (max-width: 991px) {
/* .sec-search {
display: none !important;
} */
.search-wrapper.gradient-box {
padding: 16px 12px;
margin-bottom: 20px;
}
}
/* Offer Banner
====================*/
.swiper-offer-banner,
.swiper-banner {
overflow: hidden;
}
.swiper-offer-banner .swiper-slide,
.swiper-banner .swiper-slide {
border-radius: 12px;
overflow: hidden;
transform: scale(1);
transition: transform 0.4s ease;
}
.swiper-offer-banner .swiper-slide {
height: initial;
}
.swiper-offer-banner.text-slider .swiper-slide a {
height: 100%;
}
.swiper-offer-banner .swiper-slide:hover,
.swiper-banner .swiper-slide:hover {
transform: scale(0.98);
transition: transform 0.4s ease;
}
.swiper-offer-banner .swiper-slide img,
.swiper-banner .swiper-slide img {
pointer-events: none;
width: 100%;
height: auto;
aspect-ratio: 1 / 0.52616;
object-fit: cover;
}
.swiper-offer-banner.text-slider .swiper-slide a,
.swiper-banner.text-slider .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 23px;
gap: 4px;
background: var(--e-brand-200) url("../../src/assets/images/offer-slider/offer-secondary-bg.jpg");
background-size: cover;
border-radius: 12px;
}
.swiper-offer-banner.text-slider .swiper-slide:nth-child(even) a,
.swiper-banner.text-slider .swiper-slide:nth-child(even) {
background: var(--e-gray-200) url("../../src/assets/images/offer-slider/offer-primary-bg.jpg");
background-size: cover;
}
.swiper-offer-banner.text-slider .swiper-slide .offer-label,
.swiper-banner.text-slider .swiper-slide .offer-label {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-semibold);
color: var(--e-white);
text-align: center;
cursor: pointer;
}
.swiper-offer-banner.text-slider .swiper-slide .offer-text,
.swiper-banner.text-slider .swiper-slide .offer-text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-white);
opacity: 0.6;
text-align: center;
}
.slider__pagination {
text-align: center;
margin-top: 18px;
padding-bottom: 2px;
line-height: 6px;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
display: inline-block;
background: var(--e-gray-400);
opacity: 0.2;
margin: 0 5px;
-webkit-border-radius: 8px !important;
border-radius: 8px !important;
-webkit-transition: opacity 0.5s, background-color 0.5s, width 0.5s;
-o-transition: opacity 0.5s, background-color 0.5s, width 0.5s;
transition: opacity 0.5s, background-color 0.5s, width 0.5s;
-webkit-transition-delay: 0.5s, 0.5s, 0s;
-o-transition-delay: 0.5s, 0.5s, 0s;
transition-delay: 0.5s, 0.5s, 0s;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.slider__pagination .swiper-pagination-bullet-active {
opacity: 1;
background: var(--e-brand-700);
width: 18px;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
/* Slider Category
====================*/
.sec-food-category,
.sec-brand-category {
position: relative;
width: 100%;
}
.swiper-category {
overflow: hidden;
}
.category-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.top-res-items {
height: initial !important;
}
.category-card.top {
border-radius: 12px;
border: 1px solid var(--e-gray-100);
background: var(--e-white);
align-items: stretch;
height: 100%;
overflow: hidden;
}
.category-card.top .cat-bottom {
background: var(--e-gray-50);
display: flex;
padding: 20px 16px 16px 16px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
position: relative;
height: 100%;
flex: 1;
}
.category-card.top .cat-image {
padding: 0;
border-radius: 0;
border: none;
background: var(--e-white);
}
.category-card.top .cat-image img {
width: 52%;
height: 52%;
}
.category-card.top .top-res-reach {
display: flex;
align-items: center;
gap: 6px;
position: absolute;
left: 12px;
top: -15px;
}
.category-card.top .top-res-rating {
display: flex;
padding: 4px 8px;
align-items: center;
gap: 4px;
border-radius: 50px;
flex: 0 0 auto;
background: var(--e-success-700);
}
.top-res-name {
color: var(--e-gray-800);
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
}
.top-res-location {
color: var(--e-brand-600);
font-size: var(--e-text-small);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-small);
}
.category-card.top .top-res-rating .text,
.category-card.top .top-res-distance .text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
}
.category-card.top .top-res-distance {
display: flex;
padding: 4px 8px;
align-items: center;
gap: 2px;
border-radius: 50px;
min-width: 55px;
flex: 0 0 auto;
background: var(--e-gray-200);
}
.category-card .cat-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px;
border-radius: 50%;
border: 1px solid var(--e-gray-200);
background: var(--e-gray-50);
aspect-ratio: 1 / 1;
overflow: hidden;
}
.category-card .cat-image.radius-12 {
border-radius: 12px;
}
.category-card .cat-image img {
width: 100%;
height: 80%;
transform: scale(1);
transition: var(--e-transition);
max-width: 94%;
object-fit: contain;
}
.category-card .cat-image .brand-img {
max-width: 80%;
}
.category-card:hover .cat-image img {
transform: scale(0.9);
}
.category-card .cat-label {
color: var(--e-gray-800);
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
font-weight: var(--e-font-medium);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.category-card:hover .cat-label {
color: var(--e-gray-500);
}
/* Vouchers
====================*/
.sec-my-action {
position: relative;
}
.action-card-lists {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
gap: 12px 24px;
}
.action-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 36px;
border-radius: 24px;
background: linear-gradient(180deg, #f9fafb 0%, #e7ebef 100%);
flex: 0 0 calc(50% - 12px);
transform: scale(1);
transition: transform 0.4s ease;
}
.action-card:hover {
transform: scale(0.98);
transition: transform 0.4s ease;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.action-card .action-card__title {
font-size: var(--e-display-xs);
line-height: var(--e-display-lh-xs);
font-weight: var(--e-font-semibold);
color: var(--e-gray-900);
}
.category-card .cat-label .plural-s {
display: flex;
overflow-wrap: normal;
gap: 2px;
}
.category-card .cat-label .plural-s span {
overflow-wrap: normal;
}
@media (max-width: 991px) {
.action-card .action-card__icon {
width: auto;
height: 80px;
}
.category-card .cat-label {
font-size: 15px;
line-height: 23px;
}
}
@media (max-width: 767px) {
.action-card .action-card__icon {
width: auto;
height: 60px;
}
.action-card {
padding: 16px 20px;
}
}
@media (max-width: 576px) {
.action-card-lists {
gap: 12px;
}
.action-card {
padding: 16px 16px;
border-radius: 12px;
flex: 0 0 calc(50% - 6px);
}
.action-card .action-card__title {
font-size: 16px;
line-height: 26px;
}
.action-card .action-card__icon {
width: auto;
height: 44px;
}
}
@media (max-width: 400px) {
.action-card {
flex-direction: column-reverse;
gap: 5px;
}
}
/* Restaurants Card
====================*/
.restaurants-lists {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: stretch;
justify-content: flex-start;
flex-wrap: wrap;
gap: 12px 24px;
}
.res-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
width: calc(33.33% - 16px);
padding-bottom: 48px;
}
.restaurants-lists.filter--grid {
gap: initial;
margin-left: -12px;
margin-right: -12px;
}
.restaurants-lists .infinite-scroll-component__outerdiv {
width: 100%;
}
.filter--grid .res-card {
margin: 0 12px 12px;
width: calc(33.33% - 24px);
}
.filter--grid.no-margin .res-card {
margin: 0 12px;
}
.res-card .card-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
gap: 16px;
cursor: pointer;
position: relative;
width: 100%;
transform: scale(1);
transition: var(--e-transition);
background-color: var(--e-gray-25);
border: 1px solid var(--e-gray-100);
border-radius: 16px;
height: 100%;
}
.res-card .card-inner:hover {
transform: scale(0.98);
transition: var(--e-transition);
}
.res-card .card-top {
position: relative;
width: 100%;
border-radius: 16px 16px 0 0;
}
.res-card .card-top .card-image {
display: block;
position: relative;
overflow: hidden;
border-radius: 16px 16px 0 0;
max-height: 210px;
aspect-ratio: 1 / 0.525;
width: 100%;
}
.res-card .card-top .card-image:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.2);
border-radius: 16px 16px 0 0;
}
.res-card .card-top .card-image .res-image {
aspect-ratio: 1 / 0.525;
object-fit: cover;
width: 100%;
height: auto;
}
.res-card .card-top .res-brand {
width: 60px;
height: 60px;
background: var(--e-white);
border-radius: 12px;
position: absolute;
top: 10px;
left: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
z-index: 2;
display: none !important;
}
.res-card .card-top .res-brand .res-logo {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.res-card .card-top .res-offer {
display: inline-flex;
padding: 8px 24px 8px 10px;
align-items: center;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
color: var(--e-white);
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
opacity: 0.9;
border-bottom-left-radius: 15px;
background: linear-gradient(90deg, rgba(62, 28, 150, 0.9) 60.19%, rgba(23, 79, 173, 0) 93.98%);
}
.res-card .card-top .res-sponsered {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 6px 16px;
align-items: center;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
color: var(--e-white);
position: absolute;
left: 12px;
top: 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.3);
z-index: 2;
}
.res-card .card-top .res-type {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 4px 12px;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
color: var(--e-gray-950);
position: absolute;
right: 0;
bottom: -1px;
border-radius: 6px 0px 0px 0px;
background: var(--e-gray-25);
z-index: 2;
}
.res-card .card-top .res-type>span {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
color: var(--e-gray-950);
user-select: none;
}
.res-card .card-top .res-type>span+span:before {
content: "|";
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
color: var(--e-gray-950);
margin-right: 8px;
}
.res-card .card-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
gap: 12px;
padding: 0 16px 16px;
width: 100%;
height: 100%;
}
.res-card .card-bottom .res-data {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
}
.res-card .card-bottom .res-card-offer {
margin-top: auto;
}
.res-card .card-bottom .res-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
gap: 8px;
user-select: none;
}
.res-card .card-bottom .res-title .res-name {
width: 100%;
overflow: hidden;
display: -webkit-box;
overflow-wrap: break-word;
-webkit-line-clamp: 1;
line-clamp: 1;
/* Add this for compatibility */
-webkit-box-orient: vertical;
margin: 0;
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-bold);
color: var(--e-gray-950);
text-transform: capitalize;
position: relative;
}
.res-card .card-bottom .res-title .res-name:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.res-card .card-top .res-favourite {
position: absolute;
top: 10px;
right: 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.3);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
transform: var(--e-transition);
fill: var(--e-white);
z-index: 5;
}
.res-card .card-top .res-favourite>svg {
cursor: pointer;
width: 16px;
height: 16px;
z-index: 5;
transform: var(--e-transition);
fill: var(--e-white);
}
.res-card .card-top .res-favourite>svg path+path {
visibility: hidden;
opacity: 0;
transform: var(--e-transition);
}
.res-card .card-top .res-favourite.fav>svg path {
visibility: hidden;
opacity: 0;
transform: var(--e-transition);
}
.res-card .card-top .res-favourite.fav>svg path+path {
visibility: visible;
opacity: 1;
fill: var(--e-error-600);
transform: var(--e-transition);
}
.res-card .card-top .res-favourite>svg.hide {
display: none;
}
.res-card .card-bottom .res-rating {
display: flex;
padding: 0px 6px;
align-items: center;
gap: 4px;
border-radius: 4px;
background: var(--Success-700, #067647);
flex: 0 0 auto;
}
.res-card .card-bottom .res-rating span {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-white);
flex: 0 0 auto;
}
.res-card .card-bottom .res-rating svg,
.res-card .card-bottom .res-offer svg {
flex: 0 0 auto;
}
.res-card .card-bottom .res-offer {
border-radius: 12px;
background: linear-gradient(91deg, #6a1ed2 0%, #b39fff 100%);
display: flex;
padding: 6px 12px;
align-items: center;
gap: 8px;
}
.res-card .card-bottom .res-offer .text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-white);
}
.res-card .card-bottom .res-information {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 4px;
user-select: none;
}
.res-card .card-bottom .res-information svg {
margin-top: 3px;
flex: 0 0 auto;
}
.res-card .card-bottom .res-information .text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
}
/* .res-card .card-bottom .res-information .city {
max-width: 125px;
overflow: hidden;
display: -webkit-box;
overflow-wrap: break-word;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-right: 5px;
} */
.res-card .card-bottom .res-apc {
display: flex;
padding: 4px 6px;
justify-content: center;
align-items: center;
gap: 2px;
border-radius: 6px;
background: var(--e-gray-100);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-800);
flex: 0 0 auto;
}
.res-card .card-bottom .res-apc .dlr {
color: var(--e-success-700);
}
.res-card .card-bottom .res-infos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0px 11px;
user-select: none;
}
.res-card .card-bottom .res-infos .res-rating {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
gap: 6px;
}
.res-rating:empty,
.res-tags:empty {
display: none !important;
}
.res-card .card-bottom .res-infos .res-rating>b {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
color: var(--e-gray-600);
}
.res-card .card-bottom .res-infos .res-rating>svg {
width: 16px;
height: 16px;
}
.res-card .card-bottom .res-infos .res-tags {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
color: var(--e-gray-600);
display: flex;
align-items: center;
gap: 10px;
}
.res-card .card-bottom .res-infos .res-tags:not(:first-child):before {
content: "";
display: block;
width: 4px;
height: 4px;
background: var(--e-gray-600);
border-radius: 50%;
}
.res-card .card-bottom .res-offers {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.res-card .card-bottom .res-offers .offer-tag {
display: flex;
align-items: center;
padding: 4px 10px;
border-radius: 8px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
text-align: center;
background: var(--e-indigo-50);
color: var(--e-indigo-700);
}
@media (max-width: 1300px) {
.res-card .card-bottom .res-infos .res-rating>svg {
width: 14px;
height: 14px;
position: relative;
top: -1px;
}
}
@media (max-width: 991px) {
.res-card {
width: calc(50% - 12px);
}
.restaurants-lists.filter--grid {
margin-left: -10px;
margin-right: -10px;
}
.filter--grid .res-card {
width: calc(50% - 24px);
}
}
@media (max-width: 575px) {
.restaurants-lists.filter--grid {
margin-left: 0;
margin-right: 0;
}
.res-card {
width: 100%;
padding-bottom: 24px;
}
.filter--grid .res-card {
width: 100%;
margin: 0;
}
.filter--grid.no-margin .res-card {
margin: 0;
}
}
/* Restaurant info
====================*/
.sec-restaurant-info {
padding: 32px 0 30px;
}
.restaurant-banner {
position: relative;
height: 200px;
padding: 16px;
border-radius: 12px;
overflow: hidden;
}
.restaurant-banner::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--e-black);
opacity: 0.4;
z-index: 1;
}
.restaurant-banner .restaurant-banner-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 12px;
}
.restaurant-banner .restaurant-banner-bg.default-logo {
object-fit: contain !important;
width: 30% !important;
left: 50% !important;
transform: translate(-50%, 0);
}
.restaurant-banner .restaurant-banner-block {
position: relative;
text-align: center;
z-index: 2;
text-transform: uppercase;
font-size: var(--e-text-xs);
line-height: var(--e-text-lh-xs);
color: var(--e-white);
}
.restaurant-banner .restaurant-banner-block img {
margin-bottom: 8px;
max-width: 300px;
max-height: 120px;
object-fit: contain;
}
.restaurant-banner .fav-icon {
position: absolute;
right: 16px;
top: 16px;
z-index: 1;
}
.restaurant-banner .fav-icon .icon {
border-radius: 8px;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
display: inline-flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
}
.restaurant-banner .fav-icon .icon.fav svg path {
stroke: var(--e-error-600);
fill: var(--e-error-600);
}
.restaurant-info {
margin-top: 32px;
gap: 16px;
}
.restaurant-info .restaurant-info-image {
width: 100px;
flex: 0 0 auto;
user-select: none;
}
.restaurant-info .restaurant-info-image img {
width: 100%;
aspect-ratio: 1/1;
object-fit: contain;
object-position: center;
border-radius: 16px;
overflow: hidden;
}
.restaurant-info .restaurant-info-content .main-title {
color: var(--e-gray-950);
text-transform: capitalize;
}
.restaurant-info .restaurant-info-content .store-location {
position: relative;
padding-left: 28px;
padding-right: 20px;
background-image: url("../../src/assets/images/store.svg");
background-position: left center;
background-repeat: no-repeat;
background-size: 24px;
font-weight: var(--e-font-bold);
color: var(--e-gray-950);
gap: 4px;
cursor: pointer;
}
.restaurant-info .restaurant-info-content .store-location>span {
font-weight: var(--e-font-regular);
color: var(--e-gray-600);
}
.restaurant-info .restaurant-info-content .store-location:after {
content: "";
background-image: url("../../src/assets/images/caret-down.svg");
width: 20px;
height: 20px;
margin: 0;
top: 50%;
transform: translateY(-50%);
position: absolute;
right: 0;
}
.restaurant-info .restaurant-info-content .SumoSelect {
margin-left: 3px;
width: max-content;
}
.restaurant-info .restaurant-info-content .SelectBox {
border: 0;
background-color: transparent;
color: var(--gray-600);
padding: 0;
font-weight: var(--e-font-medium);
width: max-content;
}
.restaurant-info .restaurant-info-content .SumoSelect>.CaptionCont>label>i {
background-image: url("../../src/assets/images/caret-down.svg");
width: 20px;
height: 20px;
margin: 0;
top: 50%;
transform: translateY(-50%);
}
.restaurant-info .restaurant-info-content .restaurant-review span {
margin-left: 6px;
color: var(--e-gray-600);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
}
.restaurant-info .restaurant-info-content .restaurant-detail li:not(:first-child) {
position: relative;
padding-left: 12px;
}
.restaurant-info .restaurant-info-content .restaurant-detail li:not(:first-child):before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background-color: var(--e-gray-600);
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
}
.restaurant-info .restaurant-info-action {
width: 305px;
flex-direction: column;
gap: 22px;
flex: 1 0 auto;
}
.restaurant-info .restaurant-info-action .restaurant-status {
align-self: end;
gap: 12px;
border: 1px solid var(--e-gray-200);
background-color: var(--e-gray-50);
padding: 4px;
border-radius: 16px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
}
.restaurant-info .restaurant-info-action .restaurant-status .status {
display: inline-block;
color: var(--e-success-700);
padding: 2px 10px;
border-radius: 16px;
border: 1px solid var(--e-gray-200);
background-color: var(--e-white);
}
.restaurant-info .restaurant-info-action .restaurant-status .status:before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--e-success);
margin-right: 7px;
margin-bottom: 2px;
}
.restaurant-info .restaurant-info-action .restaurant-status.close .status {
color: var(--e-error);
}
.restaurant-info .restaurant-info-action .restaurant-status.close .status:before {
background-color: var(--e-error);
}
.restaurant-info .restaurant-info-action .restaurant-status .result {
color: var(--e-gray-700);
}
.restaurant-info .restaurant-info-action .restaurant-status .result:after {
display: inline-block;
content: "";
background-image: url("../../src/assets/images/chevron-down.svg");
width: 16px;
height: 16px;
margin: 0 3px;
vertical-align: middle;
}
.restaurant-info .restaurant-info-action .SumoSelect {
margin-left: 3px;
width: max-content;
cursor: pointer;
}
.restaurant-info .restaurant-info-action .SelectBox {
border: 0;
background-color: transparent;
color: var(--gray-700);
padding: 0;
font-weight: var(--e-font-medium);
width: max-content;
cursor: pointer;
}
.restaurant-info .restaurant-info-action .SumoSelect>.CaptionCont>label>i {
background-image: url("../../src/assets/images/chevron-down.svg");
width: 16px;
height: 16px;
margin: 0;
top: 50%;
transform: translateY(-50%);
}
.restaurant-info .restaurant-info-action .restaurant-btn {
gap: 8px;
align-self: end;
}
.sec-restaurant-menu-grid .one-third-column .left-bar {
position: sticky;
top: 16px;
z-index: 99;
transition: all ease 0.3s;
}
.button.reach {
padding: 11px;
}
.restaurant-info .restaurant-info-content {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
}
.restaurant-info .restaurant-info-content .restaurant-review {
color: var(--e-gray-950);
font-weight: var(--e-font-semibold);
margin: 0;
}
.restaurant-info .restaurant-info-content .restaurant-review:empty {
display: none;
}
.restaurant-info .restaurant-info-content .restaurant-review .rating-container {
display: flex;
align-items: center;
}
.restaurant-info .restaurant-info-content .drop-wrap {
width: max-content;
gap: 17px;
padding: 2px 0;
}
.restaurant-info .restaurant-info-content .restaurant-review svg {
margin-left: 6px;
height: 16px;
width: 16px;
}
.restaurant-info .restaurant-info-content .restaurant-detail {
color: var(--e-gray-600);
font-weight: var(--e-font-medium);
margin: 3px 0 0 0;
padding-left: 0;
gap: 0 12px;
flex-wrap: wrap;
}
.restaurant-info .restaurant-info-action .restaurant-status>.drop-link {
gap: 12px;
color: var(--gray-600);
cursor: pointer;
}
.restaurant-info .restaurant-info-action .restaurant-btn .button.book-table {
width: 200px;
}
.restaurant-info .restaurant-info-content.booking-status .book-status {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
margin-top: 4px;
}
.restaurant-info .restaurant-info-content.booking-status .book-status.success {
color: var(--e-success);
}
.restaurant-info .restaurant-info-content.booking-status .book-status.success svg path {
fill: var(--e-success);
}
.restaurant-info .restaurant-info-content.booking-status .book-status.danger {
color: var(--e-error-600);
}
.restaurant-info .restaurant-info-content.booking-status .book-status.danger svg path {
fill: var(--e-error);
}
.restaurant-info .restaurant-info-content.booking-status .book-status.awaiting {
color: var(--e-warning-400);
}
.restaurant-info .restaurant-info-content.booking-status .book-status.awaiting svg path {
fill: var(--e-warning-400);
}
.restaurant-info-content.booking-status .info {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
flex-wrap: wrap;
}
.restaurant-info-content.booking-status .info .content {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.restaurant-info-content.booking-status .info .content svg path {
fill: var(--e-gray-600) !important;
}
.book-res-detail .right-bar .browse-menu {
display: flex;
padding: 22px 16px;
align-items: center;
gap: 10px;
border-radius: 12px;
background: var(--e-gray-600);
justify-content: space-between;
}
.book-res-detail .right-bar .browse-menu .inner {
display: flex;
align-items: center;
gap: 12px;
}
.book-res-detail .right-bar .browse-menu .inner .text {
font-weight: var(--e-font-semibold);
color: var(--e-white);
}
.sec-restaurant-menu-grid .one-third-column .right-bar .sticky-badges.sticky .badges-group {
padding-bottom: 15px;
}
@media (max-width: 1300px) {
.button.reach {
padding: 9px;
}
.restaurant-info .restaurant-info-content .restaurant-review svg {
height: 12px;
width: 12px;
}
.restaurant-info .restaurant-info-content .store-location {
padding-left: 24px;
background-size: 18px;
}
}
@media (max-width: 991px) {
.restaurant-banner {
display: none;
}
.sec-restaurant-info {
padding: 24px 0;
}
.sec-restaurant-menu-grid .one-third-column {
flex-wrap: wrap;
}
.sec-restaurant-menu-grid .one-third-column .left-bar.width-294,
.sec-restaurant-menu-grid .one-third-column .right-bar {
width: 100%;
}
.sec-restaurant-menu-grid .one-third-column .left-bar {
position: initial;
}
.sec-restaurant-menu-grid .one-third-column .left-bar .sidebar-title {
display: none;
}
.sec-restaurant-menu-grid .menu-category-lists {
flex-direction: inherit;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
margin-top: 16px;
}
.sec-restaurant-menu-grid .menu-category-lists::-webkit-scrollbar {
display: none;
}
.sec-restaurant-menu-grid .menu-category-lists .menu-category {
width: initial;
flex: 0 0 auto;
}
.sec-restaurant-menu-grid .menu-category-lists .category-name.active {
background: var(--e-brand-50);
}
.restaurant-info {
margin-top: 0px;
flex-wrap: wrap;
}
.restaurant-info .restaurant-info-image {
width: 84px;
flex: 0 0 auto;
}
.restaurant-info .restaurant-info-content .restaurant-detail {
gap: 4px 10px;
flex-wrap: wrap;
}
.restaurant-info .restaurant-info-content .restaurant-detail li {
flex: 0 0 auto;
}
.restaurant-info .restaurant-info-action {
width: 100%;
flex-direction: row;
gap: 0;
justify-content: space-between;
}
.restaurant-info .restaurant-info-content {
width: 100%;
flex: 1;
}
.rest-reach-info .rest-inner {
align-items: stretch;
}
.rest-map {
height: 160px;
}
.book-res-detail .right-bar {
flex: 100%;
}
.rest-map,
.rest-map iframe {
width: 100%;
}
.restaurant-info .restaurant-info-content .restaurant-detail li:not(:first-child) {
position: relative;
padding-left: 8px;
}
}
@media (max-width: 576px) {
.restaurant-info {
align-items: flex-start;
}
/* .sec-restaurant-info {padding-bottom: 0;} */
.restaurant-info .restaurant-info-image img {
object-fit: contain;
height: auto;
}
.restaurant-info .restaurant-info-image {
width: 70px;
}
.restaurant-info .restaurant-info-content .drop-wrap {
width: 100%;
flex-wrap: wrap;
}
.restaurant-info .restaurant-info-content h1 {
margin: 0 0 4px 0;
width: 100%;
}
.restaurant-info .restaurant-info-action {
flex-wrap: wrap;
gap: 12px;
justify-content: center;
border-top: 1px solid var(--e-gray-200);
padding-top: 12px;
}
.restaurant-info .restaurant-info-action .restaurant-btn {
justify-content: center !important;
border-top: 1px solid var(--e-gray-200);
padding-top: 20px;
width: 100%;
}
.restaurant-info .restaurant-info-content .restaurant-detail {
padding-top: 2px;
gap: 2px 7px;
}
.restaurant-info .restaurant-info-content .drop-wrap {
row-gap: 6px;
}
}
/* Menu Component
====================*/
.menu-cards {
gap: 24px 20px;
}
.menu-cards .menu-card-item {
padding: 16px;
border: 1px solid var(--e-gray-100);
background: var(--e-white);
border-radius: 16px;
gap: 24px;
width: calc(50% - 10px);
}
.menu-cards.filter--grid {
gap: initial;
margin-left: -10px;
margin-right: -10px;
margin-top: -12px;
}
.menu-cards.filter--grid .menu-card-item {
margin: 12px 10px;
width: 100%;
}
.menu-cards .menu-card-item:hover {
background: var(--e-gray-50);
}
.menu-cards .menu-card-item:hover .menu-card-image img {
background-color: var(--e-white);
}
.menu-cards .menu-card-content {
width: calc(100% - 132px);
overflow: hidden;
}
.menu-cards .menu-card-content h3 {
font-size: var(--e-display-xs);
line-height: var(--e-display-lh-xs);
color: var(--e-gray-950);
margin-bottom: 8px;
}
.menu-cards .menu-card-item.veg .menu-card-content h3,
.menu-cards .menu-card-item.vegetarian .menu-card-content h3,
.menu-cards .menu-card-item.swaminarayan .menu-card-content h3,
.menu-cards .menu-card-item.jain .menu-card-content h3,
.menu-cards .menu-card-item.mexican .menu-card-content h3 {
padding-top: 24px;
background-image: url("../../src/assets/images/vegetarian.png");
background-size: 16px;
background-position: left 4px;
background-repeat: no-repeat;
text-transform: capitalize;
overflow-wrap: anywhere;
}
.menu-cards .menu-card-item.non-veg .menu-card-content h3,
.menu-cards .menu-card-item.non-vegetarian .menu-card-content h3,
.menu-cards .menu-card-item.halal .menu-card-content h3,
.menu-cards .menu-card-item.sea-food .menu-card-content h3,
.menu-cards .menu-card-item.chicken .menu-card-content h3 {
background-image: url("../../src/assets/images/non-vegetarian.png");
padding-top: 24px;
background-size: 16px;
background-position: left 4px;
background-repeat: no-repeat;
text-transform: capitalize;
}
.menu-cards .menu-card-item.eggiterian .menu-card-content h3,
.menu-cards .menu-card-item.eggeterian .menu-card-content h3,
.menu-cards .menu-card-item.eggitarian .menu-card-content h3,
.menu-cards .menu-card-item.eggetarian .menu-card-content h3,
.menu-cards .menu-card-item.egg .menu-card-content h3 {
background-image: url("../../src/assets/images/eggiterian.png");
padding-top: 24px;
background-size: 16px;
background-position: left 4px;
background-repeat: no-repeat;
text-transform: capitalize;
}
.menu-cards .menu-card-item.lactose-free .menu-card-content h3 {
background-image: url("../../src/assets/images/lactose-free.png");
padding-top: 24px;
background-size: 16px;
background-position: left 4px;
background-repeat: no-repeat;
text-transform: capitalize;
}
.menu-cards .menu-card-text {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
font-weight: var(--e-font-medium);
margin-bottom: 10px;
text-transform: capitalize;
}
.menu-cards .menu-card-text p {
display: inline;
}
.menu-cards .menu-card-text .read-more-btn {
background: none;
border: none;
color: var(--e-gray-950);
cursor: pointer;
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
padding: 0;
margin-left: 3px;
}
.menu-cards .menu-card-text .read-more-btn:hover {
color: var(--e-brand-700);
}
.menu-cards .menu-card-text a {
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.menu-cards .menu-card-content .menu-card-tags {
margin: 0 0 8px;
padding: 0 0 0 25px;
gap: 5px;
color: var(--e-brand-600);
background-image: url("../../src/assets/images/reception-bell.svg");
background-size: 18px;
background-position: left 5px;
background-repeat: no-repeat;
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.menu-cards .menu-card-content .menu-card-tags li:not(:last-child):after {
content: ",";
}
.menu-cards .menu-card-content .menu-card-price {
color: var(--e-gray-950);
font-weight: var(--e-font-semibold);
font-size: var(--e-display-xs);
line-height: var(--e-display-lh-xs);
flex-wrap: wrap;
}
.menu-cards .menu-card-image {
width: 160px;
text-align: center;
flex: 0 0 auto;
}
.menu-cards .menu-card-image .ar-button-group {
gap: 1px;
margin-top: 10px;
margin-bottom: 7px;
border: 1px solid var(--e-brand-500);
box-shadow: 0px 1.129px 2.258px 0px rgba(16, 24, 40, 0.05);
}
.menu-cards .menu-card-image .ar-button-group .btn {
padding: 13px 10px;
}
.menu-cards .menu-card-image img {
width: 160px;
height: 160px;
object-fit: cover;
object-position: center;
border-radius: 16px;
margin-bottom: -30px;
background-color: var(--e-gray-50);
}
.menu-cards .menu-card-image .menu-card-btn {
display: inline-block;
min-width: 122px;
margin-top: 12px;
text-align: center;
padding: 8px 16px;
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
font-weight: var(--e-font-semibold);
color: var(--e-brand-600);
background-color: var(--e-brand-50);
text-transform: normal;
border: 1px solid var(--e-brand-500);
border-radius: 8px;
box-shadow: 0px 1.129px 2.258px 0px rgba(16, 24, 40, 0.05);
}
.menu-cards .menu-card-image .menu-card-btn:hover {
background-color: var(--e-gray-50);
}
.menu-cards .menu-card-image .cus-text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-500);
}
.menu-cards .menu-card-image .ar-button-group+.cus-text {
display: block;
margin-top: -4px;
}
@media (max-width: 1300px) {
.menu-cards .menu-card-item {
width: 100%;
}
.menu-cards.filter--grid {
gap: initial;
margin-left: 0;
margin-right: 0;
}
.menu-cards.filter--grid .menu-card-item {
margin: 6px 0;
width: 100%;
}
.menu-cards .menu-card-image {
width: 130px;
}
.menu-cards .menu-card-image img {
width: 130px;
height: 130px;
}
.menu-cards .menu-card-image .menu-card-btn {
min-width: 100px;
padding: 6px 12px;
}
.menu-cards .menu-card-image .ar-button-group .btn {
padding: 11px 9px;
}
.menu-cards .menu-card-image .ar-button-group .btn svg {
height: 12px;
width: 12px;
}
.menu-cards .menu-card-content .menu-card-tags {
background-position: left 2px;
}
}
@media (max-width: 1024px) {
.menu-cards .menu-card-item.veg .menu-card-content h3 {
padding-left: 0px;
background-size: 14px;
background-position: left 2px;
}
}
@media (max-width: 991px) {
.menu-cards .menu-card-content .menu-card-tags {
background-position: left 4px;
}
}
@media (max-width: 576px) {
.menu-cards .menu-card-image {
width: 90px;
}
.menu-cards .menu-card-image img {
width: 90px;
height: 90px;
}
.menu-cards .menu-card-image .menu-card-btn {
min-width: 70px;
padding: 4px 12px;
}
.ar-button-group .input {
height: 30px;
width: 18px;
}
.menu-cards .menu-card-image .ar-button-group .btn {
padding: 9px 6px;
}
.menu-cards .menu-card-item {
gap: 16px;
}
.menu-cards.filter--grid .menu-card-item {
justify-content: space-between;
flex-wrap: wrap;
}
}
/* Menu Item
====================*/
.food-item-wrap .food-item-image {
width: 250px;
height: 250px;
text-align: center;
border-radius: 12px;
overflow: hidden;
background-color: var(--e-gray-50);
}
.food-item-wrap .food-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 12px;
}
.food-item-wrap .food-item-image:has(img.default-logo) {
padding: 12px;
}
.food-item-wrap .food-item-content {
padding: 12px 0px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.food-item-wrap .food-item-content .food-item-name {
font-weight: var(--e-font-semibold);
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.food-item-wrap .food-item-content .food-item-text {
font-size: var(--e-text-small);
font-weight: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
color: var(--e-gray-600);
text-transform: capitalize;
overflow-wrap: anywhere;
}
.food-item-wrap.veg .food-item-content .food-item-name {
padding-top: 24px;
background-image: url("../../src/assets/images/vegetarian.svg");
background-size: 20px;
background-position: left top;
background-repeat: no-repeat;
overflow-wrap: anywhere;
text-align: left;
}
.food-item-wrap.non-veg .food-item-content .food-item-name {
padding-top: 24px;
background-image: url("../../src/assets/images/non-vegetarian.svg");
background-size: 20px;
background-position: left top;
background-repeat: no-repeat;
}
.food-item-wrap.eggiterian .food-item-content .food-item-name {
padding-top: 24px;
background-image: url("../../src/assets/images/eggiterian.svg");
background-size: 20px;
background-position: left top;
background-repeat: no-repeat;
}
/* Menu Category
====================*/
.menu-category-lists {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
}
.menu-category-lists .menu-category {
position: relative;
width: 100%;
}
.menu-category-lists .category-name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
padding: 8px 12px;
border-left: 2px solid transparent;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-500);
cursor: pointer;
user-select: none;
text-transform: capitalize;
overflow-wrap: anywhere;
}
.menu-category-lists .category-name .count {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
border-radius: 16px;
padding: 1px 7px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-xs);
font-weight: var(--e-font-medium);
background: var(--e-gray-50);
color: var(--e-gray-700);
border: 1px solid transparent;
overflow-wrap: normal;
}
.menu-category-lists .category-name:hover {
background: var(--e-gray-25);
border-color: var(--e-gray-700);
color: var(--e-gray-700);
}
.menu-category-lists .category-name:hover .count {
background: var(--e-gray-100);
color: var(--e-gray-600);
border-color: var(--e-gray-200);
}
.menu-category-lists .category-name.active {
border-color: var(--e-brand-600);
color: var(--e-brand-700);
}
.menu-category-lists .category-name.active span {
border-color: var(--e-brand-200);
color: var(--e-brand-700);
background: var(--e-brand-50);
}
/* Category Banner
==================== */
.category-banner-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
gap: 4px;
position: relative;
width: 100%;
min-height: 200px;
padding: 36px 24px;
border-radius: 12px;
overflow: hidden;
background-color: var(--e-gray-blue-600);
background-image: url("../../src/assets/images/category-image/category-banner-card.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.category-banner-card.brand {
background-color: var(--e-brand-700);
}
.category-banner-card .category-label {
color: var(--e-white);
font-weight: var(--e-font-bold);
}
.category-banner-card .category-text {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-regular);
color: var(--e-white);
}
/* .category-banner-card .category-image {
position: absolute;
top: 50%;
right: 40px;
z-index: 1;
transform: translate(14px, -50%);
object-fit: contain;
max-height: 160px;
max-width: 250px;
} */
.category-banner-card .category-image {
position: absolute;
right: 24px;
z-index: 1;
object-fit: contain;
max-height: 160px;
max-width: 250px;
border-radius: 12px;
width: auto;
}
@media (max-width: 1120px) {
/* .category-banner-card .category-image {
transform: scale(0.75);
} */
}
@media (max-width: 991px) {
.category-banner-card {
min-height: 132px;
padding: 24px;
padding-right: 150px;
}
.category-banner-card .category-image {
width: 100px;
height: 100px;
right: 16px;
}
}
@media (max-width: 576px) {
.category-banner-card {
min-height: 110px;
padding: 16px;
padding-right: 112px;
}
.category-banner-card .category-image {
width: 80px;
height: 80px;
right: 16px;
}
}
/* Custom Selectbox
==================== */
.custom-selection-box {
position: relative;
}
.custom-selection-box .box-heading {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
}
.custom-selection-box .box-heading .label-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.custom-selection-box .box-heading .box-label {
display: block;
margin: 0;
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-medium);
color: var(--e-gray-800);
}
.custom-selection-box .box-heading .box-info {
display: block;
margin: 0;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
color: var(--e-gray-600);
}
.custom-selection-box .box-penal {
width: 100%;
padding: 8px 0 8px 0;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.custom-selection-box .box-penal .penal-group {
width: 100%;
gap: 8px 16px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.custom-selection-box .box-penal .penal-group .form__radio-group,
.custom-selection-box .box-penal .penal-group .form__checkbox-group {
width: 100%;
}
.customise-order .custom-selection-box .box-heading .box-label {
display: flex;
align-items: center;
gap: 3px;
}
.customise-order .modal-header .food-item-name {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-regular);
color: var(--e-gray-800);
}
.customise-order .custom-selection-box .box-heading .box-label .que {
display: flex;
}
.customise-order .modal-wrapper .modal-body {
overflow: hidden !important;
padding: 0;
max-height: initial !important;
}
.customise-order .rest-main-content .button-group {
gap: 16px;
padding: 20px;
border-top: 1px solid var(--e-gray-200);
}
.customise-order .rest-main-content .button-group .atc {
justify-content: center;
padding: 8px 16px;
margin-left: auto;
max-width: 345px;
width: 100%;
}
.customise-order .rest-main-content .button-group .atc span {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.customise-order .rest-inner-content {
overflow-y: auto;
height: 456px;
padding: 20px;
}
.customise-order .food-item-wrap {
padding: 24px;
max-width: 314px;
width: 100%;
}
.customise-order .no-customise {
width: 614px;
max-width: 100%;
}
.customise-order .no-customise .food-item-wrap {
margin-bottom: 85px;
}
/* .customise-order .no-customise .rest-inner-content {
display: none;
} */
.customise-order .no-customise .rest-main-content {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: var(--e-white);
overflow: hidden;
border-radius: 0 0 16px 16px;
}
.customise-order .no-customise .food-item-wrap {
max-width: 100%;
gap: 10px;
align-items: center;
text-align: center;
}
.customise-order .no-customise .food-item-wrap .food-item-content {
order: 2;
padding: 0;
flex-direction: row;
}
.customise-order .no-customise .food-item-wrap.veg .food-item-content .food-item-name,
.customise-order .no-customise .food-item-wrap.non-veg .food-item-content .food-item-name,
.customise-order .no-customise .food-item-wrap.eggiterian .food-item-content .food-item-name {
padding-left: 24px;
padding-top: 0;
background-position: left center;
}
.customise-order .no-customise .food-item-wrap .food-item-image {
order: 1;
width: 200px;
height: 200px;
}
.customise-order .modal-title {
color: var(--e-gray-900);
}
.close-tab {
cursor: pointer;
}
@media (min-width: 767px) {
.customise-order .modal-wrapper.lg {
min-width: 600px;
}
.customise-order .modal-wrapper.lg:has(.no-customise) {
min-width: initial;
width: 600px;
}
.customise-order .rest-main-content {
width: 100%;
}
}
@media (min-width: 1024px) {
.customise-order .modal-wrapper.lg {
min-width: 700px;
}
}
@media (min-width: 1301px) {
.customise-order .modal-wrapper.lg {
min-width: 900px;
}
}
@media (max-width: 1300px) {
.customise-order .food-item-wrap {
padding: 20px;
max-width: 230px;
}
.food-item-wrap .food-item-image {
width: 190px;
height: 190px;
}
}
@media (max-width: 1024px) {
.customise-order .no-customise .food-item-wrap .food-item-image {
width: 150px;
height: 150px;
}
.customise-order .no-customise .food-item-wrap .food-item-content .food-item-name {
background-size: 14px;
padding-left: 20px !important;
background-position: left 4px !important;
}
}
@media (max-width: 767px) {
.customise-order .no-customise .food-item-wrap .food-item-image {
width: 100px;
height: 100px;
}
.customise-order .rest-main-content {
flex: 1;
}
.customise-order .rest-inner-content {
height: 350px;
}
.food-item-wrap .food-item-image {
width: 120px;
height: 120px;
}
}
@media (max-width: 576px) {
.customise-order .rest-inner-content {
border-top: 1px solid var(--e-gray-200);
}
.customise-order .no-customise {
width: 100%;
max-width: 100%;
}
.customise-order .rest-main-content {
border: none;
}
.customise-order .food-item-wrap {
max-width: 100%;
gap: 10px;
align-items: center;
text-align: center;
}
.rest-cutomisation {
flex-direction: column;
}
.customise-order .modal-wrapper .modal-body {
overflow: auto;
}
.food-item-wrap.veg .food-item-content .food-item-name {
padding-left: 24px;
padding-top: 0;
}
.food-item-wrap .food-item-image {
order: 1;
width: 100px;
height: 100px;
}
.food-item-wrap .food-item-content {
order: 2;
padding: 0;
}
}
/* Fancy Box
==================== */
.fancybox__content {
background: transparent !important;
padding: 0 !important;
cursor: default !important;
height: 100%;
justify-content: center;
}
.f-button.is-close-btn {
display: none;
}
.close-reset {
position: absolute !important;
height: 100%;
width: 100%;
}
.fancybox__container .fancybox__nav {
display: none;
}
.fancybox__container .f-button {
width: 24px;
height: 24px;
top: 20px !important;
right: 20px !important;
border: 1px solid var(--e-gray-600);
border-radius: 50%;
padding: 0;
position: absolute;
}
.fancybox__container .f-button.reset {
z-index: 5;
background: transparent;
}
.fancybox__container .f-button.reset:hover {
background: transparent;
}
.fancybox__container .f-button:hover {
background: var(--e-gray-100);
}
.fancybox__container .f-button svg {
color: var(--e-gray-600);
width: 13px;
height: 13px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.modal-wrapper {
width: 660px;
max-width: 100%;
border-radius: 16px;
background: var(--e-white);
}
.modal-wrapper.lg {
max-width: 900px;
width: 100%;
}
.modal-wrapper .modal-header {
padding: 20px 20px 8px 20px;
border-radius: 16px 16px 0 0;
border-bottom: 1px solid var(--e-gray-200);
position: relative;
}
.modal-wrapper .modal-footer {
padding: 20px 32px;
border-radius: 0px 0px 16px 16px;
border-top: 1px solid var(--e-gray-200);
background: var(--e-white);
}
.modal-footer .button-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
/* .cust-modal:not(.customise-order, .already-avail-modal, .headerLocation-modal, .cong-inner) .modal-wrapper .modal-body */
.cust-modal .modal-wrapper .modal-body {
padding: 16px 32px;
position: relative;
max-height: 484px;
height: 100%;
overflow: auto;
}
.earn-reward-modal .earn-inner {
max-height: 484px;
height: 100%;
overflow: auto;
}
.cust-modal.email-help-us .modal-wrapper .modal-body {
overflow: initial;
}
.cust-modal.book-table-modal.update .modal-wrapper {
height: initial;
max-height: initial;
}
.cust-modal.book-table-modal.update .modal-wrapper .custom-selection-box .box-heading .box-label {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
}
.phone-change .modal-wrapper .modal-body {
overflow: initial;
}
@media (max-width: 1300px) {
.modal-wrapper.lg {
max-width: 700px;
}
.modal-wrapper {
width: 520px;
}
.cust-modal .modal-wrapper .modal-body,
.earn-reward-modal .earn-inner {
max-height: 485px;
}
}
@media (max-width: 767px) {
.modal-wrapper .modal-body {
max-height: 350px;
overflow: auto;
}
}
@media (max-width: 620px) {
.fancybox__slide {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
@media (max-width: 576px) {
.fancybox__content {
width: 100%;
}
}
@media (max-width: 375px) {
.cust-modal .modal-wrapper .modal-body,
.earn-reward-modal .earn-inner {
max-height: 380px;
}
}
/* Cart Drawer
==================== */
#CartOverlay {
width: 100%;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background: var(--e-black);
opacity: 0.5;
z-index: 1000;
display: none;
}
#CartDrawer {
width: 460px;
height: 100vh;
background: var(--e-white);
position: fixed;
right: 0;
top: 0;
z-index: 1010;
transform: translateX(500px);
transition: all 0.3s ease 0s;
}
#CartDrawer.open {
transform: translateX(0);
}
#CartDrawer.open .empty-cart-wrapper {
margin: 0 auto;
}
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--e-secondary);
padding: 24px 16px;
}
.drawer-header .drawer-heading {
margin: 0;
padding: 0;
color: var(--e-white);
}
.drawer-header .cart-drawer-trigger {
display: block;
user-select: none;
transition: var(--e-transition);
}
.drawer-header .cart-drawer-trigger:hover,
.drawer-header .cart-drawer-trigger:focus {
opacity: 0.7;
}
.drawer-header .cart-drawer-trigger svg {
display: block;
user-select: none;
}
.drawer-footer {
padding: 0 16px 28px;
}
.drawer-footer .order-subtotal {
display: flex;
align-items: center;
justify-content: space-between;
}
.drawer-footer .order-subtotal .subtotal-label,
.drawer-footer .order-subtotal .subtotal-price {
font-size: var(--e-display-xs);
line-height: var(--e-display-lh-xs);
font-weight: var(--e-font-semibold);
color: var(--e-gray-800);
margin-bottom: 0;
}
.drawer-footer .order-action {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.drawer-footer .order-action .button {
width: 100%;
}
.drawer-footer .order-condition {
position: relative;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.drawer-footer .order-condition .text {
text-align: center;
margin: 0;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
color: var(--e-gray-700);
}
.drawer-footer .order-action .button span {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.drawer-footer .order-action .button-md {
padding: 8px 16px;
}
.cart_restaurant-orders {
height: calc(100vh - 375px);
overflow: auto;
scrollbar-width: thin;
-ms-overflow-style: none;
}
.cart_restaurant-orders::-webkit-scrollbar {
display: none;
}
.order-lists {
padding: 8px 16px;
}
.order-lists .order-item {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
padding: 12px;
border-bottom: 1px solid var(--e-gray-200);
margin-top: -1px;
}
.order-lists .order-item .item-image {
width: 80px;
height: 80px;
background: var(--e-white);
border-radius: 8px;
overflow: hidden;
}
.order-lists .order-item .item-image>img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.order-lists .order-item .item-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
max-width: calc(100% - 216px);
}
.order-lists .order-item .item-content .item-name {
margin: 0;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
overflow-wrap: anywhere;
}
.order-lists .order-item .item-content .item-text {
margin: 0;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
color: var(--e-gray-600);
overflow-wrap: anywhere;
}
.order-lists .order-item .item-content .item-price {
margin: 4px 0 0 0;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.main-price {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
}
.main-price .checked-price {
text-decoration: line-through;
opacity: 0.7;
font-weight: 500;
}
.main-price .sale-off {
flex: 100%;
font-weight: 600;
margin-bottom: 8px;
font-size: var(--e-text-xl);
}
.order-lists .order-item .ar-button-group {
margin-left: auto;
gap: 0;
/* border: 1px solid var(--e-brand-600);
background: var(--e-brand-600);
color: var(--e-white); */
}
.order-lists .order-item .ar-button-group .btn {
padding: 14px 8px 14px 8px;
transition: var(--e-transition);
}
.order-lists .order-item .ar-button-group .btn:hover {
border: none;
background: var(--e-brand-700);
}
/* .order-lists .order-item .ar-button-group .input {
color: var(--e-white);
}
.order-lists .order-item .ar-button-group .btn svg path {
fill: var(--e-white);
}
.order-lists .order-item .ar-button-group .btn:hover svg path {
fill: var(--e-white);
} */
.cart_restaurant {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
width: 100%;
padding: 16px;
background: var(--e-white);
transition: var(--e-transition);
}
.cart_restaurant:hover {
background: var(--e-gray-50);
outline: none;
box-shadow: none;
}
.cart_restaurant .cart_restaurant-image {
width: 54px;
height: 54px;
padding: 10px;
background: var(--e-gray-50);
border-radius: 50%;
flex: 0 0 auto;
}
.cart_restaurant .cart_restaurant-image>img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.cart_restaurant .cart_restaurant-details .restaurant-name {
margin: 0;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.cart_restaurant .cart_restaurant-details .restaurant-location {
margin: 0;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
color: var(--e-gray-700);
}
.cart_restaurant .cart_restaurant-action {
margin-left: auto;
flex: 0 0 auto;
}
.cart_restaurant:hover .cart_restaurant-action {
opacity: 0.5;
}
@media (max-width: 1300px) {
.order-lists .order-item .ar-button-group .btn {
padding: 10px 8px 10px 8px;
}
}
/* Checkout Page
==================== */
.checkout-grid {
display: flex;
align-items: flex-start;
gap: 24px;
width: 100%;
}
.checkout-grid .left-grid {
width: 718px;
}
.checkout-grid .right-grid {
width: 506px;
}
.checkout-grid .left-grid .menu_iteam-lists .menu_item {
justify-content: space-between;
}
.checkout-grid .left-grid .menu_iteam-lists .menu_item .edit-checkout {
display: flex;
padding-left: 4px;
justify-content: center;
align-items: center;
gap: 4px;
}
.checkout-grid .left-grid .menu_iteam-lists .menu_item .edit-checkout .text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
color: var(--e-brand-600);
}
.checkout-group .card-title {
padding: 20px 24px;
border-bottom: 1px solid var(--e-gray-100);
}
.checkout-group .card-title .title {
font-weight: var(--e-font-semibold);
color: var(--e-gray-900);
}
.takeaway-details {
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 18px;
}
.takeaway-details .takeaway-label {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.takeaway-details .location-action {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
color: var(--e-brand-700);
}
.takeaway-details .location-action svg path {
fill: var(--e-brand-700);
}
.takeaway-details .location-action span {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-brand-700);
}
.takeaway-details .group-details {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
}
.takeaway-details .group-details .res-image {
display: block;
width: 74px;
height: 74px;
padding: 0;
border-radius: 12px;
overflow: hidden;
flex: 0 0 auto;
}
.takeaway-details .group-details .res-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 12px;
}
.takeaway-details .group-details .res-details {
display: flex;
flex-direction: column;
gap: 0;
max-width: 160px;
}
.takeaway-details .group-details .res-details .res-name {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
font-weight: var(--e-font-semibold);
color: var(--e-gray-800);
}
.takeaway-details .group-details .res-details .res-text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-600);
}
.radio-action-group {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
.radio-action-group .form__radio-group {
position: relative;
}
.radio-action-group .form__radio-group input[type="radio"] {
display: none;
}
.radio-action-group .form__radio-group .radio-label {
min-width: 170px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid var(--e-gray-200);
background: var(--e-white);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.radio-action-group .form__radio-group .radio-label .label {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
margin: 0;
cursor: pointer;
}
.radio-action-group .form__radio-group .radio-label .text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-900);
margin: 0;
text-align: center;
}
.radio-action-group .form__radio-group input[type="radio"]:checked+.radio-label {
border-color: var(--e-brand-200);
background: var(--e-brand-50);
}
.radio-action-group .form__radio-group input[type="radio"]:checked+.radio-label .label,
.radio-action-group .form__radio-group input[type="radio"]:checked+.radio-label .text {
color: var(--e-brand-700);
}
.menu_iteam-lists {
display: flex;
flex-direction: column;
gap: 0px;
}
.menu_iteam-lists .menu_item {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
padding: 16px 24px;
border-bottom: 1px solid var(--e-gray-100);
margin-top: -1px;
}
.menu_iteam-lists .menu_item:first-child {
margin-top: 0;
}
.menu_iteam-lists .menu_item:last-child {
border-bottom: none;
}
.menu_iteam-lists .menu_item .item-image {
display: block;
width: 80px;
height: 80px;
padding: 0;
border-radius: 12px;
overflow: hidden;
margin-left: auto;
}
.menu_iteam-lists .menu_item .item-image.first {
margin-left: 0;
}
.menu_iteam-lists .menu_item .item-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 12px;
}
.menu_iteam-lists .menu_item .item-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.menu_iteam-lists .menu_item .item-content .item-name {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
font-weight: var(--e-font-semibold);
color: var(--e-gray-800);
margin: 0;
text-transform: capitalize;
}
.menu_iteam-lists .menu_item .item-content .item-name>span {
text-transform: lowercase;
color: var(--e-gray-500);
}
.menu_iteam-lists .menu_item .item-content .item-text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
color: var(--e-gray-600);
margin: 0;
}
.menu_iteam-lists .menu_item .item-content .item-price {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
font-weight: var(--e-font-semibold);
color: var(--e-gray-800);
margin: 4px 0 0 0;
}
.menu_iteam-lists .menu_item .ar-button-group {
margin-left: auto;
}
.menu_item-action {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 24px 24px;
}
.menu_item-action .button {
width: 100%;
}
.tabing-wrapper .tab-header {
padding: 16px;
border-bottom: 1px solid var(--e-gray-100);
}
.tabing-wrapper .tab-group {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin: 0;
padding: 4px;
border-radius: 12px;
background: var(--e-gray-100);
}
.tabing-wrapper .tab-group .tab,
.tabing-wrapper .tab-group .acc-tab {
flex: 1 1 auto;
text-align: center;
padding: 0;
}
.tabing-wrapper .tab-group .tab>a,
.tabing-wrapper .tab-group .acc-tab>a {
display: block;
padding: 7px 36px;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-500);
background: transparent;
border-radius: 8px;
margin: 0;
}
.tabing-wrapper .tab-group .tab.active>a,
.tabing-wrapper .tab-group .acc-tab.active>a {
color: var(--e-white);
background: var(--e-brand-700);
}
/* .tab-content>div:last-child {
display: none;
} */
.coupan-offer-modal .tab-content>div:last-child,
.checkout-grid .right-grid .tab-content>div:last-child,
.account-info.ord .tab-content>div:last-child,
.my-tbl-book .tab-content>div:last-child {
display: block;
}
.block-title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.tab-block {
display: flex;
flex-direction: column;
gap: 15px;
padding: 24px;
}
.tab-block .block-title {
display: flex;
gap: 7px;
align-items: center;
justify-content: flex-start;
}
.tab-block .block-title .icon {
width: 26px;
height: 26px;
flex: 0 0 auto;
}
.tab-block.action-block {
padding: 24px 23px 14px 23px;
}
.tab-block.action-block .proceed-to-pay span {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.offer-block {
display: flex;
flex-direction: column;
gap: 14px;
padding: 24px;
}
.offer-block .offer-penal {
user-select: none;
overflow: hidden;
border-radius: 12px;
border: 1px solid var(--e-gray-100);
background: var(--e-gray-50);
}
.offer-block .offer-penal:has(.view-all-coupans) {
padding-bottom: 12px;
}
.offer-block .offer-penal .frst-svg {
max-width: 52px;
width: 100%;
}
.view-all-coupans {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
font-weight: var(--e-font-semibold);
color: var(--e-gray-700);
}
.offer-block .offer-penal hr {
border: 1px dashed var(--e-gray-200);
width: 95%;
margin: 12px auto;
}
.offer-block .offer-penal .checkbox-label,
.offer-block .offer-penal .coupon-action {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 8px 12px;
background-color: transparent;
border: none;
cursor: pointer;
}
.u-can {
background-color: var(--e-brand-100);
padding: 8px 16px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-brand-700);
}
.offer-block .offer-penal label svg,
.offer-block .offer-penal .coupon-action svg,
.offer-block .offer-penal .checkbox-icon {
flex: 0 0 auto;
}
.offer-block .offer-penal .coupon-action .remove-text {
display: flex;
justify-content: flex-end;
flex: 0 0 auto;
color: var(--e-brand-700);
text-transform: uppercase;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
}
.offer-block .offer-penal .checkbox-label:hover,
.offer-block .offer-penal .coupon-action:hover {
background: var(--e-brand-50);
border-color: var(--e-brand-600);
}
.offer-penal .coupon-action .button {
margin-left: auto;
}
.offer-block .offer-penal .text-group {
display: flex;
flex-direction: column;
gap: 0px;
}
.offer-block .offer-penal .text-group .label {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
color: var(--e-gray-950);
}
.offer-block .offer-penal .text-group .text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-500);
}
.offer-block .offer-penal .text-group .text.success,
.offer-block .offer-penal input[type="radio"]:checked+.checkbox-label .text-group .text {
color: var(--e-brand-600);
}
.offer-block .offer-penal .checkbox-icon {
margin-left: auto;
width: 20px;
height: 20px;
}
.offer-block .offer-penal .right-click {
margin-left: auto;
width: 24px;
height: 24px;
}
.textarea-group {
position: relative;
}
.textarea-group .form-wrapper {
display: block;
width: 100%;
height: 108px;
margin-top: 2px;
resize: none;
padding: 8px 64px 8px 12px;
background: var(--e-white);
border: 1px solid var(--e-gray-200);
border-radius: 8px;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-950);
overflow-wrap: anywhere !important;
}
.textarea-group #chars {
position: absolute;
bottom: 5px;
right: 12px;
z-index: 2;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-500);
}
.bill-details-group {
display: flex;
flex-direction: column;
gap: 0;
}
.bill-details-group .row-penal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
padding: 11px 0;
flex-wrap: wrap;
}
.bill-details-group .row-penal .label,
.bill-details-group .row-penal .price {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-800);
}
.bill-details-group .row-penal .penal-group {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.bill-details-group .row-penal .penal-group .label,
.bill-details-group .row-penal .penal-group .price {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-900);
}
.bill-details-group .row-penal.offer-penal .label,
.bill-details-group .row-penal.offer-penal .price {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-brand-600);
}
.bill-details-group .row-penal .penal-group .label {
border-bottom: 0.5px dashed var(--e-black);
color: var(--e-gray-600);
}
.tipped-group {
display: block;
width: 100%;
position: relative;
}
.tipped-group .tipped-top {
padding: 16px;
border-radius: 12px 12px 0px 0px;
background: var(--Gradient-Linear-Color-03, linear-gradient(180deg, #ffd1ff 0%, #fad0c4 100%));
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
}
.tipped-group .tipped-top .tipped-details {
width: calc(100% - 110px);
}
.tipped-group .tipped-top .tipped-details .label {
display: block;
margin-bottom: 6px;
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
color: var(--e-gray-950);
}
.tipped-group .tipped-top .tipped-details .text {
display: block;
margin: 0;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
color: var(--e-gray-600);
}
.tipped-group .tipped-top .tipped-image {
width: 74px;
height: 74px;
border-radius: 10px;
overflow: hidden;
}
.tipped-group .tipped-top .tipped-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 10px;
}
.tipped-group .tipped-bottom {
padding: 11px 12px;
border-radius: 0px 0px 12px 12px;
border: 1px solid var(--e-gray-100);
background: var(--e-white);
}
.tipped-group .tag-group {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.tipped-group .tag-group .form__radio-group {
flex: 1 1 25%;
}
.tipped-group .tag-group .form__radio-group+a.tag {
flex: 1 1 25%;
}
.tipped-group .tag-group .form__radio-group.other-in .tag {
width: 100%;
text-align: center;
}
.tipped-group .tag-group .form__radio-group.other-in .tag:focus {
background: var(--e-brand-25);
border-color: var(--e-brand-600);
}
.tipped-group .tag-group .tag {
padding: 10px 0px;
border-radius: 8px;
border: 1px solid var(--e-gray-200);
background: var(--e-white);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-600);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
cursor: pointer;
user-select: none;
position: relative;
overflow: hidden;
}
.tipped-group .tag-group .tag:hover {
background: var(--e-brand-50);
border-color: var(--e-brand-200);
color: var(--e-brand-700);
}
.tipped-group .tag-group .tag span {
display: none;
background: var(--e-brand-700);
font-size: var(--e-text-xs);
line-height: var(--e-text-lh-xs);
font-weight: var(--e-font-semibold);
color: var(--e-brand-100);
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
padding: 0px;
}
.tipped-group .tag-group .form__radio-group input[type="checkbox"]:checked+.tag {
background: var(--e-brand-25);
border-color: var(--e-brand-600);
}
.tipped-group .tag-group .form__radio-group input[type="checkbox"]+.tag.most {
padding: 18px 14px 0;
}
.tipped-group .tag-group .form__radio-group input[type="checkbox"]+.tag span {
display: block;
font-size: 9px;
}
.contribute .contribute-inner {
justify-content: space-between;
gap: 10px;
}
.contribute .left-content .title {
font-weight: var(--e-font-medium);
color: var(--e-gray-950);
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.contribute .left-content .text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.contribute .right-content {
display: flex;
align-items: center;
gap: 10px;
}
.contribute .right-content .text-group {
display: flex;
padding: 5px 10px;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 1px solid var(--e-slate-300);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.contribute .right-content .text-group>label {
overflow-wrap: initial;
}
.contribute .right-content .form__checkbox-group .checkbox-label {
border: none;
padding: 0;
}
.contribute .right-content .form__checkbox-group .checkbox-label .checkbox-icon {
height: 26px;
width: 26px;
}
.contribute .right-content label {
font-size: var(--e-text-md);
font-style: normal;
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-md);
}
.contribute .right-content .form__checkbox-group .checkbox-label .checkbox-icon .active-checkmark {
height: 14px;
width: 14px;
}
.contribute .form__checkbox-group .checkbox-label .checkbox-icon {
height: 20px;
width: 20px;
}
.policy-group {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.policy-group .policy-title,
.pay-opt-group .pay-opt-title {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
margin: 0;
}
.policy-group .policy-trigger {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
color: var(--e-orange);
border-bottom: 0.5px dashed var(--e-warning);
text-transform: uppercase;
}
.policy-group .policy-trigger:hover {
border-color: var(--e-gray-700);
color: var(--e-gray-700);
}
.pay-modes {
border-radius: 12px;
padding: 16px;
background: var(--e-gray-25);
}
.pay-opt-block .form__radio-group .radio-label {
border: none;
justify-content: space-between;
background: transparent;
}
.pay-opt-block hr {
border: 1px dashed var(--e-gray-200);
width: 100%;
margin: 12px 0;
}
.pay-opt-block .form__radio-group .radio-label:hover .text {
color: var(--e-brand-600);
}
.pay-opt-block .form__radio-group .radio-label .text {
display: flex;
align-items: center;
gap: 12px;
align-self: stretch;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
color: var(--e-gray-950);
}
.pay-opt-block .form__radio-group input[type="radio"]:checked+.radio-label .text {
color: var(--e-gray-950);
}
.pay-opt-block .form__radio-group .radio-label .radio-icon {
height: 24px;
width: 24px;
}
.pay-opt-block .form__radio-group .radio-label .radio-icon .active-circle {
height: 9.6px;
width: 9.6px;
}
.schedule-time-modal .modal-header .modal-title {
color: var(--e-gray-800);
}
.schedule-time-modal .custom-selection-box .box-heading .box-label {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
}
.edit-checkout-modal .modal-wrapper .modal-header {
border-bottom: none;
}
.edit-checkout-modal .modal-wrapper .modal-header .modal-title {
color: var(--e-gray-800);
}
.edit-checkout-modal .filter-btns {
display: flex;
gap: 24px;
}
.edit-checkout-modal .filter-btns .button {
flex: 1;
}
.edit-checkout-modal .content {
max-width: 508px;
width: 100%;
}
.edit-checkout-modal .content .text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-800);
}
.takeaway-details .bottom-group {
gap: 10px;
}
@media (max-width: 1300px) {
.checkout-grid .left-grid {
width: 588px;
}
.checkout-grid .right-grid {
width: 412px;
}
.tab-block .block-title .icon {
width: 22px;
height: 22px;
}
}
@media (max-width: 1199px) {
.radio-action-group .form__radio-group .radio-label {
min-width: initial;
}
.tipped-group .tag-group {
flex-wrap: wrap;
}
.tipped-group .tag-group .form__radio-group {
flex: 1 1 23%;
}
}
@media (max-width: 991px) {
.checkout-grid {
flex-wrap: wrap;
}
.checkout-grid .left-grid,
.checkout-grid .right-grid {
width: 100%;
}
.tipped-group .tag-group {
flex-wrap: nowrap;
}
.tipped-group .tag-group .form__radio-group {
flex: 1 1 25%;
}
}
@media (max-width: 576px) {
.takeaway-details,
.checkout-grid .menu_iteam-lists .menu_item,
.offer-block,
.instructions-block,
.bill-block,
.tipped-block,
.contribute,
.policy-block,
.tab-block.action-block {
padding: 16px;
}
.takeaway-details .group-details .res-details {
max-width: 100%;
}
.takeaway-details .group-details .res-image {
flex: 0 0 auto;
}
.checkout-group .card-title {
padding: 16px;
}
.checkout-grid .menu_item-action {
padding: 8px 16px 16px;
}
.takeaway-details .radio-action-group .form__radio-group .radio-label {
padding: 8px 4px;
}
.takeaway-details .bottom-group {
flex-wrap: wrap;
gap: 12px;
}
.takeaway-details .bottom-group>* {
width: 100%;
}
.takeaway-details .radio-action-group .form__radio-group {
flex: 1;
}
.tabing-wrapper .tab-group .tab>a,
.tabing-wrapper .tab-group .acc-tab>a {
padding: 7px 24px;
}
.tipped-group .tag-group {
flex-wrap: wrap;
}
.tipped-group .tag-group .form__radio-group {
flex: 1 1 23%;
}
.view-all-coupans {
gap: 4px;
}
.view-all-coupans svg {
max-width: 16px;
}
.account-info.my-tbl-book .tab-header,
.account-info.my-voucher .tab-header {
overflow: auto;
padding-bottom: 12px !important;
margin-bottom: 12px;
}
.account-info.my-tbl-book .tab-header ul,
.account-info.my-voucher .tab-header ul {
min-width: 500px;
}
}
@media (max-width: 380px) {
.tipped-group .tag-group .tag {
padding: 10px 14px;
}
}
/* Photo Gallery
==================== */
.gallery-boxes {
display: flex;
gap: 18px;
margin: 0;
}
.glry-col-12 {
width: 100%;
flex: 0 0 100%;
display: flex;
gap: 20px;
justify-content: flex-start;
align-items: flex-start;
}
.glry-col-12 .gallery-image {
max-height: 265px;
height: 100%;
flex: 1;
}
.glry-col-12 .gallery-image img {
width: 100%;
height: 100%;
}
.glry-col-6 {
width: calc(50% - 12px);
}
.glry-col-3 {
width: calc(25% - 6px);
display: flex;
flex-direction: column;
gap: 24px;
}
.gallery-image img {
width: 100%;
border-radius: 8px;
vertical-align: bottom;
object-fit: cover;
}
.glry-col-6 .gallery-image {
height: 100%;
}
.glry-col-3 .gallery-image {
flex: 1;
}
.glry-col-6 .gallery-image a,
.glry-col-3 .gallery-image a {
display: block;
width: 100%;
height: 100%;
}
.gallery-image .view-more {
position: relative;
height: 100%;
width: 100%;
}
.gallery-image .view-more .more-images {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.open-gallery-modal .modal-wrapper {
width: 720px;
}
.open-gallery-modal .modal-wrapper .modal-header.ord-cancel-head {
border-bottom: 0;
padding: 24px 24px 8px;
}
.open-gallery-modal .tabing-wrapper .tab-header {
padding: 0 24px 0;
}
.open-gallery-modal .tabing-wrapper .tab-group {
gap: 0;
background: transparent;
padding: 0;
justify-content: flex-start;
border-radius: 0;
}
.open-gallery-modal .tabing-wrapper .tab-group .tab {
flex: unset;
}
.open-gallery-modal .tabing-wrapper .tab-group .tab>a {
padding: 16px 24px 12px;
}
.open-gallery-modal .tabing-wrapper .tab-group .tab.active>a {
color: var(--e-brand-700);
background: transparent;
}
.open-gallery-modal .tab-content .image-grid {
margin: 0;
padding: 0;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.open-gallery-modal .tab-content {
padding: 12px 22px;
}
.open-gallery-modal .tab-content .image-grid a {
width: calc(25% - 9px);
}
.open-gallery-modal .tab-content .image-grid a img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
aspect-ratio: 1 / 1;
}
.open-gallery-modal .tab-content>div {
display: none;
}
.open-gallery-modal .tab-content>div:first-child {
display: block;
}
.fancybox__backdrop {
background: rgba(30, 30, 30, 0.9) !important;
}
.gallery-fancybox .fancybox-inner {
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 690px;
}
.gallery-fancybox .fancybox-inner .fancybox__content {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
}
.gallery-fancybox .fancybox-inner .fancybox__content .fancybox-image {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
}
.gallery-fancybox .fancybox-navigation .fancybox-button {
padding: 0;
width: 40px;
height: 40px;
background-repeat: no-repeat;
}
.gallery-fancybox .fancybox-navigation .fancybox-button svg {
display: none;
}
.gallery-fancybox .fancybox-button--arrow_left {
background: url("../../src/assets/images/gallery-image/arrow-left.png");
}
.gallery-fancybox .fancybox-button--arrow_right {
background: url("../../src/assets/images/gallery-image/arrow-right.png");
}
.gallery-fancybox .fancybox-infobar,
.gallery-fancybox .fancybox-toolbar {
display: none;
}
@media (max-width: 991px) {
.gallery-boxes {
margin: 0;
gap: 15px;
}
.glry-col-3 {
gap: 15px;
}
.gallery-image .view-more .more-images {
font-size: 13px;
}
.open-gallery-modal .tab-content {
padding: 12px 20px;
}
}
@media (max-width: 576px) {
.glry-col-12 .gallery-image {
height: 100px;
}
.gallery-boxes {
margin: 0;
gap: 10px;
flex-direction: column;
}
.glry-col-3 {
gap: 10px;
width: 100%;
flex-direction: row;
}
.rest-reviews-head {
margin-bottom: 15px;
}
.glry-col-6 {
display: none;
}
.glry-col-3 .gallery-image {
height: 100%;
flex: 1;
}
.open-gallery-modal .tab-content .image-grid a {
width: calc(33.33% - 5px);
}
.open-gallery-modal .tab-content .image-grid {
gap: 6px;
}
}
@media (max-width: 420px) {
.gallery-boxes {
margin: 0;
gap: 5px;
}
.glry-col-3 {
gap: 5px;
}
}
.container-sm {
margin: 50px auto;
max-width: 920px;
padding: 0 20px;
}
.coupon-box {
border-radius: 16px;
background: var(--e-gray-50);
overflow: hidden;
border: 1px solid var(--e-gray-300);
margin: 0 0 12px;
}
.coupon-box-head {
padding: 16px;
display: flex;
gap: 16px;
position: relative;
background: var(--e-gray-200);
padding-left: 104px;
min-height: 105px;
}
.coupon-rest-img {
width: 72px;
height: 72px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid var(--e-gray-300);
background: var(--e-white);
position: absolute;
left: 16px;
top: 16px;
}
.coupon-rest-img img {
width: 100%;
height: fit-content;
}
.coupon-order-id,
.coupon-rest-title {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
color: var(--e-gray-600);
margin-bottom: 4px;
}
.coupon-title {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-800);
}
.coupon-share {
position: absolute;
right: 16px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
display: flex;
align-items: center;
color: var(--e-gray-800);
}
.coupon-share path {
fill: var(--e-gray-800);
}
.coupon-share svg {
margin-right: 5px;
margin-top: -3px;
width: 18px;
}
.coupon-box-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
}
.coupon-order-info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.coupon-amount {
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
color: #0c111d;
margin-bottom: 4px;
}
.coupon-time-stamp {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
color: #475467;
font-weight: var(--e-font-medium);
}
.coupon-box-bottom .voucher-badge.pill.success {
margin-top: 12px;
}
.coupon-qr-code {
height: 120px;
width: 120px;
}
.coupon-qr-code img {
height: 100%;
width: 100%;
}
/* Color Changes */
.coupon-box-purple {
background: var(--e-purple-50);
border: 1px solid var(--e-purple-300);
}
.coupon-box-purple .coupon-box-head {
background: var(--e-purple-200);
}
.coupon-box-purple .coupon-rest-img {
border: 1px solid var(--e-purple-300);
}
.coupon-box-purple .coupon-order-id,
.coupon-box-purple .coupon-rest-title {
color: var(--e-purple-600);
}
.coupon-box-purple .coupon-title {
color: var(--e-purple-800);
}
.coupon-box-purple .coupon-share path {
fill: var(--e-purple-800);
}
.coupon-box-purple .coupon-share {
color: var(--e-purple-800);
}
.coupon-box-orange {
background: var(--e-error-50);
border: 1px solid var(--e-orange-300);
}
.coupon-box-orange .coupon-box-head {
background: var(--e-error-200);
}
.coupon-box-orange .coupon-rest-img {
border: 1px solid var(--e-orange-300);
}
.coupon-box-orange .coupon-order-id,
.coupon-box-orange .coupon-rest-title {
color: var(--e-error-600);
}
.coupon-box-orange .coupon-title {
color: var(--e-orange-800);
}
.coupon-box-orange .coupon-share path {
fill: var(--e-orange-800);
}
.coupon-box-orange .coupon-share {
color: var(--e-orange-800);
}
.coupon-box-fuchsia {
background: var(--e-fuchsia-50);
border: 1px solid var(--e-fuchsia-300);
}
.coupon-box-fuchsia .coupon-box-head {
background: var(--e-fuchsia-200);
}
.coupon-box-fuchsia .coupon-rest-img {
border: 1px solid var(--e-fuchsia-300);
}
.coupon-box-fuchsia .coupon-order-id,
.coupon-box-fuchsia .coupon-rest-title {
color: var(--e-fuchsia-600);
}
.coupon-box-fuchsia .coupon-title {
color: var(--e-fuchsia-800);
}
.coupon-box-fuchsia .coupon-share path {
fill: var(--e-fuchsia-800);
}
.coupon-box-fuchsia .coupon-share {
color: var(--e-fuchsia-800);
}
@media (max-width: 767px) {
.coupon-share {
font-size: 0;
}
}
body:has(.account-tab.collapsed, #CartDrawer.open) {
overflow: hidden;
}
.tab-backdrop {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
z-index: 111;
display: none;
}
.collapsed+.tab-backdrop {
display: block;
}
.account-tab {
flex-direction: column;
flex: 0 0 auto;
gap: 20px;
border-radius: 16px;
background: var(--e-gray-50);
width: 294px;
height: max-content;
}
.tab-title {
padding: 24px 16px 20px;
border-bottom: 1px solid var(--e-white);
display: flex;
justify-content: space-between;
align-items: center;
}
.user-data .user-email {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.user-data .user-name {
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-md);
text-transform: capitalize;
}
.tab-title .title {
color: var(--e-gray-900);
font-size: var(--e-text-xl);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-xl);
}
.user-area {
gap: 12px;
padding: 9px 16px;
border-bottom: 1px solid var(--e-white);
}
.account-gradient {
background: rgb(24, 34, 48);
background: -moz-linear-gradient(45deg, rgba(24, 34, 48, 1) 0%, rgba(71, 84, 103, 1) 100%);
background: -webkit-linear-gradient(45deg, rgba(24, 34, 48, 1) 0%, rgba(71, 84, 103, 1) 100%);
background: linear-gradient(45deg, rgba(24, 34, 48, 1) 0%, rgba(71, 84, 103, 1) 100%);
}
.flex-full {
width: 100%;
flex: 100%;
}
.user-detail {
gap: 8px;
position: relative;
padding: 24px 12px;
border-radius: 12px;
}
.user-icon {
height: 40px;
width: 40px;
border-radius: 50px;
overflow: hidden;
}
.user-icon img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.user-data {
color: var(--e-white);
padding-right: 20px;
}
.user-icon.icon-gradient {
background: rgb(238, 154, 229);
background: -moz-linear-gradient(135deg, rgba(238, 154, 229, 1) 0%, rgba(89, 97, 249, 1) 100%);
background: -webkit-linear-gradient(135deg, rgba(238, 154, 229, 1) 0%, rgba(89, 97, 249, 1) 100%);
background: linear-gradient(135deg, rgba(238, 154, 229, 1) 0%, rgba(89, 97, 249, 1) 100%);
}
.user-edit {
position: absolute;
right: 10px;
top: 23px;
}
.user-edit:hover svg path {
stroke: var(--e-gray-400);
}
.profile-data {
padding-top: 22px;
}
.profile-data .user-form-btn {
width: 100%;
justify-content: flex-end;
}
.profile-data textarea.form-control {
padding: 7px 11px;
resize: none;
}
.fav-restaurant {
flex: 1;
padding: 12px;
border-radius: 12px;
color: var(--e-white);
}
a.fav-restaurant:active *,
a.total-reward:active *,
a.fav-restaurant:focus *,
a.total-reward:focus * {
color: var(--e-white);
outline: none;
-webkit-tap-highlight-color: transparent;
}
.total-reward {
flex: 1;
padding: 15px 12px;
border-radius: 12px;
color: var(--e-white);
}
a.fav-restaurant:hover,
a.total-reward:hover {
color: var(--e-gray-400);
}
.user-fav,
.user-reward {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
}
.user-res,
.reward-points {
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-md);
text-align: center;
text-transform: capitalize;
overflow-wrap: anywhere;
}
.user-area .res-image,
.user-area .reward-image {
margin-bottom: 12px;
height: 50px;
width: 61px;
}
.res-image img,
.reward-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tab-sub-title {
padding: 11px 16px;
position: relative;
}
.tab-sub-title .sub-title {
color: var(--e-gray-900);
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
}
.tab-categories {
gap: 10px;
padding-bottom: 9px;
border-bottom: 1px solid var(--e-white);
}
.tab-categories:has(.tab-sub-data-row.active) .tab-sub-title::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 30px;
border-radius: 0px 16px 16px 0px;
background: var(--e-brand-500);
margin-top: 7px;
}
.tab-categories:last-child {
border-bottom: none;
padding-bottom: 30px;
}
.tab-sub-data {
padding: 0 8px;
}
.tab-sub-data-row {
gap: 16px;
padding: 4px 8px;
width: 100%;
border-radius: 8px;
}
.tab-sub-data-row:hover,
.tab-sub-data-row.active {
background: var(--e-white);
}
.tab-sub-data-row:hover .sub-data-title,
.tab-sub-data-row.active .sub-data-title {
color: var(--e-brand-700);
}
.tab-sub-data-row:hover .sub-data-image svg circle,
.tab-sub-data-row.active .sub-data-image svg circle {
fill: var(--e-brand-100);
}
.tab-sub-data-row:hover .sub-data-image svg path,
.tab-sub-data-row.active .sub-data-image svg path {
fill: var(--e-brand-700);
}
.tab-sub-data-row .sub-data-title {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
color: var(--e-gray-500);
text-transform: capitalize;
}
.tab-sub-data-row .sub-data-image {
height: 36px;
width: 36px;
flex: 0 0 auto;
}
.tab-sub-data-row .sub-data-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.account-tab.collapsed {
display: none;
}
.tab-collapse {
display: none;
background-color: transparent;
border: none;
cursor: pointer;
}
.tab-collapse:hover {
background-color: transparent;
}
.inner-collapse {
display: none;
}
.myaccount {
gap: 24px;
flex-wrap: wrap;
}
.account-info.fav-account .tab-title {
padding: 24px;
}
.account-info {
border-radius: 16px;
border: 1px solid var(--e-gray-100);
flex-grow: 1;
height: max-content;
flex: 1;
position: sticky;
top: 20px;
}
.account-info .form-label {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.account-info .tab-title {
padding: 24px 24px 3px;
justify-content: flex-start;
gap: 16px;
}
.account-info.ord .tab-title {
padding: 24px 24px 11px;
}
.user-form {
display: flex;
flex-wrap: wrap;
row-gap: 16px;
column-gap: 20px;
padding: 0 24px 24px;
}
.form-group {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 100%;
width: 100%;
gap: 6px;
align-self: stretch;
}
.form-group.half-row {
flex: 0 0 auto;
width: calc(50% - 10px);
}
.form-label {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-700);
}
.required {
color: var(--e-brand-600);
}
.profile-form .form-note {
margin-top: -8px;
margin-bottom: 6px;
}
.form-control,
.custom-input input {
border-radius: 8px;
border: 1px solid var(--e-gray-300);
background: var(--e-white);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-900);
padding: 9px 14px;
width: 100%;
}
.form-control.error {
border-color: var(--e-error);
}
.form-control.sm {
padding: 7px 12px;
}
.custom-input {
width: 100%;
display: flex !important;
gap: 10px;
}
.custom-input input {
padding: 9px 14px !important;
}
.form-control[type="date"] {
user-select: none;
cursor: pointer;
}
.form-control[type="date"]::-webkit-datetime-edit-year-field,
.form-control[type="date"]::-webkit-datetime-edit-month-field,
.form-control[type="date"]::-webkit-datetime-edit-day-field {
background-color: transparent;
color: inherit;
}
.select.form-control {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3E%3Cpath d="M5 7.5L10 12.5L15 7.5" stroke="%23344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: 98%;
padding-right: 6%;
text-transform: capitalize;
}
/* Custom arrow */
.form-message {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-600);
margin: 0;
}
.form-message.error {
color: var(--e-error);
}
.form-message.success {
color: var(--e-success);
}
.form-control::placeholder {
color: var(--e-gray-500);
}
.form-group:has(.form-message.error) .form-control {
border-color: var(--e-error);
}
.form-control:focus {
border-color: var(--e-success);
}
.form-control:disabled {
cursor: not-allowed;
background: var(--e-gray-50);
}
.preferences {
padding-bottom: 8px;
}
.preferences .tab-title {
padding: 8px 0;
}
.preferences .tab-title .title {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-800);
}
.preferences-check {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.gen-check-holder .badge {
border-color: var(--e-gray-50);
background: var(--e-gray-100);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.generalCheckBoxInput {
display: none;
}
.generalCheckBoxInput:checked+.badge {
background-color: var(--e-brand-50);
color: var(--e-brand-700);
border: 1.5px solid var(--e-brand-200);
}
.generalCheckBoxInput:checked+.badge .badge-close {
display: block;
}
.form-note * {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-500);
}
.user-form-btn {
display: flex;
align-items: flex-start;
gap: 24px;
}
.user-form-btn .button {
border: 1px solid var(--e-gray-300);
box-shadow: none;
padding: 8px 20px;
min-width: 170px;
}
.user-form-btn .fill-button:before {
display: none;
}
.user-form-btn .fill-button {
border: 1px solid var(--e-brand-700);
color: var(--e-white);
background: var(--e-brand-700);
}
.user-form-btn .fill-button:hover {
background: var(--e-brand-600);
}
.account-info .textarea-group #chars {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
/* Rewards tab */
.rewards-info {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 16px;
padding: 24px 24px 16px;
}
.total-rewards .tab-title {
display: none;
}
.coin-info {
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
z-index: 1;
}
.coin-info .title {
color: var(--e-white);
font-size: var(--e-text-xl);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-xl);
}
.avail-coins {
background: rgb(16, 24, 40);
background: -moz-linear-gradient(45deg, rgba(16, 24, 40, 1) 0%, rgba(71, 84, 103, 1) 100%);
background: -webkit-linear-gradient(45deg, rgba(16, 24, 40, 1) 0%, rgba(71, 84, 103, 1) 100%);
background: linear-gradient(45deg, rgba(16, 24, 40, 1) 0%, rgba(71, 84, 103, 1) 100%);
display: flex;
flex: 1;
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
border-radius: 16px;
position: relative;
overflow: hidden;
min-height: 158px;
min-width: 319px;
user-select: none;
}
.avail-coins::before {
content: "";
background-image: url(../../src/assets/images/total-rewards.png);
background-repeat: no-repeat;
background-position: right;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
}
.coin-count .title {
color: var(--e-white);
font-size: var(--e-display-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-display-lh-md);
letter-spacing: var(--e-display-ls-md);
}
.coin-count .total-content {
font-size: var(--e-text-small);
font-style: normal;
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-small);
color: #94a3b8;
}
.earn-more-coins {
display: flex;
padding: 28px 24px;
align-items: center;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--e-brand-200);
background: linear-gradient(87deg, var(--e-brand-100) 16.83%, var(--e-white) 63.03%);
position: relative;
min-height: 158px;
min-width: 319px;
}
.earn-more-coins::before {
content: "";
background-image: url(../../src/assets/images/boost1.svg);
background-repeat: no-repeat;
background-position: right;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
}
.earn-more-content {
max-width: 182px;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
z-index: 1;
}
.earn-more-content .title {
color: var(--e-gray-800);
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-md);
}
.earn-more-content .earn-content {
color: var(--e-brand-700);
font-size: var(--e-text-small);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-small);
display: flex;
gap: 6px;
align-items: center;
}
.earn-more-content .earn-content svg {
width: 14px;
}
.earn-more-content .earn-content::after {
content: "";
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns=!string!width=!string!height=!string!viewBox=!string!fill=!string!%3E%3Cpath d=!string!stroke=!string!stroke-width=!string!stroke-linecap=!string!stroke-linejoin=!string!/%3E%3C/svg%3E");
width: 20px;
height: 20px;
}
.history-content {
padding: 0 24px 8px;
}
.history-inner {
display: flex;
align-content: center;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
padding-bottom: 15px;
margin-bottom: 16px;
border-bottom: 1px solid var(--e-gray-100);
}
.history-inner .coin-amount {
flex: 0 0 auto;
}
.history-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px 26px;
}
.history-header .title {
color: var(--e-gray-800);
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
}
.history-header .view-history {
color: var(--e-gray-500);
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-md);
}
.history-header .view-history:hover {
color: var(--e-gray-600);
}
.history-info {
display: flex;
align-items: flex-start;
gap: 12px;
}
.coin-image {
flex: 0 0 auto;
height: 52px;
width: 52px;
padding: 6px;
}
.coin-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.inner-info .title {
color: var(--e-gray-950);
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-md);
}
.inner-info .date {
color: var(--e-gray-600);
font-size: var(--e-text-md);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-md);
}
.best-seller.tag {
width: max-content;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
margin-top: 0;
margin-bottom: 10px;
user-select: none;
}
.tag {
display: flex;
padding: 3px 10px;
align-items: center;
border-radius: 16px;
border: 1px solid var(--e-gray-200);
background: var(--e-gray-50);
color: var(--e-gray-500);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
margin-top: 10px;
}
.tag.success {
border-color: var(--e-success-200);
background: var(--e-success-50);
color: var(--e-success-700);
}
.tag.success svg circle {
fill: var(--e-brand-500);
}
.tag.danger {
border-color: var(--e-error-200);
background: var(--e-error-50);
color: var(--e-error-700);
}
.tag.danger svg circle {
fill: var(--e-error-500);
}
.tag.warning {
border-color: var(--e-warning-200);
background: var(--e-warning-50);
color: var(--e-warning-700);
}
.tag.warning svg circle {
fill: var(--e-yellow);
}
.tag.blue {
border-color: var(--e-blue-200);
background: var(--e-blue-50);
color: var(--e-blue-700);
}
.tag.blue svg circle {
fill: var(--e-blue-500);
}
/* Favourite Restaurants */
.fav-rest {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 24px;
padding: 0 24px;
}
.fav-rest .res-card {
width: calc(50% - 12px);
}
/* My Order */
.bordered-tab .tabing-wrapper .tab-header {
padding: 0 24px 24px;
border: 0;
}
.bordered-tab .tabing-wrapper .tab-group {
padding: 0;
justify-content: flex-start;
gap: 0;
flex-wrap: wrap;
background: transparent;
border-radius: 0;
border-bottom: 1px solid var(--e-gray-200);
}
.bordered-tab .tabing-wrapper .tab-group .tab {
flex: 0 0 auto;
}
.bordered-tab .tabing-wrapper .tab-group .tab>a {
padding: 16px;
border-radius: 0;
border-bottom: 1px solid transparent;
color: var(--e-gray-400);
cursor: pointer;
}
.bordered-tab .tabing-wrapper .tab-group .tab.active>a {
color: var(--e-brand-600);
background: var(--e-white);
border-bottom: 1px solid;
}
.account-tabs .tab-content {
padding: 0 24px;
}
.bordered-tab .tab-content>div:not(:first-child) {
display: none;
}
.bordered-tab .tabing-wrapper .tab-group .acc-tab {
flex: 0 0 auto;
}
.bordered-tab .tabing-wrapper .tab-group .acc-tab>a {
padding: 16px;
border-radius: 0;
border-bottom: 1px solid transparent;
color: var(--e-gray-400);
}
.bordered-tab .tabing-wrapper .tab-group .acc-tab.active>a {
color: var(--e-brand-600);
background: var(--e-white);
border-bottom: 1px solid;
}
.bordered-tab .tabing-wrapper .tab-group .acc-tab:hover>a {
color: var(--e-gray-700);
background: var(--e-gray-50);
border-bottom: 1px solid var(--e-gray-700);
}
.account-tabs .acc-tab-content {
padding: 0 24px;
}
.bordered-tab .acc-tab-content:not(.my-voucher)>div:not(:first-child) {
display: none;
}
@media (max-width: 767px) {
.coin-info .title {
font-size: 22px;
line-height: 30px;
}
.earn-more-content .title {
font-size: 20px;
line-height: 28px;
}
.coin-count .total-content,
.earn-more-content .earn-content {
font-size: 16px;
line-height: 28px;
}
.history-header .title {
font-size: 19px;
line-height: 28px;
}
}
/* My Table Bookings */
.account-order-detail {
display: flex;
padding: 10px;
align-items: center;
align-content: center;
gap: 12px;
flex-wrap: wrap;
border-radius: 16px;
border: 1px solid var(--e-gray-200);
margin-bottom: 26px;
cursor: pointer;
}
.account-order-detail .restaurant-image {
width: 80px;
height: 80px;
border-radius: 12px;
border: 1px solid var(--e-gray-100);
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.account-order-detail .restaurant-image img {
width: 100%;
height: auto;
}
.account-order-detail .restaurant-detail {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
}
.account-order-detail .restaurant-inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
}
.account-order-detail .restaurant-title .title {
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
min-width: 160px;
}
.account-order-detail .order-data {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.account-order-detail .order-status {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
font-size: var(--e-text-md);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-md);
}
.account-order-detail .order-status.awaiting {
color: var(--e-warning-400);
}
.account-order-detail .order-status.cancelled {
color: var(--e-error);
}
.account-order-detail .order-status.confirmed {
color: var(--e-success);
}
.account-order-detail .order-status.completed {
color: var(--e-brand-700);
}
.account-order-detail .order-status.no-show {
color: var(--e-error-600);
}
.order-count,
.order-dt {
display: flex;
align-items: flex-start;
gap: 4px;
font-size: var(--e-text-md);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-md);
color: var(--e-gray-600);
}
/* My Order */
.account-tabs .tab-content.my-order {
padding: 0 24px 12px;
}
.my-order-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--e-gray-200);
}
.my-order-head .order-status .tag {
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
padding: 1px 9px;
}
.my-order-head .order-status .tag.orange {
border-color: var(--e-orange-200);
background: var(--e-orange-50);
color: var(--e-orange-700);
}
.my-order-inner {
border-radius: 16px;
border: 1px solid var(--e-gray-200);
padding: 16px;
margin-bottom: 14px;
}
.my-order-inner.list-item .top-content {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
.my-order-inner.list-item .top-content .tag {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.rest-other-details {
gap: 10px;
flex: 0 0 auto;
}
.rest-other-details .left-content {
display: flex;
padding: 0px 4px;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 4px;
align-self: stretch;
}
.my-order-inner.list-item .time-stamp {
border-bottom: none;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.one-x {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
font-size: var(--e-text-md);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-md);
}
.one-x .items:last-child .comma {
display: none;
}
.my-order-inner.list-item .my-order-x {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.my-order-inner.list-item .my-order-image {
width: 52px;
height: 52px;
}
.my-order-inner.list-item .my-order-view {
margin-left: auto;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.my-ord-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.my-order-inner.list-item .my-order-bottom {
display: flex;
flex-direction: column;
gap: 10px;
}
.view-menu-link:hover svg path {
fill: var(--e-gray-600);
}
.my-order-inner.list-item .my-order-restaurant {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex: 1;
}
.my-order-inner.list-item .my-order-restaurant .rest-content .view-menu-link {
flex: 0 0 auto;
line-height: var(--e-text-lh-small);
font-size: var(--e-text-small);
}
.my-order-inner.list-item .my-order-restaurant .title {
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
color: var(--e-gray-950);
margin-bottom: 5px;
}
.my-order-inner.list-item .my-order-amount-buttons {
gap: 12px;
}
.my-order-inner.list-item .my-order-amount-buttons .button {
padding: 8px 20px;
min-width: 120px;
}
.my-order-inner.list-item .my-order-amount-buttons .button span {
line-height: var(--e-text-lh-md);
font-size: var(--e-text-md);
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.my-order-content {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 36px;
}
.my-order-image {
width: 90px;
height: 90px;
border-radius: 12px;
flex: 0 0 auto;
overflow: hidden;
}
.my-order-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.my-order-detail {
display: flex;
flex-direction: column;
min-width: 220px;
flex: 1;
}
.my-order-detail .my-order-content .title {
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
color: var(--e-gray-950);
}
.my-order-detail .time-stamp {
margin-bottom: 8px;
margin-top: 3px;
}
.my-order-detail .text {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
/* Add this for compatibility */
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--e-text-small);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-small);
max-width: 495px;
}
.my-order-amount {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.my-order-amount .my-order-amount-buttons {
gap: 8px;
}
.my-order-amount .order-total {
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-md);
color: var(--e-gray-950);
}
.my-order-amount .order-count {
margin-bottom: 4px;
font-size: var(--e-text-small);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-small);
}
.my-restaurants {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
flex: 1;
}
@media (max-width: 1300px) {
.my-order-image {
width: 60px;
height: 60px;
}
}
@media (max-width: 1200px) {
.my-order-amount .my-order-amount-buttons {
gap: 4px;
}
}
@media (max-width: 992px) {
.total-rewards .tab-title {
display: flex;
}
.my-order-inner.list-item .my-order-amount-buttons {
gap: 10px;
}
.account-tabs.bordered-tab .tabing-wrapper .tab-group .acc-tab,
.account-tabs.bordered-tab .tabing-wrapper .tab-group .tab {
flex: 1 1 auto;
}
}
@media (max-width: 767px) {
.fav-rest .res-card {
width: 100%;
}
.my-order-inner.list-item .my-order-amount-buttons {
gap: 7px;
}
.my-ord-content {
flex-direction: column;
align-items: stretch;
}
.rest-other-details .left-content {
flex: 1;
align-items: flex-start;
padding: 0;
}
}
@media (max-width: 576px) {
.my-order-inner.list-item .my-order-amount-buttons .button {
min-width: 105px;
flex: 1;
}
.my-order-image {
width: 44px;
height: 44px;
}
.my-order-detail {
min-width: auto;
}
.my-order-detail .time-stamp {
margin-bottom: 2px;
border-bottom: 1px solid var(--e-gray-200);
padding-bottom: 2px;
}
.one-x {
flex-direction: column;
}
.my-order-inner.list-item .my-order-amount-buttons {
gap: 5px;
width: 100%;
}
.account-order-detail .restaurant-image {
padding: 8px;
width: 60px;
height: 60px;
border-radius: 8px;
}
}
/* My Voucher */
.my-voucher.account-info .tab-title {
padding: 24px 24px 11px;
}
.my-voucher.account-info .badge.badge-xl {
padding: 7px 11px;
border-color: var(--e-gray-100);
background: var(--e-gray-100);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.my-voucher.account-info .badge.badge-xl.active {
background: var(--e-brand-50);
border-color: var(--e-brand-200);
color: var(--e-brand-700);
}
.my-avail-voucher {
display: flex;
padding: 15px;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 16px;
width: 100%;
border-radius: 16px;
border: 1px solid var(--e-gray-200);
margin-bottom: 12px;
}
.my-avail-voucher:last-child {
margin-bottom: 24px;
}
.voucher-filter {
margin-bottom: 24px;
}
.my-avail-voucher .rest-detail .rest-content {
display: flex;
flex-direction: column;
gap: 3px;
}
.my-avail-voucher .rest-detail .rest-content p {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.my-avail-voucher .rest-detail {
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
.my-avail-voucher .rest-detail .rest-img {
width: 72px;
height: 72px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid var(--e-gray-300);
}
.my-avail-voucher .rest-detail .rest-img img {
width: 100%;
height: fit-content;
}
.my-avail-voucher .order-detail .title {
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-md);
color: var(--e-gray-950);
}
.my-avail-voucher .share {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.my-avail-voucher .order-bottom {
border-top: 1px solid var(--Gray-200, #e4e7ec);
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-top: 11px;
}
.my-avail-voucher .order-bottom .order-info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
}
.my-avail-voucher .order-bottom .order-info .order-amount {
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
color: var(--e-gray-950);
}
.my-avail-voucher .order-bottom .order-info .order-time-stamp {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.my-avail-voucher .order-bottom .qr-code {
height: 120px;
width: 120px;
}
.my-avail-voucher .order-bottom .qr-code img,
.my-avail-voucher .order-bottom .qr-code svg {
height: 100%;
width: 100%;
}
.my-avail-voucher .order-bottom .order-info .voucher-badge {
margin-top: 14px;
}
.voucher-badge {
display: flex;
padding: 12px 16px;
align-items: center;
background-color: var(--e-gray-100);
color: var(--e-gray-700);
gap: 6px;
font-size: var(--e-text-small);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-small);
border-radius: 8px;
user-select: none;
}
.voucher-badge.pill {
border-radius: 24px;
}
.voucher-badge.bordered {
border: 1px solid var(--e-gray-100);
background: transparent;
padding: 11px 15px;
}
.voucher-badge.success {
background: var(--e-success);
color: #fff;
}
.voucher-badge.bordered.success svg path {
fill: var(--e-success);
}
.voucher-badge.bordered.success {
border-color: var(--e-success);
color: var(--e-success);
background-color: transparent;
}
.voucher-badge.warning {
background: var(--e-warning);
color: #fff;
}
.voucher-badge.bordered.warning svg path {
fill: var(--e-warning);
}
.voucher-badge.bordered.warning {
border-color: var(--e-warning);
color: var(--e-warning);
background-color: transparent;
}
.voucher-badge.default {
background: var(--Success-500, #475569);
color: #fff;
}
.voucher-badge.bordered.default svg path {
fill: var(--Success-500, #475569);
}
.voucher-badge.bordered.default {
border-color: var(--Success-500, #475569);
color: var(--Success-500, #475569);
background-color: transparent;
}
.voucher-badge.danger {
background: var(--Success-500, #912018);
color: #fff;
}
.voucher-badge.bordered.danger svg path {
fill: var(--Success-500, #912018);
}
.voucher-badge.bordered.danger {
border-color: var(--Success-500, #912018);
color: var(--Success-500, #912018);
background-color: transparent;
}
.voucher-badge.failed {
background: var(--e-error);
color: #fff;
}
.voucher-badge.bordered.failed svg path {
fill: var(--e-error);
}
.voucher-badge.bordered.failed {
border-color: var(--e-error);
color: var(--e-error);
background-color: transparent;
}
.my-vouchers {
display: flex;
align-items: stretch;
gap: 0;
align-self: stretch;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 0;
}
.my-voucher-tab {
display: flex;
padding: 15px;
gap: 16px;
flex-direction: column;
align-items: stretch;
border: 1px solid;
border-radius: 16px;
width: calc(50% - 12px);
margin: 0 24px 24px 0;
}
.my-voucher-tab:nth-child(2n) {
margin-right: 0;
}
.my-voucher-tab.used,
.my-voucher-tab.refunded {
border-color: #e2e8f0;
background: #f2f4f7;
padding: 15px;
}
.my-voucher-tab.used .voucher-badge,
.my-voucher-tab.refunded .voucher-badge,
.my-voucher-tab.expired .voucher-badge,
.my-voucher-tab.cancelled .voucher-badge {
padding: 8px 11px;
}
.my-voucher-tab.used .rest-images .rest-img,
.my-voucher-tab.refunded .rest-images .rest-img {
border: none;
}
.my-voucher-tab.used .rest-content,
.my-voucher-tab.refunded .rest-content {
border-color: #e2e8f0;
}
.my-voucher-tab.expired {
border-color: var(--Warning-100, #fef0c7);
background: var(--Warning-25, #fffcf5);
}
.my-voucher-tab.expired .rest-images .rest-img {
border-color: #fef0c7;
}
.my-voucher-tab.expired .rest-content {
border-color: #fef0c7;
}
.my-voucher-tab.cancelled {
border-color: var(--Warning-100, #fee4e2);
background: var(--Warning-25, #fffbfa);
}
.my-voucher-tab.cancelled .rest-images .rest-img {
border-color: #fee4e2;
}
.my-voucher-tab.cancelled .rest-content {
border-color: #fee4e2;
}
.my-voucher-tab .rest-images {
display: flex;
align-items: center;
justify-content: space-between;
}
.my-voucher-tab .rest-images .rest-img {
width: 64px;
height: 64px;
background: var(--e-white);
border-radius: 12px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 7px;
border: 1px solid;
}
.my-voucher-tab .rest-images .rest-img img {
width: 100%;
height: fit-content;
}
.my-voucher-tab .rest-images .qr-code {
width: 55px;
height: 55px;
background: var(--e-white);
}
.my-voucher-tab .rest-images .qr-code img {
width: 100%;
height: fit-content;
}
.my-voucher-tab .rest-content {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 16px;
border-bottom: 1px solid;
}
.my-voucher-tab .rest-content .rest-title,
.my-voucher-tab .bottom-content .order-id,
.my-voucher-tab .bottom-content .timestamp {
font-size: var(--e-text-small);
font-weight: var(--e-font-medium);
line-height: var(--e-text-lh-small);
color: var(--e-gray-500);
}
.my-voucher-tab .rest-content .rest-detail {
font-size: var(--e-text-md);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-md);
color: var(--e-gray-950);
}
.my-voucher-tab .bottom-content .amount {
font-size: var(--e-text-lg);
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-lg);
color: var(--e-gray-950);
}
.my-voucher-tab .bottom-content {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: auto;
}
.my-voucher-tab .left-content {
display: flex;
flex-direction: column;
}
/* Request Coupan */
.req-coupan-form .user-form-btn {
width: 100%;
padding-top: 3px;
}
.req-coupan-form .user-form-btn .fill-button {
max-width: 363px;
width: 100%;
}
@media screen and (max-width: 520px) {
.req-coupan-form .user-form-btn .fill-button,
.be-influencer-form .user-form-btn .fill-button {
max-width: 100% !important;
}
}
.req-coupan-data .form-group.remark {
margin-top: 7px;
}
.req-coupan-data {
padding-top: 21px;
}
.req-coupan-data .form-label {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
/* Become Influencer */
.be-influencer-form .user-form-btn {
width: 100%;
padding-top: 3px;
}
.be-influencer-form .user-form-btn .fill-button {
max-width: 363px;
width: 100%;
}
.be-influencer-data .form-group.remark {
margin-top: 7px;
}
.be-influencer-data {
padding-top: 21px;
}
.be-influencer-data .form-label {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
/* My Payment */
.my-pay.account-info .tab-title {
padding: 24px 24px 11px;
}
.tab-content.my-payment {
padding-bottom: 12px;
}
.my-payments-tab {
border-radius: 16px;
border: 1px solid var(--e-gray-200);
padding: 12px 20px;
margin-bottom: 12px;
}
.accordion .my-payments-tab {
margin-bottom: 12px;
padding: 13px 16px 10px 20px;
}
.accordion .my-payments-tab .accordion-content {
padding-top: 12px;
}
.accordion .my-payments-tab .accordion-content .accordion-item {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 0;
}
.my-payment-inner .my-payment-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding-bottom: 11px;
border-bottom: 1px solid var(--e-gray-200);
}
.my-payment-inner .my-payment-head .order-id {
display: flex;
align-items: center;
gap: 8px;
}
.my-payment-head .order-id .title {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: #64748b;
}
.my-payment-head .order-status .voucher-badge {
padding: 4px 10px;
}
.my-payment-head .order-status .arrow {
display: flex;
padding: 4px;
align-items: center;
gap: 10px;
border-radius: 4px;
background: var(--e-gray-100);
}
.my-payment-head .order-no {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-700);
padding: 4px 10px;
border-radius: 8px;
border: 1px solid #cbd5e1;
}
.my-payment-inner .my-payment-head .order-status {
display: flex;
align-items: center;
gap: 9px;
}
.my-payment-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.my-payment-content .mode:nth-child(1),
.my-payment-content .mode:nth-child(3) {
text-align: left;
}
.my-payment-content .mode {
width: calc(50% - 6px);
}
.my-payment-content p {
margin-bottom: 4px;
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
color: var(--e-gray-950);
}
.my-payment-content .text {
font-weight: var(--e-font-regular);
color: #64748b;
}
.my-payment-data .bordered-tab .tabing-wrapper .tab-group .tab>a {
color: var(--e-gray-500);
}
.my-payment-data .bordered-tab .tabing-wrapper .tab-group .tab.active>a {
color: var(--e-brand-600);
background: var(--e-white);
border-bottom: 1px solid;
}
.my-payment-content .payto-data {
text-align: right;
}
.accordion .accordion-item .my-payment-inner {
border: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.accordion-item .my-payment-inner .arrow img {
transition: all ease 0.4s;
height: 16px;
width: 16px;
}
.accordion-item.active .my-payment-inner .arrow img {
transform: rotate(180deg);
}
.my-payment-inner:after {
display: none;
}
.title .close-tab {
display: flex;
}
/* Sign up popup */
.country-code {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
width: 100%;
}
.country-code select {
width: 20%;
}
.country-code input {
width: 80%;
}
.or {
display: flex;
align-items: center;
text-align: center;
width: 100%;
padding: 16px 0;
}
.or span {
padding: 0 8px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-600);
text-transform: uppercase;
}
.or::before,
.or::after {
content: "";
flex: 1;
border-top: 1px solid var(--e-gray-200);
}
.sign-up-modal .user-form-btn {
margin: 8px 0;
gap: 16px;
padding: 9px 20px;
}
.social-login-group {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
text-align: center;
}
.social-login-group .button span {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.social-login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--Gray-300, #d0d5dd);
box-shadow: 0px 0px 0px 1px rgba(16, 24, 40, 0.18), 0px -2px 0px 0px rgba(16, 24, 40, 0.05),
0px 1px 2px 0px rgba(16, 24, 40, 0.05);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-grays-700);
}
.sign-up-modal .modal-wrapper .modal-header {
padding: 20px 32px 16px 32px;
position: relative;
}
.sign-up-modal .modal-wrapper .modal-header .modal-title {
font-weight: var(--e-font-bold);
}
.sign-up-modal .modal-wrapper .modal-body.b-0 {
padding: 32px 32px 0;
overflow: initial;
}
.sign-up-modal .modal-wrapper .modal-footer {
padding: 8px 32px 32px;
border: none;
}
.sign-up-modal .custom-select {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
width: 20%;
min-width: 90px;
height: 100%;
background: white;
border: 1px solid #ccc;
padding: 8px 14px;
border-radius: 8px;
}
.custom-select-report {
width: 100%;
}
.custom-select-report .select__control {
background: white;
border: 1px solid #ccc;
padding: 8px 14px;
border-radius: 8px;
}
.select__indicator-separator {
display: none;
}
.custom-select-report .select__option--is-focused.select__option--is-selected {
color: var(--e-gray-900) !important;
}
.custom-select-report .select__menu {
z-index: 3 !important;
}
.custom-select-report .select__value-container,
.custom-select-report .select__input-container,
.custom-select-report .select__indicator {
padding: 0;
}
.sign-up-modal .custom-select-trigger {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
width: 100%;
color: var(--e-gray-500);
}
.sign-up-modal .custom-select-trigger span {
display: flex;
align-items: center;
gap: 8px;
}
.sign-up-modal .custom-options {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: white;
border: 1px solid #ccc;
border-radius: 5px;
max-height: 200px;
overflow-y: auto;
z-index: 99;
display: none;
}
.sign-up-modal .custom-option span {
display: flex;
}
.sign-up-modal .custom-option {
padding: 8px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.sign-up-modal .custom-option img {
margin-right: 10px;
}
.sign-up-modal .custom-option:hover {
background: #f1f1f1;
}
.sign-up-modal .custom-select.open .custom-options {
display: block;
height: 85px;
}
.sign-up-modal .custom-select .chevron {
transition: transform 0.3s ease;
}
.sign-up-modal .custom-select.open .chevron {
transform: rotate(180deg);
}
.sign-up-modal .otp-number {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sign-up-modal .otp-number input {
height: 60px;
width: 60px;
text-align: center;
border-radius: 8px;
border: 1px solid var(--slate-300, #cbd5e1);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.sign-up-modal .otp-number input:focus {
border-color: #072f4a;
}
.otp-main {
display: flex;
gap: 12px;
flex-direction: column;
}
.otp-text {
display: flex;
justify-content: space-between;
align-items: center;
}
.otp-text .resend {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
}
.bottom-text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
color: #475467;
}
.resend-btn span {
color: var(--e-gray-400);
}
/* Coupan offer popup */
.fancybox__content.all-coupans-modal.coupan-offer-modal .modal-body {
max-height: calc(100vh - 200px);
overflow: auto;
}
.coupan-offer-modal .modal-wrapper .modal-header {
padding: 20px 32px 16px;
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
.coupan-offer-modal .modal-wrapper .modal-body {
padding: 24px 32px;
}
.coupan-offer-modal .tabing-wrapper .tab-group {
background: var(--e-white);
border-radius: 100px;
border: 1px solid var(--slate-200, #e2e8f0);
padding: 0;
}
.coupan-offer-modal .tabing-wrapper .tab-header {
border: none;
margin-bottom: 24px;
}
.coupan-offer-modal .tabing-wrapper .tab-group .tab>a {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.coupan-offer-modal .tabing-wrapper .tab-group .tab.active>a {
border-radius: 100px;
background: var(--Gray-800, #182230);
box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
}
.coupan-offer-modal .coupans {
display: flex;
min-height: 160px;
height: 100%;
justify-content: center;
margin-bottom: 24px;
}
.coupan-offer-modal .coupan-code-inner {
position: relative;
height: 100%;
padding: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
border-radius: 10px;
width: 100%;
overflow: hidden;
border-left: 1px dashed rgba(var(--e-secondary-rgb), 0.5);
margin-left: 12px;
border-radius: 0;
/* background: rgb(166,192,254);
background: linear-gradient(349deg, rgba(166,192,254,0.9262298669467787) 0%, rgba(249,225,238,1) 56%, rgba(255,234,246,1) 93%); */
}
.coupan-offer-modal .copy-code-action {
display: block;
position: absolute;
top: 4px;
right: 4px;
z-index: 9;
font-weight: bold;
text-transform: uppercase;
padding: 4px 8px;
}
.coupan-offer-modal .coupan-code-inner .c-code {
color: var(--e-secondary);
font-size: var(--e-display-xs);
line-height: var(--e-display-lh-xs);
font-weight: var(--e-font-semibold);
text-transform: uppercase;
font-family: var(--e-obviously-font);
}
.coupan-offer-modal .coupan-code-inner .c-code-offer {
color: var(--e-primary);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.coupan-offer-modal .coupan-code-inner .c-code-details {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(var(--e-secondary-rgb), 0.5);
width: 100%;
}
.coupan-offer-modal .coupan-code-main .coupan-title {
transform: rotate(270deg);
position: absolute;
left: -14px;
}
.coupan-offer-modal .coupan-code-main:before {
content: "";
display: block;
width: 40px;
height: calc(100% - 32px);
background: var(--e-brand-600);
position: absolute;
left: 12px;
top: 16px;
border-radius: 4px;
}
.coupan-offer-modal .coupan-code-main {
display: flex;
align-items: center;
justify-content: center;
padding: 25px 25px 25px 50px;
/* background: rgb(166,192,254); */
/* background: linear-gradient(349deg, rgba(166,192,254,0.9262298669467787) 0%, rgba(249,225,238,1) 56%, rgba(255,234,246,1) 93%); */
position: relative;
width: 100%;
/* border-radius: 7px; */
background-image: url("../../src/assets/images/TopBar.svg"),
url("../../src/assets/images/bottomBar.svg");
background-repeat: repeat-x;
background-size: 5%;
background-position: top left, bottom left;
border-left: 1px solid #a1ce9d;
border-right: 1px solid #a1ce9d;
}
/* .coupan-offer-modal .coupan-code-main.green {
background: rgb(166,192,254);
background: linear-gradient(349deg, rgba(166,192,254,0.9262298669467787) 0%, rgba(249,225,238,1) 56%, rgba(255,234,246,1) 93%);
}
.coupan-offer-modal .coupan-code-main.white {
background: rgb(166,192,254);
background: linear-gradient(349deg, rgba(166,192,254,0.9262298669467787) 0%, rgba(249,225,238,1) 56%, rgba(255,234,246,1) 93%);
} */
.coupan-offer-modal .about-offer {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 12px;
margin-bottom: 12px;
}
.coupan-offer-modal .validity {
display: flex;
flex-direction: column;
gap: 8px;
}
.coupan-offer-modal .title {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
font-weight: var(--e-font-medium);
}
.coupan-offer-modal .coupans .title {
color: var(--e-white);
font-family: var(--e-obviously-font);
}
.coupan-offer-modal .text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
}
.coupan-offer-modal .validity .text {
list-style: disc;
padding-left: 25px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.coupan-offer-modal .validity .text li {
color: var(--e-gray-800);
}
.coupan-offer-modal .text span {
color: var(--e-brand-700);
font-weight: var(--e-font-medium);
}
.coupan-offer-modal .how-to-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.coupan-offer-modal .how-to-content .order-instructions ol {
list-style: decimal;
padding-left: 24px;
}
.coupan-offer-modal .how-to-content .order-instructions ol li {
margin-bottom: 5px;
}
.coupan-offer-modal .how-to-content .order-instructions ol li:last-child {
margin-bottom: 0;
}
.coupan-offer-modal .inner-content:not(:last-child) {
border-bottom: 1px solid var(--e-gray-200);
padding-bottom: 20px;
}
.coupan-offer-modal .modal-footer .coupan-btns {
display: flex;
align-items: stretch;
gap: 24px;
}
.coupan-offer-modal .modal-footer .coupan-btns .button.redeem {
flex: 1;
}
.coupan-offer-modal .modal-footer .coupan-btns .button.report {
width: 100%;
}
.coupan-offer-modal .coupan-code-main.white+.copy-code {
background-image: url(../../src/assets/images/green-coupan-copy.svg);
}
.coupan-offer-modal .coupan-code-main.white .coupan-code-inner .code {
color: var(--e-brand-700);
}
.coupan-offer-modal .coupan-code-main.white .title {
color: var(--e-white);
}
.coupan-offer-modal .coupan-code-main.white .coupan-code-inner {
border-color: var(--e-brand-700);
}
/* Earn More Rewards Popup */
.earn-reward-modal .modal-title {
color: var(--e-gray-800);
}
.earn-reward-modal .modal-header {
padding: 20px 32px 16px;
}
.earn-reward-modal .earn-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
align-self: stretch;
padding: 24px 32px;
}
.earn-reward-modal .earn-block {
display: flex;
align-items: stretch;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--e-gray-200);
}
.earn-reward-modal .earn-block .image {
display: flex;
height: auto;
padding: 0px 30px;
align-items: center;
gap: 10px;
border-radius: 16px 0px 0px 16px;
background: var(--Orange-50, #fef6ee);
}
.earn-reward-modal .earn-block .right-content {
display: flex;
padding: 18px 16px;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
gap: 10px;
}
.earn-reward-modal .earn-block .right-content .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
max-width: 228px;
width: 100%;
}
.earn-reward-modal .earn-block .right-content .points {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.earn-reward-modal .earn-block .right-content .content .title {
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.earn-reward-modal .earn-block .right-content .content .text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.earn-reward-modal .earn-block .right-content .points .text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
color: var(--e-gray-400);
}
.earn-reward-modal .earn-btn .fill-button span {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
/* Report us Popup */
.report-us-modal .SumoSelect {
width: 100%;
}
.report-us-modal .SumoSelect>.CaptionCont {
border-radius: 8px;
border: 1px solid var(--e-gray-300);
background: var(--e-white);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-900);
padding: 9px 14px;
width: 100%;
}
.report-us-modal .textarea-group #chars {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.report-us-modal .textarea-group textarea::placeholder,
.report-us-modal input::placeholder,
.report-us-modal .SumoSelect>.CaptionCont>span {
color: var(--e-gray-500);
}
/* Book a Table Popup */
.book-table-modal .modal-wrapper .modal-header {
padding: 20px 32px 16px;
}
.book-table-modal .up-rest.no-bg {
border-bottom: 1px solid var(--e-gray-100);
}
.book-table-modal .up-rest .up-detail .rst-name {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
align-self: stretch;
}
.book-table-modal .modal-wrapper .up-rest.no-bg .up-detail .rst-name .title {
color: var(--e-gray-800);
text-transform: capitalize;
}
.book-table-modal .modal-wrapper .up-rest.no-bg .up-detail .rst-name .info {
color: var(--e-gray-600);
}
.book-table-modal .custom-selection-box .box-heading {
border: none;
}
.book-table-modal .custom-selection-box .box-penal .penal-group {
justify-content: start;
gap: 12px;
}
.book-table-modal .custom-selection-box .box-penal .penal-group .form__checkbox-group,
.book-table-modal .custom-selection-box .box-penal .penal-group .form__radio-group {
max-width: calc(25% - 9px);
width: 100%;
}
.book-table-modal .form__checkbox-group .checkbox-label .text-value,
.book-table-modal .form__radio-group .checkbox-label .text-value {
margin: 0 auto;
color: var(--slate-500, #64748b);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
}
.book-table-modal .form__checkbox-group input[type="checkbox"]:disabled+.checkbox-label {
pointer-events: none;
opacity: 0.6;
}
.book-table-modal .form__checkbox-group input[type="checkbox"]:checked+.checkbox-label {
background: var(--e-brand-50);
border-color: var(--e-brand-300);
}
.book-table-modal .form__checkbox-group input[type="checkbox"]:checked+.checkbox-label span.text-value {
color: var(--e-brand-600);
}
.book-table-modal .select-day.custom-selection-box {
border-bottom: 1px solid var(--e-gray-100);
}
.book-table-modal .select-time .inner-box-content {
display: flex;
gap: 8px;
align-items: center;
}
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .form__checkbox-group {
width: calc(20% - 10px);
}
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .checkbox-label {
padding: 8px 20px;
}
.book-table-modal .select-time .form__checkbox-group .checkbox-label .text {
font-weight: var(--e-font-medium);
}
.book-table-modal .custom-selection-box .box-heading .label-group {
gap: 12px;
}
.book-table-modal .form__radio-group input[type="radio"]:disabled+.checkbox-label {
cursor: not-allowed;
border-color: var(--e-slate-200);
}
.book-table-modal .form__radio-group input[type="radio"]:disabled+.checkbox-label span {
color: var(--e-gray-400);
}
.book-table-modal .form__radio-group input[type="radio"]:checked+.checkbox-label {
background: var(--e-brand-50);
border-color: var(--e-brand-300);
}
.book-table-modal .form__radio-group input[type="radio"]:checked+.checkbox-label span {
color: var(--e-brand-700);
}
.book-table-modal .form__checkbox-group .checkbox-label,
.book-table-modal .form__radio-group .checkbox-label {
cursor: pointer;
flex-direction: column;
gap: 0;
padding: 6px 14px;
border: 1px solid var(--slate-300, #cbd5e1);
border-radius: 8px;
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.book-table-modal .form__checkbox-group .checkbox-label .text,
.book-table-modal .form__radio-group .checkbox-label .text {
color: var(--e-gray-700);
font-size: var(--e-text-small);
font-weight: var(--e-font-semibold);
text-align: center;
}
.book-table-modal .custom-selection-box.select-time .box-heading {
padding-bottom: 16px;
}
.book-table-modal .custom-selection-box.select-time .form__radio-group .checkbox-label .text,
.book-table-modal .custom-selection-box.select-time .form__radio-group .checkbox-label .text {
font-weight: var(--e-font-regular);
white-space: nowrap;
}
.book-table-modal .form__radio-group .checkbox-label:hover,
.book-table-modal .seating .SumoSelect>.CaptionCont:hover {
background: var(--e-gray-50);
}
.book-table-modal .cook-instruction .form-label {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
color: var(--e-gray-800);
}
.book-table-modal .people-count .text,
.seating .text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-gray-800);
}
.book-table-modal .seating .preference .SumoSelect>.CaptionCont * {
cursor: pointer;
color: var(--e-gray-700);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
}
.book-table-modal .seating .preference .SumoSelect>.optWrapper>.options li label {
cursor: pointer;
color: var(--e-gray-700);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-medium);
}
.book-table-modal .seating .SumoSelect>.CaptionCont {
border-radius: 8px;
border: 1px solid var(--e-gray-300);
background: var(--e-white);
padding: 10px 14px;
cursor: pointer;
}
.book-table-modal .seating .preference .SumoSelect>.optWrapper>.options li.opt {
padding: 6px 14px;
}
.book-table-modal .seating .SumoSelect>.CaptionCont>label>i {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3E%3Cpath d="M5 7.5L10 12.5L15 7.5" stroke="%23344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.vou-banner-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
cursor: pointer;
}
.vou-banner-image .default-image {
object-fit: contain !important;
}
.vou-banner {
background-image: url("../../src/assets/images/event-voucher-bg.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
aspect-ratio: 1 / 0.52616;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
}
.vou-banner .fill-button.dark {
background: var(--e-gray-950);
min-width: 134px;
}
.vou-banner .fill-button.dark:before {
background: linear-gradient(var(--e-gray-950), var(--e-gray-950)) padding-box,
linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) border-box;
}
.vou-banner .fill-button.dark:hover,
.vou-banner .fill-button.dark:focus {
outline: none;
border: none;
color: var(--e-white);
background: var(--e-gray-700);
}
.vou-banner .fill-button.dark:hover:before,
.vou-banner .fill-button.dark:focus:before {
background: linear-gradient(var(--e-gray-700), var(--e-gray-700)) padding-box,
linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) border-box;
}
.sec-food-category .vou-banner .content .img {
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.sec-food-category .vou-banner .content .img img {
object-fit: contain;
}
.sec-food-category .vou-banner .content .text {
padding: 0 8px;
display: inline-flex;
align-items: flex-start;
gap: 4px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
color: var(--e-gray-800);
}
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .form__radio-group {
max-width: calc(20% - 10px);
}
.book-table-modal.update .modal-wrapper .modal-header .modal-title {
color: var(--e-gray-800);
}
.book-table-modal.update .textarea-group #chars {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.book-table-modal .SumoSelect>.optWrapper>.options li.opt:hover {
background-color: var(--white);
}
.book-table-modal .SumoSelect>.optWrapper>.options li.opt label {
color: var(--e-gray-600);
}
.book-table-modal .SumoSelect>.optWrapper>.options li.opt:hover label {
color: var(--e-brand-600);
}
.order-lists .counter.order-item {
border-bottom: 0;
}
@media (max-width: 991px) {
.book-table-modal .form__checkbox-group .checkbox-label .text-value,
.book-table-modal .form__radio-group .checkbox-label .text-value {
font-size: 12px;
line-height: 14px;
}
}
/* Notification popup */
/*.notify-modal { top: 82px; right: 36px; }*/
.notify-modal .modal-wrapper {
width: 400px;
max-width: 100%;
overflow: hidden;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.notify-modal .notify-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
height: 100%;
padding: 16px 20px;
overflow: hidden;
}
.notify-modal .notify-main .infinite-scroll-component__outerdiv {
width: 100%;
}
.notify-modal .notify-main .infinite-scroll-component {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.notify-modal .notify-head {
display: flex;
gap: 8px;
align-items: center;
padding: 16px 20px;
justify-content: space-between;
}
.notify-modal .notify-head .title {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.notify-modal .notify-body {
padding: 0;
max-height: 400px;
height: 100%;
overflow: auto;
}
.notify-modal .fancybox-close-small {
top: 20px;
}
.notify-modal .modal-title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-700);
}
.notify-modal .notify-block {
display: flex;
padding: 12px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
border-radius: 12px;
border: 1px solid var(--Gray-100, #f2f4f7);
color: var(--e-gray-500);
}
.notify-modal .notify-block.notify-clickable {
cursor: pointer;
color: var(--e-gray-500);
}
.notify-modal .notify-block .notify-inner-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
flex-wrap: wrap;
}
.notify-tag .tag {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
padding: 2px 8px;
gap: 6px;
}
.notify-timestamp .time-text {
font-size: var(--e-text-xs);
line-height: var(--e-text-lh-xs);
font-weight: var(--e-font-medium);
}
.notify-content .text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
margin-bottom: 8px;
}
.notify-tag .tag.success {
border-color: var(--e-brand-200);
background: var(--e-brand-50);
color: var(--e-brand-700);
}
.notify-tag .tag.danger {
border-color: var(--e-orange-200);
background: var(--e-orange-50);
color: var(--e-orange-900);
}
.notify-tag .tag.warning {
border-color: var(--e-yellow-200);
background: var(--e-yellow-50);
color: var(--e-yellow-700);
}
/* Filter popup */
.rest-filter-modal .modal-title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-700);
}
.rest-filter-modal .rest-filter-head {
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rest-filter-modal .tabing-wrapper {
display: flex;
min-height: 300px;
height: 100%;
}
.rest-filter-modal .tabing-wrapper .tab-header {
align-items: flex-start;
flex-direction: column;
max-width: 180px;
width: 100%;
border-right: 1px solid var(--Gray-200, #e4e7ec);
height: auto;
overflow: auto;
}
.rest-filter-modal .tabing-wrapper .tab-group {
border-bottom: none;
}
.rest-filter-modal .tabing-wrapper .tab-group .tab {
flex: 100%;
text-align: left;
}
.rest-filter-modal .tabing-wrapper .tab-group .tab .count {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.rest-filter-modal .tabing-wrapper .tab-group .tab .count span {
border-radius: 16px;
padding: 1px 7px;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-xs);
font-weight: var(--e-font-medium);
background: var(--e-gray-50);
color: var(--e-gray-700);
border: 1px solid transparent;
}
.rest-filter-modal .tabing-wrapper .tab-group .tab>div {
border-bottom: none;
border-left: 4px solid transparent;
padding: 8px 20px;
font-weight: var(--e-font-medium);
color: var(--e-gray-500);
cursor: pointer;
}
.rest-filter-modal .tabing-wrapper .tab-group .tab.active>div {
color: var(--e-brand-600);
border-color: var(--e-brand-600);
border-bottom: none;
font-weight: var(--e-font-semibold);
}
.rest-filter-modal .tabing-wrapper .tab-group .tab:hover>div {
color: var(--e-brand-600);
border-color: var(--e-brand-600);
border-bottom: none;
}
.rest-filter-modal .tabing-wrapper .tab-content .filt-data {
padding: 8px 20px;
max-height: 300px;
overflow: auto;
height: 100%;
}
.rest-filter-modal .tabing-wrapper .form__checkbox-group .checkbox-label {
border: none;
background: transparent;
justify-content: space-between;
padding: 4px 0px;
margin-bottom: 4px;
}
.rest-filter-modal .tabing-wrapper .form__checkbox-group input:checked+.checkbox-label:hover {
background: transparent;
}
.rest-filter-modal .tabing-wrapper .form__checkbox-group .checkbox-label:hover .text {
color: var(--e-brand-600);
}
.rest-filter-modal .tabing-wrapper .form__checkbox-group .checkbox-label .checkbox-icon {
flex: 0 0 auto;
}
.rest-filter-modal .tabing-wrapper .form__checkbox-group .checkbox-label .text {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.rest-filter-modal .filter-btns {
display: flex;
gap: 20px;
}
.rest-filter-modal .filter-btns .button {
flex: 1;
}
.rest-filter-modal .modal-wrapper .modal-footer {
padding: 16px 20px;
}
.rest-filter-modal .fancybox-close-small {
top: 20px;
}
/* Sort By popup */
.sort-by-modal .modal-title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-700);
}
.sort-by-modal.outlets-modal .modal-title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-700);
}
.sort-by-modal.outlets-modal .sort-by-data {
gap: 12px;
}
.sort-by-modal .modal-wrapper {
width: 380px;
}
.sort-by-modal .modal-wrapper .modal-header {
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sort-by-modal .form__radio-group .radio-label {
border: none;
}
.sort-by-modal .sort-by-data {
padding: 8px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sort-by-modal .sort-by-data .sort-radio .radio-label {
padding: 4px 0;
justify-content: space-between;
}
.sort-by-modal .filter-btns {
display: flex;
gap: 20px;
}
.sort-by-modal .filter-btns .button {
flex: 1;
}
.sort-by-modal .modal-wrapper .modal-footer {
padding: 16px 20px;
}
.sort-by-modal .fancybox-close-small {
top: 20px;
}
.sort-by-modal .form__radio-group input+.radio-label:hover,
.sort-by-modal .form__radio-group input:checked+.radio-label:hover {
background-color: transparent;
}
.sort-by-modal .form__radio-group input+.radio-label:hover .text {
color: var(--e-brand-600);
}
.sort-by-modal .form__radio-group .radio-label .text {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.sort-by-modal .form__radio-group .radio-label {
justify-content: space-between;
border: none;
}
/* Price filter popup */
.price-filter-modal .modal-wrapper {
width: 380px;
}
.price-filter-modal .sort-by-price {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 16px;
gap: 8px;
}
.price-filter-modal .sort-by-price.title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.price-filter-modal .form__radio-group .radio-label {
padding: 8px 16px;
border-radius: 100px;
border: 1px solid var(--e-gray-100);
}
.price-filter-modal .form__radio-group input:checked+.radio-label {
border: 1px solid var(--Brand-200, #bcf6bf);
background: var(--Brand-50, #f0fdf0);
}
.price-filter-modal .form__radio-group input:checked+.radio-label:hover {
background: var(--e-brand-100);
border-color: var(--e-brand-200);
color: var(--e-brand-600);
}
.price-filter-modal .filter-btns {
display: flex;
gap: 20px;
}
.price-filter-modal .filter-btns .button {
flex: 1;
}
.price-filter-modal .modal-wrapper .modal-footer {
padding: 16px 20px;
}
.price-filter-modal .fancybox-close-small {
top: 20px;
}
.price-filter-modal .sort-by-price.title .modal-title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-700);
}
.price-filter-modal .form__radio-group .radio-label .text {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
/* Header Location popup */
.headerLocation-modal .modal-wrapper {
width: 360px;
}
.headerLocation-modal .search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.headerLocation-modal .modal-title {
color: var(--e-gray-700);
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-700);
}
.headerLocation-modal .modal-wrapper .modal-header {
display: flex;
align-items: center;
gap: 8px;
}
.headerLocation-modal .search-form .search-input {
border-radius: 8px;
background-repeat: no-repeat;
background-position: center right 16px;
background-size: 20px;
padding: 9px 34px 9px 44px;
}
.headerLocation-modal .modal-wrapper .modal-body {
padding: 24px 20px;
}
/* Outlet popup */
.outlets-modal .modal-wrapper .modal-header {
display: flex;
align-items: center;
gap: 8px;
}
.outlets-modal .modal-wrapper {
width: 300px;
}
.outlets-modal .modal-wrapper .modal-header .title {
display: flex;
align-items: center;
gap: 8px;
}
.outlets-modal .sort-by-data .sort-radio .checkbox-label {
justify-content: space-between;
border: none;
background: transparent !important;
padding: 0;
}
.outlets-modal .sort-by-data .sort-radio .checkbox-label .text {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.outlets-modal .sort-by-data .sort-radio input[type="radio"] {
display: none;
}
.outlets-modal .form__checkbox-group input[type="radio"]:checked+.checkbox-label .text {
color: var(--e-brand-600);
}
.outlets-modal .form__checkbox-group input[type="radio"]:checked+.checkbox-label .checkbox-icon {
background: var(--e-brand-600);
border-color: var(--e-brand-600);
}
.outlets-modal .form__checkbox-group input[type="radio"]:checked+.checkbox-label .checkbox-icon .active-checkmark {
opacity: 1;
visibility: visible;
}
/* Opening Hours popup */
.open-hours-modal .modal-wrapper .modal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
justify-content: space-between;
}
.open-hours-modal .modal-wrapper .modal-header .title {
display: flex;
align-items: center;
gap: 8px;
}
.open-hours-modal .modal-wrapper .modal-header .title+.close-tab {
display: flex;
cursor: pointer;
}
.open-hours-modal .modal-wrapper {
width: 274px;
}
.open-hours-modal .modal-title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-700);
}
.open-hours-modal .fancybox-close-small {
top: 14px;
width: 20px;
height: 20px;
}
.open-hours-modal .open-hours-data {
padding: 8px 16px;
}
.schedule-main {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px 8px;
padding: 4px 0;
}
.schedule-main.current-day:not(.closed) {
color: var(--e-brand-700);
}
.schedule-main span {
min-width: 84px;
}
.open-hours-modal .open-hours-data .schedule-main .day {
font-size: calc(var(--e-text-md) - 1px);
line-height: var(--e-text-lh-md);
}
.open-hours-modal .open-hours-data .schedule-main .time {
text-align: left;
font-size: calc(var(--e-text-md) - 1px);
line-height: var(--e-text-lh-md);
}
.schedule-main .time .closed {
color: var(--e-error);
}
@media screen and (max-width: 991px) {
.open-hours.drop-wrap .drop-option {
width: 251px !important;
}
}
/* Cancel Order popup */
.ord-cancel-modal .modal-wrapper {
width: 660px;
}
.ord-cancel-modal .modal-header {
padding: 16px 24px;
}
.ord-cancel-modal .modal-header .modal-title {
color: var(--e-gray-800);
}
.ord-cancel-modal .ord-cancel-data {
padding: 24px 32px;
}
.ord-cancel-modal .ord-cancel-data p {
color: var(--e-gray-500);
}
.ord-cancel-modal .modal-wrapper .modal-footer {
padding: 32px 32px 16px;
border: 0;
}
.ord-cancel-modal .modal-wrapper .modal-footer .button span {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.ord-cancel-modal .fill-button.dark {
background: var(--e-gray-950);
}
.ord-cancel-modal .fill-button.dark:before {
background: linear-gradient(var(--e-gray-950), var(--e-gray-950)) padding-box,
linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) border-box;
}
.ord-cancel-modal .button.ops {
border: none;
box-shadow: none;
}
.ord-cancel-modal .fancybox-close-small {
top: 20px;
}
/* Order-tracking */
.order-tracking {
padding: 20px 0px;
border-radius: 16px;
background-color: var(--e-white);
}
.tracking-head {
padding: 12px 32px 15px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
align-self: stretch;
flex-wrap: wrap;
}
.tracking-head .tracking-head-details {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
gap: 12px;
}
.tracking-head .tracking-head-details .card-title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.tracking-head .tracking-head-details .card-title .title {
color: var(--e-gray-950);
}
.tracking-head .tracking-head-details .card-title .order-number {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.tracking-head .order-details {
display: flex;
align-items: center;
column-gap: 34px;
row-gap: 8px;
flex-wrap: wrap;
}
.tracking-head .order-details .text span {
color: var(--e-gray-950);
font-weight: var(--e-font-semibold);
}
.tracking-head .tracking-btns {
display: flex;
align-items: center;
gap: 18px;
margin-left: auto;
}
.order-process,
.order-process * {
box-sizing: border-box;
}
.order-process {
background: var(--e-white);
padding: 12px 32px 12px 32px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-self: stretch;
flex-shrink: 0;
position: relative;
}
.order-process-inner {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
justify-content: flex-start;
flex: 1;
position: relative;
}
.order-process-head {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
justify-content: flex-start;
flex-shrink: 0;
position: relative;
}
.order-process-head .title {
color: var(--e-gray-950);
text-align: left;
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-semibold);
position: relative;
align-self: stretch;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 0;
}
.order-process-head .text {
color: var(--e-gray-500);
text-align: left;
position: relative;
align-self: stretch;
}
.order-process .order-status {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
justify-content: flex-start;
align-self: stretch;
flex-shrink: 0;
position: relative;
}
.order-process .order-status-inner {
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
justify-content: center;
align-self: stretch;
flex-shrink: 0;
position: relative;
}
.order-process .order-status-inner svg {
flex-shrink: 0;
width: 20px;
height: 20px;
position: relative;
overflow: visible;
}
.order-process .order-status-inner svg.pick-svg {
max-width: 16px;
}
.order-process .order-status-inner svg.success path {
fill: var(--e-brand-500);
}
.order-process .order-status-inner svg.danger path {
fill: var(--e-error-600);
}
.order-process .order-status-inner .rectangle.success {
background: var(--e-brand-500);
}
.order-process .order-status-inner .rectangle.danger {
background: var(--e-error-600);
}
.order-process .order-status-inner .rectangle {
background: var(--e-gray-200);
border-radius: 100px;
flex: 1;
height: 4px;
position: relative;
}
.ord-received {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
justify-content: flex-start;
align-self: stretch;
flex-shrink: 0;
position: relative;
}
.ord-received .text {
color: var(--e-gray-950);
text-align: left;
font-weight: var(--text-md-semibold-font-weight, 700);
position: relative;
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
}
.ord-received.success .text {
color: var(--e-brand-600);
}
.ord-received.danger .text {
color: var(--e-error-600);
}
.order-tracking .takeaway-details .takeaway-label {
font-size: var(--e-display-sm);
line-height: var(--e-display-lh-sm);
}
.order-tracking .takeaway-details {
padding: 19px 32px 18px 32px;
}
.order-tracking .takeaway-details .bottom-group {
flex-wrap: wrap;
gap: 20px;
}
.order-tracking .takeaway-details .bottom-group .user-form-btn {
flex-wrap: wrap;
}
.order-tracking .menu_iteam-lists {
padding: 0 16px;
}
.order-tracking .menu_iteam-lists .menu_item .item-content {
flex: 1;
}
.order-tracking .menu_iteam-lists .menu_item .res-image {
width: 80px;
height: 80px;
border-radius: 12px;
overflow: hidden;
}
.order-tracking .menu_iteam-lists .menu_item-inner:last-child {
border: none;
}
.order-tracking .menu_iteam-lists .menu_item {
justify-content: space-between;
padding: 11px 4px;
}
.order-tracking .ord-rest-reciept {
display: flex;
padding: 30px 32px 0px 32px;
align-items: flex-start;
gap: 24px;
}
.order-tracking .ord-rest-reciept .left-panel {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
flex: 1 0 0;
border-radius: 16px;
border: 1px solid var(--Gray-100, #f2f4f7);
}
.order-tracking .ord-rest-reciept .right-panel {
display: flex;
max-width: 461px;
width: 100%;
padding-bottom: 16px;
flex-direction: column;
justify-content: center;
align-items: stretch;
flex-shrink: 0;
border-radius: 16px;
border: 1px solid var(--Gray-100, #f2f4f7);
background: var(--white, #fff);
}
.order-tracking .ord-rest-reciept .left-panel .ord-reciept {
display: flex;
padding: 12px 16px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
align-self: stretch;
border-radius: 16px 16px 0px 0px;
border-bottom: 1px solid var(--Gray-200, #e4e7ec);
}
.ord-reciept .title {
color: var(--e-gray-950);
text-align: left;
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-semibold);
}
.order-tracking .menu_iteam-lists .menu_item .item-content .item-text {
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
/* Add this for compatibility */
-webkit-box-orient: vertical;
overflow: hidden;
transition: all 0.5s ease;
font-weight: var(--e-font-regular);
}
.order-tracking .menu_iteam-lists .menu_item .item-content .item-text.expanded {
-webkit-line-clamp: unset;
line-clamp: unset;
}
.order-tracking .menu_iteam-lists .menu_item .item-content .item-text-2 {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-gray-950);
cursor: pointer;
}
.order-tracking .menu_iteam-lists .menu_item .item-content .item-price {
color: var(--e-gray-950);
font-weight: var(--e-font-medium);
}
.ord-rest-price {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.ord-rest-price .badge {
border-radius: 12px;
color: var(--e-gray-950);
padding: 7px 13px;
}
.order-tracking .ord-rest-reciept .right-panel .item-total-main {
display: flex;
padding: 12px 16px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.order-tracking .ord-rest-reciept .right-panel .item-total-main .head {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
}
.order-tracking .ord-rest-reciept .right-panel .item-total-main .head .title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-950);
font-weight: var(--e-font-semibold);
}
.price-structure {
display: flex;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
border-radius: 16px;
background: var(--e-gray-100);
}
.flex-price {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
}
.price-structure .coupan-price .text {
font-weight: var(--e-font-medium);
color: var(--e-brand-600);
}
.price-structure .charges {
display: flex;
flex-direction: column;
gap: 8px;
align-self: stretch;
}
.price-structure .charges .text {
border-bottom: 0.5px dashed;
}
.price-structure .charges .price {
color: var(--e-gray-900);
}
.price-structure .total .text,
.order-tracking .ord-rest-reciept .right-panel .earned-rewards .text {
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.order-tracking .ord-rest-reciept .right-panel .earned-rewards h3,
.order-tracking .ord-rest-reciept .right-panel .earned-rewards .text {
color: var(--e-brand-700);
}
.order-tracking .ord-rest-reciept .right-panel .pay-id-main {
display: flex;
padding: 10px 16px;
flex-direction: column;
align-items: flex-start;
gap: 3px;
align-self: stretch;
}
.order-tracking .ord-rest-reciept .right-panel .pay-id-main .title,
.order-tracking .ord-rest-reciept .right-panel .earned-rewards .title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
}
.order-tracking .ord-rest-reciept .right-panel .earned-rewards {
display: flex;
padding: 10px 16px;
justify-content: space-between;
align-items: center;
align-self: stretch;
margin-top: 12px;
}
@media (max-width: 1300px) {
.coupan-offer-modal .coupan-code-main .coupan-title {
left: -6px;
}
.vou-banner .fill-button.dark {
min-width: fit-content;
}
.sec-food-category .vou-banner .content .img {
width: 120px;
height: 120px;
}
}
@media (max-width: 1024px) {
.sec-food-category .vou-banner {
padding: 0 20px;
}
.sec-food-category .vou-banner .content .img {
width: 100px;
height: 100px;
}
.ord-rest-price .badge {
border-radius: 6px;
padding: 3px 9px;
}
}
@media (max-width: 990px) {
.schedule-main span {
min-width: 73px;
}
.coupan-offer-modal .coupan-code-main .coupan-title {
left: -13px;
}
}
@media (max-width: 767px) {
.book-table-modal .modal-wrapper .modal-header {
padding: 20px 16px 16px;
}
.rest-filter-modal .tabing-wrapper .tab-group .tab>div {
border-radius: 100px;
border: 1.5px solid var(--e-gray-100);
background: var(--e-gray-100);
}
.rest-filter-modal .tabing-wrapper .tab-group .tab.active>div,
.rest-filter-modal .tabing-wrapper .tab-group .tab:hover>div {
border-radius: 100px;
border: 1px solid var(--e-brand-200);
background: var(--e-brand-50);
}
.rest-filter-modal .tabing-wrapper .tab-group .tab .count {
font-weight: var(--e-font-semibold);
}
.tracking-head .tracking-btns {
gap: 8px;
flex-wrap: wrap;
margin: 0;
}
}
@media (max-width: 576px) {
.ord-cancel-modal .modal-wrapper .modal-footer,
.ord-cancel-modal .modal-header,
.ord-cancel-modal .ord-cancel-data {
padding: 16px;
}
.tracking-head {
padding-top: 0;
}
.earn-reward-modal .earn-block .image {
padding: 0px 15px;
}
.select.form-control {
padding-right: 16%;
}
.req-coupan-form .user-form-btn {
justify-content: center !important;
}
.book-table-modal .seating .preference {
width: 150px;
min-width: auto !important;
}
.outlets-modal .form__checkbox-group .checkbox-label {
justify-content: space-between;
}
.be-influencer-form .user-form-btn {
justify-content: center !important;
}
.edit-checkout-modal .modal-wrapper .modal-header {
padding: 20px 50px 16px 16px !important;
}
.coupan-offer-modal .coupan-code-inner {
min-width: 180px;
justify-content: center;
}
.coupan-offer-modal .copy-code-action {
position: relative;
}
.coupan-offer-modal .coupan-code-inner .code {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.coupan-offer-modal .coupan-code-main {
background-size: 20px;
padding: 15px 15px 15px 50px;
}
}
@media (max-width: 380px) {
.coupan-offer-modal .coupan-code-main {
background-size: 18px;
}
}
/* Order Status Popup */
.ord-sts-modal .status-inner {
display: flex;
padding: 32px 32px 24px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 36px;
}
.ord-sts-modal .status-main,
.ord-sts-modal .status-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
}
.ord-sts-modal .status-content .modal-title {
color: var(--e-gray-950);
}
.ord-sts-modal .status-content .text {
color: var(--e-gray-500);
font-weight: var(--e-font-semibold);
}
.ord-sts-modal .status-inner .button {
margin: 16px 0;
}
/* Buy Vouchers pafe */
.buy-vouchers .vou-title .title {
color: var(--e-gray-900);
}
.buy-vouchers .account-order-detail .restaurant-title .title {
color: var(--e-gray-800);
font-size: var(--e-display-xs);
line-height: var(--e-display-lh-xs);
}
.buy-vouchers .vou-head {
padding: 10px 0px 24px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 32px;
flex-wrap: wrap;
}
.buy-vouchers .account-order-detail .restaurant-image {
width: 120px;
height: 120px;
}
.buy-vouchers .vou-head .vou-rest {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
}
.buy-vouchers .vou-head .account-order-detail {
border: none;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 0;
}
.buy-vouchers .vou-head .vou-rest .rest-price {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 12px;
}
.buy-vouchers .vou-head .vou-rest .rest-price-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
.buy-vouchers .vou-head .vou-rest .rest-price-inner .price .title {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
color: var(--e-gray-950);
}
.buy-vouchers .vou-head .vou-rest .rest-price-inner .ord-dtl {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
color: var(--e-brand-600);
text-decoration-line: underline;
}
.buy-vouchers .vou-body .vou-body-inner {
padding: 32px 0 24px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.voucher-card {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.voucher-card .card-head {
display: flex;
gap: 10px;
justify-content: space-between;
align-items: center;
align-self: stretch;
padding: 16px;
border-radius: 16px 16px 0px 0px;
background: var(--e-gray-500);
}
.voucher-card .card-head .left-content {
display: flex;
align-items: center;
gap: 16px;
}
.voucher-card .card-head .right-content {
display: flex;
flex: 0 0 auto;
}
.voucher-card .card-head .right-content .text {
text-align: right;
font-weight: var(--e-font-medium);
color: var(--e-gray-300);
}
.voucher-card .card-body {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
padding: 16px;
border-radius: 0px 0px 16px 16px;
border-right: 1px solid var(--e-gray-300);
border-bottom: 1px solid var(--e-gray-300);
border-left: 1px solid var(--e-gray-300);
background: var(--e-gray-100);
}
.voucher-card .card-body .price {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.voucher-card .card-body .price .price-detail {
display: flex;
align-items: center;
gap: 8px;
}
.voucher-card .card-head .left-content .restaurant-image {
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: 12px;
background: var(--white, #fff);
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
}
.voucher-card .card-head .left-content .restaurant-image img {
width: 100%;
height: auto;
}
.voucher-card .card-head .left-content .restaurant-title .title {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
color: var(--e-white);
}
.voucher-card .card-body .price .text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
color: var(--e-gray-950);
font-weight: var(--e-font-medium);
}
.voucher-card .card-body .price-detail .normal-price {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
color: var(--e-gray-950);
font-weight: var(--e-font-semibold);
}
.voucher-card .card-body .price-detail .cancelled-price {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
color: var(--e-gray-600);
font-weight: var(--e-font-medium);
text-decoration: line-through;
}
.voucher-card .card-body .ar-button-group {
border-radius: 8px;
border: 1px solid var(--e-gray-300);
background: var(--e-gray-50);
gap: 0;
}
.voucher-card .ar-button-group .btn:hover {
background: var(--e-gray-500);
}
.voucher-card.purple .card-head,
.voucher-card.purple .ar-button-group .btn:hover {
background: var(--e-purple-800);
}
.voucher-card.purple .card-body {
background: var(--e-purple-100);
border-color: var(--e-violet-300);
}
.voucher-card.red .card-head,
.voucher-card.red .ar-button-group .btn:hover {
background: var(--e-error-700);
}
.voucher-card.red .card-body {
background: var(--e-error-50);
border-color: var(--e-error-200);
}
.voucher-card.fuchsia .card-head,
.voucher-card.fuchsia .ar-button-group .btn:hover {
background: var(--e-fuchsia-800);
}
.voucher-card.fuchsia .card-body {
background: var(--e-fuchsia-50);
border-color: var(--e-fuchsia-200);
}
.voucher-card .ar-button-group .input {
color: var(--e-gray-950);
}
@media (max-width: 767px) {
.voucher-card .card-head .left-content .restaurant-image {
display: none;
}
.voucher-card .card-head {
flex-wrap: wrap;
}
}
/* Looking ofr Card */
.look-card {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 1px;
gap: 16px;
padding: 12px 12px 16px 12px;
border-radius: 16px;
border: 1px solid var(--e-gray-200);
}
.look-card .look-image {
width: 100%;
height: 160px;
overflow: hidden;
border-radius: 12px;
}
.look-card .look-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
.look-card .looking-label {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-black);
font-weight: 700;
width: 100%;
padding: 0 12px;
}
.swiper-category-look {
overflow: hidden;
}
.swiper-category.swiper-offer-banner .title-group+.container {
padding: 0;
}
/* Popular locations */
.populer-locations .badges-group {
flex-wrap: wrap;
}
.populer-locations .badge {
font-size: var(--e-text-md);
font-weight: 600;
line-height: var(--e-text-lh-md);
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--e-slate-300);
background: var(--e-white);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
/* Order Details Popup */
.ord-dtl-modal .modal-header {
padding: 20px 24px 16px;
}
.ord-dtl-modal .modal-header .modal-title {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
color: var(--e-gray-800);
}
.ord-dtl-modal .modal-wrapper .modal-body,
.ord-dtl-modal .modal-wrapper .modal-footer {
padding: 20px 24px;
}
.ord-dtl-modal .price-structure {
background: none;
padding: 0;
}
.ord-dtl-modal .price-structure .charges .text,
.ord-dtl-modal .price-structure .charges .price,
.ord-dtl-modal .price-structure .coupan-price .text {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
}
.book-res-detail .book-res-detail-inner {
flex-wrap: wrap;
}
.book-res-detail .sticky-book-detail {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
z-index: 11;
flex: 1 1 100%;
transition: all ease 0.3s;
}
.book-res-detail .left-bar {
position: sticky;
top: 60px;
flex: 1;
}
.book-res-detail .tab-group {
padding-left: 0;
padding-bottom: 12px;
padding-top: 12px;
margin: 0;
}
.book-res-detail .tab-group .title {
padding: 16px 22px 12px 23px;
color: var(--e-gray-500);
font-weight: var(--e-font-semibold);
}
.book-res-detail .tab-group .title.active {
border-bottom: 1px solid;
color: var(--e-brand-700);
}
.book-res-detail .left-bar-inner {
border-radius: 16px;
border: 1px solid var(--e-gray-200);
background: var(--e-white);
padding: 20px;
}
.book-res-detail .right-bar {
display: flex;
flex-direction: column;
gap: 0;
width: calc(100% - 420px);
}
.book-res-detail .right-bar>div {
margin-bottom: 26px;
}
.offers-title .title-main {
margin-bottom: 0;
color: var(--e-gray-800);
}
.offers-title {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
@media (max-width: 767px) {
.offers-title .title-main {
margin-bottom: 18px;
}
}
@media (max-width: 576px) {
.book-res-detail .tab-group .title {
padding: 16px 14px 12px 14px;
}
.offers-title .title-main {
margin-bottom: 0;
}
}
.rest-reach-info .rest-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.rest-reach-info .info-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 100%;
}
.rest-reach-info .info-block .schedule-main {
justify-content: flex-start;
}
.rest-reach-info .info-block .schedule-main .day {
min-width: 85px;
}
.rest-reach-info .info-block .title {
display: flex;
align-items: center;
gap: 12px;
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
/* .rest-reviews-head .fill-button {
background: var(--e-brand-50);
border-radius: 10px;
}
.rest-reviews-head .fill-button span {
color: var(--e-brand-700);
}
.rest-reviews-head .fill-button:before {
background: var(--e-brand-50);
border-radius: 10px;
border: 1px solid var(--e-brand-300);
} */
.rest-reviews-content .content-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.rest-reviews-content .content-inner .container:has(.empty) {
padding: 0;
}
.rest-reviews-content .button-group {
margin-top: 24px;
}
.rest-reviews-content .button-group .button {
width: 200px;
}
.rest-reviews-content .info-block {
border-radius: 16px;
border: 1px solid var(--slate-200, #e2e8f0);
background: var(--white, #fff);
display: flex;
padding: 18px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: 100%;
}
.rest-reviews-content .info-block .title {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
gap: 12px;
}
.rest-reviews-content .info-block .title .text {
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.rest-reviews-content .info-block .title .stars {
display: flex;
align-items: center;
gap: 4px;
color: var(--e-success);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
min-width: 37.27px;
}
.review-rest-modal .modal-header {
padding: 20px 32px 16px;
}
.review-rest-modal .review-rest-data {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.review-rest-modal .rest-detail .inner {
display: flex;
align-items: center;
gap: 16px;
}
.review-rest-modal .rest-image {
width: 76px;
height: 76px;
border-radius: 16px;
overflow: hidden;
}
.review-rest-modal .rest-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
.review-rest-modal .rest-data .title {
font-size: var(--e-text-lg);
line-height: var(--e-text-lh-lg);
color: var(--e-gray-950);
text-transform: capitalize;
}
.review-rest-modal .rest-data {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1 0 0;
}
.review-rest-data.bg .rest-detail .top-inner {
border-color: #94a3b8;
}
.review-rest-data.bg .rest-detail .bottom-inner .order-item {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 5px;
}
.review-smiley .title .text,
.service-type .title .text,
.cook-instruct .title .text {
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.review-smiley {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.review-smiley .category-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.smiley-block .smileys {
display: flex;
gap: 10px;
}
.smiley-block {
display: flex;
padding: 16px 20px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 16px;
border: 1px solid var(--e-slate-300);
background: var(--e-white);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.smiley-block .title {
color: var(--e-gray-700);
}
.smiley-block .smileys label {
cursor: pointer;
display: flex;
position: relative;
}
.smiley-block .smileys input[type="round"] {
display: none;
}
.smiley-block .smileys svg {
width: 32px;
height: 32px;
transition: transform 0.2s ease;
}
.smiley-block .smileys label.rate-one input[type="radio"]:checked+svg path,
.smiley-block .smileys label.rate-one:hover input[type="radio"]+svg path {
fill: #c1002d;
}
.smiley-block .smileys label.rate-one input[type="radio"]:checked+svg path:first-child,
.smiley-block .smileys label.rate-one:hover input[type="radio"]+svg path:first-child,
.smiley-block .smileys label.rate-one input[type="radio"]:checked+svg path:nth-child(8),
.smiley-block .smileys label.rate-one:hover input[type="radio"]+svg path:nth-child(8) {
fill: #ff3636;
}
.smiley-block .smileys label.rate-two input[type="radio"]:checked+svg path,
.smiley-block .smileys label.rate-two:hover input[type="radio"]+svg path {
fill: #fa612b;
}
.smiley-block .smileys label.rate-two input[type="radio"]:checked+svg path:first-child,
.smiley-block .smileys label.rate-two:hover input[type="radio"]+svg path:first-child {
fill: #ffab3d;
}
.smiley-block .smileys label.rate-three input[type="radio"]:checked+svg path,
.smiley-block .smileys label.rate-three:hover input[type="radio"]+svg path {
fill: #ffac1c;
}
.smiley-block .smileys label.rate-three input[type="radio"]:checked+svg path:first-child,
.smiley-block .smileys label.rate-three:hover input[type="radio"]+svg path:first-child {
fill: #fff540;
}
.smiley-block .smileys label.rate-four input[type="radio"]:checked+svg path,
.smiley-block .smileys label.rate-four:hover input[type="radio"]+svg path {
fill: #84ba0f;
}
.smiley-block .smileys label.rate-four input[type="radio"]:checked+svg path:first-child,
.smiley-block .smileys label.rate-four:hover input[type="radio"]+svg path:first-child {
fill: #c6d831;
}
.smiley-block .smileys label.rate-five input[type="radio"]:checked+svg path,
.smiley-block .smileys label.rate-five:hover input[type="radio"]+svg path {
fill: #00993d;
}
.smiley-block .smileys label.rate-five input[type="radio"]:checked+svg path:first-child,
.smiley-block .smileys label.rate-five:hover input[type="radio"]+svg path:first-child {
fill: #5ac54f;
}
.smiley-block .smileys label.rate-five input[type="radio"]:checked+svg path:nth-child(4),
.smiley-block .smileys label.rate-five:hover input[type="radio"]+svg path:nth-child(4) {
fill: #ffffff;
}
.review-rest-data .service-type {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.review-rest-data .form__checkbox-group .checkbox-label {
border-radius: 100px;
border: 1.5px solid var(--e-gray-100);
background: var(--e-gray-100);
padding: 3px 10px;
}
.review-rest-data .form__checkbox-group .checkbox-label .text {
font-weight: var(--e-font-semibold);
}
.review-rest-data .custom-selection-box .box-penal .penal-group .form__checkbox-group {
width: auto;
}
.review-rest-data .custom-selection-box .box-penal .penal-group {
gap: 12px;
justify-content: flex-start;
}
.review-rest-data .form__checkbox-group input[type="checkbox"]:checked+.checkbox-label,
.review-rest-data .form__checkbox-group:hover .checkbox-label {
background: var(--e-brand-50);
border: 1px solid var(--e-brand-200);
}
.review-rest-data .form__checkbox-group input[type="checkbox"]:checked+.checkbox-label span,
.review-rest-data .form__checkbox-group:hover .checkbox-label span {
color: var(--e-brand-700);
}
.cook-instruct {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
flex: 1 0 0;
align-self: stretch;
}
.cook-instruct .title {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
}
.cook-instruct .generate {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
.cook-instruct .user-form-btn .fill-button {
padding: 4px 20px;
border-radius: 100px;
min-width: max-content;
}
.cook-instruct .user-form-btn .fill-button span {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
@media (max-width: 991px) {
.rest-reviews-content .info-block {
gap: 5px;
padding: 16px;
}
}
.rest-map {
overflow: hidden;
border-radius: 12px;
height: 120px;
width: 100%;
position: relative;
}
.rest-map iframe {
max-width: 100%;
}
.past-event-lists {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 24px;
}
.past-event-lists .event-card {
width: calc(33.33% - 16px);
}
.past-event-lists .event-card .card-image {
display: block;
border-radius: 16px;
overflow: hidden;
filter: grayscale(1);
transform: scale(1);
transition: transform 0.4s ease;
}
.past-event-lists .event-card .card-image:hover {
transform: scale(0.98);
transition: transform 0.4s ease;
}
.past-event-lists .event-card .card-image img {
max-width: 100%;
width: 100%;
height: auto;
aspect-ratio: 1 / 0.5251;
}
.menu-image {
position: relative;
border-radius: 8px;
overflow: hidden;
}
.menu-image img {
width: 100%;
object-fit: cover;
}
.menu-image .img-count {
display: flex;
padding: 4px 12px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
position: absolute;
right: 7px;
top: 10.442px;
border-radius: 16px;
background: var(--e-white);
color: var(--e-black);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-semibold);
}
.menu-image .menu-title {
display: flex;
width: 100%;
height: 44px;
padding: 8px 24px 8px 10px;
align-items: center;
position: absolute;
right: 0;
bottom: 0;
background: linear-gradient(357deg, rgba(0, 0, 0, 0.9) 29.85%, rgba(0, 0, 0, 0) 96.3%);
color: var(--e-white);
font-size: var(--e-text-small);
font-style: normal;
font-weight: var(--e-font-semibold);
line-height: var(--e-text-lh-small);
}
.menucard-slider {
overflow: hidden;
}
.up-rest {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 24px;
background: linear-gradient(45deg, #101828 0%, #475467 100%);
backdrop-filter: blur(40px);
}
.up-rest .rest-logo {
display: flex;
width: 100px;
height: 100px;
padding: 7px 9px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 50px;
background: var(--e-white);
box-shadow: 0px 4.8px 6.4px -1.6px rgba(16, 24, 40, 0.08),
0px 1.6px 2.4px -0.8px rgba(16, 24, 40, 0.03);
}
.up-rest .up-detail span {
color: var(--e-white);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.up-rest .up-detail {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.up-rest .up-detail .rst-name .title {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-semibold);
color: var(--e-white);
}
.up-rest .up-detail .rst-name .info {
display: none;
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-regular);
color: var(--e-white);
}
.up-rest .up-booking {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.up-rest .up-booking .info {
display: flex;
align-items: center;
gap: 12px;
align-self: stretch;
}
.up-rest .up-booking .info .content {
display: flex;
align-items: center;
gap: 8px;
flex: 1 0 0;
}
.book-table-modal .people-count.order-lists {
display: flex;
padding: 16px 32px;
justify-content: space-between;
align-items: center;
}
.up-rest .up-booking .info .content>svg rect {
fill: var(--e-white);
}
.book-table-modal .seating {
display: flex;
padding: 16px 32px;
justify-content: space-between;
align-items: center;
}
.book-table-modal .seating .preference {
min-width: 200px;
}
.up-rest.no-bg {
background: transparent;
}
.up-rest.no-bg .rest-logo {
display: none;
}
.up-rest.no-bg .up-detail span {
color: var(--e-gray-700);
}
.up-rest.no-bg .up-detail .content span {
color: var(--e-gray-600);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.up-rest.no-bg .up-detail .rst-name .title {
color: var(--e-gray-700);
}
.up-rest.no-bg .up-booking .info .content svg path {
fill: var(--e-gray-700);
}
.up-rest.no-bg .up-detail .rst-name .info {
display: block;
color: var(--e-gray-700);
}
@media (max-width: 991px) {
.menu-image .img-count {
padding: 2px 8px;
}
.menu-image .menu-title {
height: 30px;
}
}
@media (max-width: 767px) {
.past-event-lists .event-card {
width: calc(50% - 12px);
}
.book-table-modal .people-count.order-lists {
padding: 16px 24px;
}
}
@media (max-width: 576px) {
.past-event-lists {
gap: 12px;
}
.book-table-modal .people-count.order-lists {
padding: 16px;
}
.past-event-lists .event-card {
width: calc(50% - 6px);
}
.past-event-lists .event-card .card-image,
.swiper-offer-banner .swiper-slide,
.swiper-banner .swiper-slide {
border-radius: 12px;
}
.book-table-modal .seating {
padding: 16px;
gap: 8px;
}
.rest-reviews-content .info-block .title .stars {
min-width: 36.09px;
}
}
/* Genral Media
==================== */
@media (max-width: 1300px) {
.order-tracking .takeaway-details .bottom-group .user-form-btn {
gap: 20px;
}
.order-tracking .takeaway-details .bottom-group .user-form-btn .button {
min-width: 140px;
}
.buy-vouchers .account-order-detail .restaurant-image {
width: 100px;
height: 100px;
}
.book-res-detail .right-bar {
width: calc(100% - 380px);
}
}
@media (max-width: 1200px) {
.my-order-content {
gap: 16px;
}
}
@media (max-width: 1120px) {
.order-tracking .ord-rest-reciept .right-panel,
.order-tracking .ord-rest-reciept .left-panel {
max-width: 50%;
width: 100%;
}
.book-res-detail .right-bar {
width: calc(100% - 360px);
}
}
@media screen and (max-width: 1024px) {
.smiley-block .smileys svg {
width: 27px;
height: 27px;
}
}
@media (max-width: 992px) {
.order-tracking .ord-rest-reciept {
flex-direction: column;
}
.order-tracking .ord-rest-reciept .right-panel,
.order-tracking .ord-rest-reciept .left-panel {
max-width: 100%;
}
.order-tracking .takeaway-details .bottom-group .user-form-btn {
gap: 15px;
}
.order-tracking .takeaway-details .bottom-group .user-form-btn .button {
min-width: 120px;
}
.buy-vouchers .account-order-detail .restaurant-image {
width: 80px;
height: 80px;
}
.tab-collapse {
display: flex;
padding: 0;
}
.account-tab.collapsed .tab-title .title {
flex: 1;
text-align: center;
}
.account-tab.collapsed+.account-info .tab-collapse svg {
transform: rotate(180deg);
}
.account-tab.expanded {
transform: translateX(-350px);
}
.account-tab.collapsed {
transform: translateX(0px);
top: 0;
left: 0;
}
.account-tab {
display: block !important;
position: fixed;
left: 0;
top: 0;
z-index: 1111;
transform: translateX(-350px);
transition: all ease 300ms;
overflow: hidden;
height: 100%;
}
.account-tabs .tab-content {
padding: 0 12px;
}
.inner-collapse {
display: flex;
background-color: transparent;
border: none;
}
.tab-inner {
height: 100%;
overflow: auto;
}
.my-voucher-tab {
width: 100%;
margin-right: 0;
}
}
@media screen and (max-width: 767px) {
.form-group.half-row {
width: 100%;
}
.my-order-content {
flex-direction: column;
gap: 12px;
}
.my-order-amount {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.my-payments-tab {
padding: 12px;
}
.my-payment-content {
flex-direction: column;
align-items: flex-start;
}
.my-payment-content .payto-data {
text-align: left;
}
.notify-modal .fancybox-close-small {
top: 15px;
}
.rest-filter-modal .tabing-wrapper {
flex-direction: column;
}
.rest-filter-modal .tabing-wrapper .tab-header {
max-width: 400px;
padding: 16px !important;
border-bottom: 1px solid var(--Gray-200, #e4e7ec);
border-right: none;
}
.rest-filter-modal .tabing-wrapper .tab-group {
flex-direction: row;
width: 100%;
max-width: 100%;
overflow: auto;
flex-wrap: nowrap;
padding-bottom: 16px;
gap: 12px;
}
.rest-filter-modal .fancybox-close-small {
top: 15px;
}
.rest-filter-modal .tabing-wrapper .tab-group .tab {
flex: 0 0 auto !important;
}
.rest-filter-modal .tabing-wrapper .tab-content .filt-data {
max-height: 260px;
}
.rest-filter-modal .modal-wrapper {
width: 400px;
}
.rest-filter-modal .tabing-wrapper .tab-group .tab>a {
padding: 4px 10px;
border-radius: 100px;
border: 1.5px solid var(--Gray-100, #f2f4f7);
background: var(--Gray-100, #f2f4f7);
color: var(--Gray-500, #667085);
}
.rest-filter-modal .tabing-wrapper .tab-group .tab.active>a {
border: 1px solid var(--Brand-200, #bcf6bf);
background: var(--Brand-50, #f0fdf0);
color: var(--Brand-700, var(--Brand-Green, #00900e));
}
.tracking-head,
.order-process,
.order-tracking .takeaway-details,
.order-tracking .ord-rest-reciept {
padding-left: 16px;
padding-right: 16px;
}
.ord-sts-modal .status-main svg {
height: 60px;
width: 60px;
}
.ord-sts-modal .status-inner {
gap: 18px;
padding: 20px;
}
.ord-sts-modal .status-inner .button {
margin: 10px 0;
}
.buy-vouchers .vou-head,
.buy-vouchers .vou-body .vou-body-inner {
padding-left: 0px;
padding-right: 0px;
}
.voucher-card .card-head .left-content .restaurant-image {
width: 55px;
height: 55px;
}
.smiley-block {
padding: 10px 15px;
border-radius: 10px;
}
.smiley-block .smileys {
gap: 7px;
}
.review-rest-modal .modal-header {
padding: 20px 20px 16px;
}
.modal-wrapper .modal-body {
padding: 16px 20px;
}
.modal-wrapper .modal-footer {
padding: 20px;
}
}
@media (max-width: 576px) {
.account-info {
width: 100%;
border: none;
}
.modal-wrapper .modal-footer {
padding: 16px;
}
.account-info .tab-title {
padding: 12px 0 !important;
}
.bordered-tab .tabing-wrapper .tab-header,
.req-coupan-data .user-form,
.be-influencer-data .user-form,
.profile-data .user-form {
padding: 0 0 24px;
}
.account-tabs .tab-content.my-order {
padding: 0 0 12px;
}
.rewards-info {
padding: 24px 0 16px;
}
.history-header {
padding: 16px 0 24px;
}
.history-content {
padding: 0 0 8px;
}
.account-info .fav-rest,
.account-info .account-tabs .tab-content,
.account-tabs .acc-tab-content {
padding: 0;
}
.bordered-tab .tabing-wrapper .tab-group .tab>a,
.bordered-tab .tabing-wrapper .tab-group .acc-tab>a {
padding: 9px;
}
.my-avail-voucher .order-bottom .qr-code {
height: 100px;
width: 100px;
}
.avail-coins,
.earn-more-coins {
min-width: 100%;
}
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .checkbox-label,
.book-table-modal .form__checkbox-group .checkbox-label,
.book-table-modal .form__radio-group .checkbox-label {
padding: 6px 10px;
}
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .form__radio-group {
max-width: calc(25% - 9px);
}
.order-tracking .takeaway-details .bottom-group .user-form-btn .button {
flex: 1;
}
.account-tab {
width: 85%;
transform: translateX(-450px);
}
.account-tab.expanded {
transform: translateX(-450px);
}
.voucher-badge {
padding: 7px 13px;
}
.profile-data .user-form .gen-check-holder .badge {
padding: 6px 10px;
}
.profile-data .user-form .preferences-check {
gap: 8px;
}
.user-form-btn {
gap: 12px;
}
.coupan-offer-modal .coupans {
min-height: 120px;
}
}
@media screen and (max-width: 520px) {
/* .account-order-detail,
.account-order-detail .restaurant-inner {
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
} */
.country-code {
gap: 8px;
}
.sign-up-modal .modal-wrapper .modal-body.b-0 {
padding: 16px 16px 0;
}
.sign-up-modal .modal-wrapper .modal-header,
.coupan-offer-modal .modal-wrapper .modal-header {
padding: 20px 16px 16px;
}
.coupan-offer-modal .modal-wrapper {
overflow: hidden;
}
.coupan-offer-modal .modal-wrapper .modal-body {
padding: 24px 16px;
}
.coupan-offer-modal .modal-wrapper .modal-footer {
padding: 16px;
}
.sign-up-modal .modal-wrapper .modal-footer {
padding: 8px 16px 24px;
}
.coupan-offer-modal .copy-code {
padding: 10px;
background-size: cover;
}
.coupan-offer-modal .coupan-code-inner {
padding: 10px;
padding-right: 0;
}
.coupan-offer-modal .coupan-code-inner .code {
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
}
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .checkbox-label {
padding: 8px 16px;
}
.book-table-modal .custom-selection-box .box-penal .penal-group .form__checkbox-group,
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .form__checkbox-group {
width: calc(33% - 10px);
max-width: 100%;
}
.sign-up-modal .otp-number input {
height: 10vw;
width: 10vw;
}
.coupan-offer-modal .tabing-wrapper .tab-group .tab.active>a {
padding: 8px 14px;
}
.order-tracking .menu_iteam-lists {
padding: 0 10px;
}
.order-tracking .ord-rest-reciept .right-panel .item-total-main {
padding-left: 10px;
padding-right: 10px;
}
.order-tracking .menu_iteam-lists .menu_item .res-image {
width: 60px;
height: 60px;
}
.ord-rest-price .badge {
border-radius: 7px;
padding: 4px 9px;
}
.tracking-head .tracking-head-details {
gap: 8px;
}
.buy-vouchers .vou-head .vou-rest {
flex-direction: column;
align-items: flex-start;
row-gap: 15px;
}
.buy-vouchers .vou-head .account-order-detail {
flex-wrap: nowrap;
align-items: center;
flex-direction: row;
}
.buy-vouchers .vou-head .vou-rest .rest-price-inner,
.buy-vouchers .vou-head .vou-rest .rest-price {
align-items: center;
}
.user-form-btn .button {
min-width: inherit;
}
.my-order-amount {
flex-wrap: wrap;
}
.my-order-amount .order-total {
flex: 0 0 100%;
}
/* .tab-content.my-order .my-order-amount {
flex-wrap: nowrap;
} */
.tab-content.my-order .my-order-amount .order-total {
flex: 0 0 auto;
}
.tab-content.my-order .my-order-amount .order-count {
margin: 0;
}
.tab-content.my-order .my-order-image {
width: 60px;
height: 60px;
}
.tab-content.my-order .my-restaurants {
flex-wrap: nowrap;
}
.smiley-block {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.smiley-block .smileys {
justify-content: space-between;
width: 100%;
}
.smiley-block .smileys label input {
margin: 0;
}
}
@media (max-width: 460px) {
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .form__radio-group,
.book-table-modal .custom-selection-box .box-penal .penal-group .form__checkbox-group,
.book-table-modal .custom-selection-box .box-penal .penal-group .form__radio-group {
max-width: calc(33.33% - 8px);
}
.my-order-amount {
flex-direction: column;
gap: 12px;
}
.my-order-amount .my-order-amount-detail {
width: 100%;
border-bottom: 1px solid var(--e-gray-200);
padding-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
}
.my-order-amount .my-order-amount-buttons {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.my-order-amount .my-order-amount-buttons .button {
width: 100%;
}
}
@media screen and (max-width: 390px) {
.book-table-modal .custom-selection-box .box-penal .penal-group .form__checkbox-group,
.book-table-modal .custom-selection-box.select-time .box-penal .penal-group .form__checkbox-group {
width: calc(50% - 10px);
max-width: 100%;
}
.smiley-block .smileys svg {
width: 25px;
height: 25px;
}
.smiley-block {
padding: 10px;
}
}
/* Mobile Cart Drawer */
.cart-btn-mb {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: none;
width: 100%;
padding: 0 24px;
z-index: 2;
}
.cart-btn-mb .cart-drawer-trigger {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
}
.cart-btn-mb .cart-drawer-trigger .text {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
}
@media screen and (max-width: 991px) {
.cart-btn-mb {
display: block;
}
.drop-wrap .open-hours-modal.drop-option.show {
left: 0;
}
}
@media screen and (max-width: 576px) {
.cart-btn-mb {
padding: 0 16px;
}
#CartDrawer .order-lists {
padding: 8px 4px;
}
#CartDrawer .order-lists .order-item .item-image {
flex: 0 0 auto;
}
#CartDrawer .order-lists .order-item .item-content {
max-width: 100%;
}
}
@media screen and (max-width: 470px) {
#CartDrawer {
width: 100%;
}
}
@media screen and (max-width: 576px) {
.drop-wrap .drop-option.show {
width: 100%;
}
.notify-modal .notify-body {
padding: 0;
}
.notify-modal.drop-option.show {
width: auto;
}
.notify-modal .modal-wrapper {
width: 82vw;
}
/* .notify-modal .notify-main {
max-height: 375px;
} */
}
.accordion-content {
overflow: hidden;
transition: max-height 0.3s ease;
max-height: 0px;
/* Initially collapsed */
display: none;
/* Initially hidden */
}
.accordion-item.active .accordion-content {
display: block;
/* Show when active */
max-height: none;
/* Let the height be calculated dynamically */
}
.pos {
position: relative;
}
.pos .abs {
position: absolute;
height: 100%;
width: 100%;
z-index: 7;
cursor: pointer;
}
.pos:hover .button {
background: var(--e-gray-100);
}
.cms-panel h5,
.cms-panel h3,
.cms-panel h4 {
font-size: var(--e-display-xs);
line-height: var(--e-display-lh-xs);
margin-top: 28px;
margin-bottom: 8px;
}
.cms-panel {
padding: 24px 24px 3px;
}
.cms-panel ul li {
list-style: circle;
}
.cms-panel ol li {
list-style: decimal;
}
.not-found-wrapper {
text-align: center;
flex-direction: column;
gap: 36px;
height: 100vh;
}
.not-found-content {
flex-direction: column;
gap: 24px;
}
.not-found-content label {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
font-weight: var(--e-font-semibold);
color: var(--e-gray-950);
}
.empty {
gap: 32px;
height: 100%;
}
.empty-cart-wrapper {
gap: 32px;
height: 100%;
border: 1px solid var(--e-gray-100);
border-radius: 12px;
margin: 16px auto;
}
.account-info .empty-cart-wrapper {
border: none;
}
.content-group {
gap: 12px;
}
@media screen and (max-width: 776px) {
.not-found-wrapper img {
max-width: 360px;
width: 100%;
height: auto;
}
}
.disable {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
.pac-container {
z-index: 99999;
max-height: 350px;
}
.offer-slider-link {
display: block;
}
/* Our USP */
.our-usp .swiper-offer-banner .swiper-slide {
width: 100% !important;
}
.our-usp .swiper-arrows {
position: absolute;
top: 20px;
right: 20px;
}
.our-usp .img {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.our-usp .img::before {
content: "";
position: absolute;
background: rgb(0, 0, 0);
background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
height: 100%;
width: 100%;
}
.our-usp .img .text {
position: absolute;
bottom: 10px;
left: 50%;
color: #fff;
transform: translate(-50%, 10px);
width: 90%;
text-align: center;
}
/* Already Available Popup */
.already-avail-modal {
position: fixed;
z-index: 11111;
top: 0;
left: 0;
background: #0000006e;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.already-avail-modal.cust-modal .modal-wrapper.lg {
max-width: 400px;
min-width: initial;
width: 100%;
padding: 20px;
text-align: center;
}
.already-avail-modal .main-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
}
.already-avail-modal .main-content .inner-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.already-avail-modal .main-content .btns {
gap: 10px;
}
.already-avail-modal .main-content .btns .button {
width: 80px;
}
@media (max-width: 1300px) {
.already-avail-modal .main-content {
gap: 20px;
}
.already-avail-modal .main-content .btns .button {
width: 50px;
}
}
.instead {
cursor: pointer;
}
.instead:hover {
color: var(--e-brand-700);
}
body:has(.cust-modal) {
overflow: hidden;
}
body:has(.cust-modal) .fixed-download-app {
z-index: 9997;
}
body:has(.cust-modal) header.page-header {
position: relative;
}
.cust-modal:not(.customise-order, .already-avail-modal) .modal-wrapper {
max-height: 640px;
height: 100%;
}
.cust-modal {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 32px 16px;
}
.cust-modal .modal-dialog {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.cust-modal {
animation: fadeIn 0.3s ease-in-out forwards;
}
.cust-modal .modal-wrapper.lg {
width: 800px;
max-width: 100%;
min-width: initial;
padding: 20px;
text-align: center;
}
.cust-modal .f-button {
width: 22px;
height: 22px;
top: 18px !important;
right: 20px !important;
border: 1px solid var(--e-gray-600);
border-radius: 50%;
padding: 0;
position: absolute;
}
.cust-modal .f-button svg {
height: 12px;
width: 12px;
}
.cust-modal .form__radio-group .radio-label .radio-icon,
.cust-modal .form__checkbox-group .checkbox-label .checkbox-icon {
flex: 0 0 auto;
}
.cust-modal .form__radio-group .radio-label .text {
text-align: left;
word-break: break-all;
}
.cust-modal .modal-wrapper .modal-body {
padding: 32px;
/* max-height: calc(100vh - 400px);
overflow: auto; */
}
.cust-modal .modal-title {
text-align: left;
text-transform: capitalize;
}
.custom-input input:focus {
border-color: var(--e-brand-700);
}
.intel-input-main.error input {
border-color: var(--e-error);
}
@media (max-width: 522px) {
.cust-modal .modal-wrapper .modal-body {
padding: 22px 16px;
}
}
/* Cutom Datepicker */
.css-jupps9-MuiInputBase-root-MuiOutlinedInput-root {
font-family: inherit !important;
}
.custom-date-picker input {
border-radius: 8px;
background: var(--e-white);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-700);
padding: 10px 14px;
width: 100%;
font-family: inherit;
}
.custom-date-picker .MuiInputAdornment-root {
width: 100%;
position: absolute;
margin: 0;
}
.custom-date-picker button.MuiButtonBase-root {
width: 100%;
justify-content: flex-end;
border-radius: 0;
}
.custom-date-picker {
position: relative;
}
.custom-date-picker .f-button {
position: absolute;
right: 0px;
top: 50%;
transform: translate(-5px, -50%);
border-radius: 50px;
width: 30px;
height: 30px;
}
.custom-date-picker .f-button svg {
width: 16px;
height: 16px;
}
.custom-date-picker .MuiFormControl-root {
width: 100%;
}
.MuiOutlinedInput-notchedOutline {
border-radius: 8px !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
border: 1px solid var(--e-gray-300) !important;
}
.Mui-error .MuiOutlinedInput-notchedOutline {
border: 1px solid var(--e-gray-300) !important;
}
.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiOutlinedInput-root.Mui-focused:hover .MuiOutlinedInput-notchedOutline {
border: 1px solid var(--e-brand-700) !important;
}
.iti__country-container {
left: 0px !important;
position: relative !important;
border-radius: 8px;
border: 1px solid var(--e-gray-300);
background: var(--e-white);
font-size: var(--e-text-md);
line-height: var(--e-text-lh-md);
font-weight: var(--e-font-regular);
color: var(--e-gray-900);
}
.iti--inline-dropdown .iti__dropdown-content {
padding: 10px;
z-index: 111111 !important;
left: 0px;
top: 44px;
width: max-content !important;
}
.iti--fullscreen-popup.iti--container {
z-index: 111111 !important;
}
.iti--inline-dropdown .iti__country-list {
margin-top: 10px;
}
.iti__selected-country {
padding: 9px 14px !important;
}
.iti__selected-country-primary {
padding-left: 0 !important;
}
.iti__selected-country-primary:hover {
background-color: transparent !important;
}
/* Custom Datepicker Ends */
.book-table-modal.page {
padding: 50px 20px;
}
.book-table-modal.page .modal-wrapper {
margin: 0 auto;
}
/* .book-table-modal.page .modal-wrapper .modal-body {
max-height: calc(100vh - 250px);
} */
.book-table-modal.page .people-count.order-lists.border-bottom,
.book-table-modal.page .modal-wrapper .modal-footer {
border-color: var(--e-gray-100);
}
.book-table-modal.page .up-rest .up-detail .rst-name .info {
display: block;
}
.book-table-modal.page .up-rest .up-detail .rst-name .title {
text-transform: capitalize;
}
.book-table-modal.page .up-rest {
position: sticky;
top: 0;
z-index: 1;
}
@media (max-width: 522px) {
.book-table-modal.page {
padding: 30px 16px;
}
.book-table-modal.page .up-rest {
gap: 12px;
}
.book-table-modal.page .up-rest .rest-logo {
width: 80px;
height: 80px;
}
.page-main:has(.book-table-modal.page) {
padding: 0;
}
/* .book-table-modal.page .modal-wrapper .modal-body {
max-height: calc(100vh - 200px);
} */
}
.strip-form-modal .payment-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.strip-form-modal .button-action .button {
width: 100%;
}
.strip-form-modal .payment-form .error-message {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
color: var(--e-error);
margin: 0;
}
.cong-inner .image {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.cong-inner .modal-wrapper {
max-width: 320px;
background: rgb(219, 251, 227);
background: linear-gradient(180deg, rgba(219, 251, 227, 1) 0%, rgba(255, 255, 255, 1) 100%);
z-index: 2;
}
.cong-inner .title {
margin-bottom: 8px;
}
.cong-inner .text {
margin-bottom: 24px;
}
.change-group {
position: relative;
}
.change-group .change-button {
position: absolute;
right: 0;
top: 50%;
transform: translate(-20%, -50%);
cursor: pointer;
padding: 0;
background-color: var(--e-white);
box-shadow: none;
border: 0;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--e-brand-700);
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
}
.change-group .change-button:hover {
color: var(--e-gray-700);
}
.read-more {
color: green;
cursor: pointer;
margin-left: 5px;
}
.gap-10 {
gap: 10px;
}
/* Payment modal */
#confirm-book-table,
#report-us {
background: transparent;
}
#rswps-card-container {
min-height: initial !important;
margin-bottom: 35px;
margin-top: 10px;
}
.sq-card-wrapper .sq-card-message {
display: none;
}
.sq-card-wrapper .sq-card-message.sq-visible {
display: block;
margin-bottom: 0;
}
.strip-form-modal #rswps-form button {
background: var(--e-brand-600) !important;
width: 49%;
border-radius: 8px !important;
border: 1px solid;
}
.strip-form-modal #rswps-form button:hover {
background: var(--e-brand-700) !important;
}
.strip-form-modal #rswps-form button.cancel {
background: var(--e-white) !important;
color: var(--e-gray-700) !important;
border: 1px solid var(--e-gray-300);
float: right;
}
.strip-form-modal #rswps-form button.cancel:hover {
color: var(--e-gray-800) !important;
background: var(--e-gray-100) !important;
}
/* Guest Checkout Css */
.guest-checkout .checkout-main {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 24px;
}
.guest-checkout .checkout-inner {
display: flex;
flex-direction: column;
align-self: stretch;
align-items: stretch;
background: var(--e-white);
border-radius: 16px;
}
.guest-checkout .check-top {
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
padding: 20px 24px;
cursor: pointer;
}
.guest-checkout .check-top .tab-number {
display: flex;
width: 62px;
height: 62px;
padding: 12px;
flex-direction: column;
align-items: center;
gap: 16px;
border-radius: 100px;
background: var(--e-gray-50);
justify-content: center;
color: var(--e-gray-900);
flex: 0 0 auto;
}
.guest-checkout .check-top .tab-data {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
flex: 1;
}
.guest-checkout .check-top .tab-data .title {
font-size: var(--e-text-xl);
font-style: normal;
line-height: var(--e-text-lh-xl);
color: var(--e-gray-900);
}
.guest-checkout .checkout-inner .check-bottom {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.guest-checkout .checkout-inner.active .check-bottom {
max-height: 1000px;
}
.guest-checkout .check-bottom .inner {
padding: 16px 24px 24px;
border-top: 1px solid var(--e-gray-100);
}
.guest-checkout .get-started .user-form {
gap: 24px;
}
.guest-checkout .get-started .or {
padding: 24px 0;
}
.guest-checkout .get-started .social-login-group {
flex-direction: row;
gap: 12px;
}
.guest-checkout .get-started .social-login-group>div {
width: calc(33.33% - 8px);
}
.guest-checkout .get-started .social-login-group>div .button svg {
flex: 0 0 auto;
height: 24px;
width: 24px;
}
.guest-checkout .check-top .svgs {
display: flex;
}
.guest-checkout .verify-phone .user-form-btn {
margin: 24px 0 0;
padding: 0;
}
.guest-checkout .complete-profile .user-form {
margin-bottom: 24px;
}
@media (max-width: 767px) {
.guest-checkout .get-started .social-login-group {
flex-direction: column;
}
.guest-checkout .get-started .social-login-group>div {
width: 100%;
}
}
.spinner {
height: 20px;
width: 20px;
border-radius: 50%;
/* rounded-full */
border-bottom: 2px solid #00900e;
/* border-b-2 + border-blue-500 */
animation: spin 1s linear infinite;
/* animate-spin */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Fixed Download App Button */
.fixed-download-app {
position: fixed;
bottom: 23px;
left: 50%;
z-index: 9999;
transform: translate(-50%, 0);
width: calc(100% - 30px);
}
.fixed-download-app .inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
background-color: #002d43;
border-radius: 16px;
padding: 12px;
color: #fff;
position: relative;
}
.fixed-download-app .inner img {
width: 50px;
height: 50px;
}
.fixed-download-app .left-content {
display: flex;
gap: 8px;
justify-content: flex-start;
align-items: center;
}
.fixed-download-app .left-content .logo {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex: 0 0 auto;
}
.fixed-download-app .left-content .logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fixed-download-app .left-content .content {
display: flex;
flex-direction: column;
gap: 2px;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
}
.fixed-download-app .left-content .content p {
margin: 0;
}
.fixed-download-app .left-content .content p.subtitle {
font-size: var(--e-text-small);
line-height: var(--e-text-lh-small);
font-weight: var(--e-font-medium);
}
.fixed-download-app .left-content .content p.title {
font-size: 14px;
line-height: 20px;
font-weight: var(--e-font-semibold);
letter-spacing: 0.02em;
}
.fixed-download-app .right-content {
flex: 0 0 auto;
}
.fixed-download-app .right-content .btn {
background-color: var(--e-brand-600);
color: var(--e-white);
padding: 12px;
border-radius: 8px;
font-size: 14px;
line-height: 20px;
font-weight: var(--e-font-bold);
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
}
.fixed-download-app .right-content .btn:hover {
background-color: var(--e-brand-700);
}
.fixed-download-app .right-content .btn a {
color: inherit;
text-decoration: none;
}
.fixed-download-app .inner .close-btn {
border: 1px solid #d1d5db;
background: var(--e-white);
border-radius: 50%;
display: flex;
width: 24px;
height: 24px;
padding: 3px;
justify-content: center;
align-items: center;
gap: 12px;
position: absolute;
top: -10px;
right: -10px;
}
.menu-fixed-btn {
position: fixed;
bottom: 25px;
right: 15px;
z-index: 9999;
}
.menu-fixed-btn .inner {
background: #072f4a;
height: 64px;
width: 64px;
color: #fff;
padding: 12px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
cursor: pointer;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
}
.menu-fixed-btn .inner:active {
background: var(--e-brand-700);
}
.menu-fixed-btn .inner span.text {
font-size: 14px;
line-height: 20px;
font-weight: 600;
}
.fixed-menu-modal .hide-mobile {
display: block !important;
}
.fixed-menu-modal .left-bar .sidebar-title {
display: none;
}
.fixed-menu-modal .menu-category-lists {
flex-direction: column;
}
.scroll-to-top {
position: fixed;
bottom: 25px;
right: 15px;
z-index: 9999;
}
body:has(.fixed-download-app) .scroll-to-top {
bottom: 110px;
}
body:has(.fixed-download-app):has(.cart-btn-mb) .scroll-to-top {
bottom: 160px;
}
body:has(.cart-btn-mb) .fixed-download-app {
bottom: 78px;
}
body:not(:has(.fixed-download-app)):has(.cart-btn-mb) .scroll-to-top {
bottom: 75px;
}
body:has(.cart-btn-mb) .menu-fixed-btn {
bottom: 80px;
}
.scroll-to-top .inner {
background: #072f4a;
height: 52px;
width: 52px;
color: #fff;
padding: 10px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
cursor: pointer;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
}
.scroll-to-top .inner:hover {
background: var(--e-brand-700);
}
.page-main:has(.cust-modal.fixed-menu-modal) {
z-index: initial;
}
@media (min-width: 768px) {
.page-main:has(.sec-search) {
min-height: 527px;
}
}
@media (min-width: 1025px) {
.menu-fixed-btn,
.fixed-download-app {
display: none;
}
.page-main:has(.sec-search) {
min-height: 800px;
}
body:has(.fixed-download-app) .scroll-to-top {
bottom: 70px !important;
right: 50px;
}
.scroll-to-top .inner {
height: 60px;
width: 60px;
}
}
@media (min-width: 577px) and (max-width: 1024px) {
.scroll-to-top,
.menu-fixed-btn {
right: 24px;
}
.fixed-download-app {
width: calc(100% - 48px);
}
}
@media (max-width: 767px) {
.page-main:has(.sec-search) {
min-height: 507px;
}
}
.e-loader.load-more {
position: relative !important;
height: auto;
}
.cust-modal.logout-modal .modal-wrapper.lg {
max-width: 400px;
width: 100%;
max-height: 250px;
}
.cust-modal.logout-modal .modal-wrapper .modal-body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 20px;
}
.cust-modal.logout-modal .modal-wrapper .modal-body .btns {
max-width: 250px;
width: 100%;
gap: 25px;
}
.cust-modal.logout-modal .modal-wrapper .modal-body .btns .button {
flex: 1;
}
@media (max-width: 767px) {
.cust-modal.logout-modal .modal-wrapper.lg {
max-height: 200px;
}
.cust-modal.logout-modal .modal-wrapper .modal-body .btns {
gap: 15px;
}
.cust-modal.logout-modal .modal-wrapper .modal-body .btns {
max-width: 200px;
}
}
.cust-modal .modal-wrapper.medium {
max-width: 400px;
width: 100%;
}
.tabing-wrapper .load-more {
margin-bottom: 20px;
}
.favourite-res-load-more {
margin: 0 auto 25px;
width: 100%;
}
@media (max-width: 991px) {
body:has(header.page-header.sticky-header) div:has(> div > .custom__toaster) {
top: 85px !important;
}
}
/* CMS Pages Style */
.cms-pages {
border: none;
}
.cms-pages .tab-title .title {
font-size: var(--e-display-md);
line-height: var(--e-display-lh-md);
}
.cms-pages p,
.cms-pages li {
font-size: var(--e-text-xl);
line-height: var(--e-text-lh-xl);
}
@media (max-width: 991px) {
.cms-pages .tab-collapse {
display: none;
}
.cms-pages.account-info .tab-title,
.cms-pages .cms-panel {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 767px) {
.cms-panel {
padding-top: 10px;
}
.cms-panel h5,
.cms-panel h3,
.cms-panel h4 {
margin-top: 20px;
margin-bottom: 3px;
}
.cms-pages p,
.cms-pages li {
font-size: 16px;
line-height: 24px;
}
}