/* ==========================================================
   RM Reviews — storefront
   Inherits site fonts; uses local vars so it fits the theme.
   Dark mode keys off [data-theme="dark"] / .sb-dark (SpecialBliss).
   ========================================================== */
.sb-rv,
.sb-rv-submit {
	--sb-rv-bg:        #ffffff;
	--sb-rv-card-bg:   #ffffff;
	--sb-rv-border:    #ececec;
	--sb-rv-text:      #1a1a1a;
	--sb-rv-muted:     #767676;
	--sb-rv-star:      #f0a500;
	--sb-rv-star-off:  #d9d9d9;
	--sb-rv-accent:    var(--sb-pink, #c84b6e);
	--sb-rv-radius:    var(--sb-radius-md, 12px);

	max-width: 1100px;
	margin: 0 auto;
	color: var(--sb-rv-text);
	font-family: var(--sb-font, inherit);
}
.sb-rv { margin-top: 40px; margin-bottom: 40px; }

[data-theme="dark"] .sb-rv,
.sb-dark .sb-rv,
[data-theme="dark"] .sb-rv-submit,
.sb-dark .sb-rv-submit {
	--sb-rv-bg:      #212121;
	--sb-rv-card-bg: #2a2a2a;
	--sb-rv-border:  rgba(255,255,255,.08);
	--sb-rv-text:    #f2f2f2;
	--sb-rv-muted:   #a8a8a8;
	--sb-rv-star-off:#4a4a4a;
}

/* header / aggregate */
.sb-rv__head {
	display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
	padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--sb-rv-border);
}
.sb-rv__summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sb-rv__avg { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.sb-rv__count { color: var(--sb-rv-muted); font-size: .9rem; }

/* rating distribution / filter */
.sb-rv__dist { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.sb-rv__dist-row {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: none; border: 0; padding: 3px 6px; border-radius: 6px; cursor: pointer;
	color: inherit; font: inherit; text-align: left; transition: background .12s ease;
}
.sb-rv__dist-row:hover { background: rgba(240,165,0,.10); }
.sb-rv__dist-row.is-active { background: rgba(240,165,0,.16); }
.sb-rv__dist-row[disabled] { opacity: .45; cursor: default; }
.sb-rv__dist-label { width: 30px; font-size: .82rem; color: var(--sb-rv-muted); white-space: nowrap; }
.sb-rv__dist-bar { flex: 1; height: 8px; border-radius: 6px; background: var(--sb-rv-border); overflow: hidden; }
.sb-rv__dist-fill { display: block; height: 100%; background: var(--sb-rv-star); border-radius: 6px; }
.sb-rv__dist-num { width: 42px; text-align: right; font-size: .8rem; color: var(--sb-rv-muted); }

/* pagination + empty */
.sb-rv-card.is-paged,
.sb-rv-card.is-filtered-out { display: none; }
.sb-rv__more { text-align: center; margin-top: 24px; }
.sb-rv__more-btn {
	appearance: none; -webkit-appearance: none; cursor: pointer;
	background: var(--sb-rv-accent); color: #fff; border: 0; border-radius: var(--sb-rv-radius);
	padding: 12px 28px; font: inherit; font-weight: 600; transition: opacity .15s ease;
}
.sb-rv__more-btn:hover { opacity: .9; }
.sb-rv__empty { text-align: center; color: var(--sb-rv-muted); margin-top: 20px; }

/* list */
/* masonry (CSS columns) — no JS, natural staggered heights */
.sb-rv__list { display: block; column-count: 3; column-gap: 18px; }
@media (max-width: 900px) { .sb-rv__list { column-count: 2; } }
@media (max-width: 560px) { .sb-rv__list { column-count: 1; } }

/* card */
.sb-rv-card {
	background: var(--sb-rv-card-bg); border: 1px solid var(--sb-rv-border);
	border-radius: var(--sb-rv-radius); overflow: hidden; cursor: pointer;
	break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
	display: inline-block; width: 100%; margin: 0 0 18px; vertical-align: top;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.sb-rv-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.10); border-color: rgba(0,0,0,.12); }
.sb-rv-card:focus-visible { outline: 2px solid var(--sb-rv-accent); outline-offset: 2px; }
.sb-rv-card__body { padding: 18px 20px; }

/* cover */
.sb-rv-card__cover { position: relative; width: 100%; line-height: 0; background: #f0f0f0; }
.sb-rv-card__cover img { display: block; width: 100%; height: auto; }
.sb-rv-card__cover-badge {
	position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
	background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600;
	padding: 3px 8px; border-radius: 20px; line-height: 1;
}
.sb-rv-card__cover-badge svg { display: block; }

/* compact body: hide per-dimension + full media row in the grid (shown in lightbox) */
.sb-rv__list .sb-rv-card__dims { display: none; }
.sb-rv__list .sb-rv-card__media { display: none; }
.sb-rv__list .sb-rv-card__content {
	line-height: 1.6; margin-top: 8px; color: var(--sb-rv-text);
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-rv__list .sb-rv-card__content p { margin: 0 0 .5em; }
.sb-rv__list .sb-rv-card__content a { color: var(--sb-rv-accent); text-decoration: underline; }
.sb-rv__list .sb-rv-card__title { margin: 10px 0 0; font-size: 1rem; }
.sb-rv-card__top { display: flex; align-items: flex-start; gap: 14px; }
.sb-rv-card__avatar-img, .sb-rv-card__avatar-fallback {
	width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--sb-rv-accent); color: #fff; font-weight: 600; font-size: 1.1rem;
}
.sb-rv-card__who { flex: 1; min-width: 0; }
.sb-rv-card__name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-rv-card__name { font-weight: 600; }
.sb-rv-card__verified {
	display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600;
	color: #1a8754; background: rgba(26,135,84,.1); padding: 2px 8px; border-radius: 20px;
}
.sb-rv-card__sub { font-size: .82rem; color: var(--sb-rv-muted); margin-top: 2px; }
.sb-rv-card__source { font-style: italic; }
.sb-rv-card__overall { margin-left: auto; }

/* dimension breakdown */
.sb-rv-card__dims {
	display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 4px;
	padding: 12px 0; border-top: 1px solid var(--sb-rv-border); border-bottom: 1px solid var(--sb-rv-border);
}
.sb-rv-card__dim { display: flex; align-items: center; gap: 8px; }
.sb-rv-card__dim-label { font-size: .8rem; color: var(--sb-rv-muted); min-width: 70px; }

/* read-only stars */
.sb-rv-stars-ro { display: inline-flex; gap: 2px; }
.sb-rv-star-ro {
	width: 16px; height: 16px; display: inline-block; background: var(--sb-rv-star-off);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sb-rv-stars-ro--sm .sb-rv-star-ro { width: 13px; height: 13px; }
.sb-rv-star-ro.is-full { background: var(--sb-rv-star); }
.sb-rv-star-ro.is-half { background: linear-gradient(90deg, var(--sb-rv-star) 50%, var(--sb-rv-star-off) 50%); }

/* content */
.sb-rv-card__title { font-size: 1.05rem; font-weight: 700; margin: 14px 0 6px; }
.sb-rv-card__content { line-height: 1.7; }
.sb-rv-card__content a { color: var(--sb-rv-accent); text-decoration: underline; }

/* media */
.sb-rv-card__media { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sb-rv-media { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--sb-rv-border); }
.sb-rv-media--img { width: 96px; height: 96px; }
.sb-rv-media--img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .25s ease; }
.sb-rv-media--img:hover img { transform: scale(1.05); }
.sb-rv-media--video { width: 220px; }
.sb-rv-media--video video { width: 100%; display: block; background: #000; }
.sb-rv-media--embed {
	position: relative; width: 220px; height: 124px; border: 0; cursor: pointer; padding: 0;
	background-size: cover; background-position: center; background-color: #000;
}
.sb-rv-media__play {
	position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%;
	background: rgba(0,0,0,.55); pointer-events: none;
}
.sb-rv-media__play::after {
	content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
	border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
	transform: translateX(2px);
}
.sb-rv-media--embed:hover .sb-rv-media__play { background: var(--sb-rv-accent); }
.sb-rv-media--embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.sb-rv-media--link { padding: 8px 12px; font-size: .8rem; color: var(--sb-rv-accent); word-break: break-all; }

/* footer / helpful */
.sb-rv-card__foot { margin-top: 16px; }
.sb-rv-helpful {
	display: inline-flex; align-items: center; gap: 7px; background: none; cursor: pointer;
	border: 1px solid var(--sb-rv-border); border-radius: 20px; padding: 6px 14px;
	font-size: .82rem; color: var(--sb-rv-muted); transition: all .2s ease;
}
.sb-rv-helpful:hover { border-color: var(--sb-rv-accent); color: var(--sb-rv-accent); }
.sb-rv-helpful.is-done { color: var(--sb-rv-accent); border-color: var(--sb-rv-accent); cursor: default; }

/* lightbox */
.sb-rv-lightbox {
	position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.88); opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sb-rv-lightbox.is-open { opacity: 1; pointer-events: auto; }

/* panel: media (left) + review detail (right) */
.sb-rv-lb {
	position: relative;
	display: flex; gap: 0; width: min(1040px, 92vw); max-height: 88vh;
	background: var(--sb-rv-surface, #fff); color: var(--sb-rv-text, #1d2327);
	border-radius: var(--sb-rv-radius, 12px); overflow: hidden;
}
.sb-rv-lb__media {
	flex: 0 0 56%; min-width: 0; background: #0d0d0d;
	display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; gap: 10px;
}
.sb-rv-lb__stage {
	flex: 1 1 auto; min-height: 0; width: 100%;
	display: flex; align-items: center; justify-content: center;
}
.sb-rv-lb__stage img,
.sb-rv-lb__stage video { max-width: 100%; max-height: 62vh; border-radius: 6px; }
.sb-rv-lb__stage .sb-rv-media--embed { width: 100%; max-width: 100%; aspect-ratio: 16/9; height: auto; }
.sb-rv-lb__stage iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 6px; }
.sb-rv-lb__thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sb-rv-lb__thumb {
	width: 54px; height: 54px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0;
	background: #333 center/cover no-repeat; position: relative;
}
.sb-rv-lb__thumb.is-active { border-color: var(--sb-rv-accent, var(--sb-pink, #c84b6e)); }
.sb-rv-lb__thumb--play::after {
	content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
	border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
}
.sb-rv-lb__detail {
	flex: 1 1 44%; min-width: 0; padding: 26px 28px; overflow-y: auto;
}
.sb-rv-lb--no-media { width: min(620px, 92vw); }
.sb-rv-lb--no-media .sb-rv-lb__detail { flex: 1 1 100%; }
.sb-rv-lb__detail .sb-rv-card__content { font-size: 15px; line-height: 1.7; }

.sb-rv-lightbox__count {
	position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
	color: #fff; background: rgba(0,0,0,.55); padding: 3px 10px; border-radius: 20px;
	font-size: 12px; letter-spacing: .04em; z-index: 3; pointer-events: none;
}
.sb-rv-lightbox__close {
	position: absolute; top: 10px; right: 12px; width: 36px; height: 36px;
	font-size: 26px; color: #fff; background: rgba(0,0,0,.45); border: 0; border-radius: 50%;
	cursor: pointer; line-height: 1; z-index: 4; display: flex; align-items: center; justify-content: center;
}
.sb-rv-lightbox__close:hover { background: rgba(0,0,0,.7); }
.sb-rv-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; z-index: 4;
	background: rgba(0,0,0,.5); color: #fff; font-size: 28px; line-height: 1;
	box-shadow: 0 1px 6px rgba(0,0,0,.25);
	display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.sb-rv-lightbox__nav:hover { background: rgba(0,0,0,.78); }
.sb-rv-lightbox__nav--prev { left: 12px; }
.sb-rv-lightbox__nav--next { right: 12px; }

[data-theme="dark"] .sb-rv-lb,
.sb-dark .sb-rv-lb { background: #181818; color: #e8e8e8; }

@media (max-width: 820px) {
	.sb-rv-lb { flex-direction: column; width: 94vw; max-height: 90vh; overflow-y: auto; }
	.sb-rv-lb__media { flex: none; width: 100%; }
	.sb-rv-lb__stage img, .sb-rv-lb__stage video { max-height: 44vh; }
	.sb-rv-lb__detail { flex: none; }
	/* keep controls anchored to the viewport while the panel scrolls */
	.sb-rv-lightbox__nav { position: fixed; top: 50%; width: 40px; height: 40px; font-size: 24px; }
	.sb-rv-lightbox__nav--prev { left: 8px; }
	.sb-rv-lightbox__nav--next { right: 8px; }
	.sb-rv-lightbox__close { position: fixed; top: 14px; right: 14px; }
	.sb-rv-lightbox__count { position: fixed; bottom: 12px; }
}

@media (max-width: 600px) {
	.sb-rv-card__overall { margin-left: 0; width: 100%; margin-top: 6px; }
	.sb-rv-card__top { flex-wrap: wrap; }
	.sb-rv-media--video, .sb-rv-media--embed { width: 100%; }
}

/* ── visitor submission form ───────────────────────────── */
.sb-rv-submit { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sb-rv-border, #e6e6e6); }
.sb-rv-submit__title { margin: 0 0 16px; font-size: 18px; }
.sb-rv-submit__row { display: flex; gap: 16px; flex-wrap: wrap; }
.sb-rv-submit__row > label { flex: 1 1 220px; }
.sb-rv-submit label,
.sb-rv-submit__field { display: block; margin-bottom: 14px; font-size: 14px; }
.sb-rv-submit input[type="text"],
.sb-rv-submit textarea {
	width: 100%; box-sizing: border-box; margin-top: 6px;
	padding: 10px 12px; border: 1px solid var(--sb-rv-border, #d0d0d0);
	border-radius: var(--sb-rv-radius, 8px); font: inherit;
	background: var(--sb-rv-surface, #fff); color: inherit;
}
.sb-rv-submit__ratings { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 18px; }
.sb-rv-submit__rating { display: flex; flex-direction: column; gap: 4px; }
.sb-rv-submit__dim { font-size: 13px; color: var(--sb-rv-muted, #666); }
.sb-rv-submit__stars { display: inline-flex; gap: 2px; }
.sb-rv-submit__star {
	-webkit-appearance: none; appearance: none;
	width: 26px; height: 26px; padding: 0 !important; margin: 0; cursor: pointer;
	background: none !important; border: 0 !important; box-shadow: none !important;
	min-width: 0 !important; min-height: 0 !important; line-height: 0; display: inline-flex;
}
.sb-rv-submit__star svg { width: 100%; height: 100%; display: block; fill: var(--sb-rv-star-off, #d3d3d3); transition: fill .12s ease; }
.sb-rv-submit__star.is-on svg { fill: var(--sb-rv-star, #f0a500); }
.sb-rv-submit__foot { display: flex; align-items: center; gap: 14px; }
.sb-rv-submit__msg { font-size: 13px; }
.sb-rv-submit__msg.is-ok { color: #1a7f37; }
.sb-rv-submit__msg.is-error { color: #d63638; }
.sb-rv-submit__note { margin: 10px 0 0; font-size: 12px; color: var(--sb-rv-muted, #888); }

[data-theme="dark"] .sb-rv-submit input[type="text"],
[data-theme="dark"] .sb-rv-submit textarea,
.sb-dark .sb-rv-submit input[type="text"],
.sb-dark .sb-rv-submit textarea { background: #1a1a1a; border-color: #3a3a3a; }

/* member submission extras */
.sb-rv-submit__login { font-size: 15px; }
.sb-rv-submit__login a { color: var(--sb-rv-accent); text-decoration: underline; }
.sb-rv-submit__uploads { gap: 16px; }
.sb-rv-submit__upload { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.sb-rv-submit__upload input[type="file"] {
	font: inherit; font-size: 13px; padding: 8px; border: 1px dashed var(--sb-rv-border, #c9c9c9);
	border-radius: var(--sb-rv-radius, 8px); background: var(--sb-rv-surface, #fff); color: inherit; cursor: pointer;
}
.sb-rv-submit__upload small { color: var(--sb-rv-muted, #888); font-size: 12px; }
.sb-rv-submit input[readonly] { background: rgba(0,0,0,.04); cursor: default; }
[data-theme="dark"] .sb-rv-submit input[readonly],
.sb-dark .sb-rv-submit input[readonly] { background: rgba(255,255,255,.06); }