/**
 * Styling for [lf_agent_reviews] and [lf_agent_review_form].
 *
 * Colours pull from the Astra/Elementor globals so the section follows the
 * site palette if it is ever retuned, with the current values as fallbacks.
 */

.lf-agent-reviews,
.lf-agent-review-form {
	--lf-accent: var(--e-global-color-astglobalcolor0, #f5c21f);
	--lf-heading: var(--e-global-color-astglobalcolor2, #222222);
	--lf-text: var(--e-global-color-astglobalcolor1, #2d2d2d);
	--lf-muted: #6b7280;
	--lf-border: var(--e-global-color-astglobalcolor7, #d1d5db);
	--lf-surface: #ffffff;
	--lf-surface-alt: var(--e-global-color-astglobalcolor5, #f0f5fa);
	--lf-radius: 6px;

	/* Full container width, so the section lines up with the listings cards
	   above it. The Elementor container this sits in was cloned from the
	   listings container, so inheriting its width matches them exactly -
	   any max-width here would make the two sections disagree. */
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	color: var(--lf-text);
	text-align: left;
}

/* ---------------------------------------------------------------- reviews */

.lf-agent-reviews {
	margin-bottom: 48px;
}

.lf-agent-reviews__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--lf-border);
}

.lf-agent-reviews__title {
	margin: 0;
	color: var(--lf-heading);
	font-size: 1.5rem;
	line-height: 1.2;
}

.lf-agent-reviews__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--lf-muted);
	font-size: 0.95rem;
}

.lf-agent-reviews__average {
	font-weight: 700;
	color: var(--lf-heading);
}

/* Kill the default list furniture - the numbers looked like a table of contents. */
.lf-agent-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lf-agent-reviews__item {
	list-style: none;
	margin: 0 0 16px;
	padding: 20px 24px;
	background: var(--lf-surface);
	border: 1px solid var(--lf-border);
	border-left: 4px solid var(--lf-accent);
	border-radius: var(--lf-radius);
}

.lf-agent-reviews__item:last-child {
	margin-bottom: 0;
}

.lf-agent-reviews__text {
	margin: 10px 0 14px;
	font-size: 1.05rem;
	line-height: 1.6;
}

.lf-agent-reviews__text p {
	margin: 0 0 0.6em;
}

.lf-agent-reviews__text p:last-child {
	margin-bottom: 0;
}

.lf-agent-reviews__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	font-size: 0.9rem;
	color: var(--lf-muted);
}

.lf-agent-reviews__meta strong {
	color: var(--lf-heading);
	font-size: 1rem;
}

.lf-agent-reviews__date::before {
	content: "·";
	margin-right: 12px;
}

.lf-agent-reviews__pending {
	width: 100%;
	color: #8a6d1f;
	background: #fdf6e0;
	border-radius: 4px;
	padding: 4px 10px;
	font-style: normal;
	font-size: 0.85rem;
}

/* Stars inside a review card - display only. */
.lf-agent-reviews .es-rating {
	display: flex;
	gap: 2px;
}

/* ------------------------------------------------------------- pagination */

.lf-agent-reviews__pagination {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.lf-agent-reviews__pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	margin: 0 3px;
	padding: 8px 12px;
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius);
	color: var(--lf-heading);
	font-size: 0.9rem;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lf-agent-reviews__pagination .page-numbers:hover {
	background: var(--lf-surface-alt);
	border-color: var(--lf-heading);
}

.lf-agent-reviews__pagination .page-numbers.current {
	background: var(--lf-accent);
	border-color: var(--lf-accent);
	color: #222222;
	font-weight: 700;
}

.lf-agent-reviews__pagination .page-numbers.dots {
	border-color: transparent;
}

/* ------------------------------------------------------------------- form */

.lf-agent-review-form {
	padding: 32px;
	background: var(--lf-surface-alt);
	border-radius: var(--lf-radius);
}

/* Estatik centres its form; left-aligned reads better at this width. */
.lf-agent-review-form .es-review-form,
.lf-agent-review-form .es-review-form__entity-info {
	text-align: left;
}

.lf-agent-review-form .es-review-form__entity-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin-bottom: 24px;
}

.lf-agent-review-form .es-review-form__avatar {
	flex: 0 0 auto;
}

.lf-agent-review-form .es-review-form__avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.lf-agent-review-form .es-review-form__title {
	flex: 1 1 240px;
	margin: 0;
	color: var(--lf-heading);
	font-size: 1.35rem;
	line-height: 1.25;
}

.lf-agent-review-form .es-review-form__subtitle {
	flex: 1 1 100%;
	margin: 0;
	color: var(--lf-muted);
	font-size: 0.95rem;
}

