/* ============================================================
 * BIOTA · SECTION · Help / WhatsApp CTA  (home "Bingung pilih")
 * Light band, hairline top/bottom. Two columns: a WhatsApp chat mockup
 * on the left, heading + copy + green CTA on the right.
 * ============================================================ */

.biota-help.biota-section {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	/* Offset the fixed nav when jumping to #bantuan (was an inline style, which
	   broke the group block's validation — kept here instead). */
	scroll-margin-top: 80px;
}

.biota-help__card {
	display: flex;
	align-items: center;
	gap: 56px;
	/* WhatsApp glyph, shared by the chat avatar + the CTA (masked, so the fill
	   comes from each element's own color). Keeps the blocks free of inline SVG. */
	--biota-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9 3 3.5 8.5 3.5 15.5c0 2.2.6 4.3 1.7 6.2L3 29l7.5-2c1.8 1 3.9 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm0 22.8c-1.9 0-3.7-.5-5.3-1.5l-.4-.2-4.4 1.2 1.2-4.3-.3-.4a10.3 10.3 0 0 1-1.6-5.6C5.2 9.6 10 4.8 16 4.8s10.8 4.8 10.8 10.7S22 25.8 16 25.8zm6-8c-.3-.2-1.9-1-2.2-1-.3-.1-.5-.2-.7.1s-.8 1-1 1.2-.4.2-.7 0a8.8 8.8 0 0 1-2.6-1.6 9.6 9.6 0 0 1-1.8-2.2c-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2 0-.4 0-.5l-1-2.3c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4a3.6 3.6 0 0 0-1.1 2.7c0 1.6 1.2 3.2 1.3 3.4.2.2 2.3 3.6 5.7 5 3.4 1.3 3.4.9 4 .8.6 0 1.9-.8 2.1-1.5.3-.8.3-1.4.2-1.5l-.6-.3z'/%3E%3C/svg%3E");
}
@media (max-width: 899px) {
	.biota-help__card {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
}
/* Native-block children carry WP flow margins; the component uses gap, so zero them. */
.biota-help__card > *,
.biota-chat > *,
.biota-chat__head > *,
.biota-help__body > * { margin-block: 0; }

/* --- Chat mockup --- */
.biota-chat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.biota-chat__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}
.biota-chat__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #25d366;
	color: #ffffff;
}
.biota-chat__avatar { margin: 0; }
.biota-chat__avatar::before {
	content: "";
	width: 15px;
	height: 15px;
	display: block;
	background-color: #ffffff;
	-webkit-mask: var(--biota-wa) center / contain no-repeat;
	mask: var(--biota-wa) center / contain no-repeat;
}
.biota-chat__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
}
.biota-chat__online {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--success);
}
.biota-chat__online::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #25d366;
	flex: none;
}
.biota-chat__bubble {
	max-width: 90%;
	padding: 10px 13px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	border-radius: 14px;
}
.biota-chat__bubble--me {
	align-self: flex-end;
	background: #dcf8c6;
	color: #1a2b1a;
	border-radius: 14px 14px 4px 14px;
}
.biota-chat__bubble--them {
	align-self: flex-start;
	background: #ffffff;
	color: var(--wp--preset--color--text-strong);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	border-radius: 14px 14px 14px 4px;
}
.biota-chat__bubble--them + .biota-chat__bubble--them {
	border-radius: 14px;
}
.biota-chat__note {
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-subtle);
}

/* --- Copy + CTA --- */
.biota-help__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* 8px ran the heading, the paragraph and the CTA together as one block.
	 * Give the line of text room to read as its own line. */
	gap: 12px;
}
.biota-help__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--heading);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text);
}
.biota-help__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}
/* The button is the section's one action, so it gets clear air above it rather
 * than sitting tight against the paragraph (12px gap + 12px = 24px). */
/* Beats the `.biota-help__body > * { margin-block: 0 }` reset above, which has
 * the same specificity and would otherwise flatten this back to zero. */
.biota-help__body > .biota-help__cta-wrap { margin-top: 12px; }
.biota-help__cta-wrap { align-self: flex-start; }
.biota-help__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #25d366;
	color: #ffffff;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	transition: filter 0.2s ease;
}
.biota-help__cta .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	display: block;
	flex: none;
	background-color: #ffffff;
	-webkit-mask: var(--biota-wa) center / contain no-repeat;
	mask: var(--biota-wa) center / contain no-repeat;
}
/* The site-wide hover in _button.css re-asserts the action blue on every
   button, to undo a parent-theme rule that blanks them. This one is green, so
   it has to re-assert its own colour or it flips to blue on hover — it only set
   a filter before, and did flip. 0.93 is the shared darken. */
.biota-help__cta .wp-block-button__link:hover,
.biota-help__cta .wp-block-button__link:focus {
	background-color: #25d366;
	color: #ffffff;
	filter: brightness(0.93);
}

/* Mobile: the WhatsApp CTA spans full width. */
@media (max-width: 782px) {
	.biota-help__cta-wrap { align-self: stretch; }
	.biota-help__cta,
	.biota-help__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}