/*
 * The access code form. One form, two places: the plan page and the age gate.
 *
 * Layout only. The field and the button are members of the site-wide roles in controls.css.
 */

.akem-code-form {
	display: flex;
	align-items: flex-end;
	gap: var(--akem-space-3);
	flex-wrap: wrap;
}

/* The margin is reset because the parent theme gives every label 0.5em below it, which dropped
   the field 7px above the button beside it. */
.akem-code-form__label {
	display: flex;
	flex-direction: column;
	gap: var(--akem-space-2);
	flex: 1 1 200px;
	margin: 0;
	font-size: var(--akem-size-small);
	font-weight: var(--akem-weight-label);
	color: var(--akem-ink);
}

.akem-code-form__error,
.akem-code-form__note {
	flex: 1 1 100%;
	margin: 0;
	font-size: var(--akem-size-small);
}

.akem-code-form__error {
	color: var(--akem-danger);
}

.akem-code-form__note {
	color: var(--akem-grey-deep);
}