// 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;
}

// Quantity badge — force perfect circle
.quantity-badge {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  padding: 0;
}

// Billing cycle toggle
// overflow: visible is needed so the "Save X%" badge (position-absolute,
// translate-middle) isn't clipped by the btn's overflow: hidden.
// Scoped to #subscription-toggle to avoid affecting other buttons.
#subscription-toggle .btn {
  overflow: visible;
}

// Extra :checked specificity to beat classy theme's
// .btn-check:checked:checked + [class*="btn-outline-"] { background: var(--bs-btn-active-bg) !important }
.btn-check:checked:checked + .btn {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background: transparent !important;

  // Checkmark circle turns primary when selected
  .rounded-circle {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
  }
}

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

// ============================================
// Checkout Accordion (mobile collapsible sections)
// ============================================
// On mobile: standard Bootstrap accordion with +/- toggle
// On desktop (lg+): always expanded, toggle hidden
.checkout-accordion {
  .accordion-button {
    // Override theme active color — headings should be normal text, not primary/purple
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-btn-color: var(--bs-body-color);
    color: var(--bs-body-color);

    &:not(.collapsed) {
      background-color: transparent;
      box-shadow: none;
      color: var(--bs-body-color);

      // When expanded, add bottom spacing before content
      margin-bottom: 0.75rem;
    }
  }

  // Summary line: visible when collapsed, hidden when expanded
  .checkout-accordion-summary {
    display: block;
    font-size: 0.8125rem;
  }
  .accordion-button:not(.collapsed) ~ .checkout-accordion-summary {
    display: none;
  }
}

// Desktop: force sections open, hide toggle, hide summaries
@media (min-width: 992px) {
  .checkout-accordion {
    .accordion-button::after {
      display: none;
    }
    .accordion-button {
      pointer-events: none;
      // Restore heading-to-content spacing on desktop
      // (HTML has .collapsed class but content is forced open via CSS)
      margin-bottom: 1.25rem;
    }
    // Force all sections open on desktop regardless of HTML collapsed state
    .accordion-collapse {
      display: block !important;
      height: auto !important;
    }
    // Summaries are mobile-only
    .checkout-accordion-summary {
      display: none !important;
    }
  }
}

// Mobile: reduce main padding, smaller payment buttons, tighter accordions
@media (max-width: 991.98px) {
  // Reduce py-5 from cover layout on checkout
  #checkout-content {
    margin-top: -1.5rem;
  }

  // Tighter padding on accordion sections
  .checkout-accordion .accordion-item.card-body {
    padding: 0.75rem;
  }

  // Scale payment buttons down to btn-md sizing on mobile
  .payment-button {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 1rem;
  }
}

// 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;
//   }
// }