:root {
	--esco_ui_radius: 8px;
	--esco_ui_height: 40px;
	--esco_ui_pad: 12px;
	--esco_ui_font: 13px;
	--esco_ui_line: 1.5;
	--esco_ui_border: #ddd;
	--esco_ui_border_strong: #111;
	--esco_ui_bg: #fff;
	--esco_ui_text: #111;
	--esco_ui_muted: #888;
	--esco_ui_soft: #ecece8;
	--esco_ui_width: 420px;
	--esco_ui_width_narrow: 140px;
}

.esco_ui_label {
	display: block;
	font-size: var(--esco_ui_font);
	font-weight: 600;
	line-height: var(--esco_ui_line);
	color: #222;
}

.esco_ui_hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--esco_ui_muted);
}

.esco_ui_group {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: var(--esco_ui_width);
}

.esco_ui_group .esco_ui_input,
.esco_ui_group .esco_ui_select,
.esco_ui_group .esco_ui_textarea {
	flex: 1;
	max-width: none;
}

.esco_ui_input,
.esco_ui_textarea,
.esco_ui_select,
.esco_ui_btn {
	box-sizing: border-box;
	border: 1px solid var(--esco_ui_border);
	border-radius: var(--esco_ui_radius);
	background: var(--esco_ui_bg);
	box-shadow: none;
	color: var(--esco_ui_text);
	font-size: var(--esco_ui_font);
	line-height: var(--esco_ui_line);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

input.esco_ui_input,
input.esco_ui_input[type="text"],
input.esco_ui_input[type="password"],
input.esco_ui_input[type="url"],
input.esco_ui_input[type="email"],
input.esco_ui_input[type="number"],
input.esco_ui_input[type="search"],
input.esco_ui_input[type="tel"],
input.esco_ui_input[type="date"],
input.esco_ui_input[type="time"],
select.esco_ui_select,
button.esco_ui_btn,
a.esco_ui_btn {
	width: 100%;
	max-width: var(--esco_ui_width);
	height: var(--esco_ui_height);
	min-height: var(--esco_ui_height);
	padding: 0 var(--esco_ui_pad);
	margin: 0;
}

textarea.esco_ui_textarea {
	width: 100%;
	max-width: var(--esco_ui_width);
	min-height: 96px;
	padding: 10px var(--esco_ui_pad);
	margin: 0;
	resize: vertical;
}

select.esco_ui_select {
	padding-right: var(--esco_ui_pad);
	padding-left: 32px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 12px center;
}

.esco_ui_input--narrow,
.esco_ui_select--narrow {
	max-width: var(--esco_ui_width_narrow);
}

.esco_ui_input:focus,
.esco_ui_textarea:focus,
.esco_ui_select:focus,
.esco_ui_btn:focus {
	border-color: var(--esco_ui_border_strong);
	box-shadow: 0 0 0 1px var(--esco_ui_border_strong);
	outline: none;
}

.esco_ui_input:disabled,
.esco_ui_textarea:disabled,
.esco_ui_select:disabled,
.esco_ui_btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.esco_ui_btn,
a.esco_ui_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: none;
	border-color: var(--esco_ui_soft);
	color: #161615;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.esco_ui_btn--primary {
	border-color: var(--esco_ui_border_strong);
	background: var(--esco_ui_border_strong);
	color: #fff;
}

.esco_ui_btn--primary:hover,
.esco_ui_btn--primary:focus {
	background: #000;
	color: #fff;
}

.esco_ui_btn--secondary:hover,
.esco_ui_btn--ghost:hover {
	border-color: #bbb;
	color: #111;
}

.esco_ui_btn--block {
	width: 100%;
	max-width: var(--esco_ui_width);
}

.esco_ui_check,
.esco_ui_radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--esco_ui_font);
	line-height: 1.5;
	color: var(--esco_ui_text);
	cursor: pointer;
}

.esco_ui_radio {
	position: relative;
	padding: 6px 10px;
	border: 1px solid var(--esco_ui_soft);
	border-radius: var(--esco_ui_radius);
	background: var(--esco_ui_bg);
}

.esco_ui_radio__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.esco_ui_radio__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border: 1.5px solid #111;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

.esco_ui_radio__mark::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #111;
	opacity: 0;
	transform: scale(0.4);
}

.esco_ui_radio--checked,
.esco_ui_radio:has(.esco_ui_radio__input:checked) {
	border-color: #111;
	background: #111;
	color: #fff;
}

.esco_ui_radio--checked .esco_ui_radio__mark,
.esco_ui_radio:has(.esco_ui_radio__input:checked) .esco_ui_radio__mark {
	border-color: #fff;
	background: #fff;
}

.esco_ui_radio--checked .esco_ui_radio__mark::after,
.esco_ui_radio:has(.esco_ui_radio__input:checked) .esco_ui_radio__mark::after {
	opacity: 1;
	transform: scale(1);
}

.esco_ui_check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	border: 1px solid var(--esco_ui_border);
	border-radius: 4px;
	background: var(--esco_ui_bg);
	box-shadow: none;
	accent-color: #111;
}

body.esco_settings_page .esco_settings .esco_ui_input,
body.esco_settings_page .esco_settings .esco_ui_textarea,
body.esco_settings_page .esco_settings .esco_ui_select,
body.esco_settings_page .esco_settings .esco_ui_btn {
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--esco_ui_radius) !important;
}

@media screen and (max-width: 960px) {
	.esco_ui_input,
	.esco_ui_textarea,
	.esco_ui_select,
	.esco_ui_group,
	.esco_ui_btn--block {
		max-width: none;
	}
}