/**
 * Toolkit - Product Badges Frontend CSS
 * Based on original badge.php implementation
 * 
 * @package Toolkit
 * @since 1.8.0
 */

/* ===================================
   Product Badges - Lista produktów
   =================================== */

/* Link produktu musi mieć position:relative aby badge'e były względem zdjęcia */
.woocommerce-loop-image-link,
.woocommerce-LoopProduct-link,
.woocommerce-loop-product__link,
.product_item_link,
.toolkit-badge-image-wrapper {
    position: relative !important;
    display: block;
}

/* Galeria single product - wszystkie kontenery muszą mieć position:relative */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.flex-viewport,
.woocommerce div.product div.images,
.ksk-gallery,
.kad-light-gallery,
.product_image,
.kadence-product-gallery-main {
    position: relative !important;
}

/* Ensure badge container doesn't overflow - critical for bottom positions */
.woocommerce-product-gallery__image {
    overflow: hidden !important; /* Prevents badges from going outside image */
}

/* === PREVENT FOUC (Flash of Unstyled Content) === */
/* Hide badges until JavaScript positions them correctly */
.product-badges-wrapper:not(.toolkit-badge-positioned) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in, visibility 0s 0.2s;
}

/* Show badges after JavaScript positioning */
.product-badges-wrapper.toolkit-badge-positioned {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out;
}

/* Fallback: Show badges after 500ms even if JavaScript fails */
@keyframes badge-fallback-show {
    0% { opacity: 0; visibility: hidden; }
    100% { opacity: 1; visibility: visible; }
}

.product-badges-wrapper:not(.toolkit-badge-positioned) {
    animation: badge-fallback-show 0.3s ease-out 0.5s forwards;
}

/* === WRAPPER DLA BADGE'ÓW W GRUPIE === */
.product-badges-wrapper {
    position: absolute !important;
    pointer-events: none; /* Kliknięcia przechodzą przez wrapper do produktu */
    z-index: 999 !important; /* Wysoki z-index aby był nad galerią */
    display: flex !important;
    flex-direction: row !important; /* Badge'e w rzędzie (poziomo) */
    flex-wrap: wrap !important; /* Zawijanie gdy za dużo badge'ów */
    gap: 5px; /* Odstęp między badge'ami */
    max-width: calc(100% - 20px); /* Ograniczenie szerokości aby zostawić 10px z drugiej strony */
}

/* Wrapper bez pozycji (hook poza zdjęciem) - renderuj jako normalny element */
.product-badges-wrapper.wrapper-no-position {
    position: static !important;
    display: flex;
    margin: 10px 0;
    max-width: 100%;
    pointer-events: auto;
}

/* Wyrównanie badge'ów gdy hook jest poza zdjęciem */
.product-badges-wrapper.wrapper-no-position.align-left {
    justify-content: flex-start;
}

.product-badges-wrapper.wrapper-no-position.align-center {
    justify-content: center;
}

.product-badges-wrapper.wrapper-no-position.align-right {
    justify-content: flex-end;
}

