/**
 * Qasr Reviews — storefront styles.
 *
 * Written with logical properties throughout so the same rules hold in the
 * store's RTL layout and in an LTR one.
 */

.qasr-review {
	--qasr-ivory: #f7f2e9;
	--qasr-sand: #ece3d2;
	--qasr-ebony: #17130d;
	--qasr-ink: #3c352a;
	--qasr-muted: #6e6353;
	--qasr-gold: #c6a15b;
	--qasr-bronze-deep: #7f6033;
	--qasr-green: #414d3f;
	--qasr-green-bg: #eaf0e9;
	--qasr-radius: 10px;
}

/* ---------------------------------------------------------------- card -- */

li.qasr-review,
#reviews .commentlist > li.qasr-review,
#reviews ol.commentlist > li.qasr-review {
	list-style: none;
	margin: 0 0 28px;
	padding: 0 0 24px;
	border-block-end: 1px solid var(--qasr-sand);
}

li.qasr-review:last-child,
#reviews .commentlist > li.qasr-review:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

/* Variables also need to exist outside a review card. */
#reviews,
.qasr-lightbox {
	--qasr-ivory: #f7f2e9;
	--qasr-sand: #ece3d2;
	--qasr-ebony: #17130d;
	--qasr-ink: #3c352a;
	--qasr-muted: #6e6353;
	--qasr-gold: #c6a15b;
	--qasr-bronze-deep: #7f6033;
	--qasr-green: #414d3f;
	--qasr-green-bg: #eaf0e9;
	--qasr-radius: 10px;
}

.qasr-review .qasr-review__container {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.qasr-review .qasr-review__avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.qasr-review .qasr-review__avatar img,
.qasr-review .qasr-review__avatar .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	float: none;
	margin: 0;
	border: 1px solid var(--qasr-sand);
	background: var(--qasr-ivory);
}

.qasr-review .qasr-review__body {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

/* -------------------------------------------------------------- rating -- */

.qasr-review .qasr-review__rating {
	margin: 0 0 6px;
	font-size: 15px;
	color: var(--qasr-gold);
}

/* Some WoodMart review widgets render their own extra star row inside the
 * card regardless of which single-product/review.php template is active.
 * We only ever print one -- .qasr-review__rating -- so hide anything else
 * that also carries the generic .star-rating class inside our card. */
.qasr-review .star-rating:not(.qasr-review__rating) {
	display: none !important;
}

/* ---------------------------------------------------------------- meta -- */

.qasr-review .qasr-review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.5;
}

.qasr-review .qasr-review__author {
	color: var(--qasr-ebony);
	font-weight: 700;
}

.qasr-review .qasr-review__sep {
	color: var(--qasr-sand);
}

.qasr-review .qasr-country {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--qasr-muted);
	font-size: 14px;
	font-weight: 400;
}

.qasr-review .qasr-country__flag {
	font-size: 15px;
	line-height: 1;
}

/* Every trace of the review date, whichever layer printed it. */
.qasr-review time,
.qasr-review .woocommerce-review__published-date,
.qasr-review .wd-review-date,
.qasr-review .woodmart-review-date {
	display: none !important;
}

/* ------------------------------------------------------------ verified -- */

.qasr-review .qasr-review__verified-row {
	margin: 0 0 10px;
}

.qasr-verified {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--qasr-green-bg);
	color: var(--qasr-green);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.qasr-verified__icon {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------- text -- */

.qasr-review .qasr-review__text {
	color: var(--qasr-ink);
	font-size: 15px;
	line-height: 1.9;
}

.qasr-review .qasr-review__text p:last-child {
	margin-block-end: 0;
}

/* -------------------------------------------------------------- photos -- */

.qasr-review__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 12px;
}

.qasr-photo {
	display: block;
	width: 130px;
	height: 130px;
	padding: 0;
	border: 1px solid var(--qasr-sand);
	border-radius: var(--qasr-radius);
	overflow: hidden;
	background: var(--qasr-ivory);
	cursor: zoom-in;
	transition: border-color .15s ease, transform .15s ease;
}

.qasr-photo:hover,
.qasr-photo:focus-visible {
	border-color: var(--qasr-gold);
	transform: translateY(-2px);
}

.qasr-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------- replies -- */

.qasr-review__replies {
	margin-block-start: 14px;
}

.qasr-reply {
	background: var(--qasr-ivory);
	border-radius: var(--qasr-radius);
	border-inline-start: 3px solid var(--qasr-gold);
	padding: 12px 14px;
	margin-block-start: 10px;
}

.qasr-reply__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 6px;
}

.qasr-reply__avatar {
	line-height: 0;
}

.qasr-reply__avatar img,
.qasr-reply__avatar .avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--qasr-sand);
	margin: 0;
	float: none;
}

.qasr-reply__name {
	color: var(--qasr-bronze-deep);
	font-weight: 700;
	font-size: 14px;
}

.qasr-reply__badge {
	font-size: 11px;
	font-weight: 600;
	color: var(--qasr-ebony);
	background: var(--qasr-gold);
	border-radius: 999px;
	padding: 2px 8px;
	line-height: 1.6;
}

.qasr-reply__text {
	color: var(--qasr-ink);
	font-size: 14px;
	line-height: 1.85;
}

.qasr-reply__text p:last-child {
	margin-block-end: 0;
}

/* Store avatar fallback: first letter of the shop name in a gold circle. */
.qasr-store-avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--qasr-gold, #c6a15b);
	color: #17130d;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}

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

.qasr-optional-hint {
	color: var(--qasr-muted, #6e6353);
	font-weight: 400;
	font-size: 13px;
}

.comment-form-qasr-photos {
	margin-block-start: 14px;
}

.comment-form-qasr-photos > label {
	display: block;
	margin-block-end: 6px;
	font-weight: 600;
	color: #3c352a;
}

.qasr-photos-control {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.qasr-photos-input {
	max-width: 100%;
}

.qasr-photos-hint {
	font-size: 12px;
	color: #6e6353;
}

.qasr-photos-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 10px;
}

.qasr-photos-preview__item {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #ece3d2;
}

.qasr-photos-preview__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qasr-photos-error {
	color: #8a2b2b;
	font-size: 13px;
	margin-block-start: 6px;
}

/* ------------------------------------------------------------ lightbox -- */

.qasr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(23, 19, 13, .92);
	padding: 24px;
}

.qasr-lightbox[hidden] {
	display: none;
}

.qasr-lightbox__img {
	max-width: min(92vw, 1100px);
	max-height: 86vh;
	object-fit: contain;
	border-radius: 8px;
	background: #17130d;
}

.qasr-lightbox button {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.qasr-lightbox button:hover,
.qasr-lightbox button:focus-visible {
	background: rgba(255, 255, 255, .25);
}

.qasr-lightbox__close {
	top: 18px;
	inset-inline-end: 18px;
}

.qasr-lightbox__prev {
	inset-inline-start: 18px;
	top: 50%;
	transform: translateY(-50%);
}

.qasr-lightbox__next {
	inset-inline-end: 18px;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 600px) {
	.qasr-review .qasr-review__container {
		gap: 12px;
	}

	.qasr-review .qasr-review__avatar img,
	.qasr-review .qasr-review__avatar .avatar {
		width: 40px;
		height: 40px;
	}

	.qasr-photo {
		width: 100px;
		height: 100px;
	}
}