/**
 * Trustie Module Styles
 *
 * Floating widget, review displays, and forms.
 *
 * @package Tracksies
 * @since 1.0.0
 */

/* ==========================================================================
   Elementor Override Reset

   Elementor themes often apply blanket !important rules to button and
   input[type=submit] that break Trustie component styling. These scoped
   resets only apply on Elementor pages (body.elementor-default).
   ========================================================================== */

body.elementor-default .trustie-widget button,
body.elementor-default .trustie-widget input[type="submit"],
body.elementor-default .trustie-reviews-shortcode button,
body.elementor-default .trustie-reviews-shortcode input[type="submit"],
body.elementor-default .tracksies-product-reviews button,
body.elementor-default .tracksies-product-reviews input[type="submit"],
body.elementor-default .trustie-reviews-section button,
body.elementor-default .trustie-reviews-section input[type="submit"] {
	background-color: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #F4AF30)) !important;
	color: var(--tracksies-button-primary-text, #fff) !important;
	border: none !important;
}

body.elementor-default .trustie-widget .trustie-widget__tab-btn,
body.elementor-default .trustie-reviews-shortcode .trustie-filters-toggle,
body.elementor-default .trustie-reviews-shortcode .trustie-review-filter-pill {
	background-color: transparent !important;
	color: inherit !important;
	border: 1px solid var(--tracksies-color-border, #ddd) !important;
}

body.elementor-default .trustie-widget .trustie-widget__tab-btn.active {
	background-color: var(--tracksies-color-surface, #fff) !important;
	color: var(--tracksies-color-text, #1d2327) !important;
}

body.elementor-default .trustie-reviews-shortcode .trustie-review-filter-pill.active {
	background-color: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #F4AF30)) !important;
	color: var(--tracksies-button-primary-text, #fff) !important;
	border-color: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #F4AF30)) !important;
}

/* Star rating buttons in review form — never button-styled */
body.elementor-default .trustie-star-rating-input .trustie-star {
	background: none !important;
	background-color: transparent !important;
	color: var(--tracksies-rating-star-empty, #ddd) !important;
	border: none !important;
}

body.elementor-default .trustie-star-rating-input .trustie-star:hover,
body.elementor-default .trustie-star-rating-input .trustie-star.is-active {
	color: var(--tracksies-rating-star-color, #f5a623) !important;
}

/* Review summary — ensure two-column layout on Elementor */

/* Summary layout is now enforced with !important in reviews-page.css.
   Elementor-specific overrides only needed for colours below. */

/* Star and bar colours — override Elementor theme colour inheritance */
body.elementor-default .tracksies-score-stars,
body.elementor-default .tracksies-review-summary .summary-stars,
body.elementor-default .tracksies-product-reviews .summary-stars,
body.elementor-default .tracksies-product-reviews .summary-stars i,
body.elementor-default .tracksies-breakdown-label i,
body.elementor-default .breakdown-label i {
	color: var(--tracksies-rating-star-color, #FFB800) !important;
}

body.elementor-default .tracksies-breakdown-fill,
body.elementor-default .breakdown-fill {
	background: var(--tracksies-rating-star-color, #FFB800) !important;
}

/* Mobile handled by reviews-page.css responsive breakpoints. */

/* ==========================================================================
   Floating Widget - Tab Button
   ========================================================================== */

.trustie-widget {
	position: fixed;
	z-index: 99999;
	/* Use Brand Hub font, with fallbacks for Bricks/Kadence themes */
	font-family: var(--tracksies-font-body, var(--bricks-body-font-family, var(--global-body-font-family, inherit)));
}

/* Right position (default) - tab centered, panel full height */
.trustie-widget--right {
	right: 0;
	top: 0;
	bottom: 0;
}

.trustie-widget--right .trustie-widget__tab {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	border-radius: var(--tracksies-radius-medium, 8px) 0 0 var(--tracksies-radius-medium, 8px);
	padding: 16px 10px;
}

.trustie-widget--right .trustie-widget__panel {
	position: fixed;
	top: 0;
	right: -400px; /* Off-screen */
	bottom: 0;
	height: 100vh;
	max-height: 100vh;
}

.trustie-widget--right.is-open .trustie-widget__panel {
	right: 0;
}

/* Left position - tab centered, panel full height */
.trustie-widget--left {
	left: 0;
	top: 0;
	bottom: 0;
}

.trustie-widget--left .trustie-widget__tab {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-lr;
	text-orientation: mixed;
	border-radius: var(--tracksies-radius-medium, 8px) 0 0 var(--tracksies-radius-medium, 8px);
	padding: 16px 10px;
}

.trustie-widget--left .trustie-widget__panel {
	position: fixed;
	top: 0;
	left: -400px;
	bottom: 0;
	height: 100vh;
	max-height: 100vh;
}

.trustie-widget--left.is-open .trustie-widget__panel {
	left: 0;
}

/* Bottom position */
.trustie-widget--bottom {
	bottom: 20px;
	right: 20px;
}

.trustie-widget--bottom .trustie-widget__tab {
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 12px 20px;
}

.trustie-widget--bottom .trustie-widget__panel {
	bottom: 60px;
	right: 0;
	opacity: 0;
	visibility: hidden;
}

.trustie-widget--bottom.is-open .trustie-widget__panel {
	opacity: 1;
	visibility: visible;
}

/* Tab button */
.trustie-widget__tab {
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
	background: var(--tracksies-widget-header-bg, var(--tracksies-color-primary, #3E7CB1));
	color: var(--tracksies-widget-header-text, #fff);
	/* Buttons do not inherit the page font, so without this the tab renders
	   in the browser default (Arial) whatever the Brand Hub says. */
	font-family: var(--tracksies-font-body, inherit);
	/* Pinned, not inherited: themes style bare buttons (Oxygen's universal.css
	   sets font-weight:700 on .woocommerce buttons, which made the tab bold on
	   shop pages only). Base tracks the Designer scale and stays readable next
	   to large body text; the 'small' token did not. */
	font-size: var(--trustie-widget-tab-font-size, var(--tracksies-font-size-base, 16px)) !important;
	font-weight: 400 !important;
	line-height: 1.4;
	cursor: pointer;
	transition: filter var(--tracksies-transition-normal, 0.25s ease), box-shadow var(--tracksies-transition-normal, 0.25s ease);
	box-shadow: var(--tracksies-shadow-elevated, none);
}

/* Hover resolves from Brand Hub tokens only. If the palette sets secondary ==
   header bg, the tab keeps its colour -- that is what the palette asks for. */
/* Hover feedback on interactive controls is not decoration -- a button with
   no hover state reads as inert. Motion stays gated behind the Brand Hub
   animation vars; colour feedback does not. The palette can legitimately set
   secondary == widget header bg, which made the swap invisible, so derive the
   hover from the tab's OWN background instead. */
.trustie-widget__tab:hover {
	background: var(--tracksies-button-secondary-bg, var(--tracksies-color-secondary, var(--tracksies-widget-header-bg)));
	box-shadow: var(--tracksies-shadow-card-hover, none);
}

.trustie-widget__tab:focus {
	outline: 2px solid var(--tracksies-widget-header-text, #fff);
	outline-offset: 2px;
}

.trustie-widget__icon {
	font-size: var(--tracksies-font-size-large, 18px);
	line-height: 1;
}

.trustie-widget__label {
	white-space: nowrap;
}

/* Hide tab when panel is open (side positions) */
.trustie-widget--right.is-open .trustie-widget__tab,
.trustie-widget--left.is-open .trustie-widget__tab {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Floating Widget - Panel
   ========================================================================== */

.trustie-widget__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 400px;
	max-width: 100vw;
	height: 100vh;
	height: 100dvh; /* Dynamic viewport height for mobile */
	background: var(--tracksies-color-surface, #fff);
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
	transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Bottom position panel is different */
.trustie-widget--bottom .trustie-widget__panel {
	position: absolute;
	top: auto;
	height: auto;
	max-height: 70vh;
	width: 380px;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Panel header */
.trustie-widget__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: var(--tracksies-widget-header-bg, var(--tracksies-color-primary, #3E7CB1));
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
}

.trustie-widget__header h3 {
	margin: 0;
	font-size: var(--tracksies-font-size-large, 18px);
	font-weight: 500;
	font-family: var(--tracksies-font-body, inherit);
	color: var(--tracksies-widget-header-text, #fff);
	display: flex;
	align-items: center;
	gap: 8px;
}

.trustie-widget__header h3 i {
	font-size: var(--tracksies-font-size-base, 16px);
}

.trustie-widget__close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--tracksies-widget-header-text, #fff);
	font-size: var(--tracksies-font-size-large, 18px);
	cursor: pointer;
	border-radius: var(--tracksies-radius-small, 4px);
	transition: all 0.2s ease;
}

/* Hover resolves from Brand Hub tokens only. If the palette sets secondary ==
   header bg, the tab keeps its colour -- that is what the palette asks for. */
.trustie-widget__close:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* Panel content */
.trustie-widget__content {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	min-height: 0; /* Required for flexbox scroll */
}

/* ==========================================================================
   Widget Reviews List
   ========================================================================== */

.trustie-widget__reviews {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 20px 20px;
}

.trustie-widget__review {
	padding: 16px;
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	box-shadow: var(--tracksies-shadow-card, none);
}

.trustie-widget__rating {
	color: var(--tracksies-rating-star-color, #f5a623);
	font-size: var(--tracksies-font-size-base, 16px);
	display: flex;
	gap: 2px;
	margin-bottom: 8px;
}

.trustie-widget__rating i {
	line-height: 1;
}

.trustie-widget__review-title {
	margin: 4px 0 2px;
	font-size: var(--tracksies-font-size-base, 16px);
	font-weight: 600;
	color: var(--tracksies-color-text, #1a1a1a);
}

.trustie-widget__text {
	margin: 0 0 8px 0;
	font-size: var(--tracksies-font-size-base, 16px);
	font-family: var(--tracksies-font-body, inherit);
	line-height: 1.5;
	color: var(--tracksies-color-text, #444);
}

.trustie-widget__author {
	font-size: var(--tracksies-font-size-small, 13px);
	color: var(--tracksies-color-text-light, #888);
	font-style: italic;
}

/* Review header with source badge */
.trustie-widget__review-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.trustie-widget__review-header .trustie-widget__rating {
	margin-bottom: 0;
}

.trustie-widget__source-badge {
	display: flex;
	align-items: center;
	opacity: 0.8;
}

.trustie-widget__source-badge img {
	display: block;
	border-radius: 2px;
}

/* Sources line in aggregate */
.trustie-widget__sources {
	display: block;
	font-size: 11px;
	color: var(--tracksies-color-text-light, #666);
	margin-top: 4px;
}

/* Google review styling */
.trustie-widget__review--google {
	border-left: 3px solid var(--tracksies-color-secondary, #2AA9A9);
}

/* Verified product review styling */
.trustie-widget__review--product.trustie-widget__review--verified,
.trustie-widget__review--site.trustie-widget__review--verified {
	border-left: 3px solid var(--tracksies-color-primary, #3E7CB1);
}

/* Empty state */
.trustie-widget__empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--tracksies-color-text-light, #666);
	font-size: var(--tracksies-font-size-base, 16px);
}

/* CTA button */
.trustie-widget__cta {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 14px 24px;
	border: none;
	border-radius: var(--tracksies-radius-medium, 8px);
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #3E7CB1));
	color: var(--tracksies-button-primary-text, #fff);
	font-size: var(--tracksies-font-size-base, 15px);
	font-weight: normal;
	cursor: pointer;
	transition: filter var(--tracksies-transition-fast, 0.15s ease), transform var(--tracksies-transition-fast, 0.15s ease);
}

.trustie-widget__cta:hover {
	background: var(--tracksies-color-secondary, var(--tracksies-color-primary, #3E7CB1));
	color: var(--tracksies-button-secondary-text, #fff);
	transform: var(--tracksies-hover-lift, none);
}

.trustie-widget__cta:active {
	transform: translateY(0);
}

/* Widget Tabs */
.trustie-widget__tabs {
	display: flex;
	gap: 8px;
	margin: 0 20px 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tracksies-color-border, #e0e0e0);
	flex-wrap: wrap;
}

.trustie-widget__tab-btn {
	padding: 6px 12px;
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 4px);
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text, #332927);
	font-size: var(--tracksies-font-size-base, 16px);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.trustie-widget__tab-btn:hover {
	background: var(--tracksies-color-surface, #f5f5f5);
}

.trustie-widget__tab-btn.active {
	background: var(--tracksies-color-primary, #3E7CB1);
	border-color: var(--tracksies-color-primary, #3E7CB1);
	color: #fff;
}

.trustie-widget__tab-btn img {
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

/* Widget Footer */
.trustie-widget__footer {
	padding: 16px 20px;
	border-top: 1px solid var(--tracksies-color-border, #e0e0e0);
	background: var(--tracksies-color-surface, #fafafa);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.trustie-widget__footer .trustie-widget__cta {
	margin-top: 0;
	background: var(--tracksies-widget-header-bg, var(--tracksies-color-primary, #3E7CB1));
	color: var(--tracksies-widget-header-text, #fff);
}

.trustie-widget__footer .trustie-widget__cta:hover {
	background: var(--tracksies-color-secondary, var(--tracksies-color-primary, #3E7CB1));
	color: var(--tracksies-button-secondary-text, #fff);
}

.trustie-widget__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: var(--tracksies-font-size-base, 16px);
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.trustie-widget__link:hover {
	opacity: 0.8;
	text-decoration: underline;
}

.trustie-widget__link i {
	font-size: 12px;
}

/* Source badges */
.trustie-widget__source-badge--product,
.trustie-widget__source-badge--site,
.trustie-widget__source-badge--testimonial {
	font-size: 12px;
	color: var(--tracksies-color-text-light, #666);
}

.trustie-widget__source-badge--testimonial {
	color: var(--tracksies-color-secondary, #2AA9A9);
}

/* ==========================================================================
   Widget Review Form
   ========================================================================== */

.trustie-widget__form {
	display: none;
}

.trustie-widget__form.is-active {
	display: block;
}

.trustie-widget__form-group {
	margin-bottom: 16px;
}

.trustie-widget__form-group label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--tracksies-font-size-base, 16px);
	font-weight: 500;
	color: var(--tracksies-color-text, #332927);
}

.trustie-widget__form-group input[type="text"],
.trustie-widget__form-group input[type="email"],
.trustie-widget__form-group input[type="url"],
.trustie-widget__form-group textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--tracksies-font-size-base, 16px);
	transition: border-color 0.2s ease;
}

.trustie-widget__form-group input:focus,
.trustie-widget__form-group textarea:focus {
	border-color: var(--tracksies-rating-star-color, #FFB800);
	box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.15);
}

.trustie-widget__form-group input:focus:not(:focus-visible),
.trustie-widget__form-group textarea:focus:not(:focus-visible) {
	outline: none;
}

.trustie-widget__form-group input:focus-visible,
.trustie-widget__form-group textarea:focus-visible {
	outline: 2px solid var(--tracksies-color-primary, #0073aa);
	outline-offset: 2px;
}

.trustie-widget__form-group textarea {
	min-height: 100px;
	resize: vertical;
}

/* Star rating input */
.trustie-widget__star-rating {
	display: flex;
	gap: 4px;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.trustie-widget__star-rating input {
	display: none;
}

.trustie-widget__star-rating label {
	font-size: 28px;
	color: var(--tracksies-rating-star-empty, #ddd);
	cursor: pointer;
	transition: color 0.15s ease;
	margin: 0 !important;
	line-height: 1;
}

.trustie-widget__star-rating label i {
	display: block;
}

.trustie-widget__star-rating label:hover,
.trustie-widget__star-rating label:hover ~ label,
.trustie-widget__star-rating input:checked ~ label {
	color: var(--tracksies-rating-star-color, #f5a623);
}

/* Form buttons */
.trustie-widget__form-actions {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.trustie-widget__form-submit {
	flex: 1;
	padding: 12px 20px;
	border: none;
	border-radius: var(--tracksies-radius-small, 6px);
	background: var(--tracksies-color-primary, #3E7CB1);
	color: #fff;
	font-size: var(--tracksies-font-size-base, 16px);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.trustie-widget__form-submit:hover:not(:disabled) {
	background: var(--tracksies-button-secondary-bg, var(--tracksies-color-secondary, #1e3a5f));
	color: var(--tracksies-button-secondary-text, #fff);
}

.trustie-widget__form-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.trustie-widget__form-cancel {
	padding: 12px 20px;
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 6px);
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text-light, #666);
	font-size: var(--tracksies-font-size-base, 16px);
	cursor: pointer;
	transition: all 0.2s ease;
}

.trustie-widget__form-cancel:hover {
	background: var(--tracksies-color-surface, #F1F2F2);
	border-color: var(--tracksies-color-border, #e0e0e0);
}

/* Form messages */
.trustie-widget__form-message {
	padding: 12px 16px;
	border-radius: var(--tracksies-radius-small, 6px);
	margin-bottom: 16px;
	font-size: var(--tracksies-font-size-base, 16px);
}

.trustie-widget__form-message--success {
	background: color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 15%, white);
	color: var(--tracksies-color-success, #7EB77F);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-success, #7EB77F) 25%, white);
}

.trustie-widget__form-message--error {
	background: color-mix(in srgb, var(--tracksies-color-error, #E34D4E) 15%, white);
	color: var(--tracksies-color-error, #E34D4E);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-error, #E34D4E) 25%, white);
}

/* Google Review Prompt */
.trustie-widget__google-prompt {
	text-align: center;
	padding: 20px;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.trustie-widget__google-prompt-check {
	font-size: 48px;
	color: var(--tracksies-color-success, #7EB77F);
	margin-bottom: 15px;
}

.trustie-widget__google-prompt-thanks {
	font-size: var(--tracksies-font-size-large, 18px);
	font-weight: 600;
	color: var(--tracksies-color-text, #332927);
	margin-bottom: 20px;
}

.trustie-widget__google-prompt-heading {
	font-size: var(--tracksies-font-size-base, 16px);
	font-weight: 600;
	color: var(--tracksies-color-text, #332927);
	margin-bottom: 8px;
}

.trustie-widget__google-prompt-message {
	font-size: var(--tracksies-font-size-base, 16px);
	color: var(--tracksies-color-text-light, #666);
	margin-bottom: 15px;
	line-height: 1.4;
}

.trustie-widget__google-prompt-review {
	background: var(--tracksies-color-surface, #F1F2F2);
	padding: 12px 15px;
	border-radius: 8px;
	font-size: var(--tracksies-font-size-small, 13px);
	color: var(--tracksies-color-text, #332927);
	font-style: italic;
	margin-bottom: 20px;
	text-align: left;
}

.trustie-widget__google-prompt-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 15px;
}

.trustie-widget__google-prompt-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: var(--tracksies-font-size-base, 16px);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
}

.trustie-widget__google-prompt-btn--copy {
	background: var(--tracksies-color-surface, #F1F2F2);
	color: var(--tracksies-color-text, #332927);
}

.trustie-widget__google-prompt-btn--copy:hover {
	background: var(--tracksies-color-border, #e0e0e0);
}

.trustie-widget__google-prompt-btn--google {
	background: #4285f4;
	color: #fff;
}

.trustie-widget__google-prompt-btn--google:hover {
	background: #3367d6;
	color: #fff;
}

.trustie-widget__google-prompt-btn--google img {
	border-radius: 2px;
}

.trustie-widget__google-prompt-skip {
	background: none;
	border: none;
	color: var(--tracksies-color-text-light, #666);
	font-size: var(--tracksies-font-size-small, 13px);
	cursor: pointer;
	padding: 5px 10px;
}

.trustie-widget__google-prompt-skip:hover {
	color: var(--tracksies-color-text, #332927);
	text-decoration: underline;
}

/* ==========================================================================
   Aggregate Rating Display
   ========================================================================== */

.trustie-widget__aggregate {
	text-align: center;
	padding: 16px 0;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--tracksies-color-border, #e0e0e0);
}

.trustie-widget__aggregate-score {
	font-size: 48px;
	font-weight: 700;
	color: var(--tracksies-color-text, #332927);
	line-height: 1;
}

.trustie-widget__aggregate-stars {
	color: var(--tracksies-rating-star-color, #FFB800);
	font-size: 20px;
	letter-spacing: 3px;
	margin: 8px 0;
}

.trustie-widget__aggregate-count {
	display: block;
	font-size: var(--tracksies-font-size-base, 16px);
	color: var(--tracksies-color-text-light, #666);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.trustie-widget__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.trustie-widget__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--tracksies-color-border, #e0e0e0);
	border-top-color: var(--tracksies-color-primary, #3E7CB1);
	border-radius: 50%;
	animation: tracksies-spin 0.8s linear infinite;
}

@keyframes tracksies-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 480px) {
	.trustie-widget__panel {
		width: 100vw;
	}

	/* Mobile-side: panel slides in from the chosen edge at full viewport
	   width. The desktop offscreen position (left/right: -400px) doesn't
	   push a 100vw panel fully offscreen — there's an 80px+ sliver visible
	   on viewports wider than the panel-vs-400px difference, which covers
	   the side tab and looks like the panel is always open. Re-anchor the
	   offscreen position to -100vw so the panel is fully offscreen when
	   closed, regardless of viewport width. */
	.trustie-widget--mobile-side.trustie-widget--right .trustie-widget__panel {
		right: -100vw;
	}
	.trustie-widget--mobile-side.trustie-widget--right.is-open .trustie-widget__panel {
		right: 0;
	}
	.trustie-widget--mobile-side.trustie-widget--left .trustie-widget__panel {
		left: -100vw;
	}
	.trustie-widget--mobile-side.trustie-widget--left.is-open .trustie-widget__panel {
		left: 0;
	}

	/* On mobile, side tabs become bottom tabs — ONLY when the user chose
	   "Bottom bar" for mobile (default). When they chose "Keep chosen side"
	   (.trustie-widget--mobile-side), these rules don't fire and the desktop
	   left/right positioning carries through to mobile too. */
	.trustie-widget--mobile-bottom.trustie-widget--right,
	.trustie-widget--mobile-bottom.trustie-widget--left {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.trustie-widget--mobile-bottom.trustie-widget--right .trustie-widget__tab,
	.trustie-widget--mobile-bottom.trustie-widget--left .trustie-widget__tab {
		position: static;
		writing-mode: horizontal-tb;
		transform: none;
		width: 100%;
		border-radius: 0;
		justify-content: center;
		padding: 14px;
	}

	.trustie-widget--mobile-bottom.trustie-widget--right .trustie-widget__panel,
	.trustie-widget--mobile-bottom.trustie-widget--left .trustie-widget__panel {
		top: 0;
		left: 0;
		right: 0;
		transform: translateY(100%);
	}

	.trustie-widget--mobile-bottom.trustie-widget--right.is-open .trustie-widget__panel,
	.trustie-widget--mobile-bottom.trustie-widget--left.is-open .trustie-widget__panel {
		transform: translateY(0);
	}

	.trustie-widget--mobile-bottom.trustie-widget--right.is-open .trustie-widget__tab,
	.trustie-widget--mobile-bottom.trustie-widget--left.is-open .trustie-widget__tab {
		opacity: 1;
		pointer-events: auto;
	}

	.trustie-widget--bottom {
		right: 10px;
		bottom: 10px;
	}

	.trustie-widget--bottom .trustie-widget__panel {
		width: calc(100vw - 20px);
		right: -10px;
	}
}

/* ==========================================================================
   Review Grid & Cards (Shortcode Output)
   ========================================================================== */

.trustie-reviews-grid {
	display: grid;
	gap: 20px;
	margin: 20px 0;
	width: 100%;
}

.trustie-reviews-grid--cols-1 { grid-template-columns: 1fr; }
.trustie-reviews-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.trustie-reviews-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.trustie-reviews-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
	.trustie-reviews-grid--cols-3,
	.trustie-reviews-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.trustie-reviews-grid--cols-2,
	.trustie-reviews-grid--cols-3,
	.trustie-reviews-grid--cols-4 {
		grid-template-columns: 1fr;
	}
}

/* Responsive variant — driven by inline CSS variables (--trustie-cols-{desktop,tablet,mobile})
   from the shortcode/module render. Opted in via the --responsive class when builders/modules
   pass explicit per-breakpoint column counts; otherwise the legacy --cols-N rules above apply. */
.trustie-reviews-grid--responsive {
	grid-template-columns: repeat(var(--trustie-cols-desktop, 3), 1fr);
}

@media (max-width: 992px) {
	.trustie-reviews-grid--responsive {
		grid-template-columns: repeat(var(--trustie-cols-tablet, 2), 1fr);
	}
}

@media (max-width: 600px) {
	.trustie-reviews-grid--responsive {
		grid-template-columns: repeat(var(--trustie-cols-mobile, 1), 1fr);
	}
}

/* Masonry variant — CSS columns replace the grid. Uses the shared .trustie-columns-N
   class (applied alongside the cols-N class) so card layout is consistent with
   reviews page and Google reviews masonry. */
.trustie-layout-masonry.trustie-reviews-grid {
	display: block;
	column-gap: 20px;
}

.trustie-layout-masonry.trustie-reviews-grid > * {
	break-inside: avoid;
	margin-bottom: 20px;
}

.trustie-layout-masonry.trustie-columns-1 { columns: 1; }
.trustie-layout-masonry.trustie-columns-2 { columns: 2; }
.trustie-layout-masonry.trustie-columns-3 { columns: 3; }
.trustie-layout-masonry.trustie-columns-4 { columns: 4; }

@media (max-width: 992px) {
	.trustie-layout-masonry.trustie-columns-3,
	.trustie-layout-masonry.trustie-columns-4 { columns: 2; }
}

@media (max-width: 600px) {
	.trustie-layout-masonry.trustie-columns-2,
	.trustie-layout-masonry.trustie-columns-3,
	.trustie-layout-masonry.trustie-columns-4 { columns: 1; }
}

/* Review Controls (filter/sort) */
.trustie-reviews-shortcode {
	width: 100%;
}

.trustie-reviews-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

/* Pill base — uses Designer button styles */
.trustie-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text, inherit);
	font-family: var(--tracksies-font-body, inherit);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.trustie-pill:hover {
	border-color: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
	color: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
}

.trustie-pill.is-active {
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
	color: var(--tracksies-button-primary-text, #fff);
	border-color: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
}

.trustie-pill:focus-visible {
	outline: 2px solid var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
	outline-offset: 2px;
}

/* Filters toggle button */
.trustie-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text, inherit);
	font-family: var(--tracksies-font-body, inherit);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.trustie-filters-toggle[aria-expanded="true"] {
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
	color: var(--tracksies-button-primary-text, #fff);
	border-color: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
}

.trustie-filters-toggle:hover {
	border-color: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
}

/* Sort pills row */
.trustie-sort-pills {
	display: flex;
	gap: 8px;
}

/* Filter panel (collapsible) */
.trustie-filter-panel {
	padding: 20px 0;
	text-align: center;
}

.trustie-filter-panel[hidden] {
	display: none;
}

/* Active filter tags */
.trustie-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 16px;
}

.trustie-active-filters:empty {
	display: none;
}

.trustie-active-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
	color: var(--tracksies-button-primary-text, #fff);
	border: none;
	border-radius: var(--tracksies-radius-medium, 8px);
	font-family: var(--tracksies-font-body, inherit);
	font-size: 13px;
	cursor: pointer;
}

.trustie-active-filter-tag:hover {
	opacity: 0.8;
}

/* Filter groups */
.trustie-filter-group {
	margin-bottom: 16px;
}

.trustie-filter-group:last-child {
	margin-bottom: 0;
}

.trustie-filter-group__label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--tracksies-color-text, #1a1a1a);
	margin-bottom: 8px;
}

.trustie-filter-group__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/* Load More */
.trustie-load-more-wrap {
	text-align: center;
	margin: 24px 0 8px;
}

.trustie-load-more-btn {
	display: inline-block;
	padding: 10px 28px;
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #0073aa));
	color: var(--tracksies-button-primary-text, #fff);
	border: none;
	border-radius: var(--tracksies-radius-medium, 8px);
	font-family: var(--tracksies-font-body, inherit);
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}

.trustie-load-more-btn:hover {
	opacity: 0.85;
}

.trustie-load-more-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 600px) {
	.trustie-reviews-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.trustie-sort-pills {
		justify-content: center;
	}

	.trustie-filter-group__pills {
		gap: 6px;
	}

	.trustie-pill {
		padding: 6px 14px;
		font-size: 13px;
	}
}

/* Review Card */
.trustie-review-card {
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 20px;
	/* Bricks-aware fallback chain — without it the card lands on `inherit`
	   when Brand Hub's font var is empty, picking up whatever the parent
	   template uses (often the wrong font under Bricks templates). */
	font-family: var(--tracksies-font-body, var(--bricks-body-font-family, var(--global-body-font-family, inherit)));
	color: inherit;
	box-shadow: var(--tracksies-shadow-card, none);
	transition: box-shadow var(--tracksies-transition-fast, 0s), transform var(--tracksies-transition-fast, 0s);
	/* Container context for the custom-fields grid to collapse below 400px card width. */
	container-type: inline-size;
	margin-bottom: 1.25rem;
}

.trustie-review-card:hover {
	box-shadow: var(--tracksies-shadow-card-hover, none);
	transform: var(--tracksies-hover-lift, none);
}

/* Removed old .has-shadow and .has-hover classes - now using CSS variables directly */

.trustie-review-card--verified {
	border-left: 3px solid var(--tracksies-color-primary, #3E7CB1);
}

.trustie-review-card--featured {
	background: var(--tracksies-color-surface, #fff);
	border-color: var(--tracksies-color-primary, #3E7CB1);
}

/* Card Header */
.trustie-review-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}

.trustie-review-card__rating {
	font-size: var(--tracksies-rating-star-size, 16px);
	display: flex;
	gap: 2px;
}

.trustie-review-card__rating i {
	line-height: 1;
}

/* Star colors - using CSS variables from Brand Hub */
.trustie-star-filled {
	color: var(--tracksies-rating-star-color, #f5a623);
}

.trustie-star-empty {
	color: var(--tracksies-rating-star-color, #f5a623);
	opacity: 0.35;
}

.trustie-review-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--tracksies-color-review-verified, var(--tracksies-color-primary, #00a32a));
	background: rgba(0, 163, 42, 0.1); /* Fallback for older browsers */
	background: color-mix(in srgb, var(--tracksies-color-review-verified, var(--tracksies-color-primary, #00a32a)) 10%, transparent);
	padding: 4px 8px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-weight: 500;
}

.trustie-review-card__verified i {
	font-size: 12px;
}

/* Card Title */
.trustie-review-card__title {
	margin: 0 0 10px 0;
	font-size: var(--tracksies-font-size-large, 16px);
	font-weight: 600;
	color: var(--tracksies-color-text, #333);
	/* Heading var first, then body var, then Bricks/global, then inherit.
	   Same defensive chain as the card wrapper — without it, an empty
	   Brand Hub heading var lands on `inherit` and pulls whatever font
	   the Bricks template happens to expose. */
	font-family: var(--tracksies-font-heading, var(--tracksies-font-body, var(--bricks-body-font-family, var(--global-body-font-family, inherit))));
}

/* Card Content */
.trustie-review-card__content {
	margin-bottom: 16px;
	font-size: var(--tracksies-font-size-base, 14px);
	line-height: 1.6;
	color: var(--tracksies-color-text, #333);
}

.trustie-review-card__content p {
	margin: 0 0 10px 0;
}

.trustie-review-card__content p:last-child {
	margin-bottom: 0;
}

/* Card Media */
.trustie-review-card__media {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.trustie-review-card__image {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: var(--tracksies-radius-small, 6px);
	overflow: hidden;
}

.trustie-review-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.trustie-review-card__image:hover img {
	transform: scale(1.05);
}

/* Card Meta */
.trustie-review-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--tracksies-font-size-small, 13px);
	color: var(--tracksies-color-text-light, #666);
	margin-top: 1rem;
}

.trustie-review-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.trustie-review-card__avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tracksies-color-primary, #3E7CB1);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.trustie-review-card__author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.trustie-review-card__author {
	font-weight: 500;
	color: var(--tracksies-color-text, #333);
}

.trustie-review-card__role {
	font-size: var(--tracksies-font-size-small, 12px);
	color: var(--tracksies-color-text-light, #888);
}

.trustie-review-card__date {
	color: var(--tracksies-color-text-light, #888);
}

/* Product Link */
.trustie-review-card__product {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 10px;
	background: var(--tracksies-color-background, #f9f9f9);
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--tracksies-font-size-small, 13px);
}

.trustie-review-card__product img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: var(--tracksies-radius-small, 4px);
}

.trustie-review-card__product a {
	color: var(--tracksies-button-secondary-text, var(--tracksies-color-text, #1e1e1e));
	text-decoration: none;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: var(--tracksies-radius-small, 4px);
	background: var(--tracksies-button-secondary-bg, var(--tracksies-color-surface, #f0f0f1));
	transition: background 0.2s ease, color 0.2s ease;
}

.trustie-review-card__product a:hover {
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #3E7CB1));
	color: var(--tracksies-button-primary-text, #fff);
	text-decoration: none;
}

/* Store Response */
.trustie-review-card__response {
	margin-top: 16px;
	padding: 16px;
	background: var(--tracksies-color-background, #f5f5f5);
	border-radius: var(--tracksies-radius-small, 6px);
	border-left: 3px solid var(--tracksies-color-primary, #3E7CB1);
}

.trustie-review-card__response-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: var(--tracksies-font-size-small, 13px);
}

.trustie-review-card__response-header strong {
	color: var(--tracksies-color-text, #333);
}

.trustie-review-card__response-header span {
	color: var(--tracksies-color-text-light, #888);
}

.trustie-review-card__response-content {
	font-size: var(--tracksies-font-size-base, 14px);
	color: var(--tracksies-color-text, #333);
	line-height: 1.5;
}

.trustie-review-card__response-content p {
	margin: 0;
}

/* Source Badges (for different review types) */
.trustie-review-card__source {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--tracksies-color-text-light, #888);
}

/* Import attribution — a source badge followed by an italic link back to
   where the review was originally posted. Its own element rather than text
   inside the review, so it can be restyled or switched off without touching
   stored review content, and so Trustie_Schema's reviewBody stays the
   customer's words only. Brand Hub variables throughout; fallbacks are Brand
   Hub's own defaults. */
.trustie-review-card__attribution {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
}

/* Square or circle straight from Designer: --tracksies-radius-pill is 0 when
   corners are set to "none" and 9999px at subtle / medium / rounded, so this
   one variable already expresses the choice — no per-setting branching. */
.trustie-review-card__attribution-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	overflow: hidden;
	border: 1px solid var(--tracksies-color-border, #e5e7eb);
	border-radius: var(--tracksies-radius-pill, 9999px);
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text-light, #888);
	font-size: 12px;
	line-height: 1;
}

/* contain, not cover: an uploaded logo is letterboxed rather than cropped. */
.trustie-review-card__attribution-icon {
	max-width: 14px;
	max-height: 14px;
	object-fit: contain;
	font-size: 12px;
	line-height: 1;
}

.trustie-review-card__attribution-link {
	font-style: italic;
	font-size: 12px;
	color: var(--tracksies-color-text-light, #888);
	text-decoration: underline;
}

.trustie-review-card__attribution-link:hover,
.trustie-review-card__attribution-link:focus {
	color: var(--tracksies-color-primary, #3E7CB1);
}

.trustie-review-card__source img {
	border-radius: 2px;
}

.trustie-review-card__source--google {
	color: var(--tracksies-color-primary, #3E7CB1);
}

.trustie-review-card__source--testimonial {
	color: var(--tracksies-color-primary, #3E7CB1);
}

.trustie-review-card__source--site {
	color: var(--tracksies-color-text-light, #666);
}

/* Role/Company for testimonials */
.trustie-review-card__role {
	color: var(--tracksies-color-text-light, #666);
	font-style: italic;
}

/* Card Footer */
.trustie-review-card__footer {
	margin-top: 12px;
	padding-top: 12px;
}

.trustie-review-card__helpful {
	font-size: var(--tracksies-font-size-small, 12px);
	color: var(--tracksies-color-text-light, #666);
}

.trustie-review-card__helpful i {
	color: var(--tracksies-color-primary, #3E7CB1);
	margin-right: 4px;
}

/* Custom Fields Display — two-column grid with bordered panel (matches Designer's 1px border pattern).
   Card root is the container (see .trustie-review-card :: container-type: inline-size below)
   so the grid can collapse to a single column when the card itself is narrow. */
.trustie-review-card__custom-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	margin-bottom: 16px;
	padding: 12px 16px;
	font-size: 0.9em;
	background: var(--tracksies-color-background, #f9f9f9);
	border: 1px solid var(--tracksies-color-border, #e5e5e5);
	border-radius: var(--tracksies-radius-small, 6px);
}

.trustie-review-card__custom-field {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.trustie-review-card__field-label {
	color: var(--tracksies-color-text-light, #666);
	font-weight: 500;
}

.trustie-review-card__field-value {
	color: var(--tracksies-color-text, #333);
}

/* Scale fields render inline like the yes/no row: "Fit: [bar]". Label
   on the left, scale visualization fills remaining row width. Slider
   visuals come from .trustie-metric__scale* in review-summary.css
   (shared with the summary panel — same classes, consistent look). */
.trustie-review-card__custom-field--scale {
	align-items: center;
	gap: 8px;
}

.trustie-review-card__custom-field--scale .trustie-review-card__field-value {
	flex: 1;
	min-width: 0;
}

/* Scale viz inside a card row — drop the inner padding so the bar
   sits cleanly aligned with the label baseline. */
.trustie-review-card__custom-field--scale .trustie-metric__scale {
	padding: 0;
}

/* When the card itself is narrower than 400px, collapse to a single column. */
@container (max-width: 400px) {
	.trustie-review-card__custom-fields {
		grid-template-columns: 1fr;
	}
}

.trustie-review-card__yesno {
	display: inline-block;
	font-weight: 700;
	line-height: 1;
	color: var(--tracksies-color-text, #332927);
}

/* ==========================================================================
   Review Badge
   ========================================================================== */

.trustie-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--tracksies-font-size-base, 14px);
}

.trustie-badge--compact {
	padding: 6px 10px;
	font-size: var(--tracksies-font-size-small, 13px);
}

.trustie-badge--minimal {
	padding: 4px 8px;
	background: transparent;
	border: none;
}

.trustie-badge__stars {
	display: inline-flex;
	gap: 2px;
}

.trustie-badge__stars i {
	line-height: 1;
}

.trustie-badge__rating {
	font-weight: 600;
	color: var(--tracksies-color-text, #333);
}

.trustie-badge__count {
	color: var(--tracksies-color-text-light, #666);
}

/* ==========================================================================
   Review Form (Shortcode)
   ========================================================================== */

.trustie-form-wrapper {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 20px 0;
}

.trustie-form {
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 24px;
	box-shadow: var(--tracksies-shadow-card, none);
}

.trustie-form__field {
	margin-bottom: 20px;
}

.trustie-form__field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--tracksies-color-text, #333);
	font-size: var(--tracksies-font-size-base, 14px);
}

.trustie-form__field label .required {
	color: var(--tracksies-color-error, #dc3545);
}

.trustie-form__field input[type="text"],
.trustie-form__field input[type="email"],
.trustie-form__field input[type="url"],
.trustie-form__field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--tracksies-font-size-base, 14px);
	font-family: var(--tracksies-font-body, inherit);
	color: var(--tracksies-color-text, #333);
	background: var(--tracksies-color-surface, #fff);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.trustie-form__field input:focus,
.trustie-form__field textarea:focus {
	border-color: var(--tracksies-rating-star-color, #FFB800);
	box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.15);
}

.trustie-form__field input:focus:not(:focus-visible),
.trustie-form__field textarea:focus:not(:focus-visible) {
	outline: none;
}

.trustie-form__field input:focus-visible,
.trustie-form__field textarea:focus-visible {
	outline: 2px solid var(--tracksies-color-primary, #0073aa);
	outline-offset: 2px;
}

.trustie-form__field textarea {
	min-height: 120px;
	resize: vertical;
}

/* ==========================================================================
   Frontend Radio & Checkbox — scoped to .trustie-review-form only.
   Does NOT affect the admin form builder.
   ========================================================================== */

.trustie-review-form .trustie-radio-group,
.trustie-review-form .trustie-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.trustie-review-form .trustie-radio-label,
.trustie-review-form .trustie-checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 6px);
	cursor: pointer;
	font-size: var(--tracksies-font-size-base, 14px);
	color: var(--tracksies-color-text, #333);
}

.trustie-review-form .trustie-radio-label:hover,
.trustie-review-form .trustie-checkbox-label:hover {
	border-color: var(--tracksies-color-primary, #2563eb);
}

.trustie-review-form .trustie-radio-label input[type="radio"],
.trustie-review-form .trustie-checkbox-label input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border: 2px solid var(--tracksies-color-border, #ccc);
	background: var(--tracksies-color-surface, #fff);
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.trustie-review-form .trustie-radio-label input[type="radio"] {
	border-radius: 50%;
}

.trustie-review-form .trustie-checkbox-label input[type="checkbox"] {
	border-radius: var(--tracksies-radius-small, 4px);
}

.trustie-review-form .trustie-radio-label input[type="radio"]:checked,
.trustie-review-form .trustie-checkbox-label input[type="checkbox"]:checked {
	border-color: var(--tracksies-rating-star-color, var(--tracksies-color-primary, #2563eb));
	background: var(--tracksies-rating-star-color, var(--tracksies-color-primary, #2563eb));
	box-shadow: inset 0 0 0 3px var(--tracksies-color-surface, #fff);
}

.trustie-review-form .trustie-radio-label input[type="radio"]:focus-visible,
.trustie-review-form .trustie-checkbox-label input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--tracksies-color-primary, #2563eb);
	outline-offset: 2px;
}

/* Button Group Layout — horizontal segmented row */
.trustie-review-form .trustie-radio-group.trustie-button-group,
.trustie-review-form .trustie-checkbox-group.trustie-button-group {
	display: flex !important;
	flex-direction: row;
	gap: 0;
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-small, 6px);
	overflow: hidden;
}

.trustie-review-form .trustie-button-group .trustie-radio-label,
.trustie-review-form .trustie-button-group .trustie-checkbox-label {
	flex: 1;
	min-width: 0;
	border: none;
	border-radius: 0;
	margin: 0;
	border-right: 1px solid var(--tracksies-color-border, #e0e0e0);
	padding: 12px 8px;
	justify-content: center;
	text-align: center;
}

.trustie-review-form .trustie-button-group .trustie-radio-label:last-child,
.trustie-review-form .trustie-button-group .trustie-checkbox-label:last-child {
	border-right: none;
}

.trustie-review-form .trustie-button-group .trustie-radio-label:nth-child(odd),
.trustie-review-form .trustie-button-group .trustie-checkbox-label:nth-child(odd) {
	background: var(--tracksies-color-background, #f8f9fa);
}

.trustie-review-form .trustie-button-group .trustie-radio-label:nth-child(even),
.trustie-review-form .trustie-button-group .trustie-checkbox-label:nth-child(even) {
	background: var(--tracksies-color-surface, #fff);
}

.trustie-review-form .trustie-button-group input[type="radio"],
.trustie-review-form .trustie-button-group input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.trustie-review-form .trustie-button-group .trustie-radio-label:has(input:checked),
.trustie-review-form .trustie-button-group .trustie-checkbox-label:has(input:checked) {
	background: var(--tracksies-rating-star-color, var(--tracksies-color-primary, #2563eb)) !important;
	color: #fff;
	font-weight: 600;
}

.trustie-review-form .trustie-button-group .trustie-radio-label:hover,
.trustie-review-form .trustie-button-group .trustie-checkbox-label:hover {
	background: color-mix(in srgb, var(--tracksies-rating-star-color, var(--tracksies-color-primary, #2563eb)) 15%, var(--tracksies-color-surface, #fff)) !important;
}

.trustie-review-form .trustie-button-group input:focus-visible + span {
	outline: 2px solid var(--tracksies-color-primary, #2563eb);
	outline-offset: -2px;
}

@media (max-width: 600px) {
	.trustie-review-form .trustie-button-group {
		flex-direction: column;
	}

	.trustie-review-form .trustie-button-group .trustie-radio-label,
	.trustie-review-form .trustie-button-group .trustie-checkbox-label {
		border-right: none;
		border-bottom: 1px solid var(--tracksies-color-border, #e0e0e0);
	}

	.trustie-review-form .trustie-button-group .trustie-radio-label:last-child,
	.trustie-review-form .trustie-button-group .trustie-checkbox-label:last-child {
		border-bottom: none;
	}
}

/* Star Rating Input */
.trustie-form__stars {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.trustie-form__stars input[type="radio"] {
	display: none;
}

.trustie-form__stars label {
	font-size: 32px;
	color: var(--tracksies-rating-star-empty, #ddd);
	cursor: pointer;
	transition: color 0.15s ease, transform 0.15s ease;
	margin: 0 !important;
	line-height: 1;
}

.trustie-form__stars label i {
	display: block;
}

.trustie-form__stars label:hover,
.trustie-form__stars label:hover ~ label,
.trustie-form__stars input:checked ~ label {
	color: var(--tracksies-rating-star-color, #f5a623);
}

.trustie-form__stars label:hover {
	transform: scale(1.1);
}

/* File Upload */
.trustie-form__ugc {
	margin-top: 20px;
}

.trustie-form__dropzone {
	position: relative;
	border: 2px dashed var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 24px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.trustie-form__dropzone:hover {
	border-color: var(--tracksies-color-primary, #3E7CB1);
	background: rgba(0, 115, 170, 0.02);
}

.trustie-form__dropzone.is-dragover {
	border-color: var(--tracksies-color-primary, #3E7CB1);
	background: rgba(0, 115, 170, 0.05);
}

.trustie-form__file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.trustie-form__dropzone-icon {
	font-size: 32px;
	display: block;
	margin-bottom: 8px;
	color: var(--tracksies-color-text-light, #666);
}

.trustie-form__dropzone-text {
	color: var(--tracksies-color-text-light, #666);
	font-size: var(--tracksies-font-size-base, 14px);
}

.trustie-form__previews {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.trustie-form__preview {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: var(--tracksies-radius-small, 6px);
	overflow: hidden;
}

.trustie-form__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trustie-form__preview-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

/* Submit Button */
.trustie-form__submit {
	margin-top: 24px;
}

.trustie-form__button {
	display: inline-block;
	padding: 14px 28px;
	border: none;
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--tracksies-font-size-base, 14px);
	font-weight: 600;
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #2271b1));
	color: var(--tracksies-button-primary-text, #fff);
	cursor: pointer;
	transition: filter var(--tracksies-transition-fast, 0s), transform var(--tracksies-transition-fast, 0s);
}

.trustie-form__button:hover {
	background: var(--tracksies-button-secondary-bg, var(--tracksies-color-secondary, #1e3a5f));
	color: var(--tracksies-button-secondary-text, #fff);
	filter: none;
	transform: var(--tracksies-hover-lift, none);
}

.trustie-form__button:active {
	transform: translateY(0);
}

.trustie-form__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Form Messages */
.trustie-form__message {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--tracksies-font-size-base, 14px);
}

.trustie-form__message:empty {
	display: none;
}

.trustie-form__message--success {
	background: rgba(40, 167, 69, 0.1);
	color: var(--tracksies-color-success, #28a745);
	border: 1px solid rgba(40, 167, 69, 0.2);
}

.trustie-form__message--error {
	background: rgba(220, 53, 69, 0.1);
	color: var(--tracksies-color-error, #dc3545);
	border: 1px solid rgba(220, 53, 69, 0.2);
}

/* ==========================================================================
   Frontend Custom Form Fields (Form Builder)
   ========================================================================== */

.trustie-review-form {
	width: 100%;
	margin: 20px 0;
}

/* Q&A wrapper — go full width too, matching the form behaviour. */
.tracksies-qa {
	width: 100%;
}

.trustie-review-form form {
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 24px;
}

.trustie-form-field {
	margin-bottom: 20px;
}

.trustie-form-field:last-of-type {
	margin-bottom: 24px;
}

.trustie-form-field label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: var(--trustie-form-font-size, var(--tracksies-font-size-base, 14px));
	color: var(--tracksies-color-text, #333);
	/* Heading var first, then body, then Bricks/global, then inherit.
	   Mirrors .trustie-review-card__title so the form question reads as
	   a card title — the user's mental model when filling the form. */
	font-family: var(--tracksies-font-heading, var(--tracksies-font-body, var(--bricks-body-font-family, var(--global-body-font-family, inherit))));
}

.trustie-form-field label .required {
	color: var(--tracksies-color-error, #dc3545);
	margin-left: 2px;
}

.trustie-form-field input[type="text"],
.trustie-form-field input[type="email"],
.trustie-form-field input[type="url"],
.trustie-form-field textarea,
.trustie-form-field select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--trustie-form-font-size, var(--tracksies-font-size-base, 14px));
	/* Body var, then Bricks/global, then inherit — matches review card body. */
	font-family: var(--tracksies-font-body, var(--bricks-body-font-family, var(--global-body-font-family, inherit)));
	color: var(--tracksies-color-text, #333);
	background: var(--tracksies-color-surface, #fff);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.trustie-form-field input:focus,
.trustie-form-field textarea:focus,
.trustie-form-field select:focus {
	border-color: var(--tracksies-rating-star-color, #FFB800);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tracksies-rating-star-color, #FFB800) 15%, transparent);
}

.trustie-form-field input:focus:not(:focus-visible),
.trustie-form-field textarea:focus:not(:focus-visible),
.trustie-form-field select:focus:not(:focus-visible) {
	outline: none;
}

.trustie-form-field input:focus-visible,
.trustie-form-field textarea:focus-visible,
.trustie-form-field select:focus-visible {
	outline: 2px solid var(--tracksies-color-primary, #0073aa);
	outline-offset: 2px;
}

.trustie-form-field textarea {
	min-height: 100px;
	resize: vertical;
}

.trustie-form-help {
	margin: 6px 0 0;
	font-size: var(--trustie-form-font-size, var(--tracksies-font-size-base, 13px));
	color: var(--tracksies-color-text-light, #666);
}

/* Star Rating Input */
.trustie-star-rating-input {
	display: inline-flex;
	gap: 6px;
}

.trustie-star-rating-input .trustie-star {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 28px;
	color: var(--tracksies-rating-star-empty, #ddd);
	transition: color 0.15s ease, transform 0.15s ease;
	line-height: 1;
}

.trustie-star-rating-input .trustie-star:hover,
.trustie-star-rating-input .trustie-star.is-active {
	color: var(--tracksies-rating-star-color, #f5a623);
}

.trustie-star-rating-input .trustie-star:hover {
	transform: scale(1.1);
}

.trustie-star-rating-input .trustie-star i {
	display: block;
}

/* Scale Slider (1-10) */
/* Form-side scale slider — same star-empty track + star-full marker
   visual language as the aggregate scale on the summary tile, so the
   submission form and the resulting display read as one component. */
.trustie-scale-slider {
	position: relative;
	padding: 8px 0 0;
}

.trustie-scale-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	background: var(--tracksies-rating-star-empty, #E0E0E0);
	border-radius: var(--tracksies-radius-pill, 999px);
	outline: none;
	cursor: pointer;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
}

.trustie-scale-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 8px;
	height: 16px;
	border-radius: var(--tracksies-radius-small, 2px);
	background: var(--tracksies-rating-star-color, #FFB800);
	cursor: pointer;
	border: none;
	position: relative;
	z-index: 2;
}

.trustie-scale-range::-moz-range-thumb {
	width: 8px;
	height: 16px;
	border-radius: var(--tracksies-radius-small, 2px);
	background: var(--tracksies-rating-star-color, #FFB800);
	cursor: pointer;
	border: none;
	position: relative;
	z-index: 2;
}

.trustie-scale-range:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--tracksies-color-primary, #1d1d1b);
	outline-offset: 2px;
}

.trustie-scale-range:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--tracksies-color-primary, #1d1d1b);
	outline-offset: 2px;
}

/* Ticks overlay — three subtle reference marks at quarter positions.
   Hidden by default; only show if you want them — uncomment in theme. */
.trustie-scale-ticks {
	display: none;
}

.trustie-scale-tick {
	width: 2px;
	height: 6px;
	background: var(--tracksies-rating-star-empty, #c3c4c7);
}

/* Scale Labels */
.trustie-scale-labels {
	display: flex;
	justify-content: space-between;
	margin-top: -4px;
	font-size: 12px;
	color: var(--tracksies-color-text-light, #666);
}

.trustie-scale-labels span {
	max-width: 30%;
}

.trustie-scale-labels span:first-child {
	text-align: left;
}

.trustie-scale-labels span:nth-child(2) {
	text-align: center;
}

.trustie-scale-labels span:last-child {
	text-align: right;
}

/* Yes/No Input */
.trustie-yesno-input {
	display: flex;
	gap: 12px;
}

.trustie-yesno-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 24px;
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 6px);
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text, #333);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.trustie-yesno-btn:hover {
	border-color: var(--tracksies-color-primary, #3E7CB1);
}

.trustie-yesno-btn.is-active {
	background: var(--tracksies-color-primary, #3E7CB1);
	border-color: var(--tracksies-color-primary, #3E7CB1);
	color: #fff;
}

/* Radio & Checkbox Groups */
.trustie-radio-group,
.trustie-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.trustie-radio-label,
.trustie-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: normal;
	margin: 0;
}

.trustie-radio-label input,
.trustie-checkbox-label input {
	width: auto;
	margin: 0;
}

.trustie-radio-label span,
.trustie-checkbox-label span {
	font-size: 14px;
	color: var(--tracksies-color-text, #333);
}

/* Form Row (side by side fields) */
.trustie-form-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (max-width: 600px) {
	.trustie-form-row {
		grid-template-columns: 1fr;
	}
}

/* Media Upload */
.trustie-media-upload {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.trustie-media-preview {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.trustie-media-preview .trustie-preview-item {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: var(--tracksies-radius-small, 6px);
	overflow: hidden;
}

.trustie-media-preview .trustie-preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trustie-media-preview .trustie-preview-item .trustie-remove-media {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.trustie-upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px dashed var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 6px);
	background: var(--tracksies-color-background, #f9f9f9);
	color: var(--tracksies-color-text-light, #666);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.trustie-upload-btn:hover {
	border-color: var(--tracksies-color-primary, #3E7CB1);
	color: var(--tracksies-color-primary, #3E7CB1);
}

.trustie-upload-btn input[type="file"] {
	display: none;
}

.trustie-upload-btn i {
	font-size: 16px;
}

/* Form Actions */
.trustie-form-actions {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--tracksies-color-border, #e0e0e0);
}

.trustie-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: none;
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--trustie-form-font-size, var(--tracksies-font-size-base, 15px));
	font-weight: normal;
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #2271b1));
	color: var(--tracksies-button-primary-text, #fff);
	cursor: pointer;
	transition: filter 0.2s ease;
}

.trustie-submit-btn:hover:not(:disabled) {
	background: var(--tracksies-button-secondary-bg, var(--tracksies-color-secondary, #1e3a5f));
	color: var(--tracksies-button-secondary-text, #fff);
	filter: none;
}

.trustie-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.trustie-submit-loading {
	display: none;
}

/* Form Message */
.trustie-form-message {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: var(--trustie-form-font-size, var(--tracksies-font-size-base, 14px));
}

.trustie-form-message.trustie-form-message--success {
	background: rgba(40, 167, 69, 0.1);
	color: var(--tracksies-color-success, #28a745);
	border: 1px solid rgba(40, 167, 69, 0.2);
}

.trustie-form-message.trustie-form-message--error {
	background: rgba(220, 53, 69, 0.1);
	color: var(--tracksies-color-error, #dc3545);
	border: 1px solid rgba(220, 53, 69, 0.2);
}

/* ==========================================================================
   No Reviews Message
   ========================================================================== */

.trustie-no-reviews,
.trustie-no-filter-results {
	text-align: center;
	padding: 40px 20px;
	color: var(--tracksies-color-text-light, #888);
	font-size: var(--tracksies-font-size-base, 14px);
	background: var(--tracksies-color-background, #f9f9f9);
	border-radius: var(--tracksies-radius-medium, 8px);
}

/* ==========================================================================
   Carousel (Basic Structure)
   ========================================================================== */

.trustie-carousel {
	position: relative;
	overflow: hidden;
	margin: 20px 0;
}

.trustie-carousel__track {
	display: flex;
	transition: transform 0.5s ease;
}

.trustie-carousel__slide {
	flex: 0 0 100%;
	padding: 0 10px;
}

.trustie-carousel__prev,
.trustie-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: 50%;
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text, #333);
	font-size: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 10;
}

.trustie-carousel__prev:hover,
.trustie-carousel__next:hover {
	background: var(--tracksies-color-surface, #f5f5f5);
	border-color: var(--tracksies-rating-star-color, #FFB800);
}

.trustie-carousel__prev { left: 10px; }
.trustie-carousel__next { right: 10px; }

.trustie-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.trustie-carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tracksies-rating-star-empty-color, #e0e0e0);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.trustie-carousel__dot:hover {
	/* Brand Hub only. Previews the active colour; .is-active stays
	   distinguishable by its scale transform. */
	background: var(--tracksies-color-primary, #3E7CB1);
}

.trustie-carousel__dot.is-active {
	background: var(--tracksies-color-primary, #3E7CB1);
	transform: scale(1.2);
}

/* ==========================================================================
   Print - Hide widget
   ========================================================================== */

@media print {
	.trustie-widget {
		display: none !important;
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.trustie-widget__panel,
	.trustie-widget__tab,
	.trustie-widget__cta,
	.trustie-widget__spinner {
		transition: none;
		animation: none;
	}
}


/* ==========================================================================
   Q&A Section
   ========================================================================== */

.tracksies-qa {
	margin: 20px 0;
}

.tracksies-qa__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 12px;
}

.tracksies-qa__title {
	margin: 0;
	font-size: 1.25em;
	font-weight: 600;
	color: var(--tracksies-color-text, #333);
}

.tracksies-qa__ask-btn,
.tracksies-qa__submit {
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #2271b1));
	color: var(--tracksies-button-primary-text, #fff);
	border: none;
	padding: 10px 20px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.tracksies-qa__ask-btn:hover,
.tracksies-qa__submit:hover {
	background: var(--tracksies-button-primary-bg-hover, var(--tracksies-color-secondary, #135e96));
	color: var(--tracksies-button-primary-text-hover, #fff);
}

.tracksies-qa__cancel {
	background: var(--tracksies-button-secondary-bg, var(--tracksies-color-secondary, #135e96));
	color: var(--tracksies-button-secondary-text, #fff);
	border: none;
	padding: 10px 20px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.tracksies-qa__cancel:hover {
	background: var(--tracksies-button-secondary-bg-hover, var(--tracksies-color-primary, #2271b1));
	color: var(--tracksies-button-secondary-text-hover, #fff);
}

.tracksies-qa__load-more {
	background: transparent;
	border: 1px solid var(--tracksies-color-primary, #2271b1);
	color: var(--tracksies-color-primary, #2271b1);
	padding: 10px 20px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.tracksies-qa__load-more:hover {
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #2271b1));
	color: var(--tracksies-button-primary-text, #fff);
}

.tracksies-qa__form-wrapper {
	background: var(--tracksies-color-surface, #f5f5f5);
	padding: 20px;
	border-radius: var(--tracksies-radius-medium, 8px);
	margin-bottom: 20px;
}

.tracksies-qa__form-row--inline {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.tracksies-qa__form-field {
	margin-bottom: 16px;
}

.tracksies-qa__form-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--tracksies-color-text, #333);
}

.tracksies-qa__form-field input,
.tracksies-qa__form-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 14px;
	background: var(--tracksies-color-background, #fff);
	color: var(--tracksies-color-text, #333);
}

.tracksies-qa__form-field input:focus,
.tracksies-qa__form-field textarea:focus {
	border-color: var(--tracksies-color-primary, #2271b1);
}

.tracksies-qa__form-field input:focus:not(:focus-visible),
.tracksies-qa__form-field textarea:focus:not(:focus-visible) {
	outline: none;
}

.tracksies-qa__form-field input:focus-visible,
.tracksies-qa__form-field textarea:focus-visible {
	outline: 2px solid var(--tracksies-color-primary, #0073aa);
	outline-offset: 2px;
}

.tracksies-qa__form-actions {
	display: flex;
	gap: 12px;
}

.tracksies-qa__empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--tracksies-color-text-light, #666);
}

.tracksies-qa__pagination {
	text-align: center;
	margin-top: 20px;
}

/* Q&A Question Item */
.tracksies-qa__question {
	padding: 20px;
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-medium, 8px);
	margin-bottom: 16px;
	background: var(--tracksies-color-background, #fff);
}

.tracksies-qa__question-header {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 12px;
}

.tracksies-qa__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-weight: 600;
	font-size: 14px;
	flex-shrink: 0;
}

.tracksies-qa__badge--question {
	background: var(--tracksies-color-surface, #f5f5f5);
	color: var(--tracksies-color-text, #333);
}

.tracksies-qa__badge--answer {
	background: var(--tracksies-color-surface, #f5f5f5);
	color: var(--tracksies-color-text, #333);
}

.tracksies-qa__badge--store {
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #2271b1));
	color: var(--tracksies-button-primary-text, #fff);
}

.tracksies-qa__store-badge {
	display: inline-block;
	background: var(--tracksies-button-primary-bg, var(--tracksies-color-primary, #2271b1));
	color: var(--tracksies-button-primary-text, #fff);
	padding: 2px 8px;
	border-radius: var(--tracksies-radius-small, 4px);
	font-size: 11px;
	font-weight: 600;
	margin-left: 6px;
	text-transform: uppercase;
}

.tracksies-qa__question-meta {
	flex: 1;
}

.tracksies-qa__author {
	font-weight: 500;
	color: var(--tracksies-color-text, #333);
}

.tracksies-qa__date {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #666);
	margin-left: 8px;
}

.tracksies-qa__question-content,
.tracksies-qa__answer-content {
	color: var(--tracksies-color-text, #333);
	line-height: 1.6;
	margin-bottom: 12px;
}

/* Q&A Answer */
.tracksies-qa__answers {
	margin-left: 40px;
	margin-top: 16px;
	padding-left: 16px;
	border-left: 2px solid var(--tracksies-color-border, #ddd);
}

.tracksies-qa__answer {
	padding: 16px 0;
	border-bottom: 1px solid var(--tracksies-color-border, #eee);
}

.tracksies-qa__answer:last-child {
	border-bottom: none;
}

.tracksies-qa__answer--store {
	background: rgba(34, 113, 177, 0.03);
	padding: 16px;
	margin: 0 -16px;
	border-radius: var(--tracksies-radius-small, 4px);
}

.tracksies-qa__answer-header {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 8px;
}

.tracksies-qa__answer-meta {
	flex: 1;
}

/* Q&A Actions */
.tracksies-qa__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-top: 12px;
}

.tracksies-qa__action {
	background: none;
	border: none;
	color: var(--tracksies-color-text-light, #666);
	cursor: pointer;
	font-size: 13px;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.tracksies-qa__action:hover {
	color: var(--tracksies-color-primary, #2271b1);
}

.tracksies-qa__submit--small {
	padding: 8px 16px;
	font-size: 13px;
}

/* Q&A Question Actions */
.tracksies-qa__question-actions,
.tracksies-qa__answer-actions {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-top: 12px;
}

/* Q&A Voting */
.tracksies-qa__voting {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tracksies-qa__voting-label {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #666);
}

.tracksies-qa__vote {
	background: none;
	border: 1px solid var(--tracksies-color-border, #e0d9d0);
	border-radius: var(--tracksies-radius-small, 4px);
	color: var(--tracksies-color-text-light, #666);
	cursor: pointer;
	font-size: 13px;
	padding: 4px 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.15s ease;
}

.tracksies-qa__vote:hover {
	border-color: var(--tracksies-color-primary, #2271b1);
	color: var(--tracksies-color-primary, #2271b1);
}

.tracksies-qa__vote--yes:hover {
	border-color: var(--tracksies-color-success, #2e7d32);
	color: var(--tracksies-color-success, #2e7d32);
}

.tracksies-qa__vote--no:hover {
	border-color: var(--tracksies-color-error, #d32f2f);
	color: var(--tracksies-color-error, #d32f2f);
}

.tracksies-qa__voting.is-voted .tracksies-qa__vote {
	cursor: default;
	opacity: 0.7;
}

.tracksies-qa__voting.is-voted .tracksies-qa__vote--yes .fa-solid {
	color: var(--tracksies-color-success, #2e7d32);
}

.tracksies-qa__voting.is-voted .tracksies-qa__vote--no .fa-solid {
	color: var(--tracksies-color-error, #d32f2f);
}

.tracksies-qa__vote-count {
	font-size: 12px;
}

/* Q&A Messages */
.tracksies-qa__message {
	padding: 12px 16px;
	border-radius: var(--tracksies-radius-small, 4px);
	margin-bottom: 16px;
	font-size: 14px;
}

.tracksies-qa__message--success {
	background: color-mix(in srgb, var(--tracksies-color-success, #2e7d32) 10%, transparent);
	color: var(--tracksies-color-success, #2e7d32);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-success, #2e7d32) 25%, transparent);
}

.tracksies-qa__message--error {
	background: color-mix(in srgb, var(--tracksies-color-error, #d32f2f) 10%, transparent);
	color: var(--tracksies-color-error, #d32f2f);
	border: 1px solid color-mix(in srgb, var(--tracksies-color-error, #d32f2f) 25%, transparent);
}

@media (max-width: 600px) {
	.tracksies-qa__form-row--inline {
		grid-template-columns: 1fr;
	}

	.tracksies-qa__header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Reviews Page (Shortcode)
   ========================================================================== */

/* Reviews page width is in reviews-page.css on .tracksies-reviews-page */

/* Summary Section */
.trustie-reviews-page__summary {
	display: flex;
	gap: 30px;
	padding: 30px;
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e5e7eb);
	border-radius: var(--tracksies-radius-large, 12px);
	margin-bottom: 24px;
}

.trustie-reviews-page__score {
	text-align: center;
	min-width: 120px;
}

.trustie-reviews-page__average {
	font-size: 48px;
	font-weight: 700;
	color: var(--tracksies-color-text, #1f2937);
	line-height: 1;
}

.trustie-reviews-page__max {
	font-size: 18px;
	color: var(--tracksies-color-text-light, #6b7280);
}

.trustie-reviews-page__stars {
	margin: 8px 0;
}

.trustie-reviews-page__count {
	font-size: 14px;
	color: var(--tracksies-color-text-light, #6b7280);
}

.trustie-reviews-page__breakdown {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.trustie-reviews-page__bar-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 8px;
	border-radius: var(--tracksies-radius-small, 4px);
	text-decoration: none;
	color: inherit;
	transition: background 0.2s;
}

.trustie-reviews-page__bar-row:hover,
.trustie-reviews-page__bar-row.active {
	background: var(--tracksies-color-background, #f3f4f6);
}

.trustie-reviews-page__bar-label {
	min-width: 50px;
	font-size: 13px;
	color: var(--tracksies-color-text, #374151);
}

.trustie-reviews-page__bar {
	flex: 1;
	height: 8px;
	background: var(--tracksies-color-border, #e5e7eb);
	border-radius: 4px;
	overflow: hidden;
}

.trustie-reviews-page__bar-fill {
	height: 100%;
	border-radius: 4px;
}

.trustie-reviews-page__bar-count {
	min-width: 30px;
	text-align: right;
	font-size: 13px;
	color: var(--tracksies-color-text-light, #6b7280);
}

/* Controls Section */
.trustie-reviews-page__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	padding: 16px;
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e5e7eb);
	border-radius: var(--tracksies-radius-medium, 8px);
}

/* Filters */
.trustie-reviews-page__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.trustie-reviews-page__filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--tracksies-color-primary, #3b82f6);
	color: #fff;
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s;
}

.trustie-reviews-page__filter-tag:hover {
	background: color-mix(in srgb, var(--tracksies-color-primary, #3b82f6) 85%, black);
	color: #fff;
}

.trustie-reviews-page__filter-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--tracksies-color-background, #f3f4f6);
	color: var(--tracksies-color-text, #374151);
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s;
}

.trustie-reviews-page__filter-link:hover {
	background: var(--tracksies-color-border, #e5e7eb);
	color: var(--tracksies-color-text, #374151);
}

.trustie-reviews-page__product-filter,
.trustie-reviews-page__custom-filter {
	padding: 8px 12px;
	border: 1px solid var(--tracksies-color-border, #d1d5db);
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: 13px;
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text, #374151);
	cursor: pointer;
	min-width: 140px;
}

.trustie-reviews-page__product-filter:focus,
.trustie-reviews-page__custom-filter:focus {
	border-color: var(--tracksies-color-primary, #3b82f6);
}

.trustie-reviews-page__product-filter:focus:not(:focus-visible),
.trustie-reviews-page__custom-filter:focus:not(:focus-visible) {
	outline: none;
}

.trustie-reviews-page__product-filter:focus-visible,
.trustie-reviews-page__custom-filter:focus-visible {
	outline: 2px solid var(--tracksies-color-primary, #0073aa);
	outline-offset: 2px;
}

/* Active Custom Filters */
.trustie-reviews-page__active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--tracksies-color-border, #e5e7eb);
	width: 100%;
}

/* Sorting */
.trustie-reviews-page__sorting {
	display: flex;
	align-items: center;
	gap: 8px;
}

.trustie-reviews-page__sorting label {
	font-size: 13px;
	color: var(--tracksies-color-text-light, #6b7280);
}

.trustie-reviews-page__sorting select {
	padding: 8px 12px;
	border: 1px solid var(--tracksies-color-border, #d1d5db);
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: 13px;
	background: var(--tracksies-color-surface, #fff);
	color: var(--tracksies-color-text, #374151);
	cursor: pointer;
}

/* Reviews List */
.trustie-reviews-page__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.trustie-reviews-page__empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--tracksies-color-text-light, #6b7280);
	background: var(--tracksies-color-surface, #fff);
	border: 1px solid var(--tracksies-color-border, #e5e7eb);
	border-radius: var(--tracksies-radius-medium, 8px);
}

.trustie-reviews-page__empty a {
	color: var(--tracksies-color-primary, #3b82f6);
	margin-left: 8px;
}

/* Pagination */
.trustie-reviews-page__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding: 16px;
}

.trustie-reviews-page__prev,
.trustie-reviews-page__next {
	padding: 8px 16px;
	background: var(--tracksies-color-primary, #3b82f6);
	color: #fff;
	border-radius: var(--tracksies-radius-small, 6px);
	font-size: 14px;
	text-decoration: none;
	transition: background 0.2s;
}

.trustie-reviews-page__prev:hover,
.trustie-reviews-page__next:hover {
	background: color-mix(in srgb, var(--tracksies-color-primary, #3b82f6) 85%, black);
	color: #fff;
}

.trustie-reviews-page__page-info {
	font-size: 14px;
	color: var(--tracksies-color-text-light, #6b7280);
}

/* ==========================================================================
   Reviewer Demographics (card author info)
   ========================================================================== */

.trustie-review-card__demographics {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 2px;
}

.trustie-review-card__demographic {
	font-size: 12px;
	color: var(--tracksies-color-text-light, #6b7280);
}

.trustie-review-card__demographic-label {
	font-weight: 600;
	color: var(--tracksies-color-text, #1f2937);
}

/* Responsive */
@media (max-width: 768px) {
	.trustie-reviews-page__summary {
		flex-direction: column;
		text-align: center;
	}

	.trustie-reviews-page__score {
		min-width: auto;
	}

	.trustie-reviews-page__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.trustie-reviews-page__filters {
		justify-content: center;
	}

	.trustie-reviews-page__sorting {
		justify-content: center;
	}
}

/* ─── Regulation Notice ─── */
.trustie-regulation-notice {
	background: var(--tracksies-color-surface, #f8f9fa);
	border: 1px solid var(--tracksies-color-border, #dee2e6);
	border-radius: var(--tracksies-radius-medium, 8px);
	padding: 16px 20px;
	margin-bottom: 16px;
}

.trustie-regulation-notice__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--tracksies-color-text, #333);
}

.trustie-regulation-notice__header i {
	color: var(--tracksies-color-primary, #3E7CB1);
}

.trustie-regulation-notice p {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--tracksies-color-text-light, #666);
}

.trustie-regulation-notice__can,
.trustie-regulation-notice__cannot {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.trustie-regulation-notice__can li,
.trustie-regulation-notice__cannot li {
	padding: 4px 0;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.trustie-regulation-notice__can li i,
.trustie-regulation-notice__cannot li i {
	color: var(--tracksies-color-text, #333);
}

.trustie-regulation-notice__reassurance {
	font-style: italic;
	color: var(--tracksies-color-text-light, #888) !important;
	font-size: 12px !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Review Filter Bar
   ========================================================================== */

/* Collapsible toggle wrapper */
.trustie-reviews-filters-toggle {
	margin-bottom: 1rem;
	border: none;
}

.trustie-reviews-filters-toggle[open] > .trustie-reviews-filters {
	margin-top: 0.5rem;
}

/* Summary row — styled as a clickable button-like row */
.trustie-reviews-filters-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	padding: 0.5rem 1rem;
	background: var(--tracksies-color-surface, #f9f9f9);
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 3px);
	font-size: 1rem;
	font-weight: 600;
	color: var(--tracksies-color-text, #333);
	list-style: none;
	user-select: none;
}

.trustie-reviews-filters-summary::-webkit-details-marker {
	display: none;
}

.trustie-reviews-filters-summary:hover {
	border-color: var(--tracksies-color-primary, #0073aa);
	background: var(--tracksies-color-background, #fff);
}

/* Active-filter count badge on the summary */
.trustie-reviews-filters-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.35rem;
	background: var(--tracksies-color-primary, #0073aa);
	color: #fff;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* Filter pills row — shown when <details> is open */
.trustie-reviews-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	padding: 0.75rem;
	background: var(--tracksies-color-surface, #f9f9f9);
	border-radius: var(--tracksies-radius-medium, 4px);
}

.trustie-reviews-filters .trustie-filter-label {
	font-weight: 600;
	margin-right: 0.5rem;
}

.trustie-reviews-filters .trustie-filter-btn {
	display: inline-block;
	padding: 0.6rem 1rem;
	background: var(--tracksies-color-background, #fff);
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 3px);
	color: var(--tracksies-color-text, #333);
	text-decoration: none;
	font-size: 1rem;
	transition: background 0.15s, border-color 0.15s;
}

/* Star characters inside rating filter buttons */
.trustie-reviews-filters .trustie-filter-btn--stars {
	font-size: 1.1rem;
}

.trustie-reviews-filters .trustie-filter-btn:hover {
	background: var(--tracksies-color-surface, #f0f0f0);
	border-color: var(--tracksies-color-primary, #0073aa);
}

.trustie-reviews-filters .trustie-filter-btn.is-active {
	background: var(--tracksies-color-primary, #0073aa);
	border-color: var(--tracksies-color-primary, #0073aa);
	color: #fff;
}

/* "Clear filters" link under the empty-state message */
.trustie-no-reviews-clear {
	margin-top: 0.5rem;
	font-size: 0.9rem;
}

.trustie-no-reviews-clear a {
	color: var(--tracksies-color-primary, #0073aa);
	text-decoration: underline;
}

/* ==========================================================================
   Centered reviews action row (Filters + Write a Review buttons)
   ========================================================================== */

.trustie-reviews-actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 2rem 0;
}

.trustie-reviews-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--tracksies-color-text, #1a1a1a);
	color: var(--tracksies-color-background, #fff);
	border: none;
	border-radius: var(--tracksies-radius-large, 999px);
	font-size: 1.2rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.trustie-reviews-action-btn:hover {
	color: var(--tracksies-color-background, #fff);
	text-decoration: none;
}

.trustie-reviews-action-btn .trustie-filters-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.4rem;
	background: var(--tracksies-color-primary, #0073aa);
	color: #fff;
	border-radius: var(--tracksies-radius-large, 999px);
	font-size: 0.75rem;
	font-weight: 700;
	margin-left: 0.25rem;
}

/* Sort dropdown sits in the toolbar alongside the Filters / Write-a-Review
   buttons. Surface-tinted pill so it reads as a control without competing
   with the primary actions. */
.trustie-reviews-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--tracksies-color-surface, #f9f9f9);
	border: 1px solid var(--tracksies-color-border, #e0e0e0);
	border-radius: var(--tracksies-radius-large, 999px);
	font-size: 1.2rem;
	color: var(--tracksies-color-text, #1a1a1a);
}

.trustie-reviews-sort i {
	color: var(--tracksies-color-text-light, #666);
}

.trustie-reviews-sort-select {
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	padding: 0;
	cursor: pointer;
	outline: none;
}

.trustie-reviews-sort-select:focus-visible {
	outline: 2px solid var(--tracksies-color-primary, #1d1d1b);
	outline-offset: 2px;
}

/* Filter panel — hidden by default, shown when toggle is active */
.trustie-filters-panel {
	margin-bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.trustie-filters-panel[hidden] {
	display: none;
}

/* Clear-all row at the bottom of the panel — separator with a more
   muted button so it visually reads as a reset, not another filter. */
.trustie-reviews-filters--clear {
	background: transparent !important;
	padding: 4px 0 0 !important;
}
.trustie-reviews-filters--clear .trustie-filter-btn--clear {
	background: transparent;
	border: 1px dashed var(--tracksies-color-border, #c3c4c7);
	color: var(--tracksies-color-text-light, #666);
	font-size: 0.85rem;
	padding: 0.4rem 0.8rem;
}

/* ==========================================================================
   Stacked card layout — tightened hierarchy
   ========================================================================== */

/* Top row: stars (left) + source icon (right) */
.trustie-review-card__top-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.trustie-review-card__top-row .trustie-review-card__source-icon {
	display: inline-flex;
	align-items: center;
	color: var(--tracksies-color-text-light, #757575);
	font-size: 1rem;
}

.trustie-review-card__top-row .trustie-review-card__source-icon i {
	font-size: 1rem;
}

/* Header (stars only) — no bottom margin when nested in top-row */
.trustie-review-card__header {
	margin-bottom: 0;
}

/* Backwards-compat: header outside top-row (older markup) keeps spacing.
   16px so stars→title gap visually matches title→content gap (also 16px). */
.trustie-review-card > .trustie-review-card__header {
	margin-bottom: 16px;
}

/* Media block — photos below content in stacked layout. Reuses __image sizing. */
.trustie-review-card__media {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
	margin-bottom: 12px;
}

/* Featured badge — appears below the header row */
.trustie-review-card__featured-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tracksies-color-review-verified, var(--tracksies-color-primary, #00a32a));
	background: color-mix(in srgb, var(--tracksies-color-review-verified, var(--tracksies-color-primary, #00a32a)) 10%, transparent);
	padding: 3px 8px;
	border-radius: var(--tracksies-radius-small, 4px);
	margin-bottom: 8px;
}

/* Body wraps title + content + non-demographic custom fields */
.trustie-review-card__body {
	margin-bottom: 12px;
}

/* Title stands out a bit more */
.trustie-review-card .trustie-review-card__title {
	font-size: var(--tracksies-font-size-large, 1rem);
	font-weight: 700;
	margin: 0 0 16px 0;
	line-height: 1.3;
	/* Force inherit from the card so the family matches the body text
	   instead of falling back to a heading-var lookup that often resolves
	   to a different font (or the wrong system fallback) under Bricks
	   templates. The size + weight already make it stand out as a heading. */
	font-family: inherit;
}

/* Content — constrain line-height for readability */
.trustie-review-card .trustie-review-card__content {
	line-height: 1.65;
	margin-bottom: 12px;
}

/* Meta (author row) sits below body — spacing only, no border */
.trustie-review-card__meta {
	margin-bottom: 0;
}

/* Author line — name + verified badge side by side */
.trustie-review-card__author-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

/* Verified badge within author line — auto width, never stretched */
.trustie-review-card__author-line .trustie-review-card__verified {
	width: auto;
	flex: 0 0 auto;
	align-self: flex-start;
}

/* Author name — slightly bolder for hierarchy */
.trustie-review-card .trustie-review-card__author {
	font-weight: 600;
}

/* Footer: date (left) + voting hooks (right) on one flex row, with the
   border-top providing the visual divider between body and footer.
   Voting block resets its own border/margin when nested here (see trusties.css). */
.trustie-review-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--tracksies-color-border, #e0e0e0);
	font-size: var(--tracksies-font-size-base, 16px);
	color: var(--tracksies-color-text-light, #888);
}

.trustie-review-card__footer-date {
	color: var(--tracksies-color-text-light, #757575);
	font-size: var(--tracksies-font-size-base, 16px);
	font-style: italic;
}

/* Inline date placement (testimonials, Google reviews) — sits between
   content and the avatar/name block, left-aligned, same italic style
   as the footer date so the surface stays visually consistent. */
.trustie-review-card__inline-date {
	margin-bottom: 16px;
}

.trustie-review-card__footer-helpful {
	margin-left: auto; /* pins right when date is absent */
	font-size: 1rem; /* explicitly match footer-date */
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.trustie-review-card__helpful-prompt {
	color: var(--tracksies-color-text-light, #888);
}

.trustie-review-card__helpful-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	background: none;
	border: 1px solid var(--tracksies-color-border, #ddd);
	border-radius: var(--tracksies-radius-small, 4px);
	color: var(--tracksies-color-text-light, #888);
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.has-hover .trustie-review-card__helpful-btn:hover,
.trustie-review-card__helpful-btn:hover {
	background: var(--tracksies-color-background, #f5f5f5);
	border-color: var(--tracksies-color-primary, #3E7CB1);
	color: var(--tracksies-color-text, #333);
}

.trustie-review-card__helpful-count {
	font-size: 0.875em;
	color: var(--tracksies-color-text-light, #aaa);
}

/* Date is now rendered in the footer, not the top-row — rule retained for cache safety */
.trustie-review-card__demographics-date {
	display: none;
}

/* Custom fields — visually closer to the author block, not the content */
.trustie-review-card__body .trustie-review-card__custom-fields {
	margin-top: 0;
	margin-bottom: 0;
}

/* Field labels — slightly muted */
.trustie-review-card .trustie-review-card__field-label {
	color: var(--tracksies-color-text-light, #888);
	font-size: 0.875em;
}

/* Field values — normal weight */
.trustie-review-card .trustie-review-card__field-value {
	font-size: 0.875em;
}

/* Demographics toggle — <details> wrapping demographic fields below author block */
.trustie-review-card__demographics {
	margin-top: 0.5rem;
}

.trustie-review-card__demographics-summary {
	display: flex !important; /* Override browser default display: list-item on <summary> */
	justify-content: flex-end;
	align-items: center;
	width: 100%; /* Ensure full-width so justify-content works */
	padding: 0.5rem 0;
	margin: 0;
	border-radius: var(--tracksies-radius-small, 4px);
	cursor: pointer;
	color: var(--tracksies-color-text-light, #888);
	list-style: none; /* Hide default disclosure triangle */
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.has-hover .trustie-review-card__demographics-summary:hover,
.trustie-review-card__demographics-summary:hover {
	background: var(--tracksies-color-background, #f5f5f5);
	color: var(--tracksies-color-text, #333);
}

/* Hide the default marker in WebKit/Blink */
.trustie-review-card__demographics-summary::-webkit-details-marker {
	display: none;
}

.trustie-review-card__demographics-chevron {
	font-size: 1.1rem;
	transition: transform 0.2s ease;
	color: var(--tracksies-color-text-light, #888);
}

.trustie-review-card__demographics[open] .trustie-review-card__demographics-chevron {
	transform: rotate(180deg);
}

.trustie-review-card__demographics-body {
	padding: 4px 0 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.875em;
}

/* ==========================================================================
   Split card layout — 3-column horizontal
   ========================================================================== */

.trustie-review-card--split {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-areas:
		"meta    body"
		"product product";
	gap: 1.5rem;
	align-items: start;
}

/* When photos are present, add a third column for the photo thumbnails. */
.trustie-review-card--split.trustie-review-card--has-photos {
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-areas:
		"meta    body    photos"
		"product product product";
}

/* Column 1 */
.trustie-review-card__split-meta {
	grid-area: meta;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Column 2 */
.trustie-review-card__split-body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.trustie-review-card__split-body .trustie-review-card__header {
	margin-bottom: 0;
}

.trustie-review-card__split-body .trustie-review-card__content {
	margin-bottom: 0;
}

/* Column 3 — photo thumbs */
.trustie-review-card__split-photos {
	grid-area: photos;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.4rem;
	align-content: start;
}

.trustie-review-card__split-photos .trustie-review-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

/* Product row spans full width below all columns */
.trustie-review-card--split .trustie-review-card__product--full-span {
	grid-area: product;
}

/* Author block — stacked: name, verified, date */
.trustie-review-card__author-block {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.trustie-review-card__author-block .trustie-review-card__author {
	font-weight: 700;
	color: var(--tracksies-color-text, #333);
	font-size: var(--tracksies-font-size-base, 0.9375rem);
}

/* Verified badge inside the column-direction author block shrinks to its content width */
.trustie-review-card__author-block .trustie-review-card__verified {
	align-self: flex-start;
}

/* High-specificity rule: verified badge in split col 1 never stretches */
.trustie-review-card--split .trustie-review-card__split-meta .trustie-review-card__verified {
	display: inline-flex;
	width: auto;
	flex: 0 0 auto;
	max-width: max-content;
	align-self: flex-start;
}

.trustie-review-card__author-block .trustie-review-card__date {
	font-size: var(--tracksies-font-size-small, 0.8rem);
	color: var(--tracksies-color-text-light, #888);
}

/* Demographic fields in col 1 — tighter, smaller */
.trustie-review-card__demographic-fields {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.85em;
}

.trustie-review-card__demographic-fields .trustie-review-card__custom-field {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
}

.trustie-review-card__demographic-fields .trustie-review-card__field-label {
	color: var(--tracksies-color-text-light, #888);
	font-weight: 500;
}

.trustie-review-card__demographic-fields .trustie-review-card__field-value {
	color: var(--tracksies-color-text, #333);
}

/* Non-demographic custom fields in col 2 inherit existing grid styles */
.trustie-review-card__split-body .trustie-review-card__custom-fields {
	margin-top: 0.25rem;
	margin-bottom: 0;
}

/* Top row in split col 2: stars left, date right */
.trustie-review-card__split-top-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

/* Date — top-right of col 2, same row as stars.
 * Use em (body-relative) not rem (root-relative) so the date scales with the
 * card's inherited font-size. Themes that shrink html font-size (e.g. 62.5%
 * base tricks) cause 1rem to render tiny; em is immune to that. */
.trustie-review-card--split .trustie-review-card__split-date {
	font-size: 0.875em;
	color: var(--tracksies-color-text-light, #757575);
	white-space: nowrap;
}

/* Helpful — bottom of col 2, right-aligned with a subtle divider above */
.trustie-review-card__split-helpful {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tracksies-color-border, #eee);
	display: flex;
	justify-content: flex-end;
	color: var(--tracksies-color-text-light, #888);
	font-size: 1rem;
}

/* Collapse to a single column below 700px */
@media (max-width: 700px) {
	.trustie-review-card--split,
	.trustie-review-card--split.trustie-review-card--has-photos {
		grid-template-columns: 1fr;
		grid-template-areas:
			"body"
			"meta"
			"photos"
			"product";
	}

	.trustie-review-card__split-photos {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Trustie: form-control font inheritance */
/* button, input, select and textarea get a UA font-family that does NOT
   inherit from the page. Any control that does not name a font renders in
   the browser default. Scope this to Trustie UI only. */
.trustie-widget button,
.trustie-widget input,
.trustie-widget select,
.trustie-widget textarea,
.trustie-reviews-page button,
.trustie-reviews-page input,
.trustie-reviews-page select,
.trustie-reviews-page textarea {
	font-family: var(--tracksies-font-body, inherit);
}

/* ---------------------------------------------------------------------
   Label specificity guard.
   A Trustie form placed on a WooCommerce page inherits rules such as
   `.woocommerce form label { font-size: 12px }` -- a class plus two
   elements, which outranks `.trustie-form-field label`. Re-assert our own
   sizing with a higher-specificity selector rather than !important, so a
   deliberate theme override can still win.
   --------------------------------------------------------------------- */
.trustie-review-form .trustie-form-field label,
.tracksies-oxygen-element .trustie-form-field label,
.trustie-testimonial-form-wrap .trustie-form-row label {
	font-size: var(--trustie-form-font-size, var(--tracksies-font-size-base, 14px));
	font-family: var(--tracksies-font-body, inherit);
	margin-top: 0;
}