{"version":3,"sources":["payment/checkout/index.scss"],"names":[],"mappings":"AAKA,sBACE,SAAA,OACA,IAAA,KAMF,mBACE,MAAA,KACA,OAAA,KACA,UAAA,KACA,WAAA,KAIF,gBACE,MAAA,OACA,OAAA,OACA,QAAA,KACA,YAAA,OACA,gBAAA,OACA,UAAA,OACA,QAAA,EAOF,0BACE,SAAA,QAGF,wBACE,aAAA,4BACA,MAAA,4BACA,iBAAA,sBAGA,wCACE,iBAAA,4BACA,MAAA,0BAKJ,4BACE,sBACE,SAAA,QAUF,sCAEE,4BAAA,qBACA,yBAAA,qBACA,MAAA,qBAEA,sDACE,iBAAA,YACA,WAAA,KACA,MAAA,qBAGA,cAAA,OAKJ,gDACE,QAAA,MACA,UAAA,SAEF,kFACE,QAAA,KAKJ,yBAEI,6CACE,QAAA,KAEF,sCACE,eAAA,KAGA,cAAA,QAGF,wCACE,QAAA,gBACA,OAAA,eAGF,gDACE,QAAA,gBAMN,4BAEE,kBACE,WAAA,QAIF,8CACE,QAAA,OAIF,gBACE,mBAAA,SACA,mBAAA,QACA,mBAAA,MAKJ,kBACE,OAAA,gBACA,KAAA,gBACA,MAAA,eACA,MAAA,eAIF,YACE,eAAA,KACA,YAAA,QACA,sBAAA,QACA,qBAAA,KACA,kBAAA,QACA,4BAAA,QACA,0BAAA,GAAA,CAAA,GAAA,CAAA,GACA,sBAAA,KACA,mBAAA,QACA,6BAAA,QACA,uBAAA,MAAA,EAAA,IAAA,IAAA,qBACA,wBAAA,KACA,qBAAA,QACA,+BAAA","file":"pages/payment/checkout/index.bundle.css","sourcesContent":["// Checkout Page Styles\n\n// ============================================\n// Order Summary Sticky Positioning\n// ============================================\n.order-summary-sticky {\n  position: sticky;\n  top: 2rem;\n}\n\n// ============================================\n// Product Thumbnail\n// ============================================\n.product-thumbnail {\n  width: 60px;\n  height: 60px;\n  min-width: 60px;\n  min-height: 60px;\n}\n\n// Quantity badge — force perfect circle\n.quantity-badge {\n  width: 1.5rem;\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.75rem;\n  padding: 0;\n}\n\n// Billing cycle toggle\n// overflow: visible is needed so the \"Save X%\" badge (position-absolute,\n// translate-middle) isn't clipped by the btn's overflow: hidden.\n// Scoped to #subscription-toggle to avoid affecting other buttons.\n#subscription-toggle .btn {\n  overflow: visible;\n}\n\n.btn-check:checked + .btn {\n  border-color: var(--bs-primary) !important;\n  color: var(--bs-primary) !important;\n  background-color: transparent !important;\n\n  // Checkmark circle turns primary when selected\n  .rounded-circle {\n    background-color: var(--bs-primary) !important;\n    color: var(--bs-white) !important;\n  }\n}\n\n// Mobile responsiveness for sticky\n@media (max-width: 991.98px) {\n  .order-summary-sticky {\n    position: static;\n  }\n}\n\n// ============================================\n// Checkout Accordion (mobile collapsible sections)\n// ============================================\n// On mobile: standard Bootstrap accordion with +/- toggle\n// On desktop (lg+): always expanded, toggle hidden\n.checkout-accordion {\n  .accordion-button {\n    // Override theme active color — headings should be normal text, not primary/purple\n    --bs-accordion-active-color: var(--bs-body-color);\n    --bs-accordion-btn-color: var(--bs-body-color);\n    color: var(--bs-body-color);\n\n    &:not(.collapsed) {\n      background-color: transparent;\n      box-shadow: none;\n      color: var(--bs-body-color);\n\n      // When expanded, add bottom spacing before content\n      margin-bottom: 0.75rem;\n    }\n  }\n\n  // Summary line: visible when collapsed, hidden when expanded\n  .checkout-accordion-summary {\n    display: block;\n    font-size: 0.8125rem;\n  }\n  .accordion-button:not(.collapsed) ~ .checkout-accordion-summary {\n    display: none;\n  }\n}\n\n// Desktop: force sections open, hide toggle, hide summaries\n@media (min-width: 992px) {\n  .checkout-accordion {\n    .accordion-button::after {\n      display: none;\n    }\n    .accordion-button {\n      pointer-events: none;\n      // Restore heading-to-content spacing on desktop\n      // (HTML has .collapsed class but content is forced open via CSS)\n      margin-bottom: 1.25rem;\n    }\n    // Force all sections open on desktop regardless of HTML collapsed state\n    .accordion-collapse {\n      display: block !important;\n      height: auto !important;\n    }\n    // Summaries are mobile-only\n    .checkout-accordion-summary {\n      display: none !important;\n    }\n  }\n}\n\n// Mobile: reduce main padding, smaller payment buttons, tighter accordions\n@media (max-width: 991.98px) {\n  // Reduce py-5 from cover layout on checkout\n  #checkout-content {\n    margin-top: -1.5rem;\n  }\n\n  // Tighter padding on accordion sections\n  .checkout-accordion .accordion-item.card-body {\n    padding: 0.75rem;\n  }\n\n  // Scale payment buttons down to btn-md sizing on mobile\n  .payment-button {\n    --bs-btn-padding-y: 0.375rem;\n    --bs-btn-padding-x: 0.75rem;\n    --bs-btn-font-size: 1rem;\n  }\n}\n\n// Move reCAPTCHA badge to bottom left\n.grecaptcha-badge {\n  bottom: 0.5rem !important;\n  left: 0.5rem !important;\n  right: auto !important;\n  width: 50px !important;\n}\n\n// PayPal button custom styling\n.btn-paypal {\n  --bs-btn-color: #333;\n  --bs-btn-bg: #ffc439;\n  --bs-btn-border-color: #ffc439;\n  --bs-btn-hover-color: #333;\n  --bs-btn-hover-bg: #eabc53;\n  --bs-btn-hover-border-color: #eabc53;\n  --bs-btn-focus-shadow-rgb: 246, 198, 87;\n  --bs-btn-active-color: #333;\n  --bs-btn-active-bg: #e8ad2e;\n  --bs-btn-active-border-color: #e8ad2e;\n  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n  --bs-btn-disabled-color: #333;\n  --bs-btn-disabled-bg: #ffc439;\n  --bs-btn-disabled-border-color: #ffc439;\n}\n\n// Ensure PayPal logo looks good on the yellow background\n#pay-with-paypal img {\n  filter: brightness(0.9);\n}\n\n// ============================================\n// Loading States Enhancement for Bindings\n// ============================================\n// Smooth transitions when bindings update\n// [data-wm-bind] {\n//   transition: opacity 0.3s ease-in-out;\n// }\n\n// Animation for elements appearing via bindings\n// [data-wm-bind*=\"@show\"]:not([hidden]) {\n//   animation: fadeIn 0.3s ease-in-out;\n// }\n\n// @keyframes fadeIn {\n//   from {\n//     opacity: 0;\n//     transform: translateY(-5px);\n//   }\n//   to {\n//     opacity: 1;\n//     transform: translateY(0);\n//   }\n// }\n\n// ============================================\n// Discount Messages Animation\n// ============================================\n// [data-wm-bind*=\"checkout.discount\"] {\n//   &:not([hidden]) {\n//     animation: slideDown 0.2s ease-out;\n//   }\n// }\n\n// @keyframes slideDown {\n//   from {\n//     opacity: 0;\n//     max-height: 0;\n//   }\n//   to {\n//     opacity: 1;\n//     max-height: 50px;\n//   }\n// }\n"]}