/*
 * Energas Stellenangebote – Gestaltung des Bewerbungsformulars (CF7 11785).
 *
 * Diese Regeln standen urspruenglich in einem HTML-Widget der Seite
 * "Kaufmaennische Stellen" und wurden von dort in die Stellenanzeigen-Vorlage
 * mitkopiert. Dadurch war das Formular nur auf genau diesen beiden Seiten
 * gestaltet – ueberall sonst waere es ungestylt gewesen, und Korrekturen
 * haetten an zwei Stellen gepflegt werden muessen.
 *
 * Seit 03.09.2026 liegt die Gestaltung hier im Plugin und wird auf jeder
 * Seite geladen, auf der das Formular auftaucht.
 *
 * Die Maße folgen der Designvorlage der Agentur (Zeichenflaeche 1512 px):
 *   Upload-Pille   220 x 50, gestrichelt, Text 18 px
 *   Absende-Pille  221 x 50, durchgezogen, Text 18 px
 *   Pfeile senkrecht mittig, rechte Kante 18 px vom Pillenrand
 */

/* =========================================
   BASIS
========================================= */

.sg-contact-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    font-family: inherit;
    color: #111;

    box-sizing: border-box;
}

.sg-contact-form *,
.sg-contact-form *::before,
.sg-contact-form *::after {
    box-sizing: border-box;
}


/* =========================================
   FORMULAR ZEILEN
========================================= */

.sg-form-row {
    display: grid;
    grid-template-columns: 1fr;

    gap: 48px;

    margin-bottom: 75px;
}

.sg-form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* =========================================
   FELDER
========================================= */

.sg-form-field {
    width: 100%;
    min-width: 0;
}

.sg-form-field label {
    display: block;

    margin: 0 0 28px 0;

    font-family: inherit;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.2;

    color: #111;
}

.sg-form-field .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}


/* =========================================
   INPUT FELDER
========================================= */

.sg-form-field input[type="text"],
.sg-form-field input[type="email"],
.sg-form-field input[type="tel"] {

    display: block;

    width: 100% !important;
    height: 38px;

    margin: 0 !important;
    padding: 0 0 8px 0 !important;

    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;

    color: #111 !important;
    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid #222 !important;
    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;
}

.sg-form-field input[type="text"]:focus,
.sg-form-field input[type="email"]:focus,
.sg-form-field input[type="tel"]:focus {

    border-bottom-color: #000 !important;
}


/* =========================================
   UPLOAD BEREICH
========================================= */

.sg-upload-section {
    width: 100%;
    margin: 0;
}

.sg-upload-title {

    margin: 0 0 48px 0;

    font-family: inherit;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.2;

    color: #111;
}


/* =========================================
   UPLOAD BUTTON
========================================= */

.sg-upload-button {

    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;

    width: 278px !important;
    min-width: 278px !important;
    max-width: 278px !important;

    height: 62px !important;
    min-height: 62px !important;

    margin: 0 !important;

    /* OBEN UND UNTEN IDENTISCH */
    padding: 0 58px 0 23px !important;

    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    color: #111 !important;
    background: transparent !important;

    border: 2px dashed #111 !important;
    border-radius: 999px !important;

    overflow: hidden;

    cursor: pointer;
}


/* =========================================
   UPLOAD TEXT
========================================= */

.sg-upload-label {

    display: flex !important;
    align-items: center !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1.2 !important;

    white-space: nowrap;

    pointer-events: none;

    position: relative;
    z-index: 2;
}


/* =========================================
   ALTEN ↑ PFEIL AUSBLENDEN
========================================= */

.sg-upload-arrow {
    display: none !important;
}


/* =========================================
   NEUER UPLOAD PFEIL
   geometrisch mittig
========================================= */

/* vertikale Linie */

.sg-upload-button::before {

    content: "";

    position: absolute;

    right: 27px;
    top: 50%;

    width: 1.5px;
    height: 22px;

    background: #111;

    transform: translateY(-50%);

    z-index: 4;

    pointer-events: none;
}


/* Pfeilspitze */

.sg-upload-button::after {

    content: "";

    position: absolute;

    right: 23px;
    top: calc(50% - 10px);

    width: 9px;
    height: 9px;

    border-right: 1.5px solid #111;
    border-bottom: 1.5px solid #111;

    transform: rotate(-135deg);

    z-index: 4;

    pointer-events: none;
}


