/* =========================================================
   REVIEWS FORM MODULE
   code/modules/reviews-form/style.css
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {
	--nk-comment-bg: #fcfcfa;
	--nk-comment-bg-soft: #f7f8f4;
	--nk-comment-surface: #ffffff;
	--nk-comment-border: #e4e9e1;
	--nk-comment-border-soft: #eef2ea;
	--nk-comment-border-strong: #cfd9cb;

	--nk-comment-text: #27312d;
	--nk-comment-text-soft: #4f5d57;
	--nk-comment-text-muted: #85948d;

	--nk-comment-accent: #2f9b8e;
	--nk-comment-accent-soft: #dff3ef;
	--nk-comment-accent-strong: #228277;
	--nk-comment-accent-dark: #1e6a61;

	--nk-comment-shadow-sm:
		0 8px 24px rgba(28, 49, 44, .045);

	--nk-comment-shadow-md:
		0 14px 34px rgba(28, 49, 44, .06);

	--nk-comment-radius-md: 18px;
	--nk-comment-radius-lg: 22px;
	--nk-comment-radius-xl: 28px;
}


/* =========================================================
   02. MODULE FOUNDATION
========================================================= */

.nk-comments-module,
.nk-comments-module *,
.nk-comments-module *::before,
.nk-comments-module *::after {
	box-sizing: border-box;
}

.nk-comments-module {
	width: 100%;
	max-width: 100%;
	color: var(--nk-comment-text);
	direction: rtl;
}

.nk-comments-module a {
	text-decoration: none;
}

.nk-comments-module button,
.nk-comments-module input,
.nk-comments-module textarea {
	font-family: inherit;
}

/* =========================================================
   03. MAIN GRID
   Desktop: Form LEFT | Comments RIGHT
========================================================= */

.nk-comments-module .nk-reviews-content__grid {
	display: grid;

	/*
	 * برای تثبیت جای فیزیکی ستون‌ها از LTR استفاده می‌کنیم:
	 *
	 * ستون اول  = سمت چپ  = فرم
	 * ستون دوم  = سمت راست = دیدگاه‌ها
	 *
	 * محتوای داخلی هر ستون همچنان RTL خواهد بود.
	 */
	direction: ltr;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(340px, 420px);
	
	grid-template-areas: "comments form";

	gap: 15px;
	align-items: start;
	width: 100%;
}

.single-post .nk-comments-module .nk-reviews-content__grid {
	border-top: var(--al-comment-line);
	margin-top: 20px;
	margin-bottom: 40px;
	padding-top: 30px;
}


/* ستون چپ: فرم ثبت دیدگاه */
.nk-comments-module .nk-reviews-form-column {
	grid-area: form;

	width: 100%;
	min-width: 0;

	direction: rtl;
	text-align: right;
}


/* ستون راست: لیست دیدگاه‌ها */
.nk-comments-module .nk-reviews-comments-column {
	grid-area: comments;

	width: 100%;
	min-width: 0;

	direction: rtl;
	text-align: right;
}


/* =========================================================
   04. FORM INTRO
========================================================= */

.nk-comments-module .nk-reviews-form__intro {
	position: static;
	width: 100%;
	margin: 0 0 20px;
}

.nk-comments-module .nk-reviews-form__intro h2 {
	margin: 0 !important;
	margin-bottom: 5px !important;

	color: var(--nk-comment-text) !important;

	font-size: clamp(16px, 3vw, 16px) !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
}

.nk-comments-module .nk-reviews-form__intro p {
	margin: 0;
}

.nk-comments-module .nk-reviews-form__intro p:last-child {
	margin: 0px 0 0;

	color: var(--nk-comment-text-muted);

	font-size: 14px;
	line-height: 2;
}


/* =========================================================
   05. SECTION HEADING
========================================================= */

.nk-comments-module .nk-reviews-section-heading {
	display: block;
	width: 100%;
	margin: 0 !important;
	margin-bottom: 20px !important;
}

.nk-comments-module .nk-reviews-section-heading h2 {
	margin: 0 !important;

	color: var(--nk-comment-text) !important;

	font-size: clamp(21px, 3vw, 30px) !important;
	font-weight: 800 !important;
	line-height: 1.55 !important;
}

.nk-comments-module .nk-reviews-section-heading p {
	margin: 0 !important;
}

.nk-comments-module .nk-reviews-section-heading > p:last-child {
	max-width: 720px;

	margin: 0 !important;

	color: var(--nk-comment-text-muted);

	font-size: 14px;
	line-height: 2;
}

