/* Reservierungs-Formular - basiert auf den Layout-Variablen
   von bain_bleu_booking_main.css (Wrapper, Header, Footer). */

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: #1f6f8b;
    text-decoration: none;
    font-size: 0.76rem;
}
.back-link:hover { text-decoration: underline; }

.reservation-form {
    background: #FBFBFB;
    color: #1a2733;
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.reservation-form a { color: #1f6f8b; }

.form-section {
    border: 1px solid #d8dde2;
    border-radius: 4px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.5rem;
}
.form-section legend {
    padding: 0 .5rem;
    font-weight: 600;
    color: #1f6f8b;
}
.form-section[disabled] {
    opacity: .55;
    pointer-events: none;
}

.form-row {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}
/* Flex-`gap` wird in Safari erst ab 14.1 unterstuetzt. Fuer Safari 13/14
   (2020-Baseline) verwenden wir stattdessen den "lobotomized owl"-Selektor,
   der jedes ausser dem ersten Kind mit `margin-top` versieht. */
.form-row > * + * {
    margin-top: .35rem;
}
/* `hidden`-Attribut muss auch bei Flex-Elementen zuverlaessig ausblenden.
   Ohne diese Regel wuerde `display: flex` oben das eingebaute `display: none`
   des `hidden`-Attributs uebertrumpfen und leere Boxen blieben sichtbar. */
.form-row[hidden] {
    display: none;
}
.form-row label {
    font-weight: 500;
    font-size: .76rem;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row select,
.form-row textarea {
    padding: .55rem .65rem;
    border: 1px solid #b8c0c8;
    border-radius: 4px;
    font: inherit;
    background: #fff;
    /* iOS/Safari mobile stretcht `input[type="date"]` trotz flex-column mit
       default `align-items: stretch` nicht automatisch auf die Container-
       breite -- der native Datepicker rendert auf seiner intrinsischen
       Content-Breite. Explizit `width: 100%` + `box-sizing: border-box`
       fixt das zuverlaessig fuer alle Formularfelder auf jedem Viewport. */
    width: 100%;
    box-sizing: border-box;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: 2px solid #1f6f8b;
    outline-offset: 1px;
    border-color: #1f6f8b;
}

/* Statusindikator neben dem E-Mail-Feld: kleine 14x14-Kugel, die auf dem
   rechten oberen Ecken-Rand des Inputs sitzt. Nicht blockierend fuer die
   Buchung -- rein visuelles Feedback ueber DNS-MX-Pruefung. */
.email-input-wrap {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}
.email-status {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: 0 0 0 2px #fff;
    transition: background-color .12s ease;
    pointer-events: none;
    z-index: 2;
}
.email-status::before,
.email-status::after {
    content: "";
    position: absolute;
    background: #fff;
    opacity: 0;
    transition: opacity .12s ease;
}
.email-status[data-state="idle"]    { display: none; }
.email-status[data-state="pending"] {
    background-color: #b8c0c8;
    animation: bb-email-status-pulse 1.2s ease-in-out infinite;
}
/* Haekchen via zwei gedrehte Balken (::before = kurz links unten, ::after = lang rechts oben).
   Wird sowohl fuer "valid" (gruen) als auch fuer "provider_only" (gelb) verwendet. */
.email-status[data-state="valid"] {
    background-color: #2f9e56;
}
.email-status[data-state="valid"]::before,
.email-status[data-state="provider_only"]::before {
    left: 3px;
    top: 6px;
    width: 4px;
    height: 2px;
    border-radius: 1px;
    transform: rotate(45deg);
    transform-origin: left center;
    opacity: 1;
}
.email-status[data-state="valid"]::after,
.email-status[data-state="provider_only"]::after {
    left: 5px;
    top: 8px;
    width: 7px;
    height: 2px;
    border-radius: 1px;
    transform: rotate(-45deg);
    transform-origin: left center;
    opacity: 1;
}
/* Kreuz via zwei diagonale Balken */
.email-status[data-state="invalid"] {
    background-color: #c0392b;
}
.email-status[data-state="invalid"]::before,
.email-status[data-state="invalid"]::after {
    left: 6px;
    top: 2px;
    width: 2px;
    height: 10px;
    border-radius: 1px;
    opacity: 1;
}
.email-status[data-state="invalid"]::before { transform: rotate(45deg); }
.email-status[data-state="invalid"]::after  { transform: rotate(-45deg); }
/* Gelb: Provider/MX erkannt, Mailbox aber nicht verlaesslich bestaetigt.
   Haekchen wie "valid", nur Hintergrund gelb. */
.email-status[data-state="provider_only"] {
    background-color: #e2b100;
}
@keyframes bb-email-status-pulse {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1;   }
}

/* `<input type="date">` unterstuetzt nativ kein `placeholder`-Attribut.
   Der Wrapper `.date-field` blendet ein Overlay-<span> ueber das leere,
   unfokussierte Input; bei Fokus oder gueltigem Wert verschwindet der
   Overlay und der native Datepicker-Text bzw. das gewaehlte Datum
   werden sichtbar. */
.date-field {
    position: relative;
    display: block;
    width: 100%;
}
.date-field__placeholder {
    position: absolute;
    inset: 1px;
    display: flex;
    align-items: center;
    padding: .55rem .65rem;
    color: #94a3b8;
    background: #fff;
    border-radius: 3px;
    pointer-events: none;
    font: inherit;
    box-sizing: border-box;
}
.date-field input:focus ~ .date-field__placeholder,
.date-field input:valid ~ .date-field__placeholder {
    display: none;
}

.form-row.two-cols {
    flex-direction: row;
}
/* Fuer die horizontale Zwei-Spalten-Anordnung: `> * + *`-Regel oben
   ueberschreiben, damit die Spalten nebeneinander stehen. */
.form-row.two-cols > * + * {
    margin-top: 0;
    margin-left: 1rem;
}
.form-row.two-cols > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.form-row.two-cols > div > * + * {
    margin-top: .35rem;
}

.checkbox-row {
    flex-direction: row;
    align-items: flex-start;
}
.checkbox-label {
    display: flex;
    align-items: flex-start;
    font-weight: 400;
    cursor: pointer;
}
/* Flex-`gap`-Ersatz fuer die Checkbox + Label-Anordnung. */
.checkbox-label > * + * {
    margin-left: .65rem;
}
.checkbox-label input[type="checkbox"] {
    margin-top: .25rem;
}

/* --- Vereinheitlichte Info-/Status-Meldungen -----------------------------
   Alle Meldungen im Fieldset "1. Datum und Uhrzeit" (Slots-Status,
   Datum-nicht-buchbar, Terminvorschlag, Hold-Countdown, Arriver 1h,
   Kindertag) teilen sich denselben visuellen Stil:
     - leicht blauer Hintergrund
     - linker blauer Akzentbalken
     - identisches Padding, Schriftgroesse und Textfarbe
   Der vertikale Abstand folgt konsequent dem 1rem-Rhythmus der
   umliegenden .form-row-Elemente, sodass alle Meldungen -- egal welche
   davon gerade sichtbar sind -- immer gleich weit auseinander stehen. */
.hint,
.date-info,
.date-suggestion,
.hold-status {
    margin: 0;
    padding: .55rem .75rem;
    background: #f4f9fb;
    border-left: 3px solid #1f6f8b;
    border-radius: 3px;
    font-size: .72rem;
    line-height: 1.4;
    color: #1a2733;
}

/* --- Rote Variante fuer "Datum nicht buchbar", "Arriver 1h" und
   "Kindertag" -----------------------------------------------------------
   Uebernimmt Padding/Groesse/Layout von .date-info oben und
   uebersteuert nur den Hintergrund und den Akzentbalken, damit diese
   hervorgehobenen Hinweise farblich abgesetzt sind, aber optisch
   weiterhin zur Meldungsbox-Familie gehoeren. */
#date-info,
#arrive-early-info,
#kids-day-info {
    background: #fbf4f4;
    border-left-color: #8b1f1f;
}

/* --- Gruene Variante fuer "Preis: XXX CHF" -----------------------------
   Positive Bestaetigungs-Meldung, sobald Produkt/Personen/Datum/Zeit
   gewaehlt und ein Preis > 0 berechenbar ist. Uebernimmt Padding/Groesse/
   Layout von .date-info und uebersteuert nur Hintergrund, Akzentbalken
   und Textfarbe -- passend zur Meldungsbox-Familie. */
#price-info {
    background: #f1f8f2;
    border-left-color: #2f8b3a;
    color: #1a3320;
    font-weight: 600;
}

