/* Trustedshops Reviews Sync - front end
 * Andrew Oliver 24-06-2026
 * Colours and sizes are driven by CSS variables set inline from settings.
 */

.aoit-tsrs { width: 100%; box-sizing: border-box; }
.aoit-tsrs *, .aoit-tsrs *::before, .aoit-tsrs *::after { box-sizing: border-box; }

/* Grid */
.aoit-tsrs-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
}

/* Card */
.aoit-tsrs-card {
	display: flex;
	flex-direction: column;
	background: var(--aoit-tsrs-card-bg, #fff);
	border: 1px solid var(--aoit-tsrs-card-border, #e5e5e5);
	border-radius: var(--aoit-tsrs-card-radius, 8px);
	box-shadow: var(--aoit-tsrs-card-shadow, none);
	padding: 18px 18px 16px;
	height: 100%;
}

.aoit-tsrs-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.aoit-tsrs-card__title {
	margin: 0 0 8px;
	font-size: var(--aoit-tsrs-title-size, 16px);
	line-height: 1.3;
	color: var(--aoit-tsrs-title, #111);
}

.aoit-tsrs-card__comment {
	font-size: var(--aoit-tsrs-body-size, 14px);
	line-height: 1.55;
	color: var(--aoit-tsrs-body, #444);
	flex: 1 1 auto;
}
.aoit-tsrs-card__comment p { margin: 0 0 8px; }
.aoit-tsrs-card__comment p:last-child { margin-bottom: 0; }

.aoit-tsrs-card__reply {
	margin-top: 10px;
	padding: 10px 12px;
	background: rgba(0,0,0,0.03);
	border-radius: 6px;
	font-size: calc(var(--aoit-tsrs-body-size, 14px) - 1px);
	color: var(--aoit-tsrs-body, #444);
}
.aoit-tsrs-card__reply-label {
	display: inline-block;
	font-weight: 600;
	margin-bottom: 4px;
	opacity: 0.75;
}

.aoit-tsrs-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
}
.aoit-tsrs-card__name {
	font-size: var(--aoit-tsrs-name-size, 14px);
	font-weight: 600;
	color: var(--aoit-tsrs-name, #222);
}
.aoit-tsrs-card__date {
	font-size: var(--aoit-tsrs-date-size, 12px);
	color: var(--aoit-tsrs-date, #888);
}

/* Stars */
.aoit-tsrs-stars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	font-size: 18px;
	letter-spacing: 2px;
}
.aoit-tsrs-stars__empty { color: var(--aoit-tsrs-star-empty, #e0e0e0); }
.aoit-tsrs-stars__full {
	color: var(--aoit-tsrs-star, #FFDC0F);
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* Badge */
.aoit-tsrs-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 600;
	white-space: nowrap;
}
.aoit-tsrs-badge__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #2e7d32;
	color: #fff;
	font-size: 10px;
}
.aoit-tsrs-badge--ts.aoit-tsrs-badge--text {
	color: #4a4a4a;
	background: var(--aoit-tsrs-star, #FFDC0F);
	color: #222;
	padding: 3px 8px;
	border-radius: 4px;
}
.aoit-tsrs-badge--ts.aoit-tsrs-badge--text .aoit-tsrs-badge__check { background: #222; }
.aoit-tsrs-badge--logo img.aoit-tsrs-badge__logo {
	max-height: 28px;
	width: auto;
	display: block;
}
.aoit-tsrs-badge--manual {
	color: #2e7d32;
}
.aoit-tsrs-badge--other {
	color: #555;
	background: #eee;
	padding: 3px 8px;
	border-radius: 4px;
}

/* Summary header */
.aoit-tsrs-summary { margin-bottom: 22px; }
.aoit-tsrs-summary__heading { margin: 0 0 10px; }
.aoit-tsrs-summary__row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.aoit-tsrs-summary__average {
	font-size: 28px;
	font-weight: 700;
	color: var(--aoit-tsrs-title, #111);
	line-height: 1;
}
.aoit-tsrs-summary .aoit-tsrs-stars { font-size: 22px; }
.aoit-tsrs-summary__count { color: var(--aoit-tsrs-date, #888); font-size: 14px; }
.aoit-tsrs-summary--center { text-align: center; }
.aoit-tsrs-summary--center .aoit-tsrs-summary__row { justify-content: center; }

/* Load more */
.aoit-tsrs-loadmore-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}
.aoit-tsrs-loadmore {
	background: var(--aoit-tsrs-loadmore-bg, #C8102E);
	color: var(--aoit-tsrs-loadmore-color, #fff);
	border: none;
	border-radius: 6px;
	padding: 11px 26px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.aoit-tsrs-loadmore:hover { background: var(--aoit-tsrs-loadmore-hover, #a50d26); }
.aoit-tsrs-loadmore[disabled] { opacity: 0.6; cursor: default; }

.aoit-tsrs-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(0,0,0,0.15);
	border-top-color: rgba(0,0,0,0.55);
	border-radius: 50%;
	display: none;
	animation: aoit-tsrs-spin 0.7s linear infinite;
}
.aoit-tsrs-spinner.is-active { display: inline-block; }
@keyframes aoit-tsrs-spin { to { transform: rotate(360deg); } }

.aoit-tsrs-empty {
	grid-column: 1 / -1;
	color: var(--aoit-tsrs-date, #888);
	font-style: italic;
}

/* Newly inserted cards fade in */
.aoit-tsrs-card.is-new {
	animation: aoit-tsrs-fade 0.35s ease both;
}
@keyframes aoit-tsrs-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 782px) {
	.aoit-tsrs-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * v1.2 - attachments, inline-scroll, popover, lightbox
 * ============================================================ */

/* Thumbnails row */
.aoit-tsrs-card__images {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.aoit-tsrs-thumb {
	padding: 0;
	border: 1px solid var(--aoit-tsrs-card-border, #e5e5e5);
	border-radius: 6px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.aoit-tsrs-thumb:hover { transform: scale(1.04); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.aoit-tsrs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Inline-scroll strip */
.aoit-tsrs-scroller {
	position: relative;
	display: flex;
	align-items: stretch;
}
.aoit-tsrs-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 4px 2px;
	flex: 1 1 auto;
	cursor: grab;
	/* Hide the horizontal scrollbar - navigation is via drag and arrows. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.aoit-tsrs-track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.aoit-tsrs-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.aoit-tsrs-card--inline {
	flex: 0 0 300px;
	width: 300px;
	scroll-snap-align: start;
	position: relative;
	height: var(--aoit-tsrs-card-height, 280px);
	overflow: hidden;
}
/* Title clamped to a configurable number of lines. */
.aoit-tsrs-card__title--clamp {
	display: -webkit-box;
	-webkit-line-clamp: var(--aoit-tsrs-title-clamp, 2);
	line-clamp: var(--aoit-tsrs-title-clamp, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 0 0 auto;
}
/* Comment fills remaining space and clamps to fit, ellipsis when overflowing. */
.aoit-tsrs-card__comment--clamp {
	display: -webkit-box;
	-webkit-line-clamp: var(--aoit-tsrs-comment-clamp, 3);
	line-clamp: var(--aoit-tsrs-comment-clamp, 3);
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 0 1 auto;
}
/* Inline cards lay out as a column so the foot sits at the bottom. */
.aoit-tsrs-card--inline { display: flex; flex-direction: column; }
.aoit-tsrs-card--inline .aoit-tsrs-card__foot { margin-top: auto; }
.aoit-tsrs-card--inline .aoit-tsrs-card__images { flex: 0 0 auto; }

/* Read more trigger */
.aoit-tsrs-readmore {
	margin-top: 6px;
	padding: 0;
	background: none;
	border: none;
	color: var(--aoit-tsrs-loadmore-bg, #C8102E);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	align-self: flex-start;
}
.aoit-tsrs-readmore:hover { text-decoration: underline; }

/* Scroll arrows */
.aoit-tsrs-scroll-arrow {
	flex: 0 0 auto;
	align-self: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--aoit-tsrs-card-border, #e5e5e5);
	background: #fff;
	color: #333;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 6px rgba(0,0,0,0.12);
	transition: opacity 0.15s ease;
}
.aoit-tsrs-scroll-arrow--prev { margin-right: 8px; }
.aoit-tsrs-scroll-arrow--next { margin-left: 8px; }
.aoit-tsrs-scroll-arrow.is-disabled { opacity: 0.3; cursor: default; }

/* Read-more popover (floats over the strip, wider than a card) */
.aoit-tsrs-card.is-popover-open { z-index: 1; }
.aoit-tsrs-popover {
	position: absolute;
	background: var(--aoit-tsrs-card-bg, #fff);
	border: 1px solid var(--aoit-tsrs-card-border, #e5e5e5);
	border-radius: var(--aoit-tsrs-card-radius, 8px);
	box-shadow: 0 12px 44px rgba(0,0,0,0.28);
	padding: 20px 22px 18px;
	z-index: 30;
}
.aoit-tsrs-popover__close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: none;
	background: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #888;
	z-index: 2;
}
.aoit-tsrs-popover__close:hover { color: #333; }
.aoit-tsrs-popover__body .aoit-tsrs-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.aoit-tsrs-popover__title {
	margin: 0 0 8px;
	font-size: var(--aoit-tsrs-title-size, 16px);
	line-height: 1.3;
	color: var(--aoit-tsrs-title, #111);
	padding-right: 24px;
}
.aoit-tsrs-popover__comment {
	font-size: var(--aoit-tsrs-body-size, 14px);
	line-height: 1.6;
	color: var(--aoit-tsrs-body, #444);
}
.aoit-tsrs-popover__comment p { margin: 0 0 8px; }
.aoit-tsrs-popover__comment p:last-child { margin-bottom: 0; }
.aoit-tsrs-popover__body .aoit-tsrs-card__images { margin-top: 12px; }
.aoit-tsrs-popover__body .aoit-tsrs-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
}
.aoit-tsrs-popover__body .aoit-tsrs-card__name {
	font-size: var(--aoit-tsrs-name-size, 14px);
	font-weight: 600;
	color: var(--aoit-tsrs-name, #222);
}
.aoit-tsrs-popover__body .aoit-tsrs-card__date {
	font-size: var(--aoit-tsrs-date-size, 12px);
	color: var(--aoit-tsrs-date, #888);
}

/* Image lightbox */
body.aoit-tsrs-noscroll { overflow: hidden; }
.aoit-tsrs-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.85);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}
.aoit-tsrs-lightbox.is-open { display: flex; }
.aoit-tsrs-lightbox__img {
	max-width: 88vw;
	max-height: 86vh;
	border-radius: 4px;
	box-shadow: 0 6px 40px rgba(0,0,0,0.5);
	-webkit-user-select: none;
	user-select: none;
}
.aoit-tsrs-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	border: none;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
}
.aoit-tsrs-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.aoit-tsrs-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border: none;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 34px;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
}
.aoit-tsrs-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.aoit-tsrs-lightbox__nav--prev { left: 20px; }
.aoit-tsrs-lightbox__nav--next { right: 20px; }
.aoit-tsrs-lightbox__counter {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	background: rgba(0,0,0,0.4);
	padding: 4px 12px;
	border-radius: 12px;
}

@media (max-width: 600px) {
	.aoit-tsrs-card--inline { flex-basis: 260px; width: 260px; }
	.aoit-tsrs-scroll-arrow { display: none; }
}