.nk-comments-module .nk-reviews-heading-line {
	display: flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 5px;

	color: var(--nk-comment-accent-dark);

	font-size: 12px;
	font-weight: 800;
}

.nk-comments-module .nk-reviews-heading-line span:first-child {
	display: block;

	width: 30px;
	height: 2px;

	border-radius: 999px;

	background: var(--nk-comment-accent);
}


/* =========================================================
   06. WORDPRESS FORM WRAPPER
========================================================= */

.nk-comments-module .nk-reviews-comment-form {
	width: 100%;
}

.nk-comments-module .comment-respond {
	position: relative;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 28px 26px !important;

	background:
		linear-gradient(
			180deg,
			#ffffff,
			#fbfcf8
		) !important;

	border: 1px solid var(--nk-comment-border) !important;
	border-radius: var(--nk-comment-radius-xl) !important;

	box-shadow: var(--nk-comment-shadow-md) !important;

	overflow: hidden;
}

.nk-comments-module .comment-respond::after {
	content: "";

	position: absolute;
	top: -60px;
	left: -60px;

	width: 170px;
	height: 170px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(47, 155, 142, .06),
			transparent 70%
		);

	pointer-events: none;
}


/* =========================================================
   07. FORM TEXT
========================================================= */

.nk-comments-module .comment-notes,
.nk-comments-module .logged-in-as {
	display: block !important;

	margin: 0 0 18px !important;

	color: var(--nk-comment-text-soft) !important;

	font-size: 12px !important;
	line-height: 1.9;

	text-align: right !important;
}

.nk-comments-module .logged-in-as a {
	color: var(--nk-comment-accent-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nk-comments-module .comment-form-comment label,
.nk-comments-module .comment-form-author label,
.nk-comments-module .comment-form-email label,
.nk-comments-module .comment-form-url label {
	display: block !important;

	margin: 0 0 8px !important;

	color: var(--nk-comment-text-soft) !important;

	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.7;
}


/* =========================================================
   08. FORM GROUPS
========================================================= */

.nk-comments-module .comment-form-author,
.nk-comments-module .comment-form-email,
.nk-comments-module .comment-form-url,
.nk-comments-module .comment-form-comment {
	position: relative;

	width: 100%;

	margin: 16px 0 0 !important;
	padding: 0 !important;
}


/* =========================================================
   09. INPUTS AND TEXTAREA
========================================================= */

.nk-comments-module #commentform input[type="text"],
.nk-comments-module #commentform input[type="email"],
.nk-comments-module #commentform input[type="url"],
.nk-comments-module #commentform textarea {
	display: block;

	width: 100% !important;

	color: var(--nk-comment-text) !important;
	background: #fff !important;

	border: 1px solid var(--nk-comment-border) !important;
	border-radius: 14px !important;

	font-family: inherit;
	font-size: 13px !important;

	box-shadow:
		0 2px 9px rgba(28, 49, 44, .02) !important;

	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		background .2s ease;
}

.nk-comments-module #commentform input[type="text"],
.nk-comments-module #commentform input[type="email"],
.nk-comments-module #commentform input[type="url"] {
	height: 48px;
	padding: 0 14px !important;
}

.nk-comments-module #commentform textarea {
	min-height: 125px !important;
	padding: 12px 14px !important;

	line-height: 1.9 !important;
	resize: vertical !important;
}

.nk-comments-module #commentform input:focus,
.nk-comments-module #commentform textarea:focus {
	outline: none !important;

	border-color: var(--nk-comment-accent) !important;

	box-shadow:
		0 0 0 3px rgba(47, 155, 142, .08) !important;
}

.nk-comments-module #commentform input::placeholder,
.nk-comments-module #commentform textarea::placeholder {
	color: #94a69f;
	opacity: 1;
}


/* =========================================================
   10. COOKIE CONSENT
========================================================= */

.nk-comments-module .comment-form-cookies-consent {
	display: flex !important;
	align-items: flex-start;
	gap: 7px;

	margin: 14px 0 18px !important;

	color: var(--nk-comment-text-muted);

	font-size: 11px;
	line-height: 1.8;
}

.nk-comments-module .comment-form-cookies-consent input {
	width: auto !important;
	margin-top: 4px;

	accent-color: var(--nk-comment-accent-dark);
}