/* --- Vorschlag fuer naechstes verfuegbares Datum ------------------------
   Zusaetzlich zum gemeinsamen Info-Box-Look benoetigt .date-suggestion
   ein Flex-Layout, damit Label und Vorschlag-Button nebeneinander
   angezeigt werden. */
.date-suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
/* Flex-`gap`-Ersatz fuer den Vorschlag-Button neben dem Label
   (Safari 13/14 unterstuetzt Flex-`gap` erst ab 14.1). */
.date-suggestion > * + * {
    margin-left: .5rem;
}
.date-suggestion-label {
    color: #1a2733;
}
.date-suggestion-btn {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    /* Nur top/right/bottom nullen. Der linke Abstand kommt aus
       `.date-suggestion > * + *` (Flex-`gap`-Ersatz) und wuerde durch
       einen `margin: 0`-Shortcut ueberschrieben werden -- dann klebt
       das Datum ohne Leerraum direkt am Doppelpunkt des Labels. */
    margin: 0 0 0 .5rem;
    color: #1f6f8b;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.date-suggestion-btn:hover,
.date-suggestion-btn:focus-visible {
    color: #185b73;
    outline: none;
}
.date-suggestion-btn[hidden] {
    display: none;
}

/* --- Slots-Status (unterhalb des Uhrzeit-Selects) ------------------------
   .hint sitzt innerhalb der Uhrzeit-.form-row, deshalb explizite
   Abstands-Regeln: kleiner Abstand nach oben zum Select, kein
   Platzreservieren wenn leer. */
#slots-status {
    margin-top: .5rem;
}
#slots-status:empty {
    display: none;
}

