/* Review Hub front end. Every rule is scoped to .rvh so themes and the widget do not fight. */

.rvh {
	--rvh-gap: 20px;
	box-sizing: border-box;
	container-type: inline-size;
	container-name: rvh;
	color: var(--rvh-text);
	font-size: var(--rvh-fs);
	line-height: 1.55;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
.rvh *, .rvh *::before, .rvh *::after { box-sizing: border-box; }
/* Themes and Elementor kits style every button and image; keep ours as designed. */
.rvh.rvh :is(.rvh-tab, .rvh-readmore, .rvh-menu-item):is(:hover, :focus, :active) { background: none; box-shadow: none; text-decoration: none; }
.rvh img.rvh-avatar { width: 44px; height: 44px; max-width: none; border-radius: 50%; object-fit: cover; margin: 0; padding: 0; border: 0; box-shadow: none; }
.rvh :where(svg) { max-width: none; }
.rvh:not(.rvh-layout-badge):not(.rvh-layout-floating):not(.rvh-modal-root) { width: 100%; }
.rvh-layout-badge, .rvh-layout-floating, .rvh-modal-root { container-type: normal; }
.rvh :where(h2, h3, p, ul, figure, fieldset) { margin: 0; padding: 0; border: 0; }
.rvh.rvh :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; line-height: inherit; min-height: 0; }
.rvh.rvh :where(a) { color: var(--rvh-accent); text-decoration: none; box-shadow: none; }
.rvh :where(svg) { display: inline-block; vertical-align: middle; flex: none; }
.rvh .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.rvh [hidden] { display: none !important; }
.rvh :focus-visible { outline: 2px solid var(--rvh-accent); outline-offset: 2px; border-radius: 6px; }

.rvh-inner { max-width: var(--rvh-maxw); margin: 0 auto; }
/* Without its own background the widget sits on the page, so its title follows the page's text colour. */
.rvh:not(.rvh-has-bg):not(.rvh-modal-root) { color: inherit; }
.rvh:not(.rvh-has-bg) .rvh-title-main { color: inherit; }
.rvh:not(.rvh-has-bg) .rvh-title-sub { color: inherit; opacity: .75; }
.rvh-has-bg > .rvh-inner { background: var(--rvh-bg); border-radius: calc(var(--rvh-radius) + 10px); padding: clamp(20px, 4cqi, 40px); max-width: var(--rvh-maxw); }

/* ---------- title ---------- */
.rvh-title { text-align: center; margin-bottom: 24px; }
.rvh .rvh-title-main { font-size: 1.6em; line-height: 1.25; font-weight: 600; color: var(--rvh-text); letter-spacing: .01em; }
.rvh .rvh-title-sub { margin-top: 6px; color: var(--rvh-muted); }

/* ---------- stars ---------- */
.rvh-stars { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.rvh-stars svg { width: 1.05em; height: 1.05em; }
.rvh-stars-base svg { fill: var(--rvh-border); }
.rvh-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; display: inline-flex; }
.rvh-stars-fill svg { fill: var(--rvh-star); }
.rvh-stars-lg svg { width: 1.45em; height: 1.45em; }

