/**
 * PORT — Reviews styles (LRM C10 + F11).
 *
 * Covers the three ported surfaces: the My Reviews endpoint list,
 * the orders-list review modal, and the product-page display
 * limiter. Legacy styled these through the child's rc-customer-v1
 * design layer and inline styles; the port ships its own DS-toned
 * styles for the same markup contracts (IDs/classes unchanged).
 */

/* ----- Product-page limiter: hide reviews past the sixth -----
   (Phase-6 §4, RRP behaviour: initial batch 6. A product with
   <=6 reviews renders no 7th item, so the rule is inert there —
   identical visible behaviour. Revealed 6 at a time, per click
   only, by port-reviews.js via the server-printed button.) */
.commentlist > li.review:nth-child(n + 7) {
	display: none;
}

.wd-load-more-reviews-wrap,
.rn-reviews-more-wrap {
	text-align: center;
	margin: 30px 0;
}

/* DS primary pair (accent + on-accent, mirroring .rpb-submit
 * below) in place of the retired legacy teal #00708f. */
.rn-reviews-more {
	padding: 12px 30px;
	min-height: 44px;
	background: #00c8ff;
	color: #004980;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
}

/* ----- Review like/dislike counters (Phase-6 §4) -----
   WoodMart ships .wd-action-icon::before with content:none in
   this composition, so the thumbs never paint and the counts sit
   naked («0 0»). The icon becomes a real inline-SVG background
   on the element itself; the ::before is neutralised.
   Device-gate response (2026-11-03): counts are SERVER-settled —
   the comment template never prints a both-zero block, and a live
   block carries its Arabic labels (.rn-ld-label) in the HTML. No
   script decides whether this row exists. The colour is a legible
   ink on the dark card (the old blue-grey #5a6a7a is retired). */
.wd-review-likes {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #a7b0ba;
}

.wd-review-likes .wd-like,
.wd-review-likes .wd-dislike {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.wd-review-likes .wd-action-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

.wd-review-likes .wd-action-icon::before {
	content: "";
}

.wd-review-likes .wd-like .wd-action-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a7b0ba'%3E%3Cpath d='M2 21h3V9H2v12zM22 10c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 1 6.59 7.59C6.22 7.95 6 8.45 6 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E");
}

.wd-review-likes .wd-dislike .wd-action-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a7b0ba'%3E%3Cpath d='M2 21h3V9H2v12zM22 10c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 1 6.59 7.59C6.22 7.95 6 8.45 6 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E");
	transform: scaleY(-1);
}

.rn-ld-label {
	font-size: 12px;
	color: #a7b0ba;
}

.rn-ld-hidden {
	display: none !important;
}

/* ----- My Reviews endpoint list ----- */
.rn-review-item {
	border: 1px solid #e1e1e1;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 5px;
}

.rn-review-item-head {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	gap: 15px;
}

.rn-review-item-head h3 {
	margin: 0 0 5px 0;
}

.rn-review-stars {
	color: #ffb020;
	font-size: 16px;
}

.rn-review-item-body {
	padding: 15px;
	border-radius: 3px;
	margin-bottom: 10px;
}

.rn-review-item-body p {
	margin: 0;
}

.rn-review-item-date {
	color: #777;
	font-size: 13px;
}

/* ----- Review modal ----- */
#review-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
}

#review-modal.is-open {
	display: block;
}

#review-modal .modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(11, 30, 40, 0.62);
}

#review-modal .modal-box {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: 560px;
	margin: 6vh auto;
	padding: 24px;
	max-height: 86vh;
	overflow-y: auto;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

#review-modal .modal-close {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	background: none;
	border: none;
	cursor: pointer;
	width: 32px;
	height: 32px;
	padding: 4px;
	color: #40536a;
}

#review-modal .modal-close svg {
	width: 100%;
	height: 100%;
}

#review-modal .modal-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

#review-modal .modal-heading-icon {
	color: #00708f;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

#review-modal .modal-heading-icon svg {
	width: 100%;
	height: 100%;
}

#review-modal .modal-title {
	margin: 0;
	font-size: 19px;
}

#review-modal .modal-heading p {
	margin: 2px 0 0 0;
	color: #5a6a7a;
	font-size: 13px;
}

#modal-loading {
	display: none;
	align-items: center;
	gap: 10px;
	justify-content: center;
	padding: 22px 0;
	color: #40536a;
}

#modal-loading .rc-loader {
	width: 18px;
	height: 18px;
	border: 2px solid #cfdce4;
	border-top-color: #00708f;
	border-radius: 50%;
	display: inline-block;
	animation: rn-review-spin 0.8s linear infinite;
}

@keyframes rn-review-spin {
	to {
		transform: rotate(360deg);
	}
}

.review-product-block {
	border: 1px solid #e1e8ee;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 14px;
}

.review-product-block .rpb-name {
	font-weight: 700;
	margin-bottom: 10px;
}

.rpb-already {
	color: #2e7d32;
	background: #eef7ee;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
}

.rc-review-error {
	color: #b02a2a;
	background: #fdeaea;
	border-radius: 6px;
	padding: 12px;
	font-size: 14px;
	text-align: center;
}

/* Star input: radios in DOM order 5..1, labels floated so the
   :checked ~ label chain fills the chosen rating and below. */
.star-rating-input {
	direction: ltr;
	display: inline-block;
	margin-bottom: 10px;
}

.star-rating-input input {
	display: none;
}

.star-rating-input label {
	float: right;
	font-size: 26px;
	line-height: 1;
	color: #ccd6dd;
	cursor: pointer;
	padding: 0 2px;
}

.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
	color: #ffa500;
}

.review-textarea {
	width: 100%;
	min-height: 76px;
	border: 1px solid #c4d2dc;
	border-radius: 6px;
	padding: 10px;
	font-size: 14px;
	margin-bottom: 10px;
}

/* Wave 20 (Drive #9, item 7): the legacy light teal (#00708f)
 * is retired at the source — a primary action takes the Design
 * System's ONE primary pair (accent + on-accent), here as
 * literals mirroring the DS tokens (--accent / --on-accent). */
.rpb-submit {
	background: #00c8ff;
	color: #004980;
	border: none;
	border-radius: 6px;
	padding: 10px 22px;
	cursor: pointer;
	font-size: 14px;
}

.rpb-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.rpb-msg {
	margin-top: 8px;
	font-size: 13px;
}

.rpb-msg.error {
	color: #b02a2a;
}

.rpb-msg.success {
	color: #2e7d32;
}

body.rc-review-modal-open {
	overflow: hidden;
}