.nk-comments-module .comment-form-cookies-consent a {
	color: var(--nk-comment-accent-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* =========================================================
   11. SUBMIT BUTTON
========================================================= */

.nk-comments-module .form-submit {
	margin: 18px 0 0 !important;
	padding: 0 !important;

	text-align: right !important;
}

.nk-comments-module #commentform .submit,
.nk-comments-module #submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 0 25px !important;

	color: #fff !important;

	background:
		linear-gradient(
			135deg,
			var(--nk-comment-accent-dark),
			var(--nk-comment-accent)
		) !important;

	border: 0 !important;
	border-radius: 999px !important;

	font-family: inherit;
	font-size: 13px !important;
	font-weight: 800 !important;

	cursor: pointer;

	box-shadow:
		0 8px 20px rgba(47, 155, 142, .18) !important;

	transition:
		transform .25s ease,
		box-shadow .25s ease;
}

.nk-comments-module #commentform .submit:hover,
.nk-comments-module #submit:hover {
	transform: translateY(-2px) !important;

	box-shadow:
		0 12px 25px rgba(47, 155, 142, .25) !important;
}


/* =========================================================
   12. COMMENTS LIST
========================================================= */

.nk-comments-module .nk-reviews-list {
	display: block !important;

	width: 100% !important;
	max-width: 100%;

	margin: 0 !important;
	padding: 0 !important;
}

.nk-comments-module .nk-review-card {
	position: relative;

	display: block;

	width: 100%;

	margin: 0 0 18px !important;
	padding: 23px 24px !important;

	background:
		linear-gradient(
			180deg,
			#ffffff,
			#fcfdfb
		) !important;

	border: 1px solid var(--nk-comment-border) !important;
	border-radius: var(--nk-comment-radius-lg) !important;

	box-shadow: var(--nk-comment-shadow-sm);

	overflow: hidden;

	transition:
		transform .25s ease,
		border-color .25s ease,
		box-shadow .25s ease;
}

.nk-comments-module .nk-review-card:hover {
	transform: translateY(-2px);

	border-color: var(--nk-comment-border-strong) !important;

	box-shadow: var(--nk-comment-shadow-md);
}

.nk-comments-module .nk-review-card__top {
	display: flex;
	align-items: center;
	gap: 13px;

	padding-bottom: 14px;

	border-bottom: 1px solid var(--nk-comment-border-soft);
}

.nk-comments-module .nk-review-card__avatar {
	width: 50px;
	height: 50px;
	flex: 0 0 50px;

	overflow: hidden;

	border: 2px solid rgba(47, 155, 142, .10);
	border-radius: 15px;

	background: var(--nk-comment-accent-soft);
}

