/**
 * Quote form (Gravity Forms 7), rendered by the plain [gravityform] shortcode.
 *
 * Scoped to #gform_wrapper_7 so nothing here leaks into the other forms on the
 * site. Choice fields flagged .yeg-choice-cards become icon buttons; the icons
 * are CSS masks so they inherit the selected colour.
 */

#gform_wrapper_7 {
	--yeg-green: #1f5e2c;
	--yeg-green-dark: #174822;
	--yeg-green-tint: #f1f7f2;
	--yeg-border: #dbe0e4;
	--yeg-text: #1c1f23;
	--yeg-muted: #6b7280;
	--yeg-radius: 10px;

	max-width: 720px;
	margin: 0 auto;
	padding: 32px;
	background: #fff;
	border: 1px solid #e6eaed;
	border-radius: 16px;
	color: var(--yeg-text);
}

@media (max-width: 600px) {
	#gform_wrapper_7 { padding: 20px 16px; border-radius: 12px; }
}

/* ---------------------------------------------------------------- layout */

#gform_wrapper_7 .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 22px;
}

/*
 * GF lays fields out on a 12-column grid and gives some of them
 * "grid-column: span 12", which spawns implicit tracks and leaves the fields
 * without that class sitting at a narrower width. Pin every field to the single
 * column so the whole form lines up.
 */
#gform_wrapper_7 .gform_fields > .gfield {
	grid-column: 1 / -1;
	min-width: 0;
}

/* Email and Phone share a row; everything else spans both columns. */
#gform_wrapper_7 .gform_fields > .yeg-field-half {
	grid-column: span 1;
}

@media (max-width: 600px) {
	#gform_wrapper_7 .gform_fields > .yeg-field-half {
		grid-column: 1 / -1;
	}
}

/* Labels */
#gform_wrapper_7 .gfield_label,
#gform_wrapper_7 legend.gfield_label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--yeg-text);
	margin: 0 0 8px;
	padding: 0;
}

#gform_wrapper_7 .gfield_required {
	color: #b42318;
	margin-left: 3px;
	font-weight: 600;
}

/* Sub-labels (First/Last, City/Postal) */
#gform_wrapper_7 .ginput_complex label {
	font-size: 12px;
	font-weight: 500;
	color: var(--yeg-muted);
	margin: 6px 0 0;
	display: block;
}

/* ---------------------------------------------------------------- inputs */

#gform_wrapper_7 input[type="text"],
#gform_wrapper_7 input[type="email"],
#gform_wrapper_7 input[type="tel"],
#gform_wrapper_7 input[type="number"],
#gform_wrapper_7 input[type="url"],
#gform_wrapper_7 select,
#gform_wrapper_7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font-size: 15px;
	line-height: 1.4;
	font-family: inherit;
	color: var(--yeg-text);
	background: #fff;
	border: 1px solid var(--yeg-border);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
	appearance: none;
}

#gform_wrapper_7 textarea { min-height: 128px; resize: vertical; }

/* GF sizes some containers to 510px; every control should span the column. */
#gform_wrapper_7 .gfield > .ginput_container { width: 100%; max-width: 100%; }
#gform_wrapper_7 .ginput_container input.medium,
#gform_wrapper_7 .ginput_container textarea.medium { width: 100%; }

#gform_wrapper_7 input::placeholder,
#gform_wrapper_7 textarea::placeholder { color: #a6adb5; }

#gform_wrapper_7 input:focus,
#gform_wrapper_7 select:focus,
#gform_wrapper_7 textarea:focus {
	outline: none;
	border-color: var(--yeg-green);
	box-shadow: 0 0 0 3px rgba(31, 94, 44, .12);
}

/* Native arrow for the select, since appearance is stripped above. */
#gform_wrapper_7 select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 40px;
}

/* ------------------------------------------------------- choice cards */

#gform_wrapper_7 .yeg-choice-cards .gfield_radio,
#gform_wrapper_7 .yeg-choice-cards .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	gap: 10px;
}

/* Yes / No sits as two cards rather than stretching across the row. */
#gform_wrapper_7 .yeg-choice-cards--binary .gfield_radio {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 320px;
}

#gform_wrapper_7 .yeg-choice-cards .gchoice {
	position: relative;
	display: flex;
	margin: 0;
}

#gform_wrapper_7 .yeg-choice-cards .gchoice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

#gform_wrapper_7 .yeg-choice-cards .gchoice label {
	flex: 1;
	display: flex;
	/* GF caps choice labels at calc(100% - 32px) to leave room for the radio it
	   draws, and only clears that cap on horizontally-aligned fields. The radio
	   is hidden here, so the cap just clips the text. */
	max-width: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 92px;
	padding: 14px 10px;
	margin: 0;
	text-align: center;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--yeg-text);
	background: #fff;
	border: 1px solid var(--yeg-border);
	border-radius: var(--yeg-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

#gform_wrapper_7 .yeg-choice-cards .gchoice label:hover { border-color: #b9c2c9; }

#gform_wrapper_7 .yeg-choice-cards .gchoice input:checked + label {
	border-color: var(--yeg-green);
	background: var(--yeg-green-tint);
	color: var(--yeg-green);
	box-shadow: inset 0 0 0 1px var(--yeg-green);
}

