/* coupon.css - styles for coupon UI */

.applied-coupon-info {
  margin-top: 8px;
  display: none;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #222;
}

/* Status text (error / success) — JS will still set color inline for urgency,
   but we provide defaults here so it looks ok if JS doesn't set color. */
#couponStatus {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  color: #333;
  min-height: 1.25em; /* keep layout stable when empty */
}

/* Visual replacement for price: original (struck) and new (prominent) */
.paymentamountcalc {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  vertical-align: middle;
}

/* original price (struck through, subtle) */
.paymentamountcalc .coupon-orig-amount {
  text-decoration: line-through;
  opacity: 0.75;
  font-size: 0.95em;
  margin-right: 8px;
  transition: opacity 220ms ease, transform 220ms ease;
}

/* new price (bold & prominent) */
.paymentamountcalc .coupon-new-amount {
  font-weight: 700;
  font-size: 1.15em;
  color: #5D2E82; /* purple similar to your inline color */
  transition: transform 220ms cubic-bezier(.2,.9,.3,1), opacity 220ms ease;
}

/* small badge for saved amount (optional — JS can inject) */
.coupon-saved-badge {
  display: inline-block;
  background: rgba(93,46,130,0.08);
  color: #5D2E82;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.82rem;
  margin-left: 10px;
  vertical-align: middle;
  border: 1px solid rgba(93,46,130,0.12);
}

/* show applied info */
.coupon-applied-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* simple entrance animation */
.coupon-animate-in {
  animation: couponFadeIn 300ms ease both;
}
@keyframes couponFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* responsive tweaks */
@media (max-width: 480px) {
  .paymentamountcalc .coupon-new-amount { font-size: 1.05em; }
  .paymentamountcalc .coupon-orig-amount { font-size: 0.9em; }
}