/* webdebug:reviews2.add — feedback template */

.wdr2_add { font-family: inherit; }
.wdr2_add form { margin: 0; padding: 0; }
.wdr2_add hr { background: #eee; border: 0; height: 1px; margin: 0 0 12px; }
.wdr2_add .form_title { font-size: 20px; line-height: 1.4; margin-bottom: 10px; }

/* блок результата/ошибки */
.wdr2_add .wdr2_result { margin-bottom: 16px; }
.wdr2_add .wdr2_result ul { margin: 0; padding: 0 0 0 21px; }
.wdr2_add .wdr2_result:empty { display: none; }
.wdr2_add .wdr2_error,
.wdr2_add .wdr2_error .errortext { color: var(--opdev-danger); }
.wdr2_add .wdr2_error {
	padding: 10px 12px;
	background: rgba(255, 91, 58, 0.08);
	border: 1px solid var(--opdev-danger);
	border-radius: 4px;
}
.wdr2_add .wdr2_success {
	color: var(--opdev-primary);
	font-weight: 600;
	margin-bottom: 20px;
}

/* ratings (звёзды) */
.wdr2_add .ratings { font-size: 12px; margin: 0 0 12px; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; transition: border-color 0.2s ease; }
.wdr2_add .ratings table { background: transparent; border: 0; }
.wdr2_add .ratings table td { background: transparent !important; border: 0 !important; padding: 1px 6px 1px 0; }
.wdr2_add .ratings table td.rating_title { text-align: right; vertical-align: top; }
.wdr2_add .ratings table td.rating_value { text-align: left; vertical-align: middle; }
.wdr2_add .ratings.ratings--error { border-color: var(--opdev-danger); }
.wdr2_add .ratings__error { display: none; color: var(--opdev-danger); font-size: 12px; line-height: 1.3; margin-top: 6px; }
.wdr2_add .ratings.ratings--error .ratings__error { display: block; }
.wdr2_add .ratings.ratings--shake { animation: wdr2-shake 0.45s cubic-bezier(.36, .07, .19, .97) both; }

/* поля */
.wdr2_add .fields .field { margin: 0 0 16px; max-width: 420px; }
.wdr2_add .fields .field label { display: block; font-size: 14px; color: var(--opdev-gray-800); }
.wdr2_add .fields .field label .required { color: var(--opdev-danger); margin-left: 2px; }
.wdr2_add .fields .field .input { margin-top: 7px; }

/* сообщение об ошибке под полем */
.wdr2_add .field__error,
.wdr2_add .agreement__error {
	display: none;
	color: var(--opdev-danger);
	font-size: 12px;
	line-height: 1.3;
	margin-top: 6px;
}
.wdr2_add .field.field--error .field__error { display: block; }
.wdr2_add .agreement.agreement--error .agreement__error { display: block; }

.wdr2_add .fields .field .input input[type=text],
.wdr2_add .fields .field .input input[type=email],
.wdr2_add .fields .field .input input[type=tel],
.wdr2_add .fields .field .input textarea,
.wdr2_add .fields .field .input select {
	width: 100%;
	padding: 10px;
	background: var(--opdev-white);
	border: 1px solid var(--opdev-gray-400);
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	color: var(--opdev-gray-600);
	box-sizing: border-box;
	outline: 0;
	font-family: inherit;
	transition: border-color 0.2s ease;
}
.wdr2_add .fields .field .input input::placeholder,
.wdr2_add .fields .field .input textarea::placeholder {
	color: var(--opdev-gray-400);
	font-size: 14px;
	font-weight: 400;
}
.wdr2_add .fields .field .input textarea { min-height: 80px; resize: vertical; line-height: 1.4; }
.wdr2_add .fields .field .input select { height: auto; }

/* состояние ошибки */
.wdr2_add .fields .field.field--error .input input[type=text],
.wdr2_add .fields .field.field--error .input input[type=email],
.wdr2_add .fields .field.field--error .input input[type=tel],
.wdr2_add .fields .field.field--error .input textarea,
.wdr2_add .fields .field.field--error .input select {
	border-color: var(--opdev-danger);
}
.wdr2_add .agreement.agreement--error { color: var(--opdev-danger); }
.wdr2_add .agreement.agreement--error input[type=checkbox] {
	outline: 2px solid var(--opdev-danger);
	outline-offset: 2px;
}

/* shake-анимация */
@keyframes wdr2-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}
.wdr2_add .field.field--shake,
.wdr2_add .agreement.agreement--shake {
	animation: wdr2-shake 0.45s cubic-bezier(.36, .07, .19, .97) both;
}

/* капча */
.wdr2_add .wdr2_captcha .input { margin-top: 7px; }
.wdr2_add .wdr2_captcha__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.wdr2_add .wdr2_captcha__input {
	width: 140px;
	max-width: 100%;
	flex: 0 0 auto;
}
.wdr2_add .wdr2_captcha__img { display: inline-flex; align-items: center; }
.wdr2_add .wdr2_captcha__img img { max-width: 100%; height: auto; display: block; }
.wdr2_add .wdr2_captcha__reload {
	white-space: nowrap;
	color: var(--opdev-primary);
	text-decoration: underline;
}
.wdr2_add .wdr2_captcha__reload:hover { text-decoration: none; }

/* согласие на ПД */
.wdr2_add .agreement {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	max-width: 640px;
	font-size: 14px;
	color: var(--opdev-gray-800);
}
.wdr2_add .agreement input[type=checkbox] {
	margin: 4px 0 0;
	width: 16px;
	height: 16px;
	accent-color: var(--opdev-primary);
	flex: 0 0 auto;
}
.wdr2_add .agreement label { display: inline; font-weight: 400; line-height: 1.4; flex: 1 1 auto; }
.wdr2_add .agreement__error { flex-basis: 100%; margin-top: 4px; }

/* антибот */
.wdr2_add .wdr2_reqfield { display: none; }

/* кнопка submit */
.wdr2_add .submit { margin-top: 20px; }
.wdr2_add .submit input[type=submit] {
	background: var(--opdev-primary);
	color: var(--opdev-white);
	padding: 10px 24px;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.wdr2_add .submit input[type=submit]:hover { background: var(--opdev-primary); opacity: 0.92; }
.wdr2_add .submit input[type=submit][disabled] { opacity: 0.5; cursor: not-allowed; }

/* кнопка раскрытия формы отзыва (MINIMIZE_FORM) — вторичное действие, поэтому контурная,
   а не сплошная заливка (см. сабмит формы .button-primary — тот залит). Цвет из темы:
   fe=красный, ve=бирюзовый через var(--opdev-primary). */
.wdr2_add .add_btn {
	display: inline-block;
	background: transparent;
	color: var(--opdev-primary);
	border: 1px solid var(--opdev-primary);
	padding: 7px 16px;
	border-radius: 3px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wdr2_add .add_btn:hover { background: var(--opdev-primary); color: var(--opdev-white); }