#gform_wrapper_7 .yeg-choice-cards .gchoice input:focus-visible + label {
	outline: 2px solid var(--yeg-green);
	outline-offset: 2px;
}

/* Icon, drawn as a mask so it takes the label colour. */
#gform_wrapper_7 .yeg-choice-cards .gchoice[data-yeg-choice] label::before {
	content: "";
	width: 26px;
	height: 26px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--yeg-icon) center / contain no-repeat;
	mask: var(--yeg-icon) center / contain no-repeat;
}

#gform_wrapper_7 .yeg-choice-cards--inline .gchoice { flex: 0 0 auto; }

#gform_wrapper_7 .yeg-choice-cards--inline .gchoice label {
	/* The stacked cards use flex:1; in a row that collapses the basis to 0 and
	   the border box ends up narrower than the text. Size to content instead. */
	flex: none;
	flex-direction: row;
	justify-content: flex-start;
	gap: 9px;
	min-height: 0;
	padding: 11px 18px;
	font-size: 14.5px;
}

#gform_wrapper_7 .yeg-choice-cards--inline .gchoice[data-yeg-choice] label::before {
	width: 19px;
	height: 19px;
}

#gform_wrapper_7 .gchoice[data-yeg-choice="vinyl"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='1.5'/%3E%3Cpath d='M3 12h18M10 6v6M16 12v6'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="linoleum"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='4'/%3E%3Cpath d='M8 5h9v8H8'/%3E%3Cpath d='M3 18h18'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="laminate"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 5-9 5-9-5z'/%3E%3Cpath d='M3 14l9 5 9-5'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="hardwood"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='1.5'/%3E%3Cpath d='M9.5 4v16M14.5 4v16'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="engineered-hardwood"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='4' rx='1'/%3E%3Cpath d='M3 13.5h18M3 16.5h18'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="carpet"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9c2-2.6 4-2.6 6 0s4 2.6 6 0 4-2.6 6 0'/%3E%3Cpath d='M3 15c2-2.6 4-2.6 6 0s4 2.6 6 0 4-2.6 6 0'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="tile"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="other"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='.6'/%3E%3Ccircle cx='12' cy='12' r='.6'/%3E%3Ccircle cx='18.5' cy='12' r='.6'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="not-sure"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.4 2.4 0 114.6 1c0 1.6-2.3 2-2.3 3.2'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="yes"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
#gform_wrapper_7 .gchoice[data-yeg-choice="no"] {
	--yeg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- project size */

#gform_wrapper_7 .yeg-sqft { --yeg-sqft-track: #e5e9ec; }

/*
 * The readout rides under the thumb. Both states share a font size and the row
 * has a reserved height, so moving off 0 cannot shift the page.
 */
#gform_wrapper_7 .yeg-sqft-control {
	position: relative;
	padding-bottom: 30px;
}

#gform_wrapper_7 .yeg-sqft-value {
	position: absolute;
	top: 30px;
	left: 0;
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	color: var(--yeg-green);
	transform: translateX(-50%);
	transition: color .15s ease;
}

#gform_wrapper_7 .yeg-sqft-value.is-empty {
	font-weight: 500;
	color: var(--yeg-muted);
}

#gform_wrapper_7 .yeg-sqft-input {
	--yeg-sqft-pct: 0%;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 26px;
	background: none;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

#gform_wrapper_7 .yeg-sqft-input:focus { outline: none; box-shadow: none; }

/* Track, drawn twice because WebKit and Firefox each need their own. */
#gform_wrapper_7 .yeg-sqft-input::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient( to right,
		var(--yeg-green) 0 var(--yeg-sqft-pct),
		var(--yeg-sqft-track) var(--yeg-sqft-pct) 100% );
}

#gform_wrapper_7 .yeg-sqft-input::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--yeg-sqft-track);
}

#gform_wrapper_7 .yeg-sqft-input::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--yeg-green);
}

/* Thumb sized for a fingertip rather than a mouse. */
#gform_wrapper_7 .yeg-sqft-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	margin-top: -10px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--yeg-green);
	cursor: grab;
}

#gform_wrapper_7 .yeg-sqft-input::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--yeg-green);
	cursor: grab;
}

#gform_wrapper_7 .yeg-sqft-input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(31, 94, 44, .18);
}

#gform_wrapper_7 .yeg-sqft-input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgba(31, 94, 44, .18);
}

#gform_wrapper_7 .yeg-sqft-scale {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--yeg-muted);
}

