/**
 * استایل یکپارچه‌ی بخش نظرات بهیدو (نوشته‌ها + محصولات ووکامرس).
 *
 * @package Behido_Pro\Modules\Comments_Rating
 */

/* ========================================
   Design tokens
======================================== */

.behido-comment-form-inner,
.behido-comment-list,
.comment-list,
.commentlist,
#comments,
.comments-area,
#reviews,
.woocommerce-Reviews {
	--behido-comments-font: 'IranSansX', sans-serif;
	--behido-title-size: 18px;
	--behido-title-weight: 600;
	--behido-title-color: #1e293b;
	--behido-form-bg: #ffffff;
	--behido-form-border-width: 0px;
	--behido-form-border-color: #e6eaf1;
	--behido-form-radius: 0px;
	--behido-form-padding: 0px;
	--behido-label-size: 14px;
	--behido-label-weight: 600;
	--behido-label-color: #333333;
	--behido-input-bg: #f8f9fb;
	--behido-input-color: #222222;
	--behido-input-border-width: 1px;
	--behido-input-border-color: #e1e5ea;
	--behido-input-radius: 10px;
	--behido-input-padding: 16px;
	--behido-input-font-size: 14px;
	--behido-input-height: 52px;
	--behido-textarea-height: 160px;
	--behido-input-placeholder: #a0a6ad;
	--behido-input-focus-bg: #ffffff;
	--behido-input-focus-border: #062d66;
	--behido-input-focus-shadow: #e6eef8;
	--behido-rating-label-size: 16px;
	--behido-rating-label-weight: 600;
	--behido-rating-label-color: #333333;
	--behido-rating-star-size: 26px;
	--behido-rating-star-gap: 6px;
	--behido-cbtn-bg: #062d66;
	--behido-cbtn-color: #ffffff;
	--behido-cbtn-hover-bg: #0a3e89;
	--behido-cbtn-hover-color: #ffffff;
	--behido-cbtn-radius: 10px;
	--behido-cbtn-padding-y: 12px;
	--behido-cbtn-padding-x: 20px;
	--behido-cbtn-border-width: 1px;
	--behido-cbtn-border-color: #062d66;
	--behido-cbtn-hover-border-width: 1px;
	--behido-cbtn-hover-border-color: #0a3e89;
	--behido-cbtn-font-size: 15px;
	--behido-cbtn-font-weight: 600;
	--behido-cbtn-icon-size: 18px;
	--behido-cbtn-icon-gap: 8px;
	--behido-cbtn-icon-color: #ffffff;
	--behido-cbtn-hover-icon-color: #ffffff;
	--behido-cbtn-list-bg: #f8f9fb;
	--behido-cbtn-list-color: #062d66;
	--behido-cbtn-list-hover-bg: #062d66;
	--behido-cbtn-list-hover-color: #ffffff;
	--behido-cbtn-list-border-width: 1px;
	--behido-cbtn-list-border-color: #dfe4ea;
	--behido-cbtn-list-hover-border-color: #062d66;
	--behido-cbtn-list-radius: 10px;
	--behido-cbtn-list-font-size: 15px;
	--behido-cbtn-list-font-weight: 600;
	--behido-list-bg: #ffffff;
	--behido-list-border-width: 0px;
	--behido-list-border-color: #e6eaf1;
	--behido-list-radius: 14px;
	--behido-list-padding: 0px;
	--behido-list-title-size: 24px;
	--behido-list-title-weight: 700;
	--behido-list-title-color: #1e293b;
	--behido-list-title-margin: 16px;
	--behido-comment-bg: #f8f9fb;
	--behido-comment-border-width: 0px;
	--behido-comment-border-color: #e6eaf1;
	--behido-comment-radius: 12px;
	--behido-comment-padding: 20px;
	--behido-comment-margin: 16px;
	--behido-avatar-size: 42px;
	--behido-avatar-radius: 50%;
	--behido-avatar-border-width: 0px;
	--behido-avatar-border-color: #ffffff;
	--behido-author-size: 14px;
	--behido-author-weight: 600;
	--behido-author-color: #1e293b;
	--behido-meta-size: 11px;
	--behido-meta-weight: 400;
	--behido-meta-color: #64748b;
	--behido-text-size: 16px;
	--behido-text-weight: 400;
	--behido-text-color: #1e293b;
	--behido-text-line-height: 2;
	--behido-display-star-size: 18px;
	--behido-reaction-bg: #efdfba;
	--behido-reaction-color: #062d66;
	--behido-reaction-border-width: 1px;
	--behido-reaction-border-color: #e6e0cf;
	--behido-reaction-radius: 8px;
	--behido-reaction-font-size: 12px;
	--behido-reaction-font-weight: 400;
	--behido-reaction-icon-size: 18px;
	--behido-reaction-hover-bg: #e6d9b3;
	--behido-reaction-hover-border-color: #d6c9a0;
	--behido-empty-bg: #f8f9fb;
	--behido-empty-border-color: #e1e5ea;
	--behido-empty-radius: 14px;
	--behido-empty-title-size: 16px;
	--behido-empty-title-weight: 700;
	--behido-empty-title-color: #1e293b;
	--behido-empty-subtitle-size: 13px;
	--behido-empty-subtitle-color: #64748b;

	font-family: var(--behido-comments-font);
}

