/* WEDO Reviews — score + histogram + paginated review list. Fully relative. */

.elementor-widget-wedo-reviews {
	width: 100%;
	max-width: 100%;
}

.wedo-rev {
	width: 100%;
	/* #reviews anchor target: clear the sticky site header on jump. */
	scroll-margin-top: 6.25rem;
}

/* Minimum air below the heading. The RENDERED gap is normally larger — the
   summary column distributes its leftover height here (see .wedo-rev__summary-col
   above), which is what lands the 1-star row on the pagination. This value is
   also dead in practice: the heading_gap control writes the same property from
   the widget wrapper and outranks it; kept in sync so the two don't disagree.
   (Was 64px, from Figma's 121.65px heading-top → histogram-top with a one-line
   48px/1.2 heading — that spacing is now what the leftover reproduces.) */
.wedo-rev__heading {
	margin: 0 0 32px;
}

.wedo-rev__row {
	display: flex;
	flex-direction: var(--wedo-rev-dir, row);
	align-items: flex-start;
	gap: var(--wedo-rev-gap, 54px);
}

/* Left column: heading + (score|histogram). Figma puts the heading INSIDE
   this column — the review list on the right top-aligns with the heading
   itself (heading y=3489 vs first review date y=3497 in 691:345), not with
   the block below it. Width comes from --wedo-rev-summary-basis, which the
   "direction" control sets alongside --wedo-rev-dir: 40%-ish (via
   --wedo-rev-summary-w) in Side-by-Side mode, but a hard 100% in either
   stacked mode — a stacked layout has no reason to also starve the
   histogram of width, which is what caused the collapsed bars this control
   is here to prevent regressing again. */
/* The summary column stretches to the row's height and pins its two children
   to the ends: heading at the top, score+histogram at the BOTTOM. That makes
   the histogram's last (1-star) row sit level with the pagination in the
   review column — both are the bottom-most thing in their column — for ANY
   product, instead of at a fixed offset. It has to be automatic: the review
   column's height is set by how long the two visible reviews are, measured
   between 260.7px and 280.2px across products, so the misalignment it has to
   absorb ranged from 22.5px down to 3.1px.

   The gap below the heading therefore becomes "whatever is left over", with
   the heading_gap control (32px desktop) acting as the guaranteed MINIMUM
   air for the case where the reviews are short enough that the summary column
   is the taller one and there is no slack to distribute.

   align-self rather than align-items on the row: it leaves the review column
   and the divider (which sets its own align-self) untouched. Both
   declarations are inert in the stacked mobile layout — the column's cross
   size there is an explicit width (so stretch cannot apply) and its main-axis
   height is content-driven (so there is no free space to space-between). */
.wedo-rev__summary-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
	flex: 0 0 auto;
	width: var(--wedo-rev-summary-basis, 40%);
	max-width: 100%;
	min-width: 0;
}

.wedo-rev__summary {
	display: flex;
	align-items: var(--wedo-rev-summary-align, flex-start);
	gap: var(--wedo-rev-summary-gap, 24px);
	width: 100%;
	max-width: 100%;
}

.wedo-rev__score {
	display: flex;
	flex-direction: column;
	align-items: var(--wedo-rev-score-align, center);
	text-align: var(--wedo-rev-score-text-align, center);
	flex: 0 0 auto;
	gap: var(--wedo-rev-score-label-gap, 18px);
}

.wedo-rev__score-num {
	display: block;
	line-height: 1;
}

.wedo-rev__score-label {
	display: block;
	white-space: nowrap;
}

