/*!
 * Mavrik guided quote form (2026-10-26) — styling for the Contact Form 7 quote form's guided fields.
 * Loaded only on pages that render a Contact Form 7 form. Everything is scoped under .mvk-guided.
 *
 * The Customizer's Additional CSS has `.wpcf7 label { color:#fff; width:100% }` (written for the careers form,
 * which sits on black). Every rule here that touches a label beats it on specificity, so the mat names, the
 * rent/buy and delivery choices never render white on white (docs/reference/customizer-backups/).
 */

.wpcf7 .mvk-guided .mvk-q {
	display: block;
	margin: 22px 0 8px;
	color: #000;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
}
.wpcf7 .mvk-guided .mvk-q:first-child { margin-top: 0; }
.wpcf7 .mvk-guided .mvk-hint {
	display: block;
	margin: -4px 0 10px;
	color: #555;
	font-size: 13px;
}

/* The mat pages put the form on the brand-blue panel, where the grey hint and a ticked tile's blue edge vanish:
   their form wraps itself in .mvk-card, a white card like the contact page's. */
.wpcf7 .mvk-guided.mvk-card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
}

/* Every checkbox/radio option label inside the guided form reads dark (the "services" Mats/Fuel boxes included). */
.wpcf7 .mvk-guided .wpcf7-list-item label,
.wpcf7 .mvk-guided .wpcf7-list-item-label {
	color: #1f1f1f;
	width: auto;
}

/* Inputs the Customizer CSS does not cover (it styles text/email/tel/url/select only). */
.wpcf7 .mvk-guided input[type="number"],
.wpcf7 .mvk-guided input[type="date"] {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	width: 100%;
	max-width: 100%;
	height: 36px;
	padding: 8px 10px;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
	color: #1f1f1f;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.04) 1px 1px 3px;
	margin-bottom: 15px;
	-webkit-appearance: none;
	appearance: none;
}
.wpcf7 .mvk-guided input[type="date"] { min-width: 0; }
.wpcf7 .mvk-guided input[type="date"]:not(:focus):invalid { color: #757575; }

/* Two fields side by side (quantity + unit, city + state). */
.wpcf7 .mvk-guided .mvk-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.wpcf7 .mvk-guided .mvk-row > .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; }
.wpcf7 .mvk-guided .mvk-row > .wpcf7-form-control-wrap:first-child { flex: 0 0 38%; }
.wpcf7 .mvk-guided .mvk-row .wpcf7-form-control { width: 100%; }

/* Path width: only when the quantity is in linear feet (form.js). */
.wpcf7 .mvk-guided .mvk-path[hidden] { display: none; }

