/* =========================================================
   Online estimate form (MW WP Form 496)
   The markup inside .mw_wp_form is stored in the form settings and printed
   by the plugin, so the rules below follow that markup. They are scoped to
   the plugin's own wrapper so the input, confirm and complete views share
   one look wherever the form is placed.
   ========================================================= */

.kb-contact-form {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 10px;
}

.mw_wp_form .contact {
	max-width: 1100px;
	padding: 60px 60px 20px;
}
.mw_wp_form .contact > h2 {
	margin-bottom: 40px;
}
.mw_wp_form hr.yellow {
	margin: 1rem 0;
	border: 0;
	border-top: 14px solid var(--kb-yellow, #fdc500);
	opacity: 1;
}

/* Two-column table: question on the left, answer on the right */
.mw_wp_form .contact_wrap table {
	width: 100%;
	border-collapse: collapse;
}
.mw_wp_form .contact_wrap th {
	width: 40%;
	padding: 25px;
	font-weight: 700;
	text-align: left;
	vertical-align: middle;
}
.mw_wp_form .contact_wrap td {
	padding: 14px 20px;
	vertical-align: middle;
}

/* Required / optional badges */
.mw_wp_form .hissu,
.mw_wp_form .ninni {
	margin-right: 10px;
	padding: 3px 6px;
	border-radius: 2px;
	color: #fff;
}
.mw_wp_form .hissu { background: #1f5b9a; }
.mw_wp_form .ninni { background: #a7bbd4; }

.mw_wp_form .small_text {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

/* Text fields, select, textarea */
.mw_wp_form .contact_wrap input[type="text"],
.mw_wp_form .contact_wrap input[type="email"],
.mw_wp_form .contact_wrap select,
.mw_wp_form .contact_wrap textarea {
	border: 1px solid #101a38;
	border-radius: 5px;
	background: #fff;
	color: #000;
	font-family: "Yu Gothic UI", sans-serif;
	font-size: 12px;
	line-height: 1.5;
}
.mw_wp_form .contact_wrap input[type="text"],
.mw_wp_form .contact_wrap input[type="email"] {
	width: 100%;
	padding: 12px 21px;
}
.mw_wp_form .contact_wrap .mwform-tel-field input,
.mw_wp_form .contact_wrap .mwform-zip-field input {
	width: auto;
}
.mw_wp_form .contact_wrap .mwform-tel-field input {
	max-width: 90px;
}
.mw_wp_form .contact_wrap select {
	width: 100%;
	padding: 14px 44px 14px 20px;
	appearance: none;
	cursor: pointer;
}
.mw_wp_form .contact_wrap textarea {
	width: 100%;
	max-width: 730px;
	height: 180px;
	padding: 12px;
	resize: vertical;
	transition: .3s;
}
.mw_wp_form .contact_wrap input:focus,
.mw_wp_form .contact_wrap select:focus,
.mw_wp_form .contact_wrap textarea:focus {
	outline: none;
}
.mw_wp_form .contact_wrap ::placeholder {
	color: #aaa;
}

/* Arrow next to the prefecture select (it sits left of the field, as before) */
.mw_wp_form .select_wrap {
	position: relative;
	margin-right: 20px;
}
.mw_wp_form .select_wrap::after {
	content: "";
	position: absolute;
	top: 19px;
	left: -35px;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid;
	border-left: 2px solid;
	transform: rotate(-45deg);
}

/* Item checkboxes: drawn boxes, the real input stays hidden */
.mw_wp_form .checkbox_wrap {
	display: flex;
	flex-wrap: wrap;
}
.mw_wp_form .checkbox_wrap .horizontal-item {
	position: relative;
	display: block;
	width: 260px;
}
/* The plugin's own stylesheet indents every item after the first; the grid here does not. */
.mw_wp_form .checkbox_wrap .horizontal-item + .horizontal-item {
	margin-left: 0;
}
.mw_wp_form .checkbox_wrap label {
	width: 100%;
	padding: 6px 40px;
	color: #3d3d3d;
	font-size: 16px;
	line-height: 1.5;
	cursor: pointer;
}
.mw_wp_form .checkbox_wrap input[type="checkbox"] {
	position: absolute;
	top: 6px;
	left: 40px;
	display: block;
	margin: 0 5px 0 0;
	visibility: hidden;
}
.mw_wp_form .checkbox_wrap .mwform-checkbox-field-text {
	position: relative;
}
.mw_wp_form .checkbox_wrap .horizontal-item::before,
.mw_wp_form .checkbox_wrap .horizontal-item::after {
	content: "";
	position: absolute;
	transition: .3s;
}
.mw_wp_form .checkbox_wrap .horizontal-item::before {
	top: 7px;
	left: 0;
	width: 25px;
	height: 25px;
	border: 1px solid #d8d8d8;
	background: #fff;
}
.mw_wp_form .checkbox_wrap .horizontal-item::after {
	top: 10px;
	left: 5px;
	width: 21px;
	height: 12px;
	border-bottom: 3px solid #101a38;
	border-left: 3px solid #101a38;
	opacity: 0;
	transform: rotate(-45deg);
}
.mw_wp_form .checkbox_wrap .horizontal-item:has(input:checked)::after {
	opacity: 1;
}

/* Submit / back buttons */
.mw_wp_form .btn_wrap {
	margin: 40px 0;
	text-align: center;
}
.mw_wp_form .btn_wrap button {
	width: 40%;
	padding: 20px 0;
	border: 0;
	border-radius: 5px;
	background: #101a38;
	color: #fff;
	font-family: "Yu Gothic UI", sans-serif;
	font-size: 1.3em;
	line-height: 1.5;
}
.mw_wp_form .btn_wrap button:hover {
	opacity: .8;
}

@media (max-width: 768px) {
	.mw_wp_form .contact {
		padding: 40px 10px;
	}
	.mw_wp_form .contact_wrap th,
	.mw_wp_form .contact_wrap td {
		display: block;
		width: auto;
	}
	.mw_wp_form .contact_wrap th {
		padding: 15px 0;
	}
	.mw_wp_form .contact_wrap td {
		padding: 10px 0;
	}
}