/* ---------- header: tabs and overall rating ---------- */
.rvh-head { color: var(--rvh-text); background: var(--rvh-card); border: 1px solid var(--rvh-border); border-radius: var(--rvh-radius); margin-bottom: 24px; overflow: hidden; }
.rvh-has-shadow .rvh-head { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05); }
.rvh-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rvh-border); padding: 0 12px; }
.rvh-tabs::-webkit-scrollbar { display: none; }
.rvh.rvh .rvh-tab { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 14px 12px 12px; border-bottom: 2px solid transparent; color: var(--rvh-muted); font-size: .93em; transition: color .15s, border-color .15s; }
.rvh.rvh .rvh-tab b { color: var(--rvh-text); font-weight: 700; }
.rvh.rvh .rvh-tab:hover { color: var(--rvh-text); }
.rvh.rvh .rvh-tab.is-active { color: var(--rvh-text); border-bottom-color: var(--rvh-accent); }
.rvh-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px; }
.rvh-summary-label { font-weight: 700; font-size: 1.15em; }
.rvh-summary-score { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.rvh-score { font-size: 1.45em; font-weight: 700; }
.rvh-count { color: var(--rvh-muted); font-size: .9em; }

.rvh.rvh .rvh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--rvh-accent); color: #fff; border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: .95em; line-height: 1.2; transition: filter .15s, transform .15s; }
.rvh.rvh .rvh-btn:hover { filter: brightness(1.08); color: #fff; }
.rvh.rvh .rvh-btn:active { transform: translateY(1px); }

/* ---------- review card ---------- */
.rvh-review { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--rvh-card); border: 1px solid var(--rvh-border); border-radius: var(--rvh-radius); padding: 22px; color: var(--rvh-text); min-width: 0; }
.rvh-has-shadow .rvh-review { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05); }
.rvh-author-row { display: flex; align-items: center; gap: 12px; }
.rvh-author-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rvh-author { font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvh-date { color: var(--rvh-muted); font-size: .85em; }
.rvh-avatar-wrap { position: relative; width: 44px; height: 44px; flex: none; }
.rvh-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.rvh-avatar-wrap .rvh-avatar-fallback { position: absolute; inset: 0; z-index: 0; }
.rvh-avatar-wrap img { position: relative; z-index: 1; background: var(--rvh-card); }
.rvh-avatar-wrap.is-broken img { display: none; }
.rvh-avatar-initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 1.15em; }
.rvh-source { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--rvh-muted); line-height: 1.2; }
a.rvh-source:hover { opacity: .85; }
.rvh .rvh-review-title { font-weight: 700; }
.rvh-text { overflow: hidden; }
.rvh-text p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--rvh-lines); line-clamp: var(--rvh-lines); overflow: hidden; overflow-wrap: anywhere; }
.rvh-review.is-open .rvh-text p { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
.rvh.rvh .rvh-readmore { align-self: flex-start; color: var(--rvh-accent); font-weight: 600; font-size: .92em; }
.rvh.rvh .rvh-readmore:hover { text-decoration: underline; }
.rvh-reply { border-left: 3px solid var(--rvh-border); padding: 4px 0 4px 12px; font-size: .92em; color: var(--rvh-muted); }
.rvh-reply-label { font-weight: 700; color: var(--rvh-text); margin-bottom: 2px; }

/* Spotlight: centered, stars first, "Posted on" at the bottom. */
.rvh-card-spotlight .rvh-review { text-align: center; align-items: center; padding: 30px 26px; gap: 12px; }
.rvh-card-spotlight .rvh-review .rvh-stars svg { width: 1.3em; height: 1.3em; }
.rvh.rvh.rvh-card-spotlight .rvh-readmore { align-self: center; }
.rvh-author-center { flex-direction: column; gap: 8px; margin-top: auto; padding-top: 6px; }
.rvh-author-center .rvh-author-meta { align-items: center; }
.rvh-card-spotlight .rvh-source { margin: 2px auto 0; }
.rvh-source-text { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.15; }
.rvh-source-text small { font-size: .72em; color: var(--rvh-muted); }
.rvh-source-text span { color: var(--rvh-accent); font-weight: 600; font-size: .95em; }

/* Bubble: quote bubble with a tail, author underneath. */
.rvh-card-bubble .rvh-review { background: transparent; border: 0; padding: 0; box-shadow: none !important; gap: 14px; }
.rvh-bubble { position: relative; background: var(--rvh-card); border: 1px solid var(--rvh-border); border-radius: var(--rvh-radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.rvh-has-shadow .rvh-bubble { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05); }
.rvh-bubble::after { content: ""; position: absolute; left: 28px; bottom: -9px; width: 16px; height: 16px; background: var(--rvh-card); border-right: 1px solid var(--rvh-border); border-bottom: 1px solid var(--rvh-border); transform: rotate(45deg); }
.rvh-card-bubble .rvh-author-row { padding-left: 14px; }

/* Minimal: text first, one small author line. */
.rvh-card-minimal .rvh-review { gap: 8px; }
.rvh-minimal-by { display: flex; align-items: center; gap: 8px; color: var(--rvh-muted); font-size: .9em; margin-top: auto; }
.rvh-minimal-by .rvh-source { margin-left: auto; }

/* ---------- carousel and slider ---------- */
.rvh-carousel { position: relative; padding: 0 22px; }
.rvh-viewport { overflow: hidden; margin: -12px; padding: 12px; touch-action: pan-y; }
.rvh-track { display: flex; gap: var(--rvh-gap); transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.rvh-track > .rvh-review { flex: 0 0 calc((100% - (var(--c) - 1) * var(--rvh-gap)) / var(--c)); --c: var(--rvh-cols); }
.rvh-track.is-dragging { transition: none; }
.rvh-layout-slider .rvh-track > .rvh-review { --c: 1 !important; }
.rvh-layout-slider .rvh-review { max-width: none; font-size: 1.08em; }
.rvh-layout-slider .rvh-carousel { max-width: 860px; margin: 0 auto; }
.rvh-layout-slider .rvh-track { align-items: flex-start; }
.rvh-layout-slider .rvh-author-center { margin-top: 6px; }
.rvh.rvh .rvh-nav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rvh-card); color: var(--rvh-text); border: 1px solid var(--rvh-border); box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: transform .15s, opacity .15s; }
.rvh.rvh .rvh-nav:hover { transform: scale(1.06); }
.rvh.rvh .rvh-nav[disabled] { opacity: .35; cursor: default; transform: none; }
.rvh-prev { left: -4px; }
.rvh-next { right: -4px; }
.rvh-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.rvh.rvh .rvh-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rvh-border); transition: background .2s, transform .2s; }
.rvh.rvh .rvh-dot.is-active { background: var(--rvh-accent); transform: scale(1.25); }

