/* Review Board — scoped under .rvb. Colours fall back to the Kadence global
   palette, then Elementor's global colours, then neutral defaults. Buttons and
   inputs use doubled classes (.rvb.rvb) so theme/Elementor kit styles for
   generic button/input elements don't leak in. */

.rvb {
	--rvb-accent: var(--global-palette1, var(--e-global-color-accent, #2563eb));
	--rvb-star: #f5a524;
	--rvb-text: var(--global-palette3, #1f2937);
	--rvb-muted: var(--global-palette5, #6b7280);
	--rvb-border: var(--global-palette7, #e5e7eb);
	--rvb-soft: var(--global-palette8, #f6f7f9);
	--rvb-surface: var(--global-palette9, #ffffff);
	--rvb-line: color-mix(in srgb, var(--rvb-border) 72%, var(--rvb-text));
	--rvb-radius: 12px;
	--rvb-gap: 14px;

	color: var(--rvb-text);
	font-size: 15px;
	line-height: 1.55;
	display: flex;
	flex-direction: column;
	gap: var(--rvb-gap);
	max-width: 100%;
	margin: 0 0 1.5em;
}
.rvb *,
.rvb *::before,
.rvb *::after { box-sizing: border-box; }
.rvb [hidden] { display: none !important; }
.rvb svg { display: block; flex: none; }
.rvb .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.rvb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rvb .rvb-heading { margin: 0; font-size: 1.35em; line-height: 1.2; color: var(--rvb-text); }
.rvb-top .rvb-write { margin-left: auto; }

/* ---------- Buttons ---------- */
.rvb.rvb .rvb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 40px; padding: 8px 16px; margin: 0;
	font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none;
	border: 1px solid transparent; border-radius: 999px; box-shadow: none;
	cursor: pointer; text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s, transform .1s, opacity .15s;
}
.rvb.rvb .rvb-btn svg { width: 16px; height: 16px; }
.rvb.rvb .rvb-btn:active { transform: translateY(1px); }
.rvb.rvb .rvb-btn--primary { background: var(--rvb-accent); color: #fff; }
.rvb.rvb .rvb-btn--primary:hover,
.rvb.rvb .rvb-btn--primary:focus-visible { background: color-mix(in srgb, var(--rvb-accent) 86%, #000); color: #fff; }
.rvb.rvb .rvb-btn--ghost { background: transparent; color: var(--rvb-text); border-color: var(--rvb-border); }
.rvb.rvb .rvb-btn--ghost:hover,
.rvb.rvb .rvb-btn--ghost:focus-visible { background: var(--rvb-soft); color: var(--rvb-text); border-color: color-mix(in srgb, var(--rvb-border) 60%, var(--rvb-text)); }
.rvb.rvb .rvb-btn[disabled] { opacity: .6; cursor: progress; }
.rvb.rvb button:focus-visible,
.rvb.rvb .rvb-input:focus-visible { outline: 2px solid var(--rvb-accent); outline-offset: 2px; }

/* ---------- Stars ---------- */
.rvb-stars { position: relative; display: inline-flex; vertical-align: middle; line-height: 0; }
.rvb-stars-base,
.rvb-stars-fill { display: flex; gap: 2px; }
.rvb-stars-base svg { fill: color-mix(in srgb, var(--rvb-border) 80%, var(--rvb-text)); }
.rvb-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
.rvb-stars-fill svg { fill: var(--rvb-star); }
.rvb-stars svg { width: 18px; height: 18px; }
.rvb-stars--sm svg { width: 14px; height: 14px; }

/* ---------- Summary ---------- */
.rvb-summary {
	display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; align-items: center;
	padding: 16px 18px; background: var(--rvb-soft); border-radius: var(--rvb-radius);
}
.rvb-score { display: flex; align-items: center; gap: 12px; }
.rvb-avg { font-size: 2.6em; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.rvb-based { display: block; margin-top: 4px; font-size: 13px; color: var(--rvb-muted); }
.rvb-bars { display: grid; gap: 3px; min-width: 0; }
.rvb.rvb .rvb-bar {
	display: grid; grid-template-columns: 14px 1fr 38px; align-items: center; gap: 8px;
	width: 100%; min-height: 0; padding: 2px 4px; margin: 0;
	background: transparent; border: 0; border-radius: 6px; box-shadow: none;
	font: inherit; font-size: 12px; line-height: 1.4; color: var(--rvb-muted); text-align: left; cursor: pointer;
}
.rvb.rvb .rvb-bar:hover,
.rvb.rvb .rvb-bar.is-active { background: color-mix(in srgb, var(--rvb-surface) 70%, transparent); color: var(--rvb-text); }
.rvb-bar-label { text-align: right; font-weight: 600; }
.rvb-bar-track { height: 7px; background: color-mix(in srgb, var(--rvb-border) 85%, var(--rvb-text)); border-radius: 99px; overflow: hidden; }
.rvb-bar-fill { display: block; height: 100%; background: var(--rvb-star); border-radius: inherit; transition: width .4s ease; }
.rvb-bar-pct { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Form ---------- */
.rvb-form {
	display: grid; gap: 12px; padding: 18px; margin: 0;
	background: var(--rvb-surface); border: 1px solid var(--rvb-border); border-radius: var(--rvb-radius);
	box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .25);
	animation: rvb-in .2s ease;
}
.rvb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rvb-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; min-width: 0; }
.rvb-rate legend { float: left; padding: 0; margin: 0 4px 0 0; font-size: 13px; font-weight: 600; }
.rvb-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rvb-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rvb-rate-stars label { cursor: pointer; padding: 2px; margin: 0; line-height: 0; border-radius: 6px; }
.rvb-rate-stars svg { width: 30px; height: 30px; fill: color-mix(in srgb, var(--rvb-border) 80%, var(--rvb-text)); transition: fill .12s, transform .12s; }
.rvb-rate-stars label:hover svg { transform: scale(1.12); }
.rvb-rate-stars input:checked ~ label svg { fill: var(--rvb-star); }
.rvb-rate-stars:hover input ~ label svg { fill: color-mix(in srgb, var(--rvb-border) 80%, var(--rvb-text)); }
.rvb-rate-stars:hover label:hover svg,
.rvb-rate-stars:hover label:hover ~ label svg { fill: var(--rvb-star); }
.rvb-rate-stars input:focus-visible + label { outline: 2px solid var(--rvb-accent); outline-offset: 1px; }
.rvb-rate-word { font-size: 13px; font-weight: 600; color: var(--rvb-muted); min-height: 1em; }
.rvb-rate.is-invalid .rvb-rate-stars svg { fill: color-mix(in srgb, #dc2626 35%, var(--rvb-border)); }

.rvb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rvb-field { display: grid; gap: 4px; margin: 0; font-size: 13px; font-weight: 600; }
.rvb-field small { font-weight: 400; color: var(--rvb-muted); }
.rvb.rvb .rvb-input {
	width: 100%; min-height: 40px; margin: 0; padding: 8px 12px;
	font: inherit; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--rvb-text);
	background: var(--rvb-surface); border: 1px solid var(--rvb-line); border-radius: 10px; box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.rvb.rvb textarea.rvb-input { min-height: 96px; resize: vertical; }
.rvb.rvb .rvb-input:focus { outline: none; border-color: var(--rvb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rvb-accent) 18%, transparent); }
.rvb.rvb .rvb-input.is-invalid { border-color: #dc2626; }
.rvb-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.rvb .rvb-msg { margin: 0 auto 0 0; font-size: 13px; font-weight: 500; }
.rvb-msg.is-error { color: #dc2626; }
.rvb-msg.is-ok { color: #15803d; }

/* ---------- Toolbar ---------- */
.rvb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rvb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rvb.rvb .rvb-chip {
	display: inline-flex; align-items: center; gap: 4px;
	min-height: 32px; padding: 4px 11px; margin: 0;
	font: inherit; font-size: 13px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0;
	color: var(--rvb-text); background: var(--rvb-surface);
	border: 1px solid var(--rvb-border); border-radius: 999px; box-shadow: none; cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.rvb.rvb .rvb-chip:hover { border-color: color-mix(in srgb, var(--rvb-border) 50%, var(--rvb-text)); background: var(--rvb-soft); color: var(--rvb-text); }
.rvb.rvb .rvb-chip.is-active { background: var(--rvb-text); border-color: var(--rvb-text); color: var(--rvb-surface); }
.rvb-chip-star svg { width: 13px; height: 13px; fill: var(--rvb-star); }
.rvb-count { font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }
.rvb-tools { display: flex; gap: 8px; flex: 1 1 280px; justify-content: flex-end; }
.rvb-search { position: relative; flex: 1 1 160px; max-width: 240px; margin: 0; }
.rvb-search svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--rvb-muted); pointer-events: none; }
.rvb.rvb .rvb-search-input { min-height: 34px; padding: 5px 12px 5px 32px; font-size: 13px; border-radius: 999px; }
.rvb-sort { margin: 0; flex: none; }
.rvb.rvb .rvb-sort-select {
	min-height: 34px; padding: 5px 30px 5px 12px; font-size: 13px; border-radius: 999px; width: auto;
	appearance: none; -webkit-appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}

/* ---------- Reviews ---------- */
.rvb-list { display: grid; gap: 0; transition: opacity .2s; }
.rvb.is-loading .rvb-list { opacity: .45; pointer-events: none; }
.rvb--grid .rvb-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--rvb-gap); }

.rvb-card { padding: 16px 2px; border-top: 1px solid var(--rvb-border); min-width: 0; }
.rvb-list .rvb-card:last-child { border-bottom: 1px solid var(--rvb-border); }
.rvb--grid .rvb-card { padding: 16px; border: 1px solid var(--rvb-border) !important; border-radius: var(--rvb-radius); background: var(--rvb-surface); }
.rvb-card.is-new { animation: rvb-new 2.4s ease; border-radius: 8px; }

.rvb-card-head { display: flex; align-items: center; gap: 10px; }
.rvb-avatar {
	display: grid; place-items: center; flex: none;
	width: 36px; height: 36px; border-radius: 50%;
	background: hsl(var(--h, 210) 55% 92%); color: hsl(var(--h, 210) 45% 32%);
	font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.rvb-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rvb-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvb-who time { font-size: 12px; color: var(--rvb-muted); }
.rvb-card-head .rvb-stars { margin-left: auto; }
.rvb .rvb-card-title { margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--rvb-text); }
.rvb-text { margin-top: 6px; font-size: 14.5px; overflow-wrap: anywhere; }
.rvb .rvb-text p { margin: 0 0 .6em; }
.rvb .rvb-text p:last-child { margin-bottom: 0; }
.rvb-text { line-height: 1.55; }
.rvb-text.is-clamped {
	max-height: 6.2em; overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
}
.rvb.rvb .rvb-readmore,
.rvb.rvb .rvb-helpful {
	display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin: 4px 0 0; padding: 0;
	background: none; border: 0; box-shadow: none; border-radius: 4px;
	font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; text-transform: none; letter-spacing: 0;
	color: var(--rvb-accent); cursor: pointer;
}
.rvb.rvb .rvb-readmore:hover { text-decoration: underline; background: none; color: var(--rvb-accent); }
.rvb-reply {
	margin-top: 10px; padding: 10px 12px; font-size: 13.5px;
	background: var(--rvb-soft); border-left: 3px solid var(--rvb-accent); border-radius: 0 8px 8px 0;
}
.rvb-reply strong { display: block; font-size: 12px; margin-bottom: 2px; }
.rvb .rvb-reply p { margin: 0; }
.rvb-card-foot { margin-top: 8px; }
.rvb.rvb .rvb-helpful { color: var(--rvb-muted); font-weight: 500; padding: 4px 10px 4px 8px; margin-left: -8px; border-radius: 999px; }
.rvb.rvb .rvb-helpful svg { width: 15px; height: 15px; }
.rvb.rvb .rvb-helpful:hover { background: var(--rvb-soft); color: var(--rvb-text); }
.rvb.rvb .rvb-helpful.is-voted { color: var(--rvb-accent); cursor: default; background: none; }
.rvb.rvb .rvb-helpful.is-voted svg path { fill: color-mix(in srgb, var(--rvb-accent) 20%, transparent); }

.rvb .rvb-empty { margin: 0; padding: 22px 16px; text-align: center; color: var(--rvb-muted); background: var(--rvb-soft); border-radius: var(--rvb-radius); }
.rvb-empty .rvb-empty-filtered,
.rvb-empty.is-filtered .rvb-empty-none { display: none; }
.rvb-empty.is-filtered .rvb-empty-filtered { display: inline; }
.rvb-more-wrap { display: flex; justify-content: center; }

@keyframes rvb-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes rvb-new {
	0%, 40% { background: color-mix(in srgb, var(--rvb-accent) 10%, transparent); }
	100% { background: transparent; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.rvb { font-size: 14.5px; }
	.rvb-summary { grid-template-columns: 1fr; padding: 14px; }
	.rvb-grid2 { grid-template-columns: 1fr; }
	.rvb-toolbar { flex-direction: column; align-items: stretch; }
	.rvb-chips { gap: 5px; }
	.rvb.rvb .rvb-chip { flex: 1 1 auto; justify-content: center; padding: 4px 6px; gap: 3px; }
	.rvb-tools { flex-basis: auto; }
	.rvb-search { max-width: none; }
	.rvb-top .rvb-write { margin-left: 0; width: 100%; }
	.rvb-form { padding: 14px; }
	.rvb-form-foot .rvb-btn { flex: 1; }
	.rvb-msg { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.rvb *, .rvb *::before, .rvb *::after { animation: none !important; transition: none !important; }
}

.rvb .rvb-toast { margin: -4px 0 0; }