/* Component: form — fields, selects, fieldsets, radio cards (Bulk request, Checkout).
   Selects first (catalogue sort); the rest is filled with those pages. */

.mx-select {
	min-height: var(--mx-touch);
	padding: 0 36px 0 var(--mx-space-3);
	border: 1px solid var(--mx-line-strong);
	border-radius: var(--mx-radius);
	background: var(--mx-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23183A26' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	appearance: none;
	font: inherit; font-size: var(--mx-text-md);
	color: var(--mx-ink);
	cursor: pointer;
}
.mx-select:hover { border-color: var(--mx-leaf); }

.mx-field { display: flex; flex-direction: column; gap: 6px; }
.mx-field__label { padding: 0; font-size: var(--mx-text-md); font-weight: 600; color: var(--mx-ink); }
.mx-buy__packs .mx-field__label { padding-bottom: 10px; }
.mx-field__hint { font-size: var(--mx-text-xs); color: var(--mx-muted); }
.mx-input {
	min-height: var(--mx-control-h);
	padding: 0 14px;
	border: 1px solid var(--mx-field-border);
	border-radius: var(--mx-radius);
	background: var(--mx-white);
	font: inherit; font-size: var(--mx-text-base); color: var(--mx-ink);
}

/* Quantity stepper */
.mx-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--mx-line-strong); border-radius: var(--mx-radius); overflow: hidden; }
.mx-stepper__btn { width: 48px; height: 48px; border: 0; background: var(--mx-sage-soft); color: var(--mx-forest); font-size: 22px; cursor: pointer; }
.mx-stepper__btn:hover { background: var(--mx-sage); }
.mx-stepper__input {
	width: 64px; border: 0; border-inline: 1px solid var(--mx-line-soft);
	text-align: center; font: inherit; font-size: var(--mx-text-lg); font-weight: 600; color: var(--mx-ink);
	-moz-appearance: textfield; appearance: textfield;
}
.mx-stepper__input::-webkit-outer-spin-button, .mx-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Form layout (Bulk request, Checkout) ── */
.mx-select--field { min-height: var(--mx-control-h); width: 100%; border-color: var(--mx-field-border); font-size: var(--mx-text-base); }
.mx-input:focus, .mx-select:focus { outline: var(--mx-focus); outline-offset: 1px; border-color: var(--mx-leaf); }
.mx-textarea { min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.mx-file { font: inherit; font-size: var(--mx-text-md); }
.mx-form { display: flex; flex-direction: column; gap: 44px; }
.mx-form__section { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--mx-space-3); }
.mx-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px var(--mx-space-6); }
.mx-form__full { grid-column: 1 / -1; }
.mx-form__legend { padding: 0 0 18px; font-family: var(--mx-font-display); font-size: var(--mx-h3); font-weight: 500; color: var(--mx-forest); }
.mx-form__grid > .mx-form__legend { grid-column: 1 / -1; padding-bottom: 0; }
.mx-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mx-space-5); padding-top: var(--mx-space-5); border-top: 1px solid var(--mx-line); }
.mx-btn--lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
.mx-btn--dashed { align-self: flex-start; min-height: var(--mx-touch); padding: 0 18px; border: 1.5px dashed var(--mx-leaf); background: var(--mx-white); color: var(--mx-leaf-dark); }
.mx-btn--dashed:hover { background: var(--mx-sage-soft); }

/* Product lines */
.mx-lines { display: flex; flex-direction: column; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); overflow: hidden; }
.mx-lines__head, .mx-line { display: grid; grid-template-columns: minmax(0, 1fr) 160px 230px 44px; gap: var(--mx-space-4); align-items: center; padding: 10px var(--mx-space-4); }
.mx-lines__head { background: var(--mx-sage); font-size: var(--mx-text-md); font-weight: 600; }
.mx-line { border-top: 1px solid var(--mx-line-soft); }
.mx-line .mx-input, .mx-line .mx-select { width: 100%; min-height: var(--mx-touch); }
.mx-line__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mx-line__remove { width: 44px; height: 44px; border: 1px solid var(--mx-line-strong); border-radius: var(--mx-radius); background: var(--mx-white); color: var(--mx-muted); font-size: 18px; cursor: pointer; }
.mx-line__remove:hover { color: var(--mx-forest); border-color: var(--mx-forest); }

/* Radio cards + checkbox grid */
.mx-radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mx-space-3); }
.mx-radio-card {
	display: flex; gap: var(--mx-space-3); align-items: flex-start;
	padding: var(--mx-space-4); border: 1px solid var(--mx-line-strong); border-radius: var(--mx-radius-md);
	background: var(--mx-white); cursor: pointer;
}
.mx-radio-card:has(input:checked) { border: 2px solid var(--mx-forest); background: var(--mx-leaf-tint); padding: 15px; }
.mx-radio-card input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mx-leaf); flex: 0 0 auto; }
.mx-radio-card > span { display: flex; flex-direction: column; gap: var(--mx-space-1); }
.mx-radio-card strong { font-size: var(--mx-text-base); }
.mx-radio-card > span > span { font-size: var(--mx-text-sm); line-height: 1.5; color: var(--mx-ink-soft); }
.mx-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--mx-space-1) var(--mx-space-6); }
.mx-check { display: flex; align-items: center; gap: 10px; min-height: var(--mx-touch); font-size: var(--mx-text-base); cursor: pointer; }
.mx-check input { width: 18px; height: 18px; accent-color: var(--mx-leaf); flex: 0 0 auto; }

/* Alerts + honeypot */
.mx-alert { display: flex; flex-direction: column; gap: var(--mx-space-1); margin-bottom: var(--mx-space-8); padding: var(--mx-space-4) var(--mx-space-5); border-radius: var(--mx-radius-md); }
.mx-alert--success { background: var(--mx-leaf-tint); color: var(--mx-forest); }
.mx-alert__actions { display: flex; flex-wrap: wrap; gap: var(--mx-space-5); margin-top: var(--mx-space-2); font-weight: 600; }
.mx-alert--error { background: var(--mx-warn-bg); color: var(--mx-warn-ink); }
.mx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 760px) {
	.mx-form { gap: var(--mx-space-10); }
	.mx-lines { border: 0; border-radius: 0; gap: var(--mx-space-3); overflow: visible; }
	.mx-lines__head { display: none; }
	.mx-line {
		grid-template-columns: 92px minmax(0, 1fr) 44px;
		grid-template-areas: "prod prod prod" "kg pack remove";
		padding: var(--mx-space-3); gap: 10px;
		border: 1px solid var(--mx-line); border-radius: var(--mx-radius-md);
	}
	.mx-line > :nth-child(1) { grid-area: prod; }
	.mx-line > :nth-child(2) { grid-area: kg; }
	.mx-line > :nth-child(3) { grid-area: pack; }
	.mx-line > :nth-child(4) { grid-area: remove; }
	.mx-line__label { position: static; width: auto; height: auto; clip: auto; display: block; margin-bottom: 4px; font-size: var(--mx-text-xs); color: var(--mx-muted); }
	.mx-line__remove { align-self: end; }
}

/* WooCommerce show-password toggle (its default CSS is off). */
.password-input { position: relative; display: block; }
.password-input input { padding-right: 72px; }
.show-password-input { position: absolute; top: 0; right: 0; height: 100%; min-width: var(--mx-touch); padding: 0 var(--mx-space-3); border: 0; background: none; color: var(--mx-leaf-dark); font-size: var(--mx-text-sm); font-weight: 600; cursor: pointer; }
.show-password-input::after { content: "Show"; }
.show-password-input.display-password::after { content: "Hide"; }