/* Restores the desktop composition from block-embedded-image_3.html. */
#tt-request-block.tt-request-block {
  --line: #424242;
  --line-op: 1;
}

#tt-request-block.tt-request-block.tt-request-block--light {
  --field-fill: rgba(255, 255, 255, .55) !important;
  --field-fill-hover: rgba(255, 255, 255, .70) !important;
  --field-fill-focus: rgba(255, 255, 255, .82) !important;
}

#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui input,
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui textarea {
  background: rgba(255, 255, 255, .55) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui input:hover,
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui textarea:hover {
  background: rgba(255, 255, 255, .70) !important;
}

#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui input:focus,
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui textarea:focus {
  background: rgba(255, 255, 255, .82) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* The phone control owns the fill for both the country code and the number.
   Keep the nested input transparent so the field reads as one surface. */
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui .tt-phone-control input[type="tel"],
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui .tt-phone-control input[type="tel"]:hover,
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui .tt-phone-control input[type="tel"]:focus {
  background: transparent !important;
}

#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui .tt-phone-control input[type="tel"]:-webkit-autofill,
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui .tt-phone-control input[type="tel"]:-webkit-autofill:hover,
#tt-request-block.tt-request-block.tt-request-block--light .tt-request-ui .tt-phone-control input[type="tel"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tt-phone-fill) inset !important;
}

/* Final error-color override: keep both CSS color channels orange in WebKit. */
#tt-request-block.tt-request-block .tt-request-ui .tt-f-err,
#tt-request-block.tt-request-block .tt-request-ui .tt-f-err::before {
  color: #ff5c17 !important;
  -webkit-text-fill-color: #ff5c17 !important;
  opacity: 1 !important;
}

/* Summary shown after an invalid submit follows the same error palette as
   the individual field messages. Neutral and success states stay unchanged. */
#tt-request-block.tt-request-block .tt-request-state[data-tone="error"] {
  color: var(--accent, #ff5c17) !important;
  -webkit-text-fill-color: var(--accent, #ff5c17) !important;
}

/* Keep required-field markers beside the label without letting them wrap. */
#tt-request-block .tt-f-label {
  white-space: nowrap !important;
}

#tt-request-block .tt-f-label i,
#tt-request-block .tt-f-label .tt-required-dot {
  position: static !important;
  display: inline-block !important;
  margin: 0 0 0 1px !important;
  color: var(--cold, #dcdcdc) !important;
  font-size: .75em !important;
  line-height: 1 !important;
  vertical-align: super !important;
  transform: none !important;
}

/* Errors add height only to their own field. The submit control must retain
   its fixed row and centre its contents independently of those error rows. */
#tt-request-block .tt-f--submit .tt-f-control {
  align-self: start !important;
}

#tt-request-block .tt-f--submit .tt-request-submit {
  display: grid !important;
  grid-auto-flow: column !important;
  place-content: center !important;
  align-self: start !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

#tt-request-block .tt-f--submit .tt-request-submit > span {
  align-self: center !important;
}

@media (min-width: 981px) {
  #tt-request-block.tt-request-block:has(.tt-request-intro) {
    height: calc(600px * var(--tt-request-scale)) !important;
    min-height: calc(600px * var(--tt-request-scale)) !important;
  }

  #tt-request-block:has(.tt-request-intro) .tt-request-stage,
  #tt-request-block:has(.tt-request-intro) .tt-request-grid-lines {
    height: 600px !important;
  }


  #tt-request-block .tt-request-intro {
    position: absolute !important;
    z-index: 4 !important;
    left: 616px !important;
    top: 34px !important;
    width: 516px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cold) !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  #tt-request-block .tt-request-title {
    position: absolute !important;
    left: 68px !important;
    top: 43px !important;
    width: 400px !important;
    height: 200px !important;
    margin: 0 !important;
    font-size: 82px !important;
    letter-spacing: .82px !important;
  }

  #tt-request-block .tt-request-title span { position: absolute !important; }
  #tt-request-block .tt-request-word--service { left: 0 !important; top: 0 !important; }
  #tt-request-block .tt-request-word--request { left: -2px !important; top: 78px !important; }

  #tt-request-block:has(.tt-request-intro) .tt-request-ui {
    position: absolute !important;
    left: 524px !important;
    top: 98px !important;
    width: 608px !important;
  }

  #tt-request-block .tt-f {
    grid-template-columns: 70px 516px !important;
    column-gap: 22px !important;
  }

  #tt-request-block .tt-request-ui input,
  #tt-request-block .tt-request-ui textarea {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 400 !important;
  }
}

#tt-request-block .tt-request-ui input::placeholder,
#tt-request-block .tt-request-ui textarea::placeholder {
  font-size: 12px !important;
  line-height: 15px !important;
  font-weight: 400 !important;
}

@media (max-width: 980px) {
  #tt-request-block .tt-request-ui input,
  #tt-request-block .tt-request-ui textarea {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 400 !important;
  }
}