/* === FOOTER STYLES (unchanged) === */
#footer {
  position: relative;
  background: url('https://mkt.worldcom.cr/images/bg.jpg') center center no-repeat;
  background-size: cover;
  min-height: 100vh;
  color: #fff;
  font-family: 'Open Sans', 'Montserrat', 'Poppins', Arial, sans-serif;
  overflow: hidden;
}

#footer .footer-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1;
  pointer-events: none;
}

#footer .container,
#footer .footer-bottom,
#footer .copyright {
  position: relative;
  z-index: 2;
}

#footer .hero-logo img {
  max-width: 430px;
  width: 100%;
  margin: 0 auto 18px auto;
  display: block;
}

#footer, #footer * {
  line-height: 1.35 !important;
}

#footer .col_full {
  text-align: center;
  padding-top: 70px;
}

#footer a, #footer a:visited {
  color: #71e15c !important;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}

#footer sup {
  font-size: 0.75em;
  top: -0.5em;
}

#footer .bi {
  font-size: 1.35em;
  vertical-align: -0.125em;
}

#footer .bi-envelope-fill {
  margin-left: 6px;
}
#footer b {
  font-weight: 700;
}
#footer .footer-bottom {
  margin-top: 1.0rem;
}
#footer .cheetah-img {
  display: block;
  margin: 50px auto 50px auto;
  max-width: 110px;
}
#footer .copyright {
  text-align: center;
}

/* Responsive: Reduce top padding on small screens */
@media (max-width: 575.98px) {
  #footer .col_full { padding-top: 40px; }
  #footer .hero-logo img { max-width: 260px; }
}

/* === SIGN-FORM FIELD STYLES === */
form.sign-form label {
  display: inline !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-weight: 400 !important;
}

.tyc-link {
  color: #56a248 !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
.tyc-link:hover, .tyc-link:focus {
  color: #268a2c !important;
  text-decoration: none !important;
}

/* Placeholder color and focus */
.form-control::placeholder {
  color: #979797;
  opacity: 1;
  transition: color 0.2s;
}
.form-control:focus::placeholder {
  color: #cecece;
  opacity: 1;
}
.form-control.is-invalid {
  border-color: #ff8787 !important;
  box-shadow: 0 0 0 0.15rem rgba(255,0,0,.12);
}
.invalid-feedback {
  color: #ff5b5b !important;
  font-weight: 600;
}

/* === INPUT GROUPS & FIELD CORE === */
.sign-form .input-group {
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
  flex-wrap: nowrap !important;
  position: relative; /* To contain absolute icons */
}
.sign-form .input-group-text {
  height: 50px !important;
  min-width: 50px;
  font-size: 20px !important;
  background: #fff !important;
  border: 1px solid #e7ecf0 !important;
  border-right: none !important;
  border-radius: 5px 0 0 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  padding: 0 8px !important;
}
.sign-form .input-group-text .sign-icon {
  font-size: 1.5rem !important;
  color: #92989e !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.sign-form .form-control {
  background: #fff !important;
}

/* Remove border-radius by default */
.sign-form .input-group .form-control {
  height: 50px !important;
  font-size: 15px !important;
  background: #fff !important;
  border: 1px solid #e7ecf0 !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-left: 12px !important;
  padding-right: 2.3em !important;  /* <-- Add room for icon! */
  box-sizing: border-box !important;
}

/* When Validar is present: remove right border/radius */
.sign-form .input-group:has(#btnConvertCoord) .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}
/* When Validar is NOT present: restore right border/radius */
.sign-form .input-group:not(:has(#btnConvertCoord)) .form-control {
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-radius: 0 5px 5px 0 !important;
  border-right: 1px solid #e7ecf0 !important;
}

/* Button styles */
.sign-form .input-group .btn {
  height: 50px !important;
  font-size: 15px !important;
  padding: 0 22px !important;
  border: 1px solid #388c7c !important;
  border-left: 1px solid #388c7c !important;
  border-radius: 0 5px 5px 0 !important;
  background: #388c7c !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 11;
}

/* Disabled button */
.sign-form .input-group .btn:disabled {
  background: #bbb !important;
  border: 1px solid #4f4f4f !important;
  border-left: 1px solid #4f4f4f !important;
  opacity: 0.65;
  color: #4f4f4f !important;
}

/* Responsive fix for small screens */
@media (max-width: 575.98px) {
  .sign-form .input-group,
  .sign-form .input-group .form-control,
  .sign-form .input-group .input-group-text,
  .sign-form .input-group .btn {
	height: 40px !important;
	font-size: 14px !important;
  }
  .sign-form .input-group .form-control {
	padding-right: 2em !important;
  }
}

/* Submit button and disabled state */
.sign-form .submit-btn {
  background: #388c7c;
  border: 1px solid #388c7c;
  color: #fff;
}
.sign-form .submit-btn:disabled {
  background: #ccc !important;
  border-color: #919191 !important;
  color: #4f4f4f !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Checkbox accent color */
#acepto {
  accent-color: #fff !important;
  background: #fff !important;
  border: 1.5px solid #bbb !important;
}
#acepto:checked {
  accent-color: #388c7c !important;
}

/* Animate transition for the button */
.sign-form .input-group .btn.hide-btn {
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.66,0,0.34,1);
  pointer-events: none;
}

/* === CHECKMARK & X SUPPORT FOR ALL FIELDS (input-group and form-group) === */
.sign-form .input-group,
.sign-form .form-group {
  position: relative;
}

/* INPUT GROUP: Vertically center, correct size, both icons */
.sign-form .input-group .validation-icon,
.sign-form .input-group .checkmark-icon,
.sign-form .input-group .invalid-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 1.35em !important;
  z-index: 10;
  pointer-events: none;
  background: transparent;
  line-height: 1;
  padding: 0;
  transform: translateY(-7px);
}
/* Green checkmark */
.sign-form .input-group .checkmark-icon,
.sign-form .input-group .bi-check-circle-fill.validation-icon {
  color: #56a248 !important;
  fill: #56a248 !important;
}
/* Red X */
.sign-form .input-group .invalid-icon,
.sign-form .input-group .bi-x-circle-fill.validation-icon {
  color: #ff3e3e !important;
  fill: #ff3e3e !important;
}

