// Checkout Page Styles

// ============================================
// Order Summary Sticky Positioning
// ============================================
.order-summary-sticky {
  position: sticky;
  top: 2rem;
}

// ============================================
// Product Thumbnail
// ============================================
.product-thumbnail {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}

// Save badge positioning adjustment
.badge.position-absolute {
  right: -0.5rem;
  top: -0.5rem;
}

// Billing cycle toggle - custom selected state
.btn-check:checked + .btn {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background-color: transparent !important;
}

// Mobile responsiveness for sticky
@media (max-width: 991.98px) {
  .order-summary-sticky {
    position: static;
  }
}

// Move reCAPTCHA badge to bottom left
.grecaptcha-badge {
  bottom: 0.5rem !important;
  left: 0.5rem !important;
  right: auto !important;
  width: 50px !important;
}

// PayPal button custom styling
.btn-paypal {
  --bs-btn-color: #333;
  --bs-btn-bg: #ffc439;
  --bs-btn-border-color: #ffc439;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #eabc53;
  --bs-btn-hover-border-color: #eabc53;
  --bs-btn-focus-shadow-rgb: 246, 198, 87;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #e8ad2e;
  --bs-btn-active-border-color: #e8ad2e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #333;
  --bs-btn-disabled-bg: #ffc439;
  --bs-btn-disabled-border-color: #ffc439;
}

// Ensure PayPal logo looks good on the yellow background
#pay-with-paypal img {
  filter: brightness(0.9);
}

// ============================================
// Loading States Enhancement for Bindings
// ============================================
// Smooth transitions when bindings update
// [data-wm-bind] {
//   transition: opacity 0.3s ease-in-out;
// }

// Animation for elements appearing via bindings
// [data-wm-bind*="@show"]:not([hidden]) {
//   animation: fadeIn 0.3s ease-in-out;
// }

// @keyframes fadeIn {
//   from {
//     opacity: 0;
//     transform: translateY(-5px);
//   }
//   to {
//     opacity: 1;
//     transform: translateY(0);
//   }
// }

// ============================================
// Discount Messages Animation
// ============================================
// [data-wm-bind*="checkout.discount"] {
//   &:not([hidden]) {
//     animation: slideDown 0.2s ease-out;
//   }
// }

// @keyframes slideDown {
//   from {
//     opacity: 0;
//     max-height: 0;
//   }
//   to {
//     opacity: 1;
//     max-height: 50px;
//   }
// }