/**
 * The trade application form (spec §15.5).
 *
 * Matches the Wholesale page: a white card on #f8f9fa, navy #242c3f, Oswald
 * headings, Avenir body, 12 px radius. Every value is a `--uth-ta-*` custom
 * property so another client can restyle the form from Settings › Branding
 * without touching this file (§15.5).
 *
 * Touch targets are 44 px and focus is always visible, per WCAG 2.1 AA (§6.5).
 *
 * @package UTH_Trade_Accounts
 */

.uth-ta {
	--uth-ta-navy: #242c3f;
	--uth-ta-bg: #f8f9fa;
	--uth-ta-card: #ffffff;
	--uth-ta-border: #d8dbe2;
	--uth-ta-muted: #5d6475;
	--uth-ta-error: #b3261e;
	--uth-ta-error-bg: #fdecea;
	--uth-ta-ok: #1b6b3a;
	--uth-ta-warn-bg: #fff8e1;
	--uth-ta-warn-border: #e0b500;
	--uth-ta-radius: 12px;
	--uth-ta-gap: 20px;
	--uth-ta-touch: 44px;
	--uth-ta-heading-font: "Oswald", sans-serif;
	--uth-ta-body-font: "Avenir", "Segoe UI", sans-serif;

	background: var( --uth-ta-bg );
	border-radius: var( --uth-ta-radius );
	color: var( --uth-ta-navy );
	font-family: var( --uth-ta-body-font );
	margin: 0 auto;
	max-width: 880px;
	padding: 28px;
}

.uth-ta h2,
.uth-ta h3,
.uth-ta h4,
.uth-ta legend,
.uth-ta .uth-ta-heading {
	color: var( --uth-ta-navy );
	font-family: var( --uth-ta-heading-font );
	font-weight: 500;
	letter-spacing: 0.01em;
}

.uth-ta-step__title {
	font-size: 1.6rem;
	margin: 0 0 8px;
}

.uth-ta-step__description,
.uth-ta-help {
	color: var( --uth-ta-muted );
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 4px 0 0;
}

/* Progress -------------------------------------------------------------- */

.uth-ta-progress {
	margin-bottom: 20px;
}

