/**
 * MATCHED TO THE CATEGORY SELLER FORM — /sell-your-machines/cnc-machines/
 *
 * 🔴 THIS IS THE SECOND REFERENCE. The first pass matched `#sm-1form` on the
 * sell HUB (/sell-your-machines/), which is theme markup: TRANSPARENT inputs on
 * a WHITE page. Shannon meant the CATEGORY seller pages, which kd-model-pages
 * styles itself and which are the opposite — WHITE boxes on a SHADED PANEL.
 * That inversion is exactly why the forms "still looked like the older
 * version": the boxes had nothing behind them to stand out against.
 *
 * ⛔ The reference is `.kd-sell` in kd-model-pages.php (~line 1869), not
 * anything on /sell-your-machines/. Copied verbatim:
 *
 *   panel    background #f4f6f8, border 1px solid #d8dde2, padding 1.5rem
 *   box      background #fff, border 1px solid #c4ccd3, padding .6rem .7rem,
 *            font-size 1rem, line-height 1.4
 *   focus    outline 2px solid #1f4e79, offset 1px, border-color #1f4e79
 *   error    border-color #9d3f28, background #fdf6f4
 *   textarea min-height 4.5rem, resize vertical
 *
 * 🔴 NO border-radius RULE, DELIBERATELY. kd-model-pages sets none, so those
 * fields inherit the theme's `border-radius: 3px !important`. Forcing 6px here
 * — which the earlier version did — is precisely what made these forms NOT
 * match. ⛔ Do not re-add a radius override; matching means leaving it alone.
 *
 * 🔑 Specificity still has to beat the theme's `body input[type="text"]`
 * (0,1,2) for background and border, hence the doubled class scopes.
 */

.contact-form.contact-form,
#equipmentLocatorForm,
#makeOfferForm,
.activate-prices-form.activate-prices-form,
.init-activate-pricing.init-activate-pricing {
	background: #f4f6f8;
	border: 1px solid #d8dde2;
	padding: 1.5rem;
}

.contact-form.contact-form input[type="text"],
.contact-form.contact-form input[type="email"],
.contact-form.contact-form input[type="tel"],
.contact-form.contact-form input[type="number"],
.contact-form.contact-form select,
.contact-form.contact-form textarea,
#equipmentLocatorForm input[type="text"],
#equipmentLocatorForm input[type="email"],
#equipmentLocatorForm input[type="tel"],
#equipmentLocatorForm input[type="number"],
#equipmentLocatorForm select,
#equipmentLocatorForm textarea,
#makeOfferForm input[type="text"],
#makeOfferForm input[type="email"],
#makeOfferForm input[type="tel"],
#makeOfferForm input[type="number"],
#makeOfferForm select,
#makeOfferForm textarea,
.activate-prices-form.activate-prices-form input[type="text"],
.activate-prices-form.activate-prices-form input[type="email"],
.activate-prices-form.activate-prices-form input[type="tel"],
.activate-prices-form.activate-prices-form input[type="number"],
.activate-prices-form.activate-prices-form select,
.activate-prices-form.activate-prices-form textarea,
.init-activate-pricing.init-activate-pricing input[type="text"],
.init-activate-pricing.init-activate-pricing input[type="email"],
.init-activate-pricing.init-activate-pricing input[type="tel"],
.init-activate-pricing.init-activate-pricing input[type="number"],
.init-activate-pricing.init-activate-pricing select,
.init-activate-pricing.init-activate-pricing textarea {
	box-sizing: border-box;
	width: 100%;
	background-color: #fff;
	border: 1px solid #c4ccd3;
	padding: .6rem .7rem;
	font-size: 1rem;
	line-height: 1.4;
}

.contact-form.contact-form input[type="text"]:focus,
.contact-form.contact-form input[type="email"]:focus,
.contact-form.contact-form input[type="tel"]:focus,
.contact-form.contact-form input[type="number"]:focus,
.contact-form.contact-form select:focus,
.contact-form.contact-form textarea:focus,
#equipmentLocatorForm input[type="text"]:focus,
#equipmentLocatorForm input[type="email"]:focus,
#equipmentLocatorForm input[type="tel"]:focus,
#equipmentLocatorForm input[type="number"]:focus,
#equipmentLocatorForm select:focus,
#equipmentLocatorForm textarea:focus,
#makeOfferForm input[type="text"]:focus,
#makeOfferForm input[type="email"]:focus,
#makeOfferForm input[type="tel"]:focus,
#makeOfferForm input[type="number"]:focus,
#makeOfferForm select:focus,
#makeOfferForm textarea:focus,
.activate-prices-form.activate-prices-form input[type="text"]:focus,
.activate-prices-form.activate-prices-form input[type="email"]:focus,
.activate-prices-form.activate-prices-form input[type="tel"]:focus,
.activate-prices-form.activate-prices-form input[type="number"]:focus,
.activate-prices-form.activate-prices-form select:focus,
.activate-prices-form.activate-prices-form textarea:focus,
.init-activate-pricing.init-activate-pricing input[type="text"]:focus,
.init-activate-pricing.init-activate-pricing input[type="email"]:focus,
.init-activate-pricing.init-activate-pricing input[type="tel"]:focus,
.init-activate-pricing.init-activate-pricing input[type="number"]:focus,
.init-activate-pricing.init-activate-pricing select:focus,
.init-activate-pricing.init-activate-pricing textarea:focus {
	outline: 2px solid #1f4e79;
	outline-offset: 1px;
	border-color: #1f4e79;
}

