/* P&H Order Forms: kept light so your theme's fonts, colors and buttons carry through. */
.phof-form {
	width: 100%;
	flex: 0 0 100%;
	clear: both;
	margin: 1.5em 0;
}
.phof-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1em 4%;
}
/* Some themes lay the add to cart form out in a single row; let the order form sit on its own line. */
form.cart:has(.phof-form),
.woocommerce-variation-add-to-cart:has(.phof-form) {
	flex-wrap: wrap;
}
.phof-field {
	flex: 0 0 100%;
	min-width: 0;
}
.phof-field.phof-width-half {
	flex-basis: 48%;
}
.phof-field[hidden] {
	display: none !important;
}
.phof-section-title {
	margin: 0.6em 0 0.2em;
}
.phof-form .phof-label {
	display: block;
	font-size: 20px;
	line-height: 1.35;
	font-weight: 300;
	margin-bottom: 0.35em;
	padding: 0;
}
.phof-field fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.phof-form .phof-field input[type="text"],
.phof-form .phof-field input[type="email"],
.phof-form .phof-field input[type="tel"],
.phof-form .phof-field input[type="number"],
.phof-form .phof-field input[type="date"],
.phof-form .phof-field select,
.phof-form .phof-field textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	border-radius: 5px;
}
/* First / Last name side by side */
.phof-name-parts {
	display: flex;
	gap: 4%;
}
.phof-name-part {
	flex: 1 1 48%;
	min-width: 0;
}
.phof-form .phof-sublabel {
	display: block;
	font-size: 0.85em;
	font-weight: 300;
	opacity: 0.75;
	margin-top: 0.25em;
}
.phof-choice {
	display: block;
	margin: 0.25em 0;
	font-weight: normal;
	cursor: pointer;
}
/* Choice text (Yes / No, paper options...) and the date box text: light, 20px. */
form.cart .phof-form .phof-field label.phof-choice,
.phof-form .phof-field label.phof-choice {
	font-size: 20px;
	font-weight: 300;
	line-height: 1.4;
}
form.cart .phof-form .phof-field input[type="date"],
.phof-form .phof-field input[type="date"] {
	font-family: inherit;
	font-size: 20px;
	font-weight: 300;
}
.phof-description,
.phof-hint {
	display: block;
	font-size: 0.9em;
	opacity: 0.8;
	margin: 0.15em 0 0.4em;
}
.phof-description p:last-child {
	margin-bottom: 0;
}
.phof-hint {
	margin-top: 0.35em;
}
.phof-price {
	opacity: 0.75;
	white-space: nowrap;
}
.phof-summary {
	flex: 0 0 100%;
	margin: 0;
	font-weight: 600;
}
.phof-incomplete {
	flex: 0 0 100%;
	margin: 0;
	font-size: 0.9em;
	opacity: 0.8;
}
.single_add_to_cart_button.phof-locked,
.single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.phof-form abbr.required {
	text-decoration: none;
	border: 0;
	color: #c62828;
	font-weight: 400;
}

/* Popup mode */
/* Keep button text on one line, even when the theme adds hover padding or an arrow icon. */
.phof-form .phof-open,
.phof-form .phof-dialog .phof-done {
	white-space: nowrap;
}
.phof-form .phof-open {
	display: inline-block;
	float: none;
	width: auto;
	margin: 0;
}
.phof-form .phof-status {
	display: block;
	float: none;
	clear: both;
	width: 100%;
	margin: 0.6em 0 0;
	font-size: 0.9em;
	opacity: 0.8;
}
.phof-status.is-complete {
	opacity: 1;
}
.phof-dialog {
	box-sizing: border-box;
	width: min(1100px, 90vw);
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	font: inherit;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	overflow: auto;
}
.phof-dialog::backdrop {
	background: rgba(0, 0, 0, 0.45);
}
html.phof-modal-open {
	overflow: hidden;
}
.phof-dialog-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 1.5em;
	background: inherit;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.phof-dialog-title {
	margin: 0;
	font-size: 1.3em;
	line-height: 1.25;
}
.phof-close {
	flex: none;
	background: none;
	border: 0;
	padding: 0 0.2em;
	font-size: 1.8em;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	opacity: 0.6;
}
.phof-close:hover,
.phof-close:focus-visible {
	opacity: 1;
}
.phof-dialog .phof-fields {
	padding: 1.25em 1.5em;
}
.phof-form .phof-dialog .phof-done {
	float: none;
	margin: 0;
	width: auto;
}
.phof-dialog-actions {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	padding: 1em 1.5em;
	background: inherit;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.phof-dialog-fallback {
	position: static;
	width: 100%;
	max-height: none;
	box-shadow: none;
	margin: 1em 0 0;
}
.phof-dialog-fallback .phof-close,
.phof-dialog-fallback .phof-dialog-actions {
	display: none;
}

@media (max-width: 600px) {
	.phof-field.phof-width-half {
		flex-basis: 100%;
	}
	.phof-dialog {
		width: 100vw;
		max-width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		border-radius: 0;
	}
}

/* Forms on a page ([ph_form] shortcode, e.g. contact) */
.phof-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.phof-standalone .phof-form {
	margin-top: 0;
}
.phof-submit-row {
	margin: 1.5em 0 0;
}
.phof-standalone .phof-submit {
	float: none;
	white-space: nowrap;
}
.phof-success,
.phof-errors {
	padding: 1em 1.25em;
	border-radius: 5px;
	margin: 0 0 1.5em;
}
.phof-success {
	background: rgba(46, 125, 50, 0.08);
	border: 1px solid rgba(46, 125, 50, 0.35);
}
.phof-success p:last-child {
	margin-bottom: 0;
}
.phof-errors {
	background: rgba(198, 40, 40, 0.06);
	border: 1px solid rgba(198, 40, 40, 0.35);
}
.phof-errors ul {
	margin: 0;
	padding-left: 1.2em;
}

/* Multi-step forms (Page break field) */
.phof-type-page,
.phof-form .phof-off-page {
	display: none !important;
}
.phof-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.75em;
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
}
.phof-dialog .phof-steps {
	margin: 0;
	padding: 1em 1.5em 0;
}
.phof-steps li {
	margin: 0;
	padding: 0;
}
.phof-steps button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: none;
	border: 0;
	padding: 0 0 0.35em;
	font: inherit;
	font-size: 17px;
	font-weight: 300;
	color: inherit;
	opacity: 0.5;
	cursor: default;
	border-bottom: 2px solid transparent;
}
.phof-steps .is-current button {
	opacity: 1;
	border-bottom-color: currentColor;
}
.phof-steps .is-done button {
	opacity: 0.75;
	cursor: pointer;
}
.phof-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 0.8em;
}
.phof-form .phof-step-heading {
	display: none;
}
.phof-pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1em;
	margin: 1.5em 0 0;
}
.phof-form .phof-back {
	margin-right: auto;
	background: none;
	border: 0;
	padding: 0.5em 0;
	font: inherit;
	font-size: 18px;
	font-weight: 300;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.phof-form .phof-next {
	float: none;
	margin: 0;
	white-space: nowrap;
}
.phof-dialog-actions .phof-back {
	margin-right: auto;
}
.phof-dialog-actions {
	align-items: center;
	gap: 1em;
}
/* Theme button styles must not un-hide buttons the form is hiding. */
.phof-form [hidden],
.phof-standalone .phof-submit-row[hidden] {
	display: none !important;
}