.uth-ta-progress__count {
	color: var( --uth-ta-muted );
	font-size: 0.88rem;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.uth-ta-progress__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.uth-ta-progress__item {
	background: var( --uth-ta-card );
	border: 1px solid var( --uth-ta-border );
	border-radius: 999px;
	font-size: 0.85rem;
	padding: 6px 14px;
}

.uth-ta-progress__item a {
	color: var( --uth-ta-navy );
	text-decoration: none;
}

.uth-ta-progress__item.is-current {
	background: var( --uth-ta-navy );
	border-color: var( --uth-ta-navy );
	color: #ffffff;
}

.uth-ta-progress__item.is-done::before {
	content: "\2713\00a0";
	color: var( --uth-ta-ok );
}

.uth-ta-progress__item.is-current.is-done::before {
	color: #ffffff;
}

/* The card -------------------------------------------------------------- */

.uth-ta-form,
.uth-ta-summary__group,
.uth-ta-slot {
	background: var( --uth-ta-card );
	border: 1px solid var( --uth-ta-border );
	border-radius: var( --uth-ta-radius );
	padding: 24px;
}

.uth-ta-section + .uth-ta-section {
	border-top: 1px solid var( --uth-ta-border );
	margin-top: 24px;
	padding-top: 20px;
}

.uth-ta-section__title {
	font-size: 1.1rem;
	margin: 0 0 12px;
}

/* Layout ---------------------------------------------------------------- */

.uth-ta-grid {
	display: grid;
	gap: var( --uth-ta-gap );
	grid-template-columns: repeat( 6, 1fr );
}

.uth-ta-field {
	grid-column: span 6;
	min-width: 0;
}

/* Structural elements (heading, divider, static HTML, help) are grid items too;
 * without a span they collapse to one narrow column, so default them to full. */
.uth-ta-grid > .uth-ta-heading,
.uth-ta-grid > .uth-ta-divider,
.uth-ta-grid > .uth-ta-help,
.uth-ta-grid > .uth-ta-static {
	grid-column: span 6;
	min-width: 0;
}

.uth-ta-field--half {
	grid-column: span 3;
}

.uth-ta-field--third {
	grid-column: span 2;
}

@media ( max-width: 640px ) {
	.uth-ta {
		padding: 16px;
	}

	.uth-ta-form {
		padding: 16px;
	}

	.uth-ta-field--half,
	.uth-ta-field--third {
		grid-column: span 6;
	}
}

/* Inputs ---------------------------------------------------------------- */

.uth-ta-label,
.uth-ta legend.uth-ta-label {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 6px;
	padding: 0;
}

.uth-ta-required {
	color: var( --uth-ta-error );
}

.uth-ta-optional {
	color: var( --uth-ta-muted );
	font-weight: 400;
}

.uth-ta-input {
	background: #ffffff;
	border: 1px solid var( --uth-ta-border );
	border-radius: 8px;
	box-sizing: border-box;
	color: var( --uth-ta-navy );
	font-family: var( --uth-ta-body-font );
	font-size: 1rem;
	min-height: var( --uth-ta-touch );
	padding: 10px 12px;
	width: 100%;
}

.uth-ta-textarea {
	min-height: 110px;
	resize: vertical;
}

.uth-ta-input:focus-visible,
.uth-ta-button:focus-visible,
.uth-ta-choice input:focus-visible,
.uth-ta-card__input:focus-visible + .uth-ta-card__body {
	outline: 3px solid var( --uth-ta-navy );
	outline-offset: 2px;
}

.uth-ta-field.is-invalid .uth-ta-input {
	border-color: var( --uth-ta-error );
}

.uth-ta-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.uth-ta-currency {
	align-items: center;
	display: flex;
	gap: 8px;
}

.uth-ta-currency__symbol {
	color: var( --uth-ta-muted );
	font-weight: 600;
}

/* Choices --------------------------------------------------------------- */

.uth-ta-choices {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uth-ta-choices--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

.uth-ta-choice,
.uth-ta-checkbox {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 10px;
	line-height: 1.4;
	min-height: var( --uth-ta-touch );
	padding: 8px 0;
}

.uth-ta-choice input,
.uth-ta-checkbox input {
	flex: 0 0 auto;
	height: 22px;
	margin-top: 1px;
	width: 22px;
}

/* Account-type cards ---------------------------------------------------- */

.uth-ta-cards {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
}

.uth-ta-card {
	cursor: pointer;
	display: block;
	position: relative;
}

.uth-ta-card__input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.uth-ta-card__body {
	border: 2px solid var( --uth-ta-border );
	border-radius: var( --uth-ta-radius );
	display: block;
	height: 100%;
	padding: 16px;
}

.uth-ta-card__input:checked + .uth-ta-card__body {
	background: #f3f5fa;
	border-color: var( --uth-ta-navy );
}

.uth-ta-card__title {
	display: block;
	font-family: var( --uth-ta-heading-font );
	font-size: 1.05rem;
}

.uth-ta-card__desc {
	color: var( --uth-ta-muted );
	display: block;
	font-size: 0.9rem;
	margin-top: 6px;
}

.uth-ta-card__tag {
	background: var( --uth-ta-navy );
	border-radius: 999px;
	color: #ffffff;
	display: inline-block;
	font-size: 0.72rem;
	margin-top: 10px;
	padding: 3px 10px;
	text-transform: uppercase;
}

/* Repeater -------------------------------------------------------------- */

.uth-ta-row {
	border: 1px solid var( --uth-ta-border );
	border-radius: var( --uth-ta-radius );
	margin-bottom: 14px;
	padding: 16px;
}

.uth-ta-row__legend {
	font-family: var( --uth-ta-heading-font );
	font-size: 1rem;
	padding: 0 6px;
}

/* Documents ------------------------------------------------------------- */

.uth-ta-slot {
	background: var( --uth-ta-card );
	border: 1px solid var( --uth-ta-border );
	border-radius: var( --uth-ta-radius );
	margin-bottom: 12px;
	padding: 16px;
}

.uth-ta-slot--required {
	border-left: 4px solid var( --uth-ta-navy );
}

/* Two documents per row on wider screens — the full list is long otherwise.
 * Each document field is a grid item in .uth-ta-grid (6 columns); half = span 3.
 * Below the breakpoint the default span-6 (full width) applies. */
@media ( min-width: 640px ) {
	[data-step="documents"] .uth-ta-grid > .uth-ta-field--documents {
		display: flex;
		flex-direction: column;
		grid-column: span 3;
	}

	/* Stretch the card to the full row height so paired cards match, and lay it
	 * out as a column so the upload prompt can sit at the bottom (below). */
	[data-step="documents"] .uth-ta-grid > .uth-ta-field--documents > .uth-ta-slot {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	/* The upload prompt grows to fill the leftover height, so the empty space in
	 * an equal-height card becomes part of the (clickable, droppable) area rather
	 * than dead space under a thin line. */
	[data-step="documents"] .uth-ta-slot__add {
		align-items: center;
		flex: 1 1 auto;
		justify-content: center;
	}
}

.uth-ta-slot__head {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.uth-ta-slot__title {
	flex: 1 1 auto;
	font-family: var( --uth-ta-heading-font );
	font-size: 1rem;
	min-width: 0;
}

.uth-ta-slot__badge {
	flex: 0 0 auto;
}

.uth-ta-slot__person {
	color: var( --uth-ta-muted );
	font-family: var( --uth-ta-body-font );
	font-size: 0.9rem;
}

.uth-ta-slot__badge {
	border-radius: 999px;
	font-size: 0.72rem;
	padding: 3px 10px;
	text-transform: uppercase;
}

.uth-ta-slot__badge--required {
	background: var( --uth-ta-navy );
	color: #ffffff;
}

.uth-ta-slot__badge--optional {
	background: var( --uth-ta-bg );
	color: var( --uth-ta-muted );
}

.uth-ta-slot__limits,
.uth-ta-slot__pending {
	color: var( --uth-ta-muted );
	font-size: 0.85rem;
	margin: 6px 0 0;
}

.uth-ta-slot__label {
	display: block;
	font-size: 0.9rem;
	margin: 10px 0 4px;
}

/* Files already attached to a slot. */

.uth-ta-slot__files {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.uth-ta-slot__file {
	align-items: center;
	background: #ffffff;
	border: 1px solid var( --uth-ta-border );
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 6px;
	padding: 8px 10px;
}

.uth-ta-slot__file-name {
	flex: 1 1 auto;
	/* A filename is the applicant's and can be long; it must wrap rather than
	   push the buttons off a phone screen. */
	overflow-wrap: anywhere;
}

.uth-ta-slot__file-size {
	color: var( --uth-ta-muted );
	font-size: 0.85rem;
}

.uth-ta-slot__file-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

/* "Attached" chip in place of the raw file name (name is a hover tooltip). */
.uth-ta-slot__file-badge {
	align-items: center;
	color: var( --uth-ta-ok );
	display: inline-flex;
	flex: 1 1 auto;
	font-size: 0.85rem;
	font-weight: 600;
	gap: 6px;
	min-width: 0;
}

.uth-ta-slot__file-badge svg {
	flex: 0 0 auto;
}

/* Minimal icon buttons (View / Remove). Explicit colours so the theme's white
 * button text can never make them vanish; the icon uses currentColor. */
.uth-ta-iconbtn {
	align-items: center;
	background: var( --uth-ta-card );
	border: 1px solid var( --uth-ta-border );
	border-radius: 6px;
	color: var( --uth-ta-navy );
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	width: 40px;
}

.uth-ta-iconbtn svg {
	display: block;
}

.uth-ta-iconbtn:hover {
	background: var( --uth-ta-navy );
	border-color: var( --uth-ta-navy );
	color: #fff;
}

.uth-ta-iconbtn--danger:hover {
	background: var( --uth-ta-error );
	border-color: var( --uth-ta-error );
	color: #fff;
}

.uth-ta-iconbtn:focus-visible {
	outline: 2px solid var( --uth-ta-focus, #005fcc );
	outline-offset: 2px;
}

/* Google Places autocomplete dropdown, above the form card. */
.pac-container {
	z-index: 100000;
}

/* --- Document slot: whole card is the drop zone --------------------------- */
.uth-ta-slot[data-dropzone] {
	position: relative;
}

.uth-ta-slot__input {
	height: 1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.uth-ta-slot__add {
	align-items: center;
	border-top: 1px solid var( --uth-ta-border );
	color: var( --uth-ta-navy );
	cursor: pointer;
	display: flex;
	font-size: 0.85rem;
	font-weight: 600;
	gap: 6px;
	margin-top: 6px;
	padding: 10px 0 2px;
}

.uth-ta-slot__add:hover {
	color: var( --uth-ta-muted );
}

.uth-ta-slot__add-icon {
	color: var( --uth-ta-muted );
	font-size: 1.15rem;
	line-height: 1;
}

.uth-ta-slot__droplabel {
	align-items: center;
	background: var( --uth-ta-bg );
	border: 2px dashed var( --uth-ta-navy );
	border-radius: var( --uth-ta-radius );
	color: var( --uth-ta-navy );
	display: none;
	font-weight: 700;
	inset: 0;
	justify-content: center;
	position: absolute;
	text-align: center;
	z-index: 3;
}

.uth-ta-slot.is-dragover {
	border-color: var( --uth-ta-navy );
}

.uth-ta-slot.is-dragover .uth-ta-slot__droplabel {
	display: flex;
}

/* Truncated filename (full name in the [data-tip] tooltip). */
.uth-ta-slot__file-name {
	align-items: center;
	color: var( --uth-ta-ok );
	display: flex;
	flex: 1 1 auto;
	font-size: 0.85rem;
	gap: 6px;
	min-width: 0;
}

.uth-ta-slot__file-name svg {
	flex: 0 0 auto;
}

.uth-ta-slot__file-text {
	color: var( --uth-ta-navy );
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uth-ta-slot__view:focus-visible,
.uth-ta-slot__remove:focus-visible {
	outline: 2px solid var( --uth-ta-focus, #005fcc );
	outline-offset: 2px;
}

.uth-ta-slot__status {
	font-size: 0.85rem;
	margin: 0;
	/* Only takes space when it has a message, so an empty status leaves no gap. */
	min-height: 0;
}

.uth-ta-slot__status:not(:empty) {
	margin-top: 8px;
}

.uth-ta-slot__status--error {
	color: var( --uth-ta-error, #8a1c1c );
}

/* Signature ------------------------------------------------------------- */

.uth-ta-signature__surface {
	max-width: 640px;
	position: relative;
}

.uth-ta-signature__pad {
	aspect-ratio: 16 / 5;
	background: #ffffff;
	border: 1px solid var( --uth-ta-border );
	border-radius: 8px;
	cursor: crosshair;
	display: block;
	height: auto;
	min-height: 170px;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	width: 100%;
}

/* The signing line: drawn by CSS, so it is never part of the saved image. */
.uth-ta-signature__guide {
	border-top: 1px solid #c9ced8;
	bottom: 26%;
	color: #8a91a0;
	font-size: 0.75rem;
	left: 6%;
	padding-top: 4px;
	pointer-events: none;
	position: absolute;
	right: 6%;
}

.uth-ta-signature__guide::before {
	color: #8a91a0;
	content: "\00d7";
	font-size: 1.1rem;
	left: 0;
	position: absolute;
	top: -1.6rem;
}

.uth-ta-signature__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin-top: 6px;
}

.uth-ta-signature__tools [disabled] {
	cursor: default;
	opacity: 0.45;
}

/* Consents -------------------------------------------------------------- */

.uth-ta-consent-text {
	background: var( --uth-ta-bg );
	border-radius: 8px;
	margin-bottom: 10px;
	padding: 14px 16px;
}

.uth-ta-consent-text summary {
	cursor: pointer;
	font-family: var( --uth-ta-heading-font );
}

.uth-ta-consent-text__body {
	font-size: 0.92rem;
	line-height: 1.55;
}

/* Messages -------------------------------------------------------------- */

.uth-ta-errors {
	background: var( --uth-ta-error-bg );
	border: 1px solid var( --uth-ta-error );
	border-radius: var( --uth-ta-radius );
	margin-bottom: 20px;
	padding: 16px 20px;
}

.uth-ta-errors__title {
	font-size: 1.05rem;
	margin: 0 0 8px;
}

.uth-ta-errors__list a {
	color: var( --uth-ta-error );
}

.uth-ta-error {
	color: var( --uth-ta-error );
	font-size: 0.88rem;
	margin: 6px 0 0;
}

.uth-ta-warnings {
	background: var( --uth-ta-warn-bg );
	border: 1px solid var( --uth-ta-warn-border );
	border-radius: var( --uth-ta-radius );
	margin-bottom: 20px;
	padding: 14px 18px;
}

.uth-ta-notice {
	background: var( --uth-ta-card );
	border: 1px solid var( --uth-ta-border );
	border-left: 4px solid var( --uth-ta-ok );
	border-radius: 8px;
	margin-bottom: 16px;
	padding: 12px 16px;
}

.uth-ta-challenge {
	background: var( --uth-ta-bg );
	border: 1px solid var( --uth-ta-border );
	border-radius: var( --uth-ta-radius );
	margin-top: 20px;
	padding: 16px 20px;
}

.uth-ta-otp {
	font-size: 1.3rem;
	letter-spacing: 0.35em;
	max-width: 12ch;
}

.uth-ta-securing {
	color: var( --uth-ta-muted );
	font-size: 0.88rem;
	margin-top: 10px;
}

/* Buttons --------------------------------------------------------------- */

.uth-ta-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.uth-ta-button {
	border: 2px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	display: inline-block;
	font-family: var( --uth-ta-heading-font );
	font-size: 1rem;
	min-height: var( --uth-ta-touch );
	padding: 11px 22px;
	text-decoration: none;
}

.uth-ta-button--primary {
	background: var( --uth-ta-navy );
	color: #ffffff;
}

.uth-ta-button--secondary {
	background: #ffffff;
	border-color: var( --uth-ta-navy );
	color: var( --uth-ta-navy );
}

.uth-ta-button--link {
	background: none;
	color: var( --uth-ta-muted );
	padding: 11px 4px;
	text-decoration: underline;
}

.uth-ta-actions .uth-ta-button--primary {
	margin-left: auto;
}

/* Summary --------------------------------------------------------------- */

/* A review section is a collapsible <details>, collapsed by default. The card
 * border/background come from the shared rule; padding is handled per part. */
.uth-ta-summary__group {
	margin-bottom: 12px;
	padding: 0;
}

.uth-ta-summary__heading {
	margin-top: 28px;
}

.uth-ta-summary__title {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var( --uth-ta-heading-font );
	font-weight: 600;
	gap: 12px;
	justify-content: space-between;
	list-style: none;
	padding: 14px 16px;
}

.uth-ta-summary__title::-webkit-details-marker {
	display: none;
}

.uth-ta-summary__title::after {
	color: var( --uth-ta-muted );
	content: "⌄";
	font-size: 1.1rem;
	line-height: 1;
	transition: transform 0.15s ease;
}

.uth-ta-summary__group[open] .uth-ta-summary__title::after {
	transform: rotate( 180deg );
}

.uth-ta-summary__body {
	border-top: 1px solid var( --uth-ta-border );
	padding: 12px 16px 6px;
}

.uth-ta-summary__edit {
	font-family: var( --uth-ta-body-font );
	font-size: 0.85rem;
}

.uth-ta-summary__list {
	margin: 0;
}

.uth-ta-summary__row {
	border-top: 1px solid var( --uth-ta-border );
	display: grid;
	gap: 4px 20px;
	grid-template-columns: minmax( 140px, 1fr ) 2fr;
	padding: 8px 0;
}

.uth-ta-summary__row dt {
	color: var( --uth-ta-muted );
	font-size: 0.9rem;
}

.uth-ta-summary__row dd {
	margin: 0;
}

.uth-ta-summary__blank {
	color: var( --uth-ta-muted );
	font-style: italic;
}

.uth-ta-summary__sub {
	margin: 0;
	padding-left: 18px;
}

@media ( max-width: 640px ) {
	.uth-ta-summary__row {
		grid-template-columns: 1fr;
	}
}

/* Honeypots (§12.7) ------------------------------------------------------
 *
 * Off-screen rather than display:none. Some automation skips anything that
 * computes to display:none, which would make the trap useless against exactly
 * the traffic it is for.
 */

.uth-ta-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

.uth-ta-divider {
	background: var( --uth-ta-border );
	border: 0;
	height: 1px;
	margin: 8px 0;
}

.uth-ta-reference {
	color: var( --uth-ta-muted );
	font-size: 0.9rem;
	margin-top: 16px;
	text-align: center;
}

.uth-ta-autosave {
	color: var( --uth-ta-muted );
	font-size: 0.85rem;
	margin: 12px 0 0;
	min-height: 1.2em;
}

/*
 * My Account › Trade Account portal. Reuses the .uth-ta design system (card,
 * fonts, buttons); these rules give the sections room to breathe so the
 * headings, actions and history read as separate blocks (spec §15.5/§15.6).
 */
.uth-ta-portal > h3:first-child {
	margin-top: 0;
}

.uth-ta-portal h4 {
	border-top: 1px solid var( --uth-ta-border );
	margin: 28px 0 12px;
	padding-top: 24px;
}

.uth-ta-portal form {
	margin: 0 0 8px;
}

.uth-ta-portal p {
	margin: 0 0 12px;
}

.uth-ta-portal ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.uth-ta-portal .uth-ta-message-body {
	box-sizing: border-box;
	margin-bottom: 8px;
	width: 100%;
}

/* Status pill (Draft / In review / Approved …). Colour-coded by state. */
.uth-ta-badge {
	background: #eef0f4;
	border: 1px solid var( --uth-ta-border );
	border-radius: 999px;
	color: var( --uth-ta-muted );
	display: inline-block;
	font-family: var( --uth-ta-body-font );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	padding: 3px 12px;
	text-transform: uppercase;
	vertical-align: middle;
}

/* The reference number and status pill sit on the heading line. */
.uth-ta-portal h3 small {
	color: var( --uth-ta-muted );
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 6px 0 4px;
	vertical-align: middle;
}

.uth-ta-badge--approved,
.uth-ta-badge--active {
	background: #e6f4ec;
	border-color: #bfe3cd;
	color: var( --uth-ta-ok );
}

.uth-ta-badge--declined,
.uth-ta-badge--withdrawn,
.uth-ta-badge--closed {
	background: var( --uth-ta-error-bg );
	border-color: #f0c7c3;
	color: var( --uth-ta-error );
}

.uth-ta-badge--info-requested,
.uth-ta-badge--on-hold {
	background: var( --uth-ta-warn-bg );
	border-color: var( --uth-ta-warn-border );
	color: #7a5c00;
}

.uth-ta-badge--submitted,
.uth-ta-badge--in-review,
.uth-ta-badge--pending-approval {
	background: #e8eefb;
	border-color: #c7d6f5;
	color: #1e40af;
}

/* "Items to fix": a clean amber callout list instead of plain bullets. */
.uth-ta-portal .uth-ta-fixlist {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.uth-ta-portal .uth-ta-fixlist li {
	background: var( --uth-ta-warn-bg );
	border: 1px solid #f0e3b0;
	border-left: 3px solid var( --uth-ta-warn-border );
	border-radius: 8px;
	margin: 0 0 8px;
	padding: 10px 14px;
}

.uth-ta-fixlist__label {
	font-weight: 600;
}

.uth-ta-fixlist__reason {
	color: var( --uth-ta-muted );
	display: block;
	font-size: 0.9rem;
	margin-top: 2px;
}

/* Document upload drop zone (§8.1) — minimalistic drag-and-drop area. */
.uth-ta-dropzone {
	background: var( --uth-ta-card );
	border: 2px dashed var( --uth-ta-border );
	border-radius: var( --uth-ta-radius );
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease;
}

/* Visually hidden, still read by screen readers (the format details). */
.uth-ta-sr-only {
	border: 0;
	clip: rect( 0, 0, 0, 0 );
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* A small info icon whose tooltip carries the accepted formats, so the drop
 * zone itself stays compact. Works on hover and keyboard focus. */
.uth-ta-tip {
	align-items: center;
	background: var( --uth-ta-bg );
	border: 1px solid var( --uth-ta-border );
	border-radius: 50%;
	color: var( --uth-ta-muted );
	cursor: help;
	display: inline-flex;
	font-family: var( --uth-ta-body-font );
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 700;
	height: 18px;
	justify-content: center;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 18px;
}

/* Generic CSS tooltip: any element with [data-tip] shows its text on hover or
 * keyboard focus (icon buttons, the filename, the (i) format hint). */
[data-tip] {
	position: relative;
}

[data-tip]::after {
	background: var( --uth-ta-navy );
	border-radius: 6px;
	bottom: calc( 100% + 6px );
	color: #fff;
	content: attr( data-tip );
	font-family: var( --uth-ta-body-font );
	font-size: 0.72rem;
	font-weight: 400;
	left: 50%;
	line-height: 1.3;
	max-width: 240px;
	opacity: 0;
	padding: 5px 8px;
	pointer-events: none;
	position: absolute;
	transform: translateX( -50% );
	transition: opacity 0.12s ease;
	white-space: normal;
	width: max-content;
	z-index: 100;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after,
[data-tip]:focus::after {
	opacity: 1;
}

/* The corner (i) hint stays absolutely positioned; its tooltip drops below-right
 * so it does not clip off the top of the card. */
.uth-ta-tip {
	position: absolute;
}

.uth-ta-tip::after {
	bottom: auto;
	left: auto;
	right: 0;
	top: calc( 100% + 6px );
	transform: none;
}

.uth-ta-dropzone:hover,
.uth-ta-dropzone.is-dragover,
.uth-ta-dropzone:focus-within {
	background: var( --uth-ta-bg );
	border-color: var( --uth-ta-navy );
}

.uth-ta-dropzone .uth-ta-slot__input {
	height: 1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.uth-ta-dropzone__label {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-height: var( --uth-ta-touch );
	padding: 14px 30px 14px 14px;
	text-align: center;
}

.uth-ta-dropzone__icon {
	color: var( --uth-ta-muted );
	font-size: 1.4rem;
	line-height: 1;
}

.uth-ta-dropzone__title {
	font-weight: 600;
}

.uth-ta-dropzone__hint {
	color: var( --uth-ta-muted );
	font-size: 0.82rem;
}

/* Tidier stored-file rows. */
.uth-ta-slot__files {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.uth-ta-slot__file {
	align-items: center;
	background: var( --uth-ta-bg );
	border: 1px solid var( --uth-ta-border );
	border-radius: 8px;
	display: flex;
	gap: 10px;
	margin: 0 0 6px;
	padding: 8px 12px;
}

.uth-ta-slot__file-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uth-ta-slot__file-size {
	color: var( --uth-ta-muted );
	font-size: 0.82rem;
}

/* "Same as …" address toggle (see templates/fields/composite.php). */
.uth-ta-same-as {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .75em;
	font-weight: 500;
	cursor: pointer;
}
.uth-ta-same-as input { margin: 0; }
.uth-ta-same-as--hidden { display: none !important; }

/* Suretyship template download --------------------------------------------- */

.uth-ta-surety-download {
	background: var( --uth-ta-bg, #f6f5f3 );
	border: 1px solid var( --uth-ta-border, #e2e0dd );
	border-radius: 8px;
	margin: 0 0 24px;
	padding: 18px 20px;
}
.uth-ta-surety-download__text p:last-child { margin-bottom: 12px; }
.uth-ta-surety-download__button {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	text-decoration: none;
}
.uth-ta-surety-download__steps {
	font-size: 0.92rem;
	margin: 14px 0 0;
	padding-left: 1.2em;
}
.uth-ta-surety-download__steps li { margin: 2px 0; }