/* The mat picture menu: categories, tick as many as the job needs (checkboxes, 2026-10-27). */
.wpcf7 .mvk-guided .mvk-mats { display: block; margin: 0 0 15px; }
.wpcf7 .mvk-guided .mvk-mats-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: 12px;
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat {
	position: relative;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 2px solid #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	color: #1f1f1f;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat:hover { border-color: #9ad9f0; }
.wpcf7 .mvk-guided .mvk-mats .mvk-mat input {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat .mvk-mat-name {
	display: block;
	padding: 8px 10px 9px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	color: #1f1f1f;
	text-align: center;
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat .mvk-mat-tick {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat:has(input:checked) .mvk-mat-tick,
.wpcf7 .mvk-guided .mvk-mats .mvk-mat.is-checked .mvk-mat-tick {
	background: #01b8f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat.is-checked,
.wpcf7 .mvk-guided .mvk-mats .mvk-mat:has(input:checked) {
	border-color: #01b8f0;
	box-shadow: 0 0 0 3px rgba(1, 184, 240, 0.25);
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat:has(input:checked) .mvk-mat-name,
.wpcf7 .mvk-guided .mvk-mats .mvk-mat.is-checked .mvk-mat-name {
	background: #01b8f0;
	color: #fff;
}
.wpcf7 .mvk-guided .mvk-mats .mvk-mat:has(input:focus-visible),
.wpcf7 .mvk-guided .mvk-mats .mvk-mat.is-focused {
	outline: 3px solid #01799d;
	outline-offset: 2px;
}

/* How many of each ticked category (1.2.0): a box per category; form.js shows the ticked ones. Since 1.5.0 each box
   follows its own tile in the grid and spans the full width, so it opens right under the row of the picture just
   ticked (the dense flow above keeps the neighbouring tile beside it). */
.wpcf7 .mvk-guided .mvk-mats-grid > .mvk-detail { grid-column: 1 / -1; }
.wpcf7 .mvk-guided .mvk-detail {
	display: block;
	margin: 0;
	padding: 10px 12px 12px;
	border: 1px solid #e2e2e2;
	border-left: 4px solid #01b8f0;
	border-radius: 6px;
	background: #f8fbfd;
}
.wpcf7 .mvk-guided .mvk-detail[hidden] { display: none; }
.wpcf7 .mvk-guided .mvk-detail .mvk-detail-name { display: block; margin: 0 0 8px; color: #1f1f1f; font-size: 14px; font-weight: 600; line-height: 1.3; }
.wpcf7 .mvk-guided .mvk-detail select.mvk-size { display: block; width: 100%; margin: 0 0 10px; }
.wpcf7 .mvk-guided .mvk-detail .mvk-detail-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wpcf7 .mvk-guided .mvk-detail input.mvk-qty { flex: 0 0 130px; width: 130px; margin: 0; }
.wpcf7 .mvk-guided .mvk-detail .mvk-units { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.wpcf7 .mvk-guided .mvk-detail .mvk-units label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 0;
	padding: 6px 12px;
	border: 2px solid #e2e2e2;
	border-radius: 20px;
	background: #fff;
	color: #1f1f1f;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
}
.wpcf7 .mvk-guided .mvk-detail .mvk-units label:has(input:checked) { border-color: #01b8f0; background: #e6f7fd; }
.wpcf7 .mvk-guided .mvk-detail .mvk-math { color: #01799d; font-size: 15px; font-weight: 600; }
.wpcf7 .mvk-guided .mvk-detail .mvk-math:empty { display: none; }
.wpcf7 .mvk-guided .mvk-detail .mvk-units input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	min-width: 0;
	margin: 0;
	padding: 0;
	accent-color: #01b8f0;
	-webkit-appearance: radio;
	appearance: radio;
}

/* Rent/buy and delivery as pill buttons (Contact Form 7 radio markup). */
.wpcf7 .mvk-guided .mvk-pills .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 15px;
}
.wpcf7 .mvk-guided .mvk-pills .wpcf7-list-item {
	margin: 0;
	display: block;
	flex: 0 0 auto;
	max-width: 100%;
}
.wpcf7 .mvk-guided .mvk-pills .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 8px 16px;
	border: 2px solid #e2e2e2;
	border-radius: 25px;
	color: #1f1f1f;
	font-size: 14px;
	line-height: 1.3;
	background: #fff;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wpcf7 .mvk-guided .mvk-pills .wpcf7-list-item label:hover { border-color: #9ad9f0; }
.wpcf7 .mvk-guided .mvk-pills .wpcf7-list-item input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	min-width: 0;
	margin: 0;
	padding: 0;
	accent-color: #01b8f0;
	-webkit-appearance: radio;
	appearance: radio;
}
.wpcf7 .mvk-guided .mvk-pills .wpcf7-list-item-label { color: inherit; width: auto; }
.wpcf7 .mvk-guided .mvk-pills .wpcf7-list-item label:has(input:checked) {
	border-color: #01b8f0;
	background: #e6f7fd;
}

/* Validation messages under a wrap, the way Contact Form 7 draws them. */
.wpcf7 .mvk-guided .wpcf7-not-valid-tip { margin: -10px 0 12px; font-size: 13px; }
.wpcf7 .mvk-guided .mvk-mats + .wpcf7-not-valid-tip,
.wpcf7 .mvk-guided .wpcf7-radio + .wpcf7-not-valid-tip { margin-top: -8px; }

@media (max-width: 575px) {
	.wpcf7 .mvk-guided .mvk-mats-grid { gap: 10px; }
	.wpcf7 .mvk-guided .mvk-detail .mvk-qty { flex-basis: 100%; width: 100%; }
	.wpcf7 .mvk-guided .mvk-mats .mvk-mat .mvk-mat-name { font-size: 12px; padding: 7px 6px 8px; }
	.wpcf7 .mvk-guided .mvk-row > .wpcf7-form-control-wrap:first-child { flex-basis: 42%; }
	.wpcf7 .mvk-guided .mvk-pills .wpcf7-radio { flex-direction: column; align-items: stretch; }
	.wpcf7 .mvk-guided .mvk-pills .wpcf7-list-item label { width: 100%; white-space: normal; }
}