/* =========================================
   FILE INPUT
========================================= */

.sg-upload-button .wpcf7-form-control-wrap {

    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 5;
}

.sg-upload-button .sg-file-input {

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer;
}


/* =========================================
   UPLOAD HOVER
========================================= */

.sg-upload-button:hover {

    color: #fff !important;
    background: #111 !important;
}

.sg-upload-button:hover::before {

    background: #fff;
}

.sg-upload-button:hover::after {

    border-color: #fff;
}


/* =========================================
   DATEI INFO
========================================= */

.sg-upload-info {

    width: 100%;
    max-width: 100%;

    margin: 55px 0 0 0;

    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;

    color: #111;
}


/* =========================================
   DATENSCHUTZ
========================================= */

.sg-privacy {

    width: 100%;
    max-width: 100%;

    margin: 44px 0 0 0;
}

.sg-privacy .wpcf7-form-control-wrap {

    display: block;
    width: 100%;
}

.sg-privacy .wpcf7-form-control {

    display: block;
    width: 100%;
}

.sg-privacy .wpcf7-list-item {

    display: block;

    width: 100%;

    margin: 0 !important;
}


/* =========================================
   DATENSCHUTZ LABEL
========================================= */

.sg-privacy label {

    display: grid !important;

    grid-template-columns: 18px minmax(0, 1fr);

    align-items: start;

    width: 100%;

    gap: 28px;

    margin: 0 !important;

    cursor: pointer;
}


/* =========================================
   DATENSCHUTZ CHECKBOX
========================================= */

.sg-privacy input[type="checkbox"] {

    appearance: none;
    -webkit-appearance: none;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px;

    margin: 4px 0 0 0 !important;
    padding: 0 !important;

    border: 1px solid #111 !important;
    border-radius: 50% !important;

    background: #fff !important;

    box-shadow: none !important;

    cursor: pointer;
}

.sg-privacy input[type="checkbox"]:checked {

    background: #111 !important;

    box-shadow:
        inset 0 0 0 4px #fff !important;
}


/* =========================================
   DATENSCHUTZ TEXT
========================================= */

.sg-privacy-text {

    display: block !important;

    width: 100% !important;
    max-width: 950px !important;
    min-width: 0;

    margin: 0 !important;

    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;

    color: #111;

    white-space: normal !important;

    overflow-wrap: break-word;
    word-break: normal;
}

.sg-privacy-text a {

    color: inherit;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}


/* =========================================
   SUBMIT BEREICH
========================================= */

.sg-submit-wrap {

    margin: 120px 0 0 0;
}


/* =========================================
   BUTTON WRAPPER
========================================= */

