/* WooCommerce Advanced Badges - Frontend Styles */

/* === Shortcode Wrapper Modes === */
.bos-ab-elementor-shell {
    position: relative;
    width: 100%;
}

.bos-ab-elementor-shell.bos-ab-mode-overlay {
    min-height: 180px;
    overflow: hidden;
}

.wab-badges-wrapper {
    position: relative;
    pointer-events: none;
}

.wab-badges-wrapper.wab-overlay-mounted,
.wab-badges-wrapper.wab-mode-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.wab-badges-wrapper.wab-mode-flow {
    position: relative;
    display: flex;
}

.wab-badges-wrapper.wab-mode-flow .wab-badge {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    translate: 0 0 !important;
    transform: none !important;
}


/* === Badge Container === */
.wab-badges-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
}

/* === Badge Base === */
.wab-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    pointer-events: auto;
    transition: all 0.3s ease;
    line-height: 1;
}

/* === Badge Animations === */
.wab-animation-pulse { animation: wab-pulse 1.8s ease-in-out infinite; }
.wab-animation-bounce { animation: wab-bounce 1.6s ease-in-out infinite; }
.wab-animation-fade { animation: wab-fade 2s ease-in-out infinite; }
.wab-animation-shake { animation: wab-shake 0.6s ease-in-out infinite; }
.wab-animation-rotate { animation: wab-rotate 3s linear infinite; }
.wab-animation-swing { animation: wab-swing 1.2s ease-in-out infinite; }
.wab-animation-glow { animation: wab-glow 2.2s ease-in-out infinite; }

@keyframes wab-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

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

@keyframes wab-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@keyframes wab-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes wab-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes wab-swing {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

@keyframes wab-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
    50% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); }
}

/* === Badge Icons === */
.wab-badge-icon {
    display: inline-flex;
    align-items: center;
}

.wab-icon-right {
    order: 1;
}

.wab-icon-left {
    order: -1;
}

/* === Badge Positions === */
.wab-position-top-left {
    top: 0;
    left: 0;
}

.wab-position-top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.wab-position-top-right {
    top: 0;
    right: 0;
}

.wab-position-middle-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.wab-position-middle-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wab-position-middle-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.wab-position-bottom-left {
    bottom: 0;
    left: 0;
}

.wab-position-bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.wab-position-bottom-right {
    bottom: 0;
    right: 0;
}

/* === Badge Shapes === */
.wab-shape-diamond .wab-badge-text {
    transform: rotate(-45deg);
}

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

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

@keyframes wab-fade {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes wab-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}

@keyframes wab-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes wab-swing {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

.wab-animation-pulse {
    animation: wab-pulse 2s ease-in-out infinite;
}

.wab-animation-bounce {
    animation: wab-bounce 1.5s ease-in-out infinite;
}

.wab-animation-fade {
    animation: wab-fade 2s ease-in-out infinite;
}

.wab-animation-shake {
    animation: wab-shake 0.5s ease-in-out infinite;
}

.wab-animation-rotate {
    animation: wab-rotate 3s linear infinite;
}

.wab-animation-swing {
    animation: wab-swing 1s ease-in-out infinite;
}

/* === WooCommerce Product Integration === */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
    position: relative;
}

.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
    position: relative;
}

/* === JetWooBuilder Integration === */
.jet-woo-builder-product,
.jet-woo-builder-archive-product-thumbnail {
    position: relative;
}

/* === Elementor Integration === */
.elementor-widget-wc-archive-products .product,
.elementor-widget-products .product {
    position: relative;
}

/* === RTL Support === */
body.rtl .wab-position-top-left {
    left: auto;
    right: 0;
}

body.rtl .wab-position-top-right {
    right: auto;
    left: 0;
}

body.rtl .wab-position-middle-left {
    left: auto;
    right: 0;
}

body.rtl .wab-position-middle-right {
    right: auto;
    left: 0;
}

body.rtl .wab-position-bottom-left {
    left: auto;
    right: 0;
}

body.rtl .wab-position-bottom-right {
    right: auto;
    left: 0;
}

/* === Mobile Responsiveness === */
@media (max-width: 768px) {
    .wab-badge {
        font-size: 0.85em;
        padding: 0.3em 0.6em;
    }
    
    body.wab-hide-mobile .wab-badge {
        display: none !important;
    }
}

/* === Print Styles === */
@media print {
    .wab-badge {
        display: none !important;
    }
}


/* Prevent theme CSS from stretching badges in overlay mode */
.wab-badges-wrapper[data-wab-mode="overlay"] .wab-badge {
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}

.wab-badges-wrapper[data-wab-mode="overlay"] .wab-badge .wab-badge-text-block {
    width: auto;
    max-width: none;
    display: inline;
}

/* === v1.2.4 hardening === */
.wab-badges-wrapper[data-wab-mode="overlay"] .wab-pos-group {
    position: absolute;
    display: flex;
    pointer-events: none;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}

