/* Product Reviews with Photos — frontend styles (no dependencies) */
.prp-wrap {
	--prp-accent: #1e3a5f;
	--prp-star: #f59e0b;
	--prp-star-empty: #d7dde5;
	--prp-border: #e2e8f0;
	--prp-text: #1e293b;
	--prp-muted: #64748b;
	--prp-radius: 10px;
	max-width: 760px;
	margin: 1.5rem auto;
	color: var(--prp-text);
	font-size: 1rem;
	line-height: 1.6;
}

/* ---------- Stars ---------- */
.prp-stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.prp-stars-bg, .prp-stars-fg { display: inline-block; white-space: nowrap; }
.prp-stars-bg .prp-star svg { fill: var(--prp-star-empty); }
.prp-stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; }
.prp-stars-fg .prp-star svg { fill: var(--prp-star); }
.prp-star svg { width: 20px; height: 20px; }

/* ---------- Summary ---------- */
.prp-summary {
	display: flex;
	gap: 2rem;
	align-items: center;
	background: #f8fafc;
	border: 1px solid var(--prp-border);
	border-radius: var(--prp-radius);
	padding: 1.25rem 1.5rem;
	margin: 1rem 0 1.5rem;
	flex-wrap: wrap;
}
.prp-summary-score { text-align: center; min-width: 130px; }
.prp-big-number { display: block; font-size: 2.75rem; font-weight: 800; line-height: 1.1; }
.prp-count { display: block; color: var(--prp-muted); font-size: .85rem; margin-top: .35rem; }
.prp-distribution { flex: 1; min-width: 220px; }
.prp-dist-row { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; font-size: .85rem; }
.prp-dist-label { width: 2.5rem; color: var(--prp-muted); }
.prp-dist-bar { flex: 1; height: 8px; background: #e9eef4; border-radius: 99px; overflow: hidden; }
.prp-dist-bar span { display: block; height: 100%; background: var(--prp-star); border-radius: 99px; }
.prp-dist-pct { width: 2.5rem; text-align: right; color: var(--prp-muted); }

/* ---------- Toolbar / sort ---------- */
.prp-toolbar { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: .9rem; color: var(--prp-muted); }
.prp-sort { padding: .45rem .7rem; border: 1px solid var(--prp-border); border-radius: 8px; background: #fff; }

/* ---------- Review cards ---------- */
.prp-review {
	border: 1px solid var(--prp-border);
	border-radius: var(--prp-radius);
	padding: 1.25rem 1.4rem;
	margin-bottom: 1rem;
	background: #fff;
}
.prp-review-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .4rem; }
.prp-reviewer { font-weight: 700; }
.prp-date { color: var(--prp-muted); font-size: .85rem; }
.prp-review-title { margin: .2rem 0 .5rem; font-size: 1.05rem; }
.prp-review-text p { margin: 0 0 .8em; }
.prp-review-text p:last-child { margin-bottom: 0; }
.prp-photos { display: flex; gap: .6rem; margin: .9rem 0 .4rem; flex-wrap: wrap; }
.prp-photo img {
	width: 84px; height: 84px; object-fit: cover;
	border-radius: 8px; border: 1px solid var(--prp-border);
	transition: transform .15s ease;
}
.prp-photo:hover img { transform: scale(1.05); }
.prp-helpful {
	margin-top: .8rem;
	background: none; border: 1px solid var(--prp-border); border-radius: 99px;
	padding: .35rem .95rem; font-size: .85rem; color: var(--prp-muted); cursor: pointer;
}
.prp-helpful:hover:not(:disabled) { border-color: var(--prp-accent); color: var(--prp-accent); }
.prp-helpful:disabled { cursor: default; }
.prp-helpful.prp-voted { color: var(--prp-muted); }
.prp-empty { color: var(--prp-muted); font-style: italic; }

/* ---------- Pagination ---------- */
.prp-pagination { display: flex; gap: .4rem; margin: 1.2rem 0; flex-wrap: wrap; }
.prp-page {
	min-width: 2.2rem; text-align: center; padding: .35rem .6rem;
	border: 1px solid var(--prp-border); border-radius: 8px; text-decoration: none; color: var(--prp-text);
}
.prp-page:hover { border-color: var(--prp-accent); }
.prp-page.prp-current { background: var(--prp-accent); border-color: var(--prp-accent); color: #fff; }

/* ---------- Form ---------- */
.prp-form-title, .prp-list-title { margin: 0 0 1rem; }
.prp-form { background: #f8fafc; border: 1px solid var(--prp-border); border-radius: var(--prp-radius); padding: 1.5rem; }
.prp-field { margin-bottom: 1.1rem; }
.prp-label { display: block; font-weight: 600; margin-bottom: .4rem; }
.prp-form input[type="text"], .prp-form textarea {
	width: 100%; padding: .65rem .8rem; border: 1px solid var(--prp-border);
	border-radius: 8px; font-size: 1rem; background: #fff; box-sizing: border-box;
}
.prp-form input:focus, .prp-form textarea:focus { outline: 2px solid var(--prp-accent); outline-offset: 1px; border-color: var(--prp-accent); }
.prp-hint { font-size: .82rem; color: var(--prp-muted); margin: .35rem 0 0; }
.prp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Interactive star input (pure CSS) */
.prp-star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.prp-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prp-star-input label { cursor: pointer; line-height: 0; }
.prp-star-input label svg { width: 34px; height: 34px; fill: var(--prp-star-empty); transition: fill .12s ease, transform .12s ease; }
.prp-star-input label:hover svg,
.prp-star-input label:hover ~ label svg { fill: var(--prp-star); transform: scale(1.1); }
.prp-star-input input:checked ~ label svg { fill: var(--prp-star); }
.prp-star-input input:focus-visible + label svg { outline: 2px solid var(--prp-accent); outline-offset: 2px; border-radius: 4px; }

.prp-captcha { margin: 1.1rem 0; }
.prp-captcha .cf-turnstile { line-height: 0; }
.prp-submit {
	background: var(--prp-accent); color: #fff; border: none; border-radius: 8px;
	padding: .75rem 1.8rem; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.prp-submit:hover { filter: brightness(1.12); }
.prp-submit:disabled { opacity: .6; cursor: wait; }
.prp-form-msg { margin-top: .9rem; font-weight: 600; }
.prp-form-msg.prp-ok { color: #166534; }
.prp-form-msg.prp-err { color: #b91c1c; }
.prp-photo-preview { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.prp-photo-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--prp-border); }

/* ---------- Lightbox ---------- */
.prp-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(15, 23, 42, .88);
	display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.prp-lightbox[hidden] { display: none; }
.prp-lightbox-img { max-width: 90vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.prp-lightbox-close {
	position: absolute; top: 1rem; right: 1.4rem;
	background: none; border: none; color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1;
}

/* ---------- Compact summary ---------- */
.prp-summary-only { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; }
.prp-summary-text a { margin-left: .4rem; }

@media (max-width: 560px) {
	.prp-summary { gap: 1rem; }
	.prp-form { padding: 1.1rem; }
}