/*
 * YASPA Form CSS
 * Version: 1.0.1 (Erweitert)
 */

.form-row {
    width: 100%;
}

.bh-form-group {
    /* Fügt Abstand zwischen den Formularfeld-Gruppen hinzu */
    margin-bottom: 15px;
}

.bh-form-label {
    display: block;
    font-weight: 600;
    /* Verwendet die dunkle Textfarbe aus den Core-Variablen */
    color: var(--bh-color-dark);
    margin-bottom: 5px;
    font-size: 0.9rem;
}

/* * NEU: Erweiterter Selektor für alle gängigen Input-Typen,
 * Textareas und Select-Boxen.
 */
.bh-form-input,
input[type="text"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: inherit; /* Sorgt für konsistente Schriftart */
    border-radius: 3px;
    border: 1px solid #666;
    background-color: var(--bh-color-white);
    color: var(--bh-color-dark);
    transition: all 0.3s;
    -webkit-appearance: none; /* Entfernt Standard-Styling in Webkit-Browsern */
    -moz-appearance: none;
    appearance: none;
}

/* Spezifische Anpassung für Select-Boxen, um einen Pfeil hinzuzufügen */
select.bh-form-input {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.25em;
    padding-right: 2.5rem; /* Platz für den Pfeil schaffen */
}


/* Fokus-Effekt für alle Input-Typen */
.bh-form-input:focus,
input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--bh-color-primary);
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.25);
}

/* Stil für Textareas, um die Größe anzupassen */
.bh-form-input.bh-textarea,
textarea.bh-form-input {
    min-height: 120px;
    resize: vertical;
}

.control-label[for="post_content"] {
    vertical-align: top; /* Zwingt das Label, sich am oberen Rand auszurichten */
    padding-top: 5px;    /* Fügt optional einen kleinen Abstand nach oben hinzu */
}
/*
 * ===================================================================
 * Select2 Overwrites
 * ===================================================================
 * Diese Regeln passen die Standard-Stile von Select2 an das
 * Design der .bh-form-input Felder an.
 */

/* --- Hauptcontainer --- */
.select2-container {
    width: 100% !important; /* Überschreibt inline-Stile von JS */
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}

/* --- Auswahlbox (Single & Multiple) --- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1em + 1rem + 4px); /* (font-size * line-height) + (padding * 2) + (border * 2) */
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 3px;
    border: 1px solid #666;
    background-color: var(--bh-color-white);
    transition: all 0.3s;
}

/* Überschreibt die feste Höhe von Select2 */
.select2-container--default .select2-selection--single {
    height: auto;
}

/* --- Fokus-Zustand --- */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    outline: none;
    border-color: var(--bh-color-primary);
    /* HINZUGEFÜGT: Der Box-Schatten für den Fokus-Effekt */
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.25);
}

/* --- Pfeil im Single-Select --- */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(100% - 2px); /* Volle Höhe abzüglich Border */
    top: 1px;
    right: 0.7rem;
    position: absolute;
    width: 20px;
}

/* --- Ausgewählter Text --- */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bh-color-dark);
    line-height: 1.5;
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

/* --- Dropdown-Menü --- */
.select2-dropdown {
    border: 1px solid #666;
    border-radius: 3px;
    background-color: var(--bh-color-white);
}

/* --- Suchfeld im Dropdown --- */
.select2-search--dropdown .select2-search__field {
    border: 1px solid #666;
    border-radius: 3px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
}

/* --- Hervorgehobene Option --- */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bh-color-primary);
    color: var(--bh-color-white);
}

/* --- Ausgewähltes Element im Multi-Select --- */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 5px;
    margin-top: 0.25rem;
}

/* --- Platzhaltertext --- */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #666;
}

/* --- Der Rest des CSS bleibt unverändert --- */

.bh-form-view-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 12px;
    width: 100%;
}

.bh-form-view-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
    line-height: 1.4;
    text-transform: uppercase;
}

.bh-form-view-content {
    font-size: 1em;
    color: #111;
    min-height: 1.5rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bh-form-view-content-bottom {
    font-size: 0.85em;
}

.preset-edit {
    background-color: #1e874b;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

@media (min-width: 768px) {

}