/**
 * Form display.
 *
 * @since		1.0.0
 * @since       5.7.0     Define a common style for all pNet sites.
 * @since       5.12.0    Simpified and rationalised.
 * @since       6.0.0     Refactor for new UI.
 * @since       6.3.0     Refactor for narrower pages.
 * @package     pNet
 * @copyright   2024 Keith Pfeiffer
 */


/* =============================================================================
# Form layout
*/

.pnet-form-container {
	max-width: var(--pnet-form-width)
}

.pnet-form {
	margin-bottom: var(--pnet-v-space);
}

.pnet-form-container .pnet-form-header {
	margin-bottom: var(--pnet-v-space);
}

.pnet-form-container .pnet-form-header p {
	margin-bottom: var(--pnet-v-half-space);
}

.pnet-form-container .pnet-form-header p:last-child {
	margin-bottom: 0;
}

.pnet-form .pnet-form-row-label {
	padding-top: var(--pnet-v-half-space);
}

.pnet-form>fieldset {
	margin-bottom: var(--pnet-v-space);
}

.pnet-form fieldset legend {
	margin-bottom: var(--pnet-v-space);
}

.pnet-form fieldset legend>* {
	margin-bottom: 0;
}

.pnet-form .pnet-progress-container {
	display: none;
}

div:has(> .grecaptcha-badge) {
	visibility: hidden;
	order: 99;
}

/* =============================================================================
# Input fields
*/

.pnet-form-row>label:has(+ div *[required])::after {
	content: "\00a0\2731";
}

.pnet-form input[type="date"],
.pnet-form input[type="email"],
.pnet-form input[type="number"],
.pnet-form input[type="password"],
.pnet-form input[type="search"],
.pnet-form input[type="tel"],
.pnet-form input[type="text"],
.pnet-form input[type="url"],
.pnet-form select,
.pnet-form textarea {
	background-color: var(--input);
	border: none;
	border-bottom-color: var(--on-surface);
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-radius: var(--pnet-border-radius) var(--pnet-border-radius) 0 0;
	color: var(--on-surface);
	line-height: var(--pnet-v-space);
	padding: var(--pnet-v-half-space) var(--pnet-h-half-space);
	width: 100%;
}

.pnet-form input[type="date"]:is(:hover, :focus),
.pnet-form input[type="email"]:is(:hover, :focus),
.pnet-form input[type="number"]:is(:hover, :focus),
.pnet-form input[type="password"]:is(:hover, :focus),
.pnet-form input[type="search"]:is(:hover, :focus),
.pnet-form input[type="tel"]:is(:hover, :focus),
.pnet-form input[type="text"]:is(:hover, :focus),
.pnet-form input[type="url"]:is(:hover, :focus),
.pnet-form select:is(:hover, :focus),
.pnet-form textarea:is(:hover, :focus) {
	border-bottom-color: var(--primary);
}

.pnet-form .pnet-button-container:has(~ .pnet-input-helper),
.pnet-form input:has(~ .pnet-input-helper),
.pnet-form select:has(~ .pnet-input-helper),
.pnet-form textarea:has(~ .pnet-input-helper) {
	margin-bottom: var(--pnet-v-half-space);
}

.pnet-form input[type="checkbox"],
.pnet-form input[type="radio"] {
	margin-right: var(--pnet-h-half-space);
}

.pnet-form input[type="date"] {
	width: fit-content;
}

.pnet-form textarea {
	resize: vertical;
}

.pnet-form select {
	width: max-content;
}

.pnet-form optgroup {
	font-weight: 500;
}

.pnet-form input[type="file"]::file-selector-button {
	background-color: var(--surface);
	border-radius: var(--pnet-border-radius);
	border: 1px solid var(--on-surface);
	box-shadow: var(--pnet-shadow-elevation-1);
	color: var(--on-surface);
	line-height: var(--pnet-v-space);
	margin-right: var(--pnet-h-space);
	padding: var(--pnet-v-half-space) var(--pnet-h-half-space);
	text-transform: lowercase;
}

.pnet-form input[type="file"]::file-selector-button:is(:hover, :focus) {
	background-color: var(--surface-8);
	box-shadow: var(--pnet-shadow-elevation-8);
}

.pnet-form .pnet-related-input {
	display: block;
}

.pnet-form .pnet-input-small {
	max-width: 6rem;
}

.pnet-form .pnet-input-helper {
	font-size: var(--pnet-text-xs);
	margin-bottom: 0;
}

.pnet-form .pnet-input-helper p:last-child {
	margin-bottom: 0;
}

.pnet-form .pnet-media-selector img {
	display: block;
	margin-bottom: var(--pnet-v-half-space);
}

.pnet-form input:focus-visible,
.pnet-form select:focus-visible,
.pnet-form textarea:focus-visible {
	outline-style: none;
}

.pnet-form input[type="date"]:read-only,
.pnet-form input[type="email"]:read-only,
.pnet-form input[type="number"]:read-only,
.pnet-form input[type="tel"]:read-only,
.pnet-form input[type="text"]:read-only,
.pnet-form input[type="url"]:read-only,
.pnet-form textarea:read-only {
	opacity: var(--pnet-dim);
	pointer-events: none;
}

.pnet-form input[type="date"]:disabled,
.pnet-form input[type="email"]:disabled,
.pnet-form input[type="number"]:disabled,
.pnet-form input[type="tel"]:disabled,
.pnet-form input[type="text"]:disabled,
.pnet-form input[type="url"]:disabled,
.pnet-form input:disabled,
.pnet-form select:disabled,
.pnet-form textarea:disabled {
	opacity: var(--pnet-disabled);
}

/* =============================================================================
# Media queries
*/

@media screen and (max-width: 495px) {
	.pnet-form .pnet-form-row-content {
		flex-basis: 100%;
	}
}