/* ========================================
   Comment Form
======================================== */

.behido-comment-form-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
	padding: var(--behido-form-padding);
	background: var(--behido-form-bg);
	border: var(--behido-form-border-width) solid var(--behido-form-border-color);
	border-radius: var(--behido-form-radius);
	font-family: var(--behido-comments-font);
}

.behido-comment-form-inner .comment-reply-title,
#respond .comment-reply-title,
.comment-reply-title {
	margin: 0 0 25px;
	font-family: var(--behido-comments-font) !important;
	font-size: var(--behido-title-size) !important;
	font-weight: var(--behido-title-weight) !important;
	color: var(--behido-title-color) !important;
	line-height: 1.5;
}

/* پیام «وارد شده‌اید» به‌صورت پیش‌فرض رندر نمی‌شود. */
.behido-comment-form-inner .logged-in-as {
	display: none !important;
}

/* چک‌باکس ذخیره نام/ایمیل/وبسایت در مرورگر حذف می‌شود. */
.behido-comment-form-inner .comment-form-cookies-consent,
#respond .comment-form-cookies-consent {
	display: none !important;
}

/* ========================================
   Rating Field
======================================== */

.behido-comment-rating-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	font-family: var(--behido-comments-font);
}

.behido-comment-rating-field__label,
.behido-comment-rating-field > label {
	margin: 0;
	font-family: var(--behido-comments-font) !important;
	font-size: var(--behido-rating-label-size) !important;
	font-weight: var(--behido-rating-label-weight) !important;
	color: var(--behido-rating-label-color) !important;
	white-space: nowrap;
}

.behido-comment-rating-field .behido-comment-rating-stars {
	display: flex;
	align-items: center;
	gap: var(--behido-rating-star-gap);
}

.behido-comment-rating-field .behido-comment-rating-stars input {
	display: none;
}

.behido-comment-rating-field .behido-star-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--behido-rating-star-size);
	height: var(--behido-rating-star-size);
	margin: 0;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.behido-comment-rating-field .behido-star-label:hover {
	transform: translateY(-2px);
}

.behido-comment-rating-field .behido-star-label span {
	display: block;
	width: var(--behido-rating-star-size);
	height: var(--behido-rating-star-size);
	background-image: var(--empty-star);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: 0.25s ease;
}

.behido-comment-rating-field .behido-star-label:hover span,
.behido-comment-rating-field .behido-star-label:hover ~ .behido-star-label span,
.behido-comment-rating-field input:checked ~ .behido-star-label span {
	background-image: var(--fill-star);
}

.behido-comment-rating-field__error {
	display: none;
	flex-basis: 100%;
	font-size: 12px;
	font-weight: 600;
	color: #e53935;
}

.behido-comment-rating-field.is-invalid {
	padding: 10px 12px;
	border: 1px dashed #e53935;
	border-radius: 10px;
	background: rgba(229, 57, 53, 0.04);
}

.behido-comment-rating-field.is-invalid .behido-comment-rating-field__error {
	display: block;
}

/* ========================================
   Fields
======================================== */

.behido-comment-form-inner .elementor-field-group {
	width: 100%;
	margin: 0;
}

