/* Webinaris Elementor Widget – Anmeldeformular (DSGVO-freundlich, keine externen Requests)
 *
 * Alle sichtbaren Elemente werden unter .wbn-widget gestylt (Spezifität 0,2,0),
 * damit Theme-/Elementor-Basisstyles (input/select/button) uns nicht überschreiben.
 * Farben/Abstände kommen zusätzlich über CSS-Variablen aus den Stil-Controls.
 */

.wbn-widget {
    --wbn-edge: 16px; /* seitlicher Abstand auf Mobil (inline) – s. Media Query am Dateiende */
    box-sizing: border-box;
    max-width: 100%;
}

.wbn-form {
    /* Defaults – überschreibbar über die Stil-Controls des Widgets (CSS-Variablen) */
    --wbn-accent: #2e7d32;
    --wbn-gap: 16px;
    --wbn-label-color: #333333;
    --wbn-field-color: #333333;
    --wbn-field-bg: #ffffff;
    --wbn-field-border: #c9c9c9;
    --wbn-field-border-width: 1px;
    --wbn-field-radius: 6px;
    --wbn-field-padding: 10px 14px;
    --wbn-placeholder-color: #8a8a8a;
    --wbn-btn-bg: var(--wbn-accent);
    --wbn-btn-bg-hover: #1b5e20;
    --wbn-btn-color: #ffffff;
    --wbn-btn-color-hover: #ffffff;
    --wbn-btn-radius: 6px;
    --wbn-success-color: #1e4620;
    --wbn-success-bg: #d7ecd9;
    --wbn-error-color: #8a1f1f;
    --wbn-error-bg: #fbe3e4;

    display: flex;
    flex-direction: column;
    gap: var(--wbn-gap);
}

/* Felder */
.wbn-widget .wbn-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wbn-widget .wbn-label {
    color: var(--wbn-label-color);
    font-weight: 600;
    line-height: 1.4;
}

.wbn-widget .wbn-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--wbn-field-padding);
    margin: 0;
    font: inherit;
    line-height: 1.4;
    color: var(--wbn-field-color);
    background: var(--wbn-field-bg);
    border: var(--wbn-field-border-width) solid var(--wbn-field-border);
    border-radius: var(--wbn-field-radius);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wbn-widget .wbn-input::placeholder {
    color: var(--wbn-placeholder-color);
    opacity: 1;
}

.wbn-widget .wbn-input:focus {
    border-color: var(--wbn-accent);
    outline: 2px solid var(--wbn-accent);
    outline-offset: 1px;
    box-shadow: none;
}

.wbn-widget .wbn-input--error {
    border-color: var(--wbn-error-color);
}

/* Select: eigenes Chevron, damit die native Optik nicht mit dem Theme kollidiert */
.wbn-widget .wbn-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* Datenschutz-Checkbox */
.wbn-widget .wbn-field--consent {
    gap: 0;
}

.wbn-widget .wbn-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--wbn-label-color);
    font-size: 0.9em;
    line-height: 1.5;
    cursor: pointer;
}

.wbn-widget .wbn-checkbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--wbn-accent);
}

.wbn-widget .wbn-checkbox:focus-visible {
    outline: 2px solid var(--wbn-accent);
    outline-offset: 2px;
}

.wbn-widget .wbn-consent-label a {
    color: inherit;
    text-decoration: underline;
}

/* Button */
.wbn-widget .wbn-btn {
    display: inline-block;
    align-self: flex-start;
    width: auto;
    padding: 14px 28px;
    margin: 0;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--wbn-btn-color);
    background: var(--wbn-btn-bg);
    border: none;
    border-radius: var(--wbn-btn-radius);
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wbn-widget .wbn-btn:hover,
.wbn-widget .wbn-btn:focus-visible {
    color: var(--wbn-btn-color-hover);
    background: var(--wbn-btn-bg-hover);
}

.wbn-widget .wbn-btn:focus-visible {
    outline: 2px solid var(--wbn-accent);
    outline-offset: 2px;
}

.wbn-widget .wbn-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.wbn-widget .wbn-btn--block {
    display: block;
    align-self: stretch;
    width: 100%;
}

/* Meldungen (Zeilenumbrüche aus den Widget-Einstellungen bleiben erhalten) */
.wbn-widget .wbn-msg {
    margin: 0;
    padding: 12px 16px;
    border-radius: 6px;
    white-space: pre-line;
    line-height: 1.5;
}

.wbn-widget .wbn-msg[hidden] {
    display: none;
}

.wbn-widget .wbn-msg--success {
    color: var(--wbn-success-color, #1e4620);
    background: var(--wbn-success-bg, #d7ecd9);
}

.wbn-widget .wbn-msg--error {
    color: var(--wbn-error-color, #8a1f1f);
    background: var(--wbn-error-bg, #fbe3e4);
}

.wbn-widget .wbn-msg--info {
    color: #444444;
    background: #f2f2f2;
}

.wbn-widget .wbn-msg:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wbn-widget .wbn-msg a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* Hinweis „Nächster Termin" (Automatik-Modus) */
.wbn-widget .wbn-next-date {
    margin: 0;
    color: var(--wbn-label-color);
    font-size: 0.95em;
}

/* Hinweistext über dem Button (z. B. Newsletter-/E-Mail-Transparenzhinweis) */
.wbn-widget .wbn-notice {
    margin: 0;
    color: var(--wbn-notice-color, #666666);
    font-size: 0.85em;
    line-height: 1.5;
}

.wbn-widget .wbn-notice a {
    color: inherit;
    text-decoration: underline;
}

/* Nach erfolgreicher Anmeldung: nur noch die Meldung zeigen.
   Auch der Honeypot fliegt raus – sonst bleibt sein Label im Text der Seite
   (kopierbar, und in Reader-/Übersetzungsansichten sichtbar). */
.wbn-widget .wbn-form--done .wbn-field,
.wbn-widget .wbn-form--done .wbn-btn,
.wbn-widget .wbn-form--done .wbn-next-date,
.wbn-widget .wbn-form--done .wbn-notice,
.wbn-widget .wbn-form--done .wbn-hp,
.wbn-widget .wbn-form--done .wbn-noscript {
    display: none;
}

/* Honeypot: für Menschen unsichtbar (nicht display:none – manche Bots erkennen das) */
.wbn-widget .wbn-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Kleingedrucktes */
.wbn-widget .wbn-editor-note,
.wbn-widget .wbn-noscript {
    margin: 0;
    color: #666666;
    font-size: 13px;
}

/* Hinweisbox im Elementor-Editor */
.wbn-widget .wbn-editor-hint {
    padding: 12px 16px;
    color: #50575e;
    background: #fff8e5;
    border: 1px solid #f0c33c;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}

/* Mobil: inline eingebundene Formulare bekommen automatisch seitlichen Abstand,
   damit die Felder nicht am Bildschirmrand kleben. In Elementor-Popups NICHT
   nötig – dort liefert das Popup-Template bereits Innenabstand → zurücksetzen,
   damit es nicht doppelt wird. Tunbar über die Variable --wbn-edge. */
@media (max-width: 767px) {
    .wbn-widget {
        padding-left: var(--wbn-edge, 16px);
        padding-right: var(--wbn-edge, 16px);
    }
    .elementor-popup-modal .wbn-widget {
        padding-left: 0;
        padding-right: 0;
    }
}