.wedo-rev__histogram {
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.wedo-rev__histrow {
	display: flex;
	align-items: center;
	gap: var(--wedo-rev-histrow-gap, 10px);
	width: 100%;
}

.wedo-rev__hist-stars {
	flex: 0 0 auto;
	display: flex;
	letter-spacing: 1px;
	font-size: var(--wedo-rev-hist-star, 15px);
	white-space: nowrap;
}

.wedo-rev__track {
	flex: 1 1 auto;
	min-width: 24px;
	height: 5px;
	border-radius: 5px;
	background: #ecf6ed;
	overflow: hidden;
	/* Figma: stars→track gap is 18px while track→count is 13px; the flex
	   gap (histrow_inner_gap control, default 13) covers both sides, this
	   margin adds the missing 5px on the stars side only. */
	margin-left: 5px;
}

.wedo-rev__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	/* Figma has NO visible fill (filled + empty rows are identical pale
	   lines — pixel-verified on 691:1292/691:1293); the Bar Fill Color
	   control can reintroduce a contrasting fill. */
	background: #ecf6ed;
}

.wedo-rev__count {
	flex: 0 0 auto;
	min-width: 1.5em;
	text-align: right;
	font-size: 15px;
	color: rgba(65, 83, 80, 0.6);
}

/* Divider between columns: a single 1px flex-basis auto-stretches to fill
   the cross axis in BOTH row and column parent directions. Hidden by
   default when stacked (matches the reference design, which shows no
   divider once summary/list stack) — "direction" sets
   --wedo-rev-divider-display to none in that case. The
   [data-divider-forced] wrapper attribute (set server-side from the
   "Force Divider in Stacked Layout" switch) overrides it back on. */
.wedo-rev__divider {
	display: var(--wedo-rev-divider-display, block);
	flex: 0 0 1px;
	align-self: stretch;
	background: rgba(65, 83, 80, 0.18);
}

.wedo-rev[data-divider-forced="1"] .wedo-rev__divider {
	display: block !important;
}