.behido-comment-form-inner .elementor-field-label,
.behido-comment-form-inner .comment-form-math-captcha label {
	display: block;
	margin-bottom: 9px;
	font-family: var(--behido-comments-font) !important;
	font-size: var(--behido-label-size) !important;
	font-weight: var(--behido-label-weight) !important;
	color: var(--behido-label-color) !important;
}

.behido-comment-form-inner input[type="text"]:not(.behido-mc-answer),
.behido-comment-form-inner input[type="email"],
.behido-comment-form-inner input[type="url"],
.behido-comment-form-inner textarea {
	width: 100%;
	background: var(--behido-input-bg) !important;
	border: var(--behido-input-border-width) solid var(--behido-input-border-color) !important;
	border-radius: var(--behido-input-radius) !important;
	color: var(--behido-input-color) !important;
	font-family: var(--behido-comments-font) !important;
	font-size: var(--behido-input-font-size) !important;
	box-shadow: none !important;
	transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.behido-comment-form-inner input[type="text"]:not(.behido-mc-answer),
.behido-comment-form-inner input[type="email"],
.behido-comment-form-inner input[type="url"] {
	min-height: var(--behido-input-height);
	padding: 0 var(--behido-input-padding);
}

.behido-comment-form-inner textarea {
	min-height: var(--behido-textarea-height);
	padding: 15px var(--behido-input-padding);
	resize: vertical;
}

.behido-comment-form-inner input[type="text"]:not(.behido-mc-answer):focus,
.behido-comment-form-inner input[type="email"]:focus,
.behido-comment-form-inner input[type="url"]:focus,
.behido-comment-form-inner textarea:focus {
	outline: none !important;
	background: var(--behido-input-focus-bg) !important;
	border-color: var(--behido-input-focus-border) !important;
	box-shadow: 0 0 0 4px var(--behido-input-focus-shadow) !important;
}

.behido-comment-form-inner input::placeholder,
.behido-comment-form-inner textarea::placeholder {
	color: var(--behido-input-placeholder);
	opacity: 1;
}

/* ========================================
   Captcha (math_captcha module)
======================================== */

.behido-comment-captcha,
.behido-comment-form-inner .comment-form-math-captcha {
	width: 100%;
	max-width: 400px;
	margin: 0;
}

/* ========================================
   Buttons
======================================== */

.behido-comment-form-buttons {
	display: flex;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	margin-top: 5px;
}

.behido-comment-form-buttons .submit,
.behido-comment-form-buttons .behido-comment-list-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--behido-cbtn-icon-gap);
	flex: 1 1 50%;
	width: 50%;
	min-height: 42px;
	padding: var(--behido-cbtn-padding-y) var(--behido-cbtn-padding-x) !important;
	border-radius: var(--behido-cbtn-radius) !important;
	font-family: var(--behido-comments-font) !important;
	font-size: var(--behido-cbtn-font-size);
	font-weight: var(--behido-cbtn-font-weight);
	text-decoration: none;
	cursor: pointer;
	line-height: 1.6;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.behido-comment-form-buttons .submit,
.behido-comment-form-buttons .submit:focus,
.behido-comment-form-buttons .submit:active {
	background: var(--behido-cbtn-bg) !important;
	color: var(--behido-cbtn-color) !important;
	border: var(--behido-cbtn-border-width) solid var(--behido-cbtn-border-color) !important;
	box-shadow: none;
}

.behido-comment-form-buttons .submit:hover {
	background: var(--behido-cbtn-hover-bg) !important;
	color: var(--behido-cbtn-hover-color) !important;
	border-width: var(--behido-cbtn-hover-border-width) !important;
	border-color: var(--behido-cbtn-hover-border-color) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(6, 45, 102, 0.18);
}

.behido-comment-form-buttons .behido-comment-submit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--behido-cbtn-icon-size);
	height: var(--behido-cbtn-icon-size);
	flex-shrink: 0;
	line-height: 0;
}

.behido-comment-form-buttons .behido-comment-submit-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.behido-comment-form-buttons .submit:only-child {
	flex-basis: 100%;
	width: 100%;
}

