/*
 * Feld-Optik NUR für das Reservierungsformular (Contact Form 7, Formular-ID 9400,
 * z. B. auf /tisch-reservieren/). Bewusst keine Layout-/Spalten-/Media-Query-Regeln,
 * damit das übrige Seitendesign unberührt bleibt.
 */

/* Alle Felder einheitlich: weiß, dezenter grauer Rahmen, leichte Rundung */
div[id^="wpcf7-f9400"] .wpcf7-form-control:not([type="submit"]) {
    background-color: #ffffff;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    padding: 8px 12px;
    min-height: 42px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Einheitliche, feste Höhe für alle einzeiligen Felder — Selects ignorieren
   in manchen Browsern die line-height und rendern sonst niedriger als Inputs */
div[id^="wpcf7-f9400"] input.wpcf7-form-control:not([type="submit"]),
div[id^="wpcf7-f9400"] select.wpcf7-form-control {
    height: 44px;
}

/* Uhrzeit (Select) und Datum: native Browser-Optik entfernen und
   einheitlichen Chevron-Pfeil rechts anzeigen */
div[id^="wpcf7-f9400"] select.wpcf7-form-control,
div[id^="wpcf7-f9400"] input.wpcf7-date {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}

/* iOS/Safari: Datumsfeld füllt sonst die Höhe nicht bzw. zentriert den Text nicht */
div[id^="wpcf7-f9400"] input.wpcf7-date::-webkit-date-and-time-value {
    text-align: left;
}

div[id^="wpcf7-f9400"] .wpcf7-form-control:focus {
    border-color: #BF5F0B;
    outline: none;
}

/* Zweispaltiges Layout dieses Formulars erhalten: ee-style.css (wird auf Seiten
   mit Events-Shortcode geladen) stapelt .ee-form-grid-Zeilen auf Mobile —
   für das Reservierungsformular hier gezielt wieder aufheben. */
div[id^="wpcf7-f9400"] .ee-form-grid > div {
    flex-direction: row !important;
    gap: 20px !important;
}