/* CSS Document */
.estimate {
	margin: 0 20px;
	
	h1 {
		margin: 0 0 20px 0;
		font-size: 1rem;
		line-height: 1rem;
	}
	
	h2 {
		margin: 20px 0 0 0;
		font-size: 1rem;
		line-height: 1rem;	
	}

	.steps {
		display: flex;
		justify-content: space-between;
		position: relative;
		max-width: 400px;
		margin: 0 auto;

		.background {
			border: dashed 1px #cccc;
			position: absolute;
			top: 32%;
			left: 50%;
			transform: translateX(-50%);
			width: 94%;
			z-index: -1;
		}

		.step {
			display: flex;
			flex-direction: column;
			align-items: center;

			.circle {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background-color: #ccc;
				transition: background-color 0.4s ease;

				&.active {
					background-color: var(--dark-blue);
				}
			}

			h1 {
				font-weight: normal;
				font-size: .75rem;
				line-height: .75rem;
				margin: 0;
				color: #000;
				width: 50px;
			}
		}
	}
	
	form {
		display: grid;
		grid-template-columns: 1fr;
		align-items: start;
		margin:20px auto 0 auto;
		
		.error {
			background-color:#ffdddd;	
		}
	
		label {
			display: block;
			text-align: left;
		}
		
		.step {
			grid-area: 1 / 1;
			opacity: 0;
  			visibility: hidden;
			transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, display 0.3s ease-in-out allow-discrete;
			display:none;
			width:100%;
			
			&.active {
				opacity: 1;
  				visibility: visible;
				display:block;
			}
			
			@starting-style {
				.active {
					opacity:0;	
				}
			}
			
			select::picker-icon {
				top:8px;	
			}
		}
	
		.step-one {
			label {
				position: relative;
			}
	
			.zip {
				margin: 10px 0;
			}
		}
	
		.step-two {
			p {
				text-align: left;
				margin:0;
			}
		}
	
		.step-three {
	
			input,
			select {
				margin-bottom: 10px;
			}
	
			label {
				position: relative;
			}
		}
		
		.step-four {
			p {
				margin:0;	
			}
		}
		
		.prev-link {
			text-decoration:none;
			color:var(--dark-blue);
			display:block;
			position:relative;
			width: fit-content;
            margin: 0 auto 10px auto;
			
			&:before {
				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") no-repeat;
                background-position: 50%;
                background-size: 14px;
                background-color: var(--dark-blue);
                border-radius: 50%;
                content: "";
                display: inline-block;
                height: 18px;
                width: 18px;
                transform: rotate(90deg);
                color: white;
				vertical-align:text-bottom;	
				margin-right:5px;
			}
		}
	
		.cta-green {
			width: 100%;
		}
	
		textarea {
			margin: 10px 0;
	
			&:focus {
				outline: none;
			}
		}
	}
	
	.phone-number {
		img {
			width:15px;
			margin:20px 5px 0 0;	
		}
	}
}