/**
 * AMA — Participant Details (inc/class-ama-participant-details.php).
 *
 * The three fields sit INSIDE WooCommerce's own add-to-cart form, between the
 * attribute dropdown and the price/button block, on a single product page that
 * Elementor is rendering. So every rule here has to outrank Elementor's global
 * Kit, which styles form controls through `.elementor-kit-25 input` (0,1,1) —
 * a single class of ours (0,1,0) loses. Repeated classes and element+class
 * selectors settle it without !important.
 *
 * Colour tokens (--ama-* / --red-deep etc.) are declared once on `body` in
 * style.css; hex fallbacks name the same colours in case this is ever rendered
 * outside the theme.
 *
 * Version: 2.7.96 (tracks the theme version — cache-busting uses
 *          AMAINDIATS_CHILD_VERSION, this header is documentation)
 */

/*
 * Three fields across one row, the heading spanning them. A hidden input is
 * display:none by UA rule, so the marker does not occupy a cell.
 */
.ama-pd {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 14px;
	align-items: start;
	margin: 0 0 20px;
}

/*
 * form.cart is a flex row whose children are placed by `order`
 * (ama-single-product.css). Without an order of its own this block defaults to
 * 0 and lands beside the variation heading. Order 4 with a full-width basis
 * puts it on its own row after the variation cards (order 3) and, being
 * earlier in the DOM, above the price/button wrap that shares order 4.
 */
.ama-sp__cart .ama-pd { order: 4; flex: 1 0 100%; }

.ama-pd__intro {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-soft, #6b6459);
}

.ama-pd__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* WooCommerce and the Kit both give <p> a bottom margin; the flex gap
	   above is doing the spacing, so the margin would double it. */
	margin: 0;
	min-width: 0;
}

.ama-pd__label {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ink, #1a1f33);
}

.ama-pd__req { color: var(--red-deep, #a82720); margin-left: 2px; }

/* Repeated class (0,2,1 with the element) so the Kit's `.elementor-kit-25
   input[type="text"]` padding, border and font do not take the field over. */
input.ama-pd__input.ama-pd__input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--border, #d6cfc4);
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	/* 0.9375rem = 15px: under 16px iOS zooms the page on focus, and this field
	   sits mid-form where that is especially disruptive — so min-height below
	   carries the target size instead of a larger font. */
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ink, #1a1f33);
	/* WCAG 2.5.8 target size. */
	min-height: 44px;
}

input.ama-pd__input.ama-pd__input:focus-visible {
	outline: 2px solid var(--blue, #1740a8);
	outline-offset: 1px;
	border-color: var(--blue, #1740a8);
}

/* The browser's own invalid styling only after a submit attempt, not while
   someone is still typing their first character. */
input.ama-pd__input.ama-pd__input:user-invalid {
	border-color: var(--red-deep, #a82720);
}

/* One per row once three would be too narrow to read. */
@media (max-width: 600px) {
	.ama-pd { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   ADVISORY FIELD HINT (assets/js/ama-form-hints.js)
   Same element and intent as in ama-apply-form.css. Scoped under
   .ama-pd and doubled on the class so it outranks the Elementor Kit's
   `.elementor-kit-25 p` (0,1,1) — see this file's header.
   ------------------------------------------------------------------ */
.ama-pd p.ama-field-hint.ama-field-hint {
	margin: .35rem 0 0;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--ink-soft, #6b6459);
}

.ama-pd p.ama-field-hint[hidden] { display: none; }