/* --- GŁÓWNE STYLE PRZYCISKÓW (TEKSTOWYCH) --- */
.custom-swatch-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 8px;
}

.swatch-btn {
    border: 1px solid #ccc;
    background: #fff;
    /* POPRAWKA: Ustawienie koloru tekstu na czarny, aby był widoczny na białym tle */
    color: #222; 
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    /* Min. szerokość dla przycisków TEKSTOWYCH */
    min-width: 48px; 
    text-align: center;
    line-height: 1;
    height: auto;
    box-sizing: border-box;
}

.swatch-btn:hover:not(:disabled) {
    border-color: #222;
    transform: scale(1.05);
}

/* Stan AKTYWNY (po wybraniu - domyślnie dla TEKSTOWYCH) */
.swatch-btn.active:not(.disabled) {
    border-color: #000;
    background: #000;
    color: #fff;
}

/* --- STYLE DLA WARIANTÓW NIEDOSTĘPNYCH --- */
.swatch-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border-color: #eee !important;
}

/* --- STYLE KOLORÓW / HOLOGRAMU (KOŁA) --- */

.custom-swatch-wrapper .color-swatch,
.custom-swatch-wrapper .holo-swatch {
    /* POPRAWKA: Wymuszamy równe wymiary i resetujemy min-width dla koła */
    width: 36px !important;
    height: 36px !important; 
    border-radius: 50%;
    min-width: 0 !important; 
    
    /* Zapewniamy, że inne style (np. padding) nie rozciągną przycisku */
    padding: 0 !important; 
    line-height: 36px;
    display: inline-block;
}

/* Efekt hologramu */
.holo-swatch {
    border: 1px solid #999;
    background: linear-gradient(135deg,
        #ff00de,
        #00fff7,
        #ffeb00,
        #00ff88,
        #ff0088,
        #00aaff);
    background-size: 400% 400%;
    animation: holoMove 4s ease infinite;
}

@keyframes holoMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* --- AKTYWNY WARIANT KOLOROWY (NIE-HOLOGRAMOWY) --- */
.custom-swatch-wrapper .color-swatch.active:not(.disabled) {

    
    /* Ukrywamy ewentualny tekst i obramowujemy */
    color: transparent !important; 
    outline: 2px solid #000;
    outline-offset: 2px;
    border-color: #000;
}


/* --- AKTYWNY WARIANT HOLOGRAMOWY --- */
.custom-swatch-wrapper .holo-swatch.active:not(.disabled) {
    /* KLUCZOWE: Wymuszamy oryginalny gradient dla hologramu, aby nadpisać potencjalne białe tło */
    background-image: linear-gradient(135deg,
        #ff00de,
        #00fff7,
        #ffeb00,
        #00ff88,
        #ff0088,
        #00aaff) !important;
    background-size: 400% 400% !important;

    color: transparent !important;
    outline: 2px solid #000;
    outline-offset: 2px;
    border-color: #000;
    
    /* Wznawiamy animację, jeśli została przerwana */
    animation: holoMove 4s ease infinite !important;
}