/* VARIABLES */
:root {
  --primary-color: #55910C;
  --secondary-color: #85b52e;
  --third-color: #ff7800;
  --font-family: proxima-nova, sans-serif;
  --font-color: #4D4B4E;
}

/* PAGE */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  line-height: 2;
  display: flex;
  flex-direction: column;
}

/* BASE - BANNER/SIDEBAR */

.banner {
  background-color: var(--primary-color);
  height: 76px;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 5;
}

.banner-title {
  font-size: 2rem;
  color: white;
  display: flex;
  align-items: center;
  margin-left: 30px;
  margin-right: 10px;
  font-weight: 800;
  line-height: 1;
}

.white-box {
  background-color: white;
  height: 100%;
  width: auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.banner-text {
  font-size: 1rem;
  white-space: nowrap;
}

.banner-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: white;
}

.right-line {
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25;
  color: white;
  text-decoration: none;
}

.progress-banner {
  background-color: white;
  height: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  padding-bottom: 8px;
  flex-shrink: 0;
}
#progress-container {
  z-index: 5;
}

.progress-bar-container {
  position: relative;
  top: 0px;
  height: auto;
  display: flex;
  align-items: center;
}

.progress-text-container, .progress-text-container-small {
  position: relative;
  bottom: 0px;
  height: auto;
  display: flex;
  align-items: flex-end;
}
.progress-text-container-small {
  display: none;
}

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

.circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #C0C0C0;
  z-index: 2;
}

.step-text {
  font-size: 1rem;
  line-height: 1;
  color: #C0C0C0;
  text-align: center;
  width: 200px;
  font-weight: bold;
}

.line {
  width: 200px;
  height: 6px;
  background-color: #C0C0C0;
  margin: 0px -9px;
  z-index: 1;
}

/* Active progress states */
.circle.active {
  background-color: var(--primary-color);
}
.step-text.active {
  color: var(--primary-color);
}
.line.active {
  background-color: var(--primary-color);
}

.logo-image {
  width: auto;
  object-fit: contain;
  box-sizing: border-box;
  display: block;
  margin: auto;
}

.main-container {
  display: flex;
  flex: 1;
  height: calc(100vh - <banner-height>);
  min-height: 0;
}

.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.sidebar {
  width: 400px;
  border-top: 2px solid var(--third-color);
  background-color: #F9F9F9;
  padding: 45px 20px 0px;
  z-index: 4;
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sidebar > *:not(.water-mark) {
  flex-shrink: 0;
}
.service-selection-page .sidebar {
  transition: width 0.5s ease;
  width: 850px;
  padding: 30px 36px;
}
/* SIDEBAR SCROLL */
.sidebar::-webkit-scrollbar {
  width: 8px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: background 0.2s ease;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
.sidebar::-webkit-scrollbar-button {
  display: none;
}
.sidebar { /* Firefox support */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.water-mark {
  position: relative;
  bottom: 35px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 5px 0;
  background-color: #F9F9F9;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 12px;
  color: #888;
  margin-top: auto;
  transform: translateY(100%);
  font-weight: bold;
  flex-shrink: 0;
}



.map-wrapper {
  flex: 1;
  position: relative;
  min-height: 0;
  z-index: 10000000;
}

.map {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}






/* SIDEBAR HEADER */
.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: -16px;
}
.header-line {
	width: 65px;
	height: 4px;
	border-radius: 2px;
	border: none;
	background-color: var(--primary-color);
	margin: 0 25px;
}
.header-text {
	white-space: nowrap;
	font-weight: bold;
	color: var(--font-color);
}
.sidebar-subtitle {
  font-size: 1rem;
  text-align: center;
  color: var(--font-color);
  margin-bottom: 32px;
  margin-top: 12px;
  line-height: 1;
}





/* INPUT FIELDS */
.input-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1rem 0;
  font-family: var(--font-family);
}

.input-group label {
  margin-left: 3px;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--font-color);
}

.input-group input {
  padding: 9px 12px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  outline: none;
  width: 100%;
}

.input-group input:focus {
  border-color: #0066ff;
  box-shadow: 0 0 6px rgba(0, 102, 255, 0.4);
}

/* Subtle hover effect */
.input-group input:hover {
  border-color: #bbb;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.input-group input::placeholder {
	font-size: 1rem;
  color: #aaa;
}

.input-group.error input {
  border-color: #e74c3c;
}

.input-group.error label {
  color: #e74c3c;
}

.input-group .error-message {
  color: #e74c3c;
  font-size: 0.875rem;
  margin-top: 4px;
  font-weight: 500;
}