.nk-comments-module .nk-review-card__avatar-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.nk-comments-module .nk-review-card__author {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.nk-comments-module .nk-review-card__author strong {
	color: var(--nk-comment-text);

	font-size: 14px;
	font-weight: 800;
}

.nk-comments-module .nk-review-card__author time {
	color: var(--nk-comment-text-muted);
	font-size: 11px;
}

.nk-comments-module .nk-review-card__mark {
	margin-inline-start: auto;

	color: var(--nk-comment-accent);

	font-family: Georgia, serif;
	font-size: 45px;
	line-height: .7;

	opacity: .22;
}

.nk-comments-module .nk-review-card__body {
	margin-top: 16px;
	padding: 14px 16px;

	color: var(--nk-comment-text-soft);

	background:
		linear-gradient(
			180deg,
			#fafcf8,
			#f7faf6
		);

	border: 1px solid var(--nk-comment-border-soft);
	border-radius: 15px;

	font-size: 14px;
	line-height: 1.95;
}

.nk-comments-module .nk-review-card__body p {
	margin: 0;
}


/* =========================================================
   13. REPLY TREE
========================================================= */

.nk-comments-module .children {
	display: block !important;

	width: calc(100% - 42px) !important;

	margin: -6px 42px 0 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

.nk-comments-module .children .children {
	width: calc(100% - 30px) !important;
	margin: 10px 30px 0 0 !important;
}

.nk-comments-module .nk-review-card--parent > .children {
	position: relative;
}

.nk-comments-module .nk-review-card--parent > .children::before,
.nk-comments-module .children .children::before {
	content: "";

	position: absolute;
	top: -13px;
	right: 16px;

	width: 1px;
	height: 24px;

	background: var(--nk-comment-border-strong);
	opacity: .6;
}


/* =========================================================
   14. REPLY LABEL
========================================================= */

.nk-comments-module .reply-to-tag {
	margin: 0 0 9px !important;
}

.nk-comments-module .reply-to-tag span {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;

	padding: 4px 9px !important;

	color: var(--nk-comment-accent-dark) !important;
	background: #f0f7f5 !important;

	border: 1px solid #dceae5 !important;
	border-radius: 999px !important;

	font-size: 10px !important;
	font-weight: 800 !important;
}

.nk-comments-module .reply-to-tag span::before {
	content: "↳";

	font-size: 12px;
	line-height: 1;
}


/* =========================================================
   15. COMMENT ACTIONS
========================================================= */

.nk-comments-module .nk-review-card__actions {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;

	gap: 8px !important;

	margin-top: 13px !important;
}

.nk-comments-module .nk-review-reply-button,
.nk-comments-module .nk-review-edit-button,
.nk-comments-module .nk-review-delete-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-height: 34px !important;
	margin: 0 !important;
	padding: 0 14px !important;

	border-radius: 999px !important;

	font-family: inherit !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	line-height: 1 !important;

	cursor: pointer;
	transition:
		background .2s ease,
		color .2s ease,
		border-color .2s ease,
		transform .2s ease;
}

.nk-comments-module .nk-review-reply-button {
	color: var(--nk-comment-accent-dark);

	background: #edf7f4;

	border: 1px solid #dceae5;
}

.nk-comments-module .nk-review-reply-button:hover {
	color: #fff;

	background: var(--nk-comment-accent);
	border-color: var(--nk-comment-accent);

	transform: translateY(-1px);
}

.nk-comments-module .nk-review-edit-button {
	color: #7b6a47 !important;
	background: #f7f5ef !important;
	border: 1px solid #e7e0d1 !important;
}

.nk-comments-module .nk-review-delete-button {
	color: #a85d58 !important;
	background: #fdf3f2 !important;
	border: 1px solid #f0d9d6 !important;
}

.nk-comments-module .nk-review-edit-button:hover,
.nk-comments-module .nk-review-delete-button:hover {
	transform: translateY(-1px);
}


/* =========================================================
   16. INLINE REPLY FORM
========================================================= */

.nk-comments-module .nk-review-inline-reply {
	width: 100%;
	margin-top: 18px;
	padding: 18px;

	background:
		linear-gradient(
			180deg,
			#fbfdfb,
			#f7faf6
		);

	border: 1px solid var(--nk-comment-border);
	border-radius: var(--nk-comment-radius-md);

	box-shadow:
		0 8px 22px rgba(28, 49, 44, .045);

	animation: nkReplyFormIn .22s ease;
}

.nk-comments-module .nk-review-inline-reply[hidden] {
	display: none !important;
}

.nk-comments-module .nk-review-inline-reply__form {
	width: 100%;
	margin: 0;
}

.nk-comments-module .nk-review-inline-reply__heading {
	margin-bottom: 15px;
	padding-bottom: 12px;

	color: var(--nk-comment-text);

	border-bottom: 1px solid var(--nk-comment-border-soft);

	font-size: 12px;
	font-weight: 800;
	line-height: 1.8;
}

.nk-comments-module .nk-review-inline-reply__heading strong {
	color: var(--nk-comment-accent-dark);
}

.nk-comments-module .nk-review-inline-reply input[type="text"],
.nk-comments-module .nk-review-inline-reply input[type="email"],
.nk-comments-module .nk-review-inline-reply textarea {
	display: block;

	width: 100% !important;

	color: var(--nk-comment-text) !important;
	background: #fff !important;

	border: 1px solid var(--nk-comment-border) !important;
	border-radius: 12px !important;

	font-family: inherit;
	font-size: 12px !important;

	outline: none !important;

	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}

.nk-comments-module .nk-review-inline-reply input[type="text"],
.nk-comments-module .nk-review-inline-reply input[type="email"] {
	height: 44px;
	padding: 0 13px !important;
}

.nk-comments-module .nk-review-inline-reply textarea {
	min-height: 105px !important;
	padding: 11px 13px !important;

	line-height: 1.9 !important;
	resize: vertical !important;
}

.nk-comments-module .nk-review-inline-reply input:focus,
.nk-comments-module .nk-review-inline-reply textarea:focus {
	border-color: var(--nk-comment-accent) !important;

	box-shadow:
		0 0 0 3px rgba(47, 155, 142, .08) !important;
}

.nk-comments-module .nk-review-inline-reply__actions {
	display: flex;
	align-items: center;
	gap: 8px;

	margin-top: 15px;
}

.nk-comments-module .nk-review-inline-reply__actions .nk-reviews-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	min-height: 42px;
	padding: 0 18px !important;

	color: #fff !important;

	background:
		linear-gradient(
			135deg,
			var(--nk-comment-accent-dark),
			var(--nk-comment-accent)
		) !important;

	border: 0 !important;
	border-radius: 999px !important;

	font-size: 11px !important;
	font-weight: 800 !important;

	cursor: pointer;
}

