/*
 * Internal Group Sales Order Completed form styling. Depends on
 * hsi-portal-shell.css for design tokens (see wp_register_style() deps in
 * class-hsi-portal-order-form-render.php) — every color/spacing value below
 * references a --hsi-* custom property instead of a hardcoded hex.
 *
 * Layout: .hsi-order-form__form is a vertical flex stack of fields/fieldsets/
 * rows, in call-flow order — every direct child is full width by default, so
 * only the deliberate multi-column groupings (.hsi-form-row--2/--3/--address,
 * from hsi-portal-shell.css) need an explicit wrapper.
 */

.hsi-order-form {
	max-width: var(--hsi-form-max);
	margin: 0 auto;
}

.hsi-order-form__title {
	margin: 0 0 var(--hsi-space-4);
}

.hsi-order-form__banner {
	padding: var(--hsi-space-3) var(--hsi-space-4);
	margin-bottom: var(--hsi-space-4);
	border-radius: var(--hsi-radius);
	border: 1px solid transparent;
}

.hsi-order-form__banner--success {
	background: var(--hsi-blue-tint);
	border-color: var(--hsi-blue);
	color: #0c2e4e;
}

.hsi-order-form__banner--error {
	background: var(--hsi-red-tint);
	border-color: var(--hsi-red);
	color: #611a15;
}

.hsi-order-form__banner ul {
	margin: 0.5em 0 0;
	padding-left: 1.25em;
}

.hsi-order-form__api-error {
	font-family: monospace;
	white-space: pre-wrap;
	word-break: break-word;
}

.hsi-order-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--hsi-space-4);
	width: 100%;
}

.hsi-order-form__field {
	margin-bottom: 0;
	min-width: 0;
}

.hsi-order-form__field label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--hsi-space-1);
}

.hsi-order-form__field input[type='text'],
.hsi-order-form__field input[type='email'],
.hsi-order-form__field input[type='number'],
.hsi-order-form__field input[type='date'],
.hsi-order-form__field select,
.hsi-order-form__field textarea {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 720px) {
	.hsi-form-row--2,
	.hsi-form-row--3,
	.hsi-form-row--address {
		gap: var(--hsi-space-4) 0;
	}
}

.hsi-order-form__field--radio {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
}

.hsi-order-form__field--radio legend {
	font-weight: 600;
	padding: 0;
	margin-bottom: var(--hsi-space-1);
	font-size:1.5em;
}

.hsi-order-form__radio-option {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: normal;
	margin-right: var(--hsi-space-6);
}

/* Mode toggle (Inquiry/Order) — segmented control, doesn't stretch full
   width like the other fieldsets. */
[data-hsi-order-mode-toggle] {
	display: inline-flex;
	align-self: flex-start;
	border: 1px solid var(--hsi-blue);
	border-radius: var(--hsi-radius);
	overflow: hidden;
	width: auto;
}

[data-hsi-order-mode-toggle] legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

[data-hsi-order-mode-toggle] .hsi-order-form__radio-option {
	margin: 0;
	padding: var(--hsi-space-2) var(--hsi-space-4);
	font-weight: 600;
	cursor: pointer;
	color: var(--hsi-navy);
}

[data-hsi-order-mode-toggle] .hsi-order-form__radio-option + .hsi-order-form__radio-option {
	border-left: 1px solid var(--hsi-blue);
}

[data-hsi-order-mode-toggle] .hsi-order-form__radio-option:has(input:checked) {
	background: var(--hsi-navy);
	color: var(--hsi-white);
}

/* "Same as company address" shortcut option — assist treatment, applied to
   just that radio option (not the whole fieldset) via the value attribute
   already on the input. */
[data-hsi-order-training-source-group] .hsi-order-form__radio-option:has(input[value='same_as_company']),
[data-hsi-order-shipping-source-group] .hsi-order-form__radio-option:has(input[value='same_as_company']) {
	background: var(--hsi-blue-tint);
	border-left: 3px solid var(--hsi-blue);
	border-radius: 0 var(--hsi-radius) var(--hsi-radius) 0;
	padding: var(--hsi-space-2) var(--hsi-space-3);
	margin-right: var(--hsi-space-3);
}

.hsi-order-form__field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: normal;
}

.hsi-order-form__required {
	color: var(--hsi-red);
}

.hsi-order-form__hint {
	margin: 0;
	/* Client-specified (2026-08-06): field text and notes uniform at 1em. */
	font-size: 1em;
	font-weight: normal;
}

.hsi-order-form__instruction {
	margin: 0;
	font-size: 0.85em;
	font-weight: normal;
	font-style: italic;
	color: #555;
}

.hsi-order-form__hint--found {
	color: #0c2e4e;
}

.hsi-order-form__hint--not-found {
	color: #555;
}

.hsi-order-form__hint--error {
	color: var(--hsi-red);
}

.hsi-order-form__field--submit {
	margin-top: var(--hsi-space-2);
}

.hsi-order-form__field--submit button {
	align-self: flex-start;
	padding: 10px 24px;
	border-radius: var(--hsi-radius);
	border: 1px solid var(--hsi-navy);
	background: var(--hsi-navy);
	color: var(--hsi-white);
	font-weight: 600;
	cursor: pointer;
}

.hsi-order-form__field--submit button:hover {
	background: #10126b;
	border-color: #10126b;
}

/* Email-switch warning (client request 2026-09-23): shown when the contact
   email is changed over a part-filled form — the rep must explicitly clear
   the form for the new contact or restore the prior email and submit that
   work first. Red border reads as stop-and-decide; the Yes (clear) button
   carries the shared .hsi-btn--danger red, No the standard navy. */
.hsi-order-form__email-switch-warning {
	margin-top: 12px;
	padding: 14px 16px;
	border: 2px solid var(--hsi-red);
	border-radius: var(--hsi-radius);
	background: #fdf2f2;
}

.hsi-order-form__email-switch-warning p {
	margin: 0 0 12px;
	text-align: left;
}

.hsi-order-form__email-switch-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}