@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600;800;900&display=swap");

:root {
  --black: #000000;
  --secondary-black: #141414;
  --dark-blue: #232b2f;
  --secondary-text: #898989;
  --primary-bg: #f4f5f8;
  --secondary-bg: #fff;
  --grey: #f0f0f0;
  --primary: #83ea00;
  --orange: #ffa100;
  --yellow: #ffc636;
  --border: #e9e9e9;
  --red: #ff3d00;
  --primary-hover: #79d703;
  --blue: #03758e;
  --light-blue: #0d5fff;
  --white: #fff;
  --purple: #f3ded4;
  --navy: #ecf0e6;
  --popover-box-shadow: 0px 20px 60px rgba(168, 168, 169, 0.65);
  --cart-box-shadow: 0 4px 4px rgba(194, 194, 194, 0.49);
  --tab-box-shadow: 0px 2px 2px rgba(221, 221, 221, 0.57);
  --card-bg: #f6f7f9;
  --badge-bg: #e6e7eb;
  --scroll: rgb(216, 216, 216);
  --primary-selected: rgba(131, 234, 0, 0.16);
}

[data-theme="dark"] {
  --black: #f4f5f8;
  --dark-blue: #f4f5f8;
  --secondary-black: #f4f5f8;
  --secondary-text: #787e85;
  --primary-bg: #2b343b;
  --secondary-bg: #182025;
  --grey: #f4f5f81a;
  --primary: #83ea00;
  --orange: #ffa100;
  --yellow: #ffc636;
  --border: #2b343b;
  --red: #ff3d00;
  --primary-hover: #73c708;
  --blue: #00cbf8;
  --white: #000;
  --purple: #f3ded4;
  --navy: #ecf0e6;
  --popover-box-shadow: 0px 16px 60px rgba(0, 0, 0, 0.6);
  --cart-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.85);
  --tab-box-shadow: 0px 2px 2px rgba(20, 21, 22, 0.71);
  --card-bg: #f6f7f9;
  --badge-bg: #2b343b;
  --scroll: #4c5055;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  color: var(--black);
}

body {
  background-color: var(--primary-bg);
}

.welcome-container {
  position: relative;
  width: 100%;
  max-width: 1370px;
  padding: 0 15px;
  margin: 0 auto;
}

.fluid-container {
  width: 100%;
  padding: 0 50px;
}

.container {
  width: 100%;
  padding: 0 50px;
}

.shop-container {
  width: 100%;
  padding: 0 30px 0 50px;
}

.store .shop-container {
  padding: 0 30px;
}

.store .shop-container .filter-wrapper {
  width: 15%;
  padding-top: 30px;
}

.bg-white {
  min-height: calc(100vh - 70px);
  background-color: var(--secondary-bg);
}

.white-splash {
  background-color: var(--secondary-bg);
}

.background {
  background-color: var(--primary-bg);
}

.layout-container .container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 50px;
}

button {
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}

img {
  object-fit: cover;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition:
    background-color 600000s 0s,
    color 600000s 0s;
}

input[data-autocompleted] {
  background-color: transparent !important;
}

.swiper.banner-swiper {
  padding: 0 30px;
}

.swiper.category-swiper {
  margin-left: 0;
  margin-right: 0;
}

.swiper.tab-swiper .swiper-slide {
  width: auto;
}

.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--grey);
  background-color: var(--secondary-bg);
  transition: all 0.2s;
  box-shadow: var(--tab-box-shadow);
}

.swiper .swiper-button-disabled {
  display: none;
}

.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
  font-size: 16px;
  color: var(--dark-blue);
}

.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:hover {
  border-color: var(--primary);
}

.toast-alert .Toastify__toast-theme--light {
  background: var(--secondary-bg);
  box-shadow: var(--tab-box-shadow);
  padding: 0;
  border-radius: 10px;
}

.toast-alert .Toastify__toast-body {
  display: block;
  margin: 0;
  padding: 0;
}

