/**
 * Custom Survey Styling
 * Overrides and enhancements for Forms.md
 */

html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

#onboarding-form-container {
    width: 100%;
    max-width: 800px;
    padding: 20px;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Page progress - top of screen with padding */
.fmd-page-progress {
    position: fixed !important;
    top: 5px !important;
    left: 5px !important;
    right: 5px !important;
    width: calc(100% - 10px) !important;
    z-index: 10000 !important;
    display: block !important;
}

/* Footer - bottom right of viewport */
.fmd-footer {
    position: fixed !important;
    bottom: 10px !important;
    right: 30px !important;
    left: auto !important;
    z-index: 9999 !important;
    text-align: right !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Question text - left aligned on desktop */
.fmd-form-field>label:first-child,
.fmd-form-field>legend,
.fmd-form-question {
    font-size: 26px !important;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 16px;
    text-align: left;
    line-height: 1.4;
}

/* Override Forms.md nowrap — allow long questions to wrap */
.fmd-root .fmd-text-nowrap {
    white-space: normal !important;
}

/* Description styling - consistent across all question types */
.fmd-form-description {
    font-size: 16px !important;
    color: rgb(var(--fmd-accent-rgb)) !important;
    margin-bottom: calc(var(--fmd-spacer) * .75) !important;
    line-height: 1.5;
    font-weight: 400;
}

/* Rich text formatting support in questions and descriptions */
.fmd-form-field>label:first-child strong,
.fmd-form-field>label:first-child b,
.fmd-form-field>legend strong,
.fmd-form-field>legend b,
.fmd-form-question strong,
.fmd-form-question b,
.fmd-form-description strong,
.fmd-form-description b {
    font-weight: 700;
}

.fmd-form-field>label:first-child em,
.fmd-form-field>label:first-child i,
.fmd-form-field>legend em,
.fmd-form-field>legend i,
.fmd-form-question em,
.fmd-form-question i,
.fmd-form-description em,
.fmd-form-description i {
    font-style: italic;
}

.fmd-form-field>label:first-child u,
.fmd-form-field>legend u,
.fmd-form-question u,
.fmd-form-description u {
    text-decoration: underline;
}

.fmd-form-check-label {
    border-radius: 8px !important;
}

/* Style answer options */
.fmd-choice-field label {
    font-size: 18px;
    padding: 16px 20px;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.2s ease;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.fmd-choice-field label:hover {
    border-color: #4a5568;
    background: #f7fafc;
}

/* Submit button under answers */
.fmd-submit-btn,
button[type="submit"],
.fmd-next-btn[type="submit"],
.fmd-end-slide .fmd-next-controls,
.fmd-end-slide .fmd-next-btn {
    position: static !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
    width: auto !important;
    bottom: auto !important;
    right: auto !important;
}

/* Navigation arrows - bottom right */
.fmd-prev-controls,
.fmd-prev-btn,
.fmd-next-controls:not(.fmd-end-slide .fmd-next-controls) .fmd-next-btn:not([type="submit"]):not(.fmd-submit-btn) {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
}

/* Hide Forms.md default "Thank you" completion message and loading states */
.fmd-end-slide,
.fmd-completion-message,
.fmd-completion-screen,
.fmd-loading,
.fmd-loader,
.fmd-spinner,
.fmd-success-message,
.fmd-thank-you,
[class*="thank"],
[class*="completion"],
[class*="loading"],
[class*="spinner"],
[class*="success"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide any blue overlay or background that appears after submission */
.fmd-overlay,
.fmd-modal,
.fmd-backdrop,
.fmd-loader-container,
.fmd-loader-progress,
[class*="overlay"],
[class*="modal"],
[class*="backdrop"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide backdrop and loader during slide transitions */
.fmd-during-slide-transition .fmd-backdrop,
.fmd-during-slide-transition .fmd-loader-container,
.fmd-during-slide-transition .fmd-loader-progress {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* CRITICAL: Hide button processing spinner (the blue spinner after submit) */
.fmd-root .fmd-btn-processing,
.fmd-root .fmd-btn-processing::before,
.fmd-root .fmd-btn-processing::after,
.fmd-root .fmd-next-controls .fmd-btn-processing,
.fmd-root .fmd-next-controls .fmd-btn-processing::before,
.fmd-root .fmd-next-controls .fmd-btn-processing::after,
button.fmd-btn-processing,
button.fmd-btn-processing::before,
button.fmd-btn-processing::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
    background: transparent !important;
    border: none !important;
    pointer-events: none !important;
}

/* Hide all loader/spinner animations */
.fmd-loader-spinner,
.fmd-root .fmd-loader-spinner,
[class*="loader-spinner"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}

/* Stop all loader animations */
@keyframes fmd-loader-spinner-animation {
    to {
        transform: none !important;
    }
}

@keyframes fmd-btn-processing-animation {
    to {
        transform: none !important;
    }
}

@keyframes fmd-loader-progress-animation {
    to {
        background-position: 0 0 !important;
    }
}

/* Hide Made in Forms.md button and loader */
a.fmd-btn.fmd-btn-accent.fmd-btn-control,
[class*="made-in"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    body {
        align-items: flex-start;
    }

    #onboarding-form-container {
        max-width: 100%;
        padding: 16px;
        padding-bottom: 120px !important;
    }

    /* Check grid - block on mobile only */
    .fmd-check-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Form check label padding and font size on mobile */
    .fmd-form-check-label {
        padding: 10px !important;
        font-size: 16px !important;
    }

    /* Smaller question font on mobile */
    .fmd-form-field>label:first-child,
    .fmd-form-field>legend,
    .fmd-form-question {
        font-size: 18px !important;
        margin-bottom: 32px;
        line-height: 1.3;
    }

    /* Description styling on mobile */
    .fmd-form-description {
        font-size: 16px !important;
        margin-bottom: calc(var(--fmd-spacer) * .75) !important;
    }

    .fmd-root.fmd-root-inline .fmd-main {
        padding: 30px !important;
    }

    /* Touch-friendly answer options */
    .fmd-choice-field label {
        font-size: 16px;
        padding: 18px 16px;
        margin-bottom: 10px;
        min-height: 56px;
        display: flex;
        align-items: center;
    }

    /* Touch-friendly submit button */
    .fmd-submit-btn,
    button[type="submit"],
    .fmd-next-btn[type="submit"],
    .fmd-end-slide .fmd-next-controls,
    .fmd-end-slide .fmd-next-btn {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 16px;
        display: block !important;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Text inputs mobile-friendly */
    .fmd-text-field input,
    .fmd-email-field input {
        font-size: 16px;
        padding: 16px;
        min-height: 48px;
    }

    /* Navigation arrows - larger on mobile */
    .fmd-prev-controls,
    .fmd-prev-btn,
    .fmd-next-controls:not(.fmd-end-slide .fmd-next-controls) .fmd-next-btn:not([type="submit"]):not(.fmd-submit-btn) {
        bottom: 20px !important;
        right: 20px !important;
        min-width: 48px;
        min-height: 48px;
        padding: 12px !important;
    }

    /* Better spacing for form fields */
    .fmd-form-field {
        margin-bottom: 24px;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    #onboarding-form-container {
        padding: 16px 12px 80px 12px;
    }

    .fmd-form-field>label:first-child,
    .fmd-form-field>legend {
        font-size: 22px;
        margin-bottom: 28px;
    }

    .fmd-choice-field label {
        font-size: 15px;
        padding: 16px 14px;
    }
}