/* 1. UKŁAD POZIOMY I ODSTĘPY (20px) */
.variations tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important; /* Przerwa 20px między napisem WAGA, kapsułkami i wyczyść */
    margin-bottom: 15px !important;
}

/* Usuwamy paddingi z komórek tabeli, żeby nie psuły marginesów */
.variations td {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. STYL KAPSUŁEK (OBOK SIEBIE) */
.variation-radios {
    display: flex !important;
    flex-direction: row !important; /* Kapsułki obok siebie */
    gap: 10px !important; /* Odstęp między samymi kapsułkami */
}

.variation-radios input[type="radio"] {
    display: none !important; /* Ukrywamy kropki */
}

.variation-radios label {
    display: inline-block !important;
    padding: 8px 18px !important;
    border: 1px solid #ddd !important;
    border-radius: 50px !important;
    background-color: #fff !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    color: #333;
    white-space: nowrap;
}

/* 3. HOVER KAPSUŁKI (#003060) */
.variation-radios label:hover {
    border-color: #003060 !important;
    color: #003060 !important;
    background-color: rgba(0, 48, 96, 0.05) !important; /* Delikatne tło przy najechaniu */
}

/* Stan zaznaczony */
.variation-radios input[type="radio"]:checked + label {
    background-color: #003060 !important; /* Ciemny granat po wybraniu */
    color: #fff !important;
    border-color: #003060 !important;
}

/* 4. LIKWIDACJA PUSTEGO MIEJSCA (CZERWONA RAMKA) */
.woocommerce-variation-description {
    display: none !important; /* Usuwa rezerwację miejsca na opis */
}

.single_variation_wrap {
    margin-top: 0 !important;
}

/* Przycisk wyczyść - mniejszy i z boku */
.reset_variations {
    font-size: 11px !important;
    text-transform: uppercase;
    color: #999 !important;
    text-decoration: none;
    transition: color 0.2s;
    margin-left:10px!important;
}

.reset_variations:hover {
    color: #003060 !important;
}

/* --- WARIANTY MOBILE - KONDENSACJA V2 (JEDNA LINIA) --- */
@media (max-width: 768px) {
    
    /* 1. Zmniejszamy główny odstęp między napisem "waga" a guzikami */
    .variations tr {
        gap: 5px !important; /* Jeszcze bliżej etykiety */
        margin-bottom: 10px !important;
    }

    /* 2. Etykieta "waga" */
    .variations td.label label {
        font-size: 13px !important;
        margin: 0 !important;
        line-height: 1 !important; /* Żeby nie tworzyła pustego miejsca góra/dół */
    }

    /* 3. KONTENER PRZYCISKÓW - WYMUSZENIE JEDNEJ LINII */
    .variation-radios {
        display: flex !important;
        flex-direction: row !important;
        gap: 5px !important;
        
        /* KLUCZOWA ZMIANA: Zabranie zawijania */
        flex-wrap: nowrap !important; 
        
        align-items: center !important;
        width: 100% !important;
    }

    /* 4. Kapsułki - optymalizacja szerokości */
    .variation-radios label {
        /* Zmniejszamy padding boczny z 12px na 8px, żeby zyskać miejsce */
        padding: 6px 9px !important; 
        
        font-size: 12px !important;
        line-height: 1.2 !important;
        border-radius: 40px !important;
        
        /* Zapobiegamy kurczeniu się tekstu lub wychodzeniu poza guzik */
        white-space: nowrap !important; 
        flex: 0 0 auto !important; /* Nie rozciągaj się na siłę, zajmuj tyle ile trzeba */
    }

    /* 5. Przycisk "Wyczyść" */
    .reset_variations {
        font-size: 10px !important;
        margin-left: 5px !important;
        white-space: nowrap !important; /* Żeby nie spadł niżej w dziwny sposób */
    }
}