body {
  font-family: "Cairo", sans-serif;
}
@media (max-width: 768px) {
  body {
    padding-bottom: 48px;
  }
}

/*
* Buttons
*/
.btn-primary {
  background-color: var(--bs-primary)!important;
  border-color: var(--bs-primary)!important;
  color: #fff;
}
.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}
.btn-secondary {
  background-color: var(--bs-secondary)!important;
  border-color: var(--bs-secondary)!important;
  color: #fff;
}
.btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--bs-secondary) !important;
  color: var(--bs-secondary) !important;
}
.btn-gradient {
  background: var(--bs-primary);
  border: none;
  border-radius: 25px;
  color: white;
  transition: all 0.3s ease;
}
.moving-button {
  animation: moveLeftRight .8s ease-in-out infinite;
}
@keyframes moveLeftRight {
  0% {transform: translateX(-10px);}
  50% {transform: translateX(10px);}
  100% {transform: translateX(-10px);}
}

/*
* Backgrounds
*/
.bg-primary {
  background-color: var(--bs-primary) !important;
}
.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

/*
* Typography
*/
.text-primary {
  color: var(--bs-primary) !important;
}

/*
* Alerts
*/
.bottom-alert.alert {
  position: fixed;
  bottom: 0px;
  width: 100%;
  margin-bottom: 0px;
  border-radius: 0px;
  color: #fff;
  border: none;
}
.bottom-alert.alert.alert-danger {
  background-color: var(--bs-danger);
}
.bottom-alert.alert.alert-success {
  background-color: var(--bs-success);
}

/*
* Product Page
*/
.fixed-order-btn {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 1000;
}
.product-image {
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
}
.variant-btn {
  position: relative;
  padding: 16px;
}
.variant-btn.active::after {
  content: "✔";
  color: #fff;
  position: absolute;
  left: -10px;
  top: -12px;
  font-size: 15px;
  background-color: var(--bs-success);
  width: 28px;
  height: 28px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}