.xtool-form__hp-wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.xtool-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.xtool-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
}

/* A field's own Width is now a general, gap-aware inline calc() computed
   in PHP (Form::field_width_style()) rather than a fixed CSS class per
   percentage — see that method's own comment for the formula and why.
   The mobile collapse below needs !important specifically because an
   inline style otherwise always wins over a plain external stylesheet
   rule regardless of specificity — every field (any configured Width)
   still correctly stacks to full width under 600px. */
@media (max-width: 600px) {
	.xtool-form__field {
		width: 100% !important;
	}
}

.xtool-form__label {
	font-size: 13px;
	font-weight: 600;
}

.xtool-form__label--sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.xtool-form__req {
	color: #c0392b;
}

.xtool-form__control {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #e5e0d8;
	border-radius: 8px;
	background: #fff;
	color: #1a1814;
	transition: border-color 0.15s ease;
}

.xtool-form__control:focus {
	outline: none;
	border-color: #1c1c1e;
}

.xtool-form__control::placeholder {
	color: #8a8680;
}

textarea.xtool-form__control {
	resize: vertical;
}

.xtool-form__control-wrap {
	position: relative;
}

.xtool-form__field-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	font-size: 15px;
	color: #8a8680;
	pointer-events: none;
}

.xtool-form__field-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.xtool-form__control-wrap.has-icon .xtool-form__control {
	padding-left: calc(var(--xtool-form-icon-size, 15px) + 26px);
}

.xtool-form__control-wrap--textarea .xtool-form__field-icon {
	top: 14px;
	transform: none;
}

.xtool-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.xtool-form__choice {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 400;
	cursor: pointer;
}

/* The "Other, please specify" text box (see the `other_option_text`
   control and form.js's own show/hide-on-select wiring) is rendered as a
   plain SIBLING right after its option's own <label> inside
   .xtool-form__choices — flex-basis:100% forces it onto its own full-
   width line in the default flex-wrap layout rather than sitting inline
   next to the next checkbox option; grid-column:1/-1 does the equivalent
   for the fixed-column grid layout (.xtool-form__choices--cols-N). */
.xtool-form__other-input {
	/* .xtool-form__control (already on this same element) already sets
	   width:100% + box-sizing:border-box — this only adds what's new:
	   forcing the box onto its own full-width line instead of sitting
	   at a fixed/capped width or inline next to the next option. */
	flex-basis: 100%;
	grid-column: 1 / -1;
	margin-top: -2px;
}

/* "Auto (Flow)" (the default — no modifier class at all) stays the
   original flex-wrap layout above, completely unchanged for every
   Checkbox field already configured before this existed. A fixed column
   count switches to a real grid instead, so every option lines up evenly
   regardless of how long its own label text happens to be — a flex-wrap
   layout can't guarantee that alignment on its own. */
.xtool-form__choices--cols-1,
.xtool-form__choices--cols-2,
.xtool-form__choices--cols-3 {
	display: grid;
	gap: 10px 20px;
}

.xtool-form__choices--cols-1 { grid-template-columns: 1fr; }
.xtool-form__choices--cols-2 { grid-template-columns: repeat(2, 1fr); }
.xtool-form__choices--cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 600px) {
	.xtool-form__choices--cols-2,
	.xtool-form__choices--cols-3 {
		grid-template-columns: 1fr;
	}
}

.xtool-form__title-block {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #1a1814;
	border-top: 1px solid #e5e0d8;
	padding-top: 16px;
}

/* .xtool-form__field is always a direct child of .xtool-form__row (one
   shared row for the whole form normally, or one row PER STEP in a
   Multi-Step form — see class-form.php) — the child combinator + :first-
   child here means "the first field of THIS row/step", which correctly
   drops the redundant divider at the very top of a plain form, and (a
   nice side effect, not just a compromise) also at the top of each
   step's own visible content in a Multi-Step form, without needing to
   know anything about which step is currently active. */
.xtool-form__row > .xtool-form__field:first-child .xtool-form__title-block {
	border-top: none;
	padding-top: 0;
}

