/* Jednoduchý CSS bez zbytečností */

.variant-selectors-simple {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-bottom: 20px;

    padding: 16px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 12px;

    border: 1px solid rgba(255, 215, 0, 0.2);

}



.variant-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.variant-group label {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.95rem;

    color: var(--primary-color);

    font-weight: 600;

}



.flavor-select {

    width: 100%;

    padding: 12px 16px;

    background: rgba(255, 255, 255, 0.1);

    border: 2px solid rgba(255, 215, 0, 0.3);

    border-radius: 10px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 500;

    outline: none;

    cursor: pointer;

    transition: all 0.3s ease;

}



.flavor-select:hover {

    border-color: rgba(255, 215, 0, 0.6);

    background: rgba(255, 255, 255, 0.15);

}



.flavor-select:focus {

    border-color: var(--primary-color);

    background: rgba(255, 255, 255, 0.2);

    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);

}



.flavor-select option {

    background: #1a1a1a;

    color: #ffffff;

    padding: 12px;

}



@media (max-width: 480px) {

    .variant-selectors-simple {

        padding: 12px;

        gap: 12px;

    }

    

    .flavor-select {

        padding: 10px 14px;

        font-size: 14px;

    }

}