/**
 * Greens Quick-Fill Button with Hover Popover
 *
 * Minimal version:
 *  - Bag button (fills quantity with standard-amount)
 *  - Subtle selected state: brand gradient + dark green ring when qty matches
 *  - Small (i) info trigger in top-right (universal info glyph, quiet when static)
 *  - Hover/focus (desktop) or tap (mobile) reveals the popover
 *  - Loop variant: compact, flips popover on right-edge cards
 *
 * Brand compliance (reference_brand_guide.md):
 *  - Button: 6px radius, secondary default / primary CTA gradient when selected
 *  - Panels/popovers: 12px radius
 *  - Dark green (#2c5e54) only for text, borders, small accents
 *  - Card shadow: 0 2px 18px rgba(0, 0, 0, 0.08)
 */

/* ---------- Zone ---------- */
.eg-greens-zone {
	margin: 0 0 16px;
}

.eg-greens-zone-note {
	font-size: 0.85em;
	color: #2c5e54;
	margin: 0 0 6px;
	font-weight: 500;
}

.eg-greens-zone-note sup {
	color: #8aa79d;
}

.eg-greens-zone-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ---------- Wrap (positioning context for popover + info trigger) ---------- */
.eg-greens-btn-wrap {
	position: relative;
	display: inline-block;
}

/* ---------- Main bag button: secondary style by default ---------- */
.eg-greens-select-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #f5f9f6;
	border: 1.5px solid #a5ccbc;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
	font-family: inherit;
	color: #2c5e54;
	min-width: 200px;
	position: relative;
}

.eg-greens-select-btn:hover,
.eg-greens-select-btn:focus-visible {
	background: #eaf3ed;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	outline: none;
}

.eg-greens-select-btn:active {
	transform: scale(0.98);
}

/* Selected state: quantity input matches standard amount. Primary CTA style. */
.eg-greens-btn-wrap.eg-greens-selected .eg-greens-select-btn {
	background: linear-gradient(135deg, #bfe2dc 0%, #a5ccbc 100%);
	border-color: #2c5e54;
	box-shadow: 0 2px 10px rgba(44, 94, 84, 0.18);
}

.eg-greens-icon {
	display: block;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}

.eg-greens-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
	text-align: left;
}

.eg-greens-label {
	font-weight: 600;
	font-size: 0.95em;
	color: #2c5e54;
}

.eg-greens-volume {
	font-size: 0.85em;
	color: #2c5e54;
	opacity: 0.75;
}

/* ---------- Info trigger (i badge) ---------- */
.eg-greens-info-trigger {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #a5ccbc;
	color: #2c5e54;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	z-index: 2;
}

.eg-greens-info-trigger:hover,
.eg-greens-info-trigger:focus-visible {
	background: #bfe2dc;
	border-color: #2c5e54;
	transform: scale(1.1);
	outline: none;
}

.eg-greens-info-trigger[aria-expanded="true"] {
	background: #bfe2dc;
	border-color: #2c5e54;
}

/* ---------- Popover (larger panel: 12px radius) ---------- */
/* Bumped selector specificity + !important on colors to beat any theme/plugin
   CSS targeting [role="tooltip"] with dark backgrounds (e.g. Bootstrap-style
   tooltips, Genesis framework, WooCommerce). Belt and suspenders. */
.eg-greens-btn-wrap .eg-greens-popover {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	width: min(340px, calc(100vw - 32px));
	background: #fff !important;
	border: 1.5px solid #a5ccbc;
	border-radius: 12px;
	padding: 16px 18px;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
	z-index: 10;
	font-size: 0.9em;
	line-height: 1.5;
	color: #222 !important;
	font-family: inherit;
	text-align: left;
	opacity: 1 !important;
}

.eg-greens-popover[hidden] {
	display: none;
}

/* Show on wrap hover (desktop) or when opened via tap on (i) trigger (mobile) */
.eg-greens-btn-wrap:hover .eg-greens-popover,
.eg-greens-btn-wrap:focus-within .eg-greens-popover,
.eg-greens-btn-wrap.eg-greens-open .eg-greens-popover {
	display: block;
}

.eg-greens-popover .eg-greens-popover-arrow {
	position: absolute;
	top: -7px;
	left: 24px;
	width: 12px;
	height: 12px;
	background: #fff !important;
	border-top: 1.5px solid #a5ccbc;
	border-left: 1.5px solid #a5ccbc;
	transform: rotate(45deg);
}

.eg-greens-popover .eg-greens-popover-title {
	margin: 0 0 10px;
	font-size: 1em;
	color: #2c5e54 !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	background: transparent !important;
}

.eg-greens-popover p {
	margin: 0 0 9px;
	color: #222 !important;
	background: transparent !important;
}

.eg-greens-popover p strong {
	color: #2c5e54 !important;
	font-weight: 600;
	background: transparent !important;
}

.eg-greens-popover p:last-child {
	margin-bottom: 0;
}

/* ---------- Suppress the "Suggested: X oz" text hint on greens products ---------- */
/* The bag button already communicates the same info, so the text would be redundant. */
body:has(.eg-greens-zone) .eg-suggested-amount {
	display: none !important;
}

/* ---------- Loop variant: compact button for shop/category cards ---------- */
.eg-greens-zone--loop {
	margin: 6px 0 0;
}

.eg-greens-zone--loop .eg-greens-zone-note {
	display: none; /* Too tight in a loop card; the popover covers it */
}

.eg-greens-btn-wrap--loop {
	width: 100%;
}

.eg-greens-btn-wrap--loop .eg-greens-select-btn {
	gap: 8px;
	padding: 6px 10px;
	min-width: 0;
	width: 100%;
	border-radius: 6px;
	font-size: 0.8em;
}

.eg-greens-btn-wrap--loop .eg-greens-icon {
	width: 32px;
	height: 32px;
}

.eg-greens-btn-wrap--loop .eg-greens-label {
	font-size: 0.9em;
}

.eg-greens-btn-wrap--loop .eg-greens-volume {
	font-size: 0.78em;
}

.eg-greens-btn-wrap--loop .eg-greens-info-trigger {
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	font-size: 11px;
}

/* Popover inside a loop card: tighter width and smart positioning */
.eg-greens-btn-wrap--loop .eg-greens-popover {
	width: min(280px, calc(100vw - 32px));
	font-size: 0.85em;
	padding: 12px 14px;
	left: 0;
	right: auto;
}

/* Flip popover leftward when card is near the right edge of the viewport */
.eg-greens-btn-wrap--loop.eg-greens-popover-flip .eg-greens-popover {
	left: auto;
	right: 0;
}

.eg-greens-btn-wrap--loop.eg-greens-popover-flip .eg-greens-popover-arrow {
	left: auto;
	right: 24px;
}

/* Very narrow cards: stack volume under label */
@media (max-width: 360px) {
	.eg-greens-btn-wrap--loop .eg-greens-info {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
	.eg-greens-btn-wrap:not(.eg-greens-btn-wrap--loop) .eg-greens-select-btn {
		min-width: 100%;
	}
	.eg-greens-btn-wrap:not(.eg-greens-btn-wrap--loop) {
		display: block;
	}
	.eg-greens-popover {
		left: auto;
		right: 0;
		width: calc(100vw - 40px);
		max-width: 360px;
	}
	.eg-greens-popover-arrow {
		left: auto;
		right: 20px;
	}
}