/**
 * GFTEC-Bio: Gravity Forms Submission Form Styles
 *
 * Matches the existing TEC Community Events form design on bioerlebnistage.de.
 * Fonts "Roboto Slab" and "Hind Madurai" are loaded by the site theme.
 *
 * GF's Orbital/Framework theme injects an inline <style> tag with ID-based
 * selectors (e.g. #gform_wrapper_3[data-form-index="0"].gform-theme).
 * Class-only selectors cannot beat this even with !important on the same
 * properties. We use [id^="gform_wrapper_"] attribute selector to match
 * any GF form wrapper ID without hardcoding the form number.
 *
 * @package GFTEC_Bio
 */

/* ── CSS Custom Property Overrides ─────────────────────────────── */
[id^="gform_wrapper_"].gform-theme--framework,
[id^="gform_wrapper_"].gform-theme {
    --gf-color-primary: #C44867 !important;
    --gf-ctrl-accent-color: #C44867 !important;
    --gf-ctrl-choice-check-color: #C44867 !important;
    --gf-ctrl-border-color: #D5D5D5 !important;
    --gf-ctrl-border-color-focus: #C44867 !important;
    --gf-ctrl-radius: 0px !important;
    --gf-ctrl-bg-color: #FFFFFF !important;
    --gf-ctrl-bg-color-focus: #FFFFFF !important;
    --gf-ctrl-color: #000000 !important;
    --gf-ctrl-color-placeholder: #999999 !important;
    --gf-ctrl-placeholder-color: #999999 !important;
    --gf-label-color: #C44867 !important;
    --gf-label-font-size: 26px !important;
    --gf-label-font-weight: 700 !important;
    --gf-desc-color: #000000 !important;
    --gf-desc-font-size: 12px !important;
    --gf-btn-bg-color: #EE7402 !important;
    --gf-btn-bg-color-hover: #d56802 !important;
    --gf-btn-color: #FFFFFF !important;
    --gf-btn-radius: 3px !important;
    --gf-field-section-border-color: #E4E4E4 !important;
    --gf-field-section-border-width: 1px !important;
    --gf-field-section-border-style: solid !important;
    --gf-field-section-padding-y-end: 32px !important;
    --gf-ctrl-shadow: none !important;
}

/* ── Form Wrapper ──────────────────────────────────────────────── */
[id^="gform_wrapper_"].gform-theme {
    font-family: "Roboto Slab", sans-serif !important;
    font-size: 18px !important;
    color: #5D5D5D !important;
    max-width: 100% !important;
    padding: 24px !important;
    background: #FFFFFF !important;
}

