/* Dynamic Badges Frontend Styles */

/* Badge Container with CSS Grid positioning */
.wcbd-badges {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  overflow: hidden; /* Prevent badges from overflowing */
}

/* Base Badge Styles */
.wcbd-badge {
  pointer-events: auto;
  max-width: 100%;
  height: max-content;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* Text Badge Specific Styles */
.wcbd-text-badge {
  background: var(--wcbd-color, #E02424);
  color: var(--wcbd-text-color, #FFFFFF);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--wcbd-font-size, 12px);
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: normal; /* Allow text to wrap */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Override WooCommerce styles that force strong tags to display as block */
.wcbd-text-badge strong,
.wcbd-text-badge b,
.wcbd-text-badge em,
.wcbd-text-badge i,
.wcbd-text-badge del,
.wcbd-text-badge s,
.wcbd-text-badge strike {
  display: inline !important;
}

/* Image Badge Specific Styles */
.wcbd-image-badge {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  max-width: 100%;
}

.wcbd-image-badge .wcbd-image {
  display: block;
  max-width: min(var(--wcbd-image-width, 40px), 100%);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Badge Text */
.wcbd-text {
  display: block;
}

/* Grid-based positioning*/
.wcbd-pos-top-left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  margin-top: var(--wcbd-offset-y, 8px);
  margin-left: var(--wcbd-offset-x, 8px);
}

.wcbd-pos-top-center {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  margin-top: var(--wcbd-offset-y, 8px);
}

.wcbd-pos-top-right {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  margin-top: var(--wcbd-offset-y, 8px);
  margin-right: var(--wcbd-offset-x, 8px);
}

.wcbd-pos-middle-left {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  margin-left: var(--wcbd-offset-x, 8px);
}

.wcbd-pos-middle-center {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  align-self: center;
}

.wcbd-pos-middle-center img,
.wcbd-pos-bottom-center img,
.wcbd-pos-top-center{
  justify-self: center;
}

.wcbd-pos-middle-right {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  margin-right: var(--wcbd-offset-x, 8px);
}

.wcbd-pos-bottom-left {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  align-self: end;
  margin-bottom: var(--wcbd-offset-y, 8px);
  margin-left: var(--wcbd-offset-x, 8px);
}

.wcbd-pos-bottom-center {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  align-self: end;
  margin-bottom: var(--wcbd-offset-y, 8px);
}

.wcbd-pos-bottom-right {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  margin-bottom: var(--wcbd-offset-y, 8px);
  margin-right: var(--wcbd-offset-x, 8px);
}

/* Ensure Divi's et_shop_image wrapper works with our badges */
.et_shop_image .wcbd-badges-wrapper {
  display: block;
  width: 100%;
  position: relative; /* Establish positioning context */
}

/* Ensure WooCommerce gallery images work properly */
.woocommerce-product-gallery__image {
  display: block !important;
  width: 100%;
}

/* Product image wrapper positioning context */
.wcbd-badges-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

/* Ensure badges container respects parent width */
.wcbd-badges-wrapper .wcbd-badges {
  max-width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .wcbd-text-badge {
    font-size: calc(var(--wcbd-font-size, 12px) * 0.85);
    padding: 3px 6px;
    border-radius: 3px;
  }

  /* Reduce image badge size on smaller screens */
  .wcbd-image-badge .wcbd-image {
    max-width: min(calc(var(--wcbd-image-width, 40px) * 0.85), 100%);
  }
}

@media (max-width: 480px) {
  .wcbd-text-badge {
    font-size: calc(var(--wcbd-font-size, 12px) * 0.7);
    padding: 2px 5px;
  }

  /* Further reduce image badge size on mobile */
  .wcbd-image-badge .wcbd-image {
    max-width: min(calc(var(--wcbd-image-width, 40px) * 0.7), 100%);
  }

  /* Reduce offsets on mobile */
  .wcbd-pos-top-left,
  .wcbd-pos-middle-left,
  .wcbd-pos-bottom-left {
    margin-left: calc(var(--wcbd-offset-x, 8px) * 0.5);
  }

  .wcbd-pos-top-right,
  .wcbd-pos-middle-right,
  .wcbd-pos-bottom-right {
    margin-right: calc(var(--wcbd-offset-x, 8px) * 0.5);
  }

  .wcbd-pos-top-left,
  .wcbd-pos-top-center,
  .wcbd-pos-top-right {
    margin-top: calc(var(--wcbd-offset-y, 8px) * 0.5);
  }

  .wcbd-pos-bottom-left,
  .wcbd-pos-bottom-center,
  .wcbd-pos-bottom-right {
    margin-bottom: calc(var(--wcbd-offset-y, 8px) * 0.5);
  }
}

/* Animation for newly added badges */
@keyframes badgeAppear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.wcbd-badge {
  animation: badgeAppear 0.3s ease-out;
}

/* Badge color variations for common use cases */
.wcbd-badge.wcbd-sale {
  background: #E02424;
}

.wcbd-badge.wcbd-new {
  background: #1E40AF;
}

.wcbd-badge.wcbd-featured {
  background: #D97706;
}

.wcbd-badge.wcbd-bestseller {
  background: #059669;
}

.wcbd-badge.wcbd-out-of-stock {
  background: #6B7280;
}

.wcbd-badge.wcbd-low-stock {
  background: #F59E0B;
}

/* RTL Support */
[dir="rtl"] .wcbd-top-left {
  left: auto;
  right: var(--wcbd-ox, 8px);
}

[dir="rtl"] .wcbd-top-right {
  right: auto;
  left: var(--wcbd-ox, 8px);
}

[dir="rtl"] .wcbd-middle-left {
  left: auto;
  right: var(--wcbd-ox, 8px);
}

[dir="rtl"] .wcbd-middle-right {
  right: auto;
  left: var(--wcbd-ox, 8px);
}

[dir="rtl"] .wcbd-bottom-left {
  left: auto;
  right: var(--wcbd-ox, 8px);
}

[dir="rtl"] .wcbd-bottom-right {
  right: auto;
  left: var(--wcbd-ox, 8px);
}

/* Print Styles */
@media print {
  .wcbd-badges {
    display: none;
  }
}