/* Estatik ships `.es-review-form { max-width: 410px; margin: 0 auto }`, which
   pinned the whole form into a narrow centred column and left the panel empty
   either side. Released here so the two-column layout below has room.

   Its font-size:10px is deliberately left alone - Estatik sizes its own
   spacing in em against it, and overriding it would inflate every margin. The
   rules in this file use rem, so they are unaffected. */
.lf-agent-review-form .es-review-form {
	max-width: 100%;
	margin: 0;
}

/* Two columns on desktop: the review itself gets the wider side and the short
   identity fields stack beside it, so the form is roughly half the height and
   actually uses the width. Hidden inputs (type=hidden) and the absolutely
   positioned honeypot don't generate grid cells, so no empty rows appear. */
@media (min-width: 782px) {
	.lf-agent-review-form form.comment-form {
		display: grid;
		grid-template-columns: 1.6fr 1fr;
		grid-template-areas:
			"rating  rating"
			"notes   notes"
			"review  author"
			"review  email"
			"consent consent"
			"submit  submit";
		column-gap: 28px;
		align-items: start;
	}

	.lf-agent-review-form form.comment-form > * {
		min-width: 0;
	}

	.lf-agent-review-form .es-field__rating   { grid-area: rating; }
	.lf-agent-review-form .comment-notes      { grid-area: notes; }
	.lf-agent-review-form .es-field__comment  { grid-area: review; }
	.lf-agent-review-form .es-field__author   { grid-area: author; }
	.lf-agent-review-form .es-field__email    { grid-area: email; }
	.lf-agent-review-form .comment-form-cookies-consent { grid-area: consent; }
	.lf-agent-review-form .form-submit        { grid-area: submit; }

	/* Let the textarea grow to match the two fields stacked beside it, without
	   the character counter being pushed outside the box. */
	.lf-agent-review-form .es-field__comment,
	.lf-agent-review-form .es-field__comment > label {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.lf-agent-review-form .es-field__comment textarea {
		flex: 1 1 auto;
		min-height: 170px;
	}
}

.lf-agent-review-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--lf-heading);
	font-size: 0.9rem;
	font-weight: 600;
}

.lf-agent-review-form .es-field,
.lf-agent-review-form .comment-form-author,
.lf-agent-review-form .comment-form-email {
	margin-bottom: 18px;
}

.lf-agent-review-form input[type="text"],
.lf-agent-review-form input[type="email"],
.lf-agent-review-form input[type="url"],
.lf-agent-review-form textarea {
	width: 100%;
	padding: 11px 14px;
	background: var(--lf-surface);
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius);
	color: var(--lf-text);
	font-size: 1rem;
	line-height: 1.4;
}

.lf-agent-review-form input[type="text"]:focus,
.lf-agent-review-form input[type="email"]:focus,
.lf-agent-review-form textarea:focus {
	border-color: var(--lf-accent);
	outline: 2px solid rgba(245, 194, 31, 0.35);
	outline-offset: 1px;
}

.lf-agent-review-form textarea {
	min-height: 130px;
	resize: vertical;
}

/* Rating picker */
.lf-agent-review-form .es-rating {
	display: flex;
	gap: 4px;
	margin-bottom: 4px;
}

.lf-agent-review-form .es-star {
	cursor: pointer;
}

.lf-agent-review-form .es-field--rating {
	margin-bottom: 22px;
}

.lf-agent-review-form .es-field__description {
	color: var(--lf-muted);
	font-size: 0.85rem;
}

/* Character counter sits under the textarea. */
.lf-agent-review-form .es-counter {
	display: block;
	margin-top: 4px;
	color: var(--lf-muted);
	font-size: 0.8rem;
	text-align: right;
}

.lf-agent-review-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 4px 0 20px;
}

.lf-agent-review-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--lf-muted);
}

.lf-agent-review-form .comment-notes {
	margin-bottom: 20px;
	color: var(--lf-muted);
	font-size: 0.85rem;
}

.lf-agent-review-form .form-submit {
	margin: 0;
}

.lf-agent-review-form input[type="submit"],
.lf-agent-review-form .es-btn--primary {
	display: inline-block;
	width: auto;
	padding: 14px 32px;
	background: var(--lf-accent);
	border: none;
	border-radius: var(--lf-radius);
	color: #222222;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.lf-agent-review-form input[type="submit"]:hover,
.lf-agent-review-form .es-btn--primary:hover {
	filter: brightness(0.93);
}

@media (max-width: 600px) {
	.lf-agent-review-form {
		padding: 22px 18px;
	}

	.lf-agent-reviews__item {
		padding: 16px 18px;
	}

	.lf-agent-review-form input[type="submit"],
	.lf-agent-review-form .es-btn--primary {
		width: 100%;
	}
}