/* Section look */
.cart-section { background: #f8f9fa; }           /* swap to your site bg if needed */
.cart-item + hr { opacity: .15; }

/* Quantity controls */
.qty-btn { width: 38px; height: 38px; line-height: 1; }
.qty-input { width: 72px; }

/* Mobile niceties */
@media (max-width: 575.98px) {
  .cart-item { text-align: left; }               /* keep labels aligned */
  .cart-item .qty { justify-content: flex-start; }
}

/* Optional: make section fill viewport without forcing overflow */
.cart-section { min-height: 100vh; }

/* Reset any MDB-only styles you might have carried over */
.select-input, .select-arrow { all: unset; }

/* Apply & Checkout button hover effect */
#apply-discount:hover,
#checkout-btn:hover {
  background-color: #f06324 !important;
  border-color: #f06324 !important;
  color: #fff !important;
}

/* Apply & Checkout button shared styles */
#apply-discount,
#checkout-btn {
  border-radius: 50px; /* adjust to 50px for pill shape */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover effect */
#apply-discount:hover,
#checkout-btn:hover {
  background-color: #f06324 !important;
  border-color: #f06324 !important;
  color: #fff !important;
  transform: translateY(-2px); /* subtle lift effect */
}

/* Custom WhatsApp/Checkout Button */
#whatsapp-checkout {
  background-color: #f06324; /* Bootstrap dark */
  color: #fff;
  border-radius: 50px; /* Rounded corners */
  padding: 10px;
  border: none;
  transition: all 0.3s ease;
}

#whatsapp-checkout:hover {
  background-color: #000000; /* Custom hover color */
  transform: scale(1.02); /* Slight zoom on hover */

}

/* Summary Card */
.card-body {
  background: #fafafa; /* light grey background */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px;
}

/* Summary Title */
.card-body h5 {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 15px;
}

/* Summary Rows */
#summary-items,
#summary-shipping,
#summary-total {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 8px 0;
}

/* Final Total Highlight */
#summary-total {
  background: #fff3ed; /* soft orange tint */
  padding: 12px;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #f06324; /* brand color */
}

#summary-items span:first-child,
#summary-shipping-label,
#discount-label {
  font-size: 1rem;         /* bigger */
  font-weight: 600;        /* semi-bold */
  text-transform: uppercase;
  color: #2b2929;             /* darker for better visibility */
}

#shipping {
  font-size: 1rem;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 30px;
  border: 1px solid #ccc;
}
#shipping:focus {
  border-color: #f06324;   /* highlight in your brand color */
  box-shadow: 0 0 4px rgba(240, 99, 36, 0.3);
}

#discount {
  font-size: 1rem;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: 8px;
}

#summary-items-total,
#summary-shipping {
  font-size: 1rem;
  font-weight: 600;
  color: #444;
}

/* Style dropdown itself */
#shipping {
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  appearance: none;               /* remove default OS arrow styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23f06324'><path d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* Focus effect */
#shipping:focus {
  border-color: #f06324;
  box-shadow: 0 0 6px rgba(240, 99, 36, 0.4);
  outline: none;
}

/* Dropdown options */
#shipping option {
  background: #fff;
  color: #333;
}

/* Selected option inside dropdown */
#shipping option:checked {
  background: #f06324;
  color: #fff;
}

/* Back to shop link */
.back-link {
  color: #f06324;              /* brand color */
  font-weight: 500;            /* semi-bold */
  transition: all 0.3s ease;   /* smooth hover */
  text-decoration: none;       /* clean by default */
}

.back-link:hover {
  color: #d94f1f;              /* darker shade on hover */
  text-decoration: underline;  /* underline on hover */
}