.toast-alert .Toastify__toast-body > div {
  height: 100%;
}

.banner-placeholder {
  width: 100%;
  padding-top: 20%;
  background-color: var(--secondary-bg);
}

#nprogress .bar {
  height: 3px !important;
  background: var(--primary) !important;
}

#nprogress .peg {
  box-shadow:
    0 0 10px var(--primary),
    0 0 5px var(--primary);
}

.red {
  color: var(--red);
}

.strike {
  text-decoration: line-through;
}

.swiper.story {
  height: 100%;
}

.pac-container {
  background-color: var(--secondary-bg);
  z-index: 2001;
  margin-top: 8px;
  box-shadow: none;
  box-shadow: 0px 25px 50px var(--grey);
  border-radius: 8px;
  left: auto;
  border: 1px solid var(--grey);
}

.pac-container .pac-item {
  border-top: none;
  cursor: pointer;
  padding: 12px 20px;
  border-bottom: 1px solid var(--grey);
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  img[loading="lazy"] {
    clippath: inset(0.6px);
  }
}

[data-theme="dark"] ::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

@media (max-width: 1139px) {
  .container {
    padding: 0 15px;
  }

  .shop-container {
    padding: 0 15px;
  }

  .store .shop-container {
    padding: 0 15px;
  }

  .store .shop-container .filter-wrapper {
    width: 20%;
    padding-top: 10px;
  }

  .layout-container .container,
  .layout-container .shop-container {
    max-width: 100%;
    padding: 0 15px;
  }

  .swiper.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0 15px;
  }

  .swiper.banner-swiper .swiper-slide {
    max-width: 310px;
  }

  .swiper.story-swiper .swiper-slide {
    max-width: 265px;
  }

  .swiper.featured-shops .swiper-slide {
    max-width: 180px;
  }

  .swiper.shop-list .swiper-slide {
    max-width: 300px;
  }
  .swiper.brand-list .swiper-slide {
    max-width: 100px;
  }
  .swiper.category-list-v3 .swiper-slide {
    max-width: 140px;
  }
  .swiper.story-swiper-v3 .swiper-slide {
    max-width: 245px;
  }
  .banner-placeholder {
    padding-top: 50%;
  }
}

@media (max-width: 576px) {
  .swiper.banner-swiper .swiper-slide {
    max-width: 258px;
  }

  .swiper.story-swiper .swiper-slide {
    max-width: 265px;
  }

  .swiper.featured-shops .swiper-slide {
    max-width: 150px;
  }

  .swiper.shop-list .swiper-slide {
    max-width: 286px;
  }
  .swiper.brand-list .swiper-slide {
    max-width: 100px;
  }
  .swiper.category-list-v3 .swiper-slide {
    max-width: 70px;
  }
  .banner-placeholder {
    padding-top: 100%;
  }

  .store .shop-container .filter-wrapper {
    width: 40%;
    padding-top: 10px;
  }
}

.shadowLeft {
  position: absolute;
  right: 0;
  display: block;
  z-index: 99 !important;
  height: 360px;
  width: 100%;
  transition: all 0.2ms linear;
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 121, 99, 0) 0%,
    rgba(255, 255, 255, 0.9) 60%
  );
  border-radius: 15px;

  @media (max-width: 576px) {
    display: none;
  }
}

.shadowRight {
  position: absolute;
  left: 0;
  display: block;
  transition: all 0.2ms linear;
  z-index: 99 !important;
  height: 360px;
  width: 100%;
  background: linear-gradient(
    -90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 121, 99, 0) 0%,
    rgba(255, 255, 255, 0.9) 60%
  );
  border-radius: 15px;

  @media (max-width: 576px) {
    display: none;
  }
}

.swiper-slide-active .shadowLeft {
  background: none;
  visibility: hidden;
}

.swiper-slide-active .shadowRight {
  background: none;
  visibility: hidden;
}

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

.filter-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.swiper-pagination .swiper-pagination-bullet {
  background-color: var(--primary);
}