:root {
--primary-color: #1E88E5;
--secondary-color: #4CAF50;
--background-color: #F5F5F5;
--title-color: #1E88E5;
--title-font-size: 28px;
--title-font-weight: 700;
--title-font-style: normal;
--description-color: #666;
--description-font-size: 16px;
--description-font-weight: 400;
--description-font-style: normal;
--question-color: #333;
--question-font-size: 22px;
--question-font-weight: 700;
--question-font-style: normal;
--answer-color: #333;
--answer-font-size: 16px;
--answer-font-weight: 400;
--answer-font-style: normal;
--answer-text-align: left;
--button-color: #fff;
--button-font-size: 16px;
--button-font-weight: 400;
--button-font-style: normal;
--button-background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
--button-background-hover: linear-gradient(to right, var(--secondary-color), var(--primary-color));
} #husu-quiz-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: var(--background-color);
border-radius: 10px;
font-family: 'Poppins', sans-serif;
text-align: center;
}
.husu-title {
color: var(--title-color);
font-size: var(--title-font-size);
font-weight: var(--title-font-weight);
font-style: var(--title-font-style);
margin-bottom: 10px;
}
.husu-description {
color: var(--description-color);
font-size: var(--description-font-size);
font-weight: var(--description-font-weight);
font-style: var(--description-font-style);
margin-bottom: 20px;
} #husu-progress-bar {
width: 100%;
height: 10px;
background: #ddd;
border-radius: 5px;
margin-bottom: 20px;
}
#husu-progress {
width: 0;
height: 100%;
background: var(--button-background);
border-radius: 5px;
transition: width 0.3s ease;
} .husu-question-title {
font-size: var(--question-font-size);
font-weight: var(--question-font-weight);
font-style: var(--question-font-style);
color: var(--question-color);
margin-bottom: 20px;
}
.husu-answers {
display: flex;
flex-direction: column;
gap: 10px;
}
.husu-answer {
display: flex;
align-items: center;
padding: 15px;
background: #fff;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-align: var(--answer-text-align);
}
.husu-answer:hover {
border-color: var(--primary-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.husu-answer input {
margin-right: 10px;
}
.husu-answer-text {
font-size: var(--answer-font-size);
font-weight: var(--answer-font-weight);
font-style: var(--answer-font-style);
color: var(--answer-color);
} .husu-next-button {
margin-top: 20px;
padding: 10px 20px;
background: var(--button-background);
color: var(--button-color);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
font-style: var(--button-font-style);
}
.husu-next-button:hover {
background: var(--button-background-hover);
} #husu-navigation {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
#husu-back-button,
#husu-next-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
font-style: var(--button-font-style);
}
#husu-back-button {
background: #666;
color: var(--button-color);
}
#husu-back-button:hover {
background: #555;
}
#husu-next-button {
background: var(--button-background);
color: var(--button-color);
}
#husu-next-button:hover {
background: var(--button-background-hover);
} .husu-products {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.husu-product {
position: relative;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
width: 100%;
max-width: 400px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.husu-product:hover {
transform: translateY(-5px);
}
.husu-product img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 15px;
}
.husu-product .husu-discount-label {
position: absolute;
top: 10px;
right: 10px;
background: #e74c3c;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
}
.husu-product .husu-rating {
margin-bottom: 10px;
}
.husu-rating .star {
color: #ccc;
font-size: 16px;
}
.husu-rating .star.filled {
color: #f1c40f;
}
.husu-product .husu-stock-status {
margin-top: 10px;
font-size: 14px;
}
.husu-stock-status.in-stock {
color: #2ecc71;
}
.husu-stock-status.out-of-stock {
color: #e74c3c;
} .husu-product-custom-description {
margin-top: 10px;
padding: 0;
list-style: none;
text-align: left; width: 100%; }
.husu-product-custom-description li {
position: relative;
padding-left: 20px;
margin-bottom: 5px;
font-size: 14px;
color: #555; }
.husu-product-custom-description li:before {
content: "➜"; position: absolute;
left: 0;
color: #2ecc71; font-size: 14px;
}
.husu-product-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.husu-button {
display: inline-block;
padding: 10px 20px;
background: var(--primary-color);
color: var(--button-color);
text-decoration: none;
border-radius: 5px;
transition: background 0.3s ease;
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
font-style: var(--button-font-style);
}
.husu-button:hover {
background: var(--secondary-color);
}
.husu-add-to-cart {
background: var(--secondary-color);
}
.husu-add-to-cart:hover {
background: var(--primary-color);
} .husu-return-button {
text-align: center;
margin-top: 30px;
}
#husu-return-to-start {
padding: 10px 20px;
background: #666;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
font-style: var(--button-font-style);
}
#husu-return-to-start:hover {
background: #555;
} .husu-additional-description {
margin-top: 20px;
text-align: center;
}
.husu-additional-description p {
margin: 0;
} @media (min-width: 768px) {
.husu-product {
width: calc(50% - 20px);
}
}
@media (max-width: 767px) {
.husu-product {
width: 100%;
}
}