/**
 * Farid Custom Product Labels - Frontend Styles
 * Lightweight, high-performance CSS for product badges
 */

/* Force parent card containers to have relative positioning */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product,
.item-product-archive,
.item-product,
.product-grid-item,
.product-wrapper {
    position: relative !important;
}

/* ==========================================================================
   Context: Loop / Product Card (Stacked in a column at top-right of whole card)
   ========================================================================== */
.fcl-badge-container.fcl-context-loop {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 35 !important;
    pointer-events: none !important;
    line-height: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-end !important;
    box-sizing: border-box !important;
}

.fcl-badge-container.fcl-context-loop.fcl-badge-pos-top-left {
    left: 12px !important;
    right: auto !important;
    align-items: flex-start !important;
}

.fcl-badge-container.fcl-context-loop.fcl-badge-pos-bottom-right {
    bottom: 12px !important;
    right: 12px !important;
    top: auto !important;
    align-items: flex-end !important;
}

.fcl-badge-container.fcl-context-loop.fcl-badge-pos-bottom-left {
    bottom: 12px !important;
    left: 12px !important;
    top: auto !important;
    align-items: flex-start !important;
}

/* RTL Support for Card */
body.rtl .fcl-badge-container.fcl-context-loop,
html[dir="rtl"] .fcl-badge-container.fcl-context-loop {
    right: 12px !important;
    left: auto !important;
    align-items: flex-end !important;
}

body.rtl .fcl-badge-container.fcl-context-loop.fcl-badge-pos-top-left,
html[dir="rtl"] .fcl-badge-container.fcl-context-loop.fcl-badge-pos-top-left {
    left: 12px !important;
    right: auto !important;
    align-items: flex-start !important;
}

.fcl-context-loop .fcl-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3.5px 8.5px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}

/* ==========================================================================
   Context: Single Product Page (Rendered at top of product name, in a row)
   ========================================================================== */
.fcl-single-badges-container,
#fcl-single-product-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
    position: static !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.rtl .fcl-single-badges-container,
html[dir="rtl"] .fcl-single-badges-container,
body.rtl #fcl-single-product-badges,
html[dir="rtl"] #fcl-single-product-badges {
    justify-content: flex-start !important;
}

.fcl-single-badges-container .fcl-badge,
#fcl-single-product-badges .fcl-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    letter-spacing: normal !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   Hard Protection: Strictly Prevent Stray Badges on Single Product Page
   ========================================================================== */
body.single-product .fcl-badge-container.fcl-context-loop,
body.single-product .fcl-context-loop,
.single-product .fcl-badge-container.fcl-context-loop,
div[id^="product-"] > .fcl-badge-container,
div[id^="product-"] > .fcl-context-loop,
.breadcrumbs .fcl-badge-container,
.breadcrumbs .fcl-badge,
.woocommerce-breadcrumb .fcl-badge-container,
.woocommerce-breadcrumb .fcl-badge,
header .fcl-badge-container,
header .fcl-badge {
    display: none !important;
}

/* Base Badge Style */
.fcl-badge {
    color: #ffffff;
    background-color: #e53935;
    font-family: inherit;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.15s ease;
}