.medic-kontakt-formular-shape-container {
    background: url(/wp-content/themes/medic-theme/assets/images/svg-backgrounds/shape-overlay-beige.svg) no-repeat bottom -3px left -20px;
}

.wpcf7-form {
    color: var(--wp--preset--color--base) !important;
}

.wpcf7-form input {
    line-height: 1.5rem !important;
    border: none;
}

.wpcf7-submit {
    margin: 0 auto !important;
    position: relative;
    display: block;
}

.wpcf7-form input, textarea {
    border-radius: 8px !important;
}

.wpcf7-form p {
    margin-bottom: 1.1rem;
}

.wpcf7-form p label {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  color: inherit !important;
}

.wpcf7-form p label span input {
  max-width: 380px !important;
  width: 100% !important;
  float: right;
}

.cf7-two-col-row {
  display: flex !important;
  gap: 30px !important;
}

.message-label {
  display: block !important;
  width: 100% !important;
  table-layout: initial !important;
}

.message-label span {
  display: block !important;
  padding-left: 0 !important;
  width: 100% !important;
  margin-top: .4rem;
}

.message-label span textarea {
  width: 100% !important;
  box-sizing: border-box;
  border: none;
}

.message-label span input,
.message-label span textarea {
  width: 100% !important;
}

/* Entspricht dem Standard-Button (core/button); der Pfeil steht im Submit-Wert, da <input> kein ::after kennt */
.wpcf7-form input.wpcf7-submit {
	background-color: var(--wp--preset--color--base);
	border-radius: 8px;
	border-color: var(--wp--preset--color--accent-3);
	border-width: 2px;
	border-style: solid;
	color: var(--wp--preset--color--accent-3);
	font-family: var(--wp--preset--font-family--d-din);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	letter-spacing: -0.1px;
	word-spacing: .2rem;
	line-height: 1.4 !important;
	padding-top: .25rem;
	padding-right: 1rem;
	padding-bottom: .25rem;
	padding-left: .5rem;
	transition: .5s all ease;
	cursor: pointer !important;
}

.wpcf7-form input.wpcf7-submit:hover {
	background-color: var(--wp--preset--color--accent-2);
}
/*
 * Eingabefelder in der Schrift der Seite (sonst erscheinen Platzhalter/Datumsformat in Systemschrift).
 * Mindestens 16px, sonst zoomt iOS beim Antippen eines Feldes in die Seite.
 */
.wpcf7-form :is(input:not([type="checkbox"]):not([type="submit"]), textarea) {
    font-family: inherit;
    font-size: max(16px, var(--wp--preset--font-size--x-small));
    padding: .15rem .6rem;
    box-sizing: border-box;
}

/* einheitliche Höhe für einzeilige Felder (Datumsfelder wären durch das Kalender-Symbol sonst höher) */
.wpcf7-form input:not([type="checkbox"]):not([type="submit"]) {
    height: calc(1.5rem + .3rem);
}

/* Checkbox-Gruppen: Gruppenlabel links, Optionen in der rechten Spalte wie die Eingabefelder */
.medic-cf7-group > p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.medic-cf7-group .wpcf7-form-control-wrap {
    flex: 0 1 380px;
}

.medic-cf7-group .wpcf7-list-item {
    display: block;
    margin: 0 0 .35rem;
}

/* langes Gruppenlabel: darüber, Optionen nebeneinander */
.medic-cf7-group--stacked > p {
    display: block;
}

.medic-cf7-group--stacked .medic-cf7-group-label {
    display: block;
    margin-bottom: .5rem;
}

.medic-cf7-group--stacked .wpcf7-list-item {
    display: inline-block;
    margin-right: 1.5rem;
}

/* Checkbox und Text bündig nebeneinander (überschreibt die Label-Regel der Textfelder) */
.wpcf7-form .wpcf7-list-item label {
    display: flex !important;
    align-items: flex-start;
    gap: .6rem;
    width: auto !important;
}

.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .2em 0 0;
    accent-color: var(--wp--preset--color--accent-3);
}

.medic-cf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.medic-cf7-hinweis {
    font-size: var(--wp--preset--font-size--x-small);
    opacity: .85;
}

/* Datei-Upload (z. B. Rezeptbild): volle Breite als Ablagefläche, Auswahl-Button wie die Outline-Buttons */
.wpcf7-form input[type="file"] {
    float: none;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: .6rem !important;
    border: 2px dashed color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) !important;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
    color: var(--wp--preset--color--base);
    cursor: pointer;
}

.wpcf7-form input[type="file"]::file-selector-button {
    font: inherit;
    margin-right: .75rem;
    padding: .2rem .75rem;
    border: 2px solid var(--wp--preset--color--accent-3);
    border-radius: 8px;
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--accent-3);
    cursor: pointer;
    transition: .5s all ease;
}

.wpcf7-form input[type="file"]:hover::file-selector-button {
    background-color: var(--wp--preset--color--accent-2);
}

/* deaktiviert, solange die Datenschutz-Zustimmung fehlt */
.wpcf7-form input.wpcf7-submit:disabled {
	opacity: .55;
	cursor: not-allowed !important;
}

.wpcf7-form input.wpcf7-submit:disabled:hover {
	background-color: var(--wp--preset--color--base);
}

/*
 * Mobil: Label über dem Feld, kompakter Rhythmus, 44px hohe Tippflächen, größere Checkboxen.
 * Farbfläche mit Formular: weniger Leerraum oben und weniger Innenabstand, damit die Textspalte breiter wird.
 */
@media (max-width: 600px) {
    .wpcf7-form p {
        margin-bottom: 1rem;
    }

    .wpcf7-form p label span input {
        margin-top: .3rem;
    }

    /* alle Eingabe- und Textfelder gleich breit */
    .wpcf7-form :is(input:not([type="checkbox"]):not([type="submit"]), textarea) {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        padding: .6rem .75rem;
    }

    /*
     * iOS Safari rendert Datumsfelder nativ mit fester Mindestbreite und zentriertem Text und ignoriert width.
     * Ohne natives Erscheinungsbild verhalten sie sich wie die übrigen Felder; der Datums-Picker bleibt.
     */
    .wpcf7-form input:not([type="checkbox"]):not([type="submit"]) {
        height: calc(1.5rem + 1.2rem);
    }

    .wpcf7-form input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        text-align: left;
    }

    .wpcf7-form input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
    }

    .wpcf7-form .wpcf7-list-item {
        margin-bottom: .6rem;
    }

    .wpcf7-form .wpcf7-list-item input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: .1em;
    }

    .has-medic-gradient-footer-gradient-background:has(.wpcf7) > .wp-block-spacer:first-child {
        height: 48px !important;
    }

    .has-medic-gradient-footer-gradient-background:has(.wpcf7) > .wp-block-group {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}