.nk-comments-module .nk-review-reply-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;
	padding: 0 17px;

	color: var(--nk-comment-text-soft);
	background: #f5f7f4;

	border: 1px solid var(--nk-comment-border);
	border-radius: 999px;

	font-size: 11px;
	font-weight: 700;

	cursor: pointer;
}


/* =========================================================
   17. EMPTY STATE
========================================================= */

.nk-comments-module .nk-reviews-empty {
	width: 100%;

	padding: 55px 25px;

	text-align: center;

	background: var(--nk-comment-surface);

	border: 1px dashed var(--nk-comment-border-strong);
	border-radius: var(--nk-comment-radius-lg);
}

.nk-comments-module .nk-reviews-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 56px;
	height: 56px;

	margin: 0 auto 17px;

	color: var(--nk-comment-accent-dark);
	background: var(--nk-comment-accent-soft);

	border-radius: 17px;
}

.nk-comments-module .nk-reviews-empty__icon svg {
	width: 24px;
	height: 24px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.nk-comments-module .nk-reviews-empty h3 {
	margin: 0 !important;

	color: var(--nk-comment-text) !important;

	font-size: 18px !important;
	font-weight: 800 !important;
}

.nk-comments-module .nk-reviews-empty p {
	margin: 8px 0 0;

	color: var(--nk-comment-text-muted);

	font-size: 13px;
}

/* =========================================================
   18. RESPONSIVE
========================================================= */
@media (max-width: 1000px) {

	.nk-comments-module .nk-reviews-content__grid {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(280px, 340px);

		grid-template-areas: "comments form";

		gap: 30px;
	}
}

@media (max-width: 800px) {

	.nk-comments-module .comment-respond::after {
		left: 0;
	}

	.nk-comments-module .nk-reviews-content__grid {
		display: flex;
		flex-direction: column;
		gap: 35px;
	}

	.nk-comments-module .nk-reviews-form-column,
	.nk-comments-module .nk-reviews-comments-column {
		width: 100%;
	}

	.nk-comments-module .nk-reviews-form-column {
		order: 1;
		position: static;
		top: auto;
	}

	.nk-comments-module .nk-reviews-comments-column {
		order: 2;
	}

	.nk-comments-module .nk-reviews-form-column .comment-respond {
		position: static !important;
		top: auto;
	}

	.nk-comments-module .nk-review-card {
		padding: 19px !important;
		border-radius: 18px !important;
	}

	.nk-comments-module .children {
		width: calc(100% - 24px) !important;
		margin-right: 24px !important;
	}

	.nk-comments-module .nk-review-card--reply {
		padding: 17px 18px !important;
	}
}

@media (max-width: 600px) {

	.nk-comments-module .comment-respond {
		padding: 24px 20px !important;
		border-radius: 22px !important;
	}

	.nk-comments-module .nk-review-card__avatar {
		width: 46px;
		height: 46px;
		flex-basis: 46px;
	}

	.nk-comments-module .nk-review-card__body {
		padding: 13px 14px;
		font-size: 13.5px;
	}

	.nk-comments-module .children {
		width: calc(100% - 17px) !important;
		margin-right: 17px !important;
	}

	.nk-comments-module .children .children {
		width: calc(100% - 12px) !important;
		margin-right: 12px !important;
	}

	.nk-comments-module #commentform .submit,
	.nk-comments-module #submit {
		width: 100% !important;
	}

	.nk-comments-module .form-submit {
		text-align: center !important;
	}

	.nk-comments-module .nk-review-inline-reply__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.nk-comments-module .nk-review-inline-reply__actions .nk-reviews-submit,
	.nk-comments-module .nk-review-reply-cancel {
		width: 100%;
	}
}


/* =========================================================
   19. ANIMATION
========================================================= */

@keyframes nkReplyFormIn {
	from {
		opacity: 0;
		transform: translateY(-7px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================================
   20. sticky
========================================================= */
@media (min-width: 801px) {
	.nk-comments-module .nk-reviews-content__grid {
		align-items: start;
	}

	.nk-comments-module .nk-reviews-form-column {
		position: sticky;
		top: 100px;
		align-self: start;
		z-index: 2;
	}

	/* اگر نوار مدیریت وردپرس فعال باشد */
	body.admin-bar .nk-comments-module .nk-reviews-form-column {
		top: 132px;
	}
}