/* =========================================================================
   pc_form_validate.css - error presentation for gateway forms
   AAU Solutions / Provision Connect          Created 2026-10-19

   Pairs with scripts/pc_form_validate.js. Deliberately small: the FIELDS are
   styled by whatever system the page already uses (.oh-in / .oh-sel from
   oh_report_styles.cfm, or Bootstrap .form-control). This file only adds the
   error state on top, so it can be dropped onto any gateway form without
   fighting the page's own look.

   Colours are literal rather than var()-based because this stylesheet has to
   work on pages that never include oh_report_styles.cfm. Where the oh-* tokens
   DO exist they are preferred via var() with these as the fallback.
   ========================================================================= */

/* ---- the control itself ---- */
.pcf-form .is-invalid,
.pcf-form .is-invalid:focus {
	border-color: #dc2626 !important;
	background: #fff7f7;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .13) !important;
}

/* ---- inline message under the field ---- */
.pcf-err {
	display: none;
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	font-weight: 600;
	color: #991b1b;
	text-transform: none;
	letter-spacing: 0;
}
.pcf-err.is-on { display: block; }
.pcf-err::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 6px;
	vertical-align: -2px;
	border-radius: 50%;
	background: #dc2626;
	/* exclamation mark, drawn rather than an icon font so the message still
	   reads correctly if Font Awesome has not loaded */
	-webkit-mask: radial-gradient(circle at 50% 78%, #000 0 1.1px, transparent 1.2px),
	              linear-gradient(#000 0 0) 50% 20%/1.6px 42% no-repeat;
	        mask: radial-gradient(circle at 50% 78%, #000 0 1.1px, transparent 1.2px),
	              linear-gradient(#000 0 0) 50% 20%/1.6px 42% no-repeat;
	-webkit-mask-composite: source-over;
	        mask-composite: add;
}

/* ---- required marker ---- */
.pcf-rq {
	color: #dc2626;
	margin-left: 3px;
	font-weight: 700;
}

/* ---- hint text under a field (not an error) ---- */
.pcf-hint {
	display: block;
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	font-weight: 400;
	color: #9ca3af;
	text-transform: none;
	letter-spacing: 0;
}

/* ---- summary box at the top of the form ---- */
.pcf-summary { display: none; }
.pcf-summary.is-on {
	display: block;
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid rgba(220, 38, 38, .3);
	border-left: 4px solid #dc2626;
	border-radius: 10px;
	background: #fef2f2;
}
.pcf-summary:focus { outline: none; }
.pcf-summary .pcf-summary-h {
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: #991b1b;
}
.pcf-summary ul { margin: 0; padding: 0 0 0 18px; }
.pcf-summary li { margin: 3px 0; font-size: 13px; color: #991b1b; }
.pcf-summary li::before { display: none; }  /* storefront themes add bullets */
.pcf-summary a { color: #991b1b; text-decoration: underline; }
.pcf-summary a:hover { color: #7f1d1d; }

/* ---- server-side error block (rendered by CFML, no JS involved) ---- */
.pcf-srv { display: block; }

/* ---- busy submit button ----
   pointer-events:none is load-bearing: it is the double-submit guard while
   the button is still enabled. The button cannot be disabled synchronously
   inside the submit handler, because a disabled control is dropped from the
   form data set and the submission is cancelled - see setBusy() in
   pc_form_validate.js. */
.pcf-form button.is-busy,
.pcf-form .is-busy {
	opacity: .78;
	cursor: progress;
	pointer-events: none;
}

/* Spinner drawn in CSS so it does not depend on the Font Awesome kit having
   loaded. Sized in em so it tracks whatever the button's font-size is. */
.pcf-spin {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .55em;
	vertical-align: -.14em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: .9;
	animation: pcf-spin .6s linear infinite;
}
@keyframes pcf-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	/* Still show progress, just without the rotation. */
	.pcf-spin { animation: none; border-right-color: currentColor; opacity: .45; }
}

/* ---- a fieldset used to group related controls (permissions etc.) ---- */
.pcf-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.pcf-set > legend {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #6b7280;
	border: 0;
}

/* ---- yes/no radio pair, replacing   spacing and transform:scale ---- */
.pcf-choice { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.pcf-choice label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 16px;
	border: 1.5px solid #e5e7eb;
	border-radius: 50px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	color: #4b5563;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pcf-choice label:hover { border-color: #9ca3af; }
/* the whole pill is the hit area, which the old transform:scale(1.5) on the
   radio only pretended to be */
.pcf-choice input[type="radio"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.pcf-choice label:has(input:checked) {
	border-color: var(--oh-accent, #1a2b4a);
	color: var(--oh-accent, #1a2b4a);
	background: rgba(0, 0, 0, .035);
}
.pcf-choice label:focus-within {
	box-shadow: 0 0 0 3px var(--oh-accent-ring, rgba(26, 43, 74, .14));
}

/* ---- password reveal ---- */
.pcf-pw { position: relative; display: block; }
.pcf-pw > input { padding-right: 76px !important; }
.pcf-pw > button {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	height: 30px;
	padding: 0 11px;
	border: 1px solid #e5e7eb;
	border-radius: 50px;
	background: #fff;
	font: inherit;
	font-size: 11.5px;
	font-weight: 700;
	color: #4b5563;
	cursor: pointer;
}
.pcf-pw > button:hover { border-color: #9ca3af; color: #1f2937; }

@media (prefers-reduced-motion: reduce) {
	.pcf-choice label { transition: none; }
}