/**
 * Product Combinations Module - Front Styles
 *
 * ⚠️ STANDARD MODULU wh_* (kanon: „panel Vue + front w pelni na tokenach"):
 * kazda wartosc wygladowa idzie przez `var(--wh-*, <dotychczasowa wartosc>)`,
 * zeby branza przestawiala wyglad BEZ dotykania tego pliku. Fallback = to, co
 * bylo, wiec sama migracja nie zmienia wygladu.
 *
 * ⚠️ Tekst bierze `--wh-color-text-primary`, NIE `--wh-color-text` — ten drugi
 * jest aliasem wstecznej zgodnosci wskazujacym tekst POMOCNICZY (ustalone
 * z CI-CD 2026-07-27; w wh_sociallogin dalo to kontrast 3.45:1 zamiast 11.76:1).
 *
 * @author    Woohoo.pl
 * @copyright 2025 Woohoo.pl
 * @license   https://opensource.org/licenses/AFL-3.0
 */

/* Tokeny lokalne — kazdy bierze z globalnego, hex tylko jako fallback.
   `#2fb5d2` to domyslny akcent PrestaShopa; podpiety pod brand, bo oznacza
   AKTYWNY wariant, a to element identyfikacji sklepu. */
.wh-combinations-wrapper,
.wh-combinations-select {
    --wh-pc-accent: var(--wh-color-primary, #2fb5d2);
    --wh-pc-border: var(--wh-color-border, #e5e5e5);
    --wh-pc-bg: var(--wh-color-bg-base, #fff);
    --wh-pc-bg-subtle: var(--wh-color-bg-subtle, #f5f5f5);
    --wh-pc-text: var(--wh-color-text-primary, #232323);
    --wh-pc-text-muted: var(--wh-color-text-muted, #666);
    --wh-pc-tile: var(--wh-pc-tile-size, 64px);
    --wh-pc-radius: var(--wh-radius-md, 6px);
    /* Poswiaty licza z koloru akcentu — bez tokenu zostalyby niebieskie
       nawet po zmianie brandu. `color-mix` z fallbackiem na stara rgba. */
    --wh-pc-glow: var(--wh-pc-glow-custom, rgba(47, 181, 210, 0.2));
    --wh-pc-ring: var(--wh-pc-ring-custom, rgba(47, 181, 210, 0.3));
}

/* Container */
.wh-combinations-wrapper {
    position: relative;
    margin: var(--wh-space-sm, 1rem) 0;
    padding: 0;
}

/* Label */
.wh-combinations-label {
    margin-bottom: var(--wh-space-xs, 0.75rem);
    font-family: var(--wh-font-body, inherit);
    font-weight: var(--wh-font-weight-semibold, 600);
    font-size: var(--wh-font-size-sm, 0.875rem);
    color: var(--wh-pc-text);
}

.wh-combinations-label span {
    display: inline-block;
}

/* Content wrapper */
.wh-combinations-content {
    width: 100%;
}

/* ==================== */
/* Thumbnails Mode      */
/* ==================== */

.wh-combinations-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wh-space-2xs, 10px);
    align-items: flex-start;
}

.wh-combination-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wh-pc-tile);
    height: var(--wh-pc-tile);
    border: 2px solid var(--wh-pc-border);
    border-radius: var(--wh-pc-radius);
    background: var(--wh-pc-bg);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.wh-combination-item:hover {
    border-color: var(--wh-pc-accent);
    box-shadow: 0 2px 8px var(--wh-pc-glow);
}

.wh-combination-item.wh-combination-active {
    border-color: var(--wh-pc-accent);
    box-shadow: 0 0 0 2px var(--wh-pc-ring);
}

/* Active indicator triangle */
.wh-combination-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 18px 18px 0;
    border-color: transparent var(--wh-pc-accent) transparent transparent;
    z-index: 2;
}

.wh-combination-indicator::after {
    content: "✓";
    position: absolute;
    top: 1px;
    right: -15px;
    font-size: var(--wh-font-size-3xs, 9px);
    color: var(--wh-color-text-inverse, #fff);
    font-weight: bold;
}

/* Product image */
.wh-combination-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.wh-combination-item:hover .wh-combination-image {
    transform: scale(1.05);
}

/* No image placeholder */
.wh-combination-noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
    font-size: var(--wh-font-size-2xs, 10px);
    text-align: center;
    color: var(--wh-pc-text-muted);
    background: var(--wh-pc-bg-subtle);
    word-break: break-word;
    line-height: 1.2;
}

/* ==================== */
/* Select Mode          */
/* ==================== */

.wh-combinations-select {
    width: 100%;
    max-width: var(--wh-pc-select-max, 400px);
    padding: var(--wh-space-2xs, 0.5rem) var(--wh-space-md, 2rem) var(--wh-space-2xs, 0.5rem) var(--wh-space-xs, 0.75rem);
    font-family: var(--wh-font-body, inherit);
    font-size: var(--wh-font-size-sm, 0.875rem);
    line-height: 1.5;
    color: var(--wh-pc-text);
    background-color: var(--wh-pc-bg);
    /* ⚠️ Strzalka to data-URI — CSS custom properties NIE dzialaja wewnatrz
       url(), wiec jej koloru (#343a40) nie da sie stokenizowac bez wymiany
       na pseudo-element. Swiadomie zostawione: to neutralna szarosc ikony,
       nie kolor brandu. Do zmiany dopiero, gdy branza bedzie chciala inna. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--wh-space-xs, 0.75rem) center;
    background-size: 16px 12px;
    border: 1px solid var(--wh-pc-border);
    border-radius: var(--wh-radius-sm, 4px);
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wh-combinations-select:hover {
    border-color: var(--wh-pc-accent);
}

.wh-combinations-select:focus {
    border-color: var(--wh-pc-accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--wh-pc-glow);
}

/* ==================== */
/* Responsive           */
/* ==================== */

@media (max-width: 767px) {
    .wh-combinations-wrapper {
        --wh-pc-tile: var(--wh-pc-tile-size-mobile, 56px);
    }

    .wh-combinations-thumbnails {
        gap: var(--wh-space-3xs, 8px);
    }

    .wh-combinations-select {
        max-width: 100%;
    }
}

/* ==================== */
/* Loading State        */
/* ==================== */

.wh-combinations-wrapper.wh-loading {
    opacity: 0.6;
    pointer-events: none;
}

.wh-combinations-wrapper.wh-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--wh-pc-border);
    border-top-color: var(--wh-pc-accent);
    border-radius: 50%;
    animation: wh-spin 0.8s linear infinite;
}

@keyframes wh-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ⚠️ Dostepnosc: kto prosi system o ograniczenie ruchu, nie ma dostawac
   krecacego sie spinnera (WCAG 2.3.3). Zostaje sam wygaszony stan. */
@media (prefers-reduced-motion: reduce) {
    .wh-combinations-wrapper.wh-loading::after {
        animation: none;
    }

    .wh-combination-item,
    .wh-combination-image,
    .wh-combinations-select {
        transition: none;
    }
}

/* ==================== */
/* Extra Content Tab    */
/* ==================== */

.product-tab-content .wh-combinations-wrapper {
    margin: 0;
}

/* ==================== */
/* AJAX Transitions     */
/* ==================== */

.wh-ajax-updating {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.wh-ajax-updated {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Smooth image transitions */
.product-cover img,
.js-main-image {
    transition: opacity 0.3s ease;
}

.product-cover img.wh-loading,
.js-main-image.wh-loading {
    opacity: 0.5;
}


/* ==================== */
/* Koszyk: kolor pozycji (2.2.3) */
/* ==================== */

/* Kółko + nazwa koloru przy pozycji koszyka (hook displayCartExtraProductInfo).
   Sam odczyt, bez interakcji. Tokeny jak wyżej; tekstura ma pierwszeństwo przed HEX. */
.wh-pc-cart-color {
    display: inline-flex;
    align-items: center;
    gap: var(--wh-space-2xs, 0.6rem);
    margin-top: var(--wh-space-xs, 0.75rem);
    font-family: var(--wh-font-body, inherit);
    font-size: var(--wh-font-size-sm, 0.875rem);
    color: var(--wh-color-text-primary, #232323);
}

.wh-pc-cart-color__swatch {
    display: block;
    box-sizing: border-box;
    width: var(--wh-pc-cart-swatch-size, 1.7rem);
    height: var(--wh-pc-cart-swatch-size, 1.7rem);
    border: 1.5px solid var(--wh-color-border, #c4c4c4);
    border-radius: 50%;
    background-color: var(--wh-color-bg-base, #fff);
    background-size: cover;
    background-position: center;
}