/**
 * EcoBen Reviews Importer — front-end widget (rating row + reviews modal).
 *
 * Self-contained: color tokens are defined locally on the widget roots
 * (WoodMart does not provide them). Fonts inherit from the theme.
 * Markup/look ported from the EcoBen product-layout plugin
 * (includes/reviews.php + product CSS), consolidated into one file.
 */

.ecoben-ratings,
.ecoben-reviews-overlay,
.ecoben-reviews-modal {
	--ebr-gold: #C19A4B;
	--ebr-green: #2F5239;
	--ebr-ink: #1A1A1A;
	--ebr-ink-soft: #45433E;
	--ebr-ink-faint: #7A7770;
	--ebr-line: #E8E5DE;
	--ebr-cream: #FAF8F4;
	--ebr-cream-warm: #F2EEE5;
	--ebr-paper: #FFFFFF;
}

/* ---------- Rating row (product summary) ---------- */
.ecoben-ratings {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-top: 1px solid var(--ebr-line);
	border-bottom: 1px solid var(--ebr-line);
	margin: 0 0 22px;
}
.ecoben-ratings .ecoben-stars { color: var(--ebr-gold); font-size: 17px; letter-spacing: 1px; cursor: pointer; }
.ecoben-ratings .ecoben-rating-num { font-weight: 600; font-size: 15px; color: var(--ebr-ink); cursor: pointer; }
.ecoben-ratings .ecoben-review-link {
	color: var(--ebr-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 14px;
	cursor: pointer;
}
.ecoben-ratings .ecoben-review-link:hover { color: var(--ebr-green); }
.ecoben-ratings .ecoben-verified {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--ebr-green);
	font-weight: 500;
}

/* ---------- Body scroll lock while modal open ---------- */
body.ecoben-reviews-locked { overflow: hidden; }

/* ---------- Overlay + modal ---------- */
.ecoben-reviews-overlay {
	position: fixed; inset: 0;
	background: rgba(20, 26, 20, .55);
	opacity: 0; visibility: hidden; transition: opacity .3s;
	z-index: 1000000;
}
.ecoben-reviews-overlay.show { opacity: 1; visibility: visible; }

.ecoben-reviews-modal {
	position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%);
	opacity: 0; visibility: hidden;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), opacity .3s;
	z-index: 1000001; width: 680px; max-width: 94vw; max-height: 88vh;
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--ebr-cream); border-radius: 22px;
	box-shadow: 0 40px 90px rgba(15, 25, 15, .35);
	text-align: left;
}
.ecoben-reviews-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

/* Close button. WoodMart's generic button rules override a plain class
   selector (position/size/background), which dropped the × into the flow
   at the top-left and made it nearly invisible. Higher specificity +
   !important on everything layout-related keeps it pinned top-right;
   solid brand-green disc + white SVG × for visibility (1.4.1). */
.ecoben-reviews-modal .ecoben-reviews-close,
.ecoben-reviews-modal button.ecoben-reviews-close {
	position: absolute !important;
	top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important;
	width: 40px !important; height: 40px !important;
	min-width: 0 !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important;
	float: none !important; transform: none !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	background: var(--ebr-green) !important; border: 0 !important;
	color: #fff !important; font-size: 0 !important; line-height: 0 !important;
	box-shadow: 0 4px 14px rgba(15, 25, 15, .25) !important;
	cursor: pointer !important; opacity: 1 !important; visibility: visible !important;
	transition: background .2s, transform .2s !important; z-index: 5 !important;
	-webkit-appearance: none !important; appearance: none !important;
}
.ecoben-reviews-modal .ecoben-reviews-close svg {
	width: 18px !important; height: 18px !important;
	display: block !important; flex: 0 0 auto !important;
	stroke: currentColor !important; fill: none !important;
	pointer-events: none;
}
.ecoben-reviews-modal .ecoben-reviews-close:hover,
.ecoben-reviews-modal .ecoben-reviews-close:focus-visible {
	background: #1E3826 !important; color: #fff !important;
	transform: scale(1.06) !important;
}
.ecoben-reviews-modal .ecoben-reviews-close:focus-visible {
	outline: 2px solid var(--ebr-gold) !important; outline-offset: 2px !important;
}