.sg-submit-inner {

    position: relative !important;

    display: inline-block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.sg-submit {

    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 62px !important;
    min-height: 62px !important;

    margin: 0 !important;

    /*
       Keine vertikale Verschiebung mehr.
       Die native Button-Box übernimmt
       die vertikale Zentrierung.
    */

    padding: 0 65px 0 28px !important;

    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: normal !important;

    text-align: left !important;

    color: #111 !important;
    background: transparent !important;

    border: 2px solid #111 !important;
    border-radius: 999px !important;

    box-shadow: none !important;
    outline: none !important;

    cursor: pointer;
}


/* =========================================
   ALTEN → PFEIL AUSBLENDEN
========================================= */

.sg-submit-arrow {
    display: none !important;
}


/* =========================================
   NEUER SUBMIT PFEIL
   geometrisch exakt mittig
========================================= */

/* horizontale Linie */

.sg-submit-inner::before {

    content: "";

    position: absolute;

    right: 20px;
    top: 50%;

    width: 24px;
    height: 1.5px;

    background: #111;

    transform: translateY(-50%);

    z-index: 4;

    pointer-events: none;
}


/* Pfeilspitze */

.sg-submit-inner::after {

    content: "";

    position: absolute;

    right: 20px;
    top: 50%;

    width: 9px;
    height: 9px;

    border-top: 1.5px solid #111;
    border-right: 1.5px solid #111;

    transform:
        translateY(-50%)
        rotate(45deg);

    z-index: 4;

    pointer-events: none;
}


/* =========================================
   SUBMIT HOVER
========================================= */

.sg-submit-inner:hover .sg-submit {

    color: #fff !important;
    background: #111 !important;
}

.sg-submit-inner:hover::before {

    background: #fff;
}

.sg-submit-inner:hover::after {

    border-color: #fff;
}


/* =========================================
   CONTACT FORM 7
========================================= */

.sg-contact-form .wpcf7-spinner {

    display: none !important;
}

.sg-contact-form .wpcf7-not-valid-tip {

    display: block;

    margin-top: 8px;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}

.sg-contact-form .wpcf7-response-output {

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {


    /* FELDER */

    .sg-form-row-2 {

        grid-template-columns: 1fr;
    }

    .sg-form-row {

        gap: 45px;
        margin-bottom: 55px;
    }

    .sg-form-field label {

        margin-bottom: 20px;

        font-size: 22px;
    }


    /* =====================================
       UPLOAD MOBILE
    ===================================== */

    .sg-upload-title {

        margin-bottom: 30px;

        font-size: 22px;
    }

    .sg-upload-button {

        width: 255px !important;
        min-width: 255px !important;
        max-width: 255px !important;

        height: 56px !important;
        min-height: 56px !important;

        padding:
            0
            52px
            0
            20px !important;

        font-size: 19px !important;
    }


    /* Upload Pfeil mobile */

    .sg-upload-button::before {

        right: 23px;

        height: 20px;
    }

    .sg-upload-button::after {

        right: 19px;

        top: calc(50% - 9px);

        width: 9px;
        height: 9px;
    }


    .sg-upload-info {

        margin-top: 35px;

        font-size: 15px;
    }


    /* =====================================
       DATENSCHUTZ MOBILE
    ===================================== */

    .sg-privacy {

        margin-top: 35px;
    }

    .sg-privacy label {

        grid-template-columns:
            17px
            minmax(0, 1fr);

        gap: 16px;
    }

    .sg-privacy input[type="checkbox"] {

        width: 17px !important;
        height: 17px !important;

        min-width: 17px;
    }

    .sg-privacy-text {

        max-width: 100% !important;

        font-size: 15px;
        line-height: 1.4;
    }


    /* =====================================
       SUBMIT MOBILE
    ===================================== */

    .sg-submit-wrap {

        margin-top: 80px;
    }

    .sg-submit {

        height: 56px !important;
        min-height: 56px !important;

        padding:
            0
            58px
            0
            22px !important;

        font-size: 19px !important;

        line-height: normal !important;
    }


    /* Submit Pfeil mobile */

    .sg-submit-inner::before {

        right: 18px;

        width: 21px;
    }

    .sg-submit-inner::after {

        right: 18px;

        width: 8px;
        height: 8px;
    }

}



/* === Korrektur Knopfmasse nach Designvorlage === */
/* Huelle als Flexbox: nur so trifft "top: 50%" die Knopfmitte. */
.sg-submit-inner {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important;
}

/* Beide Pillen auf 50 px Hoehe und 18 px Schrift wie in der Vorlage. */
.sg-upload-button,
.sg-submit {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

.sg-upload-button {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding: 0 60px 0 19px !important;
}

.sg-submit {
    padding: 0 60px 0 20px !important;
}

/* Pfeilspitzen an die kleinere Pille anpassen (Schaft bleibt zentriert). */
.sg-upload-button::before { height: 18px !important; }
.sg-upload-button::after  { top: calc(50% - 8px) !important; }
.sg-submit-inner::before  { width: 20px !important; }

/* CF7 wickelt den Knopf in ein <p> mit 14,4 px Aussenabstand –
   dadurch war die Huelle 64 statt 50 hoch und der Pfeil sass zu tief. */
.sg-submit-inner > p { margin: 0 !important; }

/* =========================================
   DREI UPLOAD-FELDER  (03.09.2026)
   Die Vorlage nennt "Max. Dateien: 3"; CF7 nimmt pro Feld
   nur eine Datei, deshalb drei Pillen untereinander.
========================================= */

.sg-upload-felder {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Gewaehlte Datei hebt sich ab: durchgezogener Rahmen statt gestrichelt. */
.sg-upload-button--gewaehlt {
    border-style: solid !important;
}

.sg-upload-button--gewaehlt .sg-upload-label {
    font-weight: 600 !important;
}

/* Haken statt Pfeil, sobald eine Datei gewaehlt wurde. */
.sg-upload-button--gewaehlt::before {
    transform: translateY(-50%) rotate(-45deg) !important;
    height: 1.5px !important;
    width: 14px !important;
    right: 21px !important;
    top: 52% !important;
}

.sg-upload-button--gewaehlt::after {
    transform: rotate(-45deg) !important;
    width: 7px !important;
    height: 1.5px !important;
    border: 0 !important;
    background: #111 !important;
    right: 31px !important;
    top: calc(50% + 3px) !important;
}

.sg-upload-button--gewaehlt:hover::after {
    background: #fff !important;
}

@media (max-width: 767px) {
    .sg-upload-felder { gap: 10px; }
}

/* =========================================
   UPLOAD-PFEIL  (03.09.2026)

   Der Pfeil wurde bisher aus zwei absolut positionierten
   Pseudo-Elementen gezeichnet und musste per Hand auf die
   Pillenmitte gerechnet werden – das ging bei jeder Aenderung
   der Knopfhoehe wieder schief.

   Im Formular steht bereits ein echtes Zeichen (.sg-upload-arrow),
   das nur ausgeblendet war. Als Flex-Kind zentriert es die
   Flexbox von selbst, exakt und dauerhaft.
========================================= */

.sg-upload-button {
    justify-content: space-between !important;
    padding: 0 19px !important;
    gap: 14px !important;
}

.sg-upload-button::before,
.sg-upload-button::after {
    content: none !important;
}

.sg-upload-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;

    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    /* optischer Ausgleich: der Glyph sitzt in seiner Zeile leicht hoch */
    margin-top: 1px !important;
}

.sg-upload-label {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Haken statt Pfeil, sobald eine Datei gewaehlt ist. */
.sg-upload-button--gewaehlt .sg-upload-arrow {
    font-size: 0 !important;
}

.sg-upload-button--gewaehlt .sg-upload-arrow::before {
    content: "\2713" !important;   /* Haken */
    font-size: 19px !important;
    line-height: 1 !important;
}

/* CF7 setzt beim Umbruch <br> in die Pille – die stoeren die Flexbox. */
.sg-upload-button br,
.sg-submit-inner br {
    display: none !important;
}

/* =========================================
   GEWAEHLTE DATEI  (03.09.2026)
   Die Pille ist im Ruhezustand 220 px breit. Sobald eine Datei
   gewaehlt ist, waechst sie mit dem Dateinamen mit – sonst wird
   der Name abgeschnitten und der Bewerber sieht nicht, was er
   hochgeladen hat.
========================================= */

.sg-upload-button--gewaehlt {
    width: auto !important;
    min-width: 220px !important;
    max-width: 100% !important;
}

.sg-upload-button--gewaehlt .sg-upload-label {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
}

/* Bei sehr langen Namen darf die Pille hoeher werden statt zu klemmen. */
.sg-upload-button--gewaehlt {
    height: auto !important;
    min-height: 50px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* =========================================
   AUSWAHLFELD  (14.09.2026)
   Umzugsbereitschaft: gleiche Linie wie die
   Textfelder, Pfeil als eigene Grafik rechts.
========================================= */

.sg-form-field select {
    display: block;
    width: 100% !important;
    height: 38px;
    margin: 0 !important;
    padding: 0 28px 8px 0 !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #111 !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px top 11px !important;
    border: 0 !important;
    border-bottom: 1px solid #222 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.sg-form-field select:focus {
    border-bottom-color: #000 !important;
}

/* =========================================
   PLATZHALTER UND LEERE AUSWAHL  (14.09.2026)
   Gehaltsvorstellung und Umzugsbereitschaft stehen
   nebeneinander wie Vor- und Nachname; der Hinweis
   ("Jahresbrutto in €", "Bitte auswählen") ist heller
   als eingegebener Text.
========================================= */

.sg-form-field input::placeholder {
    color: #8c8c8c !important;
    opacity: 1;
}

.sg-form-field select:has(option[value=""]:checked) {
    color: #8c8c8c !important;
}

.sg-form-field select option {
    color: #111;
}

/* =========================================
   MASSSTAB DER LANDINGPAGE  (14.09.2026)
   Kai: Das Formular wirkte viel groesser als der Rest der
   Stellenseite (Beschriftungen 27 px, 75 px zwischen den Zeilen,
   120 px vor dem Absenden, gesamt ~1.460 px hoch). Jetzt im
   Massstab der Seite: Beschriftungen wie Fliesstext und Einleitung
   (20 px), Upload-Pillen und Absende-Knopf wie der PDF-Knopf
   (50 px, 18 px), Abstaende deutlich enger.
========================================= */

.sg-contact-form .sg-form-row {
    gap: 40px !important;
    margin-bottom: 36px !important;
}

.sg-contact-form .sg-form-field label {
    margin: 0 0 6px 0 !important;
    font-size: 20px !important;
    line-height: 26px !important;
}

.sg-contact-form .sg-upload-section {
    margin-top: 8px !important;
}

.sg-contact-form .sg-upload-title {
    margin: 0 0 16px 0 !important;
    font-size: 20px !important;
    line-height: 26px !important;
}

.sg-contact-form .sg-upload-felder {
    gap: 10px !important;
}

.sg-contact-form .sg-upload-info {
    margin-top: 16px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

.sg-contact-form .sg-privacy {
    margin-top: 32px !important;
}

.sg-contact-form .sg-privacy-text {
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.sg-contact-form .sg-submit-wrap {
    margin-top: 36px !important;
}

@media (max-width: 767px) {
    .sg-contact-form .sg-form-row {
        gap: 28px !important;
        margin-bottom: 28px !important;
    }

    .sg-contact-form .sg-form-field label,
    .sg-contact-form .sg-upload-title {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    .sg-contact-form .sg-upload-button {
        height: 50px !important;
        min-height: 50px !important;
        font-size: 17px !important;
    }

    .sg-contact-form .sg-upload-info,
    .sg-contact-form .sg-privacy-text {
        font-size: 15px !important;
    }
}


/* =========================================
   MEHRZEILIGES FELD  (15.09.2026)
   Das Kontaktformular (CF7 11011) nutzt seit heute denselben
   Aufbau wie das Bewerbungsformular (Wunsch Kai). Es hat als
   einziges ein Nachrichtenfeld: gleiche Linie, Schrift und
   Platzhalterfarbe wie die Textfelder, Höhe für rund vier Zeilen.
========================================= */

.sg-form-field textarea {
    display: block;
    width: 100% !important;
    height: 120px;
    min-height: 78px;
    margin: 0 !important;
    padding: 6px 0 8px 0 !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: #111 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #222 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    resize: vertical;
}

.sg-form-field textarea:focus {
    border-bottom-color: #000 !important;
}

.sg-form-field textarea::placeholder {
    color: #8c8c8c !important;
    opacity: 1;
}

/* =========================================
   UPLOAD-FEHLER  (03.11.2026, Abnahme)
   CF7 setzt die Fehlermeldung in die Pille. Dort lag sie ueber dem
   Dateinamen, und der Haken blieb stehen. Jetzt steht die Meldung
   unter der Pille, die Pille bekommt einen roten Rahmen und zeigt
   wieder den Pfeil statt des Hakens.
========================================= */

.sg-upload-button:has(.wpcf7-not-valid-tip) {
    overflow: visible !important;
    margin-bottom: 26px !important;
    border-color: #c62828 !important;
    border-style: dashed !important;
}

.sg-upload-button .wpcf7-not-valid-tip {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: max-content !important;
    max-width: min(520px, calc(100vw - 40px)) !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    pointer-events: none;
}

.sg-upload-button--gewaehlt:has(.wpcf7-not-valid-tip) .sg-upload-arrow {
    font-size: 20px !important;
}

.sg-upload-button--gewaehlt:has(.wpcf7-not-valid-tip) .sg-upload-arrow::before {
    content: none !important;
}

@media (max-width: 767px) {
    .sg-upload-button:has(.wpcf7-not-valid-tip) {
        margin-bottom: 44px !important;
    }
}