.behido-comment-form-buttons .behido-comment-list-btn {
	background: var(--behido-cbtn-list-bg) !important;
	color: var(--behido-cbtn-list-color) !important;
	border: var(--behido-cbtn-list-border-width) solid var(--behido-cbtn-list-border-color) !important;
	border-radius: var(--behido-cbtn-list-radius) !important;
	font-size: var(--behido-cbtn-list-font-size);
	font-weight: var(--behido-cbtn-list-font-weight);
}

.behido-comment-form-buttons .behido-comment-list-btn:hover {
	background: var(--behido-cbtn-list-hover-bg) !important;
	color: var(--behido-cbtn-list-hover-color) !important;
	border-color: var(--behido-cbtn-list-hover-border-color) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(6, 45, 102, 0.12);
}

.behido-comment-form-inner .required,
.behido-comment-rating-field .required {
	color: #e53935;
}

/* ========================================
   Comments List
======================================== */

.behido-comment-list {
	margin: 0 0 20px;
	font-family: var(--behido-comments-font);
}

#comments .comment-list,
#comments .commentlist,
.comments-area .comment-list,
.behido-comment-list .comment-list,
#reviews .commentlist,
.woocommerce-Reviews .commentlist {
	margin: 0;
	padding: var(--behido-list-padding);
	list-style: none;
	background: var(--behido-list-bg);
	border: var(--behido-list-border-width) solid var(--behido-list-border-color);
	border-radius: var(--behido-list-radius);
	font-family: var(--behido-comments-font);
}

.comment .comment-body {
	margin-bottom: var(--behido-comment-margin);
	padding: var(--behido-comment-padding);
	background: var(--behido-comment-bg);
	border: var(--behido-comment-border-width) solid var(--behido-comment-border-color);
	border-radius: var(--behido-comment-radius);
	font-family: var(--behido-comments-font);
}

.comment .comment-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 16px;
}

.comment .comment-author.vcard {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--behido-author-size);
}

.comment .comment-author .avatar {
	width: var(--behido-avatar-size);
	height: var(--behido-avatar-size);
	max-width: none;
	margin: 0;
	border: var(--behido-avatar-border-width) solid var(--behido-avatar-border-color);
	border-radius: var(--behido-avatar-radius) !important;
	object-fit: cover;
	box-shadow: none;
}

.comment .comment-author .fn {
	font-family: var(--behido-comments-font);
	font-size: var(--behido-author-size);
	font-weight: var(--behido-author-weight);
	color: var(--behido-author-color);
}

.comment .comment-author .fn a {
	color: inherit;
	text-decoration: none;
}

.comment .comment-author .says {
	font-size: var(--behido-meta-size);
	opacity: 0.55;
}

.comment .comment-metadata {
	font-size: var(--behido-meta-size);
	font-weight: var(--behido-meta-weight);
	line-height: 1.5;
}

.comment .comment-metadata a {
	color: var(--behido-meta-color);
	text-decoration: none;
}

.comment .comment-metadata .edit-link {
	margin-right: 6px;
}

/* ========================================
   Rating Display
======================================== */

.behido-comment-rating-display {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 12px;
}

.behido-comment-rating-label {
	font-size: 12px;
	opacity: 0.65;
}

