/**
 * Frontend Product Badge Styles
 * Author: Aqdas Rehman
 * Displays badges seamlessly over WooCommerce product images on shop/catalog and single pages.
 */

/* Image Wrapper Container */
.aqdas-badge-container {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  width: 100% !important;
  line-height: 0;
}

.aqdas-badge-container img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* Hover subtle zoom on product card */
.product:hover .aqdas-badge-container img {
  transform: scale(1.03);
}

/* Badges Overlay Layer */
.aqdas-badges-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* Base Badge Element */
.aqdas-product-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  user-select: none;
  pointer-events: auto;
  white-space: nowrap;
  max-width: 90%;
  z-index: 11;
  line-height: 1.25;

  /* Custom property bindings with defaults */
  background: var(--aqdas-bg, #6366f1);
  color: var(--aqdas-color, #ffffff);
  font-size: var(--aqdas-font-size, 12px);
  font-weight: var(--aqdas-font-weight, 700);
  text-transform: var(--aqdas-transform, uppercase);
  letter-spacing: var(--aqdas-letter-spacing, 0.5px);
  border: var(--aqdas-border, none);
  border-radius: var(--aqdas-radius, 20px);
  padding: var(--aqdas-pad-y, 6px) var(--aqdas-pad-x, 14px);
  opacity: var(--aqdas-opacity, 1);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.aqdas-product-badge:hover {
  transform: scale(1.05);
}

.aqdas-badge-text-inner {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Position Presets */
.aqdas-product-badge.position-top-left {
  top: var(--aqdas-offset-y, 12px);
  left: var(--aqdas-offset-x, 12px);
  right: auto;
  bottom: auto;
}

.aqdas-product-badge.position-top-right {
  top: var(--aqdas-offset-y, 12px);
  right: var(--aqdas-offset-x, 12px);
  left: auto;
  bottom: auto;
}

.aqdas-product-badge.position-bottom-left {
  bottom: var(--aqdas-offset-y, 12px);
  left: var(--aqdas-offset-x, 12px);
  top: auto;
  right: auto;
}

.aqdas-product-badge.position-bottom-right {
  bottom: var(--aqdas-offset-y, 12px);
  right: var(--aqdas-offset-x, 12px);
  top: auto;
  left: auto;
}

.aqdas-product-badge.position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
}

.aqdas-product-badge.position-center:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Style Presets */
.aqdas-product-badge.preset-pill {
  border-radius: var(--aqdas-radius, 9999px);
}

.aqdas-product-badge.preset-square {
  border-radius: var(--aqdas-radius, 4px);
}

.aqdas-product-badge.preset-circle {
  border-radius: 50% !important;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  padding: 6px !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aqdas-product-badge.preset-circle .aqdas-badge-text-inner {
  white-space: normal;
  line-height: 1.1;
  font-size: 0.85em;
  text-align: center;
}

/* Corner Ribbons */
.aqdas-product-badge.preset-ribbon-left {
  top: 24px !important;
  left: -38px !important;
  right: auto !important;
  bottom: auto !important;
  width: 150px;
  text-align: center;
  transform: rotate(-45deg);
  border-radius: 0 !important;
  padding: 6px 0 !important;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.aqdas-product-badge.preset-ribbon-left:hover {
  transform: rotate(-45deg) scale(1.04);
}

.aqdas-product-badge.preset-ribbon-right {
  top: 24px !important;
  right: -38px !important;
  left: auto !important;
  bottom: auto !important;
  width: 150px;
  text-align: center;
  transform: rotate(45deg);
  border-radius: 0 !important;
  padding: 6px 0 !important;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.aqdas-product-badge.preset-ribbon-right:hover {
  transform: rotate(45deg) scale(1.04);
}

/* Glassmorphism Preset */
.aqdas-product-badge.preset-glassmorphism {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Shadow Presets */
.aqdas-product-badge.shadow-none {
  box-shadow: none;
}

.aqdas-product-badge.shadow-subtle {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.aqdas-product-badge.shadow-glow {
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.45);
}

.aqdas-product-badge.shadow-deep {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Hook-based wrapper fallback */
.aqdas-badge-hook-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .aqdas-product-badge {
    font-size: calc(var(--aqdas-font-size, 12px) * 0.85);
    padding: calc(var(--aqdas-pad-y, 6px) * 0.8) calc(var(--aqdas-pad-x, 14px) * 0.8);
  }

  .aqdas-product-badge.preset-ribbon-left,
  .aqdas-product-badge.preset-ribbon-right {
    width: 120px;
    top: 18px !important;
  }

  .aqdas-product-badge.preset-ribbon-left {
    left: -32px !important;
  }

  .aqdas-product-badge.preset-ribbon-right {
    right: -32px !important;
  }
}