/* Book-a-demo popup ported from tracking-api/index.html (#popup-form).
   Every selector is scoped to #popup-form / #popup-form-mssg so it overrides
   the new-design .modal/.pf-content rules in compare-base.css and never leaks. */

body.is-show-popup { overflow: hidden; }

#popup-form {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 991;
  overflow: auto;
}
#popup-form .modal-fade {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 991;
  background: rgba(18, 14, 14, 0.5);
}
#popup-form .modal-form {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  padding: 25px 20px;
}
#popup-form .pf-content {
  display: block;
  position: relative;
  max-width: 100%;
  width: 680px;
  max-height: 90%;
  background: #fff;
  z-index: 999;
  border-radius: 16px;
  padding: 30px 65px 40px;
}
#popup-form .modal-title {
  color: #201E26;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.46px;
}
#popup-form .btn-close {
  position: absolute;
  display: block;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
#popup-form .btn-close svg {
  display: block;
  width: 24px;
  height: 24px;
}
#popup-form .modal-body {
  margin-top: 24px;
}
#popup-form .pf-content {
  opacity: 0;
  margin-top: -20px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
#popup-form.show .pf-content {
  opacity: 1;
  margin-top: 0;
}

.form{}
#popup-form .form .form-item-row {
  display: flex;
  width: 100%;
  gap: 20px;
}
#popup-form .form .form-item {
  width: 100%;
  margin: 0 0 16px;
}
#popup-form .form .form-item input {
  color: #201E26;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14px;
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(116, 111, 140, 0.15);
  background: #FCFCFC;
  padding: 5px 20px;
  outline: none;
}
#popup-form .form .form-item select {
  color: #201E26;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14px;
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(116, 111, 140, 0.15);
  background: #FCFCFC;
  padding: 5px 20px;
  outline: none;
}
#popup-form .form .form-item textarea {
  color: #201E26;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14px;
  display: block;
  width: 100%;
  padding: 10px 20px;
  resize: none;
  height: 96px;
  border-radius: 12px;
  border: 1px solid rgba(116, 111, 140, 0.15);
  background: #FCFCFC;
  padding: 14px 20px;
  outline: none;
}
#popup-form .form .form-item input.error {
  border-color: #FF0004;
  background: #FCFCFC url('../images/input-alert.svg') calc(100% - 10px) center no-repeat;
  background-position: 98% center;
  background-position: calc(100% - 10px) center;
  background-size: 20px;
  padding-right: 45px;
}
#popup-form .form .form-item input:hover {
  border: 1px solid rgba(251, 101, 20, 0.50);
}
#popup-form .form .form-item textarea:hover {
  border: 1px solid rgba(251, 101, 20, 0.50);
}
#popup-form .form .form-item input:focus {
  border: 1px solid rgba(251, 101, 20, 0.50);
}
#popup-form .form .form-item textarea:focus {
  border: 1px solid rgba(251, 101, 20, 0.50);
}
#popup-form .form .form-item input.error:hover {
  border: 1px solid rgba(251, 101, 20, 0.50);
}
#popup-form .form .form-item input.error:focus {
  border: 1px solid rgba(251, 101, 20, 0.50);
}

#popup-form .form .form-item .input-select {
  position: relative;
  z-index: 9;
}
#popup-form .form .form-item .input-select .select-val {
  color: #201E26;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14px;
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(116, 111, 140, 0.15);
  background: #FCFCFC;
  padding: 5px 20px;
  outline: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #9592A6;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14px;
  position: relative;
}
#popup-form .form .form-item .input-select.has-value .select-val {
  color: #131218;
}
#popup-form .form .form-item .input-select:hover .select-val {
  border: 1px solid rgba(251, 101, 20, 0.50);
}
#popup-form .form .form-item .input-select.open .select-val {
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(251, 101, 20, 0.50);
}
#popup-form .form .form-item .input-select .select-val svg {
  stroke: #7B778C;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -10px;
  display: block;
  width: 20px;
  height: 20px;
}
#popup-form .form .form-item .input-select.open .select-val svg {
  stroke: #FB6514;
  transform: rotate(180deg);
}
#popup-form .form .form-item .input-select .select-ul {
  border-radius: 0 0 12px 12px;
  border: 1px solid #E7E7EB;
  background: #FCFCFC;
  padding: 4px;
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  color: #201E26;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.14px;
  display: none;
  max-height: 300px;
  overflow: auto;
}
#popup-form .form .form-item .input-select.open .select-ul {
  display: block;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
#popup-form .form .form-item .input-select .select-ul .li {
  display: block;
  cursor: pointer;
  border-radius: 12px;
  padding: 13px 20px;
  color: #201E26;
}
#popup-form .form .form-item .input-select .select-ul .li:hover {
  background: #E7E7EB;
}
#popup-form .form .form-item .input-select .select-ul .li.active {
  color: #fff;
  background: #FB6514;
}
#popup-form .form .form-item input:placeholder {
  color: #9592A6;
}
#popup-form .form .form-item input::placeholder {
  color: #9592A6;
}
#popup-form .form .form-item textarea:placeholder {
  color: #9592A6;
}
#popup-form .form .form-item textarea::placeholder {
  color: #9592A6;
}

