/* ==========================================================================
   The one-line "how this form works" hint on the CYO booking forms.

   Its own file because it is shown on all three booking pages and they do not
   share a stylesheet - prebook-cyo does NOT load cyo-customer.css, so the
   --cyo-* custom properties it defines carry a fallback on every use here.
   ========================================================================== */

.cyo-form-hint {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.65rem 0.9rem;
	border-left: 4px solid var(--cyo-green-accent, #5FB34C);
	border-radius: var(--cyo-radius, 6px);
	background: rgba(95, 179, 76, 0.1);
	color: var(--cyo-green-deep, #23472e);
	font-size: 0.95rem;
	/* Not italic and not smaller than this: it is an instruction, not a
	   footnote, and it is the only thing on the page that explains how to get
	   past the first section. */
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

.cyo-form-hint .bi {
	flex: 0 0 auto;
	font-size: 1.1em;
	line-height: 1;
}