/**
 * Product Badges Pro - Frontend Styles
 * Lightweight CSS-only badge rendering
 *
 * @package ProductBadgesPro
 */

/* Multiple badges container */
.cartengine-badges-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 77;
  pointer-events: none;
}

/* Position group: stacks badges vertically when same position */
.cartengine-badge-position-group {
  position: absolute;
  z-index: 77;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Base badge wrapper - isolated positioning (single badge legacy) */
.cartengine-badge-wrapper {
  position: absolute;
  z-index: 77;
  pointer-events: none; /* Don't block clicks on products */
}

/* Position group inherits wrapper positioning when not already grouped */
.cartengine-badges-container .cartengine-badge-position-group.top-left {
  top: 10px;
  left: 10px;
}
.cartengine-badges-container .cartengine-badge-position-group.top-right {
  top: 10px;
  right: 10px;
}
.cartengine-badges-container .cartengine-badge-position-group.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cartengine-badges-container .cartengine-badge-position-group.bottom-left {
  top: auto;
  bottom: 8px;
  left: 8px;
}
.cartengine-badges-container .cartengine-badge-position-group.bottom-right {
  top: auto;
  bottom: 8px;
  right: 8px;
}

/* Position variants */
.cartengine-badge-wrapper.top-left {
  top: 10px;
  left: 10px;
}

.cartengine-badge-wrapper.top-right {
  top: 10px;
  right: 10px;
}

.cartengine-badge-wrapper.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cartengine-badge-wrapper.bottom-left {
  top: auto;
  bottom: 8px;
  left: 8px;
}

.cartengine-badge-wrapper.bottom-right {
  top: auto;
  bottom: 8px;
  right: 8px;
}

/* Base badge styles */
.cartengine-badge {
  display: inline-block;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.2;
  transition: transform 0.2s ease;
}

/* Badge animations */
@keyframes pbf-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes pbf-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes pbf-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.pbf-badge-animation-pulse {
  animation: pbf-pulse 1.5s ease-in-out infinite;
}

.pbf-badge-animation-bounce {
  animation: pbf-bounce 1s ease-in-out infinite;
}

.pbf-badge-animation-fade-in {
  animation: pbf-fade-in 0.5s ease forwards;
  opacity: 0;
}

/* Product thumbnail wrapper for fallback mode */
.cartengine-badge-thumbnail-wrapper {
  position: relative;
  display: inline-block;
}

/* Image wrapper created by JavaScript for badge positioning */
.cartengine-badge-image-wrapper {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
}

/* ============================================
   UNIVERSAL COMPATIBILITY LAYER
   Ensures badges work across all themes
   ============================================ */

/* Target all possible product container variations */
li.wc-block-product,
li.product,
li.post-type-product,
.wc-block-grid__product,
.product-item,
.woocommerce-LoopProduct-link,
article.product,
div.product,
.type-product {
  position: relative !important;
}

/* Universal fallback: any container with badge gets relative positioning */
li:has(> .cartengine-badge-wrapper),
li:has(> .cartengine-badges-container),
article:has(> .cartengine-badge-wrapper),
article:has(> .cartengine-badges-container),
div:has(> .cartengine-badge-wrapper),
div:has(> .cartengine-badges-container) {
  position: relative !important;
}

/* Product image containers should also be relative for nested badges */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image,
.woocommerce-product-gallery,
.product-thumbnail,
.product-image {
  position: relative !important;
}

/* Override any theme-specific positioning */
li > .cartengine-badge-wrapper,
li .cartengine-badge-position-group,
article > .cartengine-badge-wrapper,
article .cartengine-badge-position-group,
div > .cartengine-badge-wrapper,
div .cartengine-badge-position-group,
.product > .cartengine-badge-wrapper,
.product .cartengine-badge-position-group,
.wc-block-product > .cartengine-badge-wrapper,
.wc-block-product .cartengine-badge-position-group {
  position: absolute !important;
  z-index: 77 !important;
}

/* Position-specific rules with high specificity */
.cartengine-badge-wrapper.top-right {
  left: auto !important;
  right: 10px !important;
}

.cartengine-badge-wrapper.center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Widget compatibility */
.widget_products li,
.widget_top_rated_products li,
.widget_recently_viewed_products li,
.widget_product_categories li {
  position: relative !important;
}

/* Related products */
.related.products li,
.upsells.products li,
.cross-sells li {
  position: relative !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .cartengine-badge-wrapper.top-left,
  .cartengine-badge-wrapper.top-right {
    top: 5px;
  }

  .cartengine-badge-wrapper.top-left {
    left: 5px;
  }

  .cartengine-badge-wrapper.top-right {
    right: 5px;
  }

  .cartengine-badge-wrapper.bottom-left,
  .cartengine-badge-wrapper.bottom-right {
    bottom: 5px;
  }

  .cartengine-badge-wrapper.bottom-left {
    left: 5px;
  }

  .cartengine-badge-wrapper.bottom-right {
    right: 5px;
  }

  .cartengine-badge {
    font-size: 90% !important; /* Slightly smaller on mobile */
  }
}

/* Ensure badges work with lazy loading */
img.lazy + .cartengine-badge-wrapper,
img[loading="lazy"] + .cartengine-badge-wrapper {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Template-specific styles will be injected here dynamically */