/* ============================================================
   PREMIUM FRAGRANCE QUIZ - Works WITH Forminator
   ============================================================ *//* ============================================================
   PREMIUM FRAGRANCE QUIZ - Works WITH Forminator
   ============================================================ */

/* -------------------------------------------------------------------------
   FIX: Forminator's utilities CSS uses:
   .forminator-ui .forminator-hidden { display: none !important; }
   This !important rule overrides the inline visibility set
   by Forminator's go_to() pagination function, causing blank pages.
   Instead of overriding with CSS (which causes initial flash of all pages),
   we remove the class via JavaScript after Forminator initializes.
   See fragrance-quiz.js → startHiddenClassWatchdog() and onQuizReady().
   ------------------------------------------------------------------------- *//* -------------------------------------------------------------------------
   Forminator uses .forminator-hidden { display: none !important; } which
   conflicts with its own go_to() inline styles (visibility/opacity/height).
   We remove forminator-hidden via JS after Forminator initializes pagination.
   Until then, pagination pages should remain hidden as Forminator intended.
   We only override to allow inline styles to work after hidden class is removed.
   ------------------------------------------------------------------------- */
.forminator-ui.forminator-quiz .forminator-pagination.forminator-hidden {
    display: none !important;
}
.forminator-ui .forminator-pagination.forminator-hidden {
    display: none !important;
}

/* When forminator-hidden is removed by JS, pagination relies on inline styles */
.forminator-ui .forminator-pagination:not(.forminator-hidden) {
    display: block !important;
}/* ============================================================
   PREMIUM FRAGRANCE QUIZ - Works WITH Forminator
   ============================================================ */

/* -------------------------------------------------------------------------
   FIX: Forminator's utilities CSS uses:
   .forminator-ui .forminator-hidden { display: none !important; }
   This !important rule overrides the inline display/visibility set
   by Forminator's go_to() pagination function, causing blank pages.
   
   We counteract this by resetting display on pages that have been 
   made visible by Forminator (they will have inline styles set).
   The JS will remove the 'forminator-hidden' class after Forminator
   has initialized, allowing inline visibility to work properly.
   ------------------------------------------------------------------------- */

/* Allow Forminator's JS to control page visibility via inline styles.
   The 'forminator-hidden' class is removed by JS after initialization
   so it doesn't interfere with Forminator's go_to() function. */

/* Progress Bar */
.fc-quiz-progress-wrapper {
    margin-bottom: 40px !important;
    text-align: center !important;
}

