#message_holder
{
	text-align:center;
	margin-top:10px;
	font-weight:bold;
}

.progress-container {
  width: 300px; 
  background-color: #f5c7c7; 
  border-radius: 0px;
  overflow: hidden;
  height: 8px;
  margin:10px auto;
 
}

.progress-bar {
  height: 100%;
  background-color: var(--color-red); 
  width: 25%; 
  transition: width 0.3s ease;
}

.step-text {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}


.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
  position:relative;
}

.cart-icon {
  width: 40px;
  height: 40px;
  display: none;
}

.cart-btn .cart-badge::before {
  content: attr(data-count);
}


.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: #d2232a;
  color: #fff;
  font: 600 12px/18px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border-radius: 999px; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* show number by using badge's own data-count attribute */
.cart-badge::before {
  content: attr(data-count);
}

/* hide badge when its own data-count is "0" OR missing */
.cart-badge[data-count="0"],
.cart-badge:not([data-count]) {
  display: none;
}

/* optional: if you want to also hide when empty string */
.cart-badge[data-count=""] { display: none; }




.cart-list, #cart_total {
  width:500px;
  max-width:90%;
	margin:0px auto;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}

.cart-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cart_item_qty_btn {
  background: none;
  border: 0;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: none;
}

.cart-name {
  font-weight: normal;
}

.cart-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cart-price {
  font-weight: normal;
}

.cart_item_delete {
  cursor: pointer;
  color: #d2232a;
  font-weight: bold;
}

#cart_empty
{
	    margin-top: 30px;
    font-size: var(--font-xs);
    cursor:pointer;
}



#checkout_confirm
{
	width:500px;
	margin:10px auto;
}