/* FORM GROUP: Simpler vertical centering */
.sign-form .form-group .validation-icon,
.sign-form .form-group .checkmark-icon,
.sign-form .form-group .invalid-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35em !important;
  z-index: 10;
  pointer-events: none;
  background: transparent;
  line-height: 1;
}
/* Green checkmark */
.sign-form .form-group .checkmark-icon,
.sign-form .form-group .bi-check-circle-fill.validation-icon {
  color: #56a248 !important;
  fill: #56a248 !important;
}
/* Red X */
.sign-form .form-group .invalid-icon,
.sign-form .form-group .bi-x-circle-fill.validation-icon {
  color: #ff3e3e !important;
  fill: #ff3e3e !important;
}

/* Don't shift button, icon overlays on top of right side of field */
.sign-form .input-group .btn {
  position: relative;
  z-index: 11;
}

.invalid-icon,
.bi-x-circle-fill.invalid-icon,
.sign-form .input-group .invalid-icon,
.sign-form .form-group .invalid-icon {
  color: #ff3e3e !important;
  fill: #ff3e3e !important;
}

.checkmark-icon,
.bi-check-circle-fill.checkmark-icon,
.bi-check-circle-fill.validation-icon,
.input-group .checkmark-icon,
.form-group .checkmark-icon {
  color: #56a248 !important;
  fill: #56a248 !important;
}

/* Avoid checkmark/X overlap on small screens */
@media (max-width: 575.98px) {
  .validation-icon,
  .checkmark-icon,
  .invalid-icon {
	font-size: 1.1em !important;
	right: 8px;
  }
  .sign-form .input-group .form-control {
	padding-right: 1.8em !important;
  }
}

#icon-earth.inactive,
#icon-earth.inactive * {
  pointer-events: none !important;
  cursor: not-allowed !important;
}
#icon-earth.inactive .mdi-earth {
  color: #adb5bd !important;
}

/* Default enabled: green */
#icon-earth:not(.inactive) .mdi-earth {
  color: #56a248 !important;
  transition: color 0.15s;
}

/* Hover always wins if enabled and not inactive */
#icon-earth:not(.inactive):hover .mdi-earth {
  color: #0e6600 !important;
  transition: color 0.15s;
  cursor: pointer;
}

/* Focused: green, unless hovered (hover always wins) */
#icon-earth.focus-input:not(.inactive):not(:hover) .mdi-earth {
  color: #56a248 !important;
  transition: color 0.15s;
}