.wab-badges-wrapper[data-wab-mode="overlay"] .wab-pos-group .wab-badge {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    translate: 0 0;
    width: max-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    box-sizing: border-box;
}

/* Force no accidental block-stretch from aggressive theme selectors */
.wab-badges-wrapper[data-wab-mode="overlay"] .wab-badge,
.wab-badges-wrapper[data-wab-mode="overlay"] .wab-badge * {
    max-width: 100%;
}


/* Stack hardening: prevent theme rules from stretching badges */
.wab-badges-wrapper .wab-badge {
    width: max-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    box-sizing: border-box;
}

.wab-badges-wrapper .wab-badge * {
    box-sizing: border-box;
}

/* ── Advanced shapes ── */
.wab-badge.wab-shape-ribbon { clip-path: polygon(0 0,100% 0,100% 82%,80% 100%,60% 82%,40% 100%,20% 82%,0 100%); }
.wab-badge.wab-shape-starburst { clip-path: polygon(50% 0%,60% 14%,75% 6%,79% 22%,94% 18%,88% 34%,100% 40%,90% 52%,100% 64%,86% 70%,90% 86%,74% 82%,70% 100%,56% 90%,44% 100%,30% 90%,26% 82%,10% 86%,14% 70%,0% 64%,10% 52%,0% 40%,12% 34%,6% 18%,21% 22%,25% 6%,40% 14%); }
.wab-badge.wab-shape-arrow { clip-path: polygon(0 18%,72% 18%,72% 0,100% 50%,72% 100%,72% 82%,0 82%); }
.wab-badge.wab-shape-hexagon { clip-path: polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%); }
.wab-badge.wab-shape-teardrop { border-radius: 52% 48% 56% 44% / 62% 62% 38% 38%; transform: rotate(35deg); }
.wab-badge.wab-shape-teardrop .wab-badge-text-block,
.wab-badge.wab-shape-teardrop .wab-badge-icon,
.wab-badge.wab-shape-teardrop .wab-badge-inner-col { transform: rotate(-35deg); }
.wab-badge.wab-shape-callout::after {
  content: '';
  position: absolute;
  left: 16%;
  bottom: -8px;
  border: 8px solid transparent;
  border-top-color: inherit;
  filter: brightness(.95);
}

/* ── Visual effects ── */
.wab-badge.wab-effect-glass {
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: 0 6px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.wab-badge.wab-effect-neon { box-shadow: 0 0 8px rgba(255,255,255,.65), 0 0 18px rgba(59,130,246,.45) !important; }
.wab-badge.wab-effect-metallic {
  background-image: linear-gradient(120deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.6) 24%, rgba(190,190,190,.2) 35%, rgba(255,255,255,.75) 50%, rgba(140,140,140,.15) 62%, rgba(255,255,255,.65) 78%, rgba(255,255,255,.1) 100%) !important;
  background-size: 180% 100%;
  animation: wab-metallic-shine 2.8s linear infinite !important;
}
.wab-badge.wab-effect-noise::before,
.wab-badge.wab-effect-holographic::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.wab-badge.wab-effect-noise::before {
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.9) 1px, transparent 0);
  background-size: 4px 4px;
}
.wab-badge.wab-effect-holographic {
  background-image: linear-gradient(135deg, #ff6ec4, #7873f5, #4ade80, #22d3ee, #f59e0b) !important;
  background-size: 320% 320%;
  animation: wab-holo 6s ease infinite;
}
.wab-badge.wab-effect-holographic::before {
  background-image: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.28) 50%, transparent 75%);
  transform: translateX(-120%);
  animation: wab-holo-scan 3.4s linear infinite;
}
.wab-badge.wab-effect-outlined {
  background: transparent !important;
  box-shadow: none;
}

/* ── Extra animations ── */
.wab-animation-wiggle-hover { transition: transform .2s ease; }
.wab-animation-wiggle-hover:hover { animation: wab-wiggle .45s ease-in-out; }
.wab-animation-blink { animation: wab-blink .95s step-end infinite; }
.wab-animation-glitch { animation: wab-glitch 1.25s infinite; }

@keyframes wab-metallic-shine { from { background-position: 0% 0; } to { background-position: 180% 0; } }
@keyframes wab-holo { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
@keyframes wab-holo-scan { 0%{transform:translateX(-120%)}100%{transform:translateX(120%)} }
@keyframes wab-wiggle {
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(-3deg)}
  40%{transform:rotate(2deg)}
  60%{transform:rotate(-2deg)}
  80%{transform:rotate(2deg)}
}
@keyframes wab-blink { 0%,49%{opacity:1}50%,100%{opacity:.18} }
@keyframes wab-glitch {
  0%,100% { transform: translate(0); filter: none; }
  20% { transform: translate(1px,-1px); filter: hue-rotate(6deg); }
  40% { transform: translate(-1px,1px); filter: hue-rotate(-6deg); }
  60% { transform: translate(1px,1px); filter: contrast(1.15); }
  80% { transform: translate(-1px,-1px); filter: none; }
}