/* ===== TemanVPS Checkout Steps ===== */
.tvps-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  align-items: center;
  margin: 16px 0 24px;
}

.tvps-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e6e8ef;
  background: #fff;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  min-height: 44px;
}
.tvps-step .num {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; border: 2px solid #cfd6e4;
}
.tvps-step .label { font-weight: 600; font-size: 14px; color: #2b2f3b; }

.tvps-step.done { background: #f0f7ff; border-color: #bcd8ff; }
.tvps-step.done .num { border-color: #2a6ef2; color: #2a6ef2; }
.tvps-step.active { background: #e8f3ff; border-color: #2a6ef2; box-shadow: 0 2px 10px rgba(42,110,242,.15); }
.tvps-step.active .num { background: #2a6ef2; color:#fff; border-color:#2a6ef2; }
.tvps-step.disabled { opacity: .55; pointer-events: none; }

.tvps-step.nonlink { cursor: default; }

.tvps-steps .tvps-progress {
  grid-column: 1 / -1;
  position: absolute; left: 0; right: 0; bottom: -6px; height: 3px;
  background: #eef1f7; border-radius: 999px; overflow: hidden;
}
.tvps-steps .tvps-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2a6ef2, #00a2ff);
  transition: width .25s ease;
}

/* Mobile */
@media (max-width: 768px) {
  .tvps-steps { grid-template-columns: repeat(5, minmax(0,1fr)); gap: .5rem; }
  .tvps-step .label { display: none; }   /* tampilkan angka saja untuk ringkas */
  .tvps-step { justify-content: center; padding: 8px 6px; }
}

#order-standard_cart .cart-sidebar {
    float: left;
    width: 0%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
#order-standard_cart .cart-body {
    float: right;
    width: 100%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* ==== Billing Cycle as Cards ==== */
/* Grid kartu (biarkan seperti sebelumnya jika sudah ada) */
.dw-bc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}

/* Kartu pilihan */
.dw-bc-card{
  position:relative; /* penting utk absolute input */
  display:flex;align-items:center;gap:10px;
  border:1.5px solid #e6e8ef;border-radius:12px;
  padding:14px 16px;background:#fff;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
  min-height:70px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.dw-bc-card:hover{border-color:#bcd8ff;box-shadow:0 4px 14px rgba(42,110,242,.08)}
.dw-bc-card.active{border-color:#2a6ef2;box-shadow:0 6px 18px rgba(42,110,242,.12)}

/* Radio input: menutupi seluruh kartu agar klik di mana pun kena */
.dw-bc-card input[type=radio]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; cursor:pointer; z-index:2;
}

/* Titik bulat custom (visual) — tidak bergantung pada appearance radio */
.dw-bc-dot{
  position:relative; z-index:1;
  width:18px;height:18px;border:2px solid #cfd6e4;border-radius:50%;
  flex:0 0 18px; display:none;
}
.dw-bc-dot::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:transparent;
}
/* Saat radio checked, ubah visual dot */
.dw-bc-card input[type=radio]:checked ~ .dw-bc-dot{ border-color:#2a6ef2; }
.dw-bc-card input[type=radio]:checked ~ .dw-bc-dot::after{ background:#2a6ef2; }

/* Teks di kartu */
.dw-bc-meta{ line-height:1.25 }
.dw-bc-title{ font-weight:700; font-size:14px; color:#1f2430 }
.dw-bc-price{ font-weight:800; font-size:16px; margin-top:2px }
.dw-bc-setup{ font-size:12px; color:#6b7280; margin-top:2px }



/* BUTTON */
#btnCompleteProductConfig {
	margin-bottom:40px;
}

/* Sembunyikan elemen pada layar mobile (≤ 767px) */
@media (max-width: 767.98px) {
  .u-hide-mobile { 
    display: none !important;
  }
}

/* (Opsional) Kebalikan: hanya tampil di mobile */
.show-only-mobile { display: none !important; }
@media (max-width: 767.98px) {
  .show-only-mobile { display: block !important; } /* ganti ke block/inline-flex sesuai kebutuhan */
}



/* ORDER SUMMARY */
:root{
  --brand:#2a6ef2;            /* ganti sesuai warna logo */
  --brand-weak:rgba(42,110,242,.12);
}
#orderSummary .order-summary{
  border:2px solid var(--brand);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px var(--brand-weak);
}
#orderSummary .order-summary h2{
  background:var(--brand);
  color:#fff !important;
  font-size:18px !important;
  margin:0; padding:10px 14px;
}
#orderSummary .summary-container{ padding:10px 14px 14px; }
/* ====== Ringkasan Orderan: typografi lebih besar & nyaman dibaca ====== */
#orderSummary .order-summary{
  border-radius:12px;
  overflow:hidden;
}

/* Judul box */
#orderSummary .order-summary h2{
  font-size: 20px;           /* sebelumnya ~16–18 */
  line-height: 1.25;
  padding: 12px 16px;
}

/* Info produk & baris-baris harga */
#orderSummary .product-name{ 
  font-size: 16px;
  font-weight: 700;
}
#orderSummary .product-group{
  font-size: 13px;
  color: #6b7280;
  display:block;
  margin-top: 2px;
}

#orderSummary .summary-container{
  font-size: 15px;           /* konten baris: label & angka */
  line-height: 1.4;
  padding: 12px 16px 14px;
}
#orderSummary .summary-container .clearfix{
  padding: 6px 0;            /* beri ruang antar baris */
  border-color: #eef2f7;     /* haluskan garis pemisah jika ada */
}
#orderSummary .summary-container .pull-right,
#orderSummary .summary-container .float-right{
  font-weight: 700;          /* angka lebih tegas */
}

#orderSummary .total-due-today .amt{
  font-size: 34px;           /* utamakan angka total */
  font-weight: 800;
  letter-spacing: .2px;
}
#orderSummary .total-due-today span:not(.amt){
  font-size: 12px;
  color:#6b7280;
}

/* Responsif (mobile) */
@media (max-width: 768px){
  #orderSummary .order-summary h2{ font-size: 18px; }
  #orderSummary .summary-container{ font-size: 14px; }
  #orderSummary .total-due-today .amt{ font-size: 28px; }
}