#popup-form .form .btn {
  color: #FCFCFC;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
  border-radius: 12px;
  border: 0.5px solid #FB6514;
  background: #FB6514;
  padding: 13px 24px;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 24px;
  cursor: pointer;
  display: block;
}
#popup-form .form .form-policy {
  color: #5E5B6B;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 20px;
}
#popup-form .form .form-policy a {
  color: #FB6514;
  text-decoration: none;
  outline: none;
}
#popup-form .form .form-policy a:hover {
  text-decoration: underline;
}
#popup-form .form .form-message {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 1.2;
  color: #FF0004;
  background: #ffe5e5;
  border: none;
  border-radius: 6px;
  animation: errorFade 0.3s ease;
  width: 100%;
  letter-spacing: 0.14px;
}
#popup-form .form .form-message.show {
  display: flex;
}
#popup-form .form .form-message svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}


#popup-form-mssg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  align-items: center;
  justify-content: center;
  display: none; 
  background: rgba(0, 0, 0, 0.6);
}
#popup-form-mssg.open {
  display: flex;
}
#popup-form-mssg .popup-cont {
  background: #fff;
  width: 90%;
  max-width: 680px;
  padding: 80px 120px;
  position: relative;
  text-align: left;
  border-radius: 16px;
  z-index: 9;
}
#popup-form-mssg .popup-cont-img {
  width: 84px;
}
#popup-form-mssg .popup-cont-img img {
  display: block;
  width: 100%;
  height: auto;
}
#popup-form-mssg .popup-close {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
#popup-form-mssg .popup-close svg {
  display: block;
  width: 24px;
  height: 24px;
}
#popup-form-mssg .popup-cont-title {
  color: #201E26;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin-top: 24px;
}
#popup-form-mssg .popup-cont-text {
  color: #131218;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16px;
  margin: 16px 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
	#popup-form-mssg .popup-cont {
		padding: 50px 65px;
		max-width: 600px;
	}
	#popup-form-mssg .popup-cont-img {
		width: 60px;
	}
}

@media (max-width: 768px) {
	#popup-form .form .form-item-row {
		display: block;
	}
}

@media (max-width: 640px) {
	#popup-form .pf-content {
		padding: 20px 45px 40px;
	}
	#popup-form-mssg .popup-cont {
		padding: 40px 45px;
	}
	#popup-form-mssg .popup-cont-img {
		width: 50px;
	}
	#popup-form .form .form-item input.error {
		background-size: 18px;
		padding-right: 40px;
	}
	#popup-form .modal-form {
		padding: 0;
	}
	#popup-form .pf-content {
		border-radius: 0;
	}
	body.is-show-popup {
		overflow: hidden;
	}
	#popup-form-mssg .popup-cont {
		width: 100%;
		background: none;
	}
	#popup-form-mssg.open {
		display: block;
		background: #fff;
	}
}

@media (max-width: 485px) {
	#popup-form .pf-content {
		padding: 20px 30px 40px;
	}
	#popup-form-mssg .popup-close {
		right: 10px;
		top: 10px;
	}
	#popup-form-mssg .popup-cont-title {
		font-size: 21px;
	}
	#popup-form-mssg .popup-cont-text {
		font-size: 15px;
	}
	#popup-form-mssg .popup-cont {
		padding: 40px 30px;
	}
	#popup-form .form .form-item input {
		padding: 5px 15px;
	}
	#popup-form .form .form-item select {
		padding: 5px 15px;
	}
	#popup-form .form .form-item textarea {
		padding: 12px 15px;
	}
	#popup-form .btn-close {
		right: 10px;
		top: 10px;
	}
}

/* ---------- Fixes so the popup matches index.html exactly on the new design ---------- */
/* 1) Sit above the new design's fixed marquee/header (z-index up to ~10001) so the
      dark overlay truly covers the whole viewport (index.html's low z-index isn't enough here). */
#popup-form,
#popup-form .modal-fade { z-index: 100000; }
#popup-form .pf-content { z-index: 100001; }
#popup-form-mssg { z-index: 100002; }

/* 2) index.html applies `* { box-sizing: border-box }` globally; the compare pages don't.
      Restore it inside the popup so field heights/paddings keep the original proportions. */
#popup-form *, #popup-form *::before, #popup-form *::after,
#popup-form-mssg *, #popup-form-mssg *::before, #popup-form-mssg *::after {
  box-sizing: border-box;
}

/* 3) The white box must sit under the ENTIRE form. index.html caps it at max-height:90%
      (overflow visible), so a tall form spills out past the white background. Let the
      content box grow to the full form height; #popup-form (overflow:auto) scrolls when
      the form is taller than the viewport. */
#popup-form .pf-content { max-height: none; }