/* Review list column */
.wedo-rev__list-col {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.wedo-rev__list {
	display: flex;
	flex-direction: column;
	/* Figma: review text → separator = 28px, separator → next date = 27px. */
	gap: 27px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wedo-rev__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Figma Line 18 (691:1298): 2px solid Panache between review items. */
.wedo-rev__item-sep {
	height: 2px;
	background: #ecf6ed;
	list-style: none;
}

/* Review header row (2026-08-31 restyle): name top-left with the date
   stacked underneath it, rating pinned to the top-right corner. Before this
   the date and name shared one centered row and the stars sat on their own
   line below, which read as three stacked bands instead of one header.
   align-items:flex-start keeps the stars on the name's line rather than
   centering them against the two-line meta block. The gap here is a MINIMUM
   (space-between does the placement) and is what the list_stars_text_gap
   control writes — it only bites once a long name reaches the stars. */
.wedo-rev__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

/* gap:0 — the date sits directly under the name, tight, per the reference.
   The two line-heights below are what actually set the spacing (the inherited
   1.5 left the date floating ~29px below the name's top); safe to put here
   because neither typography control declares a line-height default, so
   Elementor emits none. */
.wedo-rev__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
}

.wedo-rev__date,
.wedo-rev__author {
	display: block;
}

/* The name had no font rules at all, so it fell through to the theme's
   system-font stack at 16px/400 while the date and body text beside it were
   Manrope — visibly off-brand. Sized just above the date (13px) and bolded,
   per the reference. Colour stays on the author_color control. */
.wedo-rev__author {
	font-family: Manrope, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.wedo-rev__date {
	line-height: 1.3;
}

.wedo-rev__stars {
	display: flex;
	flex: 0 0 auto;
	letter-spacing: 1px;
	font-size: var(--wedo-rev-list-star, 15px);
	/* Optical: the star glyphs sit high in their em box, so a raw flex-start
	   leaves them floating above the name's cap height. */
	margin-top: 2px;
}

.wedo-rev__text {
	margin: 0;
}

/* Clamping is opt-in: the wrapper only carries --wedo-rev-text-lines as an
   inline style when the control is set above 0 (see widget render()) — a
   CSS-variable fallback can't express "0 = unlimited" since 0 is itself a
   valid (and very wrong: invisible-text) line-clamp value. */
.wedo-rev[style*="--wedo-rev-text-lines"] .wedo-rev__text {
	display: -webkit-box;
	-webkit-line-clamp: var(--wedo-rev-text-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Star glyphs: plain unicode, colored via currentColor-independent classes. */
.wedo-rev__star {
	color: rgba(65, 83, 80, 0.2);
	line-height: 1;
}

.wedo-rev__star.is-filled {
	color: #176a55;
}

/* Pagination */
.wedo-rev__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
	flex-wrap: wrap;
}

/* Real <button>s — hello-elementor's reset.css sets button{width:auto} and
   padding:.5rem 1rem at the SAME specificity as a class selector, so the
   winner depends on stylesheet order, which varies per page (confirmed via
   getMatchedCSSRules on a page where reset.css happened to load after ours,
   collapsing the arrow's SVG to 0 width). !important makes it deterministic —
   same fix pattern as the qty selector / carousel arrows elsewhere. */
.wedo-rev__page,
.wedo-rev__page-arrow,
.wedo-rev__page:hover,
.wedo-rev__page-arrow:hover,
.wedo-rev__page:focus,
.wedo-rev__page-arrow:focus {
	border: 0 !important;
	padding: 0 !important;
	text-decoration: none;
	background: none;
}

/* Figma 691:1315 — digit centres sit on a 20px pitch, so with the 10px
   pagination gap the cell floor is 10px, not 26px. A two-digit page grows to
   its own width, which is exactly what the design does ("15" steps 23px). */
.wedo-rev__page {
	position: relative;
	min-width: 10px;
	height: 26px !important;
	padding: 0 2px !important;
	color: rgba(65, 83, 80, 0.6);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* The 10px cell is a visual measurement, not a hit target — widen the
   clickable area past the box without disturbing the 20px pitch. */
.wedo-rev__page::after {
	content: "";
	position: absolute;
	inset: -3px -7px;
}

/* Figma marks the current page by COLOUR ONLY — "1" is the same 400 weight as
   the inactive numbers. A font-weight here also silently beat the widget's own
   page_typography control (which already defaults to Manrope 400). */
.wedo-rev__page.is-active {
	color: #415350;
	cursor: default;
}

/* Design shows the ellipsis at the same 60% as the inactive numbers. */
.wedo-rev__page--ellipsis {
	cursor: default;
}

.wedo-rev__page--ellipsis::after {
	content: none;
}

.wedo-rev__page-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wedo-rev-arrow-size, 23px) !important;
	height: var(--wedo-rev-arrow-size, 23px) !important;
	border-radius: 50%;
	background: #ecf6ed;
	color: #415350;
	cursor: pointer;
	flex: 0 0 auto;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

/* Figma 691:1315 renders the chevron 8x13px inside the 23px circle. The path
   only occupies the middle 25%x50% of its 24x24 viewBox, so the SVG box has to
   be ~the full circle for the glyph itself to land at 13px — 45% here drew it
   at 4x7, roughly half the design. */
.wedo-rev__page-arrow svg {
	width: 96%;
	height: 96%;
}

.wedo-rev__page-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Loading state while an AJAX page fetch is in flight */
.wedo-rev__list-wrap.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.wedo-rev--empty .wedo-rev__empty-msg {
	margin: 0;
	color: rgba(65, 83, 80, 0.6);
}

/* Mobile: score+histogram gap comes from the (responsive) Score/Histogram
   Gap control now, not a hardcoded value here — this only handles the
   label wrapping the fixed control can't. */
@media ( max-width: 480px ) {
	.wedo-rev__score-label {
		white-space: normal;
	}
}

/* Figma mobile (698:1502): histogram row pitch 18px (star 11 + ~7 gap).
   The row GAP lives on the histrow_gap control's mobile default now — a plain
   gap:7 here was dead against the control's wrapper-specificity CSS. */
@media (max-width: 480px) {
	.wedo-rev__count {
		font-size: 11px; /* Figma mobile counts ~11px — keeps row pitch at ~18px */
		line-height: 1.2; /* inherited 1.5 made the count the tallest row item */
	}
}

/* (The mobile-only `align-items: center !important` that used to live here is
   gone: it was overriding the summary_align control's old 'flex-start'
   default. That control now defaults to 'center' at every breakpoint, so the
   override was redundant — and being !important it would have blocked the
   control from ever setting 'Top' on mobile.) */

/* Mobile name size: the date control's mobile default is 10px, so the name
   steps down with it and keeps the same one-notch-larger relationship it has
   on desktop (14 over 13). */
@media (max-width: 480px) {
	.wedo-rev__author {
		font-size: 12px;
	}
}

/* ==========================================================================
   Review submission form — folded into the site's own accordion
   --------------------------------------------------------------------------
   The fold itself is .wedo-acc from the info-accordion widget (global CSS +
   [data-wedo-acc] JS, both pulled in via get_*_depends), so the header, chevron
   and 0.3s timing are literally the same component the FAQ and product
   accordions use. Only the contents are styled here, in the review list's
   vocabulary: 13px/60% meta labels, 13.5px/300 body, 18px #176A55 stars,
   underlines instead of boxes.
   ========================================================================== */

/* No rule of its own: the accordion item draws its own top border, and having
   both produced two parallel lines ~40px apart. */
.wedo-rev__form-col {
	margin-top: 48px;
}

/* info-accordion.css is variable-driven with bare structural defaults; the
   FAQ's actual LOOK comes from its Elementor controls, which don't reach this
   widget. These are the FAQ's own computed values, read off the live page, so
   the fold is visually the same component and not a near-miss.
   --wedo-acc-last-divider defaults to 0 (a list shouldn't end on a rule); as a
   lone item ours needs both edges to read as a closed row. */
.wedo-rev__form-acc {
	--wedo-acc-last-divider: 1px;
}

.wedo-rev__form-acc .wedo-acc__item {
	border-top: 1px solid #c1d9ba;
}

/* Flush rather than the FAQ's 30px inset: everything else in this section --
   heading, histogram, review list -- is flush to the column edge, so an inset
   row would visibly fail to line up with the block it belongs to. */
.wedo-rev__form-acc .wedo-acc__header {
	padding: 22px 0;
}

.wedo-rev__form-acc .wedo-acc__title {
	color: #415350;
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.wedo-rev__form-acc .wedo-acc__icon {
	color: #415350;
}

.wedo-rev__form-acc .wedo-acc__content {
	padding: 4px 0 32px;
}

/* Two columns inside the panel, reusing the SAME custom properties the
   direction control writes for .wedo-rev__row -- so the form tracks the block
   above it and stacks on mobile with no breakpoints of its own. */
.wedo-rev__form-row {
	display: flex;
	flex-direction: var(--wedo-rev-dir, row);
	align-items: flex-start;
	gap: var(--wedo-rev-gap, 54px);
}

/* Short fields left, the long one right: this balances the two column heights
   far better than heading-vs-everything did. */
.wedo-rev__form-intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 0 0 auto;
	width: var(--wedo-rev-summary-basis, 40%);
	max-width: 100%;
	min-width: 0;
}

.wedo-rev__form-fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

.wedo-rev__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	min-width: 0;
}

/* Lets the textarea absorb the column's spare height so both columns finish
   level instead of leaving a ragged gap under the shorter one. */
.wedo-rev__field--grow {
	flex: 1 1 auto;
}

.wedo-rev__field--grow .wedo-rev__input {
	flex: 1 1 auto;
}

/* Matches .wedo-rev__date -- the muted 13px meta line above each review. */
.wedo-rev__label {
	padding: 0;
	color: rgba(65, 83, 80, 0.6);
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

/* Underlines rather than boxes. Two classes to outrank hello-elementor's
   input[type="text"] (0,1,1), which otherwise repaints these as its own grey
   3px-radius fields. */
.wedo-rev .wedo-rev__input {
	box-sizing: border-box;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 2px solid #ecf6ed;
	border-radius: 0;
	color: #415350;
	font-family: "Manrope", sans-serif;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.45;
	padding: 6px 0;
	outline: none;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

.wedo-rev textarea.wedo-rev__input {
	min-height: 116px;
	resize: vertical;
}

.wedo-rev .wedo-rev__input:hover {
	border-bottom-color: rgba(23, 106, 85, 0.35);
}

.wedo-rev .wedo-rev__input:focus,
.wedo-rev .wedo-rev__input:focus-visible {
	border-bottom-color: #176a55;
}

/* Reads as a reassurance, not as another field label: icon + lighter tone +
   its own indent, so it can't be mistaken for the label of the box below it
   (which is exactly how it scanned when it was bare 12px grey text). */
.wedo-rev__hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	color: rgba(65, 83, 80, 0.55);
	font-family: "Manrope", sans-serif;
	font-size: 12px;
	font-style: italic;
	line-height: 1.4;
}

.wedo-rev__hint-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: #176a55;
	opacity: 0.75;
}

/* Signed-in reviewers get a name, not two missing inputs. */
.wedo-rev__signed-in-name {
	color: #415350;
	font-family: "Manrope", sans-serif;
	font-size: 13.5px;
	font-weight: 400;
	padding: 6px 0;
	border-bottom: 2px solid #ecf6ed;
}

/* --- Star picker: same 18px #176A55 glyphs the review items use ---------- */

.wedo-rev__rating-field {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Radios are 5..1 in the DOM and reversed visually, so "input:checked ~ label"
   reaches the checked star plus every lower one without needing :has(). */
.wedo-rev__stars-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
	padding-top: 2px;
}

.wedo-rev__star-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wedo-rev__star-label {
	color: rgba(23, 106, 85, 0.35);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: color 0.12s ease;
	-webkit-tap-highlight-color: transparent;
}

.wedo-rev__stars-input:hover .wedo-rev__star-label:hover,
.wedo-rev__stars-input:hover .wedo-rev__star-label:hover ~ .wedo-rev__star-label,
.wedo-rev__star-radio:checked ~ .wedo-rev__star-label {
	color: #176a55;
}

/* Hover preview must win over the checked state, or pointing at 2 stars while
   4 are selected still paints 4 and the control feels unresponsive. */
.wedo-rev__stars-input:hover .wedo-rev__star-label {
	color: rgba(23, 106, 85, 0.35);
}

.wedo-rev__star-radio:focus-visible + .wedo-rev__star-label {
	outline: 2px solid #176a55;
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Consent, submit, notice -------------------------------------------- */

.wedo-rev__consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba(65, 83, 80, 0.6);
	cursor: pointer;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.wedo-rev__consent-label input {
	flex: 0 0 auto;
	margin-top: 3px;
	accent-color: #176a55;
}

.wedo-rev__consent-label a {
	color: inherit;
	text-decoration: underline;
}

.wedo-rev__submit,
.wedo-rev__submit:hover,
.wedo-rev__submit:focus {
	border: 0;
	text-decoration: none;
}

.wedo-rev__submit {
	align-self: flex-start;
	min-height: 40px;
	padding: 0 32px;
	border-radius: 20px;
	background: #415350;
	color: #fff;
	cursor: pointer;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.wedo-rev__submit:hover {
	background: #176a55;
}

/* Every translation of this label is longer than the Bulgarian -- same reason
   the related-products button steps down outside BG. */
html:not([lang|="bg"]) .wedo-rev__submit {
	font-size: 12px;
	padding: 0 24px;
}

/* Flat like the rest of the block: a rule and the section's green, no panel. */
.wedo-rev__notice {
	margin: 0 0 28px;
	padding: 0 0 0 14px;
	border-left: 2px solid #176a55;
	color: #176a55;
	font-family: "Manrope", sans-serif;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
}

/* Honeypot: off-canvas rather than display:none, which some bots skip. */
.wedo-rev__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.wedo-rev__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}