:root {
  --floWhite: #FFFAF0;
  --eiriBlack: #1E1E1E;
  --darkLiver: #505050;
  --seaFoamGreen: #ABE5BC;
  --seaBlue: #459aad;
  --lighSalmonPink: #FFA89A;
  --jasMine: #FFD787;
  --tropiViolet: #CFADE8;
  
  --transition: all .3s ease;
  --animateDown: slide-down .3s ease-in-out;
  --animateUp: slide-up .3s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  user-select: none;
  font-family: 'Lato', sans-serif;
  box-sizing: border-box;
}

body {
  -webkit-tap-highlight-color: transparent;
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
  background-color: var(--floWhite);
  transition: var(--transition);
}

/* Animation */
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(60%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-left {
  0% {
    transform: translateX(30px);
    content-visibility: hidden;
  }
  100% {
    transform: translateX(0px);
    content-visibility: visible;
  }
}

@keyframes skeleton {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  75% {
    opacity: 0.3;
  }
  88% {
    opacity: 0.2;
  }
  95% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes indicator {
  0% {
    width: 50px;
  }
  50% {
    width: 200px;
  }
  100% {
    width: 50px;
  }
}




/* Screen Pertama */
.home__head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  animation: var(--animateDown);
}
.home__head.active {
  display: none;
}

.home__head .img__box {
  width: 200px;
  height: 65px;
  margin-top: 10px;
  background: url('assets/images/cute.png') no-repeat center;
  background-size: cover;
}

/* Particle */
.home__head .bars {
  position: absolute;
  left: -5%;
  top: 20%;
  transform: rotate(60deg);
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.3rem;
}
.home__head .bars > span {
  width: 40px;
  height: 13px;
  border-radius: 8px 8px 3px 3px;
  background: var(--seaFoamGreen);
}
.home__head .bars > span:nth-child(2) {
  width: 50px;
  height: 15px;
  border-radius: 8px;
}
.home__head .bars > span:nth-child(3) {
  border-radius: 3px 3px 8px 8px;
}

.home__head .circle__box {
  position: absolute;
  right: -23px;
  top: -10px;
  width: 50px;
  height: 50px;
  background: var(--seaFoamGreen);
  border-radius: 8px;
  animation: slide-right .6s ease-out;
}
.home__head .circle__box .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--floWhite);
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

