/**
 * Product Labels Module Styles
 *
 * Displays badges on product images in WooCommerce.
 * Uses slot-based positioning: badges fill positions 1, 2, 3 in order (new → bio → promotion).
 *
 * @package Bricks_Child
 * @since   1.1.0
 */

/* =============================================================================
   Thumbnail Labels Container
   ============================================================================= */

/**
 * Container for product thumbnail with badges.
 * Provides positioning context for absolute positioned badges.
 */
.product-thumbnail-labels {
  position: relative;
  display: inline-block;
}

/* =============================================================================
   Badge Wrapper Base Styles
   ============================================================================= */

/**
 * Base positioning for badge wrappers.
 * All badges are absolutely positioned within the thumbnail container.
 */
.product-badge-wrapper {
  position: absolute;
  width: 50px !important;
  height: 50px !important;
  z-index: 10;
}

#brx-content .product-thumbnail-labels > .product-badge-wrapper,
#brx-content .brxe-product-gallery .product-badge-wrapper,
#brx-content .brxe-product-gallery .woocommerce-product-gallery__wrapper .product-badge-wrapper,
#brx-content .woocommerce-product-gallery__wrapper .product-badge-wrapper {
  width: 50px !important;
  height: 50px !important;
}

/* =============================================================================
   Badge Position - Top (Left Side, Separate from Slot System)
   ============================================================================= */

/**
 * Top badge - positioned at top-left corner.
 * This badge is separate from the slot system.
 */
.product-badge-wrapper.product-badge--top {
  top: 0;
  left: 10px;
}

/* =============================================================================
   Slot-Based Positioning (Right Side)
   Order: new → bio → promotion
   Badge size: 50px × 50px, Gap: 20px
   ============================================================================= */

/**
 * Slot 1 - First badge position (top-right).
 * Used by: new, bio, or promotion (whichever comes first).
 */
.product-badge-wrapper.product-badge--slot-1 {
  top: 0;
  right: 10px;
  left: auto;
}

/**
 * Slot 2 - Second badge position.
 * Position: 0 + 50px badge + 20px gap = 70px from top.
 */
.product-badge-wrapper.product-badge--slot-2 {
  top: 70px;
  right: 10px;
  left: auto;
}

/**
 * Slot 3 - Third badge position.
 * Position: 0 + 50px + 20px + 50px + 20px = 140px from top.
 */
.product-badge-wrapper.product-badge--slot-3 {
  top: 140px;
  right: 10px;
  left: auto;
}

/* =============================================================================
   Badge Sizing
   ============================================================================= */

/**
 * Badge image sizing - 1:1 aspect ratio with 50px fixed dimensions.
 */
.product-badge-wrapper .product-badge-image {
  width: 50px !important;
  height: 50px !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

#brx-content .product-thumbnail-labels > .product-badge-wrapper > .product-badge-image,
#brx-content .brxe-product-gallery .product-badge-wrapper > .product-badge-image,
#brx-content .brxe-product-gallery .woocommerce-product-gallery__wrapper .product-badge-wrapper > .product-badge-image,
#brx-content .woocommerce-product-gallery__wrapper .product-badge-wrapper > .product-badge-image {
  width: 50px !important;
  height: 50px !important;
  max-width: none !important;
  min-width: 50px !important;
  min-height: 50px !important;
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  flex: 0 0 50px !important;
}

/* =============================================================================
   Slick Slider Context Adjustments
   ============================================================================= */

/**
 * Adjust positions for badges inside slick slider.
 * Badges have -20px offset on right to account for slick slider's positioning context.
 */

/* Top badge in slick slider (left side) */
.slick-slide .product-badge-wrapper.product-badge--top {
  top: -20px;
  left: -10px;
}

/* Slot-based positioning in slick slider */
.slick-slide .product-badge-wrapper.product-badge--slot-1 {
  top: -20px;
  right: -10px;
}

.slick-slide .product-badge-wrapper.product-badge--slot-2 {
  top: 50px;
  right: -10px;
}

.slick-slide .product-badge-wrapper.product-badge--slot-3 {
  top: 120px;
  right: -10px;
}

/* Hide external discount badge so only module label badges are shown */
.wc-discount-badge {
  display: none !important;
}

/* =============================================================================
   Accessibility
   ============================================================================= */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .product-badge-wrapper .product-badge-image {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .product-badge-wrapper {
    border: 2px solid currentColor;
  }
}