@import 'variables.css';

/* Варианты фонов для блока квиза */

/* Вариант 1: Белый */
.product-quiz-block--white {
    background: #ffffff;
}

/* Вариант 2: Светло-серый (текущий) */
.product-quiz-block--light-gray {
    background: #f8f9fa;
}

/* Вариант 3: Очень светло-серый */
.product-quiz-block--very-light-gray {
    background: #fafbfc;
}

/* Вариант 4: Кремовый */
.product-quiz-block--cream {
    background: #fefefe;
}

/* Вариант 5: Светло-голубой */
.product-quiz-block--light-blue {
    background: #f0f8ff;
}

/* Вариант 6: Светло-зеленый (очень бледный) */
.product-quiz-block--light-green {
    background: #f8fff8;
}

/* Вариант 7: Светло-желтый */
.product-quiz-block--light-yellow {
    background: #fffef0;
}

/* Вариант 8: Светло-розовый */
.product-quiz-block--light-pink {
    background: #fff8f8;
}

/* Вариант 9: Светло-фиолетовый */
.product-quiz-block--light-purple {
    background: #f8f0ff;
}

/* Вариант 10: Градиент белый-серый */
.product-quiz-block--gradient-white {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

/* Вариант 11: Градиент серый-белый */
.product-quiz-block--gradient-gray {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Вариант 12: Градиент кремовый */
.product-quiz-block--gradient-cream {
    background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 100%);
}

/* Вариант 13: Градиент голубой */
.product-quiz-block--gradient-blue {
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
}

/* Вариант 14: Градиент зеленый (очень бледный) */
.product-quiz-block--gradient-green {
    background: linear-gradient(135deg, #f8fff8 0%, #ffffff 100%);
}

/* Вариант 15: Текстурированный белый */
.product-quiz-block--textured-white {
    background: #ffffff;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(0,0,0,0.02) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0,0,0,0.02) 0%, transparent 50%);
}

/* Вариант 16: Текстурированный серый */
.product-quiz-block--textured-gray {
    background: #f8f9fa;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(0,0,0,0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0,0,0,0.03) 0%, transparent 50%);
}