/* TTS PRODUCT CALCULATION FORM UI V2 */

/* Remove the square wrapper outlines from V1. */
.form-calculation-section #calculation-form .form-field {
  position: relative;
  box-shadow: none !important;
}

/* Invalid state belongs to the rounded control itself. */
.form-calculation-section #calculation-form
.form-field.tts-is-invalid > input,
.form-calculation-section #calculation-form
.form-field.tts-is-invalid > select,
.form-calculation-section #calculation-form
.form-field.tts-is-invalid > textarea,
.form-calculation-section #calculation-form
.form-field.tts-is-invalid > label.file {
  box-shadow: inset 0 0 0 2px #a3282b !important;
  outline: none !important;
}

/* Subtle focus, without green corners. */
.form-calculation-section #calculation-form
.form-field:not(.tts-is-invalid) > input:focus,
.form-calculation-section #calculation-form
.form-field:not(.tts-is-invalid) > select:focus,
.form-calculation-section #calculation-form
.form-field:not(.tts-is-invalid) > textarea:focus {
  box-shadow: inset 0 0 0 2px rgba(163, 40, 43, .24) !important;
  outline: none !important;
}

/* On staging the action is always visually available. */
.form-calculation-section #calculation-form
button[name="button"],
.form-calculation-section #calculation-form
button[type="submit"] {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: #a3282b !important;
  color: #fff !important;
  transition:
    background-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.form-calculation-section #calculation-form
button[name="button"][disabled],
.form-calculation-section #calculation-form
button[type="submit"][disabled] {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: #a3282b !important;
  color: #fff !important;
}

@media (hover: hover) {
  .form-calculation-section #calculation-form
  button[name="button"]:hover,
  .form-calculation-section #calculation-form
  button[type="submit"]:hover {
    background: #8f2326 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(122, 29, 32, .16);
  }
}

.form-calculation-section #calculation-form
label.file.tts-file-selected {
  box-shadow: inset 0 0 0 1px rgba(45, 119, 70, .32);
}

.form-calculation-section #calculation-form
label.file.tts-file-selected > span:not(.description) {
  color: #25633a;
}

/* One clear message above the button. */
.form-calculation-section #calculation-form .tts-form-status {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 18px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.35;
}

.form-calculation-section #calculation-form
.tts-form-status[hidden] {
  display: none !important;
}

.form-calculation-section #calculation-form
.tts-form-status--error {
  color: #7f2023;
  background: rgba(163, 40, 43, .07);
  box-shadow: inset 0 0 0 1px rgba(163, 40, 43, .18);
}

.form-calculation-section #calculation-form
.tts-form-status--ok {
  color: #214c30;
  background: rgba(45, 119, 70, .07);
  box-shadow: inset 0 0 0 1px rgba(45, 119, 70, .18);
}

.form-calculation-section #calculation-form
.tts-form-status strong {
  font-weight: 700;
}

.form-calculation-section #calculation-form
.tts-form-status span {
  opacity: .82;
}

@media (max-width: 768px) {
  .form-calculation-section #calculation-form
  .tts-form-status {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
  }
}