/* Единый вид ошибок ввода (см. includes/calc-errors.js). */

/* Подсветка проблемного поля. !important — базовые классы полей приходят из Tailwind
   (border-gray-300 и focus:border-blue-500), и без него они перебивают красную рамку. */
input.cl-err,
select.cl-err,
textarea.cl-err,
.cl-err > input {
	border-color: #ef4444 !important;
	background-color: #fef2f2 !important;
	box-shadow: 0 0 0 2px rgba(239, 68, 68, .15) !important;
}
input.cl-err:focus,
select.cl-err:focus,
textarea.cl-err:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .25) !important;
}

/* Короткое объяснение под полем. */
.cl-err-msg {
	display: flex;
	align-items: flex-start;
	gap: .3rem;
	margin: .25rem 0 .1rem;
	font: 400 11.5px/1.35 Arial, Helvetica, sans-serif;
	color: #b91c1c;
}
.cl-err-msg::before {
	content: '!';
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	margin-top: .5px;
	font: 700 10px/1 Arial, sans-serif;
	color: #fff;
	background: #ef4444;
	border-radius: 50%;
}

/* Сводка на месте результата. */
.cl-err-summary {
	padding: .85rem 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: .5rem;
	font-family: Arial, Helvetica, sans-serif;
}
.cl-err-summary-head {
	margin-bottom: .35rem;
	font-size: 14px;
	font-weight: 700;
	color: #b91c1c;
}
.cl-err-summary-list {
	margin: 0 0 .6rem;
	padding-left: 1.1rem;
	font-size: 13px;
	line-height: 1.5;
	color: #7f1d1d;
}
.cl-err-summary-list li { margin: 0; }
.cl-err-summary-go {
	padding: .35rem .7rem;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: #ef4444;
	border: 0;
	border-radius: .4rem;
	cursor: pointer;
}
.cl-err-summary-go:hover { background: #dc2626; }

@media print {
	.cl-err-summary-go { display: none; }
}