.gradient-bg-1 {
  background-image: linear-gradient(
    to right,
    #ff8612,
    #b39900,
    #6e9b35,
    #309362,
    #0e857d
  );
}

.gradient-bg-1-tf {
  background-image: linear-gradient(
    to right,
    #fef3e7,
    #f6f4e7,
    #eff4ea,
    #e9f4ee,
    #e7f3f1
  );
}

.gradient-bg-2-tf {
  background-image: linear-gradient(
    to right top,
    #e7f3f1,
    #e9f4ee,
    #eff4ea,
    #f6f4e7,
    #fef3e7
  );
}

.gradient-bg-2 {
  background-image: linear-gradient(
    to right,
    #0e857d,
    #24906b,
    #50984e,
    #7f9c2c,
    #b39900,
    #cc9500,
    #e58f00,
    #ff8612,
    #ff8612,
    #ff8612,
    #ff8612,
    #ff8612
  );
}

.gradient-bg-3 {
  background-image: linear-gradient(
    to right,
    #0e857d,
    #24906b,
    #50984e,
    #7f9c2c,
    #b39900,
    #cc9500,
    #e58f00,
    #ff8612,
    #ff8612,
    #ff8612,
    #ff8612,
    #ff8612
  );
  height: 150px;
}

.gradient-bg-4 {
  background-image: linear-gradient(
    to right,
    #0e857d,
    #328f87,
    #4a9991,
    #5ea49b,
    #71aea6
  );
}

.gradient-monochrome {
  background-image: linear-gradient(
    to right top,
    #fdfafa,
    #fbf8f9,
    #f8f7f8,
    #f6f6f6,
    #f4f4f4
  );
}

.gradient-bg-4.selected {
  background-image: linear-gradient(
    to right,
    #ff8612,
    #ff922c,
    #ff9d41,
    #ffa853,
    #ffb266
  );
}

.bg-pilih-level {
  background-image: linear-gradient(
    to right,
    #0e857d,
    #24906b,
    #50984e,
    #7f9c2c,
    #b39900,
    #cc9500,
    #e58f00,
    #ff8612,
    #ff8612,
    #ff8612,
    #ff8612,
    #ff8612
  );
}

.bg-pilih-level.selected {
  background-image: linear-gradient(
    to right top,
    #0e857d,
    #1a8e71,
    #3a955e,
    #5b9a46,
    #7f9c2c
  );
}

.bg-pilih-barang {
  background-image: linear-gradient(
    to bottom,
    #0e857d,
    #009e8b,
    #00b896,
    #00d19d,
    #12eb9f
  );
}

.bg-pilih-barang.selected {
  background-image: linear-gradient(
    to bottom,
    #0e857d,
    #117167,
    #115e53,
    #0f4b40,
    #0b392e
  );
}

.gradient-bg-5 {
  background-image: linear-gradient(
    to right,
    #ff8612,
    #ff922c,
    #ff9d41,
    #ffa853,
    #ffb266
  );
}

.bg-fire {
  background-image: linear-gradient(
    to right,
    #6b1500,
    #721601,
    #791701,
    #801901,
    #871a01,
    #8f2301,
    #982c01,
    #a03400,
    #aa4500,
    #b45500,
    #bd6400,
    #c67403
  );
}

.bg-hijau {
  background-color: #0e857d !important;
}

.hijau {
  color: #0e857d !important;
}

.bg-kuning {
  background-color: #ff8612 !important;
}

.text-black-max {
  color: black !important;
  z-index: 999;
}

.bg-transparent {
  background-color: transparent !important;
}

