/**
 * Product Badges — Frontend Styles
 * Fairfield Product Mods Plugin
 *
 * Premium, modern badge design for WooCommerce product grids.
 * Works with Flatsome theme (.box-image) and standard WooCommerce markup.
 */

/* ---------------------------------------------------------------
   Badge Container
   Positioned absolutely within the product image wrapper.
   Flatsome uses .box-image (position: relative by default).
   Standard WooCommerce uses .woocommerce-LoopProduct-link.
--------------------------------------------------------------- */

.fairfield-product-badges {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

/* Position variants */
.fairfield-badges-top-left {
    top: 10px;
    left: 10px;
    align-items: flex-start;
}

.fairfield-badges-top-right {
    top: 10px;
    right: 10px;
    align-items: flex-end;
}

.fairfield-badges-bottom-left {
    bottom: 10px;
    left: 10px;
    align-items: flex-start;
}

.fairfield-badges-bottom-right {
    bottom: 10px;
    right: 10px;
    align-items: flex-end;
}

/* ---------------------------------------------------------------
   Individual Badge
   Modern pill shape with subtle depth and refined typography.
--------------------------------------------------------------- */

.fairfield-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: auto;

    /* Colours driven by inline CSS custom properties (set per-badge) */
    background: var(--badge-bg, #333);
    color: var(--badge-text, #fff);

    /* Subtle depth */
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.08);

    /* Smooth entrance on page load */
    animation: fairfieldBadgeFadeIn 0.35s ease-out both;
}

/* Slight hover lift for interactive feel */
.fairfield-badge:hover {
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* ---------------------------------------------------------------
   Level-specific badge styles
   Each product usage level gets a carefully chosen colour palette
   that conveys its meaning and looks premium.
--------------------------------------------------------------- */

/* Foundational — Grounded, trustworthy teal-green */
.fairfield-badge--foundational {
    --badge-bg: #0d7377;
    --badge-text: #ffffff;
    background: linear-gradient(135deg, #0d7377 0%, #14919b 100%);
}

/* Targeted — Focused, purposeful warm amber */
.fairfield-badge--targeted {
    --badge-bg: #b45309;
    --badge-text: #ffffff;
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
}

/* Advanced — Premium, sophisticated deep indigo */
.fairfield-badge--advanced {
    --badge-bg: #4338ca;
    --badge-text: #ffffff;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}

/* ---------------------------------------------------------------
   Common extra badge styles (for future use)
   e.g. Best Seller, Best Histamine Support, New, etc.
--------------------------------------------------------------- */

.fairfield-badge--tag-best-seller {
    --badge-bg: #dc2626;
    --badge-text: #ffffff;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

.fairfield-badge--tag-new {
    --badge-bg: #059669;
    --badge-text: #ffffff;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

/* ---------------------------------------------------------------
   Flatsome Theme Compatibility
   In Flatsome, the badge is rendered inside .box-image via the
   flatsome_woocommerce_shop_loop_images hook. .box-image already
   has position: relative, so absolute positioning works.
   We set a z-index above the image but below the image-tools
   hover overlays.
--------------------------------------------------------------- */

.box-image .fairfield-product-badges {
    z-index: 2;
}

/* Standard WooCommerce (non-Flatsome): ensure the product wrapper
   has position: relative so absolute badge positioning works */
.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    position: relative;
}

/* ---------------------------------------------------------------
   Animation
--------------------------------------------------------------- */

@keyframes fairfieldBadgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger badges when multiple are shown */
.fairfield-product-badges .fairfield-badge:nth-child(2) {
    animation-delay: 0.08s;
}

.fairfield-product-badges .fairfield-badge:nth-child(3) {
    animation-delay: 0.16s;
}

.fairfield-product-badges .fairfield-badge:nth-child(4) {
    animation-delay: 0.24s;
}

/* ---------------------------------------------------------------
   Hide WooCommerce default "Sale!" flash when our badges are shown
   (optional — only if both are too visually noisy together)
   Uncomment if needed:
   .fairfield-product-badges ~ .onsale { display: none; }
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */

@media (max-width: 768px) {
    .fairfield-product-badges {
        gap: 4px;
    }

    .fairfield-badge {
        padding: 4px 9px;
        font-size: 10px;
        letter-spacing: 0.03em;
    }

    .fairfield-badges-top-left,
    .fairfield-badges-top-right,
    .fairfield-badges-bottom-left,
    .fairfield-badges-bottom-right {
        top: 6px;
        left: 6px;
    }

    .fairfield-badges-top-right,
    .fairfield-badges-bottom-right {
        left: auto;
        right: 6px;
    }

    .fairfield-badges-bottom-left,
    .fairfield-badges-bottom-right {
        top: auto;
        bottom: 6px;
    }
}

@media (max-width: 480px) {
    .fairfield-badge {
        padding: 3px 7px;
        font-size: 9px;
        border-radius: 3px;
    }
}

/* ---------------------------------------------------------------
   Print
--------------------------------------------------------------- */

@media print {
    .fairfield-product-badges {
        position: static;
    }

    .fairfield-badge {
        border: 1px solid #999;
        box-shadow: none;
        animation: none;
    }
}