/*
 * Форма отзыва на странице клиники.
 *
 * Форму собирают три источника: ядро WordPress (имя, e-mail, текст, согласие),
 * шаблон темы `woocommerce/single-product-reviews.php` (оценка) и плагин
 * comment-images-reloaded (загрузка фото). Каждый рисует свою разметку, поэтому
 * поля выглядели разнородно: подписи разного цвета, поля разной высоты, файл
 * системной кнопкой, всё в одну колонку на всю ширину.
 *
 * Здесь только оформление — разметка и порядок полей не меняются, чтобы не
 * ломать переходы по Tab и работу плагинов.
 */

/* ── карточка формы ── */

/*
 * Форма уже колонки контента: на всю ширину страницы поля растягивались
 * до тысячи с лишним пикселей, что для короткого имени и e-mail выглядит
 * нелепо и выбивается из остальной вёрстки страницы клиники.
 */
#review_form_wrapper #reply-title,
#review_form_wrapper .revie-form-box {
	box-sizing: border-box; /* 720px — это внешняя ширина карточки, вместе с полями */
	max-width: 720px;
}

#review_form_wrapper .revie-form-box {
	background: #faf7f2;
	border: 1px solid #ece5d8;
	border-radius: 10px;
	padding: 28px 30px 30px;
}

.woocommerce-Reviews #review_form_wrapper #respond {
	padding: 0;
	background: none;
	margin: 0;
}

#reviews .comment-reply-title {
	margin: 50px 0 22px;
}

#review_form_wrapper .comment-notes {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.5;
	color: #8a8178;
}

#review_form_wrapper .comment-notes .required {
	color: #c0392b;
}

/* ── сетка полей ── */

/*
 * В теме у контейнера полей стоит `width:68%; float:left` — остаток ширины
 * занимал блок покритериальных оценок (`.criteria-wrapper`) от плагина
 * itcr-extra-review. Этот блок на страницах клиник не выводится (проверено
 * и на проде, и на локалке), поэтому справа оставалась пустая треть, а поля
 * были вдвое уже карточки. Возвращаем полную ширину.
 */
#review_form_wrapper .comment-form .fields-wrapper {
	width: 100%;
	float: none;
}

#review_form_wrapper .fields-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 22px;
}

/* Оценка, текст отзыва и согласие занимают всю ширину. */
#review_form_wrapper .comment-form-rating,
#review_form_wrapper .comment-form-comment,
#review_form_wrapper .comment-form-cookies-consent {
	grid-column: 1 / -1;
}

/*
 * Ячейку сетки поле занимает целиком. В теме у имени и e-mail стоит
 * `width:48%; float:left; margin-left:4%` — раскладка колонок делалась
 * флоатами. Внутри grid это давало поля вдвое уже ячейки и лишний отступ.
 */
#review_form_wrapper .fields-wrapper > p,
#review_form_wrapper .fields-wrapper > div {
	width: 100%;
	margin: 0;
	float: none;
}

/*
 * Имя и e-mail тема отдельно прибивает к 48% правилом
 * `body.single-product #respond p.comment-form-author{width:48%}` — оно
 * перебивает предыдущий блок по специфичности, поэтому повторяем с тем же
 * весом. Внутри сетки ширину задаёт колонка, проценты тут только мешают.
 */
body.single-product #review_form_wrapper .fields-wrapper > p.comment-form-author,
body.single-product #review_form_wrapper .fields-wrapper > p.comment-form-email,
body.single-product #review_form_wrapper .fields-wrapper > p.comment-form-url {
	width: 100%;
	margin-left: 0;
	float: none;
}

/* ── подписи и поля ── */

#review_form_wrapper .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #5f5850;
	letter-spacing: .01em;
}

#review_form_wrapper .comment-form input[type=text],
#review_form_wrapper .comment-form input[type=email],
#review_form_wrapper .comment-form select,
#review_form_wrapper .comment-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 11px 14px;
	border: 1px solid #e0d8c8;
	border-radius: 7px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
	color: #313643;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#review_form_wrapper .comment-form select {
	height: 46px;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	/* стрелка вместо системной — иначе поле выбивается из остальных */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a89b86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

#review_form_wrapper .comment-form textarea {
	min-height: 150px;
	height: 150px;
	resize: vertical;
}

/*
 * Оценка: тема подменяет родной `<select>` собственным виджетом
 * (`.select` → `.select-styled` + `.select-options`), а настоящее поле прячет.
 * Поэтому оформляем именно виджет — иначе он остаётся в старом стиле и
 * выбивается из остальных полей. Правила намеренно ограничены формой отзыва:
 * тот же виджет используется в поиске по сайту.
 */
#review_form_wrapper .comment-form-rating .select {
	min-height: 46px;
}

#review_form_wrapper .comment-form-rating .select-styled {
	display: flex;
	align-items: center;
	padding: 0 38px 0 14px;
	border: 1px solid #e0d8c8;
	border-radius: 7px;
	background-color: #fff;
	font-size: 15px;
	line-height: 1.4;
	color: #313643;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#review_form_wrapper .comment-form-rating .select-styled:hover,