/* ── Form Heading ──────────────────────────────────────────────── */
[id^="gform_wrapper_"] .gform_heading {
    margin-bottom: 25px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

[id^="gform_wrapper_"] .gform_heading .gform_title {
    font-family: roboto, oswald, "arial narrow", sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #6C883A !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
}

[id^="gform_wrapper_"] .gform_heading .gform_description {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
    line-height: 1.5 !important;
}

[id^="gform_wrapper_"] .gform_heading .gform_required_legend {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    color: #5D5D5D !important;
}

/* ── Section Breaks ────────────────────────────────────────────── */
[id^="gform_wrapper_"] .gfield--type-section {
    padding-top: 24px !important;
    padding-block-end: 32px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    border-block-end: 1px solid #E4E4E4 !important;
}

[id^="gform_wrapper_"] .gsection .gsection_title {
    font-family: "Roboto Slab", sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #C44867 !important;
    margin-bottom: 0 !important;
}

[id^="gform_wrapper_"] .gsection .gsection_description {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
    margin-top: 8px !important;
}

/*
 * First visible section = form title "NEUE VERANSTALTUNG EINTRAGEN"
 * Honeypot field is :first-child, so the title section is :nth-child(2).
 * Also handle the case where honeypot is absent (:first-child).
 */
[id^="gform_wrapper_"] .gform_fields > .gfield--type-section:nth-child(2) .gsection_title,
[id^="gform_wrapper_"] .gform_fields > .gfield--type-section:first-child .gsection_title {
    font-family: roboto, oswald, "arial narrow", sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #6C883A !important;
    text-transform: uppercase !important;
}

[id^="gform_wrapper_"] .gform_fields > .gfield--type-section:nth-child(2),
[id^="gform_wrapper_"] .gform_fields > .gfield--type-section:first-child {
    border-block-end: none !important;
    border-bottom: none !important;
    padding-block-end: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

/* ── Field Labels ──────────────────────────────────────────────── */
/* Default: small black labels (matches field labels inside TEC sections) */
[id^="gform_wrapper_"] .gfield .gfield_label,
[id^="gform_wrapper_"] .gfield > label,
[id^="gform_wrapper_"] .gfield > legend {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    line-height: 28px !important;
    margin-bottom: 8px !important;
}

/*
 * Big pink labels: only for the "Titel" and "Beschreibung" fields
 * which sit between the title section (:nth-child(2)) and the
 * first content section (:nth-child(5) = "Datum & Zeit").
 * Honeypot is :nth-child(1), title section is :nth-child(2),
 * so these are :nth-child(3) and :nth-child(4).
 */
[id^="gform_wrapper_"] .gform_fields > .gfield:nth-child(3) > .gfield_label,
[id^="gform_wrapper_"] .gform_fields > .gfield:nth-child(4) > .gfield_label {
    font-family: "Roboto Slab", sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #C44867 !important;
    line-height: 39px !important;
}

/* Sub-labels (below inputs like date/time sub-fields) */
[id^="gform_wrapper_"] .gfield .gform-field-label--type-sub,
[id^="gform_wrapper_"] .gfield .ginput_container label {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    line-height: 28px !important;
}

/* Required indicator */
[id^="gform_wrapper_"] .gfield .gfield_required {
    color: #C44867 !important;
}

/* ── Field Descriptions ────────────────────────────────────────── */
[id^="gform_wrapper_"] .gfield .gfield_description {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    color: #000000 !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
}

/* ── Text Inputs, Textareas & Selects ──────────────────────────── */
[id^="gform_wrapper_"] .ginput_container input[type="text"],
[id^="gform_wrapper_"] .ginput_container input[type="email"],
[id^="gform_wrapper_"] .ginput_container input[type="tel"],
[id^="gform_wrapper_"] .ginput_container input[type="number"],
[id^="gform_wrapper_"] .ginput_container input[type="url"],
[id^="gform_wrapper_"] .ginput_container input[type="password"],
[id^="gform_wrapper_"] .ginput_container input[type="date"],
[id^="gform_wrapper_"] .ginput_container input[type="time"],
[id^="gform_wrapper_"] .ginput_container select {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 20px !important;
    color: #000000 !important;
    background: #FFFFFF !important;
    border: 1px solid #D5D5D5 !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

[id^="gform_wrapper_"] .ginput_container textarea {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
    background: #FFFFFF !important;
    border: 1px solid #D5D5D5 !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
    width: 100% !important;
    min-height: 200px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    resize: vertical;
    line-height: 1.5 !important;
}

/* Focus states */
[id^="gform_wrapper_"] .ginput_container input:focus,
[id^="gform_wrapper_"] .ginput_container textarea:focus,
[id^="gform_wrapper_"] .ginput_container select:focus {
    outline: none !important;
    border-color: #C44867 !important;
    box-shadow: 0 0 0 2px rgba(196, 72, 103, 0.15) !important;
}

/* Hover states */
[id^="gform_wrapper_"] .ginput_container input:hover,
[id^="gform_wrapper_"] .ginput_container textarea:hover,
[id^="gform_wrapper_"] .ginput_container select:hover {
    border-color: #b0b0b0 !important;
}

/* Placeholders */
[id^="gform_wrapper_"] .ginput_container input::placeholder,
[id^="gform_wrapper_"] .ginput_container textarea::placeholder {
    color: #999999 !important;
    font-family: "Hind Madurai", sans-serif !important;
}

/* ── Checkboxes ────────────────────────────────────────────────── */
[id^="gform_wrapper_"] .gfield--type-checkbox .gfield_checkbox,
[id^="gform_wrapper_"] .gfield--type-choice .gfield_checkbox {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 16px !important;
}

[id^="gform_wrapper_"] .gfield--type-checkbox .gchoice,
[id^="gform_wrapper_"] .gfield--type-choice .gchoice {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

[id^="gform_wrapper_"] .gfield--type-checkbox .gchoice input[type="checkbox"],
[id^="gform_wrapper_"] .gfield--type-choice .gchoice input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    margin-right: 8px !important;
    border: 2px solid #6C883A !important;
    border-radius: 3px !important;
    background-color: transparent !important;
    cursor: pointer;
    position: relative !important;
    box-shadow: none !important;
}

[id^="gform_wrapper_"] .gfield--type-checkbox .gchoice input[type="checkbox"]:checked,
[id^="gform_wrapper_"] .gfield--type-choice .gchoice input[type="checkbox"]:checked {
    background-color: #6C883A !important;
    border-color: #6C883A !important;
}

[id^="gform_wrapper_"] .gfield--type-checkbox .gchoice input[type="checkbox"]:checked::after,
[id^="gform_wrapper_"] .gfield--type-choice .gchoice input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #FFFFFF !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

[id^="gform_wrapper_"] .gfield--type-checkbox .gchoice label,
[id^="gform_wrapper_"] .gfield--type-choice .gchoice label {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    cursor: pointer;
}

/* Checkbox group label (the field label above the checkboxes) */
[id^="gform_wrapper_"] .gfield--type-checkbox > .gfield_label {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    line-height: 28px !important;
}

/* ── Radio Buttons ─────────────────────────────────────────────── */
[id^="gform_wrapper_"] .gfield--type-radio .gchoice label {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
}

[id^="gform_wrapper_"] .gfield--type-radio .gchoice input[type="radio"] {
    accent-color: #C44867 !important;
}

/* ── Consent Field (DSGVO) ─────────────────────────────────────── */
[id^="gform_wrapper_"] .gfield--type-consent .ginput_container label {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    line-height: 1.5 !important;
}

[id^="gform_wrapper_"] .gfield--type-consent .ginput_container input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 2px solid #6C883A !important;
    border-radius: 3px !important;
    background-color: transparent !important;
    cursor: pointer;
    position: relative !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

[id^="gform_wrapper_"] .gfield--type-consent .ginput_container input[type="checkbox"]:checked {
    background-color: #6C883A !important;
    border-color: #6C883A !important;
}

[id^="gform_wrapper_"] .gfield--type-consent .ginput_container input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #FFFFFF !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

[id^="gform_wrapper_"] .gfield--type-consent .gfield_consent_description {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    color: #000000 !important;
    font-style: italic !important;
}

/* ── File Upload ───────────────────────────────────────────────── */
[id^="gform_wrapper_"] .gfield--type-fileupload > .gfield_label {
    font-family: "Roboto Slab", sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #C44867 !important;
}

/* ── HTML Fields ───────────────────────────────────────────────── */
[id^="gform_wrapper_"] .gfield--type-html {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    color: #000000 !important;
    line-height: 1.5 !important;
}

/* ── Date & Time Fields ────────────────────────────────────────── */
[id^="gform_wrapper_"] .ginput_container_date input,
[id^="gform_wrapper_"] .ginput_container_time input {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 20px !important;
}

/* ── Submit Button ─────────────────────────────────────────────── */
[id^="gform_wrapper_"] .gform_footer,
[id^="gform_wrapper_"] .gform_page_footer {
    margin-top: 24px !important;
    padding-top: 32px !important;
    border-top: 1px solid #E4E4E4 !important;
}

[id^="gform_wrapper_"] .gform_footer input[type="submit"],
[id^="gform_wrapper_"] .gform_footer button[type="submit"],
[id^="gform_wrapper_"] .gform_footer .gform_button,
[id^="gform_wrapper_"] .gform_page_footer input[type="submit"],
[id^="gform_wrapper_"] .gform_page_footer button[type="submit"] {
    font-family: roboto, oswald, "arial narrow", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    background: #EE7402 !important;
    border: 2px outset #EE7402 !important;
    border-radius: 3px !important;
    padding: 12px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background 0.2s ease;
}

[id^="gform_wrapper_"] .gform_footer input[type="submit"]:hover,
[id^="gform_wrapper_"] .gform_footer button[type="submit"]:hover,
[id^="gform_wrapper_"] .gform_page_footer input[type="submit"]:hover,
[id^="gform_wrapper_"] .gform_page_footer button[type="submit"]:hover {
    background: #d56802 !important;
}

[id^="gform_wrapper_"] .gform_footer input[type="submit"]:focus,
[id^="gform_wrapper_"] .gform_footer button[type="submit"]:focus,
[id^="gform_wrapper_"] .gform_page_footer input[type="submit"]:focus,
[id^="gform_wrapper_"] .gform_page_footer button[type="submit"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(238, 116, 2, 0.3) !important;
}

/* ── Validation Errors ─────────────────────────────────────────── */
[id^="gform_wrapper_"] .gfield_error .gfield_label,
[id^="gform_wrapper_"] .gfield_error label {
    color: #DC3545 !important;
}

[id^="gform_wrapper_"] .gfield_error .ginput_container input,
[id^="gform_wrapper_"] .gfield_error .ginput_container textarea,
[id^="gform_wrapper_"] .gfield_error .ginput_container select {
    border-color: #DC3545 !important;
}

[id^="gform_wrapper_"] .gfield_error .gfield_validation_message {
    font-family: "Hind Madurai", sans-serif !important;
    font-size: 12px !important;
    color: #DC3545 !important;
}

[id^="gform_wrapper_"] .gform_validation_errors {
    border-color: #DC3545 !important;
    margin-bottom: 24px !important;
}

[id^="gform_wrapper_"] .gform_validation_errors h2 {
    font-family: "Roboto Slab", sans-serif !important;
    color: #DC3545 !important;
}

/* ── Confirmation Message ──────────────────────────────────────── */
.gform_confirmation_wrapper .gform_confirmation_message {
    font-family: "Roboto Slab", sans-serif;
    font-size: 18px;
    color: #5D5D5D;
    padding: 24px;
    background: rgba(108, 136, 58, 0.08);
    border: 1px solid #6C883A;
    border-radius: 0;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    [id^="gform_wrapper_"] .gform_heading .gform_title,
    [id^="gform_wrapper_"] .gform_fields > .gfield--type-section:nth-child(2) .gsection_title,
    [id^="gform_wrapper_"] .gform_fields > .gfield--type-section:first-child .gsection_title {
        font-size: 28px !important;
    }

    [id^="gform_wrapper_"] .gfield .gfield_label,
    [id^="gform_wrapper_"] .gfield > label,
    [id^="gform_wrapper_"] .gfield > legend {
        font-size: 20px !important;
        line-height: 30px !important;
    }

    [id^="gform_wrapper_"] .gsection .gsection_title {
        font-size: 20px !important;
    }

    [id^="gform_wrapper_"] .ginput_container input[type="text"],
    [id^="gform_wrapper_"] .ginput_container input[type="email"],
    [id^="gform_wrapper_"] .ginput_container input[type="tel"],
    [id^="gform_wrapper_"] .ginput_container input[type="number"],
    [id^="gform_wrapper_"] .ginput_container input[type="url"],
    [id^="gform_wrapper_"] .ginput_container input[type="date"],
    [id^="gform_wrapper_"] .ginput_container input[type="time"],
    [id^="gform_wrapper_"] .ginput_container select,
    [id^="gform_wrapper_"] .ginput_container textarea {
        max-width: 100% !important;
        font-size: 16px !important;
    }

    [id^="gform_wrapper_"] .gfield--type-checkbox .gfield_checkbox,
    [id^="gform_wrapper_"] .gfield--type-choice .gfield_checkbox {
        grid-template-columns: 1fr !important;
    }

    [id^="gform_wrapper_"] .gform_footer,
    [id^="gform_wrapper_"] .gform_page_footer {
        flex-direction: column !important;
    }

    [id^="gform_wrapper_"] .gform_footer input[type="submit"],
    [id^="gform_wrapper_"] .gform_footer button[type="submit"] {
        width: 100% !important;
        text-align: center !important;
    }
}