.relative {
  position: relative;
}
.hide {
  display: none;
}
.p-1 {
  padding: calc(var(--spacing) / 4);
}

.p-2 {
  padding: calc(var(--spacing) / 2);
}

.p-3 {
  padding: var(--spacing);
}

.px-1 {
  padding-left: calc(var(--spacing) / 4);
  padding-right: calc(var(--spacing) / 4);
}

.py-1 {
  padding-top: calc(var(--spacing) / 4);
  padding-bottom: calc(var(--spacing) / 4);
}

/* Margin Utilities */
.m-1 {
  margin: calc(var(--spacing) / 4);
}

.m-2 {
  margin: calc(var(--spacing) / 2);
}

.m-3 {
  margin: var(--spacing);
}

.mx-1 {
  margin-left: calc(var(--spacing));
  margin-right: calc(var(--spacing));
}

.my-1 {
  margin-top: calc(var(--spacing));
  margin-bottom: calc(var(--spacing));
}

.pr-10 {
  padding-right: 10px;
}
.mr-10 {
  margin-right: 10px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-60 {
  margin-top: 60px;
}
.mt-70 {
  margin-top: 70px;
}
.mt-80 {
  margin-top: 80px;
}
.mt-90 {
  margin-top: 90px;
}
.mt-1x {
  margin-top: 100px;
}
.ml-10 {
  margin-left: 10px;
}
.inline-b{
  display: inline-block;
}
.t-danger {
  color: red;
}
.t-success {
  color: #146c14;
}
.white {
    background: #eee;
    padding: 10px 20px;
}
.red {
	background: #ac0404;
}

.green {
	background: #146c14;
}

.blue {
	background: #0a4dbb;
}
.opa-30 {
  opacity: 0.3;
}
.opa-50 {
  opacity: 0.5;
}
.opa-80 {
  opacity: 0.8;
}
small {
  font-size: 12px;
}
.mb-5 {
  margin-bottom: 5px
}
.mb-10 {
  margin-bottom: 10px
}
.mb-20 {
  margin-bottom: 20px
}
.mb-30 {
  margin-bottom: 30px
}
.mb-40 {
  margin-bottom: 40px
}
.mb-50 {
  margin-bottom: 50px
}
/* Text Alignment */
.t-center {
  text-align: center;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

/* Flex Utilities */
.d-flex {
  display: flex;
}

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

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

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

.flex-wrap {
  flex-wrap: wrap;
}

.align-center {
  align-items: center;
}

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

/* Background Utilities */
.bg-light {
  background-color: #f4f4f4;
}

.bg-dark {
  background-color: #333;
}

.bg-primary {
  background-color: #007bff;
}

.bg-secondary {
  background-color: #6c757d;
}

/* Font Utilities */
.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}
.pointer {
    cursor: pointer;
}
.payment-methods .grid {
	margin: 10px 0;
	background: #f1f1f1;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-radius: 20px;
}
.l-inline li {
 display: inline-block;
	margin-right: 20px;
}
#confirmPaymentMethod {
	padding: 10px 36px
}
/* Responsive Breakpoints */
:root {
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

@media (max-width: var(--breakpoint-sm)) {
  .text-center {
    text-align: left; /* Override di layar kecil */
  }
  .d-flex {
    display: block; /* Mengubah display menjadi block di layar kecil */
  }
}

@media (min-width: var(--breakpoint-md)) {
  .grid-responsive {
    grid-template-columns: repeat(3, 1fr); /* 3 kolom pada layar menengah */
  }
}

@media (min-width: var(--breakpoint-lg)) {
  .grid-responsive {
    grid-template-columns: repeat(4, 1fr); /* 4 kolom pada layar besar */
  }
}

/* Animations */

.rotate-left {

   transform: perspective(500px) rotateY(-42deg);
   animation-name: rotate-left;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}

@keyframes rotate-left {
   0% {
       transform: perspective(500px) rotateY(-42deg);
   }
   50% {
       transform: perspective(500px) rotateY(0deg);
   }
   100% {
       transform: perspective(500px) rotateY(-42deg);
   }
}

/* Effect for rotating right */
.rotate-right {

   transform: perspective(500px) rotateY(42deg);
   animation-name: rotate-right;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}

@keyframes rotate-right {
   0% {
       transform: perspective(500px) rotateY(42deg);
   }
   50% {
       transform: perspective(500px) rotateY(0deg);
   }
   100% {
       transform: perspective(500px) rotateY(42deg);
   }
}
.rotate-up {

   transform: perspective(500px) rotateX(20deg);
   animation-name: rotate-up;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}

@keyframes rotate-up {
   0% {
       transform: perspective(500px) rotateX(20deg);
   }
   50% {
       transform: perspective(500px) rotateX(0deg);
   }
   100% {
       transform: perspective(500px) rotateX(20deg);
   }
}
.rotate-down {

   transform: perspective(500px) rotateX(-20deg);
   animation-name: rotate-down;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}

@keyframes rotate-down {
   0% {
       transform: perspective(500px) rotateX(-20deg);
   }
   50% {
       transform: perspective(500px) rotateX(0deg);
   }
   100% {
       transform: perspective(500px) rotateX(-20deg);
   }
}
.zoom-in-out {

   animation-name: zoom-in-out;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}

@keyframes zoom-in-out {
   0% {
       transform: scale(1);
   }
   50% {
       transform: scale(1.1);
   }
   100% {
       transform: scale(1);
   }
}
.rotate-diagonal {

   transform: perspective(500px) rotateX(20deg) rotateY(20deg);
   animation-name: rotate-diagonal;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}

@keyframes rotate-diagonal {
   0% {
       transform: perspective(500px) rotateX(20deg) rotateY(20deg);
   }
   50% {
       transform: perspective(500px) rotateX(0deg) rotateY(0deg);
   }
   100% {
       transform: perspective(500px) rotateX(20deg) rotateY(20deg);
   }
}
.shake {

   animation-name: shake;
   animation-iteration-count: infinite;
   animation-duration: 1s;
   animation-fill-mode: forwards;
}

@keyframes shake {
   0%, 100% {
       transform: translateX(0);
   }
   25% {
       transform: translateX(-5px);
   }
   50% {
       transform: translateX(5px);
   }
   75% {
       transform: translateX(-5px);
   }
}
.flip {

   transform: perspective(500px) rotateY(0deg);
   animation-name: flip;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}

@keyframes flip {
   0% {
       transform: perspective(500px) rotateY(0deg);
   }
   50% {
       transform: perspective(500px) rotateY(180deg);
   }
   100% {
       transform: perspective(500px) rotateY(360deg);
   }
}
.float {

   animation-name: float;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
}

@keyframes float {
   0%, 100% {
       transform: translateY(0);
   }
   50% {
       transform: translateY(-10px);
   }
}
.bounce {

   animation-name: bounce;
   animation-iteration-count: infinite;
   animation-duration: 2s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
}

@keyframes bounce {
   0%, 100% {
       transform: translateY(0);
   }
   50% {
       transform: translateY(-15px);
   }
}
.come-in {
 transform: translateY(250px);
 animation: come-in 1s ease forwards;
}
.come-in:nth-child(odd) {
 animation-duration: 0.9s;
}
.already-visible {
 transform: translateY(0);
 animation: none;
}

@keyframes come-in {
 to { transform: translateY(0); }
}