/* ---------- grid, masonry, list ---------- */
.rvh-layout-grid .rvh-items { display: grid; gap: var(--rvh-gap); grid-template-columns: repeat(var(--rvh-cols), minmax(0, 1fr)); align-items: start; }
.rvh-layout-masonry .rvh-items { column-count: var(--rvh-cols); column-gap: var(--rvh-gap); }
.rvh-layout-masonry .rvh-review { break-inside: avoid; margin-bottom: var(--rvh-gap); }
.rvh-layout-masonry .rvh-review[hidden] { display: none; }
.rvh-layout-list .rvh-items, .rvh-panel-content .rvh-items { display: flex; flex-direction: column; gap: 16px; max-width: 860px; margin: 0 auto; }
.rvh-more-wrap { text-align: center; margin-top: 24px; }
.rvh.rvh .rvh-load-more { background: var(--rvh-card); color: var(--rvh-text); border: 1px solid var(--rvh-border); }
.rvh.rvh .rvh-load-more:hover { color: var(--rvh-text); filter: none; border-color: var(--rvh-accent); }
.rvh-review.rvh-filtered { display: none !important; }
.rvh-empty { text-align: center; color: var(--rvh-muted); padding: 30px 0; }

/* ---------- ticker ---------- */
.rvh-ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); padding: 10px 0; }
.rvh-ticker-track { display: flex; gap: var(--rvh-gap); width: max-content; animation: rvh-ticker var(--rvh-ticker-dur, 60s) linear infinite; }
.rvh-ticker:hover .rvh-ticker-track, .rvh-ticker:focus-within .rvh-ticker-track { animation-play-state: paused; }
.rvh-ticker .rvh-review { width: 320px; flex: none; }
@keyframes rvh-ticker { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--rvh-gap) / 2)); } }