#gform_wrapper_7 .yeg-sqft.is-at-max .yeg-sqft-scale span:last-child {
	visibility: hidden;
}

/* --------------------------------------------------------- file upload */

#gform_wrapper_7 .gform_fileupload_rules {
	display: block;
	font-size: 12px;
	color: var(--yeg-muted);
	margin-top: 8px;
}

/* Drop zone for the multi-file (Project Photos) uploader. */
#gform_wrapper_7 .gform_drop_area {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 20px;
	border: 1px dashed #c9d1d8;
	border-radius: var(--yeg-radius);
	background: #fafbfc;
	text-align: center;
	transition: border-color .15s ease, background-color .15s ease;
}

#gform_wrapper_7 .gform_drop_area::before {
	content: "";
	width: 28px;
	height: 28px;
	background-color: #9aa4ad;
	-webkit-mask: var(--yeg-upload-icon) center / contain no-repeat;
	mask: var(--yeg-upload-icon) center / contain no-repeat;
	--yeg-upload-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M4 17l4.5-4.5a2 2 0 012.8 0L16 17'/%3E%3Cpath d='M14 15l1.8-1.8a2 2 0 012.8 0L21 15.5'/%3E%3C/svg%3E");
}

#gform_wrapper_7 .gform_drop_area:hover,
#gform_wrapper_7 .gform_drop_area.gform_drop_area_hover {
	border-color: var(--yeg-green);
	background: var(--yeg-green-tint);
}

#gform_wrapper_7 .gform_drop_instructions {
	display: block;
	font-size: 14px;
	color: var(--yeg-muted);
}

#gform_wrapper_7 .gform_button_select_files {
	padding: 9px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--yeg-text);
	background: #fff;
	border: 1px solid var(--yeg-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

#gform_wrapper_7 .gform_button_select_files:hover {
	border-color: var(--yeg-green);
	color: var(--yeg-green);
}

#gform_wrapper_7 .gform_button_select_files:focus-visible {
	outline: 2px solid var(--yeg-green);
	outline-offset: 2px;
}

/* Uploaded file list. */
#gform_wrapper_7 .ginput_preview_list { margin: 0; padding: 0; list-style: none; }

#gform_wrapper_7 .ginput_preview {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 9px 12px;
	font-size: 13.5px;
	background: #fff;
	border: 1px solid var(--yeg-border);
	border-radius: 8px;
}

#gform_wrapper_7 .ginput_preview .gform_delete_file,
#gform_wrapper_7 .ginput_preview .gform_delete {
	margin-left: auto;
	color: #b42318;
	cursor: pointer;
}

#gform_wrapper_7 #gform_multifile_messages_7_6 {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: #b42318;
}

/* Kept for any single-file field that may be added later. */
#gform_wrapper_7 input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	padding: 10px 12px;
	border: 1px dashed var(--yeg-border);
	border-radius: 8px;
	background: #fafbfc;
	cursor: pointer;
}

/* -------------------------------------------------------------- submit */

#gform_wrapper_7 .gform_footer {
	margin: 28px 0 0;
	padding: 0;
}

#gform_wrapper_7 .gform_button {
	width: 100%;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--yeg-green);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .15s ease;
}

#gform_wrapper_7 .gform_button:hover { background: var(--yeg-green-dark); }
#gform_wrapper_7 .gform_button:focus-visible { outline: 2px solid var(--yeg-green); outline-offset: 2px; }

/* --------------------------------------------------------- validation */

#gform_wrapper_7 .gfield_error input,
#gform_wrapper_7 .gfield_error select,
#gform_wrapper_7 .gfield_error textarea { border-color: #b42318; }

#gform_wrapper_7 .gfield_validation_message,
#gform_wrapper_7 .validation_message {
	font-size: 13px;
	color: #b42318;
	background: none;
	border: none;
	padding: 6px 0 0;
	margin: 0;
}

#gform_wrapper_7 .gform_validation_errors {
	border: 1px solid #f0c2bd;
	background: #fdf3f2;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 22px;
	box-shadow: none;
}

#gform_wrapper_7 .gform_validation_errors h2 {
	font-size: 15px;
	font-weight: 600;
	color: #b42318;
	margin: 0;
}

/* ------------------------------------------------------------- detail */

#gform_wrapper_7 .charleft,
#gform_wrapper_7 .gfield_description {
	font-size: 12px;
	color: var(--yeg-muted);
	padding-top: 6px;
}

#gform_wrapper_7 .gfield--type-captcha { margin-top: 4px; }

/* The conditional "what do you have" field, once revealed. */
#gform_wrapper_7 .gfield--type-radio { animation: yeg-quote-reveal .18s ease both; }

@keyframes yeg-quote-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#gform_wrapper_7 .gfield--type-radio { animation: none; }
	#gform_wrapper_7 * { transition: none !important; }
}
