:root {
	/* 🎨 Barvy */
	--form-border-color: #52433D;
	--form-border-focus-color: #947962;
	--form-bg-color: #ffffff0d;
	--form-text-color: white;
	--form-placeholder-color: #888;
	--form-label-color: #FFD5A5;
	--form-button-bg: var(--form-border-focus-color);
	--form-button-hover-bg: #3C251A;
	--form-checkbox-bg: #f8f9fa;
	--form-radio-bg: #f8f9fa;

	/* 📏 Rozměry */
	--form-padding: 10px;
	--form-margin: 10px;
	--form-border-radius: 0px;
	--form-label-font-size: 14px;
	--form-input-padding: 8px;
	--form-input-height: 36px;
	--form-textarea-height: calc(var(--form-input-height) * 3);
	--form-gap: 15px;
	--form-group-gap: 5px;
	--form-checkbox-size: 18px;
	--form-radio-size: 18px;

	/* 🏗️ Grid */
	--form-grid-columns: 1; /* Výchozí počet sloupců */
	--form-grid-gap: 10px;

	/* 🔤 Fonty */
	--form-font-family: Arial, sans-serif;
	--form-font-size: 16px;
	--form-button-font-size: var(--form-font-size);
}

/* 🔄 Reset stylů formulářových prvků */
input, textarea, select, button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	outline: none;
	font-family: var(--form-font-family);
	font-size: var(--form-font-size);
	box-sizing: border-box;
	color: var(--form-text-color);
	background-color: var(--form-bg-color);
}

