/****************************************************************************
 * TypoForm (Plugin typo-form) – Optik an das bisherige CF7-Formular angleichen.
 * Vorbild: typo-canvas/core/assets/css/PROTECTED-cf7.css (Parent, nicht anfassen).
 * Angelegt 2026-11-10, awork EING-1.
 ****************************************************************************/

/* Abstände wie bei CF7: schmale Gutter statt Foundation-Standard, keine
   zusätzliche Zeilen-Marge (sonst sind die Zeilen ~50 % höher als bisher). */
.typo_form {
    margin: 0 -0.375rem;
}
.typo_form > .typo_form_field {
    padding: 0.375rem;
    margin-bottom: 0;
}

/* wpautop legt im Abschnitt leere <p> an – die sind als Flex-Element im Weg. */
.typo_form > p:empty {
    display: none;
}

/* Auswahlfelder: Platz für den Pfeil, sonst läuft der Text darunter. */
.typo_form select {
    padding-right: 2rem;
    background-position: right 0.75rem center;
}

/* Beschriftungen über den Feldern (Uhrzeit, Wirt, Rechnung, Bezahlung) */
.typo_form label,
.typo_form .typo_form_label {
    display: block;
    text-align: left;
    margin-bottom: 0.25rem;
}
.typo_form .typo_form_required {
    color: #a3000b;
}

/****************************************************************************
 * Checkboxen & Radios – Optik aus PROTECTED-cf7.css nachgebaut.
 * Dort hängt sie an CF7s <span> hinter dem Input; TypoForm rendert
 * <label><input> Text</label>, darum direkt am Input statt über :before/:after.
 ****************************************************************************/
.typo_form .typo_form_radio label,
.typo_form .typo_form_checkbox label,
.typo_form .typo_form_acceptance label {
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
    margin: 0 1rem 0.25rem 0;
}
/* Datenschutz-Zeile als normaler Textfluss – inline-flex würde das Leerzeichen
   vor dem Link schlucken ("...akzeptiere dieDatenschutzbestimmungen"). */
.typo_form .typo_form_acceptance label {
    display: block;
    position: relative;
    padding-left: 1.375rem;
    margin: 0;
}
.typo_form .typo_form_acceptance label input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.3125rem;
    margin: 0;
}
.typo_form input[type="checkbox"],
.typo_form input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    margin: 0.3125rem 0.5rem 0 0;
    border: 1px solid #8f8f9d;
    background-color: transparent;
    cursor: pointer;
}
.typo_form input[type="radio"] {
    border-radius: 50%;
}
.typo_form input[type="checkbox"]:checked,
.typo_form input[type="radio"]:checked {
    background-color: #8f8f9d;
    box-shadow: inset 0 0 0 2px #ffffff;
}
.typo_form input[type="checkbox"]:focus-visible,
.typo_form input[type="radio"]:focus-visible {
    outline: 2px solid #0050a0;
    outline-offset: 2px;
}

/****************************************************************************
 * Meldungen – wie die CF7-Response-Ausgabe
 ****************************************************************************/
.typo_form .typo_form_message:not(:empty) {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    text-align: center;
}
.typo_form .typo_form_error:not(:empty) {
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    padding: 0.5rem;
    text-align: left;
}