:root {
    --cp-star-color: #f5a623;
    --cp-star-empty: #d1d5db;
    --cp-star-size: 20px;
    --cp-reviews-gap: 1.25rem;
}

.cp-reviews { display: flex; flex-direction: column; gap: var(--cp-reviews-gap); }
.cp-reviews__summary { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.cp-reviews__avg strong { font-size: 2rem; line-height: 1; margin-right: .5rem; }
.cp-reviews__breakdown { list-style: none; padding: 0; margin: 0; min-width: 220px; }
.cp-reviews__breakdown-row { display: grid; grid-template-columns: 64px 1fr 32px; gap: .5rem; align-items: center; }
.cp-reviews__breakdown-bar { background: #f3f4f6; height: 8px; border-radius: 999px; overflow: hidden; }
.cp-reviews__breakdown-bar span { display: block; height: 100%; background: var(--cp-star-color); }

.cp-reviews-stars-static, .cp-reviews-stars { display: inline-flex; gap: 2px; }
.cp-reviews-star { font-size: var(--cp-star-size); color: var(--cp-star-empty); line-height: 1; }
.cp-reviews-star.is-filled { color: var(--cp-star-color); }

.cp-reviews-form { display: grid; gap: 1rem; max-width: 640px; }
.cp-reviews-field { display: flex; flex-direction: column; gap: .35rem; }
.cp-reviews-field--honeypot { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.cp-reviews-field input[type="text"],
.cp-reviews-field input[type="email"],
.cp-reviews-field textarea { padding: .55rem .75rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.cp-reviews-form .cp-reviews-stars { font-size: var(--cp-star-size); }
/*
 * Visually hide the radio with the WordPress core "screen-reader-text" clip
 * pattern. This keeps the radio in the accessibility tree (focusable by
 * keyboard, operable by screen readers) while letting the star glyph next
 * to it serve as the visual control via the wrapping <label>. Earlier
 * versions used `pointer-events: none` here, which made the radios
 * unreachable to anything except a label click — an a11y regression.
 */
.cp-reviews-form .cp-reviews-stars input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}
.cp-reviews-form .cp-reviews-star { cursor: pointer; }
.cp-reviews-form .cp-reviews-star input:checked ~ .cp-reviews-star__svg { color: var(--cp-star-color); }
/* Visible focus ring on the star glyph when the (invisible) radio is keyboard-focused. */
.cp-reviews-form .cp-reviews-star input:focus-visible ~ .cp-reviews-star__svg {
    outline: 2px solid var(--cp-star-color);
    outline-offset: 2px;
    border-radius: 2px;
}

.cp-reviews-submit { padding: .65rem 1.25rem; background: #111827; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.cp-reviews-submit:disabled { opacity: .6; cursor: progress; }
.cp-reviews-form__feedback { min-height: 1.5em; font-size: .95rem; }
.cp-reviews-form__feedback.is-success { color: #047857; }
.cp-reviews-form__feedback.is-error   { color: #b91c1c; }

.cp-reviews-card { padding: 1rem 0; border-top: 1px solid #e5e7eb; }
.cp-reviews-card__header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cp-reviews-card__title { margin: .35rem 0 .25rem; font-size: 1.05rem; }
.cp-reviews-card__date { color: #6b7280; font-size: .85rem; }
.cp-reviews-readmore { background: none; border: none; color: #2563eb; cursor: pointer; padding: 0; font: inherit; }

.cp-reviews__loadmore { align-self: center; margin-top: 1rem; padding: .55rem 1.25rem; background: transparent; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; }

.cp-reviews-image-strip {
    list-style: none;
    padding: 0;
    margin: 1em 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}
.cp-reviews-image-strip__item { margin: 0; }
.cp-reviews-image-strip a {
    display: block;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
    transition: transform .15s ease;
}
.cp-reviews-image-strip a:hover,
.cp-reviews-image-strip a:focus-visible { transform: scale(1.02); }
.cp-reviews-image-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (prefers-reduced-motion: reduce) {
    .cp-reviews-image-strip a { transition: none; }
}

.cp-reviews-field--images input[type="file"] {
    font: inherit;
}
.cp-reviews-upload-preview {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.cp-reviews-upload-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #d1d5db;
}
.cp-reviews-upload-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cp-reviews-upload-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    border: none;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
    padding: 0;
}
.cp-reviews-image-error {
    color: #b91c1c;
    font-size: .875rem;
    margin: .25rem 0 0;
}

.cp-reviews-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-reviews-lightbox[hidden] { display: none; }
.cp-reviews-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
}
.cp-reviews-lightbox__stage {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    margin: 0;
}
.cp-reviews-lightbox__image {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.cp-reviews-lightbox__close,
.cp-reviews-lightbox__prev,
.cp-reviews-lightbox__next {
    position: absolute;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border: none;
    font-size: 2em;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 1;
    line-height: 1;
}
.cp-reviews-lightbox__close { top: 1em; right: 1em; }
.cp-reviews-lightbox__prev  { left: 1em;  top: 50%; transform: translateY(-50%); }
.cp-reviews-lightbox__next  { right: 1em; top: 50%; transform: translateY(-50%); }
.cp-reviews-lightbox__close:focus-visible,
.cp-reviews-lightbox__prev:focus-visible,
.cp-reviews-lightbox__next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
body.cp-reviews-lightbox-open { overflow: hidden; }

.cp-reviews-widget--display { display: block; }
.cp-reviews-widget--display.cp-reviews-widget--grid {
	display: grid;
	grid-template-columns: repeat(var(--cp-widget-columns, 3), minmax(0, 1fr));
	gap: 1rem;
}
.cp-reviews-widget--display .cp-reviews-card {
	background: var(--cp-card-bg, transparent);
	border-radius: var(--cp-card-border-radius, 0);
}
.cp-reviews-widget-notice {
	padding: 1rem;
	background: #fef3c7;
	border: 1px solid #fde68a;
	border-radius: 4px;
	color: #78350f;
}

.cp-reviews-widget--summary .cp-reviews-summary__rating {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: .75rem;
}
.cp-reviews-widget--summary .cp-reviews-summary__avg {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}
.cp-reviews-widget--summary .cp-reviews-summary__count {
	color: #6b7280;
}
.cp-reviews-widget--summary .cp-reviews-summary__distribution {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .35rem;
}
.cp-reviews-widget--summary .cp-reviews-summary__distribution li {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	gap: .5rem;
	align-items: center;
}
.cp-reviews-widget--summary .cp-reviews-summary__bar {
	background: var(--cp-bar-bg, #f3f4f6);
	border-radius: 999px;
	height: var(--cp-bar-height, 8px);
	overflow: hidden;
	display: block;
}
.cp-reviews-widget--summary .cp-reviews-summary__fill {
	background: var(--cp-bar-fill, var(--cp-star-color));
	display: block;
	height: 100%;
}
.cp-reviews-widget--summary .cp-reviews-summary__label,
.cp-reviews-widget--summary .cp-reviews-summary__n {
	font-size: .85rem;
	color: #6b7280;
}

/* Phase 3: Verified-purchase badge */
.cp-reviews-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	font-size: 0.75em;
	font-weight: 600;
	color: #fff;
	background-color: #2e7d32;
	border-radius: 10px;
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
}
.cp-reviews-verified-badge__icon {
	flex-shrink: 0;
	color: currentColor;
}
@media (forced-colors: active) {
	.cp-reviews-verified-badge {
		border: 1px solid currentColor;
		background-color: ButtonFace;
		color: ButtonText;
	}
}