/* Simple Woocommerce reviews for Elementor — structural styles only.
   All colors / sizes / typography are intentionally left to Elementor
   Style controls (output as inline CSS scoped to the widget).
   Keep this file about LAYOUT and MECHANICS, not theming. */

.swre { --swre-star-gap: 2px; }

/* ---------------------------------------------------------------------------
   Read-only star display (summary + each review) — overlay fill technique
   so any rating fraction renders precisely with any icon.
--------------------------------------------------------------------------- */
.swre-stars{
	position:relative;
	display:inline-flex;
	line-height:1;
	vertical-align:middle;
}
.swre-stars__empty,
.swre-stars__fill{
	display:inline-flex;
	gap:var(--swre-star-gap);
}
.swre-stars__fill{
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	white-space:nowrap;
	width:0;            /* set inline per rating */
}
.swre-stars i,
.swre-stars svg,
.swre-rate__star i,
.swre-rate__star svg{
	display:block;
	width:1em;
	height:1em;
	font-size:18px;    /* default; overridden by the Size control */
}
.swre-stars svg,
.swre-rate__star svg{ fill:currentColor; }

/* ---------------------------------------------------------------------------
   Summary header
--------------------------------------------------------------------------- */
.swre-summary{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	margin:0 0 22px;
}
.swre-summary__avg{ line-height:1; }
.swre-summary__count{ line-height:1; }

/* ---------------------------------------------------------------------------
   Reviews grid
--------------------------------------------------------------------------- */
.swre-reviews{
	display:grid;
	grid-template-columns:1fr;   /* overridden by Columns control */
	gap:16px;
	margin:0 0 28px;
	padding:0;
	list-style:none;
}
.swre-review{ margin:0; }
.swre-review__head{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	margin-bottom:8px;
}
.swre-review__meta{ display:flex; flex-direction:column; gap:2px; }
.swre-review__author{ line-height:1.2; }
.swre-review__date{ line-height:1.2; }
.swre-review__verified{
	display:inline-flex;
	align-items:center;
	gap:4px;
	line-height:1;
}
.swre-review__content > :last-child{ margin-bottom:0; }

/* ---------------------------------------------------------------------------
   Interactive star rating in the form (radio-backed, accessible)
   Reverse DOM order + row-reverse lets pure-CSS hover/checked fill work.
--------------------------------------------------------------------------- */
.swre-form-rating{ margin:0 0 16px; }
.swre-rate{
	display:inline-flex;
	flex-direction:row-reverse;
	gap:var(--swre-star-gap);
}
.swre-rate__input{
	position:absolute !important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);
	white-space:nowrap;border:0;
}
.swre-rate__star{
	cursor:pointer;
	line-height:1;
	display:inline-flex;
}
.swre-rate__star i,
.swre-rate__star svg{ font-size:24px; }

/* ---------------------------------------------------------------------------
   Form fields
--------------------------------------------------------------------------- */
.swre-form{ margin:0; }
.swre-field{
	margin:0 0 14px;
	display:flex;
	flex-direction:column;
	gap:6px;
}
.swre-field input,
.swre-field textarea{
	width:100%;
	box-sizing:border-box;
	font:inherit;
}
.swre-field textarea{ resize:vertical; min-height:120px; }
.swre-submit{ cursor:pointer; border:0; }

/* Messages (no reviews / verified-owner gate) */
.swre-message{ margin:0 0 20px; }

/* Accessibility helper */
.swre .screen-reader-text{
	position:absolute !important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);
	white-space:nowrap;border:0;
}