.behido-comment-rating-display .behido-comment-rating-stars {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.behido-comment-rating-display .behido-comment-rating-stars img {
	display: block;
	width: var(--behido-display-star-size);
	height: var(--behido-display-star-size);
}

/* متن «x از ۵» نمایش داده نمی‌شود */
.behido-comment-rating-value {
	display: none !important;
}

/* ========================================
   Comment Text
======================================== */

.comment .comment-content {
	font-family: var(--behido-comments-font);
	font-size: var(--behido-text-size);
	font-weight: var(--behido-text-weight);
	color: var(--behido-text-color);
}

.comment .comment-content > p {
	margin: 12px 0;
	font-size: var(--behido-text-size);
	font-weight: var(--behido-text-weight);
	line-height: var(--behido-text-line-height);
	color: var(--behido-text-color);
}

/* ========================================
   Like / Dislike
======================================== */

.behido-comment-reactions {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	margin-top: 10px;
	transition: opacity 0.2s ease;
}

.behido-comment-reactions.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.behido-reaction-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 54px;
	height: 38px;
	padding: 0 12px !important;
	color: var(--behido-reaction-color) !important;
	background: var(--behido-reaction-bg) !important;
	border: var(--behido-reaction-border-width) solid var(--behido-reaction-border-color) !important;
	border-radius: var(--behido-reaction-radius) !important;
	font-family: var(--behido-comments-font);
	font-size: var(--behido-reaction-font-size);
	font-weight: var(--behido-reaction-font-weight);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.behido-reaction-btn img {
	width: var(--behido-reaction-icon-size);
	height: var(--behido-reaction-icon-size);
	object-fit: contain;
}

.behido-reaction-count {
	font-size: var(--behido-reaction-font-size);
	font-weight: var(--behido-reaction-font-weight);
	line-height: 1;
}

.behido-reaction-btn:hover {
	background: var(--behido-reaction-hover-bg) !important;
	border-color: var(--behido-reaction-hover-border-color) !important;
	transform: translateY(-2px);
}

.behido-reaction-btn.is-active {
	background: var(--behido-reaction-hover-bg) !important;
	border-color: var(--behido-reaction-hover-border-color) !important;
}

/* ========================================
   Empty State
======================================== */

.behido-no-comments {
	margin: 12px 0;
	padding: 28px 20px;
	text-align: center;
	background: var(--behido-empty-bg);
	border: 1px solid var(--behido-empty-border-color);
	border-radius: var(--behido-empty-radius);
	font-family: var(--behido-comments-font);
}

.behido-no-comments p {
	margin: 4px 0;
}

.behido-no-comments__title {
	font-size: var(--behido-empty-title-size);
	font-weight: var(--behido-empty-title-weight);
	color: var(--behido-empty-title-color);
}

.behido-no-comments__subtitle {
	font-size: var(--behido-empty-subtitle-size);
	color: var(--behido-empty-subtitle-color);
}

.behido-no-comments__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	padding: 10px 22px;
	border-radius: var(--behido-cbtn-radius);
	background: var(--behido-cbtn-bg);
	color: var(--behido-cbtn-color);
	font-size: var(--behido-cbtn-font-size);
	font-weight: var(--behido-cbtn-font-weight);
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.behido-no-comments__btn:hover {
	background: var(--behido-cbtn-hover-bg);
	color: var(--behido-cbtn-hover-color);
	transform: translateY(-2px);
}

/* ========================================
   Comments List Title
======================================== */

.title-comments,
.woocommerce-Reviews-title {
	margin-bottom: var(--behido-list-title-margin);
	font-family: var(--behido-comments-font) !important;
	font-size: var(--behido-list-title-size) !important;
	font-weight: var(--behido-list-title-weight) !important;
	color: var(--behido-list-title-color) !important;
}

/* ========================================
   Front Toast
======================================== */

.behido-front-toast {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 99999;
	max-width: 360px;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--behido-cbtn-bg, #062d66);
	color: var(--behido-cbtn-color, #fff);
	font-family: var(--behido-comments-font, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.8;
	box-shadow: 0 16px 40px rgba(6, 45, 102, 0.32);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.behido-front-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 576px) {
	.behido-front-toast {
		right: 14px;
		left: 14px;
		bottom: 14px;
		max-width: none;
	}
}

/* ========================================
   Responsive
======================================== */

@media (max-width: 767px) {

	.behido-comment-rating-field {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.behido-comment-rating-field .behido-comment-rating-stars {
		width: 100%;
		justify-content: flex-start;
	}

	.behido-comment-captcha,
	.behido-comment-form-inner .comment-form-math-captcha {
		max-width: 100%;
	}

	.behido-comment-form-buttons {
		flex-direction: column;
	}

	.behido-comment-form-buttons .submit,
	.behido-comment-form-buttons .behido-comment-list-btn {
		width: 100%;
		flex-basis: auto;
	}

	.behido-comment-form-inner .comment-reply-title {
		font-size: var(--behido-title-size);
	}
}

@media (max-width: 576px) {

	.comment .comment-body {
		padding: var(--behido-comment-padding);
		border-radius: var(--behido-comment-radius);
	}

	.comment .comment-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.comment .comment-content > p {
		font-size: var(--behido-text-size);
		line-height: var(--behido-text-line-height);
	}

	.behido-comment-rating-display {
		margin-bottom: 10px;
	}
}