.fc-quiz-progress-bar {
    width: 100% !important;
    height: 6px !important;
    background: #F0EBE5 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

.fc-quiz-progress-fill {
    width: 12.5% !important;
    height: 100% !important;
    background: linear-gradient(90deg, #B8860B, #D4A843, #C8962E) !important;
    border-radius: 10px !important;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.fc-quiz-step-counter {
    font-family: 'Lato', sans-serif !important;
    font-size: 14px !important;
    color: #AAA !important;
}

.fc-quiz-step-current {
    color: #B8860B !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Hide Forminator's default page indicator */
.forminator-page-indicator {
    display: none !important;
}

/* Question Title */
.forminator-ui.forminator-quiz .forminator-question .forminator-legend {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 26px !important;
    color: #1A1A2E !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

/* Answer Cards */
.forminator-ui.forminator-quiz .forminator-answer {
    display: block !important;
    background: #FFFFFF !important;
    border: 2px solid #EBE5DC !important;
    border-radius: 16px !important;
    padding: 18px 24px !important;
    margin-bottom: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.forminator-ui.forminator-quiz .forminator-answer:hover {
    border-color: #D4C5A8 !important;
    background: #FFFAF5 !important;
    transform: translateY(-2px);
}

.forminator-ui.forminator-quiz .forminator-answer.fc-answer-selected {
    border-color: #B8860B !important;
    background: linear-gradient(135deg, #FFFCF5, #FFF8EE) !important;
    box-shadow: 0 0 0 3px rgba(184,134,11,0.15) !important;
}

.forminator-ui.forminator-quiz .forminator-answer .forminator-answer--name {
    font-family: 'Lato', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #2D2D3A !important;
}

.forminator-ui.forminator-quiz .forminator-answer input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.forminator-ui.forminator-quiz .forminator-answer .forminator-answer--status,
.forminator-ui.forminator-quiz .forminator-answer .forminator-answer--image {
    display: none !important;
}

/* Page transition animation */
.forminator-pagination.fc-page-exit {
    animation: fcSlideOut 0.35s ease forwards !important;
}

@keyframes fcSlideOut {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-30px); }
}

.forminator-pagination.fc-page-exit-back {
    animation: fcSlideOutBack 0.35s ease forwards !important;
}

@keyframes fcSlideOutBack {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(30px); }
}

/* Navigation Buttons - Let Forminator handle positioning, we just style */
.forminator-ui.forminator-quiz .forminator-button.forminator-button-next,
.forminator-ui.forminator-quiz .forminator-button.forminator-button-submit {
    background: linear-gradient(135deg, #1A1A2E, #2D2D4E) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 40px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(26,26,46,0.2) !important;
    min-width: 140px !important;
    transition: all 0.3s ease !important;
}

.forminator-ui.forminator-quiz .forminator-button.forminator-button-next:hover,
.forminator-ui.forminator-quiz .forminator-button.forminator-button-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26,26,46,0.3) !important;
}

.forminator-ui.forminator-quiz .forminator-button.forminator-button-back {
    background: transparent !important;
    color: #999 !important;
    border: 2px solid #EBE5DC !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-width: 120px !important;
    transition: all 0.3s ease !important;
}

.forminator-ui.forminator-quiz .forminator-button.forminator-button-back:hover {
    border-color: #CCC !important;
    color: #666 !important;
}

/* Pagination footer - style the container */
.forminator-pagination-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 35px !important;
    padding-top: 25px !important;
    border-top: 1px solid #F0EBE5 !important;
}

/* Results Page */
.forminator-ui.forminator-quiz .forminator-quiz--result {
    background: linear-gradient(135deg, #FFFCF8, #FFFAF5) !important;
    border: 2px solid #EBE5DC !important;
    border-radius: 24px !important;
    padding: 50px 40px !important;
    text-align: center !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08) !important;
    margin-top: 20px !important;
}

.forminator-ui.forminator-quiz .forminator-quiz--result h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 34px !important;
    color: #1A1A2E !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
}

.forminator-ui.forminator-quiz .forminator-quiz--result p {
    font-size: 16px !important;
    color: #6B6B6B !important;
    line-height: 1.8 !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
}

.forminator-ui.forminator-quiz .forminator-quiz--result .forminator-button {
    background: transparent !important;
    color: #B8860B !important;
    border: 2px solid #B8860B !important;
    border-radius: 50px !important;
    padding: 14px 35px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.forminator-ui.forminator-quiz .forminator-quiz--result .forminator-button:hover {
    background: linear-gradient(135deg, #B8860B, #D4A843) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

/* Quiz Start Button */
.forminator-ui.forminator-quiz .forminator-quiz-start {
    background: linear-gradient(135deg, #1A1A2E, #2D2D4E) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 18px 60px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: block !important;
    margin: 20px auto !important;
    transition: all 0.3s ease !important;
}

.forminator-ui.forminator-quiz .forminator-quiz-start:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(26,26,46,0.3) !important;
}

/* Lead Form */
.forminator-ui.forminator-quiz .forminator-lead-form {
    background: linear-gradient(135deg, #FFFCF8, #FFFAF5) !important;
    border: 2px solid #EBE5DC !important;
    border-radius: 20px !important;
    padding: 40px !important;
    max-width: 520px !important;
    margin: 30px auto 0 !important;
}

.forminator-ui.forminator-quiz .forminator-lead-form .forminator-lead-form-header h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 28px !important;
    color: #1A1A2E !important;
}

.forminator-ui.forminator-quiz .forminator-lead-form input[type="text"],
.forminator-ui.forminator-quiz .forminator-lead-form input[type="email"] {
    border: 2px solid #EBE5DC !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 15px !important;
    width: 100% !important;
    font-family: 'Lato', sans-serif !important;
    box-sizing: border-box !important;
}

.forminator-ui.forminator-quiz .forminator-lead-form .forminator-button-submit {
    background: linear-gradient(135deg, #1A1A2E, #2D2D4E) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 18px 40px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* Emoji styling */
.fc-answer-emoji {
    font-size: 20px !important;
    margin-right: 8px !important;
    display: inline-block !important;
}

/* Mobile */
@media (max-width: 768px) {
    .fc-quiz-container {
        padding: 30px 25px 40px !important;
    }
    .forminator-ui.forminator-quiz .forminator-question .forminator-legend {
        font-size: 22px !important;
    }
    .forminator-pagination-footer {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    .forminator-ui.forminator-quiz .forminator-button.forminator-button-next,
    .forminator-ui.forminator-quiz .forminator-button.forminator-button-back,
    .forminator-ui.forminator-quiz .forminator-button.forminator-button-submit {
        width: 100% !important;
        min-width: 100% !important;
    }
}