/**
 * WC Product Badges — Frontend Styles
 *
 * Base badge styles, overlay positioning, entrance animations,
 * hover effects, and responsive utilities.
 */

/* ========================================================================
   Badge Base
   ======================================================================== */
.wcpb-badge {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    cursor: default;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
}

.wcpb-text {
    display: inline;
}

.wcpb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.wcpb-icon.dashicons {
    font-size: inherit;
    width: auto;
    height: auto;
}

.wcpb-svg-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.wcpb-img-icon {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.wcpb-emoji-icon {
    line-height: 1;
}

/* ========================================================================
   Badge Container & Overlay Positions
   ======================================================================== */
.wcpb-badges-overlay {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    pointer-events: auto;
}

.wcpb-layout-horizontal { flex-direction: row; flex-wrap: nowrap; }
.wcpb-layout-vertical   { flex-direction: column; align-items: flex-start; }
.wcpb-layout-wrap       { flex-direction: row; flex-wrap: wrap; }

.wcpb-overlay-top_left     { top: 8px;    left: 8px; }
.wcpb-overlay-top_right    { top: 8px;    right: 8px; align-items: flex-end; }
.wcpb-overlay-bottom_left  { bottom: 8px; left: 8px; }
.wcpb-overlay-bottom_right { bottom: 8px; right: 8px; align-items: flex-end; }
.wcpb-overlay-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; }

.wcpb-badges-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.wcpb-badges-shortcode {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Ensure parent product cards have relative positioning. */
.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;
}

/* ========================================================================
   Entrance Animations — Keyframes
   ======================================================================== */
@keyframes wcpb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wcpb-slide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes wcpb-zoom {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes wcpb-bounce {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes wcpb-flip {
    from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    40%  { transform: perspective(400px) rotateY(-10deg); }
    70%  { transform: perspective(400px) rotateY(10deg); }
    to   { opacity: 1; transform: perspective(400px) rotateY(0); }
}

@keyframes wcpb-rotate {
    from { opacity: 0; transform: rotate(-200deg) scale(0); }
    to   { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes wcpb-pop {
    0%   { opacity: 0; transform: scale(0); }
    60%  { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes wcpb-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Animation Classes — applied by Intersection Observer. */
.wcpb-anim-fade.wcpb-visible    { animation-name: wcpb-fade; }
.wcpb-anim-slide.wcpb-visible   { animation-name: wcpb-slide; }
.wcpb-anim-zoom.wcpb-visible    { animation-name: wcpb-zoom; }
.wcpb-anim-bounce.wcpb-visible  { animation-name: wcpb-bounce; }
.wcpb-anim-flip.wcpb-visible    { animation-name: wcpb-flip; }
.wcpb-anim-rotate.wcpb-visible  { animation-name: wcpb-rotate; }
.wcpb-anim-pop.wcpb-visible     { animation-name: wcpb-pop; }
.wcpb-anim-pulse.wcpb-visible   { animation-name: wcpb-pulse; }

/* Hidden until observed. */
.wcpb-animate {
    opacity: 0;
}

.wcpb-animate.wcpb-visible {
    opacity: 1;
}

/* ========================================================================
   Hover Effect Keyframes
   ======================================================================== */
@keyframes wcpb-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* ========================================================================
   RTL Support
   ======================================================================== */
[dir="rtl"] .wcpb-overlay-top_left     { left: auto; right: 8px; }
[dir="rtl"] .wcpb-overlay-top_right    { right: auto; left: 8px; }
[dir="rtl"] .wcpb-overlay-bottom_left  { left: auto; right: 8px; }
[dir="rtl"] .wcpb-overlay-bottom_right { right: auto; left: 8px; }

/* ========================================================================
   Print
   ======================================================================== */
@media print {
    .wcpb-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .wcpb-animate { opacity: 1 !important; animation: none !important; }
}