/*
 * awcf_configurator_styling — module CSS
 *
 * Look-and-feel geïnspireerd op https://www.gymna.nl/product/behandeltafel-gymna-one/
 * met sowecare-huisstijl (Roboto, secundair rood #A12329, wit/lichtgrijs).
 * Alle regels gescoped op .gform_wrapper.aw-configurator_wrapper zodat andere
 * Gravity Forms op de site niet worden geraakt.
 */

.gform_wrapper.aw-configurator_wrapper {
    /* Override GF's default theme accent color from blue (#204ce5) to
       sowecare secundair rood. GF injecteert de defaults via inline
       <style> op #gform_wrapper_X[data-form-index="0"].gform-theme, wat
       een hogere specificity heeft dan onze class-based selector. !important
       op de custom-prop-values is de enige robuuste manier om per-form-id-
       agnostisch te overrulen. */
    --gf-color-primary: #A12329 !important;
    --gf-color-primary-rgb: 161, 35, 41 !important;
    --gf-color-primary-contrast: #FFFFFF !important;
    --gf-color-primary-contrast-rgb: 255, 255, 255 !important;
    --gf-color-primary-darker: #000000 !important;
    --gf-color-primary-lighter: #C42D34 !important;
    --gf-color-in-ctrl-primary: #A12329 !important;
    --gf-color-in-ctrl-primary-rgb: 161, 35, 41 !important;
    --gf-color-in-ctrl-primary-contrast: #FFFFFF !important;
    --gf-color-in-ctrl-primary-darker: #000000 !important;
    --gf-color-in-ctrl-primary-lighter: #C42D34 !important;

    font-family: 'Roboto', sans-serif;
    max-width: 720px;
    margin: 0 auto;
    padding: 40px;
    background-color: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    /* Form heading (gform_description-block) — prominenter, compact */
    & .gform_heading {
        margin-bottom: 32px;
        padding-bottom: 16px;
        border-bottom: 2px solid #A12329;

        & .gform_description {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-size: 15px;
            color: #000000;
            margin: 0;
        }
    }

    /* Section-header — gymna-style: uppercase, klein, met accent-lijn */
    & .gsection {
        border-bottom: none;
        padding: 0;
        margin-top: 28px;
        margin-bottom: 16px;

        & .gsection_title {
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #8E8E8E;
            margin: 0 0 4px 0;
            padding: 0;
        }

        & .gsection_description {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-size: 13px;
            color: #8E8E8E;
            margin-top: 4px;
        }
    }

    /* Field labels — compact, medium weight */
    & .gfield_label {
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: #000000;
        margin-bottom: 8px;
        display: block;
    }

    & .gfield {
        margin-bottom: 20px;
    }

    /* HTML-info-blokjes (Zitting, Hoofdsteun, Wielen, Rem) — subtiel */
    & .gfield--type-html {
        background-color: #EEEEEE;
        padding: 10px 14px;
        border-radius: 4px;
        margin-bottom: 12px;

        & p {
            margin: 0;
            font-size: 13px;
            color: #000000;
        }

        & strong {
            color: #A12329;
        }
    }

    /*
     * Radio choices — gymna-inspired pill-buttons.
     * - flex-row met wrap, kleine keuzes komen 2-4 naast elkaar
     * - grote lijsten (bekleding 7 keuzes) wrappen automatisch
     * - native radio-cirkel verborgen, hele label is de clickable pill
     */
    & .gfield_radio {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;

        & .gchoice {
            margin: 0;
            padding: 0;
            list-style: none;

            & input[type="radio"] {
                position: absolute;
                opacity: 0;
                width: 0;
                height: 0;
                pointer-events: none;
            }

            & label {
                display: block;
                padding: 12px 14px;
                background-color: #FFFFFF;
                border: 1.5px solid #EEEEEE;
                border-radius: 4px;
                font-family: 'Roboto', sans-serif;
                font-weight: 400;
                font-size: 13px;
                color: #000000;
                cursor: pointer;
                transition: border-color 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
                user-select: none;
                line-height: 1.35;
                text-align: center;
                height: 100%;
                box-sizing: border-box;
            }

            & label:hover {
                border-color: #A12329;
                background-color: #FAFAFA;
            }

            & input[type="radio"]:checked + label,
            & input[type="radio"]:checked ~ label {
                background-color: #A12329;
                border-color: #A12329;
                color: #FFFFFF;
                font-weight: 600;
            }

            & input[type="radio"]:focus-visible + label {
                outline: 2px solid rgba(161, 35, 41, 0.35);
                outline-offset: 2px;
            }
        }
    }

    /* Text/email/phone/textarea inputs — compact, gymna-witte cards */
    & input[type="text"],
    & input[type="email"],
    & input[type="tel"],
    & textarea {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        background-color: #FFFFFF;
        border: 1.5px solid #EEEEEE;
        border-radius: 4px;
        padding: 10px 12px;
        width: 100%;
        box-sizing: border-box;
        transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
    }

    & input[type="text"]:focus,
    & input[type="email"]:focus,
    & input[type="tel"]:focus,
    & textarea:focus {
        outline: none;
        border-color: #A12329;
        box-shadow: 0 0 0 3px rgba(161, 35, 41, 0.12);
    }

    & textarea {
        min-height: 100px;
        resize: vertical;
    }

    /* Contact-fields section (Naam, E-mail, Telefoon) side-by-side desktop */
    & .gform_fields > .gfield--type-text,
    & .gform_fields > .gfield--type-email,
    & .gform_fields > .gfield--type-phone {
        display: inline-block;
        width: calc(50% - 6px);
        vertical-align: top;
        box-sizing: border-box;
    }

    & .gform_fields > .gfield--type-text {
        margin-right: 8px;
    }

    /* Submit button — gymna-inspired: full-width, rood, groter */
    & .gform_footer {
        margin-top: 32px;
        padding-top: 0;
        display: flex;

        & .gform_button,
        & input[type="submit"],
        & button[type="submit"] {
            flex: 1 1 auto;
            display: block;
            width: 100%;
            font-family: 'Roboto', sans-serif;
            font-weight: 600;
            font-size: 16px;
            background-color: #A12329;
            color: #FFFFFF;
            border: none;
            border-radius: 4px;
            padding: 16px 24px;
            cursor: pointer;
            transition: background-color 0.15s ease-out;
            text-transform: none;
            letter-spacing: 0.3px;
            min-width: 100%;
        }

        & .gform_button:hover,
        & input[type="submit"]:hover,
        & button[type="submit"]:hover {
            background-color: #000000;
        }
    }

    /* Validation errors — sowecare rood */
    & .gfield_error {
        & .gfield_label {
            color: #A12329;
        }

        & input,
        & textarea {
            border-color: #A12329;
        }
    }

    & .validation_message,
    & .gform_validation_errors {
        color: #A12329;
        font-size: 13px;
        margin-top: 8px;
    }

    /* Required asterisk — subtiel */
    & .gfield_required {
        color: #A12329;
        margin-left: 4px;
    }
}

