/* =============================================
   02_UI_COMPONENTS / ui-input
   Текстовый ввод, контейнер с лейблом, пароль.
   ============================================= */

.input {
	border-radius: 45px;
	width: 100%;
	display: block;
	border: 2px solid transparent;
	caret-color: inherit;
	font-size: 16px;
	line-height: 125%; /* 20/16 */
	padding: 11px 26px;
	background-color: var(--whiteColor);
	font-weight: 300;
	outline: none;
	transition: box-shadow 0.3s, border-color 0.3s;
}
.input[disabled] {
	pointer-events: none;
	color: #e3e3e3;
}
.input[disabled][placeholder]:not([data-fls-placeholder-nohiden])::placeholder {
	color: #e3e3e3;
}
.input.--form-focus {
	border-color: rgba(7, 158, 108, 0.2);
}
.input.--form-error {
	border-color: rgba(254, 81, 81, 0.4);
}
.input.--form-error.--form-focus {
	border-color: rgba(7, 158, 108, 0.2);
}
.input[placeholder]:not([data-fls-placeholder-nohiden])::placeholder {
	transition: opacity 0.3s;
	color: var(--greenColor5);
}
.input[placeholder]:not([data-fls-placeholder-nohiden]):focus::placeholder {
	opacity: 0;
}
textarea.input {
	resize: vertical;
	padding: 0px 0px;
}

/* ── Контейнер с лейблом ── */

.inputcont {
	position: relative;
}
.inputcont__top {
	display: block;
	font-size: 14px;
	line-height: 121.428571%; /* 17/14 */
}
.inputcont__top:not(:last-child) {
	margin-bottom: 10px;
}
.inputcont--white .inputcont__top {
	color: var(--whiteColor);
}
.inputcont.inputcont--success {
	position: relative;
}
.inputcont.inputcont--success::after {
	position: absolute;
	content: "Подтвержден";
	right: 28px;
	color: var(--greenColor4);
}
.inputcont [data-fls-form-error] {
	position: absolute;
	right: 0;
	top: 0;
}

/* ── Ошибки валидации ── */

[data-fls-form-error] {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--redColor);
	font-size: 12px;
	line-height: 200%; /* 24/12 */
	font-weight: 300;
}
[data-fls-form-error]::after {
	content: "\f101";
	font-family: iconfont;
	font-size: 24px;
	line-height: 1;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ── Показать пароль ── */

[data-fls-input-viewpass] {
	width: 18px;
	height: 18px;
	position: absolute;
	bottom: 14px;
	right: 28px;
	font-size: 16px;
	color: var(--greenColor5);
	transition: color 0.3s;
}
[data-fls-input-viewpass]::before {
	content: "\f109";
	font-family: iconfont;
}
[data-fls-input-viewpass].--viewpass-active::before {
	content: "\f10a";
}

/* ── Responsive ── */

@media (max-width: 63.99875em) {
	.inputcont.inputcont--success::after {
		font-size: 10px;
		line-height: 120%;
		padding-right: 20px;
		padding-top: 2px;
		padding-bottom: 2px;
		background: url("../../assets/img/check-circle.svg") top 0 right 0/16px 16px no-repeat;
		bottom: 14px;
	}
}
@media (min-width: 63.99875em) {
	.inputcont.inputcont--success::after {
		background: url("../../assets/img/check-circle.svg") top 0 right 0/24px 24px no-repeat;
		font-size: 12px;
		line-height: 116.666667%;
		padding-right: 34px;
		padding-top: 5px;
		padding-bottom: 5px;
		bottom: 10px;
	}
}

/* ── Hover ── */

@media (any-hover: hover), (pointer: fine) {
	html:not([data-fls-touch]) .input:hover {
		box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.1019607843);
	}
	html:not([data-fls-touch]) [data-fls-input-viewpass]:hover {
		color: var(--greenColor4);
	}
}