/**
 * Woohoo Shipping Fix - Styles
 * Version: 1.0.7
 *
 * Provides visual feedback during shipping method updates
 */

/* Loading state for shipping methods section */
.woohoo-element-cart-shipping-methods.loading,
.woohoo-element-cart-totals.loading,
.woohoo-element-cart-subtotal.loading {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
  transition: opacity 0.2s ease;
}

/* Spinner animation */
.woohoo-element-cart-shipping-methods.loading::after,
.woohoo-element-cart-totals.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  animation: woohoo-shipping-spin 0.6s linear infinite;
  z-index: 10;
}

@keyframes woohoo-shipping-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Ensure shipping method inputs are visible during transitions */
.woohoo-element-cart-shipping-methods .shipping_method {
  cursor: pointer;
}

.woohoo-element-cart-shipping-methods.loading .shipping_method {
  cursor: wait;
}

/* Visual feedback for selected shipping method */
.woohoo-shipping-methods-item input.shipping_method:checked + label {
  font-weight: 600;
}

/* FIX: Use attribute selector instead of :checked pseudo-class
 *
 * Original Breakdance CSS uses: input[type=radio]:checked (pseudo-class)
 * After DOM replacement, :checked state doesn't sync with checked="checked" attribute
 *
 * Solution: Target the HTML attribute directly!
 *
 * IMPORTANT: Only targets cart and mini cart, NOT checkout
 * (Checkout has its own working handler in Checkout_Wrapper/script.js)
 */

.woohoo-element-cart-wrapper input.shipping_method[type="radio"][checked="checked"],
.woohoo-element-cart-shipping-methods input[type="radio"][checked="checked"],
.woohoo-mini-cart-offcanvas input.shipping_method[type="radio"][checked="checked"],
.woohoo-shipping-totals input[type="radio"][checked="checked"] {
  /* Match Breakdance's original styling */
  background-color: currentColor !important;
  border-color: currentColor !important;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* White dot in the middle (SVG circle) */
  background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e) !important;
}

/* Ensure the parent has a color for currentColor to inherit */
.woohoo-shipping-totals,
.woohoo-element-cart-shipping-methods {
  color: #2271b1; /* Fallback color for currentColor */
}

/* Smooth transitions for fragment updates */
.woohoo-element-cart-totals,
.woohoo-element-cart-shipping-methods,
.woohoo-element-cart-subtotal {
  transition: opacity 0.2s ease;
}

/* Mini cart specific loading state */
.woohoo-mini-cart-offcanvas .woohoo-element-cart-shipping-methods.loading {
  min-height: 60px;
}

/* Prevent layout shift during updates */
.woohoo-element-cart-shipping-methods {
  min-height: 40px;
}

/* Accessibility: Focus states */
.shipping_method:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

/* Hide loading spinner if browser doesn't support animations */
@media (prefers-reduced-motion: reduce) {
  .woohoo-element-cart-shipping-methods.loading::after,
  .woohoo-element-cart-totals.loading::after {
    animation: none;
    border: 3px solid rgba(0, 0, 0, 0.3);
  }
}