/* Main Content */
.home__screen {
  padding: 10px 0;
  overflow: hidden;
}
.home__screen.active {
  display: none;
}
.content__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 20px 0;
}
.content__card .box__card {
  width: 300px;
  height: 295px;
  padding: 20px 10px;
  border: 2px solid var(--darkLiver);
  border-radius: 23px;
  text-transform: capitalize;
}
.content__card .box__card .tittle__info {
  color: var(--floWhite);
  font-size: 17px;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: center;
  padding: 0 4px;
}
.content__card .box__card .info__box {
  margin: 5px auto;
  padding: 5px;
}
.content__card .box__card .info__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 15px;
}
.content__card .box__card .info__loading:nth-child(2) {
  transform: rotateY(180deg);
}
.info__loading .info__circle {
  width: 30%;
  height: 40px;
  background: var(--darkLiver);
  border-radius: 50%;
  padding: 5px;
  animation: skeleton 5s linear infinite;
}
.info__loading .info__text {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.info__loading .info__text .line {
  width: 100%;
  height: 10px;
  background: var(--darkLiver);
  opacity: 0.3;
  border-radius: 24px;
  animation: skeleton 5s linear infinite;
}
.info__loading .info__text .line:last-child {
  width: 60%;
}

.garis {
  position: absolute;
  left: 12%;
  top: 50%;
  transform: translate(0,-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.garis__item, 
.garis__item2 {
  width: 105px;
  height: 15px;
  border-radius: 10px;
  background: #fff;
}
.garis2 {
  position: absolute;
  right: 12%;
  top: 50%;
  transform: translate(0,-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home__screen .home__desc {
  margin: 10px auto;
  padding: 20px;
  letter-spacing: 1px;
  line-height: 1.8;
  text-align: center;
  font-weight: 400;
}

.content__card .box__card:nth-child(1) {
  margin-left: -30%;
  transform: scale(0.9);
  background: var(--tropiViolet);
}
.content__card .box__card:nth-child(2) {
  background: var(--lighSalmonPink);
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.content__card .box__card:nth-child(3) {
  background: var(--jasMine);
  margin-right: -30%;
  transform: scale(0.9);
}

.btn {
  margin: 10px auto;
  width: 120px;
  padding: 10px 15px;
  outline: none;
  cursor: pointer;
  border: 1px solid var(--darkLiver);
  background: var(--seaFoamGreen);
  border-radius: 19px;
  transition: .3s;
  color: var(--eiriBlack);
  text-align: center;
  font-weight: 700;
}
.btn:active {
  transform: scale(0.9);
}

/* Screen Kedua */
.menu__head {
  padding: 1rem;
  padding-bottom: 5rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--seaFoamGreen);
}
.menu__head.active {
  display: flex;
}

.menu__head .logo__img {
  cursor: pointer;
  width: 60px;
  height: 50px;
  padding: 8px 5px 8px 8px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  border-radius: 50%;
  border: 1px solid var(--darkLiver);
  animation: var(--animateDown);
}
.menu__head .logo__img img {
  width: 100%;
  height: 100%;
}

.menu__head .search__bar {
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: var(--animateDown);
}

.menu__head .search__bar .search__loading {
  display: none;
  position: absolute;
  left: 32%;
  top: 0;
  height: 2px;
  border-radius: 5px;
  width: 110px;
  background: var(--jasMine);
  animation: indicator .5s infinite ease-in-out;
}
.menu__head .search__bar .search__loading.active {
  display: block;
}

.menu__head .search__bar .result__box {
  position: absolute;
  left: -4%;
  top: 110%;
  width: 100%;
  padding: 5px;
  background: rgba(230, 230, 230, 0.35);
  backdrop-filter: blur(10px);
  border: 1px solid var(--darkLiver);
  border-radius: 8px;
  z-index: 50;
  display: none;
}
.menu__head .search__bar .result__box.active {
  display: block;
}

.search__bar input, .btn__search {
  height: 2rem;
  border: none;
  color: var(--eiriBlack);
  font-size: 1rem;
}
.search__bar input[type="text"] {
  outline: none;
  width: 100%;
  height: 2.4rem;
  margin-left: 10px;
  padding: 0 .6rem;
  background: #fff;
  box-shadow: 2px 1px 0px 2px, -3px -1px 0px -1px rgba(0, 0, 0, 0.73);
  transition: all .3s cubic-bezier(0,0,0.43,1.49);
}
.btn__search {
  position: absolute;
  top: 6px;
  right: .97rem;
  width: 4rem;
  height: 2.37rem;
  font-weight: 700;
  background: var(--jasMine);
  box-shadow: 3px 1px 0px 2px, 2px 1px 0px 2px rgba(0, 0, 0, 0.73);
  z-index: -1;
}
.search__bar input:not(:placeholder-shown) {
  width: calc(100% - 3.5rem);
}

.search__bar input:not(:placeholder-shown) + .btn__search {
  display: block;
  z-index: 0;
}
.search__bar label {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Initial Screen */
.menu__screen,
.detail__screen,
.bestseller__list__screen,
.checkout__screen {
  display: none;
}
.menu__screen.active {
  display: block;
  animation: var(--animateUp);
}
.detail__screen.active,
.bestseller__list__screen.active,
.checkout__screen.active {
  display: block;
}



.menu__screen {
  width: 100%;
  height: 550px;
  margin: 0 auto;
  margin-top: -2.5rem;
  padding: 1rem;
  background: var(--floWhite);
  overflow: scroll;
  border: 2px solid var(--darkLiver);
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-radius: 22px 22px 0 0;
  transition: var(--transition);
}
.menu__screen h1 {
  margin-top: 5px;
}
.tabNav__bar {
  position: relative;
  margin: 20px 5px;
}
.tab__navigation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: fit-content;
  margin: 0 auto;
}

.left__btn, .right__btn {
  color: var(--eiriBlack);
  font-size: 1.8em;
  cursor: pointer;
  transition: var(--transition);
}
.left__btn:active, .right__btn:active {
  transform: scale(2);
}
.left__btn {
  display: none;
}

.tab__menu {
  width: 100%;
  padding: 5px 0;
  color: var(--eiriBlack);
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.tab__menu.dragging {
  scroll-behavior: unset;
  cursor: grab;
}
.tab__menu.dragging .tab__btn {
  pointer-events: none;
}

.tab__menu::-webkit-scrollbar {
  display: none;
}

.tab__btn {
  color: var(--floWhite);
  display: inline-block;
  font-size: 1em;
  font-weight: 400;
  text-transform: capitalize;
  margin: 0 2px;
  padding: 10px 20px;
  background: #459aad;
  box-shadow: -2px -3px 0px 2px transparent, 3px 4px 0px 0px rgba(0, 0, 0, 0.73);
  cursor: pointer;
  transform: scale(0.9);
  transition: var(--transition);
}
.tab__btn:hover {
  transform: scale(1);
}
.tab__btn.active {
  transform: scale(1);
  color: var(--eiriBlack);
  background-color: var(--jasMine);
}

.tab__content {
  max-height: 250px;
  padding: 0 10px;
  display: none;
  gap: 4.5rem;
  grid-auto-flow: column;
  grid-auto-columns: 30%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  transition: var(--transition);
}
.tab__content.active {
  display: grid;
  animation: slide-left .3s ease;
}

.tab__card {
  display: flex;
  gap: .5rem;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 150px;
  border-radius: 8px;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #efeeee;
}

.tab__card .tab__img {
  width: 130px;
  height: 160px;
  padding: 10px;
  background: #EAEAE8;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.8), 5px 5px 16px #c0c0be, -5px -5px 16px #fff;
  border-radius: 22px 22px 0 0;

  overflow: hidden;
}
.tab__card .tab__img img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: var(--transition);
}
.tab__card .tab__img:hover img {
  transform: scale(1.26);
}
.tab__card .tab__info {
  width: 100%;
  color: var(--eiriBlack);
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
  text-transform: capitalize;
  line-height: 1.4;
  overflow: auto;
}
.tab__card .tab__info > span {
  color: var(--lighSalmon);
  font-weight: 500;
}

.bestseller {
  margin: 10px auto;
  padding: 5px 0;
}

.bestseller__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: capitalize;
  margin-bottom: 20px;
  margin-top: 15px;
}
.bestseller__info > span {
  cursor: pointer;
  color: var(--darkLiver);
  transition: var(--transition);
}
.bestseller__info > span:hover {
  color: var(--seaBlue);
  transform: scale(0.9);
}

.bestseller__box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bestseller__card,
.list__column {
  width: 100%;
  height: 130px;
  margin: 5px auto;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #efeeee;
}

.bestseller__card .bestseller__img,
.list__column .list__colImg {
  width: 30%;
  height: 100%;

}
.bestseller__card .bestseller__img img,
.list__column .list__colImg img {
  width: 90%;
  height: 100%;
  border-radius: 8px;
}
.bestseller__card .bestseller__desc,
.list__column .list__coldesc {
  width: 70%;
  height: 100%;
  text-transform: capitalize;
  cursor: pointer;
}
.bestseller__card .bestseller__desc > h2,
.list__column .list__coldesc > h2 {
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 5px;
}
.bestseller__card .bestseller__desc > p,
.list__column .list__coldesc > p {
  color: var(--darkLiver);
  font-size: 12px;
  letter-spacing: 1;
  font-weight: 400;
  margin-bottom: 5px;
}
.bestseller__card .bestseller__desc .action,
.actions {
  font-size: 14px;
  color: var(--lighSalmon);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.action > span,
.actions > span {
  font-size: 12px;
  text-transform: capitalize;
}
.bestseller__card .bestseller__desc .action > span > i,
.actions > span > i {
  color: var(--jasMine);
  transform: scale(1.5);
  margin-right: 3px;
}
.action > button,
.actions > button {
  outline: none;
  border: none;
  margin-top: 5px;
  padding: 5px 10px;
  color: var(--eiriBlack);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--seaFoamGreen);
  border: 1px solid var(--darkLiver);
  border-radius: 8px 0 0 8px;
  transition: all .3s ease;
}
.action > button:hover,
.actions > button:hover {
  transform: scale(0.9);
}


/* Detail Screen */

.detail__screen {
  width: 100%;
  height: 100vh;
  padding: 1rem;
  background-color: var(--jasMine);
}

.detail__screen .nav__detail {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  animation: var(--animateDown);
}
.detail__screen p {
  display: inline-block;
}
.detail__screen .nav__detail p:nth-child(1) {
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  margin-left: -50%;
  margin-bottom: -.3rem;

}
.detail__screen .nav__detail p:nth-child(2) {
  font-size: 22px;
  font-weight: 400;
  margin-left: 1.3rem;
}

.detail__screen .detail__content {
  width: 100%;
  height: 565px;
  margin: 10px auto;
  padding: 10px;
  background: var(--floWhite);
  border: 2px solid var(--darkLiver);
  border-radius: 27px;
}

.detail__screen .detail__content .detail__wrap {
  padding: 10px;
  text-align: center;
  text-transform: capitalize;
}
.detail__screen .detail__content .detail__wrap .detail__img {
  width: 100%;
  height: 210px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 18px 18px 8px 8px;
  animation: var(--animateUp);
}
.detail__wrap .detail__img img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.detail__wrap > p {
  margin: 20px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
}
.detail__wrap > p > i {
  color: var(--jasMine);
  transform: scale(1.5);
  margin-right: 3px;
}

.detail__screen .detail__desc {
  height: 200px;
  padding: 10px;
  overflow: auto;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #efeeee;
  border-radius: 8px 8px 2px 2px;
}
.detail__screen .detail__desc > h2 {
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 5px;
}
.detail__screen .detail__desc > p {
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.detail__screen .beli {
  width: 100%;
  outline: none;
  margin-top: 10px;
  padding: 10px;
  background: var(--tropiViolet);
  border-radius: 9px;
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
  background: linear-gradient(145deg, #e68ee6, #ffa9ff);
  border: none;
  box-shadow: 5px 5px 5px #784a78,
  -5px -5px 6px #fff2ff;
  transform: scale(0.9);
  transition: var(--transition);
}
.detail__screen .beli:active {
  transform: scale(0.88);
  box-shadow: inset 9px 9px 16px #784a78,
  inset -9px -9px 16px #ffd2ff;
}


/* Bestseller List Screen */

.bestseller__list__screen {
  width: 100%;
  max-height: 800px;
  height: 100vh;
  padding: 1rem;
  background: var(--lighSalmonPink);
  overflow: hidden;
}
.bestseller__list__screen .list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 55px;
  color: var(--floWhite);
  text-transform: capitalize;
  animation: var(--animateDown);
}
.list__head > i,
.list__head .btn__grid {
  font-size: 1.4rem;
  cursor: pointer;
}
.list__head > i:nth-child(1) {
  color: #000;
  padding: 3px;
  background: var(--seaFoamGreen);
  border: 1px solid var(--darkLiver);
  box-shadow: 3px 3px #B36464;
  transition: var(--transition);
}
.list__head > i:nth-child(1):hover,
.list__head .btn__grid:active {
  transform: scale(0.9);
  box-shadow: 2px 2px #B36464;
  background: var(--jasMine);
}
.list__head .btn__grid.active {
  transform: scale(0.9);
  background-color: var(--jasMine);
}
.list__head .btn__grid {
  padding: 2px 5px;
  color: var(--eiriBlack);
  background: var(--seaFoamGreen);
  border: 1px solid var(--darkLiver);
  box-shadow: 3px 3px #B36464;
  transition: var(--transition);
}

.list__content {
  width: 100%;
  height: 90%;
  margin: 10px 0;
  padding: 10px;
  background: var(--floWhite);
  border: 2px solid var(--darkLiver);
  border-radius: 21px 21px 5px 5px;
  overflow: auto;
}
.list__content.active {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.list__column.active {
  display: none;
}

.list__content .list__card {
  display: none;
  width: 145px;
  height: 200px;
  text-transform: capitalize;
}
.list__content .list__card.active {
  display: block;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #efeeee;
  border-radius: 8px;
}
.list__card .list__img {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list__card .list__img img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transform: scale(0.9);
}
.list__card > h2 {
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
  font-weight: 700;
}
.list__card .list__info {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 10px;
  margin-left: 16px;
  font-weight: 400;
}
.list__card .list__info > p > i {
  color: var(--jasMine);
}


/* Checkout Screen */
.checkout__screen {
  width: 100%;
  height: initial;
  padding: 1rem;
  background: var(--seaFoamGreen);
}

.checkout__box {
  width: 100%;
  height: 632px;
  padding: 10px;
  background: var(--floWhite);
  border: 2px solid var(--darkLiver);
  box-shadow: 4px 5px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

.checkout__box .checkout__img {
  width: 100%;
  height: 200px;
  margin-bottom: .5rem;
  box-shadow: rgba(0, 0, 0, 0.65) 0px 25px 20px -20px;
  animation: var(--animateUp);
}
.checkout__box .checkout__img img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.checkout__box .checkout__content {
  width: 100%;
  height: initial;
}
.checkout__content .steps {
  position: relative;
  width: 100%;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout__content .steps .circle__step {
  width: 50px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--floWhite);
  background: #459aad;
  box-shadow: 3px 3px var(--darkLiver);
  z-index: 2;
  transition: var(--transition);
  transition-delay: 0s;
}
.checkout__content .steps .circle__step.active {
  color: var(--eiriBlack);
  background: var(--jasMine);
  transition-delay: 100ms;
}

.progress__bar {
  position: absolute;
  width: 100%;
  height: 4px;
  background: #459aad;
}
.progress__bar .indicator {
  position: absolute;
  width: 10%;
  height: 100%;
  background: var(--jasMine);
  transition: var(--transition);
}

.checkout__content .checkout__info {
  position: relative;
  width: 100%;
  height: 315px;
  margin-top: 6.9px;
  box-shadow: inset 5px 5px 5px #cbced1, inset -5px -5px 5px #efeeee;
  border-radius: 8px 8px 2px 2px;
  overflow-x: hidden;
}

.checkout__info .checkout__desc {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  transition: var(--transition);
}
.checkout__info .checkout__form {
  position: absolute;
  left: 400px;
  top: 0;
  width: 100%;
  height: 315px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: var(--transition);
}
.checkout__info .checkout__finish{
  position: absolute;
  left: 400px;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  transition: var(--transition);
}



.checkout__content .checkout__info p {
  margin: 10px auto;
  line-height: 1.3;
  font-size: 16px;
  font-weight: 400;
  color: var(--darkLiver);
}

.checkout__content .btn__box {
  margin: 5px auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.checkout__content .btn__box > button {
  outline: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 5px;
  padding: 5px 10px;
  background: var(--seaFoamGreen);
  box-shadow: 3px 3px var(--darkLiver);
  transform: scale(1.1);
  transition: var(--transition);
}
.checkout__box .btn__box > button:active {
  transform: scale(1);
}
.checkout__box .btn__box > button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Checkout Form */

.checkout__form .form__content {
  width: 100%;
  height: initial;
  margin: 15px 0;
  padding: 10px;
  padding-bottom: 5px;
  box-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px #efeeee;
  display: none;
}
.checkout__form .form__content.active {
  display: block;
}
.form__content .user__box {
  position: relative;
  font-size: 16px;
  margin: 0 5px;
}
.form__content .user__box input {
  width: 100%;
  margin: 10px 0;
  margin-bottom: 10px;
  padding: 10px 0;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: inset 0 0 0 #cbced1, inset 0 -3px 0 #cbced1;
}
.form__content .user__box label {
  position: absolute;
  left: 0;
  top: 0;
  margin-bottom: 10px;
  padding: 10px 0;
  pointer-events: none;
  transition: var(--transition);
}
.form__content .user__box input:focus~label,
.form__content .user__box input:valid~label {
  top: -10px;
  left: 0;
  color: #459aad;
  font-size: 13px;
  letter-spacing: 1;
  font-weight: 400;
}
.form__content .btn__sub {
  padding: 8px 20px;
  border: none;
  outline: none;
  color: var(--floWhite);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: capitalize;
  background: #459aad;
  box-shadow: 3px 3px var(--darkLiver);
  transition: var(--transition);
}
.form__content .btn__sub:active {
  transform: scale(0.9)
}
.form__content .mtd {
  margin: 10px 0;
  margin-top: 3rem;
  text-align: left;
}

.form__content .checkout__select {
  width: 100%;
  margin: 10px 0;
}
.form__content .checkout__select .select__btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  padding: 4px 10px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.65) 0px 10px 15px -15px;
  border-radius: 26px;
}
.form__content .checkout__select .select__btn .arr__up {
  font-size: 20px;
  transform: rotate(90deg)
}

.checkout__select .select__list {
  position: absolute;
  left: 50%;
  top: 60px;
  width: 100%;
  padding: 0 15px;
  display: none;
  transform: translate(-50%,0);
}
.select__list.active {
  display: block;
}
.checkout__select .select__list .option {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  text-transform: capitalize;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.75) 0px 10px 15px -15px;
  transition: var(--transition);
  overflow: hidden;
}

.select__list .option:hover {
  /* From https://css.glass */
  background: #EAEAE8;

}
.select__list .option:nth-child(1) {
  border-radius: 8px 8px 0 0;
  box-shadow: none;
}
.select__list .option:nth-child(2) {
  box-shadow: none;
}
.select__list .option:nth-child(3) {
  border-radius: 0 0 8px 8px;
}
.select__list .option .option__text {
  display: none;
}
.select__list .option .option__text.active {
  display: block;
  animation: var(--animateDown);
}
.select__list .option .icon__pay {
  width: 30px;
  height: 30px;
  display: none;
}
.select__list .option .icon__pay.active {
  display: block;
  animation: var(--animateDown);
}
.select__list .option.option:nth-child(1) .icon__pay {
  background: url("assets/images/payment/bank.png") center no-repeat;
  background-size: cover;
}
.select__list .option.option:nth-child(2) .icon__pay {
  background: url("assets/images/payment/gopay.png") center no-repeat;
  background-size: cover;
}
.select__list .option.option:nth-child(3) .icon__pay {
  background: url("assets/images/payment/dana.png") center no-repeat;
  background-size: cover;
}


/* Checkout Finish - step 3 */

.checkout__finish {
  text-align: center;
}
.checkout__finish .checkout__title {
  margin-bottom: 1rem;
  font-size: 18px;
  font-weight: 700;
}
.checkout__finish .fd {
  color: var(--darkLiver);
  font-size: 15px;
  font-weight: 400;
}
.checkout__finish .checkout__metode {
  margin: 10px auto;
  padding: 10px;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}
.checkout__metode .item__box {
  width: 100%;
  padding: 10px 0;
  text-transform: capitalize;
  border-radius: 8px;
  box-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px #efeeee;
}
.checkout__metode .item__box p {
  font-weight: 400;
}
.checkout__metode .item__box > p b {
  margin-left: 1rem;
  font-size: 16px;
}
.checkout__metode .item__box .bCopy {
  width: 100%;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center
}
.checkout__metode .item__box button {
  border: 1px solid #000;
  outline: none;
  padding: 10px 15px;
  text-transform: capitalize;
  font-weight: 400;
  background: #fff;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.75) 0px 10px 15px -15px;
  cursor: pointer;
  transition: var(--transition);
}
.checkout__metode .item__box button:active {
  transform: scale(0.85);
}
.checkout__metode .item__box button > i {
  margin-right: .5rem;
}
.checkout__warning {
  margin: 10px 0;
  padding: 10px 0;
}
.checkout__warning .em {
  color: var(--seaBlue);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
}
.checkout__warning .btn__confirm {
  color: var(--seaBlue);
  font-size: 16px;
  font-weight: 400;
  padding: 10px;
  padding-bottom: 1rem;
}

.checkout__finish .btn__hm {
  border: 1px solid var(--darkLiver);
  outline: none;
  margin-bottom: 1rem;
  padding: 5px 10px;
  color: var(--eiriBlack);
  font-size: 17px;
  font-weight: 700;
  text-transform: capitalize;
  background: #fff;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.75) 0px 10px 15px -15px;
  transition: var(--transition);
}
.checkout__finish .btn__hm i {
  margin-right: .5rem;
  font-size: 16px;
}
.checkout__finish .btn__hm:active {
  transform: scale(0.8);
}

.landscape, .landscape h1 {
  display: none;
}
.landscape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
}
.landscape h1 {
  width: 600px;
  color: var(--darkLiver);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin: 10px auto;
  padding: 10px 20px;
  background: var(--jasMine);
  box-shadow: 8px 8px orangered;
}


/* Footer */

footer {
  position: fixed;
  left: 60%;
  bottom: 2%;
  transform: translate(-50%, 0);
  width: 100%;
}
footer p {
  font-size: 13px;
}
footer p a {
  color: var(--eiriBlack);
  text-decoration: none;
  margin-right: 2px;
  font-weight: 700;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  
  .menu__head .search__bar .search__loading {
    left: 13%;
    width: 130px;
  }
  
  .garis {
    left: 15%;
  }
  .garis2 {
    right: 15%;
  }
  .garis__item,
  .garis__item2 {
    width: 45px;
    height: 15px;
  }
  
  .bestseller__box {
    height: 450px;
    overflow: hidden;
  }
  
  footer p {
    width: 100%;
    font-size: 10px;
    font-style: italic;
  }
}
@media screen and (min-width: 600px) {
  .home__head, .home__screen, .menu__head.active, .menu__screen.active, .detail__screen.active, .checkout__screen.active, .bestseller__list__screen.active {
    display: none;
  }
  .landscape {
    display: flex;
  }
  .landscape h1 {
    display: block;
  }
}

@media (orientation: landscape) {
  .landscape {
    display: flex;
  }
  
  .landscape h1 {
    display: block;
  }
  
  .home__head, .home__screen, .menu__head.active, .menu__screen.active, .detail__screen, .checkout__screen.active, .bestseller__list__screen.active {
    display: none;
  }
 
}