.required {
  margin-left: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: red !important;
  margin-left: 6px;
}




/* SUBMIT BUTTON */
.action-button {
  padding: 12px 16px;
  font-size: 1rem;
  font-family: var(--font-family);
  font-weight: bold;
  border-radius: 8px;
  background-color: var(--secondary-color);
  color: white;
  cursor: pointer;
  outline: none;
  border: none;
  width: 100%;
  display: flex; /* Changed from inline-block to flex */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  margin-bottom: 100px;
  position: relative;
  z-index: 0;
  --glow-color: var(--secondary-color)
}
.action-button:hover {
  filter: brightness(95%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.action-button.clicked {
  animation: none;
}
.progress-arrow-image {
  margin-left: 8px;
  width: 18px;
}

/* BACK BUTTON */
.back-button {
  position: absolute;
  top: 142px;
  left: 20px;
  width: 32px;
  height: 32px;
  align-self: flex-start;
  border-radius: 32px;
  border: 2px solid var(--secondary-color);
  background-color: #F5F5F5;
  color: var(--secondary-color);
  font-size: 18px;
  font-weight: bold;
  line-height: .5;
  object-fit: cover;
  cursor: pointer;
}
.back-button:hover {
	filter: brightness(95%);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ERROR TEXT */
.error-text {
  position: relative;
  bottom: 4px;
  text-align: center;
  line-height: 1;
  font-size: 1rem;
  width: 100%;
  color: #e53e3e;
}








/* ANIMATE BUTTON GLOW */
.animate-btn {
  animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
 0%, 100% {
  box-shadow: 0 0 2px var(--glow-color);
 }
 50% {
  box-shadow: 0 0 15px var(--glow-color);
 }
}





/* BANNER/SIDEBAR DYNAMIC FOR PHONE (MUST BE AT BOTTOM) */

@media (max-width: 991px) {
  .logo-image {
    max-width: 130px;
  }
  .banner-title {
    margin-left: 15px;
  }
  .line, .step-text {
	  width: 175px;
	}
	.service-selection-page .sidebar {
	 width: 85vw;
	}
}

@media (max-width: 767px) {
	css.banner {
	  display: flex;
	  align-items: flex-start;
	  padding: 7px 10px;
	}
	.banner-title {
	  display: none;
	}
	.white-box {
	  padding: 0 8px;
	  margin-bottom: 3px;
	  align-self: flex-start;
	}
	.logo-image {
	  width: auto;
	}
	.line {
	  width: 90px
	}
	.step-text {
	  font-size: 0.875rem;
	  width: 90px;
	}
	.progress-text-container {
	  display: none;
	}
	.progress-text-container-small {
	  display: flex;
	}
	.progress-banner {
	  display: none;
	}
	.back-button {
	  top: 86px;
	}


  /* Change sidebar and map characteristics on mobile for contact-form page */
	.contact-form-page .main-container {
	  flex-direction: column;
	}

	.contact-form-page .map-wrapper {
	  width: 100vw;
	  height: calc(100vh - 200px);
	  top: 0;
	  left: 0;
	  z-index: 1;
	}
	.contact-form-page .sidebar-wrapper {
	  width: 100vw;
	  height: 100vh;
	  position: absolute;
	  margin-top: 0;
	  left: 0;
	  z-index: 2;
	}
	.contact-form-page .sidebar {
	  width: 100vw;
	  height: 100%;
	}

  /* Change sidebar and map characteristics on mobile for service-mapping/service-selection page */
	.service-mapping-page .main-container,
	.service-selection-page .main-container {
	  flex-direction: column;
	}
	.service-mapping-page .sidebar-wrapper {
	 transition: height 0.5s ease;
	 height: 200px;
	 order: 2;
	}
	.service-selection-page .sidebar-wrapper {
	 transition: height 0.5s ease;
	 height: 100%;
	 order: 2;
	}
	.service-mapping-page .sidebar,
	.service-selection-page .sidebar {
	  width: 100vw;
	}
	.service-mapping-page .sidebar,
	.service-selection-page .sidebar {
	  padding: 10px 20px;
	}
	.service-mapping-page .map-wrapper,
	.service-selection-page .map-wrapper {
	  order: 1;
	  flex: 1;
	}
	.service-mapping-page .action-button,
	.service-selection-page .action-button {
	  margin-bottom: 40px;
	}
}



/* HIDE FLAG ON LEAFLET WATERMARK */
.leaflet-control-attribution .leaflet-attribution-flag {
    display: none !important;
}