/*
 * Contact-CTA-blok direct onder het form.
 * Toegevoegd via gform_get_form_filter (in functions.php van de module).
 */
.aw-configurator-contact-cta {
    max-width: 720px;
    margin: 12px auto 0 auto;
    padding: 20px 24px;
    background-color: #EEEEEE;
    border-radius: 6px;
    text-align: center;
    font-family: 'Roboto', sans-serif;

    & p {
        margin: 0 0 8px 0;
        font-size: 14px;
        font-weight: 600;
        color: #000000;
    }

    & .aw-contact-links {
        display: flex;
        justify-content: center;
        gap: 24px;
        flex-wrap: wrap;
        font-size: 14px;

        & a {
            color: #A12329;
            text-decoration: none;
            font-weight: 500;

            &:hover {
                color: #000000;
            }
        }
    }
}

/* Responsive — tablet & mobile */
@media (max-width: 767px) {
    .gform_wrapper.aw-configurator_wrapper {
        padding: 24px 20px;
        margin: 0 16px;
        border-radius: 4px;

        & .gform_fields > .gfield--type-text,
        & .gform_fields > .gfield--type-email,
        & .gform_fields > .gfield--type-phone {
            display: block;
            width: 100%;
            margin-right: 0;
        }

        & .gfield_radio {
            gap: 6px;

            & .gchoice label {
                padding: 8px 14px;
                font-size: 13px;
            }
        }

        & .gform_footer {
            & .gform_button,
            & input[type="submit"] {
                font-size: 15px;
                padding: 14px 20px;
            }
        }
    }

    .aw-configurator-contact-cta {
        margin: 12px 16px 0 16px;
        padding: 16px 20px;

        & .aw-contact-links {
            flex-direction: column;
            gap: 8px;
        }
    }
}