/* ==========================================================================
   Formular Block - Block-Editor Styles
   ========================================================================== */

/* Editor-spezifische Styles (Ergänzung zu style.css)
   ========================================================================== */

.wp-block[data-type="acf/formular"] {
    max-width: 100%;
}

/* Platzhalter-Ansicht im Editor
   ========================================================================== */
.formular-block-placeholder {
    padding: 3em;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.formular-block-placeholder p {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
}

/* Vorschau im Editor
   ========================================================================== */
.editor-styles-wrapper .formular-block {
    margin: 2em 0;
}

.editor-styles-wrapper .formular-titel {
    margin-bottom: 1em;
}

.editor-styles-wrapper .formular-beschreibung {
    margin-bottom: 2em;
}

/* Formular-Felder im Editor sichtbarer machen
   ========================================================================== */
.editor-styles-wrapper .formular-input,
.editor-styles-wrapper textarea.formular-input,
.editor-styles-wrapper select.formular-input {
    background-color: #f8f9fa;
}

.editor-styles-wrapper .formular-button {
    pointer-events: none;
}

/* ==========================================================================
   Floating Label Styles für Formularfeld-Blöcke im Editor
   ========================================================================== */

.formular-field-wrapper-preview {
    margin: 1em 0;
    width: 100%;
}

/* Floating Label Container */
body .floating-label-group {
    position: relative;
    margin-bottom: 1.5em;
}

/* Input/Textarea/Select Styles */
body .floating-input {
    width: 100%;
    padding: 1.25em 0.75em 0.5em;
    font-size: 1em;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: none;
    border-bottom: 2px solid #dee2e6;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

body .floating-input:focus {
    border-bottom-color: #3498db;
    box-shadow: 0 1px 0 0 #3498db;
}

/* Floating Label */
body .floating-label {
    position: absolute;
    top: 1em;
    left: 0.75em;
    font-size: 1em;
    color: #6c757d;
    pointer-events: none;
    transition: all 0.2s ease;
    transform-origin: left top;
}

/* Label schwebt wenn: Input fokussiert ODER Input hat Wert (placeholder hack mit + Selektor) */
body .floating-input:focus + .floating-label,
body .floating-input:not(:placeholder-shown) + .floating-label {
    top: 0.25em;
    font-size: 0.75em;
    color: #3498db;
    font-weight: 600;
}

/* Select hat immer einen Wert, also Label immer oben */
body select.floating-input + .floating-label {
    top: 0.25em;
    font-size: 0.75em;
    color: #6c757d;
    font-weight: 600;
}

body select.floating-input:focus + .floating-label {
    color: #3498db;
}

/* Textarea spezifisch */
body textarea.floating-input {
    resize: vertical;
    min-height: 100px;
}

/* File Input */
.file-input {
    padding-top: 1.5em;
    cursor: pointer;
}

/* Required Mark */
.required-mark {
    color: #e74c3c;
    margin-left: 0.25em;
}

/* Field Hint */
.field-hint {
    margin-top: 0.5em;
    font-size: 0.875em;
    color: #6c757d;
}

/* Field Warning */
.field-warning {
    margin-top: 0.75em;
    padding: 0.75em;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
    font-size: 0.875em;
    border-radius: 0 4px 4px 0;
}

/* Options Group (Radio/Checkbox) */
.options-group-preview {
    margin-bottom: 1.5em;
}

.options-label {
    margin-bottom: 0.75em;
    font-size: 0.875em;
    font-weight: 600;
    color: var(--wp--preset--color--foreground, #212529);
}

.option-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
}

/* Option Item Control Wrapper (für Input und optionales Bild) */
.option-item-control {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-right: 0.5em;
}

/* Option Item Image */
.option-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-item-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.option-item input[type="radio"],
.option-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.option-item input[type=radio]:checked::before {
    content: none;
}

.option-item label {
    margin: 0;
    font-size: 1em;
    color: inherit; /* Erbt Farbe vom Elternelement */
    cursor: pointer;
    flex: 1;
}

/* Spezielle Styles wenn Bilder vorhanden (im Editor) */
.options-items.has-images .option-item {
    align-items: flex-start;
}

.options-items.has-images .option-item-control {
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
}

.options-items.has-images .option-item-image {
    margin-bottom: 0.25em;
}

/* Horizontale Anordnung */
.options-group-preview.layout-horizontal,
.options-group.layout-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.options-group-preview.layout-horizontal .options-label,
.options-group.layout-horizontal .options-label {
    width: 100%;
    margin-bottom: 0.5em;
}

.options-group-preview.layout-horizontal .option-item,
.options-group.layout-horizontal .option-item {
    margin-bottom: 0;
    margin-right: 0;
}

/* Vertikale Anordnung (Standard) */
.options-group-preview.layout-vertical,
.options-group.layout-vertical {
    display: flex;
    flex-direction: column;
}

/* Hover-Effekte */
body .floating-input:hover {
    border-bottom-color: #adb5bd;
}

/* Error States */
body .floating-input.error {
    border-bottom-color: #e74c3c;
}

body .floating-input.error ~ .floating-label,
body .floating-input.error + .floating-label {
    color: #e74c3c;
}

.acf-field p.description {
    display: block;
    margin-top: 0.2em;
    color: #667085;
    font-size: 0.7em !important;
    line-height: 1.1 !important;
}

.acf-repeater .acf-row-handle.order {
    background: #f4f4f4;
    cursor: move;
    color: #aaa;
    text-shadow: #fff 0 1px 0;
    vertical-align: top !important;
}

.acf-repeater .acf-row-handle.order span.acf-row-number {
    background: #fff;
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    border-radius: 1em;
    border: 1px solid;
    text-align: center;
}

body input[type=radio]:checked::before {
    content: none !important;
}