/* Resetuje výchozí margin a padding */
form, fieldset, legend, label {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Reset pro button */

/* 🏗️ Styl formuláře */
form {
	display: grid;
	gap: var(--form-gap);
}

/* 🏗️ Formulářová skupina podporující sloupce */
.form-group{
	display: grid;
	grid-template-columns: repeat(var(--form-grid-columns), 1fr);
	gap: var(--form-grid-gap);
}

/* 🎯 Možnost jednotlivým prvkům nastavit rozpětí sloupců */
.formRow {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 5px;
	grid-column: span var(--form-field-span-column, 1);
	grid-row: span var(--form-field-span-row, 1);
}

/* 🏷️ Styl pro label */
label {
	font-size: var(--form-label-font-size);
	color: var(--form-label-color);
	display: block;
}

/* 📑 Obecný styl pro inputy, selecty a textarea */
input, textarea, select {
	display: block;
	width: 100%;
	padding: var(--form-input-padding);
	border: 2px solid var(--form-border-color);
	border-radius: var(--form-border-radius);
	transition: all 0.3s ease-in-out;
}

/* 🔽 Select a běžné inputy mají stejnou výšku */
input, select {
	height: var(--form-input-height);
}

/* 🟡 Výchozí barva textu v selectu */
select {
	height: var(--form-input-height);
	padding: var(--form-input-padding);
	color: var(--form-text-color);
}

/* 🔘 Select, který má placeholder (hodnota je prázdná) */
select.is-placeholder {
	color: var(--form-placeholder-color);
}

/* 🔘 Fix pro správné zobrazení první možnosti jako placeholder */
select option[value=""] {
	color: var(--form-placeholder-color);
}

/* 📝 Textarea je vyšší */
textarea {
	height: var(--form-textarea-height);
	resize: vertical;
}

/* 🎨 Placeholder */
::placeholder {
	color: var(--form-placeholder-color);
	font-family: var(--form-font-family);
}

/* 🔍 Fokus efekt */
input:focus, textarea:focus, select:focus {
	border-color: var(--form-border-focus-color);
	outline: none;
}

/* 🏁 Styl pro tlačítka */
button, input[type="submit"] {
	background-color: var(--form-button-bg);
	color: white;
	border-radius: var(--form-border-radius);
	padding: var(--form-input-padding) 15px;
	font-size: var(--form-button-font-size);
	transition: background-color 0.3s ease-in-out;
}

button:hover, input[type="submit"]:hover {
	background-color: var(--form-button-hover-bg);
}

/* 🔲 Styl pro checkbox */
input[type="checkbox"] {
	width: var(--form-checkbox-size);
	height: var(--form-checkbox-size);
	background-color: var(--form-checkbox-bg);
	border: 1px solid var(--form-border-color);
	border-radius: 3px;
	display: inline-block;
	vertical-align: middle;
}

/* ⭕ Styl pro radio */
input[type="radio"] {
	width: var(--form-radio-size);
	height: var(--form-radio-size);
	background-color: var(--form-radio-bg);
	border: 1px solid var(--form-border-color);
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
}

/* 🏷️ Checkboxy a rádio tlačítka mají jiný layout */
.formRow.checkboxRow, .formRow.radioRow {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

/* ✅ Checkbox styl při zaškrtnutí */
input[type="checkbox"]:checked {
	background-color: var(--form-border-focus-color);
}

/* 🔘 Radio styl při výběru */
input[type="radio"]:checked {
	background-color: var(--form-border-focus-color);
	border-color: var(--form-border-focus-color);
}

.formField[data-type="checkbox"]{
	display: grid;
	grid-template-columns: var(--form-checkbox-size) 1fr;
	gap: var(--form-grid-gap);
}
.fill-error :is(input, textarea, select){
	border-color: #140000 !important;
}
.error-message{
	color: #9c0404;
	font-size: 12px;
	display: block;
}

.image-picker-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	flex-direction: column;
}

.image-preview img {
	width: 160px;
	height: 160px;
	object-fit: contain;
	border: 1px solid #444;
}

.image-preview .no-image {
	display: inline-block;
	width: 160px;
	height: 160px;
	background: #2a2a2a;
	color: #999;
	font-size: 11px;
	text-align: center;
	line-height: 64px;
	border: 1px dashed #555;
}


/* 🎨 Styl skupiny pro image-radio */
.image-radio-group {
	display: flex;
	gap: 6px;
	padding: 6px;
	flex-wrap: wrap;
	max-height: 200px;
	overflow: auto;
}

/* 🖼️ Jednotlivá možnost s obrázkem */
.image-radio-option {
	transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
	position: relative;
}
.image-radio-option.disabled{
	filter: saturate(20%) opacity(.5);
}
.image-radio-backg img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.image-radio-backg{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	box-sizing: border-box;
	transition: all .1s ease-in-out;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0);
	border: 2px solid #27160e;
	background-image: linear-gradient(161deg, #00000021, #0000009c);
}

/* 🌟 Zvýraznění vybrané možnosti */
.image-radio-option.selected .image-radio-backg {
	border-color: var(--form-border-focus-color);
}
.image-radio-option.selected .image-radio-backg img, .image-radio-option:not(.disabled):hover .image-radio-backg img{
	transform: scale(1);
}

.image-radio-option.selected .image-radio-backg {
	border: 2px solid #9de9f8;
	box-shadow: 0 0 6px 2px #9de9f8
}
.image-radio-option:not(.disabled):hover .image-radio-backg, .image-radio-option.selected .image-radio-backg {
	background-color: rgba(255, 255, 255, 0.09);
}

/* 🏷️ Zobrazit názvy pod obrázky, pokud je aktivní .with-labels */
.image-radio-group.with-labels .image-radio-option {
	height: 84px; /* výška o něco vyšší kvůli místu na text */
	padding-bottom: 20px;
}

.image-radio-group [data-with-labels] ~ .image-radio-option .image-radio-label {
	display: flex;
	text-align: center;
	color: var(--form-text-color);
	font-size: 14px;
	margin-top: 4px;
	justify-content: center;
}

.image-radio-option .image-radio-label {
	display: none; /* ve výchozím stavu se nezobrazuje */
}

.formField[data-type="submit"]{
	display: flex;
	justify-content: center;
}


fieldset legend{
	font-weight: bold;
	font-size: 18px;
}
fieldset{
	background-color: #0000002e;
	padding: 13px;
	border: 1px solid;
	border-radius: 5px;
	position: relative;
}
fieldset .section-controls{
	position: absolute;
	top: -12px;
	right: -1px;
}