/* Badge'e w grupie - normalne flow w wrapperze */
.product-badges-wrapper .toolkit-product-badge.badge-grouped {
    position: relative !important; /* NIE absolute - są w flow wrappera (!important chroni przed motywem) */
    pointer-events: auto; /* Badge'e są klikalne */
    white-space: nowrap; /* Badge nie łamie się w środku */
    float: none !important; /* Zapobiega floatom z motywu */
    margin: 0 !important; /* Zapobiega marginesom z motywu powodującym nakładanie */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Domyślne fallbacki layoutu/typografii gdy brak inline (wszystkie sloty) */
.product-badges-wrapper .toolkit-product-badge {
    --toolkit-badge-icon-size: 16px;
    --toolkit-badge-font-size: 14px;
    --toolkit-badge-font-family: inherit;
    --toolkit-badge-gap: 6px;
    --toolkit-badge-align-items: center;
    --toolkit-badge-justify-content: flex-start;
    --toolkit-badge-bg: #000000;
    --toolkit-badge-color: #ffffff;
    display: inline-flex;
    flex-direction: row;
    align-items: var(--toolkit-badge-align-items);
    justify-content: var(--toolkit-badge-justify-content);
    gap: var(--toolkit-badge-gap);
    background-color: var(--toolkit-badge-bg);
    color: var(--toolkit-badge-color);
}

/* === WYRÓWNANIE BADGE'ÓW W ZALEŻNOŚCI OD POZYCJI WRAPPERA === */

/* Pozycje LEWE - wyrównanie do lewej */
.product-badges-wrapper.position-top-left,
.product-badges-wrapper.position-left-center,
.product-badges-wrapper.position-bottom-left {
    justify-content: flex-start;
    align-content: flex-start;
}

/* Pozycje ŚRODKOWE - wyśrodkowanie */
.product-badges-wrapper.position-top-center,
.product-badges-wrapper.position-center,
.product-badges-wrapper.position-bottom-center {
    justify-content: center;
    align-content: center;
}

/* Pozycje PRAWE - wyrównanie do prawej */
.product-badges-wrapper.position-top-right,
.product-badges-wrapper.position-right-center,
.product-badges-wrapper.position-bottom-right {
    justify-content: flex-end;
    align-content: flex-start;
}

/* === POZYCJE WRAPPERA === */
/* Każda pozycja jawnie resetuje przeciwne strony na auto z !important, aby uniknąć konfliktów z motywem/karuzelą */
.product-badges-wrapper.position-top-left {
    top: 10px !important;
    left: 10px !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
}

.product-badges-wrapper.position-top-center {
    top: 10px !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

.product-badges-wrapper.position-top-right {
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

.product-badges-wrapper.position-left-center {
    top: 50% !important;
    left: 10px !important;
    bottom: auto !important;
    right: auto !important;
    transform: translateY(-50%) !important;
}

.product-badges-wrapper.position-center {
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}

.product-badges-wrapper.position-right-center {
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}

.product-badges-wrapper.position-bottom-left {
    bottom: 10px !important;
    left: 10px !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
}

.product-badges-wrapper.position-bottom-center {
    bottom: 10px !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

.product-badges-wrapper.position-bottom-right {
    bottom: 10px !important;
    right: 10px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* === Wrapper wymaga aby parent miał position: relative === */
ul.products li.product,
ul.products li.product .product-image,
ul.products li.product .product-thumbnail,
.woocommerce-loop-product__link,
.wp-block-woocommerce-product-image {
    position: relative;
}

/* === THEME COMPATIBILITY === */
/* Kadence theme */
.product-photo,
.kadence-blocks-pro-slider-item,
.ksk-gallery,
.kad-light-gallery,
.woocommerce-product-gallery.gallery-has-thumbnails {
    position: relative !important;
}

/* === CAROUSEL / SPLIDE COMPATIBILITY === */
/* Splide slider slides muszą mieć position:relative (parent dla absolute badge) */
.splide__slide .woocommerce-loop-product__link,
.splide__slide .woocommerce-LoopProduct-link,
.splide__slide .woocommerce-loop-image-link,
.splide__slide .product_item_link {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
}

/* Badge wrapper w Splide — wymuszaj position:absolute (motywy/karuzele mogą nadpisać) */
.splide__slide .product-badges-wrapper:not(.wrapper-no-position) {
    position: absolute !important;
}

/* Carousel: zapobiegaj overflow na slide (pozwala badge na krawędziach) */
.splide__slide {
    overflow: visible !important;
}

/* Kadence Product Carousel container */
.kb-product-carousel-container .product-badges-wrapper,
.wp-block-kadence-productcarousel .product-badges-wrapper {
    z-index: 999 !important;
}

/* Kadence loop-entry w carousel — upewnij się że link jest blokiem z position */
.loop-entry.splide__slide .woocommerce-loop-image-link,
.loop-entry.splide__slide .woocommerce-loop-product__link {
    position: relative !important;
    display: block !important;
}

/* Astra theme */
.astra-shop-thumbnail-wrap {
    position: relative !important;
}

/* Flatsome theme */
.box-image,
.product-small.box {
    position: relative !important;
}

/* OceanWP theme */
.woo-entry-image {
    position: relative !important;
}

/* === BADGE BASE STYLES === */
.toolkit-product-badge {
    font-size: var(--toolkit-badge-font-size);
    font-family: var(--toolkit-badge-font-family);
    text-transform: uppercase;
    line-height: 1 !important;
    white-space: nowrap;
    display: inline-block;
    box-sizing: border-box !important;
}

.toolkit-product-badge .badge-text {
    line-height: 1 !important;
    display: inline;
}

.toolkit-product-badge .badge-icon {
    font-size: var(--toolkit-badge-icon-size, 1em);
    line-height: 1;
}

/* .badge-layout-grid — przeniesione do product-badges-admin.css (klasa admin-only) */

/* === BADGE VARIANTS === */
/* New products - teal (jak .badge-new w oryginale) */
.toolkit-product-badge.badge-type-date {
    background-color: var(--tk-color-badge-date-bg);
}

/* Tags/Bestseller - yellow (jak .badge-bestseller w oryginale) */
.toolkit-product-badge.badge-type-tag {
    background-color: var(--tk-color-badge-tag-bg);
    color: var(--tk-color-badge-tag-text);
}

/* Sale - red (jak .badge-sale w oryginale) */
.toolkit-product-badge.badge-type-sale {
    background-color: var(--tk-color-badge-sale-bg);
}

/* Stock - orange */
.toolkit-product-badge.badge-type-stock {
    background-color: var(--tk-color-badge-stock-bg);
}

/* Category - dark blue */
.toolkit-product-badge.badge-type-category {
    background-color: var(--tk-color-badge-category-bg);
}

/* Meta - purple */
.toolkit-product-badge.badge-type-meta {
    background-color: var(--tk-color-badge-meta-bg);
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
    /* Wrapper - mniejsza max-width i mniejszy gap */
    .product-badges-wrapper {
        max-width: calc(100% - 10px); /* 5px z każdej strony */
        gap: 3px;
    }
    
    /* Mniejsze marginesy (5px zamiast 10px) — !important nadpisuje inline style */
    .product-badges-wrapper.position-top-left,
    .product-badges-wrapper.position-left-center,
    .product-badges-wrapper.position-bottom-left {
        left: 5px !important;
    }
    
    .product-badges-wrapper.position-top-right,
    .product-badges-wrapper.position-right-center,
    .product-badges-wrapper.position-bottom-right {
        right: 5px !important;
    }
    
    .product-badges-wrapper.position-top-left,
    .product-badges-wrapper.position-top-center,
    .product-badges-wrapper.position-top-right {
        top: 5px !important;
    }
    
    .product-badges-wrapper.position-bottom-left,
    .product-badges-wrapper.position-bottom-center,
    .product-badges-wrapper.position-bottom-right {
        bottom: 5px !important;
    }
}

/* === SMOOTH FADE-IN (opcjonalne - dla lepszego UX) === */
/* Badge'e na single product mogą mieć fade-in aby uniknąć "skakania" podczas ładowania galerii */
.single-product .product-badges-wrapper {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Pokazanie badge po inicjalizacji galerii WooCommerce */
.woocommerce-product-gallery.woocommerce-product-gallery--with-images .product-badges-wrapper {
    opacity: 1 !important;
}

/* PRINT */
@media print {
    .badges-loop,
    .product-badges-wrapper,
    .toolkit-product-badge {
        display: none !important;
    }
}