.card-x {
  border: 1px solid #ddd;
  transition: 0.3s;
  background-image: linear-gradient(
    to right,
    #fef3e7,
    #f6f4e7,
    #eff4ea,
    #e9f4ee,
    #e7f3f1
  );
}
.card-x:hover {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
.card-title {
  font-size: 1.2rem;
  font-weight: bold;
}
.harga {
  color: #ff8612;
  font-weight: bold;
  text-decoration-line: line-through;
  text-decoration-thickness: 3px;
}

.harga-discount {
  color: #0e857d;
  font-weight: bold;
}

.qty-input {
  width: 60px;
  text-align: center;
  background-color: transparent;
  border: none;
  color: #000;
  border-bottom: 2px solid #ff8612;
  border-radius: 0px;
  outline: none;
  padding: 5px;
  transition: border-bottom-color 0.3s ease;
}

.qty-input:focus {
  color: #000;
  border-bottom: 2px solid #0e857d;
  background-color: transparent;
}

/* --- Container Utama --- */
.bg-login {
  background-image: linear-gradient(
    to right,
    #fef3e7,
    #f6f4e7,
    #eff4ea,
    #e9f4ee,
    #e7f3f1
  );
  /* min-height: 100vh; Minimal setinggi tinggi viewport */
}

.login-card {
  background: #ffffff4d;
  max-width: 400px;
  width: 100%;
  margin: auto;
  padding: 10px;
}

.login-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.login-form-control {
  width: 100%;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 0px;
  font-size: 16px;
  color: #000 !important;
  background-image: linear-gradient(
    to right,
    #fef3e7,
    #f6f4e7,
    #eff4ea,
    #e9f4ee,
    #e7f3f1
  );
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-form-control:focus {
  color: #000 !important;
  border-bottom: 2px solid #0e857d;
  outline: none;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

.login-form-control::placeholder {
  color: #999;
  opacity: 1;
}

.login-form-control:focus::placeholder {
  color: #0e857d;
  opacity: 0.7;
}

.payment-card {
  cursor: pointer;
  border: 2px solid #e7f3f1;
  background-color: #e7f3f1;
  border-radius: 10px;
  transition: 0.3s;
  padding: 10px;
}

.payment-card:hover {
  border-color: #0e857d;
}

.payment-card input {
  display: none;
}

.payment-card input:checked + .card-body {
  border: 2px solid #ffc48d;
  background-image: linear-gradient(
    to right,
    #fef3e7,
    #f6f4e7,
    #eff4ea,
    #e9f4ee,
    #e7f3f1
  );
}

.card-header-x {
  padding: 0.6rem;
  background-image: linear-gradient(
    to right,
    #ff8612,
    #ff922c,
    #ff9d41,
    #ffa853,
    #ffb266
  );
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem 0.25rem 0 0;
}

.card-header-y {
  padding: 0.6rem;
  /* background-image: linear-gradient(
    to right top,
    #0e857d,
    #1a8e71,
    #3a955e,
    #5b9a46,
    #7f9c2c
  ); */
  background-color: #0e857d !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem 0.25rem 0 0;
}

.custom-price-display {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  color: #0e857d;
  background-image: linear-gradient(
    to right,
    #fef3e7,
    #fff4e1,
    #fff5dc,
    #fff7d7,
    #fff9d2,
    #f8fbd4,
    #f2fcd7,
    #ebfdda,
    #e4fce3,
    #e1faeb,
    #e2f7ef,
    #e7f3f1
  );
  border-radius: 5px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Custom Pagination Styles */
.pagination .page-link {
  background-color: #e7f3f1;
  color: #0e857d;
  border: 1px solid #e7f3f1;
  transition: all 0.3s ease;
  padding: 0.3rem 0.5rem;
  margin: 0 2px;
  border-radius: 0.375rem;
}

/* Hover State */
.pagination .page-link:hover {
  background-color: #ff8612;
  color: #fef3e7;
  border-color: #ff8612;
}

/* Active State (current page) */
.pagination .page-item.active .page-link {
  background-color: #ff8612 !important;
  border-color: #ff8612 !important;
  color: #fef3e7 !important;
}

/* Focus State */
.pagination .page-link:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* Disabled State */
.pagination .page-item.disabled .page-link {
  background-color: #f8f9fa;
  color: #6c757d;
  border-color: #dee2e6;
  opacity: 0.7;
}

.bg-1 {
  background-image: linear-gradient(
    to right,
    #0e857d,
    #24906b,
    #50984e,
    #7f9c2c,
    #b39900,
    #cc9500,
    #e58f00,
    #ff8612,
    #ff8612,
    #ff8612,
    #ff8612,
    #ff8612
  );
  color: white;
}

.bg-2 {
  background-color: #0f766e; /* Teal */
  color: white;
}

.bg-3 {
  background-color: #dc2626; /* Red */
  color: white;
}

.bg-4 {
  background-color: #9333ea; /* Purple */
  color: white;
}

.bg-5 {
  background-color: #2563eb; /* Blue */
  color: white;
}

.bg-6 {
  background-color: #d97706; /* Amber */
  color: white;
}

.bg-7 {
  background-color: #16a34a; /* Green */
  color: white;
}

.bg-8 {
  background-color: #be123c; /* Rose */
  color: white;
}

.bg-9 {
  background-color: #7c3aed; /* Violet */
  color: white;
}

.bg-10 {
  background-color: #0e7490; /* Cyan */
  color: white;
}


.btn-plus {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  color: #333;
  padding: 2px 8px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  border-radius: 0; /* No rounded edges */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-plus:hover {
  background-color: #e0e0e0;
  color: #000;
}

.btn-plus:active {
  background-color: #d5d5d5;
}