/* ---------- badges ---------- */
.rvh-badge-wrap { display: flex; justify-content: center; }
.rvh.rvh .rvh-badge { display: inline-flex; align-items: center; gap: 14px; background: var(--rvh-card); color: var(--rvh-text); border: 1px solid var(--rvh-border); border-radius: var(--rvh-radius); padding: 14px 20px; text-align: left; transition: transform .15s, box-shadow .15s; }
.rvh-has-shadow .rvh-badge { box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.1); }
.rvh.rvh .rvh-badge:hover { transform: translateY(-2px); }
.rvh-badge-icons { display: inline-flex; gap: 5px; }
.rvh-badge-body { display: flex; flex-direction: column; line-height: 1.25; }
.rvh-badge-label { font-size: .85em; color: var(--rvh-muted); font-weight: 600; }
.rvh-badge-score { display: inline-flex; align-items: center; gap: 6px; }
.rvh-badge-score b { font-size: 1.35em; }
.rvh-badge-count { font-size: .82em; color: var(--rvh-accent); font-weight: 600; }
.rvh.rvh .rvh-badge.rvh-badge-pill { border-radius: 999px; padding: 8px 18px 8px 10px; }
.rvh.rvh .rvh-badge.rvh-badge-compact { padding: 8px 12px; gap: 8px; font-size: .9em; }
.rvh.rvh .rvh-badge-compact .rvh-badge-label { display: none; }

.rvh-floating { position: fixed; bottom: 20px; z-index: 99990; display: flex; align-items: flex-start; }
.rvh-floating-left { left: 20px; }
.rvh-floating-right { right: 20px; }
.rvh.rvh .rvh-floating-close { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--rvh-text); color: var(--rvh-card); font-size: 15px; line-height: 22px; text-align: center; opacity: 0; transition: opacity .15s; }
.rvh.rvh .rvh-floating:hover .rvh-floating-close, .rvh.rvh .rvh-floating:focus-within .rvh-floating-close { opacity: 1; }
@media (hover: none) { .rvh.rvh .rvh-floating-close { opacity: 1; } }
@media (max-width: 640px) {
	.rvh-floating { bottom: 12px; }
	.rvh-floating-left { left: 12px; }
	.rvh-floating-right { right: 12px; }
	.rvh-floating.rvh-hide-mobile { display: none; }
	.rvh.rvh .rvh-floating .rvh-badge { padding: 8px 12px; gap: 8px; }
	.rvh-floating .rvh-badge-label { display: none; }
}

