/**
 * AMA Booking Guard — attendee contact check messages.
 *
 * Never colour-only: every level carries a leading glyph as well as its
 * colour, so the difference survives greyscale and colour blindness (WCAG
 * 1.4.1). Sizes stay at or above the site's 12px floor.
 *
 * Colours are literals rather than --ama-* tokens on purpose: this file loads
 * inside MEC's booking markup, which the theme's token block does not always
 * reach, and a message that renders invisible is worse than one slightly off
 * palette. Ratios below are against the white booking form.
 */

.ama-bg-msg {
	display: block;
	margin: 6px 0 0;
	font-size: 0.8125rem;      /* 13px */
	line-height: 1.45;
}

.ama-bg-msg::before {
	margin-right: 5px;
	font-weight: 700;
}

/* Quiet note. #595959 on #fff = 7.0:1 */
.ama-bg-msg--hint {
	color: #595959;
}
.ama-bg-msg--hint::before {
	content: "\2139";          /* information source */
}

/* Needs acknowledging. #8a6100 on #fff = 5.1:1 */
.ama-bg-msg--confirm {
	color: #8a6100;
}
.ama-bg-msg--confirm::before {
	content: "\26A0";          /* warning sign */
}

/* Must be fixed. #b32d2e on #fff = 5.2:1 */
.ama-bg-msg--block {
	color: #b32d2e;
}
.ama-bg-msg--block::before {
	content: "\2717";          /* ballot X */
}

/* Inline actions ("Use it anyway" / "Let me correct it").
   SPECIFICITY: the class is repeated. These are <button>s, and Elementor's kit
   styles every button with

       .elementor-kit-25 button { background: var(--e-global-color-accent);
                                  color: var(--e-global-color-308e809) }   (0-1-1)

   which outranks a single class. It sets no padding, so `padding: 0` here
   survived while `background: none` did not — the result was an accent-coloured
   chip clamped tight around the label. Repeating the class beats it without
   !important, the same way the category pills are handled in ama-mec-views.css.

   Colour comes from currentColor, so the button picks up the tone of the
   message it sits in — amber inside a confirm, red inside a block — instead of
   being Elementor's accent regardless of context. */
.ama-bg-act.ama-bg-act {
	display: inline-block;
	margin: 6px 0 0 8px;
	padding: 5px 10px;
	border: 1px solid currentColor;
	border-radius: 10px;
	background: transparent;
	font: inherit;
	color: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/* Hover/focus.
   A neutral tint rather than `background: currentColor`, which would resolve
   against the NEW colour and paint white on white.

   `color` is re-asserted here, and that is the whole point of this rule. The
   base rule above only had to beat `.elementor-kit-25 button` (0-1-1), but a
   hover state brings its own pseudo-class along: `button:hover` scores 0-2-1
   and outranks the base 0-2-0, so the theme's white button text leaked back in
   the moment the pointer arrived — white on a pale tint, effectively invisible.
   Scoping to .ama-bg-msg (0-3-1) clears it with room to spare, and is honest:
   these buttons only ever exist inside a message. */
.ama-bg-msg .ama-bg-act.ama-bg-act:hover,
.ama-bg-msg .ama-bg-act.ama-bg-act:focus {
	background: rgba(0, 0, 0, 0.07);
	color: inherit;
	border-color: currentColor;
	text-decoration: none;
}
.ama-bg-msg .ama-bg-act.ama-bg-act:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* "This attendee has no mobile of their own" — the escape from the duplicate
   rule. Deliberately plain and slightly indented: it should be findable but
   not so inviting that it becomes the default path. */
.ama-bg-shared {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 8px 0 0 2px;
	color: #444;
	font-size: 0.8125rem;
	line-height: 1.4;
	cursor: pointer;
}
.ama-bg-shared input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
}

/* Field states. Both carry a message beside them, so the border is
   reinforcement rather than the only signal. */
.ama-bg-invalid.ama-bg-invalid {
	border-color: #b32d2e;
	box-shadow: 0 0 0 2px rgba(179, 45, 46, 0.12);
}
.ama-bg-warn.ama-bg-warn {
	border-color: #8a6100;
	box-shadow: 0 0 0 2px rgba(138, 97, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.ama-bg-msg { transition: none; }
}