/**
 * Product Badges for WooCommerce - Frontend Styles
 * Lightweight CSS-only badge rendering
 *
 * @package ProductBadgesLite
 */

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

/* 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%);
}

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

/* 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),
article:has(> .cartengine-badge-wrapper),
div:has(> .cartengine-badge-wrapper) {
  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,
article > .cartengine-badge-wrapper,
div > .cartengine-badge-wrapper,
.product > .cartengine-badge-wrapper,
.wc-block-product > .cartengine-badge-wrapper {
  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 {
    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 */