/* ----- Info / Hint styling ----- */
.field.MoreInfo {
  position: relative;
}

  .field.MoreInfo .caption {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }

  .field.MoreInfo .info-icon {
    font-size: 13px;
    cursor: pointer;
    transition: opacity .2s ease, color .2s ease;
    opacity: .85;
  }

    .field.MoreInfo .info-icon:hover {
      opacity: 1;
    }

  /* Pure CSS tooltip fallback (if you don’t use Bootstrap’s JS tooltips) */
  .field.MoreInfo .info-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    max-width: min(70vw, 320px);
    background: #fff;
    color: #333;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    z-index: 50;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }

  .field.MoreInfo:hover .info-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

/* Visual polish */
.s-Form .form-section-title {
  margin-top: 1rem;
  margin-bottom: .5rem;
  font-weight: 600;
  font-size: 14px;
  opacity: .8;
}