/* ---------- Modal head: score + histogram ---------- */
.ecoben-reviews-head {
	display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
	padding: 28px 64px 22px 28px;
	border-bottom: 1px solid var(--ebr-line); background: var(--ebr-paper);
}
.ecoben-reviews-score { text-align: center; }
.ecoben-rv-num { font-size: 64px; line-height: 1; font-weight: 600; color: var(--ebr-ink); letter-spacing: -0.25px; }
.ecoben-rv-stars { color: var(--ebr-gold); font-size: 20px; letter-spacing: 2px; margin: 6px 0; }
.ecoben-rv-sub { font-size: 13px; color: var(--ebr-ink-faint); }
.ecoben-reviews-bars { display: flex; flex-direction: column; gap: 8px; }
.ecoben-rv-bar {
	display: grid; grid-template-columns: 34px 1fr 30px; gap: 10px; align-items: center;
	font-size: 13px; color: var(--ebr-ink-soft);
}
.ecoben-rv-bar .track { height: 8px; background: var(--ebr-cream-warm); border-radius: 999px; overflow: hidden; }
.ecoben-rv-bar .fill { display: block; height: 100%; background: var(--ebr-gold); border-radius: 999px; }
.ecoben-rv-bar .cnt { text-align: right; color: var(--ebr-ink-faint); }

/* ---------- Modal list: review cards ---------- */
.ecoben-reviews-list { overflow-y: auto; padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 16px; }
.ecoben-review { background: var(--ebr-paper); border: 1px solid var(--ebr-line); border-radius: 16px; padding: 18px; }
.ecoben-review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ecoben-review-avatar {
	width: 40px; height: 40px; border-radius: 50%; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 15px; flex-shrink: 0;
}
.ecoben-review-who { display: flex; flex-direction: column; }
.ecoben-review-name { font-weight: 600; font-size: 14px; color: var(--ebr-ink); }
.ecoben-review-date { font-size: 12px; color: var(--ebr-ink-faint); }
.ecoben-review-verified {
	margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
	font-size: 11.5px; color: var(--ebr-green); background: rgba(47, 82, 57, .1);
	padding: 3px 9px; border-radius: 999px; font-weight: 600;
}
.ecoben-review-stars { color: var(--ebr-gold); letter-spacing: 1px; margin-bottom: 8px; font-size: 14px; }
.ecoben-review-text { font-size: 14px; line-height: 1.55; color: var(--ebr-ink-soft); }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.ecoben-reviews-head {
		grid-template-columns: auto 1fr; gap: 14px; text-align: left; align-items: center;
		padding: 20px 50px 14px 18px;
	}
	.ecoben-reviews-score { text-align: center; }
	.ecoben-rv-num { font-size: 38px; }
	.ecoben-rv-bar { grid-template-columns: 26px 1fr 22px; gap: 8px; font-size: 12px; }
	.ecoben-rv-bar .track { height: 6px; }
	.ecoben-reviews-list { padding: 16px 18px 22px; }
	.ecoben-reviews-modal .ecoben-reviews-close,
	.ecoben-reviews-modal button.ecoben-reviews-close {
		top: 10px !important; right: 10px !important; width: 36px !important; height: 36px !important;
	}
	.ecoben-reviews-modal .ecoben-reviews-close svg { width: 16px !important; height: 16px !important; }
	.ecoben-review-avatar { width: 34px; height: 34px; font-size: 13px; }
	.ecoben-review-text { font-size: 13.5px; }
	/* Verified pill stays one-line, shrink-to-content; name/date ellipsize when tight. */
	.ecoben-review-head { flex-wrap: nowrap; }
	.ecoben-review-who { min-width: 0; }
	.ecoben-review-name,
	.ecoben-review-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
	.ecoben-review-verified { margin-left: auto; flex: 0 0 auto; max-width: 56%; white-space: nowrap; font-size: 11px; padding: 2px 8px; }
}