#review_form_wrapper .comment-form-rating .select-styled.active {
	border-color: #ecbb49;
}

#review_form_wrapper .comment-form-rating .select-styled.active {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: 0 0 0 3px rgba(236, 187, 73, .18);
}

#review_form_wrapper .comment-form-rating .select-options {
	border: 1px solid #ecbb49;
	border-top: 0;
	border-radius: 0 0 7px 7px;
	overflow: hidden;
}

#review_form_wrapper .comment-form-rating .select-options li {
	padding: 11px 14px;
	font-size: 15px;
	color: #5f5850;
}

#review_form_wrapper .comment-form-rating .select-options li:hover {
	background: #f6f1e7;
	color: #313643;
}

#review_form_wrapper .comment-form input[type=text]:focus,
#review_form_wrapper .comment-form input[type=email]:focus,
#review_form_wrapper .comment-form select:focus,
#review_form_wrapper .comment-form textarea:focus {
	outline: none;
	border-color: #ecbb49;
	box-shadow: 0 0 0 3px rgba(236, 187, 73, .18);
}

#review_form_wrapper .comment-form input::placeholder,
#review_form_wrapper .comment-form textarea::placeholder {
	color: #b3aa9c;
}

/* ── согласие на сохранение данных ── */

#review_form_wrapper .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

#review_form_wrapper .comment-form-cookies-consent input {
	margin: 2px 0 0;
	flex: 0 0 auto;
}

#review_form_wrapper .comment-form-cookies-consent label {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: #8a8178;
}

/* ── загрузка фотографий ── */

#review_form_wrapper #comment-image-reloaded-wrapper {
	margin-top: 20px;
	padding: 16px 18px;
	border: 1px dashed #ddd3c0;
	border-radius: 8px;
	background: #fffdf9;
}

#review_form_wrapper #comment-image-reloaded-wrapper label {
	margin-bottom: 10px;
	color: #5f5850;
}

#review_form_wrapper .comment-image-reloaded {
	margin: 0;
}

#review_form_wrapper input[type=file] {
	max-width: 100%;
	font-size: 13px;
	color: #8a8178;
}

/* Кнопка выбора файла — под стиль остальных полей. */
#review_form_wrapper input[type=file]::file-selector-button {
	margin-right: 12px;
	padding: 9px 16px;
	border: 1px solid #e0d8c8;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: #5f5850;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

#review_form_wrapper input[type=file]::file-selector-button:hover {
	background: #f6f1e7;
	border-color: #d6c9b0;
}

#review_form_wrapper #comment-image-reloaded-error:empty {
	display: none;
}

#review_form_wrapper #comment-image-reloaded-error {
	margin: 0 0 10px;
	color: #c0392b;
	font-size: 13px;
}

/* ── капча и кнопка ── */

#review_form_wrapper .g-recaptcha {
	margin: 20px 0 0;
}

#review_form_wrapper .comment-form p.form-submit {
	margin: 24px 0 0;
	text-align: left;
}

#review_form_wrapper .comment-form input.submit {
	min-width: 200px;
}

/* ── узкий экран ── */

@media (max-width: 700px) {
	#review_form_wrapper .revie-form-box {
		padding: 20px 18px 22px;
	}

	#review_form_wrapper .fields-wrapper {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	#review_form_wrapper .comment-form p.form-submit {
		text-align: center;
	}

	#review_form_wrapper .comment-form input.submit {
		width: 100%;
		min-width: 0;
	}
}

/* ────────────────────────────────────────────────────────────
   Список отзывов гостей
   ──────────────────────────────────────────────────────────── */

#reviews .commentlist {
	max-width: 720px;
	margin: 0 0 34px;
	list-style: none;
}

#reviews .commentlist li.ayu-review {
	margin-bottom: 22px;
	padding-bottom: 22px;
}

#reviews .commentlist li.ayu-review:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

/* Аватара нет — карточка в одну колонку, отступы задаёт сама карточка. */
#reviews .ayu-review .comment-text {
	min-width: 0;
}

#reviews .ayu-review__stars {
	margin-bottom: 4px;
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
	color: #ded5c5;
}

#reviews .ayu-review__star.is-on {
	color: #ecbb49;
}

#reviews .ayu-review .meta {
	margin: 0 0 6px;
	font-size: 13px;
	color: #8a8178;
}

#reviews .ayu-review .meta .woocommerce-review__author {
	margin-right: 8px;
	font-size: 15px;
	color: #313643;
}

#reviews .ayu-review .description p:last-child {
	margin-bottom: 0;
}

/* Ссылка правки отзыва — видна только редакторам. */
#reviews .ayu-review__actions {
	margin: 8px 0 0;
	font-size: 13px;
}

#reviews .ayu-review__edit {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border: 1px solid #e0d8c8;
	border-radius: 20px;
	background: #fff;
	color: #8a7a55;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#reviews .ayu-review__edit:hover {
	background: #f6f1e7;
	border-color: #ecbb49;
	color: #5f5850;
}

#reviews .ayu-review__pending {
	margin-left: 10px;
	color: #b32d2e;
}