/**
 * 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;
}

/* Beginscherm: de knop Begin staat onder de tekst, niet rechtsonder bij de pijltjes.
   Forms.md geeft hem dezelfde klasse als het pijltje (.fmd-next-btn zonder type=submit) en
   de pijltjesregel hieronder zet die vast rechtsonder. Het beginscherm is het enige scherm
   dat een div is (vragen zijn een form), dus div.fmd-first-slide wijst hem aan; deze regel
   wint op specificiteit (een element plus zeven klassen tegen zes). */
.fmd-root div.fmd-slide.fmd-first-slide .fmd-next-controls.fmd-d-flex .fmd-next-btn.fmd-btn {
    position: static !important;
    margin: 24px 0 0 !important;
    display: inline-flex !important;
    width: auto !important;
    bottom: auto !important;
    right: auto !important;
}

/* Geen raster met vaste gaten op het beginscherm. De inhoud komt uit de teksteditor, dus
   de Enter daar (een nieuwe alinea) bepaalt waar ruimte komt, met dezelfde marges als in
   de editor zelf. Een lege alinea is een lege regel, net als in de editor. De marges met
   !important, want Forms.md zet ze op elk kind van .fmd-grid met !important op nul. */
.fmd-root div.fmd-slide.fmd-first-slide > .fmd-grid {
    display: block;
}

.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid > p {
    margin: 0.1em 0 !important;
}

.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid > p:empty {
    min-height: 1.5em;
}

.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid > h1,
.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid > h2,
.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid > h3 {
    margin: 0.5em 0 0.25em !important;
}

.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid > :first-child {
    margin-top: 0 !important;
}

.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid > ul,
.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid > ol {
    margin: 0.5em 0 !important;
    padding-left: 1.5em;
}

.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid li {
    margin: 0.25em 0;
}

/* De editor zet in een opsomming een <p> in elke <li>; zonder deze regel krijgt die van
   Forms.md een marge onder elk punt */
.fmd-root div.fmd-slide.fmd-first-slide .fmd-grid li > p {
    margin: 0 !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;
    }

    /* Beginscherm: knop Begin over de volle breedte. De padding met !important, want de
       pijltjesregel verderop zet die met !important op 12px. */
    .fmd-root div.fmd-slide.fmd-first-slide .fmd-next-controls.fmd-d-flex .fmd-next-btn.fmd-btn {
        min-height: 48px;
        padding: 14px 24px !important;
        font-size: 16px;
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 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;
    }

    /* Navigatiepijltjes: 44 px op mobiel, de minimale tikgrootte. Forms.md zet ze in
       .fmd-footer > .fmd-btn-group als .fmd-previous-btn en .fmd-next-btn met de klasse
       .fmd-btn-control-square (32 bij 30 px); de footer zelf staat via de regel bovenaan
       vast rechtsonder. De oude regel hier richtte op .fmd-prev-btn en .fmd-next-controls,
       klassen die de pijltjes niet hebben, en deed dus niets. */
    .fmd-root .fmd-footer .fmd-btn-group .fmd-btn-control-square {
        width: 44px;
        height: 44px;
    }

    /* 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;
    }
}

/* Rangschikvraag. Forms.md zet fmd- voor elke meegegeven klasse: nf-rang wordt fmd-nf-rang. */
.fmd-nf-rang-schaal {
    margin-bottom: 20px !important;
    color: #6b7280 !important;
    font-size: 14px !important;
}

.fmd-nf-rang {
    margin: 0 0 28px !important;
    padding: 0 !important;
    border: 0 !important;
}

.fmd-nf-rang .fmd-form-question {
    margin-bottom: 10px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.fmd-nf-rang .fmd-form-question sup {
    display: none !important;
}

.fmd-nf-rang .fmd-check-grid-wrapper {
    margin: 0 !important;
}

.fmd-nf-rang .fmd-check-grid,
.fmd-nf-rang .fmd-check-grid-h {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
}

.fmd-nf-rang .fmd-form-check {
    flex: 0 0 52px !important;
    width: 52px !important;
    max-width: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fmd-nf-rang .fmd-form-check-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.fmd-nf-rang .fmd-form-check-mark {
    display: none !important;
}

.fmd-nf-rang .fmd-form-check-input:checked + .fmd-form-check-label {
    background: rgb(var(--fmd-accent-rgb)) !important;
    border-color: rgb(var(--fmd-accent-rgb)) !important;
    color: #fff !important;
}

/* Cijfer dat al bij een andere uitspraak staat: nog klikbaar, dan schuift het hierheen */
.fmd-nf-rang .nf-rang-bezet .fmd-form-check-label {
    opacity: 0.35;
}

@media (max-width: 639px) {
    .fmd-nf-rang-vraag {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
}