/* V0LT V18.48 — orange outlined floating fields.
   Scoped to the repair-details and Contact forms. No shared page styles,
   booking logic, field requirements or delivery handlers are changed. */
#zt-booking-form,
#ct-contact-form {
  --v0lt-field-focus: #ff4b16;
  --v0lt-field-label: #c9360a;
  --v0lt-field-glow: rgba(255, 75, 22, .06);
}

/* Repair details: retain the existing floating layout; replace the blue accent.
   A darker orange keeps the small focused label readable on white. */
#zt-booking-form .zt-floating-field :is(input, textarea):focus {
  border: 2px solid var(--v0lt-field-focus);
  box-shadow: 0 0 0 1px var(--v0lt-field-glow);
}
#zt-booking-form .zt-floating-field :is(input, textarea):focus + span {
  color: var(--v0lt-field-label);
}
#zt-booking-form .zt-floating-field input:-webkit-autofill + span {
  color: #59636c;
}
#zt-booking-form .zt-floating-field input:-webkit-autofill:focus + span {
  color: var(--v0lt-field-label);
}
#zt-booking-form .zt-email-suggestion strong {
  color: var(--v0lt-field-label);
}
#zt-booking-form .zt-email-suggestion:is(:hover, .active, :focus-visible) {
  background: #fff3ed;
}
/* Errors must win over focused or autofilled styles. */
#zt-booking-form .zt-floating-field.invalid :is(input, textarea),
#zt-booking-form .zt-floating-field :is(input, textarea).invalid,
#zt-booking-form .zt-floating-field :is(input, textarea)[aria-invalid="true"] {
  border: 2px solid var(--zt-red, #c63434);
  box-shadow: none;
}
#zt-booking-form .zt-floating-field.invalid > span,
#zt-booking-form .zt-floating-field :is(input, textarea).invalid + span,
#zt-booking-form .zt-floating-field :is(input, textarea)[aria-invalid="true"] + span {
  color: var(--zt-red, #c63434);
}

/* Contact: use real label elements, not placeholder-only labels. The existing
   two-column / mobile one-column grid, field IDs and error associations stay. */
#ct-contact-form .ct-floating-field {
  position: relative;
  display: block;
  min-width: 0;
}
#ct-contact-form .ct-floating-field :is(input, textarea) {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid #cbd1d6;
  border-radius: 12px;
  background: #fff;
  color: #142233;
  outline: 0;
  box-shadow: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
#ct-contact-form .ct-floating-field input {
  height: 58px;
  min-height: 58px;
  padding: 20px 16px 8px;
}
#ct-contact-form .ct-floating-field textarea {
  min-height: 124px;
  padding: 24px 16px 16px;
  line-height: 1.5;
  resize: vertical;
}
#ct-contact-form .ct-floating-field > label {
  position: absolute;
  top: 29px;
  left: 13px;
  max-width: calc(100% - 28px);
  padding: 0 5px;
  margin: 0;
  background: #fff;
  color: #68727b;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: left center;
  transition: top .14s ease, font-size .14s ease, color .14s ease;
}
#ct-contact-form .ct-floating-textarea > label {
  top: 24px;
}
#ct-contact-form .ct-floating-field > label > span {
  margin-left: 4px;
  color: inherit;
  font-size: .82em;
  font-weight: 500;
}
#ct-contact-form .ct-floating-field :is(input, textarea)::placeholder {
  color: #778496;
  opacity: 0;
  transition: opacity .12s ease;
}
#ct-contact-form .ct-floating-field :is(input, textarea):focus::placeholder {
  opacity: 1;
}
#ct-contact-form .ct-floating-field :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label {
  top: 0;
  color: #59636c;
  font-size: 13px;
  font-weight: 650;
}
#ct-contact-form .ct-floating-field input:-webkit-autofill + label {
  top: 0;
  color: #59636c;
  font-size: 13px;
  font-weight: 650;
}
#ct-contact-form .ct-floating-field :is(input, textarea):focus {
  border: 2px solid var(--v0lt-field-focus);
  box-shadow: 0 0 0 1px var(--v0lt-field-glow);
  outline: 0;
  /* Match the 1px-to-2px border change without shifting entered text. */
  padding: 19px 15px 7px;
}
#ct-contact-form .ct-floating-field textarea:focus {
  padding: 23px 15px 15px;
}
#ct-contact-form .ct-floating-field :is(input, textarea):focus + label {
  color: var(--v0lt-field-label);
}
#ct-contact-form .ct-floating-field input:-webkit-autofill:focus + label {
  color: var(--v0lt-field-label);
}
#ct-contact-form .ct-floating-field .ct-error {
  display: block;
  margin: 6px 12px 0;
}
#ct-contact-form .ct-floating-field :is(input, textarea)[aria-invalid="true"] {
  border: 2px solid #bb2d1f;
  background: #fff;
  box-shadow: none;
  padding: 19px 15px 7px;
}
#ct-contact-form .ct-floating-field textarea[aria-invalid="true"] {
  padding: 23px 15px 15px;
}
#ct-contact-form .ct-floating-field :is(input, textarea)[aria-invalid="true"] + label {
  top: 0;
  color: #bb2d1f;
  font-size: 13px;
  font-weight: 650;
}
@media (prefers-reduced-motion: reduce) {
  #ct-contact-form .ct-floating-field :is(input, textarea, label),
  #ct-contact-form .ct-floating-field :is(input, textarea)::placeholder {
    transition: none;
  }
}