/* ---------- popups (built by frontend.js, carry the widget's colours) ---------- */
.rvh-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; container-type: normal; }
.rvh-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 12, 20, .62); animation: rvh-fade .2s ease; }
.rvh-modal-box { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 40px); overflow: auto; overscroll-behavior: contain; background: var(--rvh-card); color: var(--rvh-text); border-radius: calc(var(--rvh-radius) + 4px); padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: rvh-pop .22s ease; }
.rvh-modal-side { justify-content: flex-start; padding: 0; }
.rvh-modal-side.rvh-side-right { justify-content: flex-end; }
.rvh-modal-side .rvh-modal-box { max-width: 520px; height: 100%; max-height: none; border-radius: 0; animation: rvh-slide-l .28s ease; padding: 26px 22px; }
.rvh-modal-side.rvh-side-right .rvh-modal-box { animation-name: rvh-slide-r; }
.rvh.rvh .rvh-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; line-height: 36px; text-align: center; color: var(--rvh-muted); z-index: 2; }
.rvh.rvh .rvh-modal-close:hover { background: var(--rvh-border); color: var(--rvh-text); }
.rvh-modal .rvh-review { border: 0; padding: 0; box-shadow: none !important; background: transparent; }
.rvh-modal .rvh-review .rvh-text p { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
.rvh-modal .rvh-panel-content .rvh-review { border: 1px solid var(--rvh-border); padding: 18px; }
.rvh-modal .rvh-head { margin-bottom: 18px; }
.rvh-modal .rvh-title { margin: 0 40px 16px 0; text-align: left; }
.rvh-modal .rvh-title-main { font-size: 1.3em; }
body.rvh-lock { overflow: hidden; }
@keyframes rvh-fade { from { opacity: 0; } }
@keyframes rvh-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes rvh-slide-l { from { transform: translateX(-100%); } }
@keyframes rvh-slide-r { from { transform: translateX(100%); } }

/* Write a review menu and form */
.rvh .rvh-menu-title { font-size: 1.2em; font-weight: 700; margin: 0 40px 18px 0; }
.rvh-menu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.rvh.rvh .rvh-menu-item { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--rvh-border); border-radius: var(--rvh-radius); color: var(--rvh-text); font-weight: 600; text-align: left; transition: border-color .15s, transform .15s; }
.rvh.rvh .rvh-menu-item:hover { border-color: var(--rvh-accent); transform: translateY(-1px); color: var(--rvh-text); }
.rvh-form { display: flex; flex-direction: column; gap: 14px; }
.rvh-rate legend { font-weight: 600; margin-bottom: 4px; }
.rvh-rate-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rvh-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rvh-rate-stars label { font-size: 34px; line-height: 1; color: var(--rvh-border); cursor: pointer; transition: color .1s, transform .1s; }
.rvh-rate-stars input:checked ~ label, .rvh-rate-stars label:hover, .rvh-rate-stars label:hover ~ label { color: var(--rvh-star); }
.rvh-rate-stars input:focus-visible + label { outline: 2px solid var(--rvh-accent); border-radius: 4px; }
.rvh-field { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .92em; }
.rvh .rvh-field input, .rvh .rvh-field textarea { width: 100%; font: inherit; font-weight: 400; font-size: 15px; color: var(--rvh-text); background: transparent; border: 1px solid var(--rvh-border); border-radius: 10px; padding: 11px 13px; margin: 0; box-shadow: none; }
.rvh .rvh-field input:focus, .rvh .rvh-field textarea:focus { border-color: var(--rvh-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rvh-accent) 25%, transparent); }
.rvh-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rvh-form-msg:empty { display: none; }
.rvh-form-msg { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--rvh-accent) 12%, transparent); font-size: .92em; }
.rvh-form-msg.is-error { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.rvh.rvh .rvh-form .rvh-btn { align-self: flex-start; }
.rvh.rvh .rvh-form .rvh-btn[disabled] { opacity: .6; cursor: wait; }

/* ---------- responsive (by the widget's own width, so it also works in narrow columns) ---------- */
@container rvh (max-width: 1000px) {
	.rvh-track > .rvh-review { --c: var(--rvh-cols-t); }
	.rvh-layout-grid .rvh-items { grid-template-columns: repeat(var(--rvh-cols-t), minmax(0, 1fr)); }
	.rvh-layout-masonry .rvh-items { column-count: var(--rvh-cols-t); }
}
@container rvh (max-width: 620px) {
	.rvh-track > .rvh-review { --c: var(--rvh-cols-m); }
	.rvh-layout-grid .rvh-items { grid-template-columns: repeat(var(--rvh-cols-m), minmax(0, 1fr)); }
	.rvh-layout-masonry .rvh-items { column-count: var(--rvh-cols-m); }
	.rvh-carousel { padding: 0 6px; }
	.rvh-layout-carousel .rvh-track { align-items: flex-start; }
	.rvh-layout-carousel .rvh-author-center { margin-top: 6px; }
	.rvh.rvh .rvh-nav { width: 34px; height: 34px; margin-top: -17px; }
	.rvh-prev { left: -10px; }
	.rvh-next { right: -10px; }
	.rvh-summary { padding: 16px; }
	.rvh.rvh .rvh-summary .rvh-write { width: 100%; }
	.rvh-review { padding: 18px; }
	.rvh-ticker .rvh-review { width: 270px; }
	.rvh .rvh-title-main { font-size: 1.35em; }
}
@media (max-width: 640px) {
	.rvh-modal { padding: 0; align-items: flex-end; }
	.rvh-modal-box { max-height: 88vh; border-radius: 18px 18px 0 0; padding: 26px 20px; }
	.rvh-modal-side .rvh-modal-box { max-width: 100%; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rvh-track { transition: none; }
	.rvh-ticker-track { animation: none; }
	.rvh-ticker { overflow-x: auto; }
	.rvh-modal-box, .rvh-modal-backdrop { animation: none; }
}