:root{

  /* BRAND PRIMARY */
  --primary:#B07459;
  --primary-hover:#8E603F;

  /* DARKS */
  --black:#1F1B1B;
  --dark:#2B2B2B;
  --dark-light:#3A3A3A;

  /* LIGHTS */
  --white:#FFFFFF;
  --off-white:#F4EFEA;
  --light-bg:#F3F0EB;

  /* GREYS */
  --grey:#7B726D;
  --grey-light:#A8A19C;
  --border:#D8D2CC;

  /* SUCCESS */
  --success-bg:#DDEFE2;
  --success-text:#2F6B3B;

  /* MAP / UI */
  --map-dark:#212121;
  --road-dark:#2C2C2C;

  /* SHADOW */
  --shadow:rgba(0,0,0,0.08);

}

.vtq-hilight {
  color: var(--primary);
}

/* ANIMATION STATES */
.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all 0.4s ease;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s ease;
}

/* smooth card feel */
.card {
  transition: all 0.4s ease;
}

/* optional: blur background when route active */
.map-active .info {
  filter: blur(2px);
}

/* Section Container */
.container.mapsection{
  height:90vh;
  background: var(--black);
}

#map{
  flex:1;
  width:100%;
  height:100%;
}

.overmap {
  position: absolute;
  top: 8%;
  right: calc((100vw - 1920px) / 2 + 340px);
  z-index: 10;
  display: flex;
  gap: 40px;
  background: #080808EB;
}

@media (max-height: 800px) {
  .overmap {
    top: 6%;
  }
}

.overmap::before {
  background-image: url('https://swifttow.wfucore.com/wp-content/uploads/2026/05/tow-truck1.jpg');
  background-size: contain;
  content: '';
  width: 100%;
  position: absolute;
  height: 100%;
  opacity: 0.1;
  z-index: 3;
}

.info {
  flex: 1 1;
  max-width: 720px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  padding: 40px;
  z-index: 3;
}

.info h1 {
  font-size: clamp(30px, 4vw, 56px);
  color: var(--white);
  line-height: 1.2;
}

.info-description {
  line-height: 1.8;
  font-size: clamp(16px, 2vw, 18px);
}

.card{
  background:var(--white);
  padding:16px;
  border-radius:14px;
  box-shadow:0 5px 20px var(--shadow);
  width:min(480px, 92vw);
  z-index: 4;	
}

.card h2{
  color:var(--black);
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;	
}

.steps{
  display:flex;
  gap:10px;
  margin-bottom:25px;
}

.step{
  flex:1;
  padding:6px;
  border-radius:8px;
  background:var(--off-white);
  text-align:center;
  font-weight:bold;
  color:var(--grey);
  transition:0.3s;
}

.step.active{
  background:var(--primary);
  color:var(--white);
}

.form-step{
  display:none;
}

.form-step.active{
  display:block;
}

.form-group{
  margin-bottom:18px;
}

.form-buttons{
  display:flex;
  flex-direction:row;
  gap:20px;
}

.form-group label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color:var(--black);
}

.form-group input,
.form-group select{
  width:100%;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  font-size:15px;
  background:var(--white) !important;
  color:var(--black);
  transition:0.3s;
}

.form-group input:focus,
.form-group select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(176,116,89,0.15);
}

.form-group.privacy label {
	font-weight: normal !important;
	font-size: 13px;
}

.form-group.privacy input {
	width: auto !important;
	margin-right: 6px;
}

.form-buttons button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:8px;
  background:var(--primary);
  color:var(--white);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.form-buttons button:hover,
.btn-contact:hover {
  background:var(--primary-hover);
}

.form-buttons button.btn-back{
  max-width:120px;
  background:var(--dark-light);
}

.form-buttons button.btn-back:hover{
  background:var(--dark);
}


.btn-contact {
  text-decoration: none;
  color: var(--white);
  padding: 16px;
  background: var(--primary);
  border-radius: 10px;
  font-size: 18px;
  max-width: 160px;
  text-align: center;
  cursor: pointer;
  margin-right: 20px;	
}

.btn-contact span {
  margin-left: 10px;
  font-weight: 600;
}

.form-box,
.quote-box {
  margin-top:20px;
  padding:16px;
  background:var(--off-white);
  border-radius:10px;
}

.form-box h2, 
.quote-box h2, 
.quote-box{
	text-align:center;
}

.quote-box p{
  font-size: 16px;
  margin: 0 !important;
  color:var(--grey);
}

.quote-price{
  font-size:32px;
  font-weight:bold;
  color:var(--primary);
  margin-top:15px;
}

.success{
  margin-top:20px;
  background:var(--success-bg);
  color:var(--success-text);
  padding:21px;
  border-radius:12px;
  display:none;
  text-align:center;
  font-size:20px;
  font-weight:600;
}

.success h3 {
  line-height: 1.2;
}

.success i{
  font-size:48px;
  padding: 12px;
  color:var(--success-text);
}

.success p {
  color: var(--black);
  font-weight: normal;
  font-size: 16px;
  margin-top: 21px;
}

.success-notice {
  background: #ffc8c8;
  border-radius: 10px;
  margin-bottom: 0;	
  line-height: 1.4;
  text-align: left;
  font-size: 14px !important;
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
}

.success-notice i {
  font-size: 21px;
  color: #ef0101;
}

.quote-data-box{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}

.quote-data{
  flex:1 1;
  min-width:150px;
  text-align:center;
  justify-content:center;
  background:var(--white);
  padding:12px;
  border-radius:8px;
}

.quote-data.location{
  width:100%;
  flex:1 1 auto;
  background:var(--light-bg);
}

.quote-data.location span{
  font-size:16px;
  color:var(--black);
}

.quote-data span{
  font-size:24px;
  font-weight:600;
  color:var(--primary);
	margin: 0;
  line-height: 1;
}

.quote-data p{
  color:var(--grey);
  font-size:13px;
  margin:0;
}

.quote-data.total-price{
  background:var(--primary);
  margin-bottom:16px;
}

.quote-data.total-price span{
  font-size:28px;
}

.quote-data.total-price span,
.quote-data.total-price p{
  color:var(--white);
}

.fa-solid{
  color:var(--primary);
}

/*Tablet*/
@media(max-width:900px){

	.container.mapsection{
	height:auto;
	display: flex;
	flex-direction: column;
	padding: 16px;
	}

	.overmap {
	flex-direction: column;
	order: 1;
	right:0;
	position: relative;
	gap: 10px;	
	}

	.info {
	  padding: 21px;
	}
	.card{
	position:relative;
	width:100%;
	right:auto;
	top:auto;
	margin-top:20px;
	}
	.cta {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-content: center;
	  width: 100%;
	  gap: 20px;
	}

	.btn-contact, .btn-contact:last-of-type {
	  margin: 0;
	  padding: 10px;
	  max-width: 100%;
	  display: block;
	  flex: 1 !important;
	}

	#map{
	min-height: 300px;
	order: 2;
	}

}

/*Mobile*/
@media only screen and (max-width:360px){
	.form-buttons {
	  gap: 10px;
	}
	.form-buttons button {
  	  padding: 6px;
	  line-height: 1.2;
	}
	.card h2, .quote-box p {
	  line-height: 1.1;
	}	
}

@media only screen and (max-width:320px){
	.success h3 {
	  font-size: 24px;
	}	
	.success-notice,
	.form-group.privacy label{
	  font-size: 12px !important;
	}

}