/**
 * Divi Bit Form Integration – Basis-Stile.
 *
 * Aktiviert über eine Wrapper-Klasse (dbf-style-outlined, dbf-style-filled,
 * dbf-style-minimal, dbf-style-pill). Normalisiert Browser-Defaults aller
 * Eingabetypen (Text, E-Mail, Telefon, Datum, Select, Textarea) und des
 * Senden-Buttons zu einer konsistenten Grundoptik.
 *
 * KASKADEN-VERTRAG (wichtig, hier steckt die eigentliche Logik):
 *
 * Bit Form markiert in seinem Default-Stylesheet nahezu jede relevante
 * Feld-Eigenschaft mit `!important` (siehe BitformDefaultStyle.php, Block
 * `.bf-fld`: background-color, border-*, padding, margin, font-*, color,
 * width, outline, line-height). Ohne `!important` verliert die Basis
 * deshalb unabhängig von der Spezifität - genau das war der Grund, warum
 * "Outlined" praktisch wirkungslos blieb.
 *
 * Die Basis nutzt daher ebenfalls `!important`. Damit Divi-Werte trotzdem
 * immer gewinnen, entscheidet die Spezifität zwischen den `!important`-
 * Deklarationen:
 *
 *   Bit Form   ca. (1,1,0)  -> verliert
 *   BASIS      ca. (1,2,1)  -> gewinnt gegen Bit Form
 *   Divi-Feld  ca. (1,8,1)  -> gewinnt gegen die Basis
 *   Divi-Button    (1,3,0)  -> gewinnt gegen Basis-Button (1,2,0)
 *
 * Deshalb:
 * - Prefix ist NUR die Stil-Klasse + `:not(#dbf)` (ID-Ebene, 1 Klasse),
 *   bewusst OHNE zusätzliches `.dbf-wrapper` (spart eine Klasse).
 * - Die Typ-Ausschlüsse stehen in `:where()` - das zählt 0 zur Spezifität.
 * Wer hier Selektoren ändert, muss diese Reihenfolge einhalten.
 */

/* ---------- Gemeinsame Normalisierung (alle Basis-Stile) ---------- */

[class*="dbf-style-"]:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"])) {
	appearance: none !important;
	-webkit-appearance: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 46px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: inherit !important;
	background-color: #ffffff !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: #c8cdd6 !important;
	border-radius: 6px !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

[class*="dbf-style-"]:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}

[class*="dbf-style-"]:not(#dbf) :is(textarea.bf-field, textarea.fld) {
	min-height: 120px !important;
	resize: vertical !important;
}

/* Selects: nativen Pfeil ersetzen, damit sie wie Inputs aussehen */
[class*="dbf-style-"]:not(#dbf) :is(select.bf-field, select.fld) {
	background-image: url("data:image/svg+xml;charset=utf8,%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='%23667085' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
	padding-right: 40px !important;
}

/* Telefonfeld: sitzt in einem Flex-Container neben der Länderauswahl */
[class*="dbf-style-"]:not(#dbf) input.bf-phone-number-input {
	width: auto !important;
	flex: 1 1 auto !important;
}

/* Senden-/Step-Buttons (bewusst eine Klasse weniger als Divis Selektor) */
[class*="dbf-style-"]:not(#dbf) :is(.bf-button, .btcd-sub-btn) {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 46px !important;
	padding: 12px 28px !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: #ffffff !important;
	background-color: #1f2937 !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

[class*="dbf-style-"]:not(#dbf) :is(.bf-button, .btcd-sub-btn):hover {
	background-color: #111827 !important;
}

/* ---------- Variante: Outlined ---------- */
/* Outlined IST die Normalisierung – keine zusätzlichen Regeln nötig. */

/* ---------- Variante: Filled ---------- */

.dbf-style-filled:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"])) {
	background-color: #f2f4f7 !important;
	border-color: transparent !important;
}

.dbf-style-filled:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):focus {
	background-color: #ffffff !important;
	border-color: #3b82f6 !important;
}

/* ---------- Variante: Minimal ---------- */

.dbf-style-minimal:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"])) {
	background-color: transparent !important;
	border-width: 0 0 2px !important;
	border-radius: 0 !important;
	padding-left: 2px !important;
	padding-right: 2px !important;
}

.dbf-style-minimal:not(#dbf) :is(select.bf-field, select.fld) {
	padding-right: 36px !important;
	background-position: right 8px center !important;
}

.dbf-style-minimal:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):focus {
	box-shadow: none !important;
	border-color: #3b82f6 !important;
}

.dbf-style-minimal:not(#dbf) :is(.bf-button, .btcd-sub-btn) {
	border-radius: 0 !important;
}

/* ---------- Variante: Soft ---------- */

.dbf-style-soft:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"])) {
	background-color: #f8fafc !important;
	border-color: #e2e8f0 !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
}

.dbf-style-soft:not(#dbf) :is(.bf-button, .btcd-sub-btn) {
	border-radius: 10px !important;
}

/* ---------- Variante: Bold ---------- */

.dbf-style-bold:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"])) {
	border-width: 2px !important;
	border-color: #1f2937 !important;
	border-radius: 2px !important;
	font-weight: 500 !important;
}

.dbf-style-bold:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):focus {
	border-color: #1f2937 !important;
	box-shadow: 3px 3px 0 0 #1f2937 !important;
}

.dbf-style-bold:not(#dbf) :is(.bf-button, .btcd-sub-btn) {
	border-radius: 2px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

/* ---------- Variante: Elevated ---------- */

.dbf-style-elevated:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"])) {
	border-color: transparent !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.06) !important;
}

.dbf-style-elevated:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, textarea.bf-field, textarea.fld, select.bf-field, select.fld):focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18), 0 4px 12px rgba(16, 24, 40, 0.08) !important;
}

.dbf-style-elevated:not(#dbf) :is(.bf-button, .btcd-sub-btn) {
	border-radius: 8px !important;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18) !important;
}

/* ---------- Variante: Abgerundet (Pill) ---------- */

.dbf-style-pill:not(#dbf)
	:is(input.bf-field, input.fld, input.bf-phone-number-input, select.bf-field, select.fld):where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="hidden"])) {
	border-radius: 999px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

.dbf-style-pill:not(#dbf) :is(select.bf-field, select.fld) {
	padding-right: 44px !important;
	background-position: right 18px center !important;
}

.dbf-style-pill:not(#dbf) :is(textarea.bf-field, textarea.fld) {
	border-radius: 20px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

.dbf-style-pill:not(#dbf) :is(.bf-button, .btcd-sub-btn) {
	border-radius: 999px !important;
}