/* ==========================================================================
   Directory help — loaded on the Green Label Directory only
   1. "What's the difference?" SGLS vs SGLS+ explainer (sidebar)
   2. Scheme badge tooltip affordance (cards)
   3. Certificate verification states (no-result card)
   ========================================================================== */

/* ── 1. Scheme explainer ───────────────────────────────────────────────── */
.sgls-filter-label--with-help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}
.sgls-help-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 2px 0;
	margin: 0;
	cursor: pointer;
	color: #1a6b44;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}
.sgls-help-btn:hover { color: #15573a; text-decoration-style: solid; }
.sgls-help-btn:focus-visible { outline: 2px solid #1D9E75; outline-offset: 2px; border-radius: 3px; }

.sgls-help-panel {
	background: #F3F8F4;
	border: 1px solid #DCEBE0;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 10px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #2F4F3A;
}
.sgls-help-panel[hidden] { display: none; }
.sgls-help-panel p { margin: 0 0 8px; }
.sgls-help-panel p:last-child { margin-bottom: 0; }
.sgls-help-panel__tag {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	padding: 0 6px;
	border-radius: 10px;
	background: #e8f5e9;
	color: #2e7d32;
	margin-right: 2px;
}
.sgls-help-panel__tag--enhanced { background: #e3f2fd; color: #0d47a1; }
.sgls-help-panel__more { color: #4b5563; }
.sgls-help-panel a { color: #1a6b44; font-weight: 600; }

/* ── 2. Card scheme badge: sits above the stretched card link so its
         tooltip shows on hover instead of being covered by the link. ──── */
.sgls-product-card__scheme[title] {
	position: relative;
	z-index: 2;
	cursor: help;
}

/* ── 3. Certificate verification states ────────────────────────────────── */
.sgls-no-results--verify {
	border-style: solid;
	text-align: left;
	max-width: 640px;
	margin: 0 auto;
}
.sgls-no-results--verify .sgls-no-results__icon,
.sgls-no-results--verify .sgls-no-results__title { text-align: left; }
.sgls-no-results--verify .sgls-no-results__hint { margin-left: 0; max-width: none; }
.sgls-no-results--verify .sgls-no-results__actions { justify-content: flex-start; }

/* Not found */
.sgls-no-results--verify {
	background: #fffbeb;
	border-color: #fcd34d;
}
.sgls-no-results--verify .sgls-no-results__icon { color: #b45309; }

/* Expired / withdrawn */
.sgls-no-results--invalid {
	background: #fef2f2;
	border-color: #fca5a5;
}
.sgls-no-results--invalid .sgls-no-results__icon { color: #b91c1c; }

/* Valid but hidden by filters */
.sgls-no-results--valid {
	background: #f0fdf4;
	border-color: #86efac;
}
.sgls-no-results--valid .sgls-no-results__icon { color: #15803d; }

.sgls-verify-steps {
	margin: 0 0 1.25rem 1.1rem;
	padding: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: #4b5563;
}
.sgls-verify-steps li { margin: 0 0 2px; }

.sgls-no-results__verify-note {
	margin: 1.5rem auto 0;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
	max-width: 460px;
	font-size: 0.82rem;
	color: #6b7280;
	line-height: 1.55;
}
.sgls-no-results__verify-note a { font-weight: 600; }

@media (max-width: 600px) {
	.sgls-no-results--verify { padding: 1.5rem 1.1rem; }
	.sgls-no-results--verify .sgls-no-results__btn { flex: 1 1 100%; text-align: center; }
}

/* ── 4. "How to use this directory" panel ─────────────────────────────── */
.sgls-guide-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 0 2px;
	cursor: pointer;
	color: #1a6b44;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}
.sgls-guide-link:hover { text-decoration-style: solid; }
.sgls-guide-link:focus-visible { outline: 2px solid #1D9E75; outline-offset: 2px; border-radius: 3px; }

.sgls-guide {
	background: #fff;
	border: 1px solid #DCEBE0;
	border-radius: 10px;
	padding: 18px 20px 16px;
	margin: 0 0 16px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.sgls-guide[hidden] { display: none; }
.sgls-guide__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 12px;
}
.sgls-guide__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1B5E35;
	font-family: inherit;
	line-height: 1.3;
}
.sgls-guide__close {
	background: none;
	border: none;
	cursor: pointer;
	color: #1B5E35;
	opacity: 0.6;
	font-size: 14px;
	line-height: 1;
	padding: 4px;
}
.sgls-guide__close:hover { opacity: 1; }
.sgls-guide__close:focus-visible { outline: 2px solid #1D9E75; outline-offset: 2px; opacity: 1; }

.sgls-guide__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;
}
.sgls-guide__item {
	display: flex;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #374151;
}
.sgls-guide__num {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e8f5e9;
	color: #1B5E35;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.sgls-guide__item strong { display: block; color: #111827; margin-bottom: 1px; }
.sgls-guide__item code {
	font-size: 12px;
	background: #f3f4f6;
	padding: 0 4px;
	border-radius: 3px;
	white-space: nowrap;
}
.sgls-guide__item a,
.sgls-guide__foot a { color: #1a6b44; font-weight: 600; }
.sgls-guide__foot {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid #eef2ee;
	font-size: 13px;
	color: #6b7280;
}

@media (max-width: 640px) {
	.sgls-guide { padding: 14px 14px 12px; }
	.sgls-guide__list { grid-template-columns: 1fr; gap: 12px; }
}

/* ── 5. Show / hide toggles: chevron flips when open ─────────────────── */
.sgls-toggle-chev {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 5px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);   /* ▾ closed */
	transition: transform 0.15s ease;
}
[aria-expanded="true"] > .sgls-toggle-chev {
	transform: translateY(1px) rotate(-135deg);  /* ▴ open */
}
@media (prefers-reduced-motion: reduce) {
	.sgls-toggle-chev { transition: none; }
}