/**
 * Datei: custom-fields.css
 * Modul: Listings (Custom Fields)
 * Autor: MARKS MEDIA
 *
 * Zweck:
 *   Styling für dynamisch geladene Custom Fields
 *   (Textfelder, Auswahllisten, Zahlen, Checkboxgruppen, Schieberegler)
 *   sowie für die Frontend-Tabelle in der Einzelansicht.
 */

/* ============================================================
   Allgemeines Layout
============================================================ */
.mp-cf-group {
	margin-bottom: 5px;
}

.mp-cf-group h5 {
	margin-bottom: 10px;
}

/* ============================================================
   Eingabeelemente (Backend)
============================================================ */
.mp-cf-field {
	margin-bottom: 14px;
}

.mp-cf-field label {
	display: block;
	margin-bottom: 5px;
}

/* Eingabefelder modernisiert */
.mp-cf-field input[type="text"],
.mp-cf-field input[type="number"],
.mp-cf-field select,
.mp-cf-field textarea {
	width: 100%;
	padding: 8px 4px;
	font-size: 14px;
	box-sizing: border-box;
	border: none;
	border-bottom: 2px solid var(--color-6);
	border-radius: 0;
	background: transparent;
	outline: none;
	transition: border-color 0.2s ease;
}

.mp-cf-field input[type="text"]:focus,
.mp-cf-field input[type="number"]:focus,
.mp-cf-field select:focus,
.mp-cf-field textarea:focus {
	border-bottom-color: var(--color-1);
}

/* ============================================================
   Checkbox- und Radio-Gruppen
============================================================ */
.mp-cf-field label.mp-cf-checkbox {
	display: block;
	margin-bottom: 6px;
	cursor: pointer;
	white-space: normal;
}

.mp-cf-field label.mp-cf-checkbox input[type="checkbox"],
.mp-cf-field label.mp-cf-checkbox input[type="radio"] {
	margin-right: 8px;
	width: auto;
	height: auto;
	transform: scale(1.05);
	accent-color: #fff;
	cursor: pointer;
	vertical-align: middle;
}

/* ============================================================
   Range-Slider
============================================================ */
.mp-cf-field input[type="range"] {
	accent-color: var(--color-1);
	cursor: pointer;
	width: 100%;
}

.mp-cf-range-value {
	display: inline-block;
	margin-left: 8px;
	font-size: 13px;
	vertical-align: middle;
}

/* ============================================================
   Custom Fields Tabelle – Frontend (vereinheitlichtes Grid)
============================================================ */
.mp-cf-table {
	display: grid;
	grid-template-columns: max-content 1fr max-content 1fr;
	width: 100%;
	column-gap: 15px;
}

.mp-cf-row {
	display: contents;
}

/* Label-Zellen */
.mp-cf-label {
	text-align: left;
	font-weight: 600;
	padding: 6px 8px 6px 0;
	white-space: nowrap;
	border-bottom: 1px solid var(--color-6);
}

/* Werte-Zellen */
.mp-cf-value {
	text-align: right;
	padding: 6px 8px;
	line-height: 1.4;
	word-break: break-word;
	border-bottom: 1px solid var(--color-6);
}

/* ============================================================
   Letzte Zeile ohne Rahmen
============================================================ */
.mp-cf-table > :nth-last-child(-n+4) {
	border-bottom: none;
}

/* ============================================================
   Tablet und kleiner: nur 2 Spalten (Label | Wert)
============================================================ */
@media (max-width: 991px) {
	.mp-cf-table {
		grid-template-columns: max-content 1fr;
	}
}