.contact-form.contact-form textarea,
#equipmentLocatorForm textarea,
#makeOfferForm textarea,
.activate-prices-form.activate-prices-form textarea,
.init-activate-pricing.init-activate-pricing textarea {
	resize: vertical;
	min-height: 4.5rem;
}

/* The theme adds .field-error to anything its handler rejected. */
.contact-form.contact-form .field-error,
#equipmentLocatorForm .field-error,
#makeOfferForm .field-error,
.activate-prices-form.activate-prices-form .field-error,
.init-activate-pricing.init-activate-pricing .field-error {
	border-color: #9d3f28;
	background-color: #fdf6f4;
}

/* The seller form's button: .85rem 1.75rem, 1rem/600. ⛔ radius left to the
   theme (10px), exactly as on the seller pages. */
.contact-form.contact-form .submit-button,
.contact-form.contact-form button[type="submit"],
#equipmentLocatorForm .submit-button,
#equipmentLocatorForm button[type="submit"],
#makeOfferForm .submit-button,
#makeOfferForm button[type="submit"],
.activate-prices-form.activate-prices-form .submit-button,
.activate-prices-form.activate-prices-form button[type="submit"],
.init-activate-pricing.init-activate-pricing .submit-button,
.init-activate-pricing.init-activate-pricing button[type="submit"] {
	padding: .85rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
}


/* =====================================================================
 * CONTACT US — widened and paired (unchanged by the restyle)
 * =====================================================================
 * ⚠️ `.limit-box` is a GENERIC theme class capping this form at 585px. CSS
 * cannot select a parent, so this reaches up through `.contact-block
 * .form-holder`, which exists only on the contacts page. check-forms.php has a
 * single documented allowance for it.
 */
.contact-block .form-holder .limit-box {
	max-width: none;
}

/*
 * 🔑 `:has()` pairs the four short fields; its fallback is today's single
 * column, because everything defaults to `grid-column: 1 / -1`.
 * ⛔ Never do this by moving nodes — the theme submits FormData over the whole
 * form and validates by `name`.
 */
.contact-form.contact-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1rem;
	row-gap: 0;
	align-items: start;
}

.contact-form.contact-form > * {
	grid-column: 1 / -1;
}

/* The theme's rows are bootstrap: display:flex with a -12px gutter that would
   push them out of their grid cell. */
.contact-form.contact-form > .row {
	margin: 0 0 1rem;
}

.contact-form.contact-form > .row > .col-12 {
	flex: 0 0 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.contact-form.contact-form > .row:has([name="first_name"]),
.contact-form.contact-form > .row:has([name="last_name"]),
.contact-form.contact-form > .row:has([name="email"]),
.contact-form.contact-form > .row:has([name="company"]) {
	grid-column: auto;
}

@media (max-width: 640px) {
	.contact-form.contact-form {
		grid-template-columns: minmax(0, 1fr);
	}
}


/*
 * 🔴 SELECTS: `background-color`, NEVER the `background` SHORTHAND.
 *
 * The theme draws the dropdown caret as a BACKGROUND IMAGE on `select`:
 *     select { background: url("../img/icons/select-arrow.png") ...;
 *              padding-right: 40px }
 * so `background: #fff` — the shorthand — resets background-image to none and
 * the caret vanishes. Country then reads as a plain text box, which is exactly
 * what happened: "make country look like a dropdown".
 *
 * ⛔ Two rules follow and both are load-bearing:
 *   1. use `background-color`, so the theme's caret image survives;
 *   2. keep the theme's 40px right padding, or the longest country name runs
 *      underneath the caret.
 *
 * 🔑 kd-model-pages styles NO selects at all — its seller form has none — so
 * "match the seller form" says nothing about selects. Matching the theme is
 * the right answer for them.
 */
.contact-form.contact-form select,
#equipmentLocatorForm select,
#makeOfferForm select,
.activate-prices-form.activate-prices-form select,
.init-activate-pricing.init-activate-pricing select {
	padding-right: 40px;
}

/*
 * LABELS ABOVE THE BOX — the last difference from the category seller form.
 *
 * Copied from `.kd-sell .kd-sell__field label` in kd-model-pages.php:
 *   font-weight 600; font-size .92rem; margin-bottom .3rem
 *
 * 🔑 `display: block` matters. The theme's forms are not flex columns like the
 * seller form's, so an inline label would sit beside the box instead of above
 * it — which is the entire request.
 */
.kd-forms-label {
	display: block;
	margin: 0 0 .3rem;
	font-weight: 600;
	font-size: .92rem;
	line-height: 1.3;
	color: #1d2429;
}