.xtool-form__note-block {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #8a8680;
}

.xtool-form__html-block {
	font-size: 14px;
	line-height: 1.6;
	color: #1a1814;
}

.xtool-form__html-block img {
	max-width: 100%;
	height: auto;
}

.xtool-form__cart-block {
	width: 100%;
}

.xtool-form__cart-heading {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #1a1814;
}

.xtool-form__cart-empty {
	margin: 0;
	font-size: 14px;
	color: #8a8680;
}

.xtool-form__cart-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xtool-form__cart-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #e5e0d8;
}

.xtool-form__cart-item:last-child {
	border-bottom: none;
}

.xtool-form__cart-item-thumb {
	flex: 0 0 auto;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
}

.xtool-form__cart-item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.xtool-form__cart-item-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.xtool-form__cart-item-name {
	font-size: 14px;
	font-weight: 600;
	color: #1a1814;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xtool-form__cart-item-variation {
	font-size: 12px;
	color: #8a8680;
}

/* Reuses the exact "hide dt, show dd inline with a comma separator"
   technique already proven on the Cart widget's own variation restyle
   (wc-cart.css) — same real WooCommerce dl.variation markup, kept
   consistent between both widgets. */
.xtool-form__cart-item-variation dl.variation {
	margin: 0;
}

.xtool-form__cart-item-variation dl.variation dt {
	display: none;
}

.xtool-form__cart-item-variation dl.variation dd {
	margin: 0;
	display: inline;
}

.xtool-form__cart-item-variation dl.variation dd p {
	margin: 0;
	display: inline;
}

.xtool-form__cart-item-variation dl.variation dd:not(:last-child)::after {
	content: ", ";
}

.xtool-form__cart-item-qty {
	flex: 0 0 auto;
	font-size: 13px;
	white-space: nowrap;
	color: #4a4742;
}

.xtool-form__cart-item-price {
	flex: 0 0 auto;
	min-width: 70px;
	text-align: right;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: #4a4742;
}

.xtool-form__cart-subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e5e0d8;
}

.xtool-form__cart-subtotal-label {
	font-size: 14px;
	font-weight: 600;
	color: #1a1814;
}

.xtool-form__cart-subtotal-value {
	font-size: 16px;
	font-weight: 700;
	color: #1a1814;
}

@media (max-width: 480px) {
	.xtool-form__cart-item {
		flex-wrap: wrap;
	}

	.xtool-form__cart-item-price {
		text-align: left;
	}
}

.xtool-form__html-block > *:first-child {
	margin-top: 0;
}

.xtool-form__html-block > *:last-child {
	margin-bottom: 0;
}

.xtool-form__field.is-invalid .xtool-form__control {
	border-color: #c0392b;
}

.xtool-form__error {
	display: none;
	font-size: 12px;
	color: #c0392b;
}

/* .xtool-form__control is reused on purpose (not just a lookalike class) —
   it's already the target of this widget's own Style-tab controls (border
   color/width/radius, padding, background), so the signature pad's box
   automatically matches every other field's look, including the existing
   .xtool-form__field.is-invalid .xtool-form__control red-border rule on a
   failed "required" check, with no new Style controls needed. */
.xtool-form__signature-wrap {
	position: relative;
	padding: 0 !important;
	overflow: hidden;
}

.xtool-form__signature-pad {
	display: block;
	width: 100%;
	height: 150px;
	cursor: crosshair;
	touch-action: none;
	/* touch-action:none alone stops the PAGE from scrolling during a
	   stroke, but iOS Safari specifically has its own separate long-
	   press/selection gesture recognizer that can still "steal" a touch
	   before touchmove ever reaches our JS handlers — reported live as
	   "can't sign at all on phone/iPad" (not reproducible via Chrome's
	   own touch emulation, which doesn't simulate this iOS-specific
	   behavior — confirmed the base draw/touch mechanism itself works
	   correctly under Chrome-emulated touch events before looking here).
	   -webkit-user-select/-webkit-touch-callout:none is the standard,
	   widely-documented fix every canvas-signature-pad library sets for
	   exactly this. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* Purely a CSS background-image on the canvas ELEMENT — canvas.
   toDataURL() (what actually produces the submitted signature value)
   only ever reads the canvas's own internal pixel buffer, never the
   element's CSS styling, so none of these patterns can ever leak into
   the saved image regardless of which one is picked. All 3 are drawn
   with plain repeating gradients — no image asset, consistent with this
   codebase's general preference for dependency-free rendering. */
.xtool-form__signature-pad--lines {
	background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, #E5E0D8 28px);
}

.xtool-form__signature-pad--dots {
	background-image: radial-gradient(#D4CEC7 1px, transparent 1.6px);
	background-size: 16px 16px;
}

.xtool-form__signature-pad--grid {
	background-image: linear-gradient(to right, #E5E0D8 1px, transparent 1px), linear-gradient(to bottom, #E5E0D8 1px, transparent 1px);
	background-size: 20px 20px;
}

/* A small floating "pill" toolbar (its own soft shadow + rounded
   capsule background) rather than 3 separate bordered boxes — reads as
   one deliberate, cohesive control instead of 3 loose buttons sitting
   directly on the canvas. */
.xtool-form__signature-tools {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	gap: 1px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid #E5E0D8;
	border-radius: 999px;
	padding: 3px;
	box-shadow: 0 2px 8px rgba(26, 24, 20, 0.08);
}

.xtool-form__signature-divider {
	display: block;
	width: 1px;
	height: 16px;
	margin: 0 2px;
	background: #E5E0D8;
	flex-shrink: 0;
}

/* Reported live as rendering pink/tinted instead of the plain gray/
   white it's actually coded as — almost certainly the same "a theme's
   own generic button reset bleeds through an unhardened plain <button>"
   conflict already found and fixed this same way for several other
   small icon buttons across this codebase (Video widget's Lightbox
   close/mute buttons, Fullscreen Menu's own trigger button) — hardened
   every layout-critical property here too, across every interactive
   state, rather than just the resting one. Circular + a quick hover/
   press animation reads as a deliberately designed icon button rather
   than a bare default <button>. */
.xtool-form__signature-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 50% !important;
	color: #1a1814 !important;
	cursor: pointer;
	outline: none !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.xtool-form__signature-btn,
.xtool-form__signature-btn:focus,
.xtool-form__signature-btn:active,
.xtool-form__signature-btn:visited {
	background: transparent !important;
	color: #1a1814 !important;
}

.xtool-form__signature-btn:hover {
	background: #F2EDE7 !important;
	transform: translateY(-1px);
}

.xtool-form__signature-btn:active {
	transform: translateY(0) scale(0.92);
}

.xtool-form__signature-btn:focus-visible {
	outline: 2px solid #1C1C1E !important;
	outline-offset: 2px;
}

.xtool-form__signature-btn--danger:hover {
	background: rgba(192, 57, 43, 0.1) !important;
	color: #c0392b !important;
}

.xtool-form__signature-btn svg {
	display: block;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	pointer-events: none;
}

.xtool-form__signature-btn[disabled] {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.xtool-form__field.is-invalid .xtool-form__error {
	display: block;
}

.xtool-form__progress {
	height: 6px;
	border-radius: 4px;
	background: #F2EDE7;
	overflow: hidden;
	margin-bottom: 20px;
}

.xtool-form__progress-bar {
	height: 100%;
	background: #1c1c1e;
	transition: width 0.25s ease;
}

.xtool-form__step {
	display: none;
}

.xtool-form__step.is-active {
	display: block;
}

.xtool-form__step-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

.xtool-form__step-prev {
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 600;
	color: #4A4742;
	cursor: pointer;
	margin-right: auto;
	padding: 12px 4px;
}

.xtool-form__step-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: 8px;
	background: #1c1c1e;
	color: #fff;
	cursor: pointer;
}

.xtool-form--multistep .xtool-form__submit {
	display: none;
}

.xtool-form--multistep.is-last-step .xtool-form__submit {
	display: inline-flex;
}

/* Wraps the button whenever it sits on its OWN row below the fields
   (i.e. always, except Inline layout) — a plain flex container so
   Left/Center/Right/Justify just becomes justify-content, with no size
   or spacing of its own (the button's own margin-top below still creates
   all the visible spacing above it, exactly as before this wrap
   existed — the wrap itself collapses to 0 height when the button
   inside it is display:none on a non-last Multi-Step step, so it never
   leaves a stray gap there either). Left (flex-start) is the default,
   which looks IDENTICAL to no wrapper at all — the button's own natural
   inline-flex position — so every existing form's appearance is
   unchanged unless Alignment is actually touched. */
.xtool-form__submit-wrap {
	display: flex;
}

.xtool-form__submit-wrap--left { justify-content: flex-start; }
.xtool-form__submit-wrap--center { justify-content: center; }
.xtool-form__submit-wrap--right { justify-content: flex-end; }
.xtool-form__submit-wrap--stretch .xtool-form__submit { width: 100%; }

/* Inline layout — the button becomes just another column in the same
   .xtool-form__row as the real fields (its own column width comes from
   the exact same Form::field_width_style() inline calc() every other
   field column uses, so it automatically gets the same Gap-aware sizing
   and the same <600px "collapse to full width" rule, with no extra CSS
   needed here for either). !important on width/margin-top is deliberate: it must
   always win over whatever the (now superseded, hidden-in-the-panel-
   while-Inline-is-on) "Width" control's own generated CSS says, so the
   button reliably fills its column rather than floating at some
   arbitrary auto-width inside it. justify-content:flex-end bottom-aligns
   the button against the neighboring fields' own input boxes — with no
   label above it, top-alignment (the flex/column default) would instead
   line the button up with THEIR labels, not their inputs. */
.xtool-form__field--submit-inline {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.xtool-form__field--submit-inline .xtool-form__submit {
	margin-top: 0 !important;
	width: 100% !important;
}

.xtool-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	padding: 12px 26px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: 8px;
	background: #1c1c1e;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.xtool-form__submit[disabled] {
	opacity: 0.7;
	cursor: default;
}

.xtool-form__submit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 16px;
	flex-shrink: 0;
}

.xtool-form__submit-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.xtool-form__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: xtool-form-spin 0.6s linear infinite;
}

.xtool-form.is-submitting .xtool-form__spinner {
	display: inline-block;
}

@keyframes xtool-form-spin {
	to {
		transform: rotate(360deg);
	}
}

.xtool-form__message {
	display: none;
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13.5px;
}

.xtool-form__message.is-visible {
	display: block;
}

.xtool-form__message.is-success {
	background: #e8f5e9;
	color: #256029;
}

.xtool-form__message.is-error {
	background: #fdecea;
	color: #a13a2f;
}

/* "Show Submitted Info (No Page Reload)" - a clean read-only recap of
   what was just submitted, injected by form.js right into this same
   widget once the AJAX submit succeeds. Hidden until .is-visible is
   added; every property below has a real, sensible default so the
   block still looks correct before any of the matching Style-tab
   controls (Style: Submitted Summary) are ever touched. */
.xtool-form__summary {
	display: none;
	margin-top: 16px;
	padding: 20px 22px;
	background: #F9F6F1;
	border: 1px solid #E5E0D8;
	border-radius: 12px;
}

.xtool-form__summary.is-visible {
	display: block;
}

.xtool-form__summary-title {
	font-size: 15px;
	font-weight: 700;
	color: #1A1814;
	margin-bottom: 12px;
}

.xtool-form__summary-row {
	padding: 10px 0;
	border-bottom: 1px solid #E5E0D8;
}

.xtool-form__summary-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.xtool-form__summary-label {
	font-size: 11px;
	font-weight: 600;
	color: #8A8680;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-bottom: 4px;
}

.xtool-form__summary-value {
	font-size: 14px;
	color: #1A1814;
	line-height: 1.5;
	word-break: break-word;
}

.xtool-form__summary-value img {
	max-width: 100%;
}