/* Skincare Quiz CSS - Complete File */

.skincare-quiz-container {

background: white;

padding: 40px;

border-radius: 20px;

box-shadow: 0 12px 40px rgba(0,0,0,0.15);

max-width: 700px;

margin: 2rem auto;

font-family: 'Lato', sans-serif;

position: relative;

overflow: hidden;

}

.skincare-quiz-container h1 {

font-family: 'Poppins', sans-serif;

text-align: center;

color: var(--primary-color, #1a4733);

font-size: 2.5rem;

margin-bottom: 1rem;

}

.skincare-quiz-container .subtitle {

text-align: center;

color: #666;

font-size: 1rem;

margin-bottom: 1.5rem;

}

.skincare-quiz-container #countdown {

text-align: center;

color: #d32f2f;

font-family: 'Poppins', sans-serif;

font-size: 1.1rem;

font-weight: 600;

margin-bottom: 1.5rem;

}

.skincare-quiz-container .progress {

width: 100%;

height: 0.5rem;

background: #e0e0e0;

border-radius: 5px;

margin-bottom: 1.5rem;

}

.skincare-quiz-container .progress-bar {

height: 100%;

background: var(--primary-color, #2d5a27);

border-radius: 5px;

transition: width 0.3s ease;

width: 0%;

}

.skincare-quiz-container .question-counter {

text-align: center;

margin-bottom: 1rem;

font-family: 'Poppins', sans-serif;

color: var(--primary-color, #2d5a27);

font-weight: 600;

}

/* FIXED: Questions wrapper for email question visibility */

.skincare-quiz-container .questions-wrapper {

position: relative;

min-height: 400px;

height: auto;

overflow: visible;

}

/* FIXED: Question positioning */

.skincare-quiz-container .question {

position: absolute;

top: 0;

left: 0;

width: 100%;

min-height: 100%;

height: auto;

opacity: 0;

transform: translateX(100%);

transition: transform 0.5s ease, opacity 0.5s ease;

padding: 20px 0;

display: flex;

flex-direction: column;

}

.skincare-quiz-container .question.active {

opacity: 1;

transform: translateX(0);

}

.skincare-quiz-container .question.previous {

transform: translateX(-100%);

}

.skincare-quiz-container .question h3 {

font-family: 'Poppins', sans-serif;

margin-bottom: 1.5rem;

color: var(--primary-color, #2d5a27);

font-size: 1.4rem;

}

.skincare-quiz-container .options-grid {

display: grid;

grid-template-columns: 1fr;

gap: 0.8rem;

flex-grow: 1;

overflow-y: auto;

padding-right: 10px;

}

.skincare-quiz-container .option {

display: flex;

align-items: center;

padding: 0.9rem 1rem;

background: #f0f8f0;

border: 2px solid #d4e4d4;

border-radius: 10px;

cursor: pointer;

transition: all 0.3s ease;

font-size: 1rem;

}

.skincare-quiz-container .option:hover {

background: #c8e0c8;

transform: translateY(-2px);

}

.skincare-quiz-container .option.selected {

background: var(--primary-color, #8bb98b);

border-color: var(--primary-color, #6a9b6a);

color: white;

}

.skincare-quiz-container .option input {

margin-right: 0.8rem;

}

/* FIXED: Email question specific styles */

.skincare-quiz-container #q11 {

display: flex !important;

position: absolute;

}

.skincare-quiz-container #q11 .options-grid {

display: block;

overflow-y: visible;

}

.skincare-quiz-container .email-option-wrapper {

width: 100%;

padding: 0;

}

.skincare-quiz-container .email-input {

width: 100%;

padding: 15px;

border: 2px solid #d4e4d4;

border-radius: 10px;

font-size: 16px;

margin-bottom: 10px;

transition: border-color 0.3s ease;

box-sizing: border-box;

display: block;

font-family: 'Lato', sans-serif;

}

.skincare-quiz-container .email-input:focus {

border-color: var(--primary-color, #2d5a27);

outline: none;

box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);

}

.skincare-quiz-container .email-input:invalid {

border-color: #d32f2f;

}

.skincare-quiz-container .email-note {

display: block;

color: #666;

text-align: left;

font-size: 0.9rem;

margin-top: 8px;

line-height: 1.4;

}

/* Buttons */

.skincare-quiz-container .buttons-container {

display: flex;

gap: 1rem;

margin-top: 1.5rem;

}

.skincare-quiz-container button,

.skincare-quiz-container .button-link {

font-family: 'Poppins', sans-serif;

background: var(--primary-color, #2d5a27);

color: white;

border: none;

padding: 0.9rem 1.5rem;

border-radius: 10px;

cursor: pointer;

font-size: 1rem;

flex: 1;

text-align: center;

text-decoration: none;

transition: all 0.3s ease;

}

.skincare-quiz-container button:hover,

.skincare-quiz-container .button-link:hover {

background: #1a4733;

transform: scale(1.02);

}

.skincare-quiz-container button:disabled {

background: #ccc;

cursor: not-allowed;

transform: none;

}

/* Results Section */

#quiz-results {

margin-top: 2rem;

padding: 1.5rem;

background: #e8f5e8;

border-radius: 10px;

text-align: center;

font-size: 1rem;

opacity: 0;

transform: translateY(20px);

transition: opacity 0.8s ease, transform 0.8s ease;

}

#quiz-results.show {

opacity: 1;

transform: translateY(0);

}

.skincare-quiz-container .formula-match {

font-size: 1.1rem;

color: var(--primary-color, #1a4733);

margin: 1rem 0;

}

.skincare-quiz-container .skin-profile {

background: #f8f5f2;

padding: 1.5rem;

border-radius: 10px;

margin: 1.5rem 0;

text-align: left;

}

.skincare-quiz-container .skin-profile h4 {

color: var(--primary-color, #2d5a27);

margin-bottom: 0.5rem;

text-align: center;

}

.skincare-quiz-container .skin-profile ul {

list-style: none;

padding: 0;

}

.skincare-quiz-container .skin-profile li {

margin-bottom: 0.5rem;

padding-left: 0;

}

.skincare-quiz-container .ingredient-badge {

display: inline-block;

background: #e8f5e8;

color: var(--primary-color, #2d5a27);

padding: 0.3rem 0.8rem;

border-radius: 20px;

margin: 0.2rem;

font-size: 0.9rem;

}

/* Offer Section */

.skincare-quiz-container .offer-section {

margin: 2rem 0;

}

.skincare-quiz-container .offer-section h3 {

color: var(--primary-color, #2d5a27);

margin-bottom: 1rem;

}

.skincare-quiz-container .offer-cards {

display: grid;

grid-template-columns: 1fr;

gap: 1.5rem;

margin-top: 1.5rem;

}

.skincare-quiz-container .offer-card {

background: #ffffff;

border: 2px solid #22c55e;

border-radius: 2rem;

padding: 2rem;

transition: transform 0.3s ease, box-shadow 0.3s ease;

position: relative;

text-align: left;

}

.skincare-quiz-container .offer-card:hover {

transform: translateY(-5px);

box-shadow: 0 12px 25px rgba(0,0,0,0.08);

}

.skincare-quiz-container .offer-card h4 {

color: var(--primary-color, #2d5a27);

margin-bottom: 1rem;

}

.skincare-quiz-container .offer-card ul {

text-align: left;

padding-left: 1.5rem;

margin: 1rem 0;

}

.skincare-quiz-container .offer-card li {

margin-bottom: 0.5rem;

}

.skincare-quiz-container .offer-badge {

position: absolute;

top: 1rem;

right: 1rem;

background-color: #22c55e;

color: white;

font-weight: bold;

padding: 0.25rem 0.75rem;

border-radius: 9999px;

font-size: 0.9rem;

}

.skincare-quiz-container .cta-button {

background-color: #22c55e;

color: white;

padding: 0.75rem 2rem;

border-radius: 9999px;

font-weight: bold;

transition: background-color 0.3s ease;

display: inline-block;

width: 100%;

text-align: center;

text-decoration: none;

margin-top: 1rem;

}

.skincare-quiz-container .cta-button:hover {

background-color: #16a34a;

}

.skincare-quiz-container .price {

font-size: 1.5rem;

margin-bottom: 1rem;

}

.skincare-quiz-container .price del {

color: #9ca3af;

margin-right: 0.5rem;

}

.skincare-quiz-container .price .discounted {

color: #22c55e;

font-weight: bold;

}

/* Messages */

.skincare-quiz-container #quiz-message {

margin-top: 1rem;

padding: 1rem;

border-radius: 10px;

text-align: center;

}

.skincare-quiz-container .success-message {

background: #e8f5e8;

color: #2d5a27;

padding: 1rem;

border-radius: 10px;

text-align: center;

margin: 1rem 0;

}

.skincare-quiz-container .error-message {

background: #f8d7da;

color: #721c24;

padding: 1rem;

border-radius: 10px;

text-align: center;

margin: 1rem 0;

}

/* Responsive Design - Tablet */

@media (max-width: 768px) {

.skincare-quiz-container {

    padding: 30px;

}



.skincare-quiz-container h1 {

    font-size: 2rem;

}



.skincare-quiz-container .question h3 {

    font-size: 1.3rem;

}



.skincare-quiz-container .option {

    font-size: 0.9rem;

    padding: 0.8rem;

}



.skincare-quiz-container button,

.skincare-quiz-container .cta-button {

    font-size: 1rem;

    padding: 0.8rem 1.5rem;

}



.skincare-quiz-container .questions-wrapper {

    min-height: 450px;

}



.skincare-quiz-container .email-input {

    padding: 12px;

    font-size: 14px;

}



#quiz-results {

    font-size: 0.9rem;

    padding: 1rem;

}



#quiz-results h2,

#quiz-results h3,

#quiz-results h4 {

    font-size: 1.4rem;

    margin-bottom: 1rem;

}



#quiz-results p {

    font-size: 0.9rem;

    margin-bottom: 1rem;

}



#quiz-results div {

    margin-bottom: 1.5rem;

}



.skincare-quiz-container .offer-card {

    padding: 1.5rem;

}



.skincare-quiz-container .offer-badge {

    font-size: 0.75rem;

    padding: 0.2rem 0.6rem;

}



.skincare-quiz-container .price {

    font-size: 1.25rem;

}



.skincare-quiz-container .buttons-container {

    flex-direction: column;

}

}

/* Responsive Design - Mobile */

@media (max-width: 480px) {

.skincare-quiz-container {

    padding: 20px;

    margin: 1rem auto;

}



.skincare-quiz-container h1 {

    font-size: 1.8rem;

}



.skincare-quiz-container .subtitle {

    font-size: 0.9rem;

}



.skincare-quiz-container .question h3 {

    font-size: 1.1rem;

}



.skincare-quiz-container .option {

    font-size: 0.85rem;

    padding: 0.7rem;

}



.skincare-quiz-container button,

.skincare-quiz-container .cta-button {

    font-size: 0.9rem;

    padding: 0.7rem 1rem;

}



.skincare-quiz-container #countdown {

    font-size: 0.9rem;

}



.skincare-quiz-container .questions-wrapper {

    min-height: 500px;

}



.skincare-quiz-container .email-input {

    padding: 10px;

    font-size: 14px;

}



.skincare-quiz-container .email-note {

    font-size: 0.8rem;

}



#quiz-results {

    padding: 1rem;

}



#quiz-results h2,

#quiz-results h3,

#quiz-results h4 {

    font-size: 1.2rem;

    margin-bottom: 0.8rem;

}



#quiz-results p {

    font-size: 0.85rem;

    margin-bottom: 0.8rem;

}



#quiz-results div {

    margin-bottom: 1rem;

}



.skincare-quiz-container .offer-card {

    padding: 1.5rem;

}



.skincare-quiz-container .offer-badge {

    font-size: 0.7rem;

    padding: 0.2rem 0.5rem;

}



.skincare-quiz-container .price {

    font-size: 1.1rem;

}



.skincare-quiz-container .ingredient-badge {

    font-size: 0.8rem;

    padding: 0.25rem 0.6rem;

}

}