/* --- Sicherheitsnetz: leere blaue Boxen automatisch ausblenden ---------- */
/* Die eigentliche Sichtbarkeitssteuerung passiert im JS ueber das
   `hidden`-Attribut (siehe hideDateInfo(), hideSuggestion() u. a.).
   `:empty` reicht als CSS-Sicherheitsnetz und ist ueberall unterstuetzt.
   `:has()` (Safari 15.4+/FF 121+) wurde bewusst entfernt, um 2020-Browser
   nicht auszuschliessen. */
.date-info:empty,
.date-suggestion-label:empty {
    display: none;
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Hold-Countdown-Box -------------------------------------------------
   .hold-status ist kein .form-row und braucht deshalb explizite
   margin-Werte, damit sowohl der Abstand oberhalb als auch unterhalb
   dem 1rem-Rhythmus der umliegenden Form-Rows entspricht. */
.hold-status {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.hold-status strong { margin-left: .35rem; }

.form-actions {
    margin-top: 1.25rem;
    text-align: right;
}
.form-actions button {
    padding: .7rem 1.5rem;
    background: #1f6f8b;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.form-actions button:disabled {
    background: #88a3ad;
    cursor: not-allowed;
}
.form-actions button:not(:disabled):hover { background: #185b73; }

.form-error {
    margin-top: 1rem;
    padding: .65rem .85rem;
    background: #fff1f1;
    border-left: 3px solid #c0392b;
    color: #7a1d12;
    border-radius: 3px;
}
/* Ersetzt fruehere style="display:block"-Attribute in payment_*.php (CSP-konform). */
.form-error--visible { display: block; }

.success-screen {
    background: #fff;
    color: #1a2733;
    border-radius: 6px;
    padding: 2rem 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.success-screen a { color: #1f6f8b; }
.success-screen h2 { color: #1f6f8b; margin-top: 0; }

/* --- AGB-Modal (Allgemeine Geschaeftsbedingungen) ---------------------- */
/* Overlay + Dialog, wird per JS aus/eingeblendet. `hidden`-Attribut steuert
   die Sichtbarkeit, damit die Seite ohne JS zugaenglich bleibt. */
.terms-modal-overlay {
    position: fixed;
    /* `inset` ist Kurzform seit Chrome 87 / Safari 14.5. Fuer Browser ab 2020
       (Chrome 80, Safari 13, Firefox 74) explizit ausschreiben. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(26, 39, 51, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}
.terms-modal-overlay[hidden] { display: none; }

.terms-modal {
    background: #fff;
    color: #1a2733;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
}
.terms-modal-title {
    color: #1f6f8b;
    margin: 0;
    padding: 1rem 3rem 1rem 1.5rem;
    font-size: 1.05rem;
    border-bottom: 1px solid #d8dde2;
}
.terms-modal-close {
    position: absolute;
    top: .35rem;
    right: .5rem;
    background: transparent;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: #1a2733;
    cursor: pointer;
    padding: .25rem .5rem;
}
.terms-modal-close:hover,
.terms-modal-close:focus-visible {
    color: #1f6f8b;
    outline: none;
}
.terms-modal-content {
    padding: 1rem 1.5rem 1.5rem;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: .8rem;
    line-height: 1.45;
    color: #1a2733;
}
.terms-modal-content:empty::before {
    content: '\2014';
    color: #88a3ad;
}
/* Links im AGB-Text (aus Admin-Meldungen-Modal gepflegt): Corporate-Blau
   statt Browser-Default (der ist zu hell). Konsistent mit dem im E-Mail-
   Template und der Buchen-Aktion verwendeten Ton. */
.terms-modal-content a {
    color: #003D7E;
    text-decoration: underline;
}
.terms-modal-content a:hover,
.terms-modal-content a:focus-visible {
    color: #002a58;
}

@media (max-width: 540px) {
    .form-row.two-cols { flex-direction: column; }
    /* Auf schmalen Displays wieder vertikal stapeln: horizontales margin
       zuruecknehmen und stattdessen vertikalen Abstand geben. */
    .form-row.two-cols > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
    .reservation-form { padding: 1rem; }
    .terms-modal-title { padding: .85rem 2.5rem .85rem 1rem; font-size: 1rem; }
    .terms-modal-content { padding: .85rem 1rem 1rem; font-size: .78rem; }
}