/*
 * GRT — Gravity Forms custom theme
 *
 * Strategy: map GRT design tokens → GF Orbital theme CSS custom properties
 * (.gform-theme is the scope class GF adds to every form wrapper in GF 2.7+)
 * Loading after GF's own stylesheets means same-specificity rules here win.
 *
 * Add styles here field-type by field-type as they are designed.
 * Currently implemented: text / email / phone / name sub-inputs (plain text inputs)
 */

/* ================================================================
 * 1. TOKEN BRIDGE — map --gf-* → --form-* / GRT tokens
 * ================================================================ */

.gform-theme {

    /* ── Base font ── */
    --gf-font-family-base:    var(--font-family-body, 'Calibri', sans-serif);
    --gf-font-family-primary: var(--font-family-body, 'Calibri', sans-serif);

    /* ── Input controls ── */
    --gf-ctrl-font-family:    var(--form-input-font-family, 'Calibri', sans-serif);
    --gf-ctrl-font-size:      var(--form-input-font-size, 1.125rem);
    --gf-ctrl-font-weight:    var(--form-input-font-weight, 400);
    --gf-ctrl-letter-spacing: var(--form-input-letter-spacing, 0.01em);
    --gf-ctrl-line-height:    var(--form-input-line-height, 1.35);
    --gf-ctrl-color:          var(--form-input-color, #000);

    /* ── Input border (Figma: 1px solid #909090, no radius)
       !important: GF inline per-form style overrides class-level rules  */
    --gf-ctrl-bg-color:      var(--form-field-bg, #fff) !important;
    --gf-ctrl-border-color:  var(--form-field-border-color, #909090) !important;
    --gf-ctrl-border-width:  var(--form-field-border-width, 1px) !important;
    --gf-ctrl-border-style:  var(--form-field-border-style, solid) !important;
    --gf-ctrl-radius:        var(--form-field-border-radius, 0px) !important;

    /* ── Input padding (Figma: 12px h-pad; v-pad tuned for 48px total height) ── */
    --gf-ctrl-padding-x: 0.75rem !important;
    --gf-ctrl-padding-y: 0.75rem !important;

    /* ── Interaction states ── */
    --gf-ctrl-border-color-focus: var(--color-black, #000) !important;
    --gf-ctrl-border-color-hover: var(--color-gray-900, #1B1B1B) !important;
    --gf-ctrl-bg-color-focus:     var(--form-field-bg, #fff) !important;

    /* ── Field label (e.g. "Vollständiger Name", "E-Mail-Adresse") ──
       Figma: Campora Bold 25px / 1.2 lh / black
       !important: GF inline per-form style overrides class-level rules  */
    --gf-ctrl-label-font-family-primary:    var(--form-label-font-family, 'Campora', serif) !important;
    --gf-ctrl-label-font-size-primary:      var(--form-label-font-size, 1.5625rem) !important;
    --gf-ctrl-label-font-weight-primary:    var(--form-label-font-weight, 600) !important;
    --gf-ctrl-label-line-height-primary:    var(--form-label-line-height, 1.2) !important;
    --gf-ctrl-label-color-primary:          var(--form-label-color, #000) !important;
    --gf-ctrl-label-font-style-primary:     normal !important;
    --gf-ctrl-label-letter-spacing-primary: 0 !important;

    /* ── Sub-label (e.g. "Vorname", "Nachname" below each sub-input) ──
       Figma: Calibri Regular 18px / 32px fixed lh / black  */
    --gf-ctrl-label-font-family-secondary:  var(--form-input-font-family, 'Calibri', sans-serif) !important;
    --gf-ctrl-label-font-size-secondary:    var(--form-input-font-size, 1.125rem) !important;
    --gf-ctrl-label-font-weight-secondary:  var(--form-input-font-weight, 400) !important;
    --gf-ctrl-label-line-height-secondary:  2rem !important;   /* 32px fixed — Figma */
    --gf-ctrl-label-color-secondary:        var(--form-input-color, #000) !important;
    --gf-ctrl-label-font-style-secondary:   normal !important;

    /* ── Inline description text ── */
    --gf-ctrl-desc-font-family:    var(--form-description-font-family, 'Calibri', sans-serif);
    --gf-ctrl-desc-font-size:      var(--form-description-font-size, 1rem);
    --gf-ctrl-desc-font-weight:    var(--form-description-font-weight, 400);
    --gf-ctrl-desc-letter-spacing: var(--form-description-letter-spacing, 0.01em);
    --gf-ctrl-desc-line-height:    var(--form-description-line-height, 1.5rem);

    /* ── Validation / error ──
       Figma: error text #D81E04 / 12px Calibri  */
    --gf-color-danger:              var(--form-error-color, #D81E04);
    --gf-ctrl-border-color-error:   var(--form-error-color, #D81E04);
    --gf-ctrl-color-error:          var(--form-input-color, #000); /* input text stays black */
    --gf-ctrl-desc-font-family-error:     var(--form-description-font-family, 'Calibri', sans-serif);
    --gf-ctrl-desc-font-size-error:       0.75rem;  /* 12px — Figma error text */
    --gf-ctrl-desc-line-height-error:     1.35;
    --gf-ctrl-desc-letter-spacing-error:  var(--form-description-letter-spacing, 0.01em);

    /* ── Form field gap ── */
    --gf-form-gap-x:  2rem !important;  /* 32px */
    --gf-field-gap-x: 2rem !important;  /* 32px */

    /* ── Checkbox / radio size + checkmark colour ── */
    --gf-ctrl-size: 1.625rem;  /* 26px — Figma node 16:28335 */
    --gf-ctrl-choice-check-color: var(--color-white, #fff) !important;

    /* ── Primary color — used by GF for submit button, checkmarks, focus rings ──
       !important needed: GF generates an inline #gform_wrapper_N[data-form-index]
       rule (ID specificity) that would otherwise override this class-level rule  */
    --gf-color-primary:         var(--color-brand-red, #E40521) !important;
    --gf-color-primary-rgb:     228, 5, 33 !important;

    /* ── Submit button — Figma node 16:28336 (grt-btn--primary look) ── */
    --gf-btn-bg-color:          var(--color-brand-red, #E40521);
    --gf-btn-bg-color-hover:    transparent;
    --gf-btn-color:             #fff;
    --gf-btn-color-hover:       var(--color-brand-red, #E40521);
    --gf-btn-border-color:      var(--color-brand-red, #E40521);
    --gf-btn-border-color-hover: var(--color-brand-red, #E40521);
    --gf-btn-border-width:      2px;
    --gf-btn-border-radius:     8px;
    --gf-btn-font-family:       var(--font-family-ui, 'Familjen Grotesk', sans-serif);
    --gf-btn-font-size:         1rem;
    --gf-btn-font-weight:       500;
    --gf-btn-letter-spacing:    0.05em;
    --gf-btn-padding-y:         0.9375rem;  /* 15px */
    --gf-btn-padding-x:         1.75rem;    /* 28px */
    --gf-btn-height:            auto;
}

.gform_heading::after {
    content: ' ';
    width: 100%;
    display: block;
    margin-bottom: var(--space-dkt-60);
    margin-top: var(--space-dkt-12);
    border-bottom: 1px solid black;
}

.gform_title {
    margin-bottom: 2.625rem; /* 42px — gap to description */
}

#gform_1 #input_1_2,
#gform_2 #field_2_2 .gform-grid-row {
    margin-inline: 0 !important;
}

#gform_1 #field_1_2 .gf_clear.gf_clear_complex,
#gform_2 #field_2_2 .gf_clear.gf_clear_complex {
    display: none !important;
}

 .gform-theme #field_2_6.grt-field--invalid .ginput_container_date::before {
    right: 3rem;
}

/* ================================================================
 * 2. SUB-LABELS — DKT/Copy/Regular
 *    Figma: Calibri 18px / 135% lh / 0.18px ls / #000
 *    Same tokens as .grt-copy typography helper class.
 * ================================================================ */

.gform-theme .gform-field-label--type-sub,
.gform-theme .gform-field-label--type-sub_label {
    font-family:          var(--copy-font-family, 'Calibri', sans-serif) !important;
    font-weight:          var(--copy-font-weight, 400) !important;
    font-size:            var(--copy-font-size, 1.125rem) !important;
    line-height:          2rem !important;       /* 32px fixed — Figma */
    letter-spacing:       var(--copy-letter-spacing, 0.01em) !important;
    color:                var(--color-black, #000) !important;
    font-style:           normal !important;
    font-feature-settings: 'liga' off, 'clig' off !important;
}

/* ================================================================
 * 3. SELECT FIELD (Anrede / any dropdown)
 *    Figma node 16:28338
 *    — 48px height, gray panel right 37px, red chevron arrow
 * ================================================================ */

.gform-theme .gfield select {
    appearance: none;
    -webkit-appearance: none;
    height: var(--form-field-height, 3rem);
    padding-left:  0.875rem;   /* 14px — Figma */
    padding-right: 2.3125rem;  /* 37px — room for arrow panel */
    cursor: pointer;
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s ease;

    /* Gray right panel + red chevron via layered backgrounds */
    background-color: var(--form-field-bg, #fff);
    background-image:
        linear-gradient(
            to right,
            transparent calc(100% - 2.3125rem),
            rgba(217, 217, 217, 0.5) calc(100% - 2.3125rem)
        ),
        url("data:image/svg+xml,<svg viewBox='0 0 9.99999 13.3573' fill='none' xmlns='http://www.w3.org/2000/svg'><g transform='translate(9.99999,0) rotate(90)'><path d='M1.41192e-05 4.25349H11.5664V5.74572H1.41192e-05V4.25349Z' fill='%23E40521'/><path d='M8.35802 9.99999L7.31283 8.95481L11.2684 5L7.31283 1.04519L8.35802 0L13.3573 5.00001L8.35802 9.99999Z' fill='%23E40521'/></g></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, right 0.8rem center;
    background-size: 100% 100%, 10px 13px;
}

.gform-theme .gfield select:focus {
    outline: none;
    box-shadow: none;
}

/* ================================================================
 * 3. TEXT FIELD — direct selector overrides
 *    Targets: text, email, tel, name sub-inputs
 *    Figma node 16:28311
 * ================================================================ */

/* Remove any default outlines; border change handles focus feedback */
.gform-theme .gfield input[type="text"],
.gform-theme .gfield input[type="email"],
.gform-theme .gfield input[type="tel"],
.gform-theme .gfield input[type="number"],
.gform-theme .gfield input[type="url"] {
    height: var(--form-field-height, 3rem);   /* 48px — Figma */
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s ease;
}

.gform-theme .gfield input[type="text"]:focus,
.gform-theme .gfield input[type="email"]:focus,
.gform-theme .gfield input[type="tel"]:focus,
.gform-theme .gfield input[type="number"]:focus,
.gform-theme .gfield input[type="url"]:focus {
    outline: none;
    box-shadow: none;
}

/* ================================================================
 * 4. VALIDATION MESSAGE
 *    Figma: right-aligned, 12px Calibri, #D81E04
 * ================================================================ */

.gform-theme .gfield_validation_message,
.gform-theme .validation_message {
    text-align: right;
}

/* ================================================================
 * 5. NAME FIELD — Vorname / Nachname side by side
 *    GF Orbital has no CSS for sub-field layout; defaults to 100% width.
 * ================================================================ */

.gform-theme .ginput_container_name.gf_name_has_2 {
    flex-wrap: nowrap;
    gap: var(--gf-field-gap-x, 1rem);
}

.gform-theme .ginput_container_name.gf_name_has_2 .name_first,
.gform-theme .ginput_container_name.gf_name_has_2 .name_last {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0;  /* override GF's gform-grid-col padding; gap handles spacing */
}

/* ================================================================
 * 6. TEXTAREA (Ihre Nachricht)
 *    Figma node 16:28325
 *    — 238px min-height, 10px/25px padding
 * ================================================================ */

.gform-theme .gfield textarea {
    min-height: 14.875rem;  /* 238px — Figma */
    padding: 0.625rem 1.5625rem;  /* 10px 25px — Figma */
    resize: vertical;
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s ease;
}

.gform-theme .gfield textarea:focus {
    outline: none;
    box-shadow: none;
}

/* ================================================================
 * 7. CONSENT / CHECKBOX (Datenschutz)
 *    Figma node 16:28335
 *    — 26×26px, 1px solid #909090, no radius
 * ================================================================ */

.gform-theme .gfield input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.625rem;   /* 26px — Figma */
    height: 1.625rem;
    min-width: 1.625rem;
    border: 1px solid var(--form-field-border-color, #909090);
    border-radius: 0;
    background: var(--form-field-bg, #fff);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gform-theme .gfield input[type="checkbox"]:checked {
    background-color: var(--color-brand-red, #E40521);
    border-color: var(--color-brand-red, #E40521);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M1 5.5L5 9.5L13 1.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 11px;
}

.gform-theme .gfield input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--color-black, #000);
}

/* Consent field layout: checkbox + label inline */
.gform-theme .gfield--type-consent .ginput_container_consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.gform-theme .gfield--type-consent .gfield-choice-input {
    margin-top: 0.1875rem; /* optical alignment with first line of text */
}

/* ================================================================
 * 8. SUBMIT BUTTON (Anfrage senden)
 *    Figma node 16:28336 — matches grt-btn--primary look
 *    — red fill, white text, Familjen Grotesk, 8px radius
 * ================================================================ */

/* Token bridge handles color/font, but direct override catches any remaining GF specificity */
.gform-theme .gform_footer .gform_button,
.gform-theme .gform_footer input[type="submit"],
.gform-theme .gform_page_footer .gform_button,
.gform-theme .gform_page_footer input[type="submit"],
.gform-theme .gform_button,
.gform-theme .gform-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13.75rem;
    background-color: var(--color-brand-red, #E40521);
    color: #fff;
    border: 2px solid var(--color-brand-red, #E40521);
    border-radius: 8px;
    padding: 0.9375rem 1.75rem;
    font-family: var(--font-family-ui, 'Familjen Grotesk', sans-serif);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.gform-theme .gform_footer .gform_button:hover,
.gform-theme .gform_footer input[type="submit"]:hover,
.gform-theme .gform_button:hover,
.gform-theme .gform-button:hover {
    background-color: transparent;
    color: var(--color-brand-red, #E40521);
}

.gform-theme .gform_button:focus,
.gform-theme .gform-button:focus { outline: none; }

.gform-theme .gform_button:focus-visible,
.gform-theme .gform-button:focus-visible {
    outline: 2px dashed var(--color-brand-red, #E40521);
    outline-offset: 6px;
}

/* ================================================================
 * 9. GRT BUTTON COMPONENT INSIDE GF FORM
 *    GF Orbital framework selector specificity: (0,5,1)
 *      .gform-theme--framework.gform-theme.gform_wrapper
 *      :where() > button:not([id*=mceu_]):not(.mce-open)
 *    Counter-selector uses same weight so last-in-source wins.
 * ================================================================ */

.gform-theme--framework.gform-theme.gform_wrapper button.grt-btn.grt-btn--primary {
    border: 2px solid var(--color-brand-red, #E40521);
    border-radius: 8px;
    font-family: var(--font-family-ui, 'Familjen Grotesk', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    padding: 2px;
    padding-left: calc((3.25rem + 4px) / 2);
    padding-right: calc((3.25rem + 4px) / 2);
    min-width: 13.75rem;
    background: none;
    box-shadow: none;
    text-transform: none;
    transition: padding 0.35s ease;
}

.gform-theme--framework.gform-theme.gform_wrapper button.grt-btn.grt-btn--primary .grt-btn__label {
    background: var(--color-brand-red, #E40521);
    color: #fff;
    border-radius: 4px;
    height: 44px;
    padding-inline: 10px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.gform-theme--framework.gform-theme.gform_wrapper button.grt-btn.grt-btn--primary:not(:disabled):not(.is-disabled):hover {
    padding-left: 2px;
    padding-right: calc(2.5rem + 0.75rem);
}

.gform-theme--framework.gform-theme.gform_wrapper button.grt-btn.grt-btn--primary::after {
    content: '' !important;  /* GF icon rule sets content: var(--gf-ctrl-btn-icon) which kills this pseudo-element */
    position: absolute;
    inset: 0;
    background-color: var(--color-brand-red, #E40521);
    border-radius: 6px;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.gform-theme--framework.gform-theme.gform_wrapper button.grt-btn.grt-btn--primary:not(:disabled):not(.is-disabled):hover::after {
    opacity: 0;
}

.gform-theme--framework.gform-theme.gform_wrapper button.grt-btn.grt-btn--primary:focus { outline: none; }
.gform-theme--framework.gform-theme.gform_wrapper button.grt-btn.grt-btn--primary:focus-visible {
    outline: 2px dashed var(--color-brand-red, #E40521);
    outline-offset: 6px;
}

/* ================================================================
 * 10. LIVE VALIDATION ICONS
 *     JS adds .grt-field--valid / .grt-field--invalid on .gfield
 *     (or .name_first / .name_last for Name compound fields).
 *     Icon: 15×15px circle badge, top-right inside the field border.
 * ================================================================ */

/* Ensure containers are positioned so ::after can be absolute */
.gform-theme .ginput_container:not(.ginput_container_name),
.gform-theme .name_first,
.gform-theme .name_last {
    position: relative;
}

/* Shared icon base — centered on the top-right corner of the field border */
/* .ginput_container_date excluded: its ::after is GF's calendar icon — see below */
.gform-theme .grt-field--valid   .ginput_container:not(.ginput_container_name):not(.ginput_container_date)::after,
.gform-theme .grt-field--invalid .ginput_container:not(.ginput_container_name):not(.ginput_container_date)::after,
.gform-theme .name_first.grt-field--valid::after,
.gform-theme .name_first.grt-field--invalid::after,
.gform-theme .name_last.grt-field--valid::after,
.gform-theme .name_last.grt-field--invalid::after,
.gform-theme .grt-field--valid   .ginput_container_date::before,
.gform-theme .grt-field--invalid .ginput_container_date::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

/* Valid — red circle, white checkmark */
.gform-theme .grt-field--valid .ginput_container:not(.ginput_container_name):not(.ginput_container_date)::after,
.gform-theme .name_first.grt-field--valid::after,
.gform-theme .name_last.grt-field--valid::after,
.gform-theme .grt-field--valid .ginput_container_date::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23E40521'/%3E%3Cpath d='M4.5 9L7.5 12L13.5 6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* Invalid — brand-red circle, white × */
.gform-theme .grt-field--invalid .ginput_container:not(.ginput_container_name):not(.ginput_container_date)::after,
.gform-theme .name_first.grt-field--invalid::after,
.gform-theme .name_last.grt-field--invalid::after,
.gform-theme .grt-field--invalid .ginput_container_date::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23E40521'/%3E%3Cpath d='M6 6L12 12M12 6L6 12' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* ================================================================
 * 11. FILE UPLOAD FIELD (Lebenslauf hochladen)
 *     Figma node 16:28483
 *     — Drop zone: white bg, 1px solid #909090 border
 *     — Upload icon: 80×80px red SVG, centered
 *     — Browse button: secondary button style
 *       2px solid #E40521, 8px radius, red text, Calibri Bold 16px
 * ================================================================ */

/* Drop zone container */
.gform-theme .gfield--type-fileupload .gform_drop_area,
.gform-theme .gfield--type-post_image .gform_drop_area {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            var(--space-dkt-24, 1.5rem);
    padding:        var(--space-dkt-32, 2rem) var(--space-dkt-24, 1.5rem);
    background-color: var(--color-white, #fff);
    border:         1px solid var(--color-gray-500, #909090);
    border-radius:  0;
    min-height:     12rem;
    text-align:     center;
}

/* Upload icon — 80×80px red SVG (document-with-person) */
.gform-theme .gfield--type-fileupload .gform_drop_area::before,
.gform-theme .gfield--type-post_image .gform_drop_area::before {
    content:  '';
    display:  block;
    width:    5rem;   /* 80px — Figma */
    height:   5rem;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,<svg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M76.1207 66.9096H74.9082V51.516C74.9082 50.1816 74.5457 48.8504 73.8176 47.6379L63.8768 30.3035V4.85066C63.8768 2.7913 62.3018 1.21313 60.2393 1.21313H19.8769C17.8175 1.21313 16.2393 2.78818 16.2393 4.85066V30.1851L6.05774 47.6379C5.45149 48.8503 5.08902 50.1847 5.08902 51.516V66.9096H3.87654C3.14841 66.9096 2.66406 67.394 2.66406 68.1221V77.5749C2.66406 78.303 3.14844 78.7874 3.87654 78.7874H22.9077C23.6359 78.7874 24.1202 78.303 24.1202 77.5749V68.1221C24.1202 67.394 23.6358 66.9096 22.9077 66.9096H22.0577C22.3015 64.969 22.664 63.1534 22.9077 62.0596H57.455C57.6987 63.1503 57.9393 65.0909 58.305 66.9096H57.455C56.7268 66.9096 56.2425 67.394 56.2425 68.1221V77.5749C56.2425 78.303 56.7268 78.7874 57.455 78.7874H76.4862C77.2143 78.7874 77.6986 78.303 77.6986 77.5749V68.1221C77.333 67.394 76.8489 66.9096 76.1207 66.9096ZM19.8767 3.63761H60.2391C60.9672 3.63761 61.4516 4.12199 61.4516 4.8501V39.8813C60.4829 39.6375 59.3922 39.8813 58.3016 40.3657C56.361 41.3344 55.8766 43.8813 57.0891 45.5782L61.4516 52.3657V58.3063C61.4516 59.0344 60.9672 59.5188 60.2391 59.5188L19.8767 59.5157C19.1486 59.5157 18.6642 59.0313 18.6642 58.3032V52.3625L22.908 45.575C24.1205 43.7563 23.5142 41.3313 21.6955 40.3625C20.6049 39.7563 19.6361 39.6344 18.5455 39.8782V4.85017C18.6643 4.12204 19.1486 3.63761 19.8767 3.63761ZM21.5736 76.3624H5.08958V69.3311H21.696V76.3624H21.5736ZM19.5142 66.9096H7.39262V51.516C7.39262 50.5473 7.63638 49.6973 8.12075 48.8504L16.1208 35.1536V41.5786L14.5457 43.8817C14.1832 44.4879 14.302 45.2161 14.9082 45.5786C15.5145 45.9411 16.2426 45.8223 16.6051 45.2161L18.302 42.7911C19.0301 42.1849 19.7551 42.1849 20.6051 42.6693C21.2113 43.0317 21.4551 43.7599 20.9676 44.3661L16.4832 51.5161V51.638C16.4832 51.7599 16.3613 51.7599 16.3613 51.8818V52.1255V52.2474V58.4287C16.3613 60.488 17.9364 62.0662 19.9988 62.0662H20.3613C20.1207 63.1506 19.7549 65.0908 19.5142 66.9096ZM59.755 61.9409H60.2394C62.2988 61.9409 63.8769 60.3659 63.8769 58.3034V52.1221V52.0002V51.7565C63.8769 51.6346 63.8769 51.6346 63.7551 51.5127V51.3909L59.1488 44.2409C58.7863 43.6346 58.9051 42.9065 59.5113 42.544C60.3613 42.0596 61.0864 42.1815 61.8144 42.6658L63.5113 45.0908C63.7551 45.4533 64.1176 45.5752 64.48 45.5752C64.7238 45.5752 64.9644 45.4533 65.2082 45.3314C65.8144 44.9689 65.9363 44.2408 65.5707 43.6345L63.9956 41.3314V34.9065L71.9956 48.6033C72.48 49.4533 72.7237 50.422 72.7237 51.2689V66.6625H60.6021C60.2428 65.0906 59.8769 63.1503 59.755 61.9409ZM74.9078 76.3625H58.4238V69.3312H75.0302V76.3625H74.9078Z' fill='%23E40621'/> <path d='M24.6051 10.059H35.8771C36.6052 10.059 37.0895 9.57462 37.0895 8.84651C37.0895 8.11841 36.6052 7.63403 35.8771 7.63403H24.6051C23.8769 7.63403 23.3926 8.11841 23.3926 8.84651C23.3926 9.57462 23.9988 10.059 24.6051 10.059Z' fill='%23E40621'/> <path d='M24.6051 17.3344H35.8771C36.6052 17.3344 37.0895 16.85 37.0895 16.1219C37.0895 15.3938 36.6052 14.9094 35.8771 14.9094H24.6051C23.8769 14.9094 23.3926 15.3938 23.3926 16.1219C23.3926 16.7282 23.9988 17.3344 24.6051 17.3344Z' fill='%23E40621'/> <path d='M24.6051 24.6064H35.8771C36.6052 24.6064 37.0895 24.122 37.0895 23.3939C37.0895 22.6657 36.6052 22.1814 35.8771 22.1814H24.6051C23.8769 22.1814 23.3926 22.6658 23.3926 23.3939C23.3926 24.122 23.9988 24.6064 24.6051 24.6064Z' fill='%23E40621'/> <path d='M24.6051 31.8783H35.8771C36.6052 31.8783 37.0895 31.394 37.0895 30.6659C37.0895 29.9377 36.6052 29.4534 35.8771 29.4534H24.6051C23.8769 29.4534 23.3926 29.9377 23.3926 30.6659C23.3926 31.394 23.9988 31.8783 24.6051 31.8783Z' fill='%23E40621'/> <path d='M43.9996 10.059H55.2716C55.9997 10.059 56.4841 9.57462 56.4841 8.84651C56.4841 8.11841 55.9997 7.63403 55.2716 7.63403H43.9996C43.2715 7.63403 42.7871 8.11841 42.7871 8.84651C42.7871 9.57462 43.3934 10.059 43.9996 10.059Z' fill='%23E40621'/> <path d='M43.9996 17.3344H55.2716C55.9997 17.3344 56.4841 16.85 56.4841 16.1219C56.4841 15.3938 55.9997 14.9094 55.2716 14.9094H43.9996C43.2715 14.9094 42.7871 15.3938 42.7871 16.1219C42.7871 16.7282 43.3934 17.3344 43.9996 17.3344Z' fill='%23E40621'/> <path d='M43.9996 24.6064H55.2716C55.9997 24.6064 56.4841 24.122 56.4841 23.3939C56.4841 22.6657 55.9997 22.1814 55.2716 22.1814H43.9996C43.2715 22.1814 42.7871 22.6658 42.7871 23.3939C42.7871 24.122 43.3934 24.6064 43.9996 24.6064Z' fill='%23E40621'/> <path d='M43.9996 31.8783H55.2716C55.9997 31.8783 56.4841 31.394 56.4841 30.6659C56.4841 29.9377 55.9997 29.4534 55.2716 29.4534H43.9996C43.2715 29.4534 42.7871 29.9377 42.7871 30.6659C42.7871 31.394 43.3934 31.8783 43.9996 31.8783Z' fill='%23E40621'/> <path d='M35.1504 39.8786C35.1504 41.091 35.6348 42.3035 36.3629 43.1504C33.2129 44.4848 31.1504 47.6348 31.1504 51.272C31.1504 54.5438 35.8786 55.6345 40 55.6345C44.1214 55.6345 48.8496 54.5438 48.8496 51.272C48.8496 47.6345 46.6683 44.6064 43.6371 43.1504C44.3652 42.3004 44.8496 41.2098 44.8496 39.8786C44.8496 37.213 42.6683 35.0286 39.9996 35.0286C37.334 35.0317 35.1504 37.213 35.1504 39.8786ZM46.4256 51.1506C46.4256 52.0006 44.0006 53.0912 40.0006 53.0912C36.0006 53.0912 33.5757 52.0006 33.5757 51.1506C33.5757 47.635 36.485 44.7256 40.0006 44.7256C43.5162 44.7287 46.4256 47.6381 46.4256 51.1506ZM40.0006 37.4538C41.335 37.4538 42.4256 38.5444 42.4256 39.8787C42.4256 41.2131 41.335 42.3037 40.0006 42.3037C38.6663 42.3037 37.5757 41.213 37.5757 39.8787C37.5757 38.5474 38.6663 37.4538 40.0006 37.4538Z' fill='%23E40621'/> </svg>");
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     5rem 5rem;
}

/* Drop instructions text */
.gform-theme .gfield--type-fileupload .gform_drop_instructions,
.gform-theme .gfield--type-post_image .gform_drop_instructions {
    display:        none;   /* Figma shows icon + button only; no visible instruction text */
}

/* Upload select-files button — Figma node 16:28496
   GF renders: <button class="button gform_button_select_files gform-theme-button gform-theme-button--control">
   Use full GF framework prefix to beat gform-theme-button styles. */
.gform-theme--framework.gform-theme.gform_wrapper button.gform_button_select_files {
    appearance:      none;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         1.0625rem 1.75rem;  /* 17px 28px — Figma */
    border:          2px solid var(--color-brand-red, #E40521) !important;
    border-radius:   8px !important;
    background:      transparent !important;
    color:           var(--color-brand-red, #E40521) !important;
    font-family:     var(--font-family-body, 'Calibri', sans-serif) !important;
    font-size:       1rem !important;    /* 16px — Figma */
    font-style:      normal !important;
    font-weight:     700 !important;
    line-height:     130% !important;    /* 20.8px — Figma */
    letter-spacing:  0.32px !important;
    leading-trim:    both !important;    /* legacy */
    text-edge:       cap !important;     /* legacy */
    text-box-trim:   trim-both !important;
    text-box-edge:   cap alphabetic !important;
    min-width:       15rem !important;   /* 240px */
    height:          3.25rem !important; /* 52px */
    cursor:          pointer;
    text-align:      center;
    transition:      background-color 0.2s ease, color 0.2s ease;
    box-shadow:      none !important;
    text-transform:  none !important;
}

/* GF sets content: var(--gf-ctrl-btn-icon) on button::after — kill it */
.gform-theme--framework.gform-theme.gform_wrapper button.gform_button_select_files::after {
    content: none !important;
}

.gform-theme--framework.gform-theme.gform_wrapper button.gform_button_select_files:hover {
    background-color: var(--color-brand-red, #E40521) !important;
    color:            var(--color-white, #fff) !important;
}

.gform-theme--framework.gform-theme.gform_wrapper button.gform_button_select_files:focus {
    outline:    none !important;
    box-shadow: none !important;
}

.gform-theme--framework.gform-theme.gform_wrapper button.gform_button_select_files:focus-visible {
    outline:        2px dashed var(--color-brand-red, #E40521) !important;
    outline-offset: 4px;
}

/* Uploaded file list — hide GF's default drag-active overlay styles */
.gform-theme .gfield--type-fileupload .gform_drop_area.gform_drop_area_active {
    border-color: var(--color-brand-red, #E40521);
    background-color: var(--color-gray-50, #F7F7F7);
}

/* ================================================================
 * 12. DATEPICKER
 *     GF renders the date input as:
 *       <input class="datepicker gform-datepicker … hasDatepicker">
 *     The input is not full-width by default — override here.
 * ================================================================ */

.gform-theme input.gform-datepicker {
    width: 100% !important;
}

/* ================================================================
 * 13. REQUIRED FIELD ASTERISK
 *     GF renders: <span class="gfield_required gfield_required_asterisk">*</span>
 *     Figma convention: asterisk as superscript, larger than label text.
 * ================================================================ */


.gform-theme .gform_required_legend .gfield_required.gfield_required_asterisk {
font-size: 1em !important;
}
.gform-theme .gfield_required.gfield_required_asterisk {
    font-size